修改用户端头部样式

src/components/CpmdHeader.vue

@@ -79,70 +79,75 @@ const formatterName = (val: string) => {
 </script>
 
 <template>
-    <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>
-        <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-badge :value="200" :max="99" class="item">
+    <!-- :style="{ backgroundColor: activeIndex == '1' ? '#ffffff' : '' }" -->
+    <div class="header_qp" :style="{ backgroundColor: activeIndex == '1' ? '#ffffff' : '' }">
+        <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>
+            <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-badge :value="200" :max="99" class="item">
                 <el-menu-item index="4">测试计划</el-menu-item>
             </el-badge> -->
-            <el-menu-item index="4">
-                <div class="badge_custom" v-show="userInfo.planCurrentNum != 0">
-                    {{ userInfo.planCurrentNum }}
-                </div>
-                <span>测试计划</span>
-            </el-menu-item>
-            <el-menu-item index="5">测试记录</el-menu-item>
-            <el-menu-item index="2">更多测试</el-menu-item>
-            <el-menu-item index="3">留言社区</el-menu-item>
-        </el-menu>
-
-        <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">
-                    <div class="update_pass" @click="updatePassFun">
-                        修改密码
+                <el-menu-item index="4">
+                    <div class="badge_custom" v-show="userInfo.planCurrentNum != 0">
+                        {{ userInfo.planCurrentNum }}
                     </div>
-                    <div class="exit_login" @click="exitFun">
-                        退出登录
-                    </div>
-                </div>
-            </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>
-        <el-dialog v-model="visible" :show-close="true" width="500" style="border-radius: 20px;">
-            <template #header="{ close, titleId, titleClass }">
-                <div class="my-header" style="text-align: center;">
-                    <div class="exit_login_title">退出登录</div>
-                    <div class="exit_login_info">是否退出当前账号?</div>
-                    <div class="start_button_out">
-                        <div class="start_button_self" @click="comT">
-                            确定
+                    <span>测试计划</span>
+                </el-menu-item>
+                <el-menu-item index="5">测试记录</el-menu-item>
+                <el-menu-item index="2">更多测试</el-menu-item>
+                <el-menu-item index="3">留言社区</el-menu-item>
+            </el-menu>
+
+            <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">
+                        <div class="update_pass" @click="updatePassFun">
+                            修改密码
+                        </div>
+                        <div class="exit_login" @click="exitFun">
+                            退出登录
                         </div>
                     </div>
+                </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>
+            <el-dialog v-model="visible" :show-close="true" width="500" style="border-radius: 20px;">
+                <template #header="{ close, titleId, titleClass }">
+                    <div class="my-header" style="text-align: center;">
+                        <div class="exit_login_title">退出登录</div>
+                        <div class="exit_login_info">是否退出当前账号?</div>
+                        <div class="start_button_out">
+                            <div class="start_button_self" @click="comT">
+                                确定
+                            </div>
+                        </div>
 
-                </div>
-            </template>
+                    </div>
+                </template>
 
-        </el-dialog>
+            </el-dialog>
+        </div>
     </div>
+
 </template>
 <style lang="scss" scoped>
 .el-menu {
@@ -245,99 +250,109 @@ const formatterName = (val: string) => {
 
 }
 
-.header_p {
-    padding-top: 20px;
+.header_qp {
+
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-
-
-    .header_image {
-        // flex: 1
-        // margin-right: 100px;
-
-        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 */
-        }
-    }
+    justify-content: center;
+    width: 100%;
 
-    .login_button_bg {
-        position: relative;
-        background-color: #000000;
-        border-radius: 12px;
-        border: 3px solid #48D68E;
-        color: #ffffff;
-        padding: 8px 20px;
-        cursor: pointer;
+    .header_p {
+        // background-color: #ffffff;
+        padding-top: 20px;
         display: flex;
+        flex-direction: row;
         align-items: center;
-
-        .login_user {
-            border-bottom-left-radius: 20px;
-            border-bottom-right-radius: 20px;
-            width: 80%;
-            position: absolute;
-            background-color: #ffffff;
-            bottom: -105px;
-            margin-left: calc(10% - 20px);
-            z-index: 200;
-            color: #000000;
-
-            .update_pass {
-                text-align: center;
-                margin-top: 20px;
-                // padding: 5px;
-                color: #999999
-            }
-
-            .update_pass:hover {
-                text-align: center;
-                margin-top: 20px;
-                color: #48D68E // padding: 5px;
+        justify-content: space-between;
+        width: 1200px;
+
+
+        .header_image {
+            // flex: 1
+            // margin-right: 100px;
+
+            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 */
             }
+        }
 
-            .exit_login {
-                text-align: center;
-                // padding: 5px;
-                margin-top: 20px;
-                margin-bottom: 20px;
-                color: #999999
+        .login_button_bg {
+            position: relative;
+            background-color: #000000;
+            border-radius: 12px;
+            border: 3px solid #48D68E;
+            color: #ffffff;
+            padding: 8px 20px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+
+            .login_user {
+                border-bottom-left-radius: 20px;
+                border-bottom-right-radius: 20px;
+                width: 80%;
+                position: absolute;
+                background-color: #ffffff;
+                bottom: -105px;
+                margin-left: calc(10% - 20px);
+                z-index: 200;
+                color: #000000;
+
+                .update_pass {
+                    text-align: center;
+                    margin-top: 20px;
+                    // padding: 5px;
+                    color: #999999
+                }
+
+                .update_pass:hover {
+                    text-align: center;
+                    margin-top: 20px;
+                    color: #48D68E // padding: 5px;
+                }
+
+                .exit_login {
+                    text-align: center;
+                    // padding: 5px;
+                    margin-top: 20px;
+                    margin-bottom: 20px;
+                    color: #999999
+                }
+
+                .exit_login:hover {
+                    text-align: center;
+                    // padding: 5px;
+                    margin-top: 20px;
+                    margin-bottom: 20px;
+                    color: #48D68E // padding: 5px;
+                }
             }
+        }
 
-            .exit_login:hover {
-                text-align: center;
-                // padding: 5px;
-                margin-top: 20px;
-                margin-bottom: 20px;
-                color: #48D68E // padding: 5px;
-            }
+        .flex-grow {
+            flex: 1;
         }
-    }
 
-    .flex-grow {
-        flex: 1;
+        .menu_gen {
+            width: 80px;
+            height: 20px;
+            font-family: Alibaba PuHuiTi 2.0;
+            font-weight: normal;
+            font-size: 20px;
+            color: #333333;
+            line-height: 26px
+        }
     }
 
-    .menu_gen {
-        width: 80px;
-        height: 20px;
-        font-family: Alibaba PuHuiTi 2.0;
-        font-weight: normal;
-        font-size: 20px;
-        color: #333333;
-        line-height: 26px
-    }
 }
 </style>

src/views/HomeView.vue

@@ -169,9 +169,10 @@ const planNumGet = async () => {
 
   <!-- <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 />
+
       <!-- <div :style="{ height: xlts + 'px' }"> -->
       <!-- <div :style="{ height: xlts + 'px' }"> -->
       <div style="height:calc(100vh - 80px)">
@@ -223,24 +224,17 @@ const planNumGet = async () => {
     <div class="home_mid">
       <div class="kepu_title">政策解读</div>
       <div class="book_self">
-        <div class="book_left">
-          <div class="book_title">教育部等十七部门关于印发《全面加强和</div>
-          <div class="book_title"> 改进新时代学生心理健康工作专项行动</div>
-          <div class="book_title"> 计划（2023—2025年）》的通知</div>
-
-          <div style="width: 100%;display: flex;margin-top:10px">
-            <img style="width: 100%;padding-left: 10px;padding-right: 10px;box-sizing:border-box"
-              src="../assets/zs/1.png" alt="">
-          </div>
-        </div>
-        <div class="book_right">
 
-          <div class="book_title">教育部办公厅关于加强学生心理健康管理工作的通知</div>
-          <div style="width: 100%;display: flex;margin-top:10px">
-            <img style="width: 100%;padding-left: 10px;padding-right: 10px;box-sizing:border-box"
-              src="../assets/zs/5.png" alt="">
-          </div>
-        </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="">
+
+        <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="">
+
       </div>
 
       <div class="kepu_title">科普小课堂</div>
@@ -301,30 +295,33 @@ const planNumGet = async () => {
           </div> -->
         </div>
         <div class="kply_inner_duan1">
-          <span style="visibility: hidden;">大写</span>对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
-          所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
-          像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
+          <span
+            style="visibility: hidden;">大写</span>睡眠质量是衡量生活质量和身心健康的关键指标，对大学生尤为重要。良好的睡眠能增强免疫力、保持精力，促进新陈代谢，保持思路清晰，减少不良情绪。然而，大学生失眠问题普遍，约40%至60%的大学生曾经历失眠，其中10%至20%患严重失眠，且近年来呈增加趋势。常见原因包括思绪过多、电子产品使用过度、学习任务未完成等，导致入睡晚、多梦易醒等问题。失眠会影响注意力、记忆力、思维等认知功能，进而影响学业表现，引起社会关注。
         </div>
         <div class="kply_inner_duan1">
-          <span style="visibility: hidden;">大写</span>睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
-          阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
-          眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
+          <span
+            style="visibility: hidden;">大写</span>压力是导致大学生失眠的重要因素，减轻压力成为应对失眠的关键策略。大学生需探索适合的学习方法，积极参与集体活动，保持乐观心态，明确自我定位和发展方向。同时，放松训练、冥想和运动等情绪调节方法也有助于应对压力。此外，舒适的睡眠环境和良好的睡眠习惯对预防和应对失眠至关重要。应创建安静、黑暗、凉爽的睡眠环境，适当锻炼以促进睡眠，但避免晚上高强度运动。保持规律的睡眠时间，减少睡前电子产品使用，避免蓝光影响。规律饮食，减少酒精、咖啡因摄入。建立睡前放松程序，如听音乐、阅读或伸展运动，有助于入睡。
+        </div>
+        <div class="kply_inner_duan1">
+          <span style="visibility: hidden;">大写</span>大学生失眠问题不容忽视，需要综合施策，从减轻压力、改善睡眠环境和习惯等多方面入手，以提升大学生的睡眠质量，保障其身心健康和学业表现。
         </div>
 
-        <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg1.png" />
+        <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>对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
-          所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
-          像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
+          <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>睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
-          阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
-          眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
+          <span
+            style="visibility: hidden;">大写</span>大学生抑郁情绪的普遍化与严重化已成为不容忽视的社会现象，它不仅侵蚀着年轻人的心理健康，更威胁着他们的学业成就与未来发展。面对这一挑战，社会各界需携手合作，打破对抑郁症的偏见与误解，构建一个包容、理解且支持的心理健康环境。通过加强心理健康教育、完善心理咨询服务体系、鼓励积极的社会互动与自我调适策略，以及倡导及时、专业的医疗干预，我们可以共同为大学生撑起一片心灵的晴空，让青春的花朵在阳光下自由绽放，远离抑郁的阴霾，拥抱健康、充实的大学生活。
         </div>
 
-        <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg2.png" />
+        <img width="100%" style="margin-top:4px;margin-bottom: 20px;" src="../assets/kepu/bg2.png" />
 
       </div>
       <!-- <div class="home_mid_plan" v-show="taskCircleFlag && userInfo.planCurrentNum != 0" @click="openSquare"
@@ -616,21 +613,6 @@ const planNumGet = async () => {
     }
   }
 
-  .book_right {
-    text-align: center;
-    box-sizing: border-box;
-    padding: 20px;
-    height: 700px;
-    width: 520px;
-    background-color: rgb(255, 251, 242);
-    // box-shadow: -8px 0px 5px #111111;
-    box-shadow: inset 15px 0px 10px -15px #161616, 1px 0px 5px #858484;
-
-    .book_title {
-      font-weight: 700;
-      line-height: 25px;
-    }
-  }
 
   .kepu_title {
     text-align: center;