修改整体样式

src/components/CpmdHeader.vue

@@ -89,7 +89,7 @@ const formatterName = (val: string) => {
         <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="2">科普乐园</el-menu-item>
+
             <el-menu-item index="3">留言社区</el-menu-item>
             <!-- <el-badge :value="200" :max="99" class="item">
                 <el-menu-item index="4">测试计划</el-menu-item>
@@ -101,6 +101,7 @@ const formatterName = (val: string) => {
                 <span>测试计划</span>
             </el-menu-item>
             <el-menu-item index="5">测试记录</el-menu-item>
+            <el-menu-item index="2">更多测试</el-menu-item>
         </el-menu>
 
         <div class="login_button_bg" @mouseenter="comeMenu" @mouseleave="leaveMenu" v-show="userInfo.userInfo.userName">

src/views/HomeView.vue

@@ -144,8 +144,8 @@ const planNumGet = async () => {
 <template>
 
 
-  <div class="home_header_out" ref="homeHeaderOut" :style="{ height: height + 'px' }">
-
+  <!-- <div class="home_header_out" ref="homeHeaderOut" :style="{ height: height + 'px' }"> -->
+  <div class="home_header_out" ref="homeHeaderOut">
     <div class="home_header_inner">
       <CpmdHeader />
       <div :style="{ height: xlts + 'px' }">
@@ -193,109 +193,102 @@ const planNumGet = async () => {
         <div class="see_button" @click="goView">去看看</div>
       </div>
     </div> -->
-  </div>
-  <div class="home_mid">
+    <div class="home_mid">
+      <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">
+            &nbsp;&nbsp;&nbsp;&nbsp;大学生的焦虑情绪往往源自多重压力的叠加效应，其中学业负担与未来职业的不确定性占据主导地位。
+            一方面，大学教育的高标准与快节奏，如繁重的课程任务、竞争激烈的考试、科研项目的压力，以及对学术成就的追求,
+            都无形中增加了学生的心理负担，让他们时常处于紧张与不安之中。另一方面，步入社会的临近，使得就业市场的严酷现实成为心头大石，
+            学生们担忧自己的能力是否足够，能否在毕业后顺利找到理想工作，这种对未来的不确定感进一步加剧了焦虑情绪。
+          </div>
 
-    <!-- <div class="home_mid_plan" v-show="taskCircleFlag && userInfo.planCurrentNum != 0" @click="openSquare"
-      ref="plan_jihua" :style="{ top: plan_jihua + 'px' }">
-      <div class="badge_custom">
-        {{ userInfo.planCurrentNum }}
-      </div>
-      <img src="../assets/home/jihua_img.png" />
-    </div> -->
-    <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">
-          &nbsp;&nbsp;&nbsp;&nbsp;大学生的焦虑情绪往往源自多重压力的叠加效应，其中学业负担与未来职业的不确定性占据主导地位。
-          一方面，大学教育的高标准与快节奏，如繁重的课程任务、竞争激烈的考试、科研项目的压力，以及对学术成就的追求,
-          都无形中增加了学生的心理负担，让他们时常处于紧张与不安之中。另一方面，步入社会的临近，使得就业市场的严酷现实成为心头大石，
-          学生们担忧自己的能力是否足够，能否在毕业后顺利找到理想工作，这种对未来的不确定感进一步加剧了焦虑情绪。
         </div>
+      </div>
+      <div class="man2_group">
+
+        <div class="des2">
+          <div class="des2_inner">
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            失眠，对于许多大学生而言，已成为一种常见的困扰，它不仅影响睡眠质量，还可能波及到日常的学习效率与生活质量。
+            究其原因，多重因素交织其中。首先，学业压力无疑是首当其冲的罪魁祸首。
+            大学生活充满了挑战，无论是课程作业的紧迫、考试复习的重负，还是科研项目的压力，都可能让学生陷入焦虑与紧张之中，这种心理状态直接转化为夜晚辗转反侧的失眠。
+            其次，快节奏的生活方式与不规律的作息习惯也难辞其咎。深夜赶工、晨早赶课，加上社交媒体与电子产品的诱惑，打乱了生物钟的正常节律，使身体难以在需要的时候自然进入睡眠状态。
+            再者，生活环境的噪音与光线污染，或是室友的作息差异，也可能成为影响睡眠质量的外部因素。
+          </div>
 
+        </div>
+        <div class="man2">
+          <img class="man2_img" src="../assets/home/people2.png" />
+        </div>
       </div>
-    </div>
-    <div class="man2_group">
-
-      <div class="des2">
-        <div class="des2_inner">
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          失眠，对于许多大学生而言，已成为一种常见的困扰，它不仅影响睡眠质量，还可能波及到日常的学习效率与生活质量。
-          究其原因，多重因素交织其中。首先，学业压力无疑是首当其冲的罪魁祸首。
-          大学生活充满了挑战，无论是课程作业的紧迫、考试复习的重负，还是科研项目的压力，都可能让学生陷入焦虑与紧张之中，这种心理状态直接转化为夜晚辗转反侧的失眠。
-          其次，快节奏的生活方式与不规律的作息习惯也难辞其咎。深夜赶工、晨早赶课，加上社交媒体与电子产品的诱惑，打乱了生物钟的正常节律，使身体难以在需要的时候自然进入睡眠状态。
-          再者，生活环境的噪音与光线污染，或是室友的作息差异，也可能成为影响睡眠质量的外部因素。
+      <div class="man1_group">
+        <div class="man1">
+          <img class="man1_img" src="../assets/home/people3.png" />
         </div>
+        <div class="des">
+          <div class="des_inner">
+            &nbsp;&nbsp;&nbsp;&nbsp;刚刚步入大学校园的萌新们，是不是感觉到有些迷茫？
+            刚刚步入大学，周围的一切都充满了未知与惊喜，你可能会觉得有点晕头转向，就像是第一次迷路在了巨大的游乐场里。面对全新的环境、自由的时间管理以及未来的不确定性，感到迷茫是非常正常的情绪反应。
+            这是人生旅程中的一个重要转折点，意味着你需要从高中时期的被指导模式过渡到自主学习和自我管理的新阶段。
+          </div>
 
+        </div>
       </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 v-show="!moreFlag" class="get_more">
+        <img src="../assets/home/get_more.png" @click="goMore" />
       </div>
-      <div class="des">
-        <div class="des_inner">
-          &nbsp;&nbsp;&nbsp;&nbsp;刚刚步入大学校园的萌新们，是不是感觉到有些迷茫？
-          刚刚步入大学，周围的一切都充满了未知与惊喜，你可能会觉得有点晕头转向，就像是第一次迷路在了巨大的游乐场里。面对全新的环境、自由的时间管理以及未来的不确定性，感到迷茫是非常正常的情绪反应。
-          这是人生旅程中的一个重要转折点，意味着你需要从高中时期的被指导模式过渡到自主学习和自我管理的新阶段。
+      <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>
-    </div>
-    <div class="get_more">
-      <img src="../assets/home/get_more.png" @click="goMore" />
-    </div>
-    <div>
-      <div class="kepu_title">
-        <div class="kepu_title_des">
-          失眠抑郁问题科普
+        <div class="kply_inner_duan1">
+          &nbsp; &nbsp; &nbsp;对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
+          所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
+          像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
         </div>
-        <div>
-          <img src="../assets/kepu/title_right.png" />
+        <div class="kply_inner_duan1">
+          &nbsp; &nbsp; &nbsp;睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
+          阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
+          眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
         </div>
-      </div>
-      <div class="kply_inner_duan1">
-        &nbsp; &nbsp; &nbsp;对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
-        所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
-        像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
-      </div>
-      <div class="kply_inner_duan1">
-        &nbsp; &nbsp; &nbsp;睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
-        阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
-        眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
-      </div>
 
-      <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg1.png" />
+        <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg1.png" />
 
-      <div class="kply_inner_duan1">
-        &nbsp; &nbsp; &nbsp;对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
-        所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
-        像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
-      </div>
-      <div class="kply_inner_duan1">
-        &nbsp; &nbsp; &nbsp; 睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
-        阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
-        眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
-      </div>
+        <div class="kply_inner_duan1">
+          &nbsp; &nbsp; &nbsp;对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
+          所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
+          像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
+        </div>
+        <div class="kply_inner_duan1">
+          &nbsp; &nbsp; &nbsp; 睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
+          阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
+          眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
+        </div>
 
-      <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg2.png" />
+        <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg2.png" />
 
-    </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 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>
   </div>
+
 </template>
 <style lang="scss" scoped>
 .badge_custom {
@@ -408,7 +401,7 @@ const planNumGet = async () => {
     left: 0;
     right: 0;
     margin: auto;
-    height: 100px;
+    // height: 100px;
     width: 1200px;
 
     .xlts_img {
@@ -549,6 +542,8 @@ const planNumGet = async () => {
     font-size: 30px;
     color: #111111;
     line-height: 40px;
+    display: block;
+    margin-top: 40px;
 
     // width: 100%;
     // left: 0;
@@ -658,9 +653,9 @@ const planNumGet = async () => {
     text-align: center;
 
     img {
-      width: 300px;
-      margin-top: 60px;
-      margin-bottom: 60px;
+      width: 150px;
+      margin-top: 20px;
+      // margin-bottom: 20px;
     }
   }
 }
@@ -689,19 +684,21 @@ const planNumGet = async () => {
 }
 
 
-.kepu_title {
+.kepu_title_more {
+  margin-top: 20px;
 
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
+  justify-content: center;
+  // align-items: ;
 
   .kepu_title_des {
-    width: 406px;
+    // width: 406px;
     font-family: Alibaba PuHuiTi 2.0;
-    font-weight: 600;
+    // font-weight: 600;
     font-size: 30px;
-    color: #48D68E;
+    // color: #48D68E;
+    margin-bottom: 20px;
   }
 
   img {