|
@@ -158,23 +158,66 @@ onUnmounted(() => {
|
|
|
<!-- <img class="xlts_img" style="margin-top:20px" src="../assets/home/other_text.png" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="leave_message">
|
|
|
+ <!-- <img class="img" src="../assets/zs/community.png" alt=""> -->
|
|
|
+ <div class="font_blue"> 测试介绍 </div>
|
|
|
+ </div>
|
|
|
<div class="kply">
|
|
|
<div class="kply_inner">
|
|
|
- <div style="padding :20px 40px">
|
|
|
- <div class="cognize_title">
|
|
|
+ <div
|
|
|
+ style="box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.17);box-sizing: border-box;padding: 20px;border-radius: 48px;">
|
|
|
+ <!-- <div class="cognize_title">
|
|
|
{{ cognizeDetail.name }}
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="cognize_img_out">
|
|
|
- <!-- <img src="../assets/kepu/czscz_default.png" width=" 100px" style="margin-right: 20px;" /> -->
|
|
|
+ <img src="../assets/kepu/task_active.png" width=" 100px" height="100px"
|
|
|
+ style="margin-right: 20px;" />
|
|
|
<!-- <img src="../assets/cognize/c2.png" v-show="num == '4'" width="100px"
|
|
|
style="margin-right: 20px;" /> -->
|
|
|
<div class="cognize_des">
|
|
|
- <span class="cpjs">测评介绍:</span>
|
|
|
- <span class="cpjs_detail">{{ cognizeDetail.testExplain }}</span>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ style="display: flex; justify-content: space-between; align-items: center;margin-bottom: 10px;">
|
|
|
+ <span class="cognize_title">
|
|
|
+ {{ cognizeDetail.name }}
|
|
|
+ </span>
|
|
|
+ <div class="scale_button">
|
|
|
+
|
|
|
+ <div class="scale_button_inner" v-show="!isPass">
|
|
|
+ <div class="scale_button_self" @click="startCog(0)">练习测试<img
|
|
|
+ style="height: 12px;margin-left: 8px;" src="../assets/zs/jian.png"
|
|
|
+ alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div :span="12" class="scale_button_inner" v-show="isPass">
|
|
|
+ <div class="scale_button_self" @click="startCog(1)">开始测试 <img
|
|
|
+ style="height: 12px;margin-left: 8px;" src="../assets/zs/jian.png"
|
|
|
+ alt=""></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cognize_js">
|
|
|
+ <span class="cpjs">测评介绍:</span>
|
|
|
+ <span class="cpjs_detail">{{ cognizeDetail.testExplain }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="cpll">
|
|
|
+ <span class="cpll_title">理论:</span>
|
|
|
+ <span class="cpll_detail">{{ cognizeDetail.theory }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="czsm">
|
|
|
+ <span class="czsm_title">操作说明:</span>
|
|
|
+ <span class="czsm_detail">
|
|
|
+ {{ cognizeDetail.description }}
|
|
|
+ {{ cognizeDetail.testDescription }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="cpll">
|
|
|
+ <!-- <div class="cpll">
|
|
|
<span class="cpll_title">理论:</span>
|
|
|
<span class="cpll_detail">{{ cognizeDetail.theory }}</span>
|
|
|
</div>
|
|
@@ -184,23 +227,18 @@ onUnmounted(() => {
|
|
|
{{ cognizeDetail.description }}
|
|
|
{{ cognizeDetail.testDescription }}
|
|
|
</span>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
- <div class="cognize_title2"> {{ cognizeDetail.name }}演示视频:</div>
|
|
|
+ <!-- <div class="cognize_title2"> {{ cognizeDetail.name }}演示视频:</div> -->
|
|
|
|
|
|
- <div class="cognize_video">
|
|
|
- <!-- poster="../assets/cognize/bg_ty.png" -->
|
|
|
+ <!-- <div class="cognize_video">
|
|
|
<video width="60%" height="100%" controls style="border-radius: 40px;">
|
|
|
<source src="../assets/cognize/yd.mp4" type="video/mp4" v-if="flag != 'EMOTION_STROOP'">
|
|
|
- <!-- <source src="../assets/cognize/Stroop.mp4" type="video/mp4"> -->
|
|
|
- <!-- <source :src="requireVideo" type="video/mp4"> -->
|
|
|
- <!-- <source src="../assets/cognize/Stroop.mp4" type="video/mp4"> -->
|
|
|
<source src="../assets/cognize/Stroop.mp4" v-if="flag == 'EMOTION_STROOP'" type="video/mp4">
|
|
|
- <!-- <source src="movie.ogg" type="video/ogg"> -->
|
|
|
您的浏览器不支持 video 标签。
|
|
|
</video>
|
|
|
- </div>
|
|
|
- <div class="scale_button">
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="scale_button">
|
|
|
|
|
|
<div class="scale_button_inner" v-show="!isPass">
|
|
|
<div class="scale_button_self" @click="startCog(0)">练习测试
|
|
@@ -210,9 +248,9 @@ onUnmounted(() => {
|
|
|
<div class="scale_button_self" @click="startCog(1)">开始测试</div>
|
|
|
</div>
|
|
|
|
|
|
- </div>
|
|
|
-
|
|
|
+ </div> -->
|
|
|
|
|
|
+ <!--
|
|
|
<div class="pdf_op">
|
|
|
<div class="pdf_sc">
|
|
|
<img @click="viewPDF" src="../assets/cognize/pdf.png" width="30px"
|
|
@@ -220,21 +258,60 @@ onUnmounted(() => {
|
|
|
<div @click="viewPDF">测试手册</div>
|
|
|
</div>
|
|
|
<div class="pdf_sc">
|
|
|
- <!-- <img @click="viewPDF" width="40px" src="../assets/cognize/yan.png">
|
|
|
- <div @click="viewPDF" class="view">预览</div> -->
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="reference_cla" v-if="cognizeDetail.reference">
|
|
|
- <div class="reference_title">参考文献:</div>
|
|
|
- <div class="reference_detail" v-for="item, index in cognizeDetail.reference.split('//')"
|
|
|
- :key="item">
|
|
|
- <div>[{{ index + 1 }}] </div>
|
|
|
- <div> {{ item }}</div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="cognize_yanshi_out">
|
|
|
+ <img class="img_jiao" src="../assets/cognize/jiao.png" alt="">
|
|
|
+
|
|
|
+ <div class="cognize_yanshi">
|
|
|
+
|
|
|
+ <div class="cognize_video">
|
|
|
+ <!-- poster="../assets/cognize/bg_ty.png" -->
|
|
|
+ <video width="100%" height="100%" controls style="border-radius: 40px;">
|
|
|
+ <source src="../assets/cognize/yd.mp4" type="video/mp4" v-if="flag != 'EMOTION_STROOP'">
|
|
|
+ <!-- <source src="../assets/cognize/Stroop.mp4" type="video/mp4"> -->
|
|
|
+ <!-- <source :src="requireVideo" type="video/mp4"> -->
|
|
|
+ <!-- <source src="../assets/cognize/Stroop.mp4" type="video/mp4"> -->
|
|
|
+ <source src="../assets/cognize/Stroop.mp4" v-if="flag == 'EMOTION_STROOP'"
|
|
|
+ type="video/mp4">
|
|
|
+ <!-- <source src="movie.ogg" type="video/ogg"> -->
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
</div>
|
|
|
+ <div class="cognize_pdf">
|
|
|
+ <div class="pdf_icon">
|
|
|
+ <img style="width: 30%;cursor: pointer;" @click="viewPDF"
|
|
|
+ src="../assets/cognize/pdf_new.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div>111111</div> -->
|
|
|
</div>
|
|
|
|
|
|
+ <div class="congnize_des_new">
|
|
|
+ <div class="cognize_des_vd"><span class="cognize_des_line">{{ cognizeDetail.name }}演示视频</span>
|
|
|
+ </div>
|
|
|
+ <div class="cognize_des_sc">
|
|
|
+ <span class="cognize_des_line">{{ cognizeDetail.name }}测试手册</span>
|
|
|
|
|
|
+ <span class="view" @click="viewPDF">预览</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="reference_cla" v-if="cognizeDetail.reference">
|
|
|
+ <div class="reference_title">参考文献:</div>
|
|
|
+ <div class="reference_detail" v-for="item, index in cognizeDetail.reference.split('//')"
|
|
|
+ :key="item">
|
|
|
+ <div>[{{ index + 1 }}] </div>
|
|
|
+ <div> {{ item }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-dialog v-model="centerDialogVisible" title="预览" width="90%" top="2vh" center>
|
|
@@ -261,6 +338,78 @@ onUnmounted(() => {
|
|
|
</div> -->
|
|
|
</template>
|
|
|
<style lang="scss" scoped>
|
|
|
+.cognize_yanshi_out {
|
|
|
+ margin-top: 50px;
|
|
|
+ box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 40px;
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.img_jiao {
|
|
|
+ position: absolute;
|
|
|
+ height: 30px;
|
|
|
+ top: -30px;
|
|
|
+ left: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+.cognize_yanshi {
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 40px;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.congnize_des_new {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .cognize_des_vd {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 700;
|
|
|
+
|
|
|
+
|
|
|
+ .cognize_des_line {
|
|
|
+ padding-bottom: 5px;
|
|
|
+ background: url(../assets/zs/plan_line.png) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ background-position: bottom
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cognize_des_sc {
|
|
|
+ text-align: center;
|
|
|
+ width: 50%;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 700;
|
|
|
+
|
|
|
+ .cognize_des_line {
|
|
|
+ padding-bottom: 5px;
|
|
|
+ background: url(../assets/zs/plan_line.png) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ background-position: bottom
|
|
|
+ }
|
|
|
+
|
|
|
+ .view {
|
|
|
+ color: #008CFF;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.cognize_real_out {
|
|
|
background-color: #b64d4d;
|
|
|
color: #41348a;
|
|
@@ -272,26 +421,49 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
.home_header_out {
|
|
|
+ scroll-snap-align: start;
|
|
|
padding-bottom: 60px;
|
|
|
width: 100%;
|
|
|
min-width: 1200px;
|
|
|
- background-image: url('../assets/home/bg_ty.png');
|
|
|
+ // background-image: url('../assets/home/bg_ty.png');
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: contain;
|
|
|
- background-color: #B3F1DA; //估计是需要动态
|
|
|
+ // background-color: #B3F1DA; //估计是需要动态
|
|
|
|
|
|
.home_header_inner {
|
|
|
min-height: 1;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
margin: auto;
|
|
|
- width: 1200px;
|
|
|
+ width: 100%;
|
|
|
|
|
|
.xlts_img {
|
|
|
height: 40px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .leave_message {
|
|
|
+
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ width: 860px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .font_blue {
|
|
|
+ position: relative;
|
|
|
+ color: #00DE7E;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: 'Rammetto One-Regular';
|
|
|
+ padding-top: 30px;
|
|
|
+ z-index: 10;
|
|
|
+ background: url(../assets/zs/introduction_testing.png) no-repeat;
|
|
|
+ background-size: auto 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.kply {
|
|
|
width: 100%;
|
|
|
margin-top: 20px;
|
|
@@ -327,14 +499,17 @@ onUnmounted(() => {
|
|
|
|
|
|
.cpll {
|
|
|
margin-top: 10px;
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ padding: 20px;
|
|
|
|
|
|
.cpll_title {
|
|
|
font-size: 14px;
|
|
|
- color: #48D68E;
|
|
|
+ color: #333333;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.cpll_detail {
|
|
|
+ color: #818996;
|
|
|
font-size: 14px;
|
|
|
letter-spacing: 3px;
|
|
|
line-height: 24px;
|
|
@@ -343,15 +518,18 @@ onUnmounted(() => {
|
|
|
|
|
|
.czsm {
|
|
|
margin-top: 10px;
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ padding: 20px;
|
|
|
|
|
|
.czsm_title {
|
|
|
- color: #48D68E;
|
|
|
+ color: #333333;
|
|
|
font-weight: 700;
|
|
|
line-height: 24px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.czsm_detail {
|
|
|
+ color: #818996;
|
|
|
line-height: 24px;
|
|
|
font-size: 14px;
|
|
|
letter-spacing: 3px;
|
|
@@ -359,11 +537,16 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
.cognize_title {
|
|
|
-
|
|
|
font-size: 20px;
|
|
|
letter-spacing: 3px;
|
|
|
font-weight: 700;
|
|
|
- margin-bottom: 10px;
|
|
|
+ display: inline-flex;
|
|
|
+ // margin-bottom: 10px;
|
|
|
+ background-image: url('../assets/zs/plan_line.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ background-position: bottom;
|
|
|
}
|
|
|
|
|
|
.cognize_title2 {
|
|
@@ -374,6 +557,13 @@ onUnmounted(() => {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
+ .cognize_js {
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
.cognize_img_out {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
@@ -384,13 +574,14 @@ onUnmounted(() => {
|
|
|
font-size: 16px;
|
|
|
|
|
|
.cpjs {
|
|
|
- color: #48D68E;
|
|
|
+ color: #333333;
|
|
|
font-weight: 700;
|
|
|
font-size: 14px;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
|
|
|
.cpjs_detail {
|
|
|
+ color: #818996;
|
|
|
line-height: 24px;
|
|
|
letter-spacing: 3px;
|
|
|
font-size: 14px;
|
|
@@ -398,9 +589,37 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .cognize_video_out {
|
|
|
+ display: flex;
|
|
|
+ width: 48%;
|
|
|
+ height: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ // justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
.cognize_video {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ width: 48%;
|
|
|
+ height: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ // justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cognize_pdf {
|
|
|
+ width: 48%;
|
|
|
+ background-color: #D9D9D9;
|
|
|
+ border-radius: 28px;
|
|
|
+
|
|
|
+ .pdf_icon {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #D9D9D9;
|
|
|
+ border-radius: 28px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.pdf_op {
|
|
@@ -423,10 +642,9 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
.scale_button {
|
|
|
- margin-top: 30px;
|
|
|
- margin-bottom: 20px;
|
|
|
display: flex;
|
|
|
- justify-content: space-around;
|
|
|
+ // justify-content: space-around;
|
|
|
+
|
|
|
|
|
|
.scale_button_inner {
|
|
|
text-align: center;
|
|
@@ -435,10 +653,10 @@ onUnmounted(() => {
|
|
|
|
|
|
.scale_button_self {
|
|
|
|
|
|
- border-radius: 12px;
|
|
|
- border: 3px solid #48D68E;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid #48D68E;
|
|
|
color: #ffffff;
|
|
|
- background-color: #000000;
|
|
|
+ background-color: #3B3B3B;
|
|
|
margin-right: 20px;
|
|
|
padding: 10px 40px;
|
|
|
cursor: pointer;
|