|
|
@@ -5,25 +5,28 @@
|
|
|
<transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
|
|
|
<div class="time" v-show="[42].includes(examState)">{{
|
|
|
time.countdownNum
|
|
|
- }}</div>
|
|
|
+ }}</div>
|
|
|
</transition>
|
|
|
- <div class="testBox" :class="{ 'overlap': ![0, 3, 40, 41].includes(examState) }">
|
|
|
- <div class="row" v-for="(items, indexs) in testListArr " :key="indexs">
|
|
|
+ <div class="testBox"
|
|
|
+ :class="{ 'testBox1': styleType == 1, 'testBox2': styleType == 2, 'testBox3': styleType == 3 }">
|
|
|
+ <div class="ul" :class="{ 'overlap': ![0, 3, 40, 41].includes(examState), 'ready': [41].includes(examState) }"
|
|
|
+ v-for="(items, indexs) in testListArr " :key="indexs">
|
|
|
<MultipleItem :ref="(el: any) => { multipleItemRef(el, item.itemNumber, item.area) }"
|
|
|
v-for="(item, index) in items" :query="parameter" :area="item.area" :key="index"
|
|
|
- :itemNumber="item.itemNumber" @returnData="returnData" :examState="examState" :needStart="needStart" />
|
|
|
+ :itemNumber="item.itemNumber" @returnData="returnData" :examState="examState" :needStart="needStart"
|
|
|
+ :styleType="styleType" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="footerBtn">
|
|
|
<template v-if="needStart">
|
|
|
- <div @click="getAgain" v-if="examState == 42 || showTestAgain">再测一次</div>
|
|
|
- <div @click="getOpenOneTestAndStartFace" v-if="examState < 41">开始识别</div>
|
|
|
- <div @click="getStopFace" v-if="examState == 41">停止人脸识别</div>
|
|
|
- <div @click="getStartOneTest" v-if="examState == 43">开始测试</div>
|
|
|
+ <div class="btn" @click="getAgain" v-if="examState == 42 || showTestAgain">再测一次</div>
|
|
|
+ <div class="btn" @click="getOpenOneTestAndStartFace" v-if="examState < 41">开始识别</div>
|
|
|
+ <div class="btn" @click="getStopFace" v-if="examState == 41">停止人脸识别</div>
|
|
|
+ <div class="btn startBtn" @click="getStartOneTest" v-if="examState == 43">开始测试</div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <div @click="getReady" v-if="examState == 43" class="startBtn">开始测试</div>
|
|
|
+ <div class="btn startBtn" @click="getReady" v-if="examState == 43">开始测试</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
<!--倒计时开始-->
|
|
|
@@ -68,8 +71,9 @@ const data = reactive<any>({
|
|
|
showTestAgain: false,//再测一次按钮
|
|
|
testList: [],//获取区列表
|
|
|
multipleItemRefList: [],//获取区列表
|
|
|
+ styleType: null,//展示样式1：1-5个，2：6-10个，3：10个以上
|
|
|
});
|
|
|
-const { timerManager, parameter, time, userInfo, examState, needStart, showTestAgain, testList, multipleItemRefList } = toRefs(data);
|
|
|
+const { timerManager, parameter, time, userInfo, examState, needStart, showTestAgain, testList, multipleItemRefList, styleType } = toRefs(data);
|
|
|
|
|
|
/**
|
|
|
* 创建组件实例
|
|
|
@@ -289,6 +293,8 @@ const returnData = (data: any) => {
|
|
|
if (flag) {
|
|
|
console.log("变更状态：", 41)
|
|
|
examState.value = 41;
|
|
|
+ let txt = parameter.value.gesture ? "请举手看摄像头人脸识别" : "请看摄像头进行人脸识别";
|
|
|
+ speckText(txt);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -366,7 +372,7 @@ const getReady = () => {
|
|
|
speckText(time.value.ready);
|
|
|
timerManager.value.readyTimer = setInterval(() => {
|
|
|
time.value.ready--;
|
|
|
- if (time.value.ready < 1) {
|
|
|
+ if (time.value.ready <= 0) {
|
|
|
getClearTimer("readyTimer");
|
|
|
getStartOneTest();
|
|
|
} else {
|
|
|
@@ -380,7 +386,16 @@ const getReady = () => {
|
|
|
*/
|
|
|
const testListArr = computed(() => {
|
|
|
let list: any = [];
|
|
|
- let num = 3;
|
|
|
+ let num = 0;
|
|
|
+ if (styleType.value == 1) {
|
|
|
+ num = 3
|
|
|
+ }
|
|
|
+ if (styleType.value == 2) {
|
|
|
+ num = 5
|
|
|
+ }
|
|
|
+ if (styleType.value == 3) {
|
|
|
+ num = 10
|
|
|
+ }
|
|
|
let myLength = Math.ceil(testList.value.length / num);
|
|
|
for (let i = 0; i < myLength; i++) {
|
|
|
list[i] = [];
|
|
|
@@ -393,7 +408,7 @@ const testListArr = computed(() => {
|
|
|
return list;
|
|
|
});
|
|
|
|
|
|
-onMounted(() => {
|
|
|
+onBeforeMount(() => {
|
|
|
parameter.value = route.query;
|
|
|
let project = parameter.value.project;
|
|
|
let area = parameter.value.area;
|
|
|
@@ -417,10 +432,25 @@ onMounted(() => {
|
|
|
return obj;
|
|
|
});
|
|
|
//需要开始按钮的项目
|
|
|
- if (testList.value.length > 5) {
|
|
|
+ if (testList.value.length > 10) {
|
|
|
needStart.value = true;
|
|
|
}
|
|
|
+ //展示样式控制
|
|
|
+ if (testList.value.length <= 5) {
|
|
|
+ styleType.value = 1;
|
|
|
+ }
|
|
|
+ if (testList.value.length > 5 && testList.value.length <= 10) {
|
|
|
+ styleType.value = 2;
|
|
|
+ }
|
|
|
+ if (testList.value.length > 10) {
|
|
|
+ styleType.value = 3;
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
//加载WS
|
|
|
+ let project = parameter.value.project;
|
|
|
initWs({ parameter: parameter.value, testTime: time.value.testTime, version: "v2" }, (data: any) => {
|
|
|
let index = testList.value.findIndex((item: any) => {
|
|
|
let examId = `${project}_${item.area}`;
|
|
|
@@ -443,12 +473,11 @@ onUnmounted(() => {
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-$topPadding: 5.19rem;
|
|
|
$waiPadding: 6.51rem;
|
|
|
|
|
|
.main {
|
|
|
width: calc(100% - ($waiPadding * 2));
|
|
|
- height: 76vh;
|
|
|
+ height: 78vh;
|
|
|
padding-top: 10rem;
|
|
|
margin: 0 auto;
|
|
|
display: flex;
|
|
|
@@ -456,12 +485,12 @@ $waiPadding: 6.51rem;
|
|
|
flex-direction: column;
|
|
|
|
|
|
.time {
|
|
|
- width: 28vh;
|
|
|
- height: 28vh;
|
|
|
- line-height: 28vh;
|
|
|
+ width: 20vh;
|
|
|
+ height: 20vh;
|
|
|
+ line-height: 20vh;
|
|
|
border-radius: 50%;
|
|
|
color: #FF9402;
|
|
|
- font-size: 11vh;
|
|
|
+ font-size: 8vh;
|
|
|
text-align: center;
|
|
|
background-image: url("@/assets/images/test/time.png");
|
|
|
background-position: center;
|
|
|
@@ -469,100 +498,12 @@ $waiPadding: 6.51rem;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
right: 50%;
|
|
|
- top: 0;
|
|
|
- margin-right: -24vw;
|
|
|
+ top: -4vh;
|
|
|
+ margin-right: -10vh;
|
|
|
font-family: 'Saira-BlackItalic';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.footerBtn {
|
|
|
- width: 100%;
|
|
|
- padding: 0 calc(13.02rem /2);
|
|
|
- box-sizing: border-box;
|
|
|
- position: fixed;
|
|
|
- bottom: 3vh;
|
|
|
- display: flex;
|
|
|
- justify-content: end;
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
-$topPadding: 5.19rem;
|
|
|
-$waiPadding: 6.51rem;
|
|
|
-
|
|
|
-.testBox {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- .row {
|
|
|
- width: 100%;
|
|
|
- height: 35vh;
|
|
|
- display: flex;
|
|
|
- $listMargin: 10vw;
|
|
|
- $listWidth: calc((100% - $listMargin) / 5);
|
|
|
-
|
|
|
- .list {
|
|
|
- width: $listWidth;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .ready {
|
|
|
- position: absolute;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(1) {
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- justify-content: space-evenly;
|
|
|
-
|
|
|
- .list {
|
|
|
- margin-left: calc($listMargin/4);
|
|
|
- margin-right: calc($listMargin/4);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.overlap {
|
|
|
- .row {
|
|
|
- transition: all 0.5s;
|
|
|
-
|
|
|
- &:nth-child(1) {
|
|
|
- margin-top: 5vh;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- margin-top: -21vh;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.startBtn {
|
|
|
- width: 14.6vw;
|
|
|
- height: 6.1vh;
|
|
|
- line-height: 6.1vh;
|
|
|
- font-size: 3vh;
|
|
|
- color: #1A293A;
|
|
|
- text-align: center;
|
|
|
- border-radius: 1vh;
|
|
|
- cursor: pointer;
|
|
|
- background: radial-gradient(159% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
|
|
|
- box-shadow: 3px 6px 4px 1px rgba(0, 0, 0, 0.1874), inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: #8EFFA9;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
.mask {
|
|
|
position: fixed;
|
|
|
height: 100vh;
|
|
|
@@ -649,4 +590,530 @@ $waiPadding: 6.51rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+.footerBtn {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 calc(13.02rem /2);
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 3vh;
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 14.6vw;
|
|
|
+ height: 6.1vh;
|
|
|
+ line-height: 6.1vh;
|
|
|
+ font-size: 3vh;
|
|
|
+ color: #1A293A;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 1vh;
|
|
|
+ cursor: pointer;
|
|
|
+ background: radial-gradient(159% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
|
|
|
+ box-shadow: 3px 6px 4px 1px rgba(0, 0, 0, 0.1874), inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #8EFFA9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .startBtn {
|
|
|
+ color: #ffffff;
|
|
|
+ background: radial-gradient(159% 126% at 5% 93%, #F99F02 0%, #ED7905 100%);
|
|
|
+ box-shadow: 3px 6px 4px 1px rgba(0, 0, 0, 0.1874), inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #F99F02;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//列表样式写在此父组件里，子组件尽量减少个性化class和style，多样性以父组件控制类型
|
|
|
+::v-deep(.testBox1) {
|
|
|
+ $listMargin: 10vw;
|
|
|
+ $listWidth: calc((100% - $listMargin) / 5);
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .ul {
|
|
|
+ width: 100%;
|
|
|
+ height: 35vh;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+
|
|
|
+ .li {
|
|
|
+ width: $listWidth;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .ready {
|
|
|
+ position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .userInfo {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 1.6rem;
|
|
|
+ background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-bottom: 3px;
|
|
|
+
|
|
|
+ .userInfo-center {
|
|
|
+ .pic {
|
|
|
+ width: calc($listWidth - 1vw);
|
|
|
+ height: calc($listWidth - 1vw);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0 auto 2vh auto;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .area {
|
|
|
+ position: absolute;
|
|
|
+ top: 6vh;
|
|
|
+ color: #203C52;
|
|
|
+ font-size: 5.2vh;
|
|
|
+ line-height: 1;
|
|
|
+ font-family: 'Saira-ExtraBold';
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .pic2 {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 0.44rem solid rgba(26, 41, 58, 0.6315);
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 100%;
|
|
|
+ color: #1A293A;
|
|
|
+ font-size: 2.21rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name2 {
|
|
|
+ padding: 0 0.3rem;
|
|
|
+ border-radius: 1.1rem;
|
|
|
+ background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
|
|
|
+ box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .score {
|
|
|
+ height: 18vh;
|
|
|
+ line-height: 18vh;
|
|
|
+ font-size: 12vh;
|
|
|
+ font-family: 'Saira-BlackItalic';
|
|
|
+ background: #ffffff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 0.55rem solid #13ED84;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 1.6rem;
|
|
|
+ box-sizing: content-box;
|
|
|
+ color: #1A293A;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ width: 2vw;
|
|
|
+ height: 2vw;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: -1.5vw;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -1vw;
|
|
|
+ background-image: url("@/assets/images/home/test_icon.png");
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ border-radius: 50%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ transition: all 0.5s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ justify-content: space-evenly;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ margin-left: calc($listMargin/4);
|
|
|
+ margin-right: calc($listMargin/4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ready.ul {
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ .li:nth-child(2) {
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ background-image: url("@/assets/images/test/ready3.png");
|
|
|
+ background-position: center center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .score {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ .list {
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ background-image: url("@/assets/images/test/ready3.png");
|
|
|
+ background-position: center center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ top: -100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .score {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .overlap.ul {
|
|
|
+ transition: all 0.5s;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin-top: 5vh;
|
|
|
+
|
|
|
+ .li {
|
|
|
+ &::before {
|
|
|
+ display: none
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ display: none
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin-top: -20vh;
|
|
|
+
|
|
|
+ .li {
|
|
|
+ &::before {
|
|
|
+ display: none
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ display: none
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep(.testBox2) {
|
|
|
+ $listMargin: 10vw;
|
|
|
+ $listWidth: calc((100% - $listMargin) / 5);
|
|
|
+
|
|
|
+ .ul {
|
|
|
+ width: 100%;
|
|
|
+ height: 34vh;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 4vh;
|
|
|
+
|
|
|
+ .li {
|
|
|
+ width: $listWidth;
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 3vh;
|
|
|
+ padding: 0.6vw;
|
|
|
+ background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .userInfo {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 1.6rem;
|
|
|
+ background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .userInfo-center {
|
|
|
+
|
|
|
+ .pic {
|
|
|
+ width: 12vw;
|
|
|
+ height: 12vw;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0 auto 2vh auto;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .area {
|
|
|
+ position: absolute;
|
|
|
+ top: 6vh;
|
|
|
+ color: #203C52;
|
|
|
+ font-size: 5.2vh;
|
|
|
+ line-height: 1;
|
|
|
+ font-family: 'Saira-ExtraBold';
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .pic2 {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 0.44rem solid rgba(26, 41, 58, 0.6315);
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 100%;
|
|
|
+ color: #1A293A;
|
|
|
+ font-size: 2.21rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .score {
|
|
|
+ height: 14vh;
|
|
|
+ line-height: 14vh;
|
|
|
+ font-size: 9vh;
|
|
|
+ font-family: 'Saira-BlackItalic';
|
|
|
+ background: #ffffff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 0.55rem solid #13ED84;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 1.6rem;
|
|
|
+ box-sizing: content-box;
|
|
|
+ color: #1A293A;
|
|
|
+ position: relative;
|
|
|
+ display: none;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ width: 2vw;
|
|
|
+ height: 2vw;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: -1.3vw;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -1vw;
|
|
|
+ background-image: url("@/assets/images/home/test_icon.png");
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ border-radius: 50%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ transition: all 0.5s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .overlap {
|
|
|
+ .li {
|
|
|
+ .userInfo {
|
|
|
+ height: 6.2vw;
|
|
|
+
|
|
|
+ .userInfo-center {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .pic {
|
|
|
+ width: 6.2vw;
|
|
|
+ height: 6.2vw;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ .area {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 6.2vw;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 2.5vw;
|
|
|
+ font-family: 'Saira-ExtraBold';
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(#000000, 0.4)
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .pic2 {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 2px solid rgba(26, 41, 58, 0.6315);
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 100%;
|
|
|
+ color: #1A293A;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ border-radius: 2vw;
|
|
|
+ padding: 0.5rem 0;
|
|
|
+ background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
|
|
|
+ box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .score {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep(.testBox3) {
|
|
|
+ $listMargin: 5vw;
|
|
|
+ $listWidth: calc((100% - $listMargin) / 10);
|
|
|
+
|
|
|
+ .ul {
|
|
|
+ width: 100%;
|
|
|
+ height: 14vh;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ margin-bottom: calc($listMargin / 10);
|
|
|
+
|
|
|
+ .li {
|
|
|
+ width: $listWidth;
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 5vh;
|
|
|
+ background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
|
|
|
+
|
|
|
+ .userInfo {
|
|
|
+ padding: 2vh 0.6vw 0 0.6vw;
|
|
|
+ margin-bottom: 0.8vh;
|
|
|
+
|
|
|
+ .userInfo-center {
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 1.3vw;
|
|
|
+ height: 2.6vw;
|
|
|
+ background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.6571) 100%);
|
|
|
+ border: 1px solid #FFFFFF;
|
|
|
+
|
|
|
+ .pic {
|
|
|
+ width: 2.6vw;
|
|
|
+ height: 2.6vw;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .area {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 2.6vw;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 1.4vw;
|
|
|
+ font-family: 'Saira-ExtraBold';
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(#000000, 0.4)
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .pic2 {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 2px solid rgba(26, 41, 58, 0.6315);
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: #1A293A;
|
|
|
+ font-size: 1rem;
|
|
|
+ margin-left: 0.5vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .score {
|
|
|
+ font-size: 3rem;
|
|
|
+ font-family: 'Saira-BlackItalic';
|
|
|
+ text-align: center;
|
|
|
+ color: #1A293A;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
林旭祥