学生版本修改

src/components/CpdmTip.vue

@@ -42,7 +42,7 @@ onUnmounted(() => {
 </script>
 <template>
     <div>
-        <el-dialog v-model="visible" width="500" style="border-radius: 5px;" class="dig_kg"
+        <el-dialog v-model="visible" width="500" style="border-radius: 40px;" class="dig_kg"
             :close-on-click-modal="false">
             <template #header="{ close, titleId, titleClass }">
                 <div class="my-header" style="text-align: center;">
@@ -88,7 +88,7 @@ onUnmounted(() => {
         cursor: pointer;
         // width: 100px;
         border-radius: 4px;
-        border: 1px solid #48D68E;
+        // border: 1px solid #48D68E;
         color: #ffffff;
         background-color: #333333;
         // margin-right: 20px;
@@ -96,6 +96,8 @@ onUnmounted(() => {
         cursor: pointer;
         display: flex;
         align-items: center;
+        background: url(../assets/zs/bottom_new.png) no-repeat;
+        background-size: 100% 100%;
 
     }
 }

src/components/CpmdHeader.vue

@@ -162,7 +162,7 @@ const leaveFun = () => {
 
                 <span v-if="!userInfo.userInfo?.userName">登录</span>
             </div>
-            <el-dialog v-model="visible" :show-close="true" width="500" style="border-radius: 5px;" class="dig_kg">
+            <el-dialog v-model="visible" :show-close="true" width="500" style="border-radius: 40px;" class="dig_kg">
                 <template #header="{ close, titleId, titleClass }">
                     <div class="my-header" style="text-align: center;">
                         <div class="exit_login_title">退出登录</div>
@@ -247,7 +247,7 @@ const leaveFun = () => {
         cursor: pointer;
         // width: 100px;
         border-radius: 5px;
-        border: 1px solid #48D68E;
+        // border: 1px solid #48D68E;
         color: #ffffff;
         background-color: #3B3B3B;
         // margin-right: 20px;
@@ -255,13 +255,15 @@ const leaveFun = () => {
         cursor: pointer;
         display: flex;
         align-items: center;
+        background: url(../assets/zs/bottom_new.png) no-repeat;
+        background-size: 100% 100%;
 
     }
 }
 
 .badge_custom {
     position: absolute;
-    background-color: #6AEF8D;
+    background-color: #FF52CE;
     right: -18px;
     top: 0px;
     text-align: center;
@@ -271,7 +273,8 @@ const leaveFun = () => {
 
     font-weight: 300;
     font-size: 10px;
-    color: #ffffff;
+    color: #3B3B3B;
+    font-weight: 700;
     border-radius: 18px;
 }
 
@@ -372,7 +375,7 @@ const leaveFun = () => {
             background-color: #ffffff;
 
             .login_user {
-                background-color: #3B3B3B;
+                background-color: #236EE3;
                 width: 100px;
                 position: absolute;
                 // background-color: #ffffff;

src/components/CpmdQuestionnaire.vue

@@ -187,7 +187,7 @@ defineExpose({ open })
 </script>
 <template>
     <div class="wjdc">
-        <el-dialog v-model="dialogVisible" title="" width="600px" top="15vh" style="padding:0px">
+        <el-dialog v-model="dialogVisible" title="" width="600px" top="15vh" style="padding:0px;border-radius: 40px;">
             <template #header>
                 <div style="text-align: left;font-weight: 700;color: #ffffff;line-height: 60px;margin-left: 20px;">
                     <span class="wj_title">问卷填写</span>
@@ -285,8 +285,8 @@ defineExpose({ open })
 }
 
 :deep(.el-radio__input.is-checked .el-radio__inner) {
-    background: #48D68E;
-    border-color: #B2F2D2;
+    background: #FF52CE;
+    border-color: #FF52CE;
 }
 
 :deep(.el-radio__input.is-checked+.el-radio__label) {
@@ -294,11 +294,11 @@ defineExpose({ open })
 }
 
 :deep(.el-input__wrapper.is-focus) {
-    box-shadow: 0 0 0 1px #00DE7E;
+    box-shadow: 0 0 0 1px #FF52CE;
 }
 
 :deep(.el-input__wrapper) {
-    box-shadow: 0 0 0 1px #00DE7E;
+    box-shadow: 0 0 0 1px #FF52CE;
 }
 
 
@@ -317,6 +317,8 @@ defineExpose({ open })
     :deep(.el-dialog__header.show-close) {
         padding-right: 0px !important;
         background-color: #3B3B3B !important;
+        border-top-left-radius: 40px;
+        border-top-right-radius: 40px;
     }
 
     :deep(.el-dialog__header) {
@@ -396,15 +398,17 @@ defineExpose({ open })
         cursor: pointer;
         // width: 100px;
         border-radius: 4px;
-        border: 1px solid #48D68E;
+        // border: 1px solid #48D68E;
         color: #ffffff;
         background-color: #3B3B3B;
         margin-right: 20px;
-        padding: 8px 20px;
+        padding: 8px 40px;
         cursor: pointer;
         display: flex;
         align-items: center;
         font-weight: 700;
+        background: url(../assets/zs/bottom_new.png) no-repeat;
+        background-size: 100% 100%;
     }
 }
 
@@ -432,11 +436,11 @@ defineExpose({ open })
     .start_button_self_close_qs {
         cursor: pointer;
         border-radius: 4px;
-        border: 1px solid #00DE7E;
+        border: 1px solid #e7e9e9;
         color: #3B3B3B;
         background-color: #ffffff;
         margin-right: 20px;
-        padding: 8px 20px;
+        padding: 8px 40px;
         cursor: pointer;
         display: flex;
         align-items: center;

src/views/Cognize.vue

@@ -158,66 +158,68 @@ 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="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">
+
+        <div style="background: linear-gradient( 180deg, #B2EDFF 0%, #FFFFFF 33%);padding-top: 20px;">
+            <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="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 class="cognize_img_out">
-                        <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"
+                        <div class="cognize_img_out">
+                            <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">
-                            <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 class="cognize_des">
+                                <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 :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>
-                            </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 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>
-                    <!-- <div class="cpll">
+                        <!-- <div class="cpll">
                         <span class="cpll_title">理论：</span>
                         <span class="cpll_detail">{{ cognizeDetail.theory }}</span>
                     </div>
@@ -229,16 +231,16 @@ onUnmounted(() => {
                         </span>
                     </div> -->
 
-                    <!-- <div class="cognize_title2"> {{ cognizeDetail.name }}演示视频：</div> -->
+                        <!-- <div class="cognize_title2"> {{ cognizeDetail.name }}演示视频：</div> -->
 
-                    <!-- <div class="cognize_video">
+                        <!-- <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" v-if="flag == 'EMOTION_STROOP'" type="video/mp4">
                             您的浏览器不支持 video 标签。
                         </video>
                     </div> -->
-                    <!-- <div class="scale_button">
+                        <!-- <div class="scale_button">
 
                         <div class="scale_button_inner" v-show="!isPass">
                             <div class="scale_button_self" @click="startCog(0)">练习测试
@@ -250,7 +252,7 @@ onUnmounted(() => {
 
                     </div> -->
 
-                    <!-- 
+                        <!-- 
                     <div class="pdf_op">
                         <div class="pdf_sc">
                             <img @click="viewPDF" src="../assets/cognize/pdf.png" width="30px"
@@ -263,57 +265,63 @@ onUnmounted(() => {
 
 
 
-                </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 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>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>
 
-                    <div class="congnize_des_new">
-                        <div class="cognize_des_vd"><span class="cognize_des_line">{{ cognizeDetail.name }}演示视频</span>
+                                <span class="view" @click="viewPDF">预览</span>
+                            </div>
                         </div>
-                        <div class="cognize_des_sc">
-                            <span class="cognize_des_line">{{ cognizeDetail.name }}测试手册</span>
+                    </div>
 
-                            <span class="view" @click="viewPDF">预览</span>
+                    <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 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>
             <span>
                 <!-- :src="requireImg('../assets/cognize/goNogo.pdf')" -->
@@ -453,13 +461,13 @@ onUnmounted(() => {
 
         .font_blue {
             position: relative;
-            color: #00DE7E;
+            color: #30D5DD;
             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: url(../assets/zs/introduction_testing2.png) no-repeat;
             background-size: auto 50px;
         }
     }
@@ -499,7 +507,7 @@ onUnmounted(() => {
 
             .cpll {
                 margin-top: 10px;
-                background-color: #F6F6F6;
+                background-color: #F7F9FB;
                 padding: 20px;
 
                 .cpll_title {
@@ -518,7 +526,7 @@ onUnmounted(() => {
 
             .czsm {
                 margin-top: 10px;
-                background-color: #F6F6F6;
+                background-color: #F7F9FB;
                 padding: 20px;
 
                 .czsm_title {
@@ -558,7 +566,7 @@ onUnmounted(() => {
             }
 
             .cognize_js {
-                background-color: #F6F6F6;
+                background-color: #F7F9FB;
                 padding: 20px;
                 border-radius: 5px;
                 color: #333333;
@@ -654,7 +662,7 @@ onUnmounted(() => {
                     .scale_button_self {
 
                         border-radius: 5px;
-                        border: 1px solid #48D68E;
+                        // border: 1px solid #48D68E;
                         color: #ffffff;
                         background-color: #3B3B3B;
                         margin-right: 20px;
@@ -663,6 +671,8 @@ onUnmounted(() => {
                         display: flex;
                         align-items: center;
                         font-size: 16px;
+                        background: url(../assets/zs/bottom_new.png) no-repeat;
+                        background-size: 100% 100%;
                     }
                 }
             }

src/views/Community.vue

@@ -371,72 +371,75 @@ 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 style="background: linear-gradient( 180deg, #B2EDFF 0%, #FFFFFF 33%);padding-top: 20px;">
+            <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 class="kply_inner">
 
-                <div style="padding :20px 40px">
-                    <!-- <div style="padding:10% 20% ;" v-show="true">
+                    <div style="padding :20px 40px">
+                        <!-- <div style="padding:10% 20% ;" v-show="true">
                         <img width="100%" src="../assets/planNo.png">
                     </div> -->
 
-                    <div class="kepu_title">
-                        <div class="kepu_title_des">
-                            留言社区
-                        </div>
-                        <div>
-                            <div class="home_mid_plan_button">
+                        <div class="kepu_title">
+                            <div class="kepu_title_des">
+                                留言社区
+                            </div>
+                            <div>
+                                <div class="home_mid_plan_button">
 
-                                <div class="pub_button" @click="openPubMsg">
-                                    <!-- <img width="30px" src="../assets/kepu/pub.png" />&nbsp;&nbsp; -->
-                                    发布留言
+                                    <div class="pub_button" @click="openPubMsg">
+                                        <!-- <img width="30px" src="../assets/kepu/pub.png" />&nbsp;&nbsp; -->
+                                        发布留言
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <!-- //留言内容 -->
-                    <div class="com_out" style="overflow: auto" :infinite-scroll-distance="20"
-                        :infinite-scroll-disabled="isLoading || noMore" v-infinite-scroll="getData">
-                        <div v-for="item in list">
-                            <div class="com_title">
-                                <img src="../assets/kepu/man.png" />
-                                <div class="com_des">
-                                    <div class="com_name">
-                                        {{ item.userName }}
-                                    </div>
-                                    <div class="com_time">
-                                        {{ item.createTime }}
+                        <!-- //留言内容 -->
+                        <div class="com_out" style="overflow: auto" :infinite-scroll-distance="20"
+                            :infinite-scroll-disabled="isLoading || noMore" v-infinite-scroll="getData">
+                            <div v-for="item in list">
+                                <div class="com_title">
+                                    <img src="../assets/kepu/man.png" />
+                                    <div class="com_des">
+                                        <div class="com_name">
+                                            {{ item.userName }}
+                                        </div>
+                                        <div class="com_time">
+                                            {{ item.createTime }}
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="com_content">
-                                {{ item.commentContent }}
-                                <div class="com_yan">
-                                    <span style="color: #818996;">{{ item.count }}</span>
-                                    <img height="20px" src="../assets/kepu/yan1.png" @click="subFun(item)" />
+                                <div class="com_content">
+                                    {{ item.commentContent }}
+                                    <div class="com_yan">
+                                        <span style="color: #818996;">{{ item.count }}</span>
+                                        <img height="20px" src="../assets/kepu/yan1.png" @click="subFun(item)" />
 
+                                    </div>
                                 </div>
-                            </div>
 
-                            <el-divider content-position="right"></el-divider>
+                                <el-divider content-position="right"></el-divider>
+                            </div>
+                            <div style="text-align: center" v-if="isLoading">努力加载中...</div>
+                            <div style="text-align: center;" v-if="noMore">没有更多了</div>
                         </div>
-                        <div style="text-align: center" v-if="isLoading">努力加载中...</div>
-                        <div style="text-align: center;" v-if="noMore">没有更多了</div>
+
                     </div>
 
                 </div>
 
             </div>
-
         </div>
 
+
     </div>
 
-    <el-dialog v-model="pub_visible" :show-close="true" width="60%" style="border-radius: 5px;  ">
+    <el-dialog v-model="pub_visible" :show-close="true" width="60%" style="border-radius: 40px;  ">
         <template #header="{ close, titleId, titleClass }">
             <div class="my-header">
                 <div class="msg_dig">
@@ -459,7 +462,7 @@ onUnmounted(() => {
             </div>
         </template>
     </el-dialog>
-    <el-dialog v-model="sub_visible" :show-close="true" width="60%" top="5vh" style="border-radius: 5px;">
+    <el-dialog v-model="sub_visible" :show-close="true" width="60%" top="5vh" style="border-radius: 40px;">
         <template #header="{ close, titleId, titleClass }">
             <div class="my-header">
                 <div class="msg_dig">
@@ -529,8 +532,8 @@ onUnmounted(() => {
 
 :deep(.el-input__wrapper) {
     align-items: center;
-    background-color: #F7F7F7 !important;
-    border-radius: 5px !important;
+    background-color: #F7F9FB !important;
+    border-radius: 20px !important;
 
     // border: none;
     // outline: none !important;
@@ -557,9 +560,9 @@ onUnmounted(() => {
 //     letter-spacing: 1px;
 // }
 :deep(.el-textarea__inner) {
-    background-color: #F7F7F7 !important;
+    background-color: #F7F9FB !important;
     border: none !important;
-    border-radius: 5px;
+    border-radius: 20px;
     border: none !important;
     box-shadow: none !important;
 }
@@ -595,10 +598,10 @@ label {
     flex-direction: column;
 
     .com_des {
-        background-color: #F7F7F7;
+        background-color: #F7F9FB;
         padding: 20px 40px;
         margin-top: 40px;
-        border-radius: 5px;
+        border-radius: 20px;
     }
 
     .com_des1 {
@@ -615,19 +618,22 @@ label {
         justify-content: end;
         margin-top: 40px;
 
+
         // text-align: right;
         .pub_button {
             cursor: pointer;
             // width: 100px;
-            border-radius: 5px;
-            border: 1px solid #48D68E;
+            // border-radius: 20px;
+            // border: 1px solid #48D68E;
             color: #ffffff;
-            background-color: #3B3B3B;
-
+            // background-color: #3B3B3B;
+            border-radius: 5px;
             padding: 8px 30px;
             cursor: pointer;
             display: flex;
             align-items: center;
+            background: url(../assets/zs/bottom_new.png) no-repeat;
+            background-size: 100% 100%;
         }
     }
 
@@ -672,17 +678,17 @@ label {
         margin: auto;
         width: 1200px;
         margin-bottom: 20px;
-        margin-top: 20px;
+        // margin-top: 20px;
 
         .font_blue {
             position: relative;
-            color: #00DE7E;
+            color: #30D5DD;
             font-weight: 700;
             font-size: 22px;
             font-family: 'Rammetto One-Regular';
             padding-top: 30px;
             z-index: 10;
-            background: url(../assets/zs/community1.png) no-repeat;
+            background: url(../assets/zs/community2.png) no-repeat;
             background-size: auto 50px;
 
             // img {
@@ -708,9 +714,10 @@ label {
             width: 1200px;
             // padding: 20px 20px;
             background-color: #ffffff;
-            border-radius: 5px;
+            border-radius: 40px;
             // height: 1000px;
-            box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+            // box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+            box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.09);
 
             // margin-bottom: 60px;
             .kepu_title {
@@ -738,7 +745,7 @@ label {
                         cursor: pointer;
                         // width: 100px;
                         border-radius: 5px;
-                        border: 1px solid #48D68E;
+                        // border: 1px solid #48D68E;
                         color: #ffffff;
                         background-color: #3B3B3B;
 
@@ -746,6 +753,11 @@ label {
                         cursor: pointer;
                         display: flex;
                         align-items: center;
+                        background: url(../assets/zs/bottom_new.png) no-repeat;
+                        background-size: 100% 100%;
+
+
+
                     }
                 }
 
@@ -796,7 +808,7 @@ label {
                 .com_content {
                     letter-spacing: 3px;
                     margin-top: 10px;
-                    background-color: #F6F6F6;
+                    background-color: #F7F9FB;
                     padding: 10px 20px;
                     border-radius: 5px;
                     line-height: 24px;

src/views/HomeView.vue

@@ -249,7 +249,7 @@ const brightStatusLevel = () => {
       </div>
       <div class="home_mid_plan" v-show="isNeed" @click="openSquare" ref="plan_jihua">
 
-        <img style="width: 40px;" src="../assets/home/jihua_img1.png" />
+        <img style="width: 40px;" src="../assets/home/jihua_img2.png" />
         <div class=" badge_custom">
           问卷调查
         </div>
@@ -409,8 +409,9 @@ video {
   // font-size: 10px;
   // color: #ffffff;
   // border-radius: 30px;
-  color: #ffffff;
+  color: #FF35C0;
   font-size: 10px;
+  font-weight: 700;
 }
 
 .home_header_out {
@@ -619,8 +620,8 @@ video {
 }
 
 .home_mid_plan {
-  background-color: #3B3B3B;
-  border: 2px solid #00DE7E;
+  background-color: #FFF0FA;
+  border: 2px solid #FF35C0;
   border-radius: 10px;
   z-index: 1;
   cursor: pointer;

src/views/Login.vue

@@ -101,45 +101,49 @@ const loginFun = async () => {
             <CpmdHeader />
 
         </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 class="login_top">
-                    <span class="des">用户登录</span>
+        <div style="background: linear-gradient( 180deg, #B2EDFF 0%, #FFFFFF 33%);padding-top: 20px;">
+            <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 class="login_top">
+                        <span class="des">用户登录</span>
 
-                </div>
-                <div style="padding: 20px 50px;">
+                    </div>
+                    <div style="padding: 20px 50px;">
 
-                    <div style="margin-top:10px">
-                        <div class="user_account">账号:</div>
-                        <div class="input_cus"> <el-input v-model="account" style="width: 100%" placeholder="请输入账号" />
+                        <div style="margin-top:10px">
+                            <div class="user_account">账号:</div>
+                            <div class="input_cus"> <el-input v-model="account" style="width: 100%"
+                                    placeholder="请输入账号" />
+                            </div>
                         </div>
-                    </div>
-                    <div style="margin-top:10px">
-                        <div class="user_account">密码:</div>
-                        <div><el-input v-model="password" type="password" style="width: 100%" placeholder="请输入密码"
-                                show-password />
+                        <div style="margin-top:10px">
+                            <div class="user_account">密码:</div>
+                            <div><el-input v-model="password" type="password" style="width: 100%" placeholder="请输入密码"
+                                    show-password />
+                            </div>
                         </div>
-                    </div>
-                    <div class="go_register">
-                        <span @click="registerFun">
-                            没有账号，去注册
-                        </span>
-                    </div>
-                    <div class="start_button_out">
-                        <div @click="loginFun" class="start_button_self">登录</div>
-                    </div>
+                        <div class="go_register">
+                            <span @click="registerFun">
+                                没有账号，去注册
+                            </span>
+                        </div>
+                        <div class="start_button_out">
+                            <div @click="loginFun" class="start_button_self">登录</div>
+                        </div>
+
 
+                    </div>
 
                 </div>
 
             </div>
-
         </div>
 
+
     </div>
 
 
@@ -148,7 +152,7 @@ const loginFun = async () => {
 :deep(.el-input__wrapper) {
     align-items: center;
     border-radius: 0px !important;
-    border: 1px solid #00DE7E !important;
+    border: 1px solid #FF60D6 !important;
     padding-left: 20px;
     box-shadow: none
 }
@@ -219,17 +223,18 @@ const loginFun = async () => {
         margin: auto;
         width: 650px;
         margin-bottom: 20px;
-        margin-top: 20px;
+        // margin-top: 20px;
+
 
         .font_blue {
             position: relative;
-            color: #00DE7E;
+            color: #30D5DD;
             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: url(../assets/zs/login_text2.png) no-repeat;
             background-size: auto 50px;
         }
     }
@@ -249,11 +254,15 @@ const loginFun = async () => {
 
             background-color: #ffffff;
             border-radius: 5px;
-            box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+            // box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+            box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.09);
+            border-radius: 40px;
 
             .login_top {
                 background-color: #3B3B3B;
                 line-height: 50px;
+                border-top-left-radius: 40px;
+                border-top-right-radius: 40px;
 
                 .des {
                     color: #ffffff;
@@ -286,7 +295,7 @@ const loginFun = async () => {
                     cursor: pointer;
                     // width: 100px;
                     border-radius: 4px;
-                    border: 1px solid #48D68E;
+                    // border: 1px solid #48D68E;
                     color: #ffffff;
                     background-color: #3B3B3B;
                     margin-right: 20px;
@@ -295,6 +304,8 @@ const loginFun = async () => {
                     display: flex;
                     align-items: center;
                     font-size: 16px;
+                    background: url(../assets/zs/bottom_new.png) no-repeat;
+                    background-size: 100% 100%;
 
                 }
             }
@@ -307,7 +318,7 @@ const loginFun = async () => {
 
             span {
                 font-weight: 700;
-                color: #00DE7E;
+                color: #FF60D6;
                 cursor: pointer;
                 font-size: 16px;
             }

src/views/Plan.vue

@@ -258,116 +258,123 @@ 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 style="background: linear-gradient( 180deg, #B2EDFF 0%, #FFFFFF 33%);padding-top: 20px;">
+            <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>
-                    <div style="box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.17);"
-                        v-show="planList.length == 0 && isFinshed">
-                        <div style="padding:10% 20%;display: flex;justify-content: center ;"
+            <div class="kply">
+                <div class="kply_inner">
+                    <div>
+                        <div style="box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.09);border-radius: 40px;"
                             v-show="planList.length == 0 && isFinshed">
-                            <!-- <img width="100%" src="../assets/planNo.png"> -->
-                            <img width="400px" src=" ../assets/planNo.png">
-                        </div>
-                    </div>
-                    <div class="test_record_out" v-for="item in planList">
-                        <div class="record_tip">
-                            <span class="record_tip_out"><span class="record_tip_inner">创建时间：</span>{{ item.createTime
-                                }}</span>
-                            <span><span class="record_tip_inner">结束时间：</span>{{ item.planEndTime }}</span>
+                            <div style="padding:10% 20%;display: flex;justify-content: center ;"
+                                v-show="planList.length == 0 && isFinshed">
+                                <!-- <img width="100%" src="../assets/planNo.png"> -->
+                                <img width="400px" src=" ../assets/planNo.png">
+                            </div>
                         </div>
-                        <div class="test_record">
-                            <!-- <img src="../assets/kepu/task_1.png" /> -->
-
-                            <span class='plan_name_one'>
-                                {{
-                                    item.planName
-                                }}
-                                <!-- <img style="position: absolute;width: 100%;left: 0px;bottom: -10px;"
+                        <div class="test_record_out" v-for="item in planList">
+                            <div class="record_tip">
+                                <span class="record_tip_out"><span class="record_tip_inner">创建时间：</span>{{
+                                    item.createTime
+                                    }}</span>
+                                <span><span class="record_tip_inner">结束时间：</span>{{ item.planEndTime }}</span>
+                            </div>
+                            <div class="test_record">
+                                <!-- <img src="../assets/kepu/task_1.png" /> -->
+
+                                <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>
+                                <!-- <img style="width:100%" src=" ../assets/zs/plan_line.png" alt=""> -->
+                            </div>
+                            <!-- <div class="test_time">
                             <span>请根据您最近一个月的实际情况，选择最符合自己的选项。所有陈述都无正确和错误之分。所以请您不要再三思考，要根据第一反应诚实作答。</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='noCompleted_status'> 未完成</div>
-                                                    </div>
-                                                    <div class="isCompleted" v-show="subItem.isCompleted == '1'">
-                                                        <div class='isCompleted_status'> 已完成</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='noCompleted_status'> 未完成</div>
+                                                        </div>
+                                                        <div class="isCompleted" v-show="subItem.isCompleted == '1'">
+                                                            <div class='isCompleted_status'> 已完成</div>
+                                                        </div>
+                                                        <div class="isMust" v-show="subItem.isRequired == '1'">必做</div>
+                                                        <div class="isChoosable" v-show="subItem.isRequired == '0'">选做
+                                                        </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 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='noCompleted_status'> 未完成</div>
-                                                    </div>
-                                                    <div class="isCompleted" v-show="subItem.isCompleted == '1'">
-                                                        <div class='isCompleted_status'> 已完成</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'">预计用时:{{
+                                                            subItem.expectTime }}</div>
+                                                        <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 class='isCompleted_status'> 已完成</div>
+                                                        </div>
+                                                        <div class="isMust" v-show="subItem.isRequired == '1'">必做</div>
+                                                        <div class="isChoosable" v-show="subItem.isRequired == '0'">选做
+                                                        </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 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><img style='width:8px;margin-left:4px'
-                                    src='../assets/zs/jian.png' /></div>
+                                <div></div>
+                            </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><img style='width:8px;margin-left:4px'
+                                        src='../assets/zs/jian.png' /></div>
+                            </div>
                         </div>
+                        <!-- 测试记录列表 -->
                     </div>
-                    <!-- 测试记录列表 -->
                 </div>
             </div>
+
         </div>
+
         <CpmdQuestionnaire ref="question" @continueFun="continueFun" />
     </div>
 </template>
@@ -419,17 +426,17 @@ onUnmounted(() => {
         margin: auto;
         width: 1200px;
         margin-bottom: 20px;
-        margin-top: 20px;
+
 
         .font_blue {
             position: relative;
-            color: #00DE7E;
+            color: #30D5DD;
             font-weight: 700;
             font-size: 22px;
             font-family: 'Rammetto One-Regular';
             padding-top: 30px;
             z-index: 10;
-            background: url(../assets/zs/testPlan1.png) no-repeat;
+            background: url(../assets/zs/testPlan2.png) no-repeat;
             background-size: auto 50px;
         }
     }
@@ -504,7 +511,7 @@ onUnmounted(() => {
                 }
 
                 span {
-                    margin-left: 20px;
+                    // margin-left: 20px;
                     font-size: 22px;
                     font-weight: 700;
                     letter-spacing: 3px;
@@ -625,25 +632,27 @@ onUnmounted(() => {
                     cursor: pointer;
                     // width: 100px;
                     border-radius: 4px;
-                    border: 1px solid #48D68E;
+                    // border: 1px solid #48D68E;
                     color: #ffffff;
-                    background-color: #3B3B3B;
+                    // background-color: #3B3B3B;
                     margin-right: 20px;
                     padding: 8px 28px;
                     cursor: pointer;
                     display: flex;
                     align-items: center;
+                    background: url(../assets/zs/bottom_new.png) no-repeat;
+                    background-size: 100% 100%;
 
                 }
             }
 
             .test_record_out {
                 // box-shadow: 5px 5px 5px 5px rgb(190, 189, 189);
-                box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+                box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.09);
                 // margin-top: 40px;
                 // padding: 20px 40px;
                 background-color: #ffffff;
-                border-radius: 5px;
+                border-radius: 40px;
                 position: relative;
                 padding: 20px 40px;
                 margin-bottom: 40px;
@@ -651,17 +660,18 @@ onUnmounted(() => {
 
                 .record_tip {
                     // background-color: #FFF6DF;
-                    background: linear-gradient(to right, #C4FE99, #04DE7E);
+                    // background: linear-gradient(to right, #C4FE99, #04DE7E);
+                    background: #FFB7EB;
                     position: absolute;
                     right: -10px;
                     display: flex;
                     flex-direction: column;
                     top: 20px;
-
+                    border-radius: 10px;
                     // border-top-right-radius: 40px;
                     // border-bottom-left-radius: 40px;
-                    padding: 10px 40px;
-                    color: #4D7D1D;
+                    padding: 10px 20px;
+                    color: #E955BF;
                     font-size: 14px;
                     font-weight: 700;
                     // letter-spacing: 2px;
@@ -688,11 +698,12 @@ onUnmounted(() => {
                     flex-direction: column;
                     width: 100%;
                     // height: 200px;
-                    background-color: #F7F7F7;
-                    border-radius: 10px;
+                    background-color: #F7F9FB;
+                    border-radius: 20px;
 
                     .content_inner {
                         padding: 20px 40px;
+                        border-radius: 20px;
 
                         .content_title {
                             margin-bottom: 0px;
@@ -827,17 +838,18 @@ onUnmounted(() => {
                                                     right: 0px;
                                                     width: 70px;
                                                     color: #ffffff;
-                                                    background-color: #00DE7E;
+                                                    background-color: #FF52CE;
                                                 }
                                             }
 
                                             .isMust {
                                                 position: absolute;
-                                                right: -28px;
-                                                background-color: #00DE7E;
+                                                right: 0px;
+                                                background-color: #3B3B3B;
                                                 font-size: 10px;
                                                 color: #ffffff;
                                                 padding: 4px 10px;
+                                                // font-weight: bold;
                                                 border-radius: 3px;
                                             }
 

src/views/PopularizationScience.vue

@@ -203,43 +203,49 @@ 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;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">
-                            <div>
-                                <div class="scale_title">
-                                    {{ item.title }}
-                                </div>
-                                <div style="display: flex;">
-                                    <div v-show="item.isProfession">
-                                        <!-- <img style="width: 80px;":src="requireImg('isProfession')"> -->
-                                        <div class="isProfession">专业报告</div>
 
+        <div style="background: linear-gradient( 180deg, #B2EDFF 0%, #FFFFFF 33%);padding-top: 20px;">
+            <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;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">
+                                <div>
+                                    <div class="scale_title">
+                                        {{ item.title }}
                                     </div>
-                                    <span v-show="item.isProfession"> &nbsp;&nbsp;</span>
+                                    <div style="display: flex;">
+                                        <div v-show="item.isProfession">
+                                            <!-- <img style="width: 80px;":src="requireImg('isProfession')"> -->
+                                            <div class="isProfession">专业报告</div>
 
-                                    <div v-show="item.isRecommend">
-                                        <div class="isM">强烈推荐</div>
-                                        <!-- <img style="width: 80px;" :src="requireImg('isM')"> -->
-                                    </div>
+                                        </div>
+                                        <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>
                                 </div>
-                            </div>
 
-                            <div class="cyc"><span class="cyc_te" @click="openCode(item)">测一测</span></div>
+                                <div class="cyc"><span class="cyc_te" @click="openCode(item)">测一测</span></div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
+
         </div>
+
+
     </div>
     <div class="code_dig">
         <el-dialog v-model="centerDialogVisible" :title="scaleObj.title" width="500" align-center>
@@ -269,12 +275,12 @@ onUnmounted(() => {
 </template>
 <style>
 .code_dig>>>.el-dialog {
-    border-radius: 5px !important;
+    /* border-radius: 40px !important; */
 }
 </style>
 <style lang="scss" scoped>
 :deep(.el-dialog) {
-    border-radius: 5px !important;
+    border-radius: 40px !important;
 }
 
 .home_header_out {
@@ -311,11 +317,11 @@ onUnmounted(() => {
         margin: auto;
         width: 1200px;
         margin-bottom: 20px;
-        margin-top: 20px;
+        // margin-top: 20px;
 
         .font_blue {
             position: relative;
-            color: #00DE7E;
+            color: #30D5DD;
             font-weight: 700;
             font-size: 22px;
             font-family: 'Rammetto One-Regular';
@@ -334,21 +340,22 @@ onUnmounted(() => {
             right: 0;
             margin: auto;
             width: 1200px;
-            background-color: #ffffff;
+            background-color: transparent;
             border-radius: 40px;
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
 
             .out {
-                margin-top: 40px;
-
+                margin-bottom: 40px;
+                background-color: #ffffff;
                 width: 48%;
                 // background-color: antiquewhite;
                 display: flex;
 
-                box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+                // box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
                 ;
+                box-shadow: 0px 4px 31px 0px rgba(0, 0, 0, 0.09);
                 padding: 20px;
                 box-sizing: border-box;
                 border-radius: 36px;
@@ -380,8 +387,8 @@ onUnmounted(() => {
                             margin-right: 40px;
                             cursor: pointer;
                             // width: 100px;
-                            border-radius: 5px;
-                            border: 1px solid #48D68E;
+                            border-radius: 14px;
+                            border: 2px solid #FF52CE;
                             color: #ffffff;
                             background-color: #000000;
 
@@ -422,7 +429,7 @@ onUnmounted(() => {
 .close_code {
     border: 1px solid #cccaca;
     padding: 2px 20px;
-    border-radius: 4px;
+    border-radius: 10px;
     cursor: pointer;
     height: 30px;
     display: flex;
@@ -434,9 +441,9 @@ onUnmounted(() => {
 .down_code {
     margin-left: 20px;
     cursor: pointer;
-    border: 1px solid #48D68E;
+    border: 2px solid #FF52CE;
     padding: 2px 20px;
-    border-radius: 4px;
+    border-radius: 10px;
     background-color: #000000;
     color: #ffffff;
     display: flex;

src/views/Register.vue

@@ -341,98 +341,103 @@ const roleTypeChange = (val: string) => {
         <div class=" home_header_inner">
             <CpmdHeader />
         </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 class="login_top">
-                    <span class="des">用户注册</span>
-                </div>
-                <div style="padding: 10px 50px;">
-                    <div style="margin-top:20px;display: flex;">
 
-
-                        <div style="flex: 1;">
-                            <div class="user_account" style="width: 100%;">用户类型:</div>
-                            <div class="input_cus" style="width: 100%;"> <el-radio-group size="large"
-                                    @change="roleTypeChange" v-model="roleType">
-                                    <el-radio value="2" size="large">我是教师</el-radio>
-                                    <el-radio value="1" size="large">我是学生</el-radio>
-                                </el-radio-group>
+        <div style="background: linear-gradient( 180deg, #B2EDFF 0%, #FFFFFF 33%);padding-top: 20px;">
+            <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 class="login_top">
+                        <span class="des">用户注册</span>
+                    </div>
+                    <div style="padding: 10px 50px;">
+                        <div style="margin-top:20px;display: flex;">
+
+
+                            <div style="flex: 1;">
+                                <div class="user_account" style="width: 100%;">用户类型:</div>
+                                <div class="input_cus" style="width: 100%;"> <el-radio-group size="large"
+                                        @change="roleTypeChange" v-model="roleType">
+                                        <el-radio value="2" size="large">我是教师</el-radio>
+                                        <el-radio value="1" size="large">我是学生</el-radio>
+                                    </el-radio-group>
+                                </div>
                             </div>
-                        </div>
 
-                    </div>
-                    <div style="margin-top:20px">
-                        <div class="user_account">所属组织架构:</div>
-                        <div class="input_cus">
-                            <el-tree-select v-model="group" placeholder="请选择组织架构" :data="groupData" filterable
-                                style="width:100%" />
                         </div>
-                    </div>
-                    <div style="margin-top:20px;display: flex;">
-                        <div style="flex: 1;" v-show="roleType == '1'">
-                            <div class="user_account">职务:</div>
+                        <div style="margin-top:20px">
+                            <div class="user_account">所属组织架构:</div>
                             <div class="input_cus">
-
-                                <el-select v-model="position" placeholder="请选择职务" size="large">
-                                    <el-option v-for="item in listPosition" :key="item.paramValue"
-                                        :label="item.paramName" :value="item.paramValue" />
-                                </el-select>
+                                <el-tree-select v-model="group" placeholder="请选择组织架构" :data="groupData" filterable
+                                    style="width:100%" />
                             </div>
                         </div>
-                        <div style="flex: 1;display: flex;flex-direction: column;justify-content: end;">
-                            <div class="user_account"
-                                :style="{ width: roleType == '1' ? '90%' : '100%', marginLeft: roleType == '1' ? '10%' : '0%' }">
-                                学号/编号:</div>
-                            <div class="input_cus"> <el-input v-model="account"
-                                    :style="{ width: roleType == '1' ? '90%' : '100%', marginLeft: roleType == '1' ? '10%' : '0%' }"
-                                    placeholder="请输入学号/编号" />
+                        <div style="margin-top:20px;display: flex;">
+                            <div style="flex: 1;" v-show="roleType == '1'">
+                                <div class="user_account">职务:</div>
+                                <div class="input_cus">
+
+                                    <el-select v-model="position" placeholder="请选择职务" size="large">
+                                        <el-option v-for="item in listPosition" :key="item.paramValue"
+                                            :label="item.paramName" :value="item.paramValue" />
+                                    </el-select>
+                                </div>
+                            </div>
+                            <div style="flex: 1;display: flex;flex-direction: column;justify-content: end;">
+                                <div class="user_account"
+                                    :style="{ width: roleType == '1' ? '90%' : '100%', marginLeft: roleType == '1' ? '10%' : '0%' }">
+                                    学号/编号:</div>
+                                <div class="input_cus"> <el-input v-model="account"
+                                        :style="{ width: roleType == '1' ? '90%' : '100%', marginLeft: roleType == '1' ? '10%' : '0%' }"
+                                        placeholder="请输入学号/编号" />
+                                </div>
                             </div>
+
                         </div>
+                        <div style="margin-top:20px;display: flex;">
+                            <div style="flex: 1;">
+                                <div class="user_account">姓名:</div>
+                                <div class="input_cus"> <el-input v-model="name" style="width: 90%;"
+                                        placeholder="请输入姓名" />
+                                </div>
+                            </div>
 
-                    </div>
-                    <div style="margin-top:20px;display: flex;">
-                        <div style="flex: 1;">
-                            <div class="user_account">姓名:</div>
-                            <div class="input_cus"> <el-input v-model="name" style="width: 90%;" placeholder="请输入姓名" />
+                            <div style="flex: 1;">
+                                <div class="user_account" style="width: 90%;margin-left:10%">性别:</div>
+                                <div class="input_cus" style="width: 90%;margin-left:10%"> <el-radio-group size="large"
+                                        v-model="sex">
+                                        <el-radio value="1" size="large">男</el-radio>
+                                        <el-radio value="0" size="large">女</el-radio>
+                                    </el-radio-group>
+                                </div>
                             </div>
-                        </div>
 
-                        <div style="flex: 1;">
-                            <div class="user_account" style="width: 90%;margin-left:10%">性别:</div>
-                            <div class="input_cus" style="width: 90%;margin-left:10%"> <el-radio-group size="large"
-                                    v-model="sex">
-                                    <el-radio value="1" size="large">男</el-radio>
-                                    <el-radio value="0" size="large">女</el-radio>
-                                </el-radio-group>
+                        </div>
+                        <div style="margin-top:20px">
+                            <div class="user_account">密码:</div>
+                            <div><el-input v-model="password" type="password" style="width: 100%" placeholder="请输入密码"
+                                    show-password />
                             </div>
                         </div>
-
-                    </div>
-                    <div style="margin-top:20px">
-                        <div class="user_account">密码:</div>
-                        <div><el-input v-model="password" type="password" style="width: 100%" placeholder="请输入密码"
-                                show-password />
+                        <div style="margin-top:20px">
+                            <div class="user_account">确认密码:</div>
+                            <div><el-input v-model="comPassword" type="password" style="width: 100%" placeholder="请输入密码"
+                                    show-password />
+                            </div>
                         </div>
-                    </div>
-                    <div style="margin-top:20px">
-                        <div class="user_account">确认密码:</div>
-                        <div><el-input v-model="comPassword" type="password" style="width: 100%" placeholder="请输入密码"
-                                show-password />
+                        <div class="go_register">
+                            <span @click="loginFun">
+                                已有账号，去登录
+                            </span>
                         </div>
-                    </div>
-                    <div class="go_register">
-                        <span @click="loginFun">
-                            已有账号，去登录
-                        </span>
-                    </div>
-                    <div class="start_button_out">
-                        <div @click="registerFun" class="start_button_self">注册</div>
-                    </div>
+                        <div class="start_button_out">
+                            <div @click="registerFun" class="start_button_self">注册</div>
+                        </div>
+
 
+                    </div>
 
                 </div>
 
@@ -440,6 +445,8 @@ const roleTypeChange = (val: string) => {
 
         </div>
 
+
+
     </div>
 
 
@@ -449,7 +456,7 @@ const roleTypeChange = (val: string) => {
 :deep(.el-input__wrapper) {
     align-items: center;
     border-radius: 0px !important;
-    border: 1px solid #00DE7E !important;
+    border: 1px solid #FF60D6 !important;
     padding-left: 20px;
     box-shadow: none
 }
@@ -491,7 +498,7 @@ const roleTypeChange = (val: string) => {
 
 :deep(.el-select__wrapper) {
     border-radius: 0px;
-    border: 1px solid #00DE7E;
+    border: 1px solid #FF60D6;
     padding-left: 20px;
     height: 40px;
     box-shadow: none;
@@ -539,12 +546,12 @@ const roleTypeChange = (val: string) => {
 }
 
 :deep(.el-radio__input.is-checked .el-radio__inner) {
-    background: #48D68E;
-    border-color: #B2F2D2;
+    background: #FF60D6;
+    border-color: #FF60D6;
 }
 
 :deep(.el-radio__input.is-checked+.el-radio__label) {
-    color: #48D68E;
+    color: #606266;
 }
 
 
@@ -603,17 +610,17 @@ const roleTypeChange = (val: string) => {
         margin: auto;
         width: 650px;
         margin-bottom: 20px;
-        margin-top: 20px;
+        // margin-top: 20px;
 
         .font_blue {
             position: relative;
-            color: #00DE7E;
+            color: #30D5DD;
             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: url(../assets/zs/register2.png) no-repeat;
             background-size: auto 50px;
         }
     }
@@ -632,12 +639,14 @@ const roleTypeChange = (val: string) => {
             width: 650px;
             min-height: 500px;
             background-color: #ffffff;
-            border-radius: 5px;
+            border-radius: 40px;
             box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
 
             .login_top {
                 background-color: #3B3B3B;
                 line-height: 50px;
+                border-top-left-radius: 40px;
+                border-top-right-radius: 40px;
 
                 .des {
                     color: #ffffff;
@@ -691,7 +700,7 @@ const roleTypeChange = (val: string) => {
 
             span {
                 font-weight: 700;
-                color: #00DE7E;
+                color: #FF60D6;
                 cursor: pointer;
                 font-size: 16px;
             }

src/views/Report.vue

@@ -47,6 +47,7 @@ const option = reactive({
         // data: ['Allocated Budget', 'Actual Spending']
     },
     radar: {
+        center: ['50%', '50%'],
         shape: 'square', //设置雷达图形状，值有circle、square,默认为方形
         splitNumber: 3, // 雷达图圈数设置
         // shape: 'circle',
@@ -119,9 +120,9 @@ const option = reactive({
                     value: echarts_data_list.value,
                     itemStyle: { //该数值区域样式设置
                         normal: {
-                            color: 'RGBA(20, 203, 124, 1)', //背景颜色，还需设置areaStyle   //修改线条颜色
+                            color: '#78E0FE',//背景颜色，还需设置areaStyle   //修改线条颜色
                             lineStyle: {
-                                color: 'RGBA(20, 203, 124, 1)', //边框颜色
+                                color: '#C9F0FC', //边框颜色
                             },
                         },
                     },
@@ -129,7 +130,7 @@ const option = reactive({
                     areaStyle: {
                         //阴影区域背景
                         // color: 'rgba(255, 228, 52, 0.6)'
-                        color: 'rgba(87, 231, 169, 1)'
+                        color: '#C9F0FC'
                     }
                 }
             ]
@@ -249,88 +250,93 @@ onUnmounted(() => {
                 <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 style="background: linear-gradient( 180deg, #B2EDFF 0%, #FFFFFF 33%);padding-top: 20px;">
+            <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>
+            <div class="kply">
+                <div class="kply_inner">
                     <div>
-                        <div class="report_result_top">
-                            <div style="font-size: 20px;font-weight: 700;margin-bottom: 4px;"> {{ planName }}-测评结果</div>
-
-                            <div class="report_totol_score">
-                                <div class="totol_result_des" v-if="reportData.length > 0">
-                                    结论：{{ reportData[0].dimensionAnalysis }}
+                        <div>
+                            <div class="report_result_top">
+                                <div style="font-size: 20px;font-weight: 700;margin-bottom: 4px;"> {{ planName }}-测评结果
                                 </div>
-                            </div>
-                            <div class="report_echarts_out">
-                                <div ref="echarts_ld"
-                                    style="width:300px;height:300px;background:#F6F6F6;margin-right: 10px;"
-                                    v-show="!(goFlag == 'SHAPE_RANDOM' || goFlag == 'ETB01' || goFlag == 'FDOT' || goFlag == 'EMOTION_STROOP')">
+
+                                <div class="report_totol_score">
+                                    <div class="totol_result_des" v-if="reportData.length > 0">
+                                        结论：{{ reportData[0].dimensionAnalysis }}
+                                    </div>
                                 </div>
-                                <div
-                                    style="display: flex;flex-direction: column;align-items: center;flex: 1;height: 300px; box-sizing: border-box;padding: 10px; justify-content: space-around;background:#F6F6F6;">
-                                    <div class="progress_out" v-for="item, index in echarts_name_list">
-                                        <span class="progress_out_name" style="width:150px">
-                                            {{ item.name }}
-                                        </span>
-                                        <el-progress :percentage="echarts_data_list[index]" style="width:100%"
-                                            :stroke-width="18" :show-text='false'
-                                            color="linear-gradient(to right,#4BF6AC ,#00DE7E)" />
-                                        <span class="progress_out_score">{{ echarts_data_list[index] }}<span
-                                                style="color:#000000;font-size: 12px;opacity: 0.4;">/100</span></span>
+                                <div class="report_echarts_out">
+                                    <div ref="echarts_ld"
+                                        style="width:300px;height:300px;background:#F7F9FB;margin-right: 10px;border-radius: 20px;"
+                                        v-show="!(goFlag == 'SHAPE_RANDOM' || goFlag == 'ETB01' || goFlag == 'FDOT' || goFlag == 'EMOTION_STROOP')">
+                                    </div>
+                                    <div
+                                        style="display: flex;flex-direction: column;align-items: center;flex: 1;height: 300px; box-sizing: border-box;padding: 10px; justify-content: space-around;background:#F7F9FB ;border-radius: 20px;">
+                                        <div class="progress_out" v-for="item, index in echarts_name_list">
+                                            <span class="progress_out_name" style="width:150px">
+                                                {{ item.name }}
+                                            </span>
+                                            <!-- color="linear-gradient(to right,#4BF6AC ,#00DE7E)" -->
+                                            <el-progress :percentage="echarts_data_list[index]" style="width:100%"
+                                                :stroke-width="18" :show-text='false' color="#FE75D8" />
+                                            <span class="progress_out_score">{{ echarts_data_list[index] }}<span
+                                                    style="color:#333333;font-size: 12px;">/100</span></span>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
 
-                        </div>
+                            </div>
 
-                        <div v-show="!(goFlag == 'SHAPE_RANDOM' || goFlag == 'ETB01' || goFlag == 'FDOT' || goFlag == 'EMOTION_STROOP')"
-                            v-for="item, index in echarts_name_list" style="padding-top:20px">
-                            <div class="report_des_out">
-                                <div class="des_zhishu">{{ item.name }}</div>
-                                <div class="score" style="display: flex;align-items: center;margin-bottom: 10px;">
-                                    <!-- <img style="width: 20px;margin-right:20px" src="../assets/report/score.png" /> -->
+                            <div v-show="!(goFlag == 'SHAPE_RANDOM' || goFlag == 'ETB01' || goFlag == 'FDOT' || goFlag == 'EMOTION_STROOP')"
+                                v-for="item, index in echarts_name_list" style="padding-top:20px">
+                                <div class="report_des_out">
+                                    <div class="des_zhishu">{{ item.name }}</div>
+                                    <div class="score" style="display: flex;align-items: center;margin-bottom: 10px;">
+                                        <!-- <img style="width: 20px;margin-right:20px" src="../assets/report/score.png" /> -->
 
-                                    <span style="font-weight: 700;color: #222222;margin-left: 10px;">分数：</span>
-                                    <span style="color: #222222;"> {{ echarts_data_list[index] }}</span>
+                                        <span style="font-weight: 700;color: #222222;margin-left: 10px;">分数：</span>
+                                        <span style="color: #222222;"> {{ echarts_data_list[index] }}</span>
 
 
-                                    <span style="color:#999999;letter-spacing: 0px;">（满分100.00）
-                                    </span>
+                                        <span style="color:#999999;letter-spacing: 0px;">（满分100.00）
+                                        </span>
 
-                                </div>
+                                    </div>
 
 
-                                <div
-                                    style=" background-color: #F6F6F6;box-sizing: border-box;padding:10px;border-radius: 5px;">
-                                    <div class="score"
-                                        style="font-weight: 700;color: #222222;display: flex; align-items: center;">
-                                        <!-- <img style="width:20px;margin-right:20px" src="../assets/report/fenxi.png" /> -->
+                                    <div
+                                        style=" background-color:#F7F9FB;box-sizing: border-box;padding:10px;border-radius: 5px;">
+                                        <div class="score"
+                                            style="font-weight: 700;color: #222222;display: flex; align-items: center;">
+                                            <!-- <img style="width:20px;margin-right:20px" src="../assets/report/fenxi.png" /> -->
 
-                                        <div style="color: #818996;font-weight: 400;text-align: left;">分析报告</div>
+                                            <div style="color: #818996;font-weight: 400;text-align: left;">分析报告</div>
 
+                                        </div>
+                                        <div class="des">{{ echarts_des_list[index] }}</div>
                                     </div>
-                                    <div class="des">{{ echarts_des_list[index] }}</div>
                                 </div>
                             </div>
-                        </div>
 
-                        <div class="start_button_out">
-                            <div @click="backFun" class="start_button_self">返回</div>
-                        </div>
+                            <div class="start_button_out">
+                                <div @click="backFun" class="start_button_self">返回</div>
+                            </div>
 
+                        </div>
                     </div>
+
                 </div>
 
             </div>
 
         </div>
 
+
     </div>
 
 
@@ -390,17 +396,17 @@ onUnmounted(() => {
         margin: auto;
         width: 860px;
         margin-bottom: 20px;
-        margin-top: 20px;
+        // margin-top: 20px;
 
         .font_blue {
             position: relative;
-            color: #00DE7E;
+            color: #30D5DD;
             font-weight: 700;
             font-size: 22px;
             font-family: 'Rammetto One-Regular';
             padding-top: 30px;
             z-index: 10;
-            background: url(../assets/zs/result1.png) no-repeat;
+            background: url(../assets/zs/result2.png) no-repeat;
             background-size: auto 50px;
         }
     }
@@ -424,7 +430,8 @@ onUnmounted(() => {
             .report_result_top {
                 box-sizing: border-box;
                 padding: 36px 30px;
-                box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+                box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.09);
+                border-radius: 40px;
 
                 .report_totol_score {
                     // margin-top: 20px;
@@ -494,7 +501,8 @@ onUnmounted(() => {
                     }
 
                     .progress_out_score {
-                        color: #FF1E00;
+                        // color: #FF1E00;
+                        color: #333333;
                         font-weight: 600;
                         margin-right: 25px;
                         margin-left: 15px;
@@ -522,8 +530,9 @@ onUnmounted(() => {
                 // background-color: #F7F7F7;
                 // border: 4px solid #F7F7F7;
                 padding: 20px 40px;
-                border-radius: 5px;
-                box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+                border-radius: 40px;
+                // box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+                box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.09);
 
                 .score {
                     color: #48D68E;
@@ -552,8 +561,8 @@ 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;
                     margin-right: 20px;
@@ -561,6 +570,8 @@ onUnmounted(() => {
                     cursor: pointer;
                     display: flex;
                     align-items: center;
+                    background: url(../assets/zs/bottom_new.png) no-repeat;
+                    background-size: 100% 100%;
 
                 }
             }

src/views/Scale.vue

@@ -579,58 +579,76 @@ onUnmounted(() => {
     <div class="home_header_out">
         <div class=" home_header_inner">
             <CpmdHeader />
-            <div class="report_top">
+            <!-- <div class="report_top">
                 <div class="report_jt">
-                    <span v-if="!(flag == '20210713155333' && isComplate == '2')" style="color:#00DE7E ;">{{ flagName
+                    <span v-if="!(flag == '20210713155333' && isComplate == '2')" style="color:#30D5DD ;">{{ flagName
                         }}</span>
-                    <span v-if="flag == '20210713155333' && isComplate == '2'" style="color:#00DE7E ;">
+                    <span v-if="flag == '20210713155333' && isComplate == '2'" style="color:#30D5DD ;">
                         抑郁-焦虑-压力量表（附加题）</span>
                     <span v-show="!isCompleted" class="des">请根据您的表现回答下列问题，每道题请选择最符合您的情况的选项。</span>
                 </div>
-                <!-- <img v-show="!isCompleted" class="xlts_img" src="../assets/scale/scale.png" /> -->
-            </div>
-
+            </div> -->
         </div>
-        <div class="kply">
-            <div class="kply_inner">
-                <div style=" padding :10px 100px">
-                    <!-- :style="{ border: isCompleted ? '8px solid #ffffff' : '8px solid #B2F2D2' } -->
-                    <el-progress v-if="!(flag == '20210713155333' && isComplate == '2')" :text-inside="true"
-                        :stroke-width="20" :percentage="(topicIndex / scaleList.length) * 100"
-                        color="linear-gradient(to right,#C4FE99,#02DE7E)">
-                        <span style="color:#000000">{{ topicIndex }}/{{ scaleList.length }}</span>
-                    </el-progress>
-                    <el-progress v-if="flag == '20210713155333' && isComplate == '2'" :text-inside="true"
-                        color="linear-gradient(to right,#C4FE99,#02DE7E)" :stroke-width="20"
-                        :percentage="((topicIndex + planIsComplateNum) / planAllNum) * 100">
-                        <span style="color:#000000">{{ topicIndex + planIsComplateNum }}/{{ planAllNum }}</span>
-                    </el-progress>
-                    <div v-if="scaleList.length > 0">
-                        <div class="scale_title" v-if="!(flag == '20210713155333' && isComplate == '2')">{{ topicIndex
-                            }}：{{ scaleList[topicIndex - 1].content }}</div>
-                        <div class="scale_title" v-if="flag == '20210713155333' && isComplate == '2'">{{ topicIndex +
-                            planIsComplateNum }}：{{ scaleList[topicIndex - 1].content }}</div>
-                        <el-radio-group v-model="scaleList[topicIndex - 1].isCheck" class="scale_radio_group">
-                            <el-radio-button
-                                v-for="item in scaleList[topicIndex - 1].checkItems.split('；').sort(() => { return Math.random() - 0.5 })  "
-                                @change="radioFun" :label="item" :value="item" />
-                        </el-radio-group>
-                        <div class="scale_button">
-                            <el-row>
-                                <el-col :span="12" class="scale_button_inner">
-                                    <div v-show="topicIndex > 1" class="scale_button_self" @click="lastTopic">上一题
-                                    </div>
-                                </el-col>
-                                <el-col :span="12" class="scale_button_inner">
-                                    <div v-show="topicIndex < scaleList.length" class="scale_button_self"
-                                        @click="nextTopic">下一题</div>
-                                    <!-- <div v-show="topicIndex == scaleList.length" class="scale_button_self"
-                                        @click="subScaleData">提交</div> -->
-                                </el-col>
-                            </el-row>
-
+        <div style="background: linear-gradient( 180deg, #B2EDFF 0%, #FFFFFF 33%);padding-top: 20px;">
+            <div class=" home_header_inner">
+
+                <div class="report_top">
+                    <div class="report_jt">
+                        <span v-if="!(flag == '20210713155333' && isComplate == '2')" style="color:#30D5DD ;">{{
+                            flagName
+                            }}</span>
+                        <span v-if="flag == '20210713155333' && isComplate == '2'" style="color:#30D5DD ;">
+                            抑郁-焦虑-压力量表（附加题）</span>
+                        <span v-show="!isCompleted" class="des">请根据您的表现回答下列问题，每道题请选择最符合您的情况的选项。</span>
+                    </div>
+                    <!-- <img v-show="!isCompleted" class="xlts_img" src="../assets/scale/scale.png" /> -->
+                </div>
 
+            </div>
+            <div class="kply">
+                <div class="kply_inner">
+                    <div style=" padding :10px 100px">
+                        <!-- :style="{ border: isCompleted ? '8px solid #ffffff' : '8px solid #B2F2D2' } -->
+                        <!-- color="linear-gradient(to right,#C4FE99,#02DE7E)" -->
+                        <el-progress v-if="!(flag == '20210713155333' && isComplate == '2')" :text-inside="true"
+                            :stroke-width="20" :percentage="(topicIndex / scaleList.length) * 100" color="#FF60D6">
+                            <span style="color:#000000">{{ topicIndex }}/{{ scaleList.length }}</span>
+                        </el-progress>
+                        <el-progress v-if="flag == '20210713155333' && isComplate == '2'" :text-inside="true"
+                            color="#FF60D6" :stroke-width="20"
+                            :percentage="((topicIndex + planIsComplateNum) / planAllNum) * 100">
+                            <span style="color:#000000">{{ topicIndex + planIsComplateNum }}/{{ planAllNum }}</span>
+                        </el-progress>
+                        <div v-if="scaleList.length > 0">
+                            <div class="scale_title" v-if="!(flag == '20210713155333' && isComplate == '2')">{{
+                                topicIndex
+                                }}：{{ scaleList[topicIndex - 1].content }}</div>
+                            <div class="scale_title" v-if="flag == '20210713155333' && isComplate == '2'">{{ topicIndex
+                                +
+                                planIsComplateNum }}：{{ scaleList[topicIndex - 1].content }}</div>
+                            <el-radio-group v-model="scaleList[topicIndex - 1].isCheck" class="scale_radio_group">
+                                <el-radio-button
+                                    v-for="item in scaleList[topicIndex - 1].checkItems.split('；').sort(() => { return Math.random() - 0.5 })  "
+                                    @change="radioFun" :label="item" :value="item" />
+                            </el-radio-group>
+                            <div class="scale_button">
+                                <el-row>
+                                    <el-col :span="12" class="scale_button_inner">
+                                        <div v-show="topicIndex > 1" class="scale_button_self" @click="lastTopic">上一题
+                                        </div>
+                                    </el-col>
+                                    <el-col :span="12" class="scale_button_inner">
+                                        <div v-show="topicIndex < scaleList.length" class="scale_button_self"
+                                            @click="nextTopic">下一题</div>
+                                        <!-- <div v-show="topicIndex == scaleList.length" class="scale_button_self"
+                            @click="subScaleData">提交</div> -->
+                                    </el-col>
+                                </el-row>
+
+
+                            </div>
                         </div>
+
                     </div>
 
                 </div>
@@ -638,6 +656,8 @@ onUnmounted(() => {
             </div>
 
         </div>
+
+
         <CpdmTip ref="cpdmTip" />
     </div>
 
@@ -677,12 +697,13 @@ onUnmounted(() => {
     width: 100%;
     border-radius: 5px !important;
     margin-top: 10px;
-    border: 1px solid #89DF32;
-    border-left: 1px solid #89DF32 !important;
+    border: 0px solid #89DF32;
+    border-left: 0px solid #89DF32 !important;
     padding: 10px 10px;
     font-size: 14px;
     font-weight: 700;
     text-align: left;
+    background-color: #F7F9FB;
 
 }
 
@@ -690,15 +711,15 @@ onUnmounted(() => {
     width: 100%;
     border-radius: 5px !important;
     margin-top: 10px;
-    border: 1px solid #89DF32;
-    border-left: 1px solid #89DF32 !important;
+    border: 0px solid #89DF32;
+    border-left: 0px solid #89DF32 !important;
     padding: 10px 10px;
     font-size: 14px;
     font-weight: 700;
     text-align: left;
 
     color: #000000;
-    background-color: #00DE7E;
+    background-color: #FFABEA;
     color: #ffffff;
 
 }
@@ -711,7 +732,7 @@ onUnmounted(() => {
 // }
 
 :deep().el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner {
-    background-color: #00DE7E !important;
+    background-color: #FFABEA !important;
     border-color: #B2F2D2 !important;
     box-shadow: 0 0 0 0 var(--el-radio-button-checked-border-color, var(--el-color-primary)) !important;
     color: var(--el-radio-button-checked-text-color, var(--el-color-white));
@@ -767,7 +788,7 @@ onUnmounted(() => {
 
                 .des {
                     font-weight: 100;
-                    color: #20E28E;
+                    color: #30D5DD;
                     // opacity: 0.4;
                     font-size: 15px;
                     letter-spacing: 0px;
@@ -786,7 +807,8 @@ onUnmounted(() => {
 
         .kply_inner {
             // border: 8px solid #B2F2D2;
-            box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+            // box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+            box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.09);
             min-height: 500px;
             left: 0;
             right: 0;
@@ -794,7 +816,7 @@ onUnmounted(() => {
             width: 860px;
             // padding: 20px 20px;
             background-color: #ffffff;
-            border-radius: 5px;
+            border-radius: 40px;
 
             .scale_title {
                 margin-top: 20px;
@@ -820,7 +842,7 @@ onUnmounted(() => {
                     .scale_button_self {
 
                         border-radius: 5px;
-                        border: 1px solid #48D68E;
+                        // border: 1px solid #48D68E;
                         color: #ffffff;
                         background-color: #3B3B3B;
                         margin-right: 20px;
@@ -829,6 +851,9 @@ onUnmounted(() => {
                         display: flex;
                         align-items: center;
                         font-size: 14px;
+                        background: url(../assets/zs/bottom_new.png) no-repeat;
+                        background-size: 100% 100%;
+
                     }
                 }
             }

src/views/ScaleDetail.vue

@@ -194,71 +194,76 @@ const startText = () => {
             </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);border-radius: 48px;">
-                    <!-- <div class="cognize_title">
+        <div style="background: linear-gradient( 180deg, #B2EDFF 0%, #FFFFFF 33%);padding-top: 20px;">
+            <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);border-radius: 48px;">
+                        <!-- <div class="cognize_title">
                         {{ scaleName }}
                     </div> -->
-                    <div class="cognize_img_out">
-                        <!-- /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">
-                            <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 class="cognize_img_out">
+                            <!-- /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">
+                                <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/jian1.png" alt=""></div>
+                                            </el-col>
+                                        </el-row>
+                                    </div>
                                 </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 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>
-                    <!-- <div class="yl_out">
+                        <!-- <div class="yl_out">
                         <span class="yl">原理:</span>
                         <span class="yl_detail">{{ theory }}</span>
                     </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 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>
             </div>
         </div>
+
+
     </div>
 </template>
 
 <style lang="scss" scoped>
 .cognize_js {
-    background-color: #F6F6F6;
+    background-color: #F7F9FB;
     padding: 20px;
     border-radius: 5px;
     color: #333333;
@@ -304,17 +309,17 @@ const startText = () => {
         margin: auto;
         width: 860px;
         margin-bottom: 20px;
-        margin-top: 20px;
+        // margin-top: 20px;
 
         .font_blue {
             position: relative;
-            color: #00DE7E;
+            color: #30D5DD;
             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: url(../assets/zs/introduction_testing2.png) no-repeat;
             background-size: auto 50px;
         }
     }
@@ -456,7 +461,7 @@ const startText = () => {
                     .scale_button_self {
 
                         border-radius: 5px;
-                        border: 1px solid #48D68E;
+                        // border: 1px solid #48D68E;
                         color: #ffffff;
                         background-color: #333333;
                         margin-right: 20px;
@@ -465,6 +470,9 @@ const startText = () => {
                         display: flex;
                         align-items: center;
                         font-size: 16px;
+                        background: url(../assets/zs/bottom_new.png) no-repeat;
+                        background-size: 100% 100%;
+
                     }
                 }
             }

src/views/TestRecord.vue

@@ -138,7 +138,7 @@ onMounted(() => {
 
 //跳转页面切换页面
 const viewReport = (val: any) => {
-    debugger;
+    // debugger;
     router.push({ name: 'report', params: { planId: val.planId, flag: val.flag, name: val.name } })
     // router.push({ name: 'report', params: { planId: 'a', flag: 'b' } })
     // router.push({ name: 'report' })
@@ -165,118 +165,126 @@ 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>
-                    <!-- <div style="width: 1200px;margin-left:32px; box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.17);"
+        <div style="background: linear-gradient( 180deg, #B2EDFF 0%, #FFFFFF 33%);padding-top: 20px;">
+            <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>
+
+                        <!-- <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="400px" src="../assets/planNo.png">
                     </div> -->
 
-                    <div style="box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.17);width: 1200px;margin-left:32px"
-                        v-show="list.length == 0">
-                        <div style="padding:10% 20%;display: flex;justify-content: center ;">
-                            <!-- <img width="100%" src="../assets/planNo.png"> -->
-                            <img width="400px" src=" ../assets/planNo.png">
+                        <div style="box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.17);width: 1200px;margin-left:32px;border-radius: 40px;  background-color: #ffffff;"
+                            v-show="list.length == 0">
+                            <div style="padding:10% 20%;display: flex;justify-content: center ;">
+                                <!-- <img width="100%" src="../assets/planNo.png"> -->
+                                <img width="400px" src=" ../assets/planNo.png">
+                            </div>
                         </div>
-                    </div>
-                    <div class="infinite-list-wrapper" style="overflow: auto" v-infinite-scroll="getData">
-                        <div>
-                            <div v-for="item in list" class='record_zt'>
-                                <div class="test_record">
-                                    <span class="test_plan_name">{{ item.planName }}
+                        <div class="infinite-list-wrapper" style="overflow: auto" v-infinite-scroll="getData">
+                            <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>
+                                            <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'">预计用时:{{
+                                    </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'> 查看报告 <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 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'> 查看报告 <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 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>
@@ -287,14 +295,16 @@ 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>
 
-                        <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>
+                        <!-- 测试记录列表 -->
 
-                    <!-- 测试记录列表 -->
+                    </div>
 
                 </div>
 
@@ -302,6 +312,7 @@ onUnmounted(() => {
 
         </div>
 
+
     </div>
 
 
@@ -339,17 +350,17 @@ onUnmounted(() => {
         margin: auto;
         width: 1200px;
         margin-bottom: 20px;
-        margin-top: 20px;
+        // margin-top: 20px;
 
         .font_blue {
             position: relative;
-            color: #00DE7E;
+            color: #30D5DD;
             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: url(../assets/zs/test_record2.png) no-repeat;
             background-size: auto 50px;
         }
     }
@@ -364,24 +375,28 @@ onUnmounted(() => {
             right: 0;
             margin: auto;
             width: 1264px;
-
-            background-color: #ffffff;
+            background-color: transparent;
+            // background-color: #ffffff;
             border-radius: 40px;
             // margin-bottom: 20px;
 
             // height: 1000px;
             .infinite-list-wrapper {
-                padding: 32px;
+                // padding: 32px;
+                padding: 0px 32px 32px 32px;
 
                 // max-height: 900px;
                 // max-height: 500px;
                 // min-height: 500px;
                 .record_zt {
 
-                    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+                    // box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
+                    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.05);
                     margin-bottom: 40px;
                     box-sizing: border-box;
-                    padding: 32px 20px;
+                    padding: 32px 40px;
+                    background-color: #ffffff;
+                    border-radius: 40px;
 
                 }
 
@@ -463,7 +478,7 @@ onUnmounted(() => {
                             font-size: 14px;
                             line-height: 24px;
                             font-weight: 100;
-                            background-color: #00DE7E;
+                            background-color: #FF52CE;
                             color: #ffffff;
                             width: 50px;
                             top: -20px;
@@ -539,10 +554,12 @@ onUnmounted(() => {
                     width: 100%;
                     // height: 200px;
                     background-color: #F7F7F7;
-                    border-radius: 5px;
+                    border-radius: 20px;
 
                     .content_inner {
                         padding: 20px 40px;
+                        background-color: #F7F9FB;
+                        border-radius: 20px;
 
                         .content_title {
                             margin-bottom: 0px;
@@ -632,7 +649,7 @@ onUnmounted(() => {
                                             .isMust {
                                                 position: absolute;
                                                 right: 0;
-                                                background-color: #00DE7E;
+                                                background-color: #3B3B3B;
                                                 font-size: 10px;
                                                 color: #ffffff;
                                                 padding: 4px 10px;
@@ -647,7 +664,7 @@ onUnmounted(() => {
                                                 color: #7D7D7D;
                                                 padding: 4px 10px;
                                                 border-radius: 3px;
-                                                border: 1px solid #00DE7E;
+                                                // border: 1px solid #00DE7E;
                                             }
 
                                             .title {
@@ -698,10 +715,12 @@ onUnmounted(() => {
                                                     right: 0px;
                                                     width: 70px;
                                                     border-radius: 4px;
-                                                    border: 1px solid #48D68E;
+                                                    // border: 1px solid #48D68E;
                                                     color: #ffffff;
                                                     background-color: #3B3B3B;
-                                                    cursor: pointer
+                                                    cursor: pointer;
+                                                    background: url(../assets/zs/bottom_new.png) no-repeat;
+                                                    background-size: 100% 100%;
                                                 }
                                             }
                                         }

src/views/UpdatePas.vue

@@ -55,7 +55,7 @@ const validatePassword = (password: string) => {
 }
 //登录方法
 const loginFun = async () => {
-    debugger;
+    // debugger;
     if (isLock.value) {
         return
     }
@@ -154,48 +154,52 @@ const loginFun = async () => {
             <CpmdHeader />
 
         </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 class="login_top">
-                    <span class="des">修改密码</span>
+        <div style="background: linear-gradient( 180deg, #B2EDFF 0%, #FFFFFF 33%);padding-top: 20px;">
+            <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 class="login_top">
+                        <span class="des">修改密码</span>
 
-                </div>
-                <div style="padding: 20px 50px;">
+                    </div>
+                    <div style="padding: 20px 50px;">
 
-                    <div style="margin-top:10px">
-                        <div class="user_account">当前密码:</div>
-                        <div class="input_cus"> <el-input v-model="currentPass" type="password" show-password
-                                style="width: 100%" placeholder="请输入密码" />
+                        <div style="margin-top:10px">
+                            <div class="user_account">当前密码:</div>
+                            <div class="input_cus"> <el-input v-model="currentPass" type="password" show-password
+                                    style="width: 100%" placeholder="请输入密码" />
+                            </div>
                         </div>
-                    </div>
-                    <div style="margin-top:10px">
-                        <div class="user_account">新密码:</div>
-                        <div><el-input v-model="password" type="password" style="width: 100%" placeholder="请输入密码"
-                                show-password />
+                        <div style="margin-top:10px">
+                            <div class="user_account">新密码:</div>
+                            <div><el-input v-model="password" type="password" style="width: 100%" placeholder="请输入密码"
+                                    show-password />
+                            </div>
                         </div>
-                    </div>
-                    <div style="margin-top:10px">
-                        <div class="user_account">确认密码:</div>
-                        <div><el-input v-model="comPassword" type="password" style="width: 100%" placeholder="请输入密码"
-                                show-password />
+                        <div style="margin-top:10px">
+                            <div class="user_account">确认密码:</div>
+                            <div><el-input v-model="comPassword" type="password" style="width: 100%" placeholder="请输入密码"
+                                    show-password />
+                            </div>
                         </div>
-                    </div>
 
-                    <div class="start_button_out">
-                        <div @click="loginFun" class="start_button_self">确定</div>
-                    </div>
+                        <div class="start_button_out">
+                            <div @click="loginFun" class="start_button_self">确定</div>
+                        </div>
 
 
+                    </div>
+
                 </div>
 
             </div>
 
         </div>
 
+
     </div>
 
 
@@ -204,7 +208,7 @@ const loginFun = async () => {
 :deep(.kply_inner .el-input__wrapper) {
     align-items: center;
     border-radius: 0px !important;
-    border: 1px solid #00DE7E !important;
+    border: 1px solid #FF60D6 !important;
     padding-left: 20px;
     box-shadow: none
 }
@@ -271,17 +275,17 @@ const loginFun = async () => {
         margin: auto;
         width: 650px;
         margin-bottom: 20px;
-        margin-top: 20px;
+        // margin-top: 20px;
 
         .font_blue {
             position: relative;
-            color: #00DE7E;
+            color: #30D5DD;
             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: url(../assets/zs/change_password2.png) no-repeat;
             background-size: auto 50px;
         }
     }
@@ -302,7 +306,7 @@ const loginFun = async () => {
             // min-height: 500px;
 
             background-color: #ffffff;
-            border-radius: 5px;
+            border-radius: 40px;
             box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
 
             .user_account {
@@ -315,6 +319,8 @@ const loginFun = async () => {
             .login_top {
                 background-color: #3B3B3B;
                 line-height: 50px;
+                border-top-left-radius: 40px;
+                border-top-right-radius: 40px;
 
                 .des {
                     color: #ffffff;
@@ -339,7 +345,7 @@ const loginFun = async () => {
                     cursor: pointer;
                     // width: 100px;
                     border-radius: 5px;
-                    border: 1px solid #48D68E;
+                    // border: 1px solid #48D68E;
                     color: #ffffff;
                     background-color: #3B3B3B;
                     margin-right: 20px;
@@ -348,6 +354,8 @@ const loginFun = async () => {
                     display: flex;
                     align-items: center;
                     font-size: 16px;
+                    background: url(../assets/zs/bottom_new.png) no-repeat;
+                    background-size: 100% 100%;
 
                 }
             }