新版ui

src/components/CpdmTip.vue

@@ -42,7 +42,7 @@ onUnmounted(() => {
 </script>
 <template>
     <div>
-        <el-dialog v-model="visible" width="500" style="border-radius: 20px;" class="dig_kg"
+        <el-dialog v-model="visible" width="500" style="border-radius: 5px;" class="dig_kg"
             :close-on-click-modal="false">
             <template #header="{ close, titleId, titleClass }">
                 <div class="my-header" style="text-align: center;">
@@ -87,10 +87,10 @@ onUnmounted(() => {
     .start_button_self {
         cursor: pointer;
         // width: 100px;
-        border-radius: 12px;
-        border: 3px solid #48D68E;
+        border-radius: 4px;
+        border: 1px solid #48D68E;
         color: #ffffff;
-        background-color: #000000;
+        background-color: #333333;
         // margin-right: 20px;
         padding: 5px 50px;
         cursor: pointer;

src/components/CpmdHeader.vue

@@ -79,7 +79,7 @@ const formatterName = (val: string) => {
     if (val == undefined) {
         return ''
     }
-    if (val.length > 4) {
+    if (val.length > 3) {
         return val.substring(0, 3) + '...'
     } else {
         return val
@@ -261,19 +261,18 @@ const leaveFun = () => {
 
 .badge_custom {
     position: absolute;
-    background-color: #48D68E;
-    right: -20px;
+    background-color: #6AEF8D;
+    right: -18px;
     top: 0px;
-
+    text-align: center;
     line-height: 18px;
+    width: 18px;
     color: 10px;
-    padding: 0px 8px;
+
     font-weight: 300;
     font-size: 10px;
     color: #ffffff;
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
-    border-bottom-right-radius: 20px;
+    border-radius: 18px;
 }
 
 //整个菜单底部样式
@@ -360,31 +359,34 @@ const leaveFun = () => {
         .login_button_bg {
             position: relative;
 
-            border-radius: 4px;
+            // border-radius: 4px;
             border: 1px solid #ffffff;
             color: #ffffff;
+
             padding: 8px 20px;
             cursor: pointer;
             display: flex;
             align-items: center;
+            width: 60px;
+            justify-content: center;
 
             .login_user {
-                border-bottom-left-radius: 20px;
-                border-bottom-right-radius: 20px;
-                width: 80%;
+                background-color: #3B3B3B;
+                width: 100px;
                 position: absolute;
-                background-color: #ffffff;
+                // background-color: #ffffff;
                 // bottom: -105px;
                 bottom: -105px;
-                margin-left: calc(10% - 20px);
+                // margin-left: calc(10% - 20px);
                 z-index: 200;
                 color: #000000;
+                border: 1px solid #ffffff;
 
                 .update_pass {
                     text-align: center;
                     margin-top: 20px;
                     // padding: 5px;
-                    color: #999999
+                    color: #ffffff
                 }
 
                 .update_pass:hover {
@@ -398,7 +400,7 @@ const leaveFun = () => {
                     // padding: 5px;
                     margin-top: 20px;
                     margin-bottom: 20px;
-                    color: #999999
+                    color: #ffffff
                 }
 
                 .exit_login:hover {

src/components/CpmdQuestionnaire.vue

@@ -186,53 +186,60 @@ const tipFun = () => {
 defineExpose({ open })
 </script>
 <template>
-    <el-dialog v-model="dialogVisible" title="" width="600px" top="15vh">
-        <template #header>
-            <p style="text-align: center;font-weight: 700;">问卷填写</p>
-        </template>
+    <div class="wjdc">
+        <el-dialog v-model="dialogVisible" title="" width="600px" top="15vh" style="padding:0px">
+            <template #header>
+                <div style="text-align: left;font-weight: 700;color: #ffffff;line-height: 60px;margin-left: 20px;">
+                    <span class="wj_title">问卷填写</span>
+                </div>
+            </template>
+            <span style="height: 60vh;display: flex;overflow-y: auto;padding:0px 20px;margin-top:20px">
+                <div v-if="questionList.length > 0">
+                    <div v-for="item, index in questionList" :key="item.id" class="question_out">
+                        <div class="title_out">{{ index + 1 }}:
+                            <span class="xing">{{ item.idMandatory == '1' ? '*' : '' }}</span>
+                            <span style="color: #333333;">{{ item.quesName }}</span>
+                        </div>
+
+                        <el-radio-group v-model="item.optionValue" v-if="item.topicType == '1'" class="question_radio">
+                            <el-radio :label="ch" v-for="ch in item.mulValue" :key="ch"></el-radio>
+                            <!-- <el-radio label="线下场地免费"></el-radio> -->
+                        </el-radio-group>
+                        <div style="margin-top:20px;margin-bottom: 10px;" v-if="item.topicType == '3'">
+                            <el-date-picker v-model="item.optionValue" type="date" placeholder="选择出生年月"
+                                class="question_radio" v-if="item.topicType == '3'" :disabled-date="disbledData" />
+                        </div>
 
-        <span style="height: 60vh;display: flex;overflow-y: auto;padding:0px 20px">
-            <div v-if="questionList.length > 0">
-                <div v-for="item, index in questionList" :key="item.id" class="question_out">
-                    <div class="title_out">{{ index + 1 }}:
-                        <span class="xing">{{ item.idMandatory == '1' ? '*' : '' }}</span><span>{{
-                            item.quesName }}</span>
                     </div>
-
-                    <el-radio-group v-model="item.optionValue" v-if="item.topicType == '1'" class="question_radio">
-                        <el-radio :label="ch" v-for="ch in item.mulValue" :key="ch"></el-radio>
-                        <!-- <el-radio label="线下场地免费"></el-radio> -->
-                    </el-radio-group>
-                    <el-date-picker v-model="item.optionValue" type="date" placeholder="选择出生年月" class="question_radio"
-                        v-if="item.topicType == '3'" :disabled-date="disbledData" />
                 </div>
-            </div>
-        </span>
-        <template #footer>
-            <div class="footer_cus">
-                <div class="start_button_out_close">
-                    <div class="start_button_self_close" @click="dialogVisible = false">
-                        <span>关闭</span>
+            </span>
+            <template #footer>
+                <div class="footer_cus">
+                    <div class="start_button_out_close">
+                        <div class="start_button_self_close_qs" @click="dialogVisible = false">
+                            <span>关闭</span>
+                        </div>
                     </div>
-                </div>
-                <!-- <el-button type="primary" @click="submitQuestion">
+                    <!-- <el-button type="primary" @click="submitQuestion">
                     提交
                 </el-button> -->
-                <div class="start_button_out">
-                    <div class="start_button_self" @click="submitQuestion">
-                        <span>提交</span>
+                    <div class="start_button_out">
+                        <div class="start_button_self_qs" @click="submitQuestion">
+                            <span>提交</span>
+                        </div>
                     </div>
-                </div>
-                <!-- <div>
+                    <!-- <div>
                     提交
                 </div> -->
-            </div>
-        </template>
-    </el-dialog>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+
     <!-- //另一个框 弹出确认是否跳转 -->
     <!-- 关闭的时候需要调用方法 -->
 
-    <el-dialog v-model="visible" :show-close="true" :before-close="tipFun" width="500" style="border-radius: 20px;">
+    <el-dialog v-model="visible" :show-close="true" :before-close="tipFun" width="500" style="border-radius: 5px;">
         <template #header>
             <div class="my-header" style="text-align: center;">
                 <div class="exit_login_title">提示</div>
@@ -254,11 +261,79 @@ defineExpose({ open })
 
 
 </template>
-<style lang="scss">
-.el-dialog {
-    border-radius: 20px;
+<style lang="scss" scoped>
+:deep(.el-popper.is-pure) {
+    margin-left: 40px !important;
+}
+
+:deep(.el-dialog) {
+    border-radius: 0px;
+    padding: 0px !important;
+}
+
+:deep(.el-radio.el-radio--large .el-radio__inner) {
+    height: 20px;
+    width: 20px;
+}
+
+:deep(.el-radio.el-radio--large .el-radio__label) {
+    font-size: 16px;
 }
 
+:deep(.el-radio.el-radio--large) {
+    height: 36px;
+}
+
+:deep(.el-radio__input.is-checked .el-radio__inner) {
+    background: #48D68E;
+    border-color: #B2F2D2;
+}
+
+:deep(.el-radio__input.is-checked+.el-radio__label) {
+    color: #606266;
+}
+
+:deep(.el-input__wrapper.is-focus) {
+    box-shadow: 0 0 0 1px #00DE7E;
+}
+
+:deep(.el-input__wrapper) {
+    box-shadow: 0 0 0 1px #00DE7E;
+}
+
+
+.wj_title {
+    color: #ffffff;
+    font-weight: 700;
+    // margin-left: 50px;
+    background-image: url('../assets/zs/login_line.png');
+    background-repeat: no-repeat;
+    background-size: contain;
+    padding-bottom: 6px;
+    background-position: bottom;
+}
+
+.wjdc {
+    :deep(.el-dialog__header.show-close) {
+        padding-right: 0px !important;
+        background-color: #3B3B3B !important;
+    }
+
+    :deep(.el-dialog__header) {
+        padding-bottom: 0px !important;
+    }
+
+    :deep(.el-dialog__footer) {
+        padding-bottom: 40px;
+    }
+
+
+
+}
+
+
+
+// .el-dialog__header.show-close
 .footer_cus {
     display: flex;
     justify-content: space-around;
@@ -290,8 +365,8 @@ defineExpose({ open })
     .start_button_self_close {
         cursor: pointer;
         // width: 100px;
-        border-radius: 12px;
-        border: 1px solid #dddddd;
+        border-radius: 4px;
+        border: 1px solid #48D68E;
         color: #000000;
         background-color: #ffffff;
         margin-right: 20px;
@@ -301,11 +376,13 @@ defineExpose({ open })
         align-items: center;
     }
 
+
+
     .start_button_self {
         cursor: pointer;
         // width: 100px;
-        border-radius: 12px;
-        border: 3px solid #48D68E;
+        border-radius: 4px;
+        border: 1px solid #48D68E;
         color: #ffffff;
         background-color: #000000;
         margin-right: 20px;
@@ -314,6 +391,21 @@ defineExpose({ open })
         display: flex;
         align-items: center;
     }
+
+    .start_button_self_qs {
+        cursor: pointer;
+        // width: 100px;
+        border-radius: 4px;
+        border: 1px solid #48D68E;
+        color: #ffffff;
+        background-color: #3B3B3B;
+        margin-right: 20px;
+        padding: 8px 20px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        font-weight: 700;
+    }
 }
 
 .start_button_out_close {
@@ -336,12 +428,28 @@ defineExpose({ open })
         display: flex;
         align-items: center;
     }
+
+    .start_button_self_close_qs {
+        cursor: pointer;
+        border-radius: 4px;
+        border: 1px solid #00DE7E;
+        color: #3B3B3B;
+        background-color: #ffffff;
+        margin-right: 20px;
+        padding: 8px 20px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        font-weight: 700;
+    }
+
 }
 
 
 .question_out {
     display: flex;
     flex-direction: column;
+    margin-bottom: 10px;
 
     .title_out {
         display: flex;
@@ -354,7 +462,7 @@ defineExpose({ open })
     }
 
     .question_radio {
-        margin-top: 5px;
+        margin-top: 15px !important;
         margin-bottom: 10px;
         margin-left: 10px;
     }

src/views/Cognize.vue

@@ -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;

src/views/Community.vue

@@ -559,7 +559,7 @@ onUnmounted(() => {
 :deep(.el-textarea__inner) {
     background-color: #F7F7F7 !important;
     border: none !important;
-    border-radius: 20px;
+    border-radius: 5px;
     border: none !important;
     box-shadow: none !important;
 }
@@ -589,7 +589,7 @@ label {
 
 
 .my-header {
-    padding: 60px 60px 10px 60px;
+    padding: 30px 30px 10px 30px;
 
     display: flex;
     flex-direction: column;
@@ -682,7 +682,7 @@ label {
             font-family: 'Rammetto One-Regular';
             padding-top: 30px;
             z-index: 10;
-            background: url(../assets/zs/community.png) no-repeat;
+            background: url(../assets/zs/community1.png) no-repeat;
             background-size: auto 50px;
 
             // img {

src/views/HomeView.vue

@@ -190,8 +190,16 @@ const brightStatusLevel = () => {
       <div style="text-align: center;"><img src="../assets/home/group_two.png" style="width: 30vw;margin-bottom: 55px;"
           alt=""></div>
       <div style="display: flex; justify-content: space-around;">
-        <img src="../assets/home/group_six1.png" style="width: 500px;" alt="">
-        <img src="../assets/home/group_senven.png" alt="" style="width: 500px;">
+        <div class="home_two_img">
+          <img src="../assets/home/group_six2.png" style="width: 500px;" alt="">
+          <div class="home_two_des">如果在工作中感到压力过大或情绪低落时，应及时与家人、领导沟通，寻求支持和理解。在自我调节的基础上 做到多休息，健康饮食，避免这些身心问题持续加重，
+            进而对工作和生活造成负面影响。</div>
+        </div>
+        <div class="home_two_img">
+          <img src="../assets/home/group_senven1.png" alt="" style="width: 500px;">
+          <div class="home_two_des">对公司来说，关注员工的心理健康并积极进行心理疏导，制定合理的休假制度，不仅能激发员工更高的工作热情和创造力，还能确保员工在面对挑战时具备更强的韧性和适应力</div>
+        </div>
+
       </div>
     </div>
 
@@ -199,11 +207,21 @@ const brightStatusLevel = () => {
       <div style="text-align: center;"><img src="../assets/home/group_four.png" style="width: 30vw;margin-bottom: 55px;"
           alt=""></div>
       <div style="display: flex; justify-content: space-around;position: relative;">
-        <img src="../assets/home/group_three.png" style="width: 500px;" alt="">
+        <div class="home_two_img">
+          <img src="../assets/home/group_senven1.png" alt="" style="width: 500px;">
+          <div class="home_two_des">
+            通过持续的自我监测和专业的评估工具，可以更早地发现潜在的心理问题，从而采取预防措施或寻求适当的帮助。这不仅有助于提高个人的情绪管理和应对压力的能力，还能显著提升工作效率和生活质量。</div>
+        </div>
         <div style="height: 100px;background-color: #00CD74;position: absolute;width: 100%;z-index: -1;top:200px">
         </div>
       </div>
+      <div class="home_mid_plan" v-show="isNeed" @click="openSquare" ref="plan_jihua">
 
+        <img style="width: 40px;" src="../assets/home/jihua_img1.png" />
+        <div class=" badge_custom">
+          问卷调查
+        </div>
+      </div>
     </div>
     <CpmdQuestionnaire ref="question" @fatherFun=father />
   </div>
@@ -222,22 +240,30 @@ body {
 .home_mid_img_one {
   width: auto;
   height: 100%;
-  background: url(../assets/home/group_slide_1.png) no-repeat;
-  background-size: 100% 100%;
+  // background: url(../assets/home/group_slide_1.png) no-repeat;
+  // background-size: 100% 100%;
+  background-image: url(../assets/home/group_slide_1.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 .home_mid_img_two {
   width: auto;
   height: 100%;
   background: url(../assets/home/group_slide_2.png) no-repeat;
-  background-size: 100% 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 .home_mid_img_three {
   width: auto;
   height: 100%;
   background: url(../assets/home/group_slide_3.png) no-repeat;
-  background-size: 100% 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 .home_mid {
@@ -262,6 +288,23 @@ body {
   position: relative;
   height: 100vh;
   scroll-snap-align: center;
+
+  .home_two_img {
+    padding: 20px;
+    box-sizing: border-box;
+    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+    background-color: #ffffff;
+
+    .home_two_des {
+      width: 460px;
+      padding: 20px;
+      color: #818996;
+      font-size: 16px;
+      line-height: 24px;
+
+      // margin-top: 10px;
+    }
+  }
 }
 
 
@@ -283,22 +326,24 @@ video {
 }
 
 .badge_custom {
-  position: absolute;
-  background-color: #ED2626;
-  // left: 90px;
-  right: 0;
-  top: 0px;
-  height: 30px;
-  width: 30px;
-  line-height: 30px;
-  text-align: center;
-  // line-height: 18px;
-  color: 10px;
-  padding: 8px;
-  font-weight: 300;
-  font-size: 10px;
+  // position: absolute;
+  // background-color: #ED2626;
+  // // left: 90px;
+  // right: 0;
+  // top: 0px;
+  // height: 30px;
+  // width: 30px;
+  // line-height: 30px;
+  // text-align: center;
+  // // line-height: 18px;
+  // color: 10px;
+  // padding: 8px;
+  // font-weight: 300;
+  // font-size: 10px;
+  // color: #ffffff;
+  // border-radius: 30px;
   color: #ffffff;
-  border-radius: 30px;
+  font-size: 10px;
 }
 
 .home_header_out {
@@ -507,16 +552,23 @@ video {
 }
 
 .home_mid_plan {
+  background-color: #3B3B3B;
+  border: 2px solid #00DE7E;
+  border-radius: 10px;
   z-index: 1;
   cursor: pointer;
   // top: 1000px;
   position: fixed;
-  width: 100px;
-  height: 100px;
-  top: 0;
+  width: 50px;
+  height: 64px;
+  top: 20vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
 
-  right: 0;
+  right: 20px;
   margin: auto;
 
   img {

src/views/Login.vue

@@ -99,17 +99,19 @@ const loginFun = async () => {
     <div class="home_header_out">
         <div class=" home_header_inner">
             <CpmdHeader />
-            <div class="report_top">
-                <div class="report_jt">
-                    <span>用户登录</span>
 
-                </div>
-                <!-- <img class="xlts_img" src="../assets/report/report_top.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 100px;">
+                <div class="login_top">
+                    <span class="des">用户登录</span>
+
+                </div>
+                <div style="padding: 20px 50px;">
 
                     <div style="margin-top:10px">
                         <div class="user_account">账号:</div>
@@ -145,13 +147,13 @@ const loginFun = async () => {
 <style lang="scss" scoped>
 :deep(.el-input__wrapper) {
     align-items: center;
-    border-radius: 60px !important;
-    border: 2px solid #B2F2D2 !important;
+    border-radius: 0px !important;
+    border: 1px solid #00DE7E !important;
     padding-left: 20px;
-
+    box-shadow: none
 }
 
-:deep(.el-input__wrapper .is-fous) {
+:deep(.el-input__wrapper.is-focus) {
     box-shadow: none
 }
 
@@ -210,6 +212,28 @@ const loginFun = async () => {
         }
     }
 
+
+    .leave_message {
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 650px;
+        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/login_text1.png) no-repeat;
+            background-size: auto 50px;
+        }
+    }
+
     .kply {
         width: 100%;
         margin-top: 20px;
@@ -227,6 +251,22 @@ const loginFun = async () => {
             border-radius: 5px;
             box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
 
+            .login_top {
+                background-color: #3B3B3B;
+                line-height: 50px;
+
+                .des {
+                    color: #ffffff;
+                    font-weight: 700;
+                    margin-left: 50px;
+                    background-image: url('../assets/zs/login_line.png');
+                    background-repeat: no-repeat;
+                    background-size: contain;
+                    padding-bottom: 6px;
+                    background-position: bottom;
+                }
+            }
+
             .user_account {
                 font-size: 18px;
                 // line-height: 70px;
@@ -245,7 +285,7 @@ const loginFun = async () => {
                 .start_button_self {
                     cursor: pointer;
                     // width: 100px;
-                    border-radius: 5px;
+                    border-radius: 4px;
                     border: 1px solid #48D68E;
                     color: #ffffff;
                     background-color: #3B3B3B;
@@ -266,7 +306,8 @@ const loginFun = async () => {
             margin-top: 20px;
 
             span {
-                color: #48D68E;
+                font-weight: 700;
+                color: #00DE7E;
                 cursor: pointer;
                 font-size: 16px;
             }

src/views/Plan.vue

@@ -281,7 +281,15 @@ onUnmounted(() => {
                         </div>
                         <div class="test_record">
                             <!-- <img src="../assets/kepu/task_1.png" /> -->
-                            <span>{{ item.planName }}</span>
+
+                            <span class='plan_name_one'>
+                                {{
+                                    item.planName
+                                }}
+                                <!-- <img style="position: absolute;width: 100%;left: 0px;bottom: -10px;"
+                                    src=" ../assets/zs/plan_line.png" alt=""> -->
+                            </span>
+                            <!-- <img style="width:100%" src=" ../assets/zs/plan_line.png" alt=""> -->
                         </div>
                         <!-- <div class="test_time">
                             <span>请根据您最近一个月的实际情况，选择最符合自己的选项。所有陈述都无正确和错误之分。所以请您不要再三思考，要根据第一反应诚实作答。</span>
@@ -350,8 +358,9 @@ onUnmounted(() => {
                         </div>
                         <div class="start_button_out">
                             <div class="start_button_self" @click="startPlan(item)"><span
-                                    v-if="item.isCompleted == '0'">开始测试</span><span
-                                    v-if="item.isCompleted == '2'">继续测试</span></div>
+                                    v-if="item.isCompleted == '0'">开始测试</span> <span
+                                    v-if="item.isCompleted == '2'">继续测试</span><img style='width:8px;margin-left:4px'
+                                    src='../assets/zs/jian.png' /></div>
                         </div>
                     </div>
                     <!-- 测试记录列表 -->
@@ -362,6 +371,19 @@ onUnmounted(() => {
     </div>
 </template>
 <style lang="scss" scoped>
+// .test_record{
+//     background-image: url('../assets/zs/plan_line.png');
+//        background-repeat: no-repeat;
+//     padding-bottom:20px;
+// }
+.plan_name_one {
+    background-image: url('../assets/zs/plan_line.png');
+    background-repeat: no-repeat;
+    background-size: contain;
+    padding-bottom: 10px;
+    background-position: bottom;
+}
+
 .home_header_out {
     /* 启用滚动捕捉对齐 */
     scroll-snap-align: start;
@@ -406,7 +428,7 @@ onUnmounted(() => {
             font-family: 'Rammetto One-Regular';
             padding-top: 30px;
             z-index: 10;
-            background: url(../assets/zs/testPlan.png) no-repeat;
+            background: url(../assets/zs/testPlan1.png) no-repeat;
             background-size: auto 50px;
         }
     }
@@ -475,6 +497,7 @@ onUnmounted(() => {
                 align-items: center;
                 margin-bottom: 20px;
 
+
                 img {
                     width: 50px;
                 }
@@ -603,9 +626,9 @@ onUnmounted(() => {
                     border-radius: 4px;
                     border: 1px solid #48D68E;
                     color: #ffffff;
-                    background-color: #000000;
+                    background-color: #3B3B3B;
                     margin-right: 20px;
-                    padding: 8px 60px;
+                    padding: 8px 28px;
                     cursor: pointer;
                     display: flex;
                     align-items: center;
@@ -622,6 +645,7 @@ onUnmounted(() => {
                 border-radius: 5px;
                 position: relative;
                 padding: 20px 40px;
+                margin-bottom: 40px;
 
 
                 .record_tip {
@@ -777,14 +801,14 @@ onUnmounted(() => {
 
                                                 .noCompleted_status {
                                                     // font-weight: 600;
-                                                    color: #818996;
+                                                    color: #ffffff;
                                                     line-height: 24px;
                                                     font-size: 14px;
                                                     border-radius: 4px;
                                                     text-align: center;
                                                     right: 0px;
                                                     width: 70px;
-                                                    background-color: #D9D9D9;
+                                                    background-color: #9F9F9F;
                                                 }
                                             }
 
@@ -797,32 +821,33 @@ onUnmounted(() => {
                                                 .isCompleted_status {
                                                     line-height: 24px;
                                                     font-size: 14px;
-                                                    border-radius: 20px;
+                                                    border-radius: 3px;
                                                     text-align: center;
                                                     right: 0px;
                                                     width: 70px;
-                                                    background-color: #48D68E;
+                                                    color: #ffffff;
+                                                    background-color: #00DE7E;
                                                 }
                                             }
 
                                             .isMust {
                                                 position: absolute;
-                                                right: 0;
-                                                background-color: #48D68E;
+                                                right: -28px;
+                                                background-color: #00DE7E;
                                                 font-size: 10px;
                                                 color: #ffffff;
-                                                padding: 2px 6px;
-                                                border-radius: 10px;
+                                                padding: 4px 10px;
+                                                border-radius: 3px;
                                             }
 
                                             .isChoosable {
                                                 position: absolute;
-                                                right: 0;
-                                                background-color: #EDEDED;
+                                                right: -28px;
+                                                background-color: #E1E1E1;
                                                 font-size: 10px;
-                                                color: #222222;
-                                                padding: 2px 6px;
-                                                border-radius: 10px;
+                                                color: #818181;
+                                                padding: 4px 10px;
+                                                border-radius: 3px;
                                             }
                                         }
                                     }

src/views/PopularizationScience.vue

@@ -203,10 +203,14 @@ onUnmounted(() => {
                 <!-- <img class="xlts_img" style="margin-top:40px" 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:10px 0px;width: 100%;display: flex;flex-wrap: wrap;padding-bottom:20px;    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);">
+                    style="padding:10px 0px;width: 100%;display: flex;flex-wrap: wrap;padding-bottom:20px;justify-content: space-between;">
                     <div v-for="item in moreList" :key="item.id" class="out">
                         <img class="poster" :src="requireImg(item.poster)">
                         <div class="des">
@@ -215,11 +219,16 @@ onUnmounted(() => {
                                     {{ item.title }}
                                 </div>
                                 <div style="display: flex;">
-                                    <div v-show="item.isProfession"> <img style="width: 80px;"
-                                            :src="requireImg('isProfession')">
-                                        &nbsp;&nbsp;
+                                    <div v-show="item.isProfession">
+                                        <!-- <img style="width: 80px;":src="requireImg('isProfession')"> -->
+                                        <div class="isProfession">专业报告</div>
+
                                     </div>
-                                    <div v-show="item.isRecommend"> <img style="width: 80px;" :src="requireImg('isM')">
+                                    <span v-show="item.isProfession"> &nbsp;&nbsp;</span>
+
+                                    <div v-show="item.isRecommend">
+                                        <div class="isM">强烈推荐</div>
+                                        <!-- <img style="width: 80px;" :src="requireImg('isM')"> -->
                                     </div>
 
                                 </div>
@@ -295,9 +304,30 @@ onUnmounted(() => {
         }
     }
 
+    .leave_message {
+
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 1200px;
+        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/more_test2.png) no-repeat;
+            background-size: auto 50px;
+        }
+    }
+
     .kply {
         width: 100%;
-        margin-top: 40px;
 
         .kply_inner {
             left: 0;
@@ -313,13 +343,19 @@ onUnmounted(() => {
             .out {
                 margin-top: 40px;
 
-                width: 50%;
+                width: 48%;
                 // background-color: antiquewhite;
                 display: flex;
 
+                box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+                ;
+                padding: 20px;
+                box-sizing: border-box;
+                border-radius: 36px;
+
                 .poster {
                     width: 150px;
-                    padding-left: 40px;
+                    // padding-left: 40px;
                 }
 
                 .des {
@@ -356,6 +392,24 @@ onUnmounted(() => {
                             align-items: center;
                         }
                     }
+
+                    .isProfession {
+                        color: #836000;
+                        background-color: #FFFF9F;
+                        font-size: 10px;
+                        border: 1px solid #E7DF42;
+                        padding: 2px 10px;
+                        border-radius: 4px;
+                    }
+
+                    .isM {
+                        color: #266208;
+                        background-color: #CFFF9F;
+                        font-size: 10px;
+                        border: 1px solid #6FEB32;
+                        padding: 2px 10px;
+                        border-radius: 4px;
+                    }
                 }
 
             }

src/views/Register.vue

@@ -340,16 +340,17 @@ const roleTypeChange = (val: string) => {
     <div class="home_header_out">
         <div class=" home_header_inner">
             <CpmdHeader />
-            <div class="report_top">
-                <div class="report_jt">
-                    <span>用户注册</span>
-                </div>
-                <!-- <img class="xlts_img" src="../assets/report/report_top.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: 10px 100px;">
+                <div class="login_top">
+                    <span class="des">用户注册</span>
+                </div>
+                <div style="padding: 10px 50px;">
                     <div style="margin-top:20px;display: flex;">
 
 
@@ -447,13 +448,13 @@ const roleTypeChange = (val: string) => {
 <style lang="scss" scoped>
 :deep(.el-input__wrapper) {
     align-items: center;
-    border-radius: 60px !important;
-    border: 2px solid #B2F2D2 !important;
+    border-radius: 0px !important;
+    border: 1px solid #00DE7E !important;
     padding-left: 20px;
-
+    box-shadow: none
 }
 
-:deep(.el-input__wrapper .is-fous) {
+:deep(.el-input__wrapper .is-focus) {
     box-shadow: none
 }
 
@@ -462,6 +463,10 @@ const roleTypeChange = (val: string) => {
     font-size: 16px;
 }
 
+:deep(.el-select__wrapper.is-hovering:not(.is-focused)) {
+    box-shadow: none !important
+}
+
 :deep(.el-select__placeholder) {
     color: var(--el-input-text-color, var(--el-text-color-regular));
     position: absolute;
@@ -485,10 +490,11 @@ const roleTypeChange = (val: string) => {
 }
 
 :deep(.el-select__wrapper) {
-    border-radius: 60px;
-    border: 2px solid #B2F2D2;
+    border-radius: 0px;
+    border: 1px solid #00DE7E;
     padding-left: 20px;
     height: 40px;
+    box-shadow: none;
 }
 
 :deep(.el-select__input) {
@@ -591,6 +597,28 @@ const roleTypeChange = (val: string) => {
         }
     }
 
+    .leave_message {
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 650px;
+        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/register1.png) no-repeat;
+            background-size: auto 50px;
+        }
+    }
+
+
     .kply {
         width: 100%;
         margin-top: 20px;
@@ -607,6 +635,22 @@ const roleTypeChange = (val: string) => {
             border-radius: 5px;
             box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
 
+            .login_top {
+                background-color: #3B3B3B;
+                line-height: 50px;
+
+                .des {
+                    color: #ffffff;
+                    font-weight: 700;
+                    margin-left: 50px;
+                    background-image: url('../assets/zs/login_line.png');
+                    background-repeat: no-repeat;
+                    background-size: contain;
+                    padding-bottom: 6px;
+                    background-position: bottom;
+                }
+            }
+
             .user_account {
                 font-size: 18px;
                 // line-height: 70px;
@@ -625,7 +669,7 @@ const roleTypeChange = (val: string) => {
                 .start_button_self {
                     cursor: pointer;
                     // width: 100px;
-                    border-radius: 5px;
+                    border-radius: 4px;
                     border: 1px solid #48D68E;
                     color: #ffffff;
                     background-color: #3B3B3B;
@@ -646,7 +690,8 @@ const roleTypeChange = (val: string) => {
             margin-top: 20px;
 
             span {
-                color: #48D68E;
+                font-weight: 700;
+                color: #00DE7E;
                 cursor: pointer;
                 font-size: 16px;
             }

src/views/Report.vue

@@ -400,7 +400,7 @@ onUnmounted(() => {
             font-family: 'Rammetto One-Regular';
             padding-top: 30px;
             z-index: 10;
-            background: url(../assets/zs/result.png) no-repeat;
+            background: url(../assets/zs/result1.png) no-repeat;
             background-size: auto 50px;
         }
     }

src/views/ScaleDetail.vue

@@ -193,42 +193,62 @@ const startText = () => {
                 <!-- <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; box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);;">
-                    <div class="cognize_title">
+                <div style="padding :20px 40px; box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);border-radius: 48px;">
+                    <!-- <div class="cognize_title">
                         {{ scaleName }}
-                    </div>
+                    </div> -->
                     <div class="cognize_img_out">
-                        <!-- <img src="../assets/cognize/c1.png" v-show="true" width=" 100px" height="100px"
-                            style="margin-right: 20px;" /> -->
-                        <!-- <img src="../assets/kepu/czscz_default.png" width=" 100px" style="margin-right: 20px;" /> -->
-                        <!-- <img src="../assets/kepu/czscz_active.png" v-show="true" width=" 100px" height="100px"
-                            style="margin-right: 20px;" /> -->
+                        <!-- /src/assets/kepu/xlwht_active.png -->
+                        <img src="../assets/kepu/xlwht_active.png" width=" 100px" height="100px"
+                            style="margin-right: 20px;" />
                         <div class="cognize_des">
-                            <span class="cpjs">测评介绍：</span>
-                            <span class="cpjs_detail">{{ detail }}</span>
-                        </div>
+                            <div
+                                style="display: flex; justify-content: space-between; align-items: center;margin-bottom: 10px;">
+                                <span class="cognize_title">
+                                    {{ scaleName }}
+                                </span>
+                                <div class=" scale_button">
+                                    <el-row>
+                                        <el-col :span="24" class="scale_button_inner">
+
+                                            <div class="scale_button_self" @click="startText">开始测试<img
+                                                    style="height: 12px;margin-left: 8px;" src="../assets/zs/jian.png"
+                                                    alt=""></div>
+                                        </el-col>
+                                    </el-row>
+                                </div>
+                            </div>
+
+                            <div class="cognize_js">
+                                <span class="cpjs">测评介绍：</span>
+                                <span class="cpjs_detail">{{ detail }}</span>
+                            </div>
+                            <div class="cognize_js" style="margin-top:20px">
+                                <span class="cpjs">原理:</span>
+                                <span class="cpjs_detail">{{ theory }}</span>
+                            </div>
 
+                        </div>
                     </div>
-                    <div class="yl_out">
+                    <!-- <div class="yl_out">
                         <span class="yl">原理:</span>
                         <span class="yl_detail">{{ theory }}</span>
-                    </div>
-                    <div class=" scale_button">
-                        <el-row>
-                            <el-col :span="24" class="scale_button_inner">
+                    </div> -->
 
-                                <div class="scale_button_self" @click="startText">开始测试</div>
-                            </el-col>
-                        </el-row>
-                    </div>
-                    <div class="ckwx">
-                        <div class="reference_title">参考文献:</div>
-                        <div v-for="item, index in reference" :key="index" class='reference_cal'>
-                            <div>[{{ index + 1 }}]</div>
-                            <div>{{ item }}</div>
-                        </div>
+
+                </div>
+                <div class="ckwx">
+                    <div class="reference_title">参考文献:</div>
+                    <div v-for="item, index in reference" :key="index" class='reference_cal'>
+                        <div>[{{ index + 1 }}]</div>
+                        <div>{{ item }}</div>
                     </div>
                 </div>
             </div>
@@ -237,6 +257,13 @@ const startText = () => {
 </template>
 
 <style lang="scss" scoped>
+.cognize_js {
+    background-color: #F6F6F6;
+    padding: 20px;
+    border-radius: 5px;
+    color: #333333;
+}
+
 .cognize_real_out {
     background-color: #b64d4d;
     color: #41348a;
@@ -270,6 +297,28 @@ const startText = () => {
         }
     }
 
+    .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_testing1.png) no-repeat;
+            background-size: auto 50px;
+        }
+    }
+
     .kply {
         width: 100%;
         margin-top: 20px;
@@ -326,7 +375,13 @@ const startText = () => {
                 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 {
@@ -340,22 +395,26 @@ const startText = () => {
             .cognize_img_out {
                 display: flex;
                 justify-content: center;
-                align-items: center;
 
                 .cognize_des {
-
+                    flex: 1;
+                    letter-spacing: 2px;
+                    line-height: 20px;
+                    font-size: 16px;
 
 
                     .cpjs {
-                        color: #48D68E;
+                        color: #333333;
                         font-weight: 700;
                         font-size: 14px;
+                        line-height: 24px;
                     }
 
                     .cpjs_detail {
-                        font-size: 14px;
-                        letter-spacing: 3px;
+                        color: #818996;
                         line-height: 24px;
+                        letter-spacing: 3px;
+                        font-size: 14px;
                     }
                 }
             }
@@ -399,7 +458,7 @@ const startText = () => {
                         border-radius: 5px;
                         border: 1px solid #48D68E;
                         color: #ffffff;
-                        background-color: #000000;
+                        background-color: #333333;
                         margin-right: 20px;
                         padding: 10px 40px;
                         cursor: pointer;

src/views/TestRecord.vue

@@ -165,96 +165,110 @@ onUnmounted(() => {
                 <!-- <img class="xlts_img" style="margin-top:40px" 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 style="padding:10% 20%;box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.17);"
+                <div>
+                    <div style="width: 1200px;margin-left:32px; box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.17);"
                         v-show="list.length == 0">
                         <img width="60%" style="margin-left: 20%;" src="../assets/planNo.png">
                     </div>
                     <div class="infinite-list-wrapper" style="overflow: auto" v-infinite-scroll="getData">
-                        <div v-for="item in list">
-                            <div class="test_record">
-                                <img src="../assets/kepu/task_1.png" />
-                                <span>{{ item.planName }}</span>
-                                <span
-                                    style="font-size: 14px;line-height: 24px; font-weight: 100;background-color: #ededed;padding:0px 14px;border-radius: 20px;"
-                                    v-show="item.isRead == 0">未读</span>
-                                <span
-                                    style="font-size: 14px;line-height: 24px; font-weight: 100;background-color: #48D68E;color:#ffffff;padding:0px 14px;border-radius: 20px;"
-                                    v-show="item.isRead == 1">已读</span>
-                            </div>
-                            <div class="test_time">
-                                <span>测试时间：{{ item.taskStartTime }}～{{ item.taskEndTime }}</span>
-                            </div>
-                            <div class="content_out">
-                                <div class="content_inner">
-                                    <div class="task_out">
-                                        <div class="content_title">1.问答测试</div>
-                                        <div class="task_inner">
-
-                                            <div class="task_inner_single" v-for="subItem in item.scaleList"
-                                                :key="subItem.id">
-                                                <div class="task_inner_one">
-                                                    <img style="width: 80px;height: 80px"
-                                                        src="../assets/kepu/xlwht_active.png" alt="">
-                                                    <div class="task_content">
-                                                        <div class="title">{{ subItem.name }}</div>
-                                                        <!-- <div class="des" v-show="subItem.isCompleted != '1'">预计用时:{{
+                        <div>
+                            <div v-for="item in list" class='record_zt'>
+                                <div class="test_record">
+                                    <span class="test_plan_name">{{ item.planName }}
+
+
+                                        <span class="unread_status" style="" v-show="item.isRead == 0">未读</span>
+                                        <span class="read_status" v-show="item.isRead == 1">已读</span>
+                                    </span>
+
+                                </div>
+                                <div class="test_time">
+                                    <span>测试时间：{{ item.taskStartTime }}～{{ item.taskEndTime }}</span>
+                                </div>
+                                <div class="content_out">
+                                    <div class="content_inner">
+                                        <div class="task_out">
+                                            <div class="content_title">1.问答测试</div>
+                                            <div class="task_inner">
+
+                                                <div class="task_inner_single" v-for="subItem in item.scaleList"
+                                                    :key="subItem.id">
+                                                    <div class="task_inner_one">
+                                                        <img style="width: 80px;height: 80px"
+                                                            src="../assets/kepu/xlwht_active.png" alt="">
+                                                        <div class="task_content">
+                                                            <div class="title">{{ subItem.name }}</div>
+                                                            <!-- <div class="des" v-show="subItem.isCompleted != '1'">预计用时:{{
                                                             subItem.expectTime }}</div> -->
-                                                        <div class="des" v-show="subItem.isCompleted == '1'">实际用时:{{
-                                                            subItem.useTime }}</div>
-                                                        <!-- <div class="noCompleted" v-show="subItem.isCompleted != '1'">
+                                                            <div class="des" v-show="subItem.isCompleted == '1'">实际用时:{{
+                                                                subItem.useTime }}</div>
+                                                            <!-- <div class="noCompleted" v-show="subItem.isCompleted != '1'">
                                                             <div class='noCompleted_status'> 未完成</div>
                                                         </div> -->
-                                                        <div class="isCompleted" v-show="subItem.isCompleted == '1'">
-                                                            <div @click="viewReport(subItem)"
-                                                                class='isCompleted_status'> 查看报告</div>
-                                                        </div>
-                                                        <!-- {{ subItem.isRequired }} -->
-                                                        <div class="isMust" v-show="subItem.isRequired == '1'">必做</div>
-                                                        <div class="isChoosable" v-show="subItem.isRequired == '0'">选做
+                                                            <div class="isCompleted"
+                                                                v-show="subItem.isCompleted == '1'">
+                                                                <div @click="viewReport(subItem)"
+                                                                    class='isCompleted_status'> 查看报告 <img
+                                                                        style='height: 12px;margin-left:4px'
+                                                                        src='../assets/zs/jian.png' /></div>
+                                                            </div>
+                                                            <!-- {{ subItem.isRequired }} -->
+                                                            <div class="isMust" v-show="subItem.isRequired == '1'">必做
+                                                            </div>
+                                                            <div class="isChoosable" v-show="subItem.isRequired == '0'">
+                                                                选做
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                            </div>
 
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div class="task_out">
-                                        <div class="content_title">2.认知评估</div>
-                                        <div class="task_inner">
-                                            <div class="task_inner_single" v-for="subItem in item.taskList">
-                                                <div class="task_inner_one">
-                                                    <img style="width: 80px;height: 80px"
-                                                        src="../assets/kepu/task_active.png" alt="">
-                                                    <div class="task_content">
-                                                        <div class="title">{{ subItem.name }}</div>
-                                                        <!-- <div class="des" v-show="subItem.isCompleted != '1'">预计用时:{{
+                                        <div class="task_out">
+                                            <div class="content_title">2.认知评估</div>
+                                            <div class="task_inner">
+                                                <div class="task_inner_single" v-for="subItem in item.taskList">
+                                                    <div class="task_inner_one">
+                                                        <img style="width: 80px;height: 80px"
+                                                            src="../assets/kepu/task_active.png" alt="">
+                                                        <div class="task_content">
+                                                            <div class="title">{{ subItem.name }}</div>
+                                                            <!-- <div class="des" v-show="subItem.isCompleted != '1'">预计用时:{{
                                                             subItem.expectTime }}</div> -->
-                                                        <div class="des" v-show="subItem.isCompleted == '1'">实际用时:{{
-                                                            subItem.useTime }}</div>
-                                                        <!-- <div class="noCompleted" v-show="subItem.isCompleted != '1'">
+                                                            <div class="des" v-show="subItem.isCompleted == '1'">实际用时:{{
+                                                                subItem.useTime }}</div>
+                                                            <!-- <div class="noCompleted" v-show="subItem.isCompleted != '1'">
                                                             <div class='noCompleted_status'> 未完成</div>
                                                         </div> -->
-                                                        <div class="isCompleted" v-show="subItem.isCompleted == '1'">
-                                                            <div @click="viewReport(subItem)"
-                                                                class='isCompleted_status'> 查看报告</div>
-                                                        </div>
-                                                        <div class="isMust" v-show="subItem.isRequired == '1'">必做</div>
-                                                        <div class="isChoosable" v-show="subItem.isRequired == '0'">选做
+                                                            <div class="isCompleted"
+                                                                v-show="subItem.isCompleted == '1'">
+                                                                <div @click="viewReport(subItem)"
+                                                                    class='isCompleted_status'> 查看报告 <img
+                                                                        style='height: 12px;margin-left:4px'
+                                                                        src='../assets/zs/jian.png' /></div>
+                                                            </div>
+                                                            <div class="isMust" v-show="subItem.isRequired == '1'">必做
+                                                            </div>
+                                                            <div class="isChoosable" v-show="subItem.isRequired == '0'">
+                                                                选做
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
 
-                                <div></div>
-                            </div>
-                            <!-- <div class="record_out">
+                                    <div></div>
+                                </div>
+                                <!-- <div class="record_out">
                                 <div class="record_score">
                                     <span>得&nbsp;&nbsp;&nbsp;&nbsp;分：</span>
                                     <span>{{ item.score }}</span>
@@ -265,7 +279,9 @@ onUnmounted(() => {
                             </div> -->
 
 
+                            </div>
                         </div>
+
                         <div style="text-align: center;margin-top:20px" v-show="isLoading">努力加载中...</div>
                         <div style="text-align: center;;margin-top:20px" v-show="noMore">没有更多了</div>
                     </div>
@@ -309,9 +325,29 @@ onUnmounted(() => {
         }
     }
 
+    .leave_message {
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 1200px;
+        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/test_record1.png) no-repeat;
+            background-size: auto 50px;
+        }
+    }
+
     .kply {
         width: 100%;
-        margin-top: 40px;
         // background-color: #FAFAFA;
 
         .kply_inner {
@@ -319,7 +355,7 @@ onUnmounted(() => {
             left: 0;
             right: 0;
             margin: auto;
-            width: 1200px;
+            width: 1264px;
 
             background-color: #ffffff;
             border-radius: 40px;
@@ -327,9 +363,19 @@ onUnmounted(() => {
 
             // height: 1000px;
             .infinite-list-wrapper {
+                padding: 32px;
+
                 // max-height: 900px;
                 // max-height: 500px;
                 // min-height: 500px;
+                .record_zt {
+
+                    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+                    margin-bottom: 40px;
+                    box-sizing: border-box;
+                    padding: 32px 20px;
+
+                }
 
                 .kepu_title {
                     display: flex;
@@ -375,16 +421,52 @@ onUnmounted(() => {
                 }
 
                 .test_record {
-                    margin-top: 20px;
                     display: flex;
                     align-items: center;
 
+
                     img {
                         width: 50px;
                     }
 
+                    .test_plan_name {
+                        background-image: url('../assets/zs/plan_line.png');
+                        background-repeat: no-repeat;
+                        background-size: contain;
+                        padding-bottom: 10px;
+                        background-position: bottom;
+                        position: relative;
+
+                        .read_status {
+                            font-size: 14px;
+                            line-height: 24px;
+
+                            font-weight: 100;
+                            background-color: #DEDEDE;
+                            color: #333333;
+                            width: 50px;
+                            top: -20px;
+                            text-align: center;
+                            border-radius: 6px;
+                            position: absolute;
+                        }
+
+                        .unread_status {
+                            font-size: 14px;
+                            line-height: 24px;
+                            font-weight: 100;
+                            background-color: #00DE7E;
+                            color: #ffffff;
+                            width: 50px;
+                            top: -20px;
+                            text-align: center;
+                            border-radius: 6px;
+                            position: absolute;
+                        }
+                    }
+
                     span {
-                        margin-left: 20px;
+
                         font-size: 22px;
                         font-weight: 700;
                         letter-spacing: 3px;
@@ -449,7 +531,7 @@ onUnmounted(() => {
                     width: 100%;
                     // height: 200px;
                     background-color: #F7F7F7;
-                    border-radius: 40px;
+                    border-radius: 5px;
 
                     .content_inner {
                         padding: 20px 40px;
@@ -542,21 +624,22 @@ onUnmounted(() => {
                                             .isMust {
                                                 position: absolute;
                                                 right: 0;
-                                                background-color: #48D68E;
+                                                background-color: #00DE7E;
                                                 font-size: 10px;
                                                 color: #ffffff;
-                                                padding: 2px 6px;
-                                                border-radius: 10px;
+                                                padding: 4px 10px;
+                                                border-radius: 3px;
                                             }
 
                                             .isChoosable {
                                                 position: absolute;
                                                 right: 0;
-                                                background-color: #EDEDED;
+                                                background-color: #E1E1E1;
                                                 font-size: 10px;
-                                                color: #222222;
-                                                padding: 2px 6px;
-                                                border-radius: 10px;
+                                                color: #7D7D7D;
+                                                padding: 4px 10px;
+                                                border-radius: 3px;
+                                                border: 1px solid #00DE7E;
                                             }
 
                                             .title {
@@ -598,18 +681,18 @@ onUnmounted(() => {
                                                 justify-content: end;
 
                                                 .isCompleted_status {
-                                                    padding-left: 10px;
-                                                    padding-right: 10px;
-                                                    line-height: 30px;
+                                                    padding: 8px 20px;
+                                                    display: flex;
+                                                    line-height: 18px;
                                                     font-size: 14px;
-                                                    border-radius: 4px;
+                                                    align-items: center;
                                                     text-align: center;
                                                     right: 0px;
                                                     width: 70px;
-                                                    border-radius: 12px;
-                                                    border: 3px solid #48D68E;
+                                                    border-radius: 4px;
+                                                    border: 1px solid #48D68E;
                                                     color: #ffffff;
-                                                    background-color: #000000;
+                                                    background-color: #3B3B3B;
                                                     cursor: pointer
                                                 }
                                             }

src/views/UpdatePas.vue

@@ -152,17 +152,19 @@ const loginFun = async () => {
     <div class="home_header_out">
         <div class=" home_header_inner">
             <CpmdHeader />
-            <div class="report_top">
-                <div class="report_jt">
-                    <span>修改密码</span>
 
-                </div>
-                <!-- <img class="xlts_img" src="../assets/report/report_top.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 100px;">
+                <div class="login_top">
+                    <span class="des">修改密码</span>
+
+                </div>
+                <div style="padding: 20px 50px;">
 
                     <div style="margin-top:10px">
                         <div class="user_account">当前密码:</div>
@@ -201,13 +203,13 @@ const loginFun = async () => {
 <style lang="scss" scoped>
 :deep(.kply_inner .el-input__wrapper) {
     align-items: center;
-    border-radius: 60px !important;
-    border: 2px solid #B2F2D2 !important;
+    border-radius: 0px !important;
+    border: 1px solid #00DE7E !important;
     padding-left: 20px;
-
+    box-shadow: none
 }
 
-:deep(.kply_inner .el-input__wrapper .is-fous) {
+:deep(.kply_inner .el-input__wrapper .is-focus) {
     box-shadow: none
 }
 
@@ -263,6 +265,28 @@ const loginFun = async () => {
         }
     }
 
+    .leave_message {
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 650px;
+        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/change_password1.png) no-repeat;
+            background-size: auto 50px;
+        }
+    }
+
+
     .kply {
         width: 100%;
         margin-top: 20px;
@@ -288,6 +312,21 @@ const loginFun = async () => {
                 letter-spacing: 5px;
             }
 
+            .login_top {
+                background-color: #3B3B3B;
+                line-height: 50px;
+
+                .des {
+                    color: #ffffff;
+                    font-weight: 700;
+                    margin-left: 50px;
+                    background-image: url('../assets/zs/login_line.png');
+                    background-repeat: no-repeat;
+                    background-size: contain;
+                    padding-bottom: 6px;
+                    background-position: bottom;
+                }
+            }
 
             .start_button_out {
                 margin-top: 40px;