Home Explore Help
Register Sign In
psychological_camera
/
cpdm_pc
8
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

新版本代码修改

plg 1 month ago
parent
9546c52521
commit
1f22d90d93
31 changed files with 509 additions and 599 deletions
Split View Show Diff Stats
  1. 26 14
      index.html
  2. BIN
      src/assets/home/grouo_yuan.png
  3. BIN
      src/assets/home/group_five.png
  4. BIN
      src/assets/home/group_four.png
  5. BIN
      src/assets/home/group_senven.png
  6. BIN
      src/assets/home/group_six.png
  7. BIN
      src/assets/home/group_slide_1.png
  8. BIN
      src/assets/home/group_slide_2.png
  9. BIN
      src/assets/home/group_slide_3.png
  10. BIN
      src/assets/home/group_three.png
  11. BIN
      src/assets/home/group_title.png
  12. BIN
      src/assets/home/group_two.png
  13. BIN
      src/assets/home/group_zc.png
  14. BIN
      src/assets/kepu/yan1.png
  15. BIN
      src/assets/video/background.mp4
  16. 26 9
      src/components/CpmdFooter.vue
  17. 77 37
      src/components/CpmdHeader.vue
  18. 1 1
      src/main.ts
  19. 1 1
      src/router/index.ts
  20. 28 22
      src/views/Community.vue
  21. 2 0
      src/views/Home.vue
  22. 123 339
      src/views/HomeView.vue
  23. 10 9
      src/views/Login.vue
  24. 33 24
      src/views/Plan.vue
  25. 11 8
      src/views/PopularizationScience.vue
  26. 10 7
      src/views/Register.vue
  27. 99 83
      src/views/Report.vue
  28. 35 26
      src/views/Scale.vue
  29. 9 7
      src/views/ScaleDetail.vue
  30. 8 5
      src/views/TestRecord.vue
  31. 10 7
      src/views/UpdatePas.vue

+ 26 - 14
index.html
View File 

@@ -1,20 +1,32 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-  <head>
 
-    <meta charset="UTF-8">
 
-    <link rel="icon" href="/favicon.png">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>学生心理健康测评系统</title>
 
-  </head>
 
-  <body>
 
-    <div id="app"></div>
 
-    <script type="module" src="/src/main.ts"></script>
 
-  </body>
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <link rel="icon" href="/favicon.png">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>学生心理健康测评系统</title>
 
+</head>
 
+
 
+<body>
 
+  <div id="app"></div>
 
+  <script type="module" src="/src/main.ts"></script>
 
+</body>
 
+
 
 </html>
 
 <style lang="scss">
 
+  html,
 
+  body {
 
+    margin: 0;
 
+    padding: 0;
 
+    height: 100%;
 
+    overflow-x: hidden;
 
+    /* 防止水平滚动 */
 
+  }
 
 
-  body{
 
-    margin:0px;
 
-    user-select:none;
 
+  body {
 
+    scroll-snap-type: y mandatory;
 
+    /* 垂直方向上的强制滚动捕捉 */
 
+    /* 防止水平滚动 */
 
   }
 
-</style>
 
+</style>

BIN
src/assets/home/grouo_yuan.png
View File


BIN
src/assets/home/group_five.png
View File


BIN
src/assets/home/group_four.png
View File


BIN
src/assets/home/group_senven.png
View File


BIN
src/assets/home/group_six.png
View File


BIN
src/assets/home/group_slide_1.png
View File


BIN
src/assets/home/group_slide_2.png
View File


BIN
src/assets/home/group_slide_3.png
View File


BIN
src/assets/home/group_three.png
View File


BIN
src/assets/home/group_title.png
View File


BIN
src/assets/home/group_two.png
View File


BIN
src/assets/home/group_zc.png
View File


BIN
src/assets/kepu/yan1.png
View File


BIN
src/assets/video/background.mp4
View File


+ 26 - 9
src/components/CpmdFooter.vue
View File 

@@ -1,8 +1,27 @@
 
 <script lang="ts" setup>
 
+import { onMounted, ref } from 'vue'
 
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 
+
 
+import { menuStatusStore } from '@/stores';
 
+// import url from '../assets/home/trademark.png';
 
+//选中的索引
 
+
 
+const menuStatus = menuStatusStore()
 
+
 
+const activeIndex = ref<string>()
 
+
 
+onMounted(() => {
 
+    activeIndex.value = menuStatus.activeIndex
 
+    console.log('foot')
 
+    console.log(activeIndex.value)
 
+})
 
+
 
 </script>
 
 <template>
 
     <!-- 此处最大宽度是1200px -->
 
-    <div class="home_footer_inner">
 
+    <div class="home_footer_inner" :style="{ scrollSnapAlign: 'start' }">
 
+        <img src="../assets/home/group_five.png" width="100%" alt="">
 
         <!-- <div class="home_footer_icon">
 
             <div class="home_footer_company">
 
                 <img width="200px" src="../assets/home/ding_xiang.png" />
 
@@ -35,7 +54,7 @@
 
             <div class="home_footer_fo_des">游戏内容</div>
 
             <div class="home_footer_fo_des">联系我们</div>
 
         </div> -->
 
-        <div class="icon_list">
 
+        <!-- <div class="icon_list">
 
             <div class="icon_inner">
 
                 <img class="img_icon" src="../assets/footer/5.png" alt="">
 
                 <span class="icon_font">首都医科大学</span>
 
@@ -43,9 +62,7 @@
 
             </div>
 
             <div class="icon_inner">
 
                 <img class="img_icon" src="../assets/footer/1.png" alt="">
 
-                <!-- <span class="icon_font">中国人民解放军军事科学院军事医学研究院</span> -->
 
                 <span class="icon_font">中国人民解放军军事科学院军事医学研究院</span>
 
-                <!-- <span class="icon_font">中国人民解放军军事科学院军事医学研究院</span> -->
 
             </div>
 
             <div class="icon_inner">
 
                 <img class="img_icon" src="../assets/footer/4.png" alt="">
 
@@ -70,19 +87,19 @@
 
         <div class="home_footer_fo">
 
             <div class="home_footer_fo_des">隐私</div>
 
             <div class="home_footer_fo_des">使用条款</div>
 
-            <!-- <div class="home_footer_fo_des">北京丁香科技有限公司</div> -->
 
-        </div>
 
+        </div> -->
 
     </div>
 
 </template>
 
 <style lang="scss">
 
 .home_footer_inner {
 
-    padding: 30px 0px;
 
-    background-color: #000000;
 
+    // scroll-snap-align: start;
 
+    // padding: 30px 0px;
 
+    // background-color: #000000;
 
     // position: absolute;
 
     // left: 0;
 
     // right: 0;
 
     margin: auto;
 
-    width: 1200px;
 
+    // width: 1200px;
 
 
     .home_footer_icon {
 
         display: flex;

+ 77 - 37
src/components/CpmdHeader.vue
View File 

@@ -15,6 +15,7 @@ const menuStatus = menuStatusStore()
 
 
 const activeIndex = ref<string>()
 
 activeIndex.value = menuStatus.activeIndex
 
+// app.config.globalProperties.$globalMsg = '2'
 
 
 const visible = ref<boolean>(false)
 
 
@@ -24,14 +25,19 @@ const handleSelect = (key: string, keyPath: []) => {
 
     activeIndex.value = key;
 
     if (key == '1') {
 
         router.push({ name: 'homeView' })
 
+
 
     } else if (key == '2') {
 
         router.push({ name: 'popularizationScience' })
 
+
 
     } else if (key == '3') {
 
         router.push({ name: 'community', })
 
+
 
     } else if (key == '4') {
 
         router.push({ name: 'plan', })
 
+
 
     } else if (key == '5') {
 
         router.push({ name: 'testRecord' })
 
+
 
     }
 
     // menuStatus.saveActiveIndex(key)
 
 }
 
@@ -88,16 +94,21 @@ const leaveFun = () => {
 
 <template>
 
 
     <!-- :style="{ backgroundColor: activeIndex == '1' ? '#ffffff' : '' }" -->
 
-    <div class="header_qp" :style="{ backgroundColor: activeIndex == '1' ? '#ffffff' : '' }">
 
+    <div class="header_qp" :style="{ backgroundColor: activeIndex == '1' ? 'transparent' : '#3B3B3B' }">
 
         <div class="header_p">
 
             <div class="header_image">
 
                 <!-- <img style="width: 239px; height: 55px" src="../assets/home/trademarkNew.png"></img> -->
 
                 <!-- <img style="width: 239px; height: 55px" src="../assets/home/trademarkNew.png"></img> -->
 
-                <div>学生心理健康测评系统</div>
 
+                <!-- <div>学生心理健康测评系统</div> -->
 
+                <div style="display: flex;align-items: center;">
 
+                    <span class="home_line_1"></span>
 
+                    <img style="width: 20vw;" src="../assets/home/group_title.png" alt="">
 
+                </div>
 
             </div>
 
             <el-menu :default-active="activeIndex" class="el-menu-demo" style="display: flex;" mode="horizontal"
 
                 :ellipsis="false" @select="handleSelect">
 
-                <el-menu-item index="1">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</el-menu-item>
 
+                <el-menu-item index="1"><span
 
+                        :class="{ 'underlined-text': activeIndex == 1 }">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</span></el-menu-item>
 
 
 
                 <!-- <el-badge :value="200" :max="99" class="item">
 
@@ -107,23 +118,23 @@ const leaveFun = () => {
 
                     <div class="badge_custom" v-show="userInfo.planCurrentNum != 0">
 
                         {{ userInfo.planCurrentNum }}
 
                     </div>
 
-                    <span>测试计划</span>
 
+                    <span :class="{ 'underlined-text': activeIndex == 4 }">测试计划</span>
 
                 </el-menu-item>
 
                 <el-menu-item index="5">
 
                     <div class="badge_custom" v-show="userInfo.unreadNum != 0">
 
                         {{ userInfo.unreadNum }}
 
                     </div>
 
-                    <span>测试记录</span>
 
+                    <span :class="{ 'underlined-text': activeIndex == 5 }">测试记录</span>
 
 
                 </el-menu-item>
 
-                <el-menu-item index="2">更多测试</el-menu-item>
 
-                <el-menu-item index="3">留言社区</el-menu-item>
 
+                <el-menu-item index="2"><span
 
+                        :class="{ 'underlined-text': activeIndex == 2 }">更多测试</span></el-menu-item>
 
+                <el-menu-item index="3"><span
 
+                        :class="{ 'underlined-text': activeIndex == 3 }">留言社区</span></el-menu-item>
 
             </el-menu>
 
-
 
+            <span class="home_line"></span>
 
             <div class="login_button_bg" @mouseenter="comeMenu" @mouseleave="leaveMenu"
 
                 v-show="userInfo.userInfo.userName">
 
-                <img width="20px" src="../assets/home/button_login.png" />
 
-                &nbsp;&nbsp;&nbsp;&nbsp;
 
                 <span :title="userInfo.userInfo.userName">{{ formatterName(userInfo.userInfo.userName) }}</span>
 
                 <transition>
 
                     <div class="login_user" v-show="falgMenu">
 
@@ -140,14 +151,12 @@ const leaveFun = () => {
 
                 </transition>
 
 
             </div>
 
-            <div class="login_button_bg" v-show="!userInfo.userInfo.userName" @click="login">
 
-                <img width="20px" src="../assets/home/button_login.png" />
 
-                &nbsp;&nbsp;&nbsp;&nbsp;
 
 
-                <span v-if="!userInfo.userInfo?.userName">登录账号</span>
 
+            <div class="login_button_bg" v-show="!userInfo.userInfo.userName" @click="login">
 
 
+                <span v-if="!userInfo.userInfo?.userName">登录</span>
 
             </div>
 
-            <el-dialog v-model="visible" :show-close="true" width="500" style="border-radius: 20px;" class="dig_kg">
 
+            <el-dialog v-model="visible" :show-close="true" width="500" style="border-radius: 5px;" class="dig_kg">
 
                 <template #header="{ close, titleId, titleClass }">
 
                     <div class="my-header" style="text-align: center;">
 
                         <div class="exit_login_title">退出登录</div>
 
@@ -168,6 +177,34 @@ const leaveFun = () => {
 
     <CpdmLeave ref="leave" />
 
 </template>
 
 <style scoped>
 
+.home_line_1 {
 
+    display: flex;
 
+    width: 2px;
 
+    height: 36px;
 
+    background-color: #ffffff;
 
+}
 
+
 
+.home_line {
 
+    width: 1px;
 
+    height: 50%;
 
+    background-color: #ffffff;
 
+}
 
+
 
+.underlined-text {
 
+    position: relative;
 
+    display: inline-block;
 
+}
 
+
 
+.underlined-text::after {
 
+    content: "";
 
+    position: absolute;
 
+    left: 0;
 
+    right: 0;
 
+    bottom: 10px;
 
+    border-bottom: 1px solid;
 
+}
 
+
 
+
 
 :deep(.dig_kg> .el-dialog__header) {
 
     padding-right: 0px !important;
 
 }
 
@@ -202,10 +239,10 @@ const leaveFun = () => {
 
     .start_button_self {
 
         cursor: pointer;
 
         // width: 100px;
 
-        border-radius: 12px;
 
-        border: 3px solid #48D68E;
 
+        border-radius: 5px;
 
+        border: 1px solid #48D68E;
 
         color: #ffffff;
 
-        background-color: #000000;
 
+        background-color: #3B3B3B;
 
         // margin-right: 20px;
 
         padding: 5px 50px;
 
         cursor: pointer;
 
@@ -245,7 +282,9 @@ const leaveFun = () => {
 
     height: 40px;
 
     align-items: center;
 
     border-bottom: 0px solid transparent;
 
-    color: var(--el-menu-text-color);
 
+    // color: var(--el-menu-text-color);
 
+
 
+    color: #ffffff;
 
     display: inline-flex;
 
     // height: 100%;
 
     justify-content: center;
 
@@ -256,8 +295,8 @@ const leaveFun = () => {
 
 
 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
 
 .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
 
-    background-color: #48D68E;
 
-    color: #000000 !important;
 
+    background-color: transparent;
 
+    color: #ffffff !important;
 
     border-radius: 12px;
 
 }
 
 
@@ -265,8 +304,8 @@ const leaveFun = () => {
 
 .el-menu--horizontal>.el-menu-item.is-active {
 
     border-bottom: 0px solid var(--el-menu-active-color);
 
     // color: var(--el-menu-active-color) !important;
 
-    color: #000000 !important;
 
-    background: #48D68E;
 
+    color: #ffffff !important;
 
+    background: transparent;
 
     border-radius: 12px;
 
     height: 40px;
 
     font-weight: 700;
 
@@ -281,7 +320,8 @@ const leaveFun = () => {
 
 
     .header_p {
 
         // background-color: #ffffff;
 
-        padding-top: 20px;
 
+        padding-top: 10px;
 
+        padding-bottom: 10px;
 
         display: flex;
 
         flex-direction: row;
 
         align-items: center;
 
@@ -296,24 +336,24 @@ const leaveFun = () => {
 
             div {
 
                 color: #48D68E;
 
                 font-weight: 700;
 
-                font-size: 26px;
 
-                -webkit-transform: skew(-10deg);
 
-                letter-spacing: 2px;
 
-                /* for Chrome||Safari */
 
-                -ms-transform: skew(-10deg);
 
-                /* for IE */
 
-                -moz-transform: skew(-10deg);
 
-                /* for Firefox */
 
-                -o-transform: skew(-10deg);
 
-                /* for Opera */
 
+                // font-size: 26px;
 
+                // -webkit-transform: skew(-10deg);
 
+                // letter-spacing: 2px;
 
+                // /* for Chrome||Safari */
 
+                // -ms-transform: skew(-10deg);
 
+                // /* for IE */
 
+                // -moz-transform: skew(-10deg);
 
+                // /* for Firefox */
 
+                // -o-transform: skew(-10deg);
 
+                // /* for Opera */
 
             }
 
         }
 
 
         .login_button_bg {
 
             position: relative;
 
-            background-color: #000000;
 
-            border-radius: 12px;
 
-            border: 3px solid #48D68E;
 
+
 
+            border-radius: 4px;
 
+            border: 1px solid #ffffff;
 
             color: #ffffff;
 
             padding: 8px 20px;
 
             cursor: pointer;

+ 1 - 1
src/main.ts
View File 

@@ -20,5 +20,5 @@ app.use(router)
 
 app.use(ElementPlus, {
 
     locale: zhCn
 
 })
 
-
 
+app.config.globalProperties.$globalMsg = '2'
 
 app.mount('#app')

+ 1 - 1
src/router/index.ts
View File 

@@ -53,7 +53,7 @@ const routes = [
 
       component: () => import('@/views/TestRecord.vue')
 
 
     }, {
 
-      path: 'report/:planId/:flag',
 
+      path: 'report/:planId/:flag/:name',
 
       name: 'report',
 
       component: () => import('@/views/Report.vue')

+ 28 - 22
src/views/Community.vue
View File 

@@ -384,8 +384,9 @@ onUnmounted(() => {
 
                         <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>
 
@@ -407,11 +408,13 @@ onUnmounted(() => {
 
                             </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>
 
                             </div>
 
-                            <div class="com_yan">
 
-                                <img height="20px" src="../assets/kepu/yan.png" @click="subFun(item)" />
 
-                                <span>{{ item.count }}</span>
 
-                            </div>
 
+
 
                             <el-divider content-position="right"></el-divider>
 
                         </div>
 
                         <div style="text-align: center" v-if="isLoading">努力加载中...</div>
 
@@ -449,7 +452,7 @@ onUnmounted(() => {
 
             </div>
 
         </template>
 
     </el-dialog>
 
-    <el-dialog v-model="sub_visible" :show-close="true" width="60%" top="5vh" style="border-radius: 40px;">
 
+    <el-dialog v-model="sub_visible" :show-close="true" width="60%" top="5vh" style="border-radius: 5px;">
 
         <template #header="{ close, titleId, titleClass }">
 
             <div class="my-header">
 
                 <div class="msg_dig">
 
@@ -520,7 +523,7 @@ onUnmounted(() => {
 
 :deep(.el-input__wrapper) {
 
     align-items: center;
 
     background-color: #F7F7F7 !important;
 
-    border-radius: 40px !important;
 
+    border-radius: 5px !important;
 
 
     // border: none;
 
     // outline: none !important;
 
@@ -588,7 +591,7 @@ label {
 
         background-color: #F7F7F7;
 
         padding: 20px 40px;
 
         margin-top: 40px;
 
-        border-radius: 40px;
 
+        border-radius: 5px;
 
     }
 
 
     .com_des1 {
 
@@ -609,10 +612,10 @@ label {
 
         .pub_button {
 
             cursor: pointer;
 
             // width: 100px;
 
-            border-radius: 12px;
 
-            border: 3px solid #48D68E;
 
+            border-radius: 5px;
 
+            border: 1px solid #48D68E;
 
             color: #ffffff;
 
-            background-color: #000000;
 
+            background-color: #3B3B3B;
 
 
             padding: 8px 30px;
 
             cursor: pointer;
 
@@ -629,14 +632,16 @@ label {
 
 }
 
 
 .home_header_out {
 
+    /* 启用滚动捕捉对齐 */
 
+    scroll-snap-align: start;
 
     // position: relative;
 
     padding-bottom: 60px;
 
     width: 100%;
 
     min-width: 1200px;
 
-    background-image: url('../assets/home/bg_ty.png');
 
+    // background-image: url('../assets/home/bg_ty.png');
 
     background-repeat: no-repeat;
 
     background-size: contain;
 
-    background-color: #B3F1DA; //估计是需要动态
 
+    background-color: #ffffff; //估计是需要动态
 
     flex: 1;
 
 
     //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
 
@@ -646,7 +651,7 @@ label {
 
         right: 0;
 
         margin: auto;
 
         // height: 100px;
 
-        width: 1200px;
 
+        width: 100%;
 
 
         .xlts_img {
 
             height: 60px;
 
@@ -665,8 +670,9 @@ label {
 
             width: 1200px;
 
             // padding: 20px 20px;
 
             background-color: #ffffff;
 
-            border-radius: 40px;
 
+            border-radius: 5px;
 
             // height: 1000px;
 
+            box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
 
 
             // margin-bottom: 60px;
 
             .kepu_title {
 
@@ -693,12 +699,12 @@ label {
 
                     .pub_button {
 
                         cursor: pointer;
 
                         // width: 100px;
 
-                        border-radius: 12px;
 
-                        border: 3px solid #48D68E;
 
+                        border-radius: 5px;
 
+                        border: 1px solid #48D68E;
 
                         color: #ffffff;
 
-                        background-color: #000000;
 
+                        background-color: #3B3B3B;
 
 
-                        padding: 4px 20px;
 
+                        padding: 8px 30px;
 
                         cursor: pointer;
 
                         display: flex;
 
                         align-items: center;
 
@@ -752,9 +758,9 @@ label {
 
                 .com_content {
 
                     letter-spacing: 3px;
 
                     margin-top: 10px;
 
-                    background-color: #F7F7F7;
 
+                    background-color: #F6F6F6;
 
                     padding: 10px 20px;
 
-                    border-radius: 15px;
 
+                    border-radius: 5px;
 
                     line-height: 24px;
 
                     font-size: 14px;
 
                 }

+ 2 - 0
src/views/Home.vue
View File 

@@ -32,8 +32,10 @@ onUnmounted(() => {
 
 <template>
 
     <!-- 最外边宽度100% -->
 
     <div class="home_view">
 
+
 
         <RouterView />
 
         <!-- 此处是底部部分最长宽度是100% -->
 
+
 
         <div class="home_footer_out">
 
             <CpmdFooter />
 
         </div>

+ 123 - 339
src/views/HomeView.vue
View File 

@@ -150,186 +150,138 @@ const brightStatusLevel = () => {
 
 </script>
 
 
 <template>
 
+  <div class="home_header_out" ref="homeHeaderOut">
 
 
+    <video src="../assets/video/background.mp4" autoplay loop muted preload
 
+      style="width: 100%;height: 100vh;object-fit: fill;position: absolute;z-index: -1;"></video>
 
 
-  <!-- <div class="home_header_out" ref="homeHeaderOut" :style="{ height: height + 'px' }"> -->
 
-  <div class="home_header_out" ref="homeHeaderOut">
 
-    <CpmdHeader />
 
     <div class="home_header_inner">
 
+      <CpmdHeader />
 
+      <img src=" ../assets/home/grouo_yuan.png" alt="" style="width: 50%;margin-top: 20vh;">
 
+    </div>
 
+    <div class="home_mid">
 
+      <div style="text-align: center;"><img src="../assets/home/group_zc.png" style="width: 30vw;margin-bottom: 55px;"
 
+          alt=""></div>
 
 
+      <el-carousel :interval="114000" type="card" indicator-position="outside" style="flex: 1;">
 
+        <el-carousel-item v-for="item in 3" :key="item">
 
+          <!-- <div>
 
+            <img src="../assets/home/group_slide_1.png" v-if="item == 1" style="object-fit: contain;" />
 
+            <img src="../assets/home/group_slide_2.png" v-if="item == 2" style="object-fit: contain;" />
 
+            <img src="../assets/home/group_slide_3.png" v-if="item == 3" style="object-fit: contain;" />
 
+          </div> -->
 
+          <div v-if="item == 1" class="home_mid_img_one">
 
+            <!-- <img src="../assets/home/group_slide_1.png" v-if="item == 1" style="object-fit: contain;" /> -->
 
+          </div>
 
+          <div v-if="item == 2" class="home_mid_img_two">
 
+
 
+            <!-- <img src="../assets/home/group_slide_2.png" v-if="item == 2" style="object-fit: contain;" /> -->
 
 
-      <!-- <div :style="{ height: xlts + 'px' }"> -->
 
-      <!-- <div :style="{ height: xlts + 'px' }"> -->
 
-      <div style="height:calc(100vh - 80px)">
 
-        <!-- <img class="xlts_img" style="margin-top:40px" src="../assets/home/home_text.png" /> -->
 
-        <img class="xlts_img" style="margin-top:40px;visibility:hidden;" src="../assets/home/home_text.png" />
 
-        <div class="chart_student">
 
-          <div class="student1_group">
 
-            <img class="student1_text" v-show="flag_text == 1" src="../assets/home/student1_text.png" />
 
-            <img class="student1" v-on:mouseenter="brightStatus(1)" v-on:mouseleave="brightStatusLevel"
 
-              v-show="flag_text !== 1" src="../assets/home/student1_default.png" />
 
-            <img class="student1" v-on:mouseenter="brightStatus(1)" v-on:mouseleave="brightStatusLevel"
 
-              v-show="flag_text == 1" src="../assets/home/student1_active.png" />
 
           </div>
 
-          <div class="student2_group">
 
-            <img class="student2_text" v-show="flag_text == 2" src="../assets/home/student2_text.png" />
 
-            <img class="student2" v-on:mouseenter="brightStatus(2)" v-on:mouseleave="brightStatusLevel"
 
-              v-show="flag_text !== 2" src="../assets/home/student2_default.png" />
 
-            <img class="student2" v-on:mouseenter="brightStatus(2)" v-on:mouseleave="brightStatusLevel"
 
-              v-show="flag_text == 2" src="../assets/home/student2_active.png" />
 
+          <div v-if="item == 3" class="home_mid_img_three">
 
+
 
+            <!-- <img src="../assets/home/group_slide_3.png" v-if="item == 3" style="object-fit: contain;" /> -->
 
           </div>
 
+        </el-carousel-item>
 
+      </el-carousel>
 
 
-          <img class="student3_text" v-show="flag_text == 3" src="../assets/home/student3_text.png" />
 
-          <img class="student3" v-on:mouseenter="brightStatus(3)" v-on:mouseleave="brightStatusLevel"
 
-            v-show="flag_text !== 3" src="../assets/home/student3_default.png" />
 
-          <img class="student3" v-on:mouseenter="brightStatus(3)" v-on:mouseleave="brightStatusLevel"
 
-            v-show="flag_text == 3" src="../assets/home/student3_active.png" />
 
-
 
-          <img class="student4_text" v-show="flag_text == 4" src="../assets/home/student4_text.png" />
 
-          <img class="student4" v-on:mouseenter="brightStatus(4)" v-on:mouseleave="brightStatusLevel"
 
-            v-show="flag_text !== 4" src="../assets/home/student4_default.png" />
 
-          <img class="student4" v-on:mouseenter="brightStatus(4)" v-on:mouseleave="brightStatusLevel"
 
-            v-show="flag_text == 4" src="../assets/home/student4_active.png" />
 
-        </div>
 
-      </div>
 
     </div>
 
-    <!-- <div class="home_mid_plan_des" v-show="taskSequareFlag">
 
-      <div class="home_mid_plan_close">
 
-        <img style="right:0" width="20px" src="../assets/home/close.png" @click="closeSquare" />
 
+    <div class="home_two">
 
+      <div style="text-align: center;"><img src="../assets/home/group_two.png" style="width: 30vw;margin-bottom: 55px;"
 
+          alt=""></div>
 
+      <div style="display: flex; justify-content: space-around;">
 
+        <img src="../assets/home/group_six.png" style="width: 500px;" alt="">
 
+        <img src="../assets/home/group_senven.png" alt="" style="width: 500px;">
 
       </div>
 
+    </div>
 
 
-      <div class="home_mid_plan_title">测试任务</div>
 
-      <div class="home_mid_plan_d">你的<span class="home_mid_plan_font">测试计划</span>中有新的<span
 
-          class="home_mid_plan_font">测试任务</span>，赶紧点击下方按钮去看看吧！
 
-      </div>
 
-      <div class="home_mid_plan_button">
 
-        <div class="see_button" @click="goView">去看看</div>
 
+    <div class="home_two">
 
+      <div style="text-align: center;"><img src="../assets/home/group_four.png" style="width: 30vw;margin-bottom: 55px;"
 
+          alt=""></div>
 
+      <div style="display: flex; justify-content: space-around;position: relative;">
 
+        <img src="../assets/home/group_three.png" style="width: 500px;" alt="">
 
+        <div style="height: 100px;background-color: #00CD74;position: absolute;width: 100%;z-index: -1;top:200px">
 
+        </div>
 
       </div>
 
-    </div> -->
 
-    <div class="home_mid">
 
-      <div class="kepu_title">政策解读</div>
 
-      <div class="book_self">
 
-
 
 
+    </div>
 
+    <CpmdQuestionnaire ref="question" @fatherFun=father />
 
+  </div>
 
 
-        <img
 
-          style="width: 550px;box-sizing:border-box;margin-right:10px;border-radius: 20px;box-shadow: 1px 1px 10px #DDDDDD;"
 
-          src="../assets/zs/1.png" alt="">
 
+</template>
 
+<style lang="scss" scoped>
 
+html,
 
+body {
 
+  margin: 0;
 
+  padding: 0;
 
+  height: 100%;
 
+  overflow-x: hidden;
 
+  /* 防止水平滚动 */
 
+}
 
 
-        <img
 
-          style="width: 550px;box-sizing:border-box;margin-left:10px;border-radius: 20px;box-shadow: 1px 1px 10px #DDDDDD;"
 
-          src="../assets/zs/2.png" alt="">
 
+.home_mid_img_one {
 
+  width: auto;
 
+  height: 100%;
 
+  background: url(../assets/home/group_slide_1.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
 
-      </div>
 
+.home_mid_img_two {
 
+  width: auto;
 
+  height: 100%;
 
+  background: url(../assets/home/group_slide_2.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
 
-      <div class="kepu_title">科普小课堂</div>
 
-      <div class="kepu_title_sub">心灵成长不迷茫，科普小课堂为你点亮前行的方向</div>
 
-      <div class="man1_group">
 
-        <div class="man1">
 
-          <img class="man1_img" src="../assets/home/people1.png" />
 
-        </div>
 
-        <div class="des">
 
-          <div class="des_inner">
 
-            <span style="visibility: hidden;">大写</span>大学生的焦虑情绪往往源自多重压力的叠加效应，其中学业负担与未来职业的不确定性占据主导地位。
 
-            一方面，大学教育的高标准与快节奏，如繁重的课程任务、竞争激烈的考试、科研项目的压力，以及对学术成就的追求,
 
-            都无形中增加了学生的心理负担，让他们时常处于紧张与不安之中。另一方面，步入社会的临近，使得就业市场的严酷现实成为心头大石，
 
-            学生们担忧自己的能力是否足够，能否在毕业后顺利找到理想工作，这种对未来的不确定感进一步加剧了焦虑情绪。
 
-          </div>
 
+.home_mid_img_three {
 
+  width: auto;
 
+  height: 100%;
 
+  background: url(../assets/home/group_slide_3.png) no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
 
-        </div>
 
-      </div>
 
-      <div class="man2_group">
 
-
 
-        <div class="des2">
 
-          <div class="des2_inner">
 
-            <span style="visibility: hidden;">大写</span>失眠，对于许多大学生而言，已成为一种常见的困扰，它不仅影响睡眠质量，还可能波及到日常的学习效率与生活质量。
 
-            究其原因，多重因素交织其中。首先，学业压力无疑是首当其冲的罪魁祸首。
 
-            大学生活充满了挑战，无论是课程作业的紧迫、考试复习的重负，还是科研项目的压力，都可能让学生陷入焦虑与紧张之中，这种心理状态直接转化为夜晚辗转反侧的失眠。
 
-            其次，快节奏的生活方式与不规律的作息习惯也难辞其咎。深夜赶工、晨早赶课，加上社交媒体与电子产品的诱惑，打乱了生物钟的正常节律，使身体难以在需要的时候自然进入睡眠状态。
 
-            再者，生活环境的噪音与光线污染，或是室友的作息差异，也可能成为影响睡眠质量的外部因素。
 
-          </div>
 
+.home_mid {
 
 
-        </div>
 
-        <div class="man2">
 
-          <img class="man2_img" src="../assets/home/people2.png" />
 
-        </div>
 
-      </div>
 
-      <div class="man1_group">
 
-        <div class="man1">
 
-          <img class="man1_img" src="../assets/home/people3.png" />
 
-        </div>
 
-        <div class="des">
 
-          <div class="des_inner">
 
-            <span style="visibility: hidden;">大写</span>刚刚步入大学校园的萌新们，是不是感觉到有些迷茫？
 
-            刚刚步入大学，周围的一切都充满了未知与惊喜，你可能会觉得有点晕头转向，就像是第一次迷路在了巨大的游乐场里。面对全新的环境、自由的时间管理以及未来的不确定性，感到迷茫是非常正常的情绪反应。
 
-            这是人生旅程中的一个重要转折点，意味着你需要从高中时期的被指导模式过渡到自主学习和自我管理的新阶段。
 
-          </div>
 
+  :deep(.el-carousel__container) {
 
+    height: calc(100vh - 300px) !important;
 
+    text-align: center;
 
+  }
 
 
-        </div>
 
-      </div>
 
-      <div v-show="!moreFlag" class="get_more">
 
-        <img src="../assets/home/get_more.png" @click="goMore" />
 
-      </div>
 
-      <div v-show="moreFlag">
 
-        <div class="kepu_title_more" style="text-align: left;">
 
-          <div class="kepu_title_des">
 
-            失眠抑郁问题科普
 
-          </div>
 
-          <!-- <div>
 
-            <img src="../assets/kepu/title_right.png" />
 
-          </div> -->
 
-        </div>
 
-        <div class="kply_inner_duan1">
 
-          <span
 
-            style="visibility: hidden;">大写</span>睡眠质量是衡量生活质量和身心健康的关键指标，对大学生尤为重要。良好的睡眠能增强免疫力、保持精力，促进新陈代谢，保持思路清晰，减少不良情绪。然而，大学生失眠问题普遍，约40%至60%的大学生曾经历失眠，其中10%至20%患严重失眠，且近年来呈增加趋势。常见原因包括思绪过多、电子产品使用过度、学习任务未完成等，导致入睡晚、多梦易醒等问题。失眠会影响注意力、记忆力、思维等认知功能，进而影响学业表现，引起社会关注。
 
-        </div>
 
-        <div class="kply_inner_duan1">
 
-          <span
 
-            style="visibility: hidden;">大写</span>压力是导致大学生失眠的重要因素，减轻压力成为应对失眠的关键策略。大学生需探索适合的学习方法，积极参与集体活动，保持乐观心态，明确自我定位和发展方向。同时，放松训练、冥想和运动等情绪调节方法也有助于应对压力。此外，舒适的睡眠环境和良好的睡眠习惯对预防和应对失眠至关重要。应创建安静、黑暗、凉爽的睡眠环境，适当锻炼以促进睡眠，但避免晚上高强度运动。保持规律的睡眠时间，减少睡前电子产品使用，避免蓝光影响。规律饮食，减少酒精、咖啡因摄入。建立睡前放松程序，如听音乐、阅读或伸展运动，有助于入睡。
 
-        </div>
 
-        <div class="kply_inner_duan1">
 
-          <span style="visibility: hidden;">大写</span>大学生失眠问题不容忽视，需要综合施策，从减轻压力、改善睡眠环境和习惯等多方面入手，以提升大学生的睡眠质量，保障其身心健康和学业表现。
 
-        </div>
 
+}
 
 
-        <img width="100%" style="margin-top:4px;margin-bottom: 20px;" src="../assets/kepu/bg1.png" />
 
 
-        <div class="kply_inner_duan1">
 
-          <span
 
-            style="visibility: hidden;">大写</span>大学生的抑郁情绪在近10年呈现出普遍和严重化、日益年轻化的趋势。学业压力、等级考试、资格考试、升学压力、择业就业等均可能会给大学生造成焦虑、抑郁等负面情绪。同时，适应问题、人际关系问题、恋爱问题等，也让大学生群体成为抑郁症的高发人群。然而，社会公众对于抑郁症以及精神疾病的轻视与污名化，造成了许多抑郁症患者的病耻感，使得他们抗拒寻求专业帮助。数据显示，约有超过60%的抑郁症患者存在自杀想法，对于大学生抑郁症患者而言，抑郁症强烈地引发患者的主观痛苦，导致其学业、社交等社会功能受损害，并可能引发心理危机事件。
 
-        </div>
 
-        <div class="kply_inner_duan1">
 
-          <span
 
-            style="visibility: hidden;">大写</span>解决大学生抑郁问题，首先需要建立有效的支持系统。学校应提供心理咨询服务，定期开展心理健康教育，鼓励学生主动寻求帮助。同时，家长、朋友和同学之间也应增进沟通，提供情感支持，共同营造积极向上的生活环境。此外，大学生自身也应学会自我调整和压力管理。通过培养兴趣爱好、进行体育锻炼、参与社交活动等方式，转移注意力，释放压力。同时，保持积极乐观的心态，合理规划时间和任务，避免过度追求完美和给自己过大的压力。必要时，应及时就医，接受专业的心理治疗和药物治疗。
 
-        </div>
 
-        <div class="kply_inner_duan1">
 
-          <span
 
-            style="visibility: hidden;">大写</span>大学生抑郁情绪的普遍化与严重化已成为不容忽视的社会现象，它不仅侵蚀着年轻人的心理健康，更威胁着他们的学业成就与未来发展。面对这一挑战，社会各界需携手合作，打破对抑郁症的偏见与误解，构建一个包容、理解且支持的心理健康环境。通过加强心理健康教育、完善心理咨询服务体系、鼓励积极的社会互动与自我调适策略，以及倡导及时、专业的医疗干预，我们可以共同为大学生撑起一片心灵的晴空，让青春的花朵在阳光下自由绽放，远离抑郁的阴霾，拥抱健康、充实的大学生活。
 
-        </div>
 
 
-        <img width="100%" style="margin-top:4px;margin-bottom: 20px;" src="../assets/kepu/bg2.png" />
 
+.home_two {
 
+  min-height: 1;
 
+  left: 0;
 
+  right: 0;
 
+  margin: auto;
 
+  // height: 100px;
 
+  width: 1200px;
 
+  height: 100vh;
 
+  position: relative;
 
+  height: 100vh;
 
+  scroll-snap-align: center;
 
+}
 
 
-      </div>
 
-      <!-- <div class="home_mid_plan" v-show="taskCircleFlag && userInfo.planCurrentNum != 0" @click="openSquare"
 
-        ref="plan_jihua">
 
-        <div class=" badge_custom">
 
-          {{ userInfo.planCurrentNum }}
 
 
-        </div>
 
-        <img src="../assets/home/jihua_img.png" />
 
-      </div> -->
 
-      <div class="home_mid_plan" v-show="isNeed" @click="openSquare" ref="plan_jihua">
 
-        <div class=" badge_custom">
 
-          问卷
 
-        </div>
 
-        <img src="../assets/home/jihua_img.png" />
 
-      </div>
 
+.box {
 
+  width: 100%;
 
+  height: calc(100vh - 40px);
 
+  background-color: rgb(141, 130, 130);
 
+  position: relative;
 
+}
 
 
-    </div>
 
-    <CpmdQuestionnaire ref="question" @fatherFun=father />
 
-  </div>
 
+video {
 
+  height: calc(100vh);
 
+  background-size: 100% 100%;
 
+  width: 100%;
 
+  position: absolute;
 
+  // filter: blur(3px);
 
+  top: 0;
 
+  left: 0;
 
+}
 
 
-</template>
 
-<style lang="scss" scoped>
 
 .badge_custom {
 
   position: absolute;
 
   background-color: #ED2626;
 
@@ -349,8 +301,6 @@ const brightStatusLevel = () => {
 
   border-radius: 30px;
 
 }
 
 
-
 
-
 
 .home_header_out {
 
   flex: 1;
 
   position: relative;
 
@@ -358,7 +308,7 @@ const brightStatusLevel = () => {
 
   min-width: 1200px;
 
   // background-color: rgb(151, 163, 202);
 
   // height: 600px;
 
-  background-image: url('../assets/home/header_bg.png');
 
+
 
   background-repeat: no-repeat;
 
   background-size: 100% 100vh;
 
 
@@ -368,70 +318,8 @@ const brightStatusLevel = () => {
 
   // height: calc(100vmax * 1000px / 1920px);
 
   //估计是需要动态
 
   //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
 
-  .home_mid_plan_des {
 
-    border-top-left-radius: 30px;
 
-    padding: 10px 5px 20px 10px;
 
-    position: absolute;
 
-    right: 0;
 
-    // bottom: 26px;
 
-    bottom: 0;
 
-    width: 600px;
 
-    background-color: #ffffff;
 
-
 
-    .home_mid_plan_close {
 
-      cursor: pointer;
 
-      text-align: right;
 
-    }
 
-
 
-    .home_mid_plan_title {
 
-      height: 38px;
 
-      font-weight: normal;
 
-      font-size: 20px;
 
-      font-weight: 700;
 
-      color: #000000;
 
-      // line-height: 95px;
 
-    }
 
-
 
-    .home_mid_plan_d {
 
-      height: 38px;
 
-      font-weight: normal;
 
-      font-size: 16px;
 
-      font-weight: 500;
 
-      color: #000000;
 
-
 
-      // line-height: 95px;
 
-      .home_mid_plan_font {
 
-        color: #48D68E
 
-      }
 
-    }
 
-
 
-    .home_mid_plan_button {
 
-      width: 100%;
 
-      display: flex;
 
-      flex-direction: row;
 
-      justify-content: end;
 
-      // text-align: right;
 
-
 
-      .see_button {
 
-        cursor: pointer;
 
-        // width: 100px;
 
-        border-radius: 12px;
 
-        border: 3px solid #48D68E;
 
-        color: #ffffff;
 
-        background-color: #000000;
 
-        margin-right: 20px;
 
-        padding: 8px 30px;
 
-        cursor: pointer;
 
-        display: flex;
 
-        align-items: center;
 
-      }
 
-    }
 
-
 
-  }
 
-
 
-
 
-
 
   .home_header_inner {
 
+
 
     // position: absolute;
 
     //需要水平居中
 
     // top: 0;
 
@@ -443,137 +331,27 @@ const brightStatusLevel = () => {
 
     // height: 100px;
 
     width: 1200px;
 
     height: 100vh;
 
-
 
-    .xlts_img {
 
-      height: calc(36% - 40px);
 
-      // height: 80px;
 
-      //还剩百分之64%
 
-      // width: 100%;
 
-    }
 
-
 
-    .chart_student {
 
-      height: 64%;
 
-      position: relative;
 
-
 
-      .student1_group {
 
-        position: absolute;
 
-        bottom: 50%;
 
-        left: 22%;
 
-        height: 200px;
 
-        width: 200px;
 
-
 
-        .student1 {
 
-          cursor: pointer;
 
-          position: absolute;
 
-          bottom: -84%;
 
-          left: 11%;
 
-          height: 44%;
 
-        }
 
-
 
-        .student1_text {
 
-          cursor: pointer;
 
-          position: absolute;
 
-          bottom: -64%;
 
-          left: -60%;
 
-          height: 80%;
 
-        }
 
-      }
 
-
 
-
 
-      .student2_group {
 
-        position: absolute;
 
-        bottom: 27%;
 
-        left: 34%;
 
-        height: 200px;
 
-        width: 200px;
 
-
 
-        .student2 {
 
-          cursor: pointer;
 
-          position: absolute;
 
-
 
-          bottom: 17%;
 
-          left: 72%;
 
-          height: 76%;
 
-        }
 
-
 
-        .student2_text {
 
-          cursor: pointer;
 
-          position: absolute;
 
-          bottom: 85%;
 
-
 
-          left: -8%;
 
-          height: 77%;
 
-        }
 
-      }
 
-
 
-
 
-      .student3 {
 
-        cursor: pointer;
 
-        position: absolute;
 
-        bottom: 11%;
 
-        left: 62%; // w
 
-        height: 32%;
 
-      }
 
-
 
-      .student3_text {
 
-        cursor: pointer;
 
-        position: absolute;
 
-        bottom: 45%;
 
-        left: 59%;
 
-        height: 40%;
 
-      }
 
-
 
-      .student4 {
 
-        cursor: pointer;
 
-        position: absolute;
 
-        bottom: 30%;
 
-        left: 89%; // w
 
-        height: 32%;
 
-      }
 
-
 
-      .student4_text {
 
-        cursor: pointer;
 
-        position: absolute;
 
-        bottom: 61%;
 
-        left: 89%;
 
-        height: 40%;
 
-      }
 
-    }
 
-
 
-
 
+    position: relative;
 
+    scroll-snap-align: start;
 
+    /* 启用滚动捕捉对齐 */
 
   }
 
 }
 
 
 .home_mid {
 
   // background-color: blanchedalmond;
 
+
 
   width: 1200px;
 
   left: 0;
 
   right: 0;
 
   margin: auto;
 
-  margin-top: 20px;
 
+  // margin-top: 20px;
 
+  height: 100vh;
 
+  display: flex;
 
+  flex-direction: column;
 
+  /* 启用滚动捕捉对齐 */
 
+  scroll-snap-align: start;
 
   // position: relative;
 
 
-  // .home_mid_plan {
 
-  //   z-index: 111;
 
-  //   cursor: pointer;
 
-  //   // top: 1000px;
 
-  //   position: fixed;
 
-  //   width: 100%;
 
-  //   height: 200px;
 
-  //   top: 10px;
 
-
 
-  //   bottom: 0px;
 
-
 
-  //   left: 0px;
 
-
 
-  //   right: 0px;
 
-  //   // right: 200px;
 
-
 
-  //   // top: -30px;
 
-  //   img {
 
-  //     width: 100px;
 
-  //   }
 
-  // }
 
   .book_self {
 
     margin-top: 20px;
 
     width: 100%;
 
@@ -779,4 +557,10 @@ const brightStatusLevel = () => {
 
   letter-spacing: 6px;
 
 
 }
 
+
 
+body {
 
+  scroll-snap-type: y mandatory;
 
+  /* 垂直方向上的强制滚动捕捉 */
 
+  scroll-behavior: smooth;
 
+}
 
 </style>

+ 10 - 9
src/views/Login.vue
View File 

@@ -162,16 +162,17 @@ const loginFun = async () => {
 
 
 
 .home_header_out {
 
+    scroll-snap-align: start;
 
     // position: relative;
 
     padding-bottom: 60px;
 
     width: 100%;
 
     min-width: 1200px;
 
-    background-image: url('../assets/home/bg_ty.png');
 
+    // background-image: url('../assets/home/bg_ty.png');
 
     background-repeat: no-repeat;
 
     background-size: 100% auto;
 
 
     // background-size: auto 100%;
 
-    background-color: #B3F1DA; //估计是需要动态
 
+    // background-color: #B3F1DA; //估计是需要动态
 
     flex: 1;
 
 
     //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
 
@@ -181,7 +182,7 @@ const loginFun = async () => {
 
         right: 0;
 
         margin: auto;
 
         // height: 100px;
 
-        width: 1200px;
 
+        width: 100%;
 
 
 
         .report_top {
 
@@ -204,6 +205,7 @@ const loginFun = async () => {
 
                 font-size: 20px;
 
                 font-weight: 700;
 
                 letter-spacing: 3px;
 
+                margin: auto;
 
             }
 
         }
 
     }
 
@@ -215,8 +217,6 @@ const loginFun = async () => {
 
         // margin-bottom: 112px;
 
 
         .kply_inner {
 
-
 
-            // padding: 20px 20px;
 
             left: 0;
 
             right: 0;
 
             margin: auto;
 
@@ -224,7 +224,8 @@ const loginFun = async () => {
 
             min-height: 360px;
 
 
             background-color: #ffffff;
 
-            border-radius: 40px;
 
+            border-radius: 5px;
 
+            box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
 
 
             .user_account {
 
                 font-size: 18px;
 
@@ -244,10 +245,10 @@ const loginFun = async () => {
 
                 .start_button_self {
 
                     cursor: pointer;
 
                     // width: 100px;
 
-                    border-radius: 12px;
 
-                    border: 3px solid #48D68E;
 
+                    border-radius: 5px;
 
+                    border: 1px solid #48D68E;
 
                     color: #ffffff;
 
-                    background-color: #000000;
 
+                    background-color: #3B3B3B;
 
                     margin-right: 20px;
 
                     padding: 5px 50px;
 
                     cursor: pointer;

+ 33 - 24
src/views/Plan.vue
View File 

@@ -261,11 +261,12 @@ onUnmounted(() => {
 
         <div class="kply">
 
 
             <div class="kply_inner">
 
-                <div>
 
-                    <div style="padding: 20px 40px;" v-show="planList.length == 0 && isFinshed">
 
+                <div style="padding: 20px 40px;">
 
+                    <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% ;" v-show="planList.length == 0 && isFinshed">
 
                             <!-- <img width="100%" src="../assets/planNo.png"> -->
 
-                            <img width="60%" style="margin-left: 20%;" src="../assets/planNo.png">
 
+                            <img width="60%" style="margin-left: 20%; " src="../assets/planNo.png">
 
                         </div>
 
                     </div>
 
                     <div class="test_record_out" v-for="item in planList">
 
@@ -275,7 +276,7 @@ onUnmounted(() => {
 
                             <span><span class="record_tip_inner">结束时间：</span>{{ item.planEndTime }}</span>
 
                         </div>
 
                         <div class="test_record">
 
-                            <img src="../assets/kepu/task_1.png" />
 
+                            <!-- <img src="../assets/kepu/task_1.png" /> -->
 
                             <span>{{ item.planName }}</span>
 
                         </div>
 
                         <!-- <div class="test_time">
 
@@ -358,14 +359,16 @@ onUnmounted(() => {
 
 </template>
 
 <style lang="scss" scoped>
 
 .home_header_out {
 
+    /* 启用滚动捕捉对齐 */
 
+    scroll-snap-align: start;
 
     // position: relative;
 
     padding-bottom: 60px;
 
     width: 100%;
 
     min-width: 1200px;
 
-    background-image: url('../assets/home/bg_ty.png');
 
+    // background-image: url('../assets/home/bg_ty.png');
 
     background-repeat: no-repeat;
 
     background-size: contain;
 
-    background-color: #B3F1DA;
 
+    // background-color: #B3F1DA;
 
     flex: 1;
 
 
     //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
 
@@ -375,7 +378,7 @@ onUnmounted(() => {
 
         right: 0;
 
         margin: auto;
 
         // height: 100px;
 
-        width: 1200px;
 
+        width: 100%;
 
 
         .xlts_img {
 
             height: 60px;
 
@@ -394,7 +397,7 @@ onUnmounted(() => {
 
             margin: auto;
 
             width: 1200px;
 
             min-height: 600px;
 
-            background-color: #FAFAFA;
 
+            background-color: #ffffff;
 
             border-radius: 40px;
 
             // height: 1000px;
 
 
@@ -446,6 +449,7 @@ onUnmounted(() => {
 
                 margin-top: 20px;
 
                 display: flex;
 
                 align-items: center;
 
+                margin-bottom: 20px;
 
 
                 img {
 
                     width: 50px;
 
@@ -572,8 +576,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;
 
@@ -586,27 +590,31 @@ onUnmounted(() => {
 
             }
 
 
             .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);
 
                 margin-top: 40px;
 
-                padding: 20px 40px;
 
+                // padding: 20px 40px;
 
                 background-color: #ffffff;
 
-                border-radius: 40px;
 
+                border-radius: 5px;
 
                 position: relative;
 
 
+
 
                 .record_tip {
 
-                    background-color: #FFF6DF;
 
+                    // background-color: #FFF6DF;
 
+                    background: linear-gradient(to right, #C4FE99, #04DE7E);
 
                     position: absolute;
 
-                    right: 0;
 
+                    right: -10px;
 
                     display: flex;
 
                     flex-direction: column;
 
-                    top: 0;
 
+                    top: 20px;
 
 
-                    border-top-right-radius: 40px;
 
-                    border-bottom-left-radius: 40px;
 
+                    // border-top-right-radius: 40px;
 
+                    // border-bottom-left-radius: 40px;
 
                     padding: 10px 40px;
 
-                    color: #FFB700;
 
+                    color: #4D7D1D;
 
                     font-size: 14px;
 
                     font-weight: 700;
 
-                    letter-spacing: 2px;
 
+                    // letter-spacing: 2px;
 
 
                     .record_tip_inner {
 
                         font-size: 13px;
 
@@ -625,12 +633,13 @@ onUnmounted(() => {
 
                 }
 
 
                 .content_out {
 
+
 
                     display: flex;
 
                     flex-direction: column;
 
                     width: 100%;
 
                     // height: 200px;
 
                     background-color: #F7F7F7;
 
-                    border-radius: 40px;
 
+                    border-radius: 10px;
 
 
                     .content_inner {
 
                         padding: 20px 40px;
 
@@ -696,7 +705,7 @@ onUnmounted(() => {
 
                                 .task_inner_single {
 
                                     margin-top: 20px;
 
                                     height: 100px;
 
-                                    border-radius: 20px;
 
+                                    border-radius: 5px;
 
                                     width: 45%;
 
                                     display: flex;
 
                                     flex-direction: row;
 
@@ -743,14 +752,14 @@ onUnmounted(() => {
 
 
                                                 .noCompleted_status {
 
                                                     // font-weight: 600;
 
-                                                    color: #222222;
 
+                                                    color: #818996;
 
                                                     line-height: 24px;
 
                                                     font-size: 14px;
 
-                                                    border-radius: 20px;
 
+                                                    border-radius: 4px;
 
                                                     text-align: center;
 
                                                     right: 0px;
 
                                                     width: 70px;
 
-                                                    background-color: #EDEDED;
 
+                                                    background-color: #D9D9D9;
 
                                                 }
 
                                             }

+ 11 - 8
src/views/PopularizationScience.vue
View File 

@@ -205,7 +205,8 @@ onUnmounted(() => {
 
         </div>
 
         <div class="kply">
 
             <div class="kply_inner">
 
-                <div style="padding:10px 0px;width: 100%;display: flex;flex-wrap: wrap;padding-bottom:20px">
 
+                <div
 
+                    style="padding:10px 0px;width: 100%;display: flex;flex-wrap: wrap;padding-bottom:20px;    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);">
 
                     <div v-for="item in moreList" :key="item.id" class="out">
 
                         <img class="poster" :src="requireImg(item.poster)">
 
                         <div class="des">
 
@@ -259,24 +260,26 @@ onUnmounted(() => {
 
 </template>
 
 <style>
 
 .code_dig>>>.el-dialog {
 
-    border-radius: 20px !important;
 
+    border-radius: 5px !important;
 
 }
 
 </style>
 
 <style lang="scss" scoped>
 
 :deep(.el-dialog) {
 
-    border-radius: 20px !important;
 
+    border-radius: 5px !important;
 
 }
 
 
 .home_header_out {
 
+    scroll-snap-align: start;
 
     flex: 1;
 
     // position: relative;
 
     padding-bottom: 60px;
 
     width: 100%;
 
     min-width: 1200px;
 
-    background-image: url('../assets/home/bg_ty.png');
 
+
 
     background-repeat: no-repeat;
 
     background-size: contain;
 
-    background-color: #B3F1DA; //估计是需要动态
 
+
 
+    // background-color: #B3F1DA; //估计是需要动态
 
 
 
     .home_header_inner {
 
@@ -285,7 +288,7 @@ onUnmounted(() => {
 
         right: 0;
 
         margin: auto;
 
         // height: 100px;
 
-        width: 1200px;
 
+        width: 100%;
 
 
         .xlts_img {
 
             height: 60px;
 
@@ -341,8 +344,8 @@ onUnmounted(() => {
 
                             margin-right: 40px;
 
                             cursor: pointer;
 
                             // width: 100px;
 
-                            border-radius: 12px;
 
-                            border: 3px solid #48D68E;
 
+                            border-radius: 5px;
 
+                            border: 1px solid #48D68E;
 
                             color: #ffffff;
 
                             background-color: #000000;

+ 10 - 7
src/views/Register.vue
View File 

@@ -550,10 +550,11 @@ const roleTypeChange = (val: string) => {
 
     padding-bottom: 60px;
 
     width: 100%;
 
     min-width: 1200px;
 
-    background-image: url('../assets/home/bg_ty.png');
 
+    // background-image: url('../assets/home/bg_ty.png');
 
     background-repeat: no-repeat;
 
     background-size: contain;
 
-    background-color: #B3F1DA; //估计是需要动态
 
+    // background-color: #B3F1DA; //估计是需要动态
 
+    scroll-snap-align: start;
 
 
     //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
 
     .home_header_inner {
 
@@ -562,7 +563,7 @@ const roleTypeChange = (val: string) => {
 
         right: 0;
 
         margin: auto;
 
         // height: 100px;
 
-        width: 1200px;
 
+        width: 100%;
 
 
 
         .report_top {
 
@@ -574,6 +575,7 @@ const roleTypeChange = (val: string) => {
 
             flex-direction: row;
 
             justify-content: space-between;
 
             align-items: center;
 
+            margin: auto;
 
 
             .xlts_img {
 
                 width: 200px;
 
@@ -602,7 +604,8 @@ const roleTypeChange = (val: string) => {
 
             width: 650px;
 
             min-height: 500px;
 
             background-color: #ffffff;
 
-            border-radius: 40px;
 
+            border-radius: 5px;
 
+            box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
 
 
             .user_account {
 
                 font-size: 18px;
 
@@ -622,10 +625,10 @@ const roleTypeChange = (val: string) => {
 
                 .start_button_self {
 
                     cursor: pointer;
 
                     // width: 100px;
 
-                    border-radius: 12px;
 
-                    border: 3px solid #48D68E;
 
+                    border-radius: 5px;
 
+                    border: 1px solid #48D68E;
 
                     color: #ffffff;
 
-                    background-color: #000000;
 
+                    background-color: #3B3B3B;
 
                     margin-right: 20px;
 
                     padding: 10px 50px;
 
                     cursor: pointer;

+ 99 - 83
src/views/Report.vue
View File 

@@ -21,6 +21,8 @@ const route = useRoute()
 
 //此处应该是唯一的报告ID
 
 const planId = ref<string>('')
 
 
+const planName = ref<string>('')
 
+
 
 //定义一个参数判断测试报告需要跳转到哪
 
 const goFlag = ref('0')
 
 
@@ -117,9 +119,9 @@ const option = reactive({
 
                     value: echarts_data_list.value,
 
                     itemStyle: { //该数值区域样式设置
 
                         normal: {
 
-                            color: 'red', //背景颜色，还需设置areaStyle   //修改线条颜色
 
+                            color: 'RGBA(20, 203, 124, 1)', //背景颜色，还需设置areaStyle   //修改线条颜色
 
                             lineStyle: {
 
-                                color: '#FF1E00', //边框颜色
 
+                                color: 'RGBA(20, 203, 124, 1)', //边框颜色
 
                             },
 
                         },
 
                     },
 
@@ -127,7 +129,7 @@ const option = reactive({
 
                     areaStyle: {
 
                         //阴影区域背景
 
                         // color: 'rgba(255, 228, 52, 0.6)'
 
-                        color: 'rgba(255,30,0,0.6)'
 
+                        color: 'rgba(87, 231, 169, 1)'
 
                     }
 
                 }
 
             ]
 
@@ -146,7 +148,7 @@ onMounted(async () => {
 
     //获取用户编号
 
     planId.value = params.planId as string
 
     //获取用户编号
 
-
 
+    planName.value = params.name as string
 
     let pa = {
 
         planId: planId.value,
 
         flag: goFlag.value
 
@@ -239,57 +241,56 @@ 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>你真棒！测评已完成</span>
 
                     <span>下面是结果解析：</span>
 
                 </div>
 
                 <img class="xlts_img" src="../assets/report/report_top.png" />
 
-            </div>
 
+            </div> -->
 
         </div>
 
         <div class="kply">
 
             <div class="kply_inner">
 
                 <div style="padding: 20px 40px;">
 
                     <div>
 
-                        <div class="report_totol_score">
 
-                            <div class="report_bei">
 
-                                <img height="120xp" src="../assets/report/bei.png" />
 
-                                <div class="score" v-if="reportData.length > 0">{{ reportData[0].dimensionScore }}</div>
 
-                            </div>
 
-                            <div class="totol_result_des" v-if="reportData.length > 0">
 
-                                结论：{{ reportData[0].dimensionAnalysis }}
 
-                            </div>
 
-                        </div>
 
-                        <div class="report_echarts_out">
 
-                            <div ref="echarts_ld" style="width:400px;height:300px"
 
-                                v-show="!(goFlag == 'SHAPE_RANDOM' || goFlag == 'ETB01' || goFlag == 'FDOT' || goFlag == 'EMOTION_STROOP')">
 
+                        <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>
 
-                            <div
 
-                                style="display: flex;flex-direction: column;align-items: center;width: 50%; justify-content: space-around;padding-top: 40px;padding-bottom: 20px;">
 
-                                <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,#FF4E00 ,#ffffff)" />
 
-                                    <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:#F6F6F6;margin-right: 10px;"
 
+                                    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:#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>
 
                                 </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="des_zhishu">{{ item.name }}</div>
 
                             <div class="report_des_out">
 
-                                <div class="score" style="display: flex;align-items: center;margin-bottom: 20px;">
 
-                                    <img style="width: 20px;margin-right:20px" src="../assets/report/score.png" />
 
+                                <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;">分数：</span>
 
+                                    <span style="font-weight: 700;color: #222222;margin-left: 10px;">分数：</span>
 
                                     <span style="color: #222222;"> {{ echarts_data_list[index] }}</span>
 
 
 
@@ -299,15 +300,17 @@ onUnmounted(() => {
 
                                 </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 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" />
 
-
 
-                                    <span>分析报告：</span>
 
+                                        <div style="color: #818996;font-weight: 400;text-align: left;">分析报告</div>
 
 
+                                    </div>
 
+                                    <div class="des">{{ echarts_des_list[index] }}</div>
 
                                 </div>
 
-                                <div class="des" style="margin-left:40px">{{ echarts_des_list[index] }}</div>
 
                             </div>
 
                         </div>
 
 
@@ -329,13 +332,14 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 
 .home_header_out {
 
     // position: relative;
 
+    scroll-snap-align: center;
 
     padding-bottom: 60px;
 
     width: 100%;
 
     min-width: 1200px;
 
-    background-image: url('../assets/home/bg_ty.png');
 
+    // background-image: url('../assets/home/bg_ty.png');
 
     background-repeat: no-repeat;
 
     background-size: contain;
 
-    background-color: #B3F1DA; //估计是需要动态
 
+    // background-color: #B3F1DA; //估计是需要动态
 
     display: flex;
 
     flex-direction: column;
 
     flex: 1;
 
@@ -348,7 +352,7 @@ onUnmounted(() => {
 
         right: 0;
 
         margin: auto;
 
         // height: 100px;
 
-        width: 1200px;
 
+        width: 100%;
 
 
 
         .report_top {
 
@@ -391,46 +395,54 @@ onUnmounted(() => {
 
             background-color: #ffffff;
 
             border-radius: 40px;
 
 
-            .report_totol_score {
 
-                margin-top: 20px;
 
-                display: flex;
 
-                flex-direction: row;
 
-                justify-content: space-between;
 
-                align-items: center;
 
+            .report_result_top {
 
+                box-sizing: border-box;
 
+                padding: 36px 30px;
 
+                box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
 
+
 
+                .report_totol_score {
 
+                    // margin-top: 20px;
 
+                    display: flex;
 
+                    flex-direction: row;
 
+                    justify-content: space-between;
 
+                    align-items: center;
 
 
-                .report_bei {
 
-                    position: relative;
 
-
 
-                    // background-color: #111111;
 
-                    .score {
 
-                        width: 100%;
 
-                        height: 40px;
 
-                        text-align: center;
 
-                        // height: 120px;
 
-                        // background-color: #ffffff;
 
-                        // width: 10px;
 
-                        position: absolute;
 
-                        left: 0;
 
-                        right: 0;
 
-                        top: -15px;
 
-                        bottom: 0;
 
-                        margin: auto;
 
-                        color: #ffffff;
 
-                        font-size: 30px;
 
+                    .report_bei {
 
+                        position: relative;
 
+
 
+                        // background-color: #111111;
 
+                        .score {
 
+
 
+                            width: 100%;
 
+                            height: 40px;
 
+                            text-align: center;
 
+                            // height: 120px;
 
+                            // background-color: #ffffff;
 
+                            // width: 10px;
 
+                            position: absolute;
 
+                            left: 0;
 
+                            right: 0;
 
+                            top: -15px;
 
+                            bottom: 0;
 
+                            margin: auto;
 
+                            color: #ffffff;
 
+                            font-size: 30px;
 
+                        }
 
                     }
 
-                }
 
 
-                .totol_result_des {
 
-                    font-size: 18px;
 
-                    margin-left: 50px;
 
-                    letter-spacing: 3px;
 
-                    line-height: 30px;
 
+                    .totol_result_des {
 
+                        color: #818996;
 
+                        font-size: 18px;
 
+                        // margin-left: 50px;
 
+                        letter-spacing: 1px;
 
+                        line-height: 30px;
 
+                    }
 
                 }
 
             }
 
 
+
 
             .report_echarts_out {
 
                 margin-top: 20px;
 
-                background-color: #F7F7F7;
 
                 border-radius: 40px;
 
                 display: flex;
 
                 flex-direction: row;
 
@@ -467,21 +479,25 @@ onUnmounted(() => {
 
 
 
             .des_zhishu {
 
-                background-color: #00BF78;
 
-                padding: 4px 16px;
 
+                // background-color: #00BF78;
 
+                // padding: 4px 16px;
 
+                padding-left: 10px;
 
                 border-radius: 20px;
 
                 display: inline-flex;
 
-                color: #ffffff;
 
+                color: #333333;
 
                 font-size: 18px;
 
                 letter-spacing: 3px;
 
+                font-weight: 700;
 
+                margin-bottom: 10px;
 
             }
 
 
             .report_des_out {
 
                 margin-top: 5px;
 
                 // background-color: #F7F7F7;
 
-                border: 4px solid #F7F7F7;
 
+                // border: 4px solid #F7F7F7;
 
                 padding: 20px 40px;
 
-                border-radius: 40px;
 
+                border-radius: 5px;
 
+                box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
 
 
                 .score {
 
                     color: #48D68E;
 
@@ -492,7 +508,7 @@ onUnmounted(() => {
 
                 }
 
 
                 .des {
 
-                    color: #000000;
 
+                    color: #818996;
 
                     font-size: 16px;
 
                     line-height: 24px;
 
                     letter-spacing: 3px;

+ 35 - 26
src/views/Scale.vue
View File 

@@ -581,24 +581,28 @@ onUnmounted(() => {
 
             <CpmdHeader />
 
             <div class="report_top">
 
                 <div class="report_jt">
 
-                    <span v-if="!(flag == '20210713155333' && isComplate == '2')">{{ flagName }}</span>
 
-                    <span v-if="flag == '20210713155333' && isComplate == '2'"> 抑郁-焦虑-压力量表（附加题）</span>
 
+                    <span v-if="!(flag == '20210713155333' && isComplate == '2')" style="color:#00DE7E ;">{{ flagName
 
+                        }}</span>
 
+                    <span v-if="flag == '20210713155333' && isComplate == '2'" style="color:#00DE7E ;">
 
+                        抑郁-焦虑-压力量表（附加题）</span>
 
                     <span v-show="!isCompleted" class="des">请根据您的表现回答下列问题，每道题请选择最符合您的情况的选项。</span>
 
                 </div>
 
-                <img v-show="!isCompleted" class="xlts_img" src="../assets/scale/scale.png" />
 
+                <!-- <img v-show="!isCompleted" class="xlts_img" src="../assets/scale/scale.png" /> -->
 
             </div>
 
 
         </div>
 
         <div class="kply">
 
-            <div class="kply_inner" :style="{ border: isCompleted ? '8px solid #ffffff' : '8px solid #B2F2D2' }">
 
-                <div style="padding :10px 100px">
 
+            <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="#48D68E">
 
+                        :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"
 
-                        :stroke-width="20" :percentage="((topicIndex + planIsComplateNum) / planAllNum) * 100"
 
-                        color="#48D68E">
 
+                        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">
 
@@ -671,10 +675,10 @@ onUnmounted(() => {
 
 
 :deep(.el-radio-button__inner) {
 
     width: 100%;
 
-    border-radius: 40px !important;
 
+    border-radius: 5px !important;
 
     margin-top: 10px;
 
-    border: 4px solid #B2F2D2;
 
-    border-left: 4px solid #B2F2D2 !important;
 
+    border: 1px solid #89DF32;
 
+    border-left: 1px solid #89DF32 !important;
 
     padding: 10px 10px;
 
     font-size: 14px;
 
     font-weight: 700;
 
@@ -684,17 +688,17 @@ onUnmounted(() => {
 
 
 :deep(.el-radio-button__inner:hover) {
 
     width: 100%;
 
-    border-radius: 40px !important;
 
+    border-radius: 5px !important;
 
     margin-top: 10px;
 
-    border: 4px solid #B2F2D2;
 
-    border-left: 4px solid #B2F2D2 !important;
 
+    border: 1px solid #89DF32;
 
+    border-left: 1px solid #89DF32 !important;
 
     padding: 10px 10px;
 
     font-size: 14px;
 
     font-weight: 700;
 
     text-align: left;
 
 
     color: #000000;
 
-    background-color: #48D68E;
 
+    background-color: #00DE7E;
 
     color: #ffffff;
 
 
 }
 
@@ -707,7 +711,7 @@ onUnmounted(() => {
 
 // }
 
 
 :deep().el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner {
 
-    background-color: #48D68E !important;
 
+    background-color: #00DE7E !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));
 
@@ -715,13 +719,14 @@ onUnmounted(() => {
 
 
 .home_header_out {
 
     // position: relative;
 
+    scroll-snap-align: start;
 
     padding-bottom: 60px;
 
     width: 100%;
 
     min-width: 1200px;
 
-    background-image: url('../assets/home/bg_ty.png');
 
+    // background-image: url('../assets/home/bg_ty.png');
 
     background-repeat: no-repeat;
 
     background-size: contain;
 
-    background-color: #B3F1DA; //估计是需要动态
 
+    // background-color: #B3F1DA; //估计是需要动态
 
     flex: 1;
 
 
     //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
 
@@ -731,12 +736,15 @@ onUnmounted(() => {
 
         right: 0;
 
         margin: auto;
 
         // height: 100px;
 
-        width: 1200px;
 
+        width: 100%;
 
 
         .report_top {
 
             width: 860px;
 
-            margin-left: 170px;
 
+            margin: auto;
 
+            box-sizing: border-box;
 
             margin-top: 20px;
 
+            // margin-left: 170px;
 
+            // margin-top: 20px;
 
             display: flex;
 
             flex-direction: row;
 
             justify-content: space-between;
 
@@ -758,7 +766,8 @@ onUnmounted(() => {
 
                 letter-spacing: 3px;
 
 
                 .des {
 
-                    color: #888888;
 
+                    font-weight: 100;
 
+                    color: #20E28E;
 
                     // opacity: 0.4;
 
                     font-size: 15px;
 
                     letter-spacing: 0px;
 
@@ -777,7 +786,7 @@ onUnmounted(() => {
 
 
         .kply_inner {
 
             // border: 8px solid #B2F2D2;
 
-
 
+            box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
 
             min-height: 500px;
 
             left: 0;
 
             right: 0;
 
@@ -785,7 +794,7 @@ onUnmounted(() => {
 
             width: 860px;
 
             // padding: 20px 20px;
 
             background-color: #ffffff;
 
-            border-radius: 40px;
 
+            border-radius: 5px;
 
 
             .scale_title {
 
                 margin-top: 20px;
 
@@ -810,10 +819,10 @@ onUnmounted(() => {
 
 
                     .scale_button_self {
 
 
-                        border-radius: 12px;
 
-                        border: 3px solid #48D68E;
 
+                        border-radius: 5px;
 
+                        border: 1px solid #48D68E;
 
                         color: #ffffff;
 
-                        background-color: #000000;
 
+                        background-color: #3B3B3B;
 
                         margin-right: 20px;
 
                         padding: 10px 40px;
 
                         cursor: pointer;

+ 9 - 7
src/views/ScaleDetail.vue
View File 

@@ -195,7 +195,7 @@ const startText = () => {
 
         </div>
 
         <div class="kply">
 
             <div class="kply_inner">
 
-                <div style="padding :20px 40px">
 
+                <div style="padding :20px 40px; box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);;">
 
                     <div class="cognize_title">
 
                         {{ scaleName }}
 
                     </div>
 
@@ -235,7 +235,8 @@ const startText = () => {
 
         </div>
 
     </div>
 
 </template>
 
-<style lang="scss">
 
+
 
+<style lang="scss" scoped>
 
 .cognize_real_out {
 
     background-color: #b64d4d;
 
     color: #41348a;
 
@@ -247,13 +248,14 @@ const startText = () => {
 
 }
 
 
 .home_header_out {
 
+    scroll-snap-align: start;
 
     padding-bottom: 60px;
 
     width: 100%;
 
     min-width: 1200px;
 
-    background-image: url('../assets/home/bg_ty.png');
 
+    // background-image: url('../assets/home/bg_ty.png');
 
     background-repeat: no-repeat;
 
     background-size: contain;
 
-    background-color: #B3F1DA; //估计是需要动态
 
+    // background-color: #B3F1DA; //估计是需要动态
 
     flex: 1;
 
 
     .home_header_inner {
 
@@ -261,7 +263,7 @@ const startText = () => {
 
         left: 0;
 
         right: 0;
 
         margin: auto;
 
-        width: 1200px;
 
+        width: 100%;
 
 
         .xlts_img {
 
             height: 40px;
 
@@ -394,8 +396,8 @@ const startText = () => {
 
 
                     .scale_button_self {
 
 
-                        border-radius: 12px;
 
-                        border: 3px solid #48D68E;
 
+                        border-radius: 5px;
 
+                        border: 1px solid #48D68E;
 
                         color: #ffffff;
 
                         background-color: #000000;
 
                         margin-right: 20px;

+ 8 - 5
src/views/TestRecord.vue
View File 

@@ -138,7 +138,8 @@ onMounted(() => {
 
 
 //跳转页面切换页面
 
 const viewReport = (val: any) => {
 
-    router.push({ name: 'report', params: { planId: val.planId, flag: val.flag } })
 
+    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' })
 
     // router.push({ name: 'plan' })
 
@@ -168,7 +169,8 @@ onUnmounted(() => {
 
             <div class="kply_inner">
 
                 <!--  -->
 
                 <div style="padding: 20px 40px;">
 
-                    <div style="padding:10% 20%" v-show="list.length == 0">
 
+                    <div style="padding:10% 20%;box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.17);"
 
+                        v-show="list.length == 0">
 
                         <img width="60%" style="margin-left: 20%;" src="../assets/planNo.png">
 
                     </div>
 
                     <div class="infinite-list-wrapper" style="overflow: auto" v-infinite-scroll="getData">
 
@@ -282,15 +284,16 @@ onUnmounted(() => {
 
 </template>
 
 <style lang="scss" scoped>
 
 .home_header_out {
 
+    scroll-snap-align: start;
 
     // position: relative;
 
     padding-bottom: 60px;
 
     width: 100%;
 
     min-width: 1200px;
 
-    background-image: url('../assets/home/bg_ty.png');
 
+    // background-image: url('../assets/home/bg_ty.png');
 
     background-repeat: no-repeat;
 
     background-size: contain;
 
     flex: 1;
 
-    background-color: #B3F1DA; //估计是需要动态
 
+    // background-color: #B3F1DA; //估计是需要动态
 
 
     //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
 
     .home_header_inner {
 
@@ -299,7 +302,7 @@ onUnmounted(() => {
 
         right: 0;
 
         margin: auto;
 
         // height: 100px;
 
-        width: 1200px;
 
+        width: 100%;
 
 
         .xlts_img {
 
             height: 60px;

+ 10 - 7
src/views/UpdatePas.vue
View File 

@@ -218,14 +218,15 @@ const loginFun = async () => {
 
 
 
 .home_header_out {
 
+    scroll-snap-align: start;
 
     // position: relative;
 
     padding-bottom: 60px;
 
     width: 100%;
 
     min-width: 1200px;
 
-    background-image: url('../assets/home/bg_ty.png');
 
+    // background-image: url('../assets/home/bg_ty.png');
 
     background-repeat: no-repeat;
 
     background-size: 100% auto;
 
-    background-color: #B3F1DA; //估计是需要动态
 
+    // background-color: #B3F1DA; //估计是需要动态
 
     flex: 1;
 
 
     //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
 
@@ -235,7 +236,7 @@ const loginFun = async () => {
 
         right: 0;
 
         margin: auto;
 
         // height: 100px;
 
-        width: 1200px;
 
+        width: 100%;
 
 
 
         .report_top {
 
@@ -257,6 +258,7 @@ const loginFun = async () => {
 
                 font-size: 20px;
 
                 font-weight: 700;
 
                 letter-spacing: 3px;
 
+                margin: auto;
 
             }
 
         }
 
     }
 
@@ -276,7 +278,8 @@ const loginFun = async () => {
 
             // min-height: 500px;
 
 
             background-color: #ffffff;
 
-            border-radius: 40px;
 
+            border-radius: 5px;
 
+            box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
 
 
             .user_account {
 
                 font-size: 18px;
 
@@ -296,10 +299,10 @@ const loginFun = async () => {
 
                 .start_button_self {
 
                     cursor: pointer;
 
                     // width: 100px;
 
-                    border-radius: 12px;
 
-                    border: 3px solid #48D68E;
 
+                    border-radius: 5px;
 
+                    border: 1px solid #48D68E;
 
                     color: #ffffff;
 
-                    background-color: #000000;
 
+                    background-color: #3B3B3B;
 
                     margin-right: 20px;
 
                     padding: 5px 50px;
 
                     cursor: pointer;