科普乐园---新增及整体架构修改

package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^1.7.2",
         "element-plus": "^2.7.7",
         "pinia": "^2.1.7",
+        "pinia-plugin-persist": "^1.0.0",
         "pinia-plugin-persistedstate": "^3.2.1",
         "vue": "^3.4.29",
         "vue-router": "^4.3.3"
@@ -3755,6 +3756,49 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/pinia-plugin-persist/-/pinia-plugin-persist-1.0.0.tgz",
+      "integrity": "sha512-M4hBBd8fz/GgNmUPaaUsC29y1M09lqbXrMAHcusVoU8xlQi1TqgkWnnhvMikZwr7Le/hVyMx8KUcumGGrR6GVw==",
+      "dependencies": {
+        "vue-demi": "^0.12.1"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0",
+        "pinia": "^2.0.0",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia-plugin-persist/node_modules/vue-demi": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz",
+      "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pinia-plugin-persistedstate": {
       "version": "3.2.1",
       "resolved": "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz",

src/App.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import { menuStatusStore } from '@/stores'
+// const menuStatus = menuStatusStore();
+// menuStatus.saveActiveIndex('1')
 </script>
 
 <template>

src/components/CpmdHeader.vue

@@ -1,13 +1,31 @@
 <script setup lang="ts">
+import router from '@/router';
 import { ref } from 'vue'
+
+import { menuStatusStore } from '@/stores';
 // import url from '../assets/home/trademark.png';
 //选中的索引
-const activeIndex = ref<string>('1')
+
+
+const menuStatus = menuStatusStore()
+
+const activeIndex = ref<string>()
+activeIndex.value = menuStatus.activeIndex
 
 //选中菜单事件
 const handleSelect = (key: string, keyPath: []) => {
     // console.log(key, keyPath)
+    menuStatus.saveActiveIndex(key)
     activeIndex.value = key;
+    if (key == '1') {
+        router.push({ name: 'homeView', params: { id: 1 } })
+    } else if (key == '2') {
+        router.push({ name: 'popularizationScience', params: { id: 1 } })
+    } else if (key == '3') {
+        router.push({ name: 'community', params: { id: 1 } })
+    }
+    // menuStatus.saveActiveIndex(key)
+
 }
 </script>
 
@@ -47,6 +65,10 @@ const handleSelect = (key: string, keyPath: []) => {
     </div>
 </template>
 <style lang="scss" scoped>
+.el-menu {
+    background-color: transparent !important
+}
+
 .badge_custom {
     position: absolute;
     background-color: #48D68E;
@@ -106,7 +128,7 @@ const handleSelect = (key: string, keyPath: []) => {
 }
 
 .header_p {
-    margin-top: 20px;
+    padding-top: 20px;
     display: flex;
     flex-direction: row;
     align-items: center;

src/main.ts

@@ -1,16 +1,20 @@
 // import './assets/main.css'
 
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-
+import pinia from '@/stores'
+// import { createPinia } from "pinia"
+// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from './router'
+// import type pinia from './stores'
 
 const app = createApp(App)
 
-app.use(createPinia())
+// const pinia = createPinia()
+// pinia.use()
+app.use(pinia)
 app.use(router)
 app.use(ElementPlus)
 

src/router/index.ts

@@ -10,23 +10,40 @@ const Home = () => import('@/views/Home.vue')
 
 //首页详细内容
 const HomeView = () => import('@/views/HomeView.vue')
+//科普内容
+const PopularizationScience = () => import('@/views/PopularizationScience.vue')
 
+const Community = () => import('@/views/Community.vue')
 // 组件异步懒加载方法
 // const _import = (path: string) =>
 //   defineAsyncComponent(() => import(`../views/${path}.vue`))
 const routes = [
   {
-    path: '/home',
+    path: '/',
     name: 'home',
     // component: Home,
     component: Home,
-    redirect: "/home/homeView",
+    redirect: "/homeView",
     children: [{
       path: 'homeView',
       name: 'homeView',
       component: HomeView
+
       // component: _import('HomeView')
-    }]
+    },
+    {
+      path: 'popularizationScience',
+      name: 'popularizationScience',
+      component: PopularizationScience
+
+    },
+    {
+      path: 'community',
+      name: 'community',
+      component: () => import('@/views/Community.vue')
+
+    }
+    ]
     // component: HomeView
   },
 

src/stores/index.ts

@@ -9,6 +9,7 @@ export default pinia
 //模块统一导出
 
 export * from './modules/userInfo'
+export * from './modules/menuStatus'
 
 // export const useCounterStore = defineStore('counter', () => {
 //   const count = ref(0)

src/stores/modules/menuStatus.ts

@@ -0,0 +1,46 @@
+// //引入pinia
+// import { defineStore } from 'pinia'
+// export const menuStatusStore = defineStore(
+//     'menuStatus',
+//     {
+//         //状态数据
+//         state: () => ({
+//             activeIndex: '1'
+//         }),
+//         //计算属性不能传参
+//         getters: {
+
+//         },
+//         //action  --相当于methods
+//         actions: {
+//             //对数据进行操作
+//             saveActive(val: string) {
+//                 this.activeIndex = val
+//             }
+//         },
+
+//         persist: {
+//             key: 'piniaStore',
+//             storage: sessionStorage,
+//             paths: ['activeIndex']
+//         }
+//     }
+// )
+
+//引入pinia
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+export const menuStatusStore = defineStore(
+    'menuStatus', () => {
+        const activeIndex = ref('1')
+        const saveActiveIndex = (val: string) => {
+            activeIndex.value = val
+        }
+        return { activeIndex, saveActiveIndex }
+    },
+    // { persist: true }
+    {
+        persist: true
+    }
+)
+

src/stores/modules/userInfo.ts

@@ -4,6 +4,9 @@ import { ref } from 'vue'
 const userInfoStore = defineStore(
   'userInfo',
   () => {
+
+
+
     //定义token
     const token = ref<string>('')
     //定义用户信息

src/views/Community.vue

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import CpmdHeader from '@/components/CpmdHeader.vue';
+import { onMounted, onUnmounted, ref } from 'vue'
+
+//持久化设置 菜单状态
+import { menuStatusStore } from '@/stores'
+const menuStatus = menuStatusStore();
+menuStatus.saveActiveIndex('3')
+
+const homeHeaderOut = ref<any>()
+const height = ref<number>()
+//心灵探索高度
+const xlts = ref<number>()
+
+//计划提醒的高度
+const plan_jihua = ref<number>()
+
+//显示标题及文本的标志
+const flag_text = ref<number>(1)
+//定时器标志
+const flag_time = ref<any>()
+
+//刚进入页面就将高度设置为页面需要的
+onMounted(() => {
+    setHeight()
+    window.addEventListener('resize', setHeight);
+    forStatus()
+    //进到界面开始轮询
+})
+//界面销毁函数
+
+
+//轮旋切换页面的方法
+const forStatus = () => {
+    clearInterval(flag_time.value)
+    // flag_text.value == 2
+    flag_time.value = setInterval(() => {
+        console.log('定时器')
+        console.log(flag_text.value)
+        flag_text.value = flag_text.value + 1
+        if (flag_text.value > 4) {
+            flag_text.value = 1
+
+        }
+
+
+    }, 3000)
+}
+
+const setHeight = () => {
+    console.log('----------------------------------------------')
+    //-------设置背景图的高度---------//
+    const width = homeHeaderOut.value
+    console.log(width.offsetWidth)
+    height.value = width.offsetWidth * 718 / 1920
+    xlts.value = height.value - 100
+    plan_jihua.value = height.value + 100
+}
+//退出页面销毁 方法
+onUnmounted(() => {
+    clearInterval(flag_time.value)
+    window.removeEventListener('resize', setHeight)
+})
+
+
+
+
+</script>
+
+<template>
+    <div class="home_header_out" ref="homeHeaderOut">
+        <div class=" home_header_inner">
+            <CpmdHeader />
+            <div style="text-align: center;">
+                <img class="xlts_img" style="margin-top:100px" src="../assets/home/other_text.png" />
+            </div>
+        </div>
+        <div class="kply">
+            <div class="kply_inner">
+                <div style="height:500px">
+                    留言社区
+                </div>
+                <!-- <div class="kepu_title">
+                    <div class="kepu_title_des">
+                        失眠抑郁问题科普
+                    </div>
+                    <div>
+                        <img src="../assets/kepu/title_right.png" />
+                    </div>
+                </div>
+                <div class="kply_inner_duan1">
+                    对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
+                    所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
+                    像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
+                </div>
+                <div class="kply_inner_duan1">
+                    睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
+                    阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
+                    眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
+                </div>
+                <img width="100%" style="margin-top:40px" src="../assets/kepu/bg1.png" />
+                <div class="kply_inner_duan1">
+                    对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
+                    所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
+                    像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
+                </div>
+                <div class="kply_inner_duan1">
+                    睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
+                    阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
+                    眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
+                </div>
+                <img width="100%" style="margin-top:40px" src="../assets/kepu/bg2.png" /> -->
+            </div>
+
+        </div>
+
+    </div>
+
+
+</template>
+<style lang="scss" scoped>
+.home_header_out {
+    // 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: #FAFAFA; //估计是需要动态
+
+    //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
+    .home_header_inner {
+        min-height: 1;
+        left: 0;
+        right: 0;
+        margin: auto;
+        // height: 100px;
+        width: 1200px;
+
+        .xlts_img {
+            height: 80px;
+        }
+    }
+
+    .kply {
+        width: 100%;
+        margin-top: 100px;
+        // background-color: #FAFAFA;
+
+        .kply_inner {
+            padding: 20px 20px;
+            left: 0;
+            right: 0;
+            margin: auto;
+            width: 1200px;
+            background-color: #ffffff;
+            border-radius: 40px;
+            // height: 1000px;
+
+            // margin-bottom: 60px;
+            .kepu_title {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+
+                .kepu_title_des {
+
+                    width: 406px;
+
+                    font-family: Alibaba PuHuiTi 2.0;
+                    font-weight: 600;
+                    font-size: 44px;
+                    color: #48D68E;
+
+                }
+
+                img {
+                    width: 480px;
+                }
+            }
+
+            .kply_inner_duan1 {
+                margin-top: 40px;
+                font-family: Alibaba PuHuiTi 2.0;
+                font-weight: normal;
+                font-size: 24px;
+                color: #333333;
+                line-height: 40px;
+                letter-spacing: 4px;
+            }
+        }
+    }
+
+
+}
+
+
+
+.home_mid {
+    // background-color: blanchedalmond;
+    width: 1200px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    margin-top: 40px;
+    // position: relative;
+
+
+
+
+    .kepu_title {
+        text-align: center;
+
+        font-size: 50px;
+        color: #111111;
+        line-height: 95px;
+
+        // width: 100%;
+        // left: 0;
+        // right: 0;
+        // margin: auto
+    }
+
+    .kepu_title_sub {
+        margin-top: 30px;
+        text-align: center;
+        font-size: 28px;
+        color: #48D68E;
+        line-height: 26px;
+    }
+
+    .man1_group {
+        margin-top: 60px;
+        height: 100%;
+        display: flex;
+
+        .man1 {
+            position: relative;
+            width: 327px;
+            // height: 100%;
+
+            // height: 100%
+            .man1_img {
+                position: absolute;
+                bottom: 0;
+                /* bottom: 0px; */
+                /* height: auto; */
+                width: 100%;
+                left: 100px
+            }
+
+        }
+
+        .des {
+            border: #48D68E solid 5px;
+            border-radius: 40px;
+            padding: 20px;
+            letter-spacing: 6px;
+            flex: 1;
+
+            .des_inner {
+                border: 1px dashed #48D68E;
+                border-radius: 40px;
+                padding-bottom: 40px;
+                padding-top: 30px;
+                padding-left: 100px;
+                padding-right: 20px;
+                letter-spacing: 6px;
+                font-weight: normal;
+                font-size: 24px;
+                color: #333333;
+                line-height: 40px;
+            }
+        }
+    }
+
+    .man2_group {
+        margin-top: 60px;
+        height: 100%;
+        display: flex;
+
+        .man2 {
+            position: relative;
+            width: 327px;
+            // height: 100%;
+
+            // height: 100%
+            .man2_img {
+                position: absolute;
+                bottom: 0;
+                /* bottom: 0px; */
+                /* height: auto; */
+                width: 100%;
+                left: -100px
+            }
+
+        }
+
+        .des2 {
+            border: #48D68E solid 5px;
+            border-radius: 40px;
+            padding: 20px;
+            letter-spacing: 6px;
+            flex: 1;
+
+            .des2_inner {
+                border: 1px dashed #48D68E;
+                border-radius: 40px;
+                padding-bottom: 40px;
+                padding-top: 30px;
+                padding-left: 20px;
+                padding-right: 100px;
+                letter-spacing: 6px;
+                font-weight: normal;
+                font-size: 24px;
+                color: #333333;
+                line-height: 40px;
+            }
+        }
+    }
+
+    .get_more {
+        text-align: center;
+
+        img {
+            width: 300px;
+            margin-top: 60px;
+            margin-bottom: 60px;
+        }
+    }
+}
+
+// .home_footer_out {
+//     width: 100%;
+//     background-color: #000000;
+// }</style>

src/views/Home.vue

@@ -1,72 +1,30 @@
 <script setup lang="ts">
-import CpmdHeader from '@/components/CpmdHeader.vue';
 
 import CpmdFooter from '@/components/CpmdFooter.vue';
 import { onMounted, onUnmounted, ref } from 'vue'
-const homeHeaderOut = ref<any>()
-const height = ref<number>()
-//心灵探索高度
-const xlts = ref<number>()
-
-//计划提醒的高度
-const plan_jihua = ref<number>()
-
-//显示标题及文本的标志
-const flag_text = ref<number>(1)
-//定时器标志
-const flag_time = ref<any>()
 
 //刚进入页面就将高度设置为页面需要的
 onMounted(() => {
-    setHeight()
-    window.addEventListener('resize', setHeight);
-    forStatus()
+    // setHeight()
+    // window.addEventListener('resize', setHeight);
+    // forStatus()
     //进到界面开始轮询
 })
 //界面销毁函数
 
 
 //轮旋切换页面的方法
-const forStatus = () => {
-    clearInterval(flag_time.value)
-    // flag_text.value == 2
-    flag_time.value = setInterval(() => {
 
-        flag_text.value = flag_text.value + 1
-        if (flag_text.value > 4) {
-            flag_text.value = 1
-        }
 
+const setHeight = () => {
 
-    }, 3000)
-}
 
-const setHeight = () => {
-    console.log('----------------------------------------------')
-    //-------设置背景图的高度---------//
-    const width = homeHeaderOut.value
-    console.log(width.offsetWidth)
-    height.value = width.offsetWidth * 1000 / 1920
-    xlts.value = height.value - 100
-    plan_jihua.value = height.value + 100
 }
 //退出页面销毁 方法
 onUnmounted(() => {
-    clearInterval(flag_time.value)
-    window.removeEventListener('resize', setHeight)
-})
 
-//鼠标移入事件--状态进行切换
-const brightStatus = (val: number) => {
-    console.log(val)
-    clearInterval(flag_time.value)
-    flag_text.value = val
-}
+})
 
-//鼠标移出事件事件--调用轮询器
-const brightStatusLevel = () => {
-    forStatus()
-}
 
 
 </script>
@@ -75,119 +33,6 @@ const brightStatusLevel = () => {
     <!-- 最外边宽度100% -->
     <div class="home_view">
         <RouterView />
-        <!-- <div class="home_header_out" ref="homeHeaderOut" :style="{ height: height + 'px' }">
- 
-            <div class="home_header_inner">
-                <CpmdHeader />
-                <div :style="{ height: xlts + 'px' }">
-                    <img class="xlts_img" style="margin-top:40px" 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>
-
-                        <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" ref="plan_jihua">
-                <div class="home_mid_plan_close">
-                    <img style="right:0" width="20px" src="../assets/home/close.png" />
-                </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">去看看</div>
-                </div>
-            </div>
-        </div> -->
-        <!-- <div class="home_mid">
-
-            <div class="home_mid_plan" ref="plan_jihua" :style="{ top: plan_jihua + 'px' }">
-                <div class="badge_custom">
-                    122
-                </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>
-            <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 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="get_more">
-                <img src="../assets/home/get_more.png" />
-            </div>
-        </div> -->
         <!-- 此处是底部部分最长宽度是100% -->
         <div class="home_footer_out">
             <CpmdFooter />
@@ -196,362 +41,12 @@ const brightStatusLevel = () => {
     </div>
 </template>
 <style lang="scss" scoped>
-.badge_custom {
-    position: absolute;
-    background-color: #ED2626;
-    // left: 90px;
-    right: 0;
-    top: 0px;
-
-    // line-height: 18px;
-    color: 10px;
-    padding: 8px;
-    font-weight: 300;
-    font-size: 16px;
-    color: #ffffff;
-    border-radius: 50%;
-}
-
 .home_view {
     width: 100%;
     // display: flex;
     // background-color: rgb(17, 52, 167);
     height: 100px;
 
-    .home_header_out {
-        // position: relative;
-        width: 100%;
-        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: contain;
-
-        // height: 106.667vw;
-        // height: 41.667vw;
-        // height: calc(100% * 1000px / 1920px);
-        // 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: 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;
-            // bottom: 0;
-            min-height: 1;
-            left: 0;
-            right: 0;
-            margin: auto;
-            height: 100px;
-            width: 1200px;
-
-            .xlts_img {
-                height: 36%;
-                //还剩百分之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: -62%;
-                        left: -8%;
-                        height: 52%;
-                    }
-
-                    .student1_text {
-                        cursor: pointer;
-                        position: absolute;
-                        bottom: -42%;
-                        left: -86%;
-                        height: 80%;
-                    }
-                }
-
-
-                .student2_group {
-                    position: absolute;
-                    bottom: 27%;
-                    left: 34%;
-                    height: 200px;
-                    width: 200px;
-
-                    .student2 {
-                        cursor: pointer;
-                        position: absolute;
-
-                        bottom: -1%;
-                        left: 72%;
-                        height: 76%;
-                    }
-
-                    .student2_text {
-                        cursor: pointer;
-                        position: absolute;
-                        bottom: 60%;
-
-                        left: -8%;
-                        height: 77%;
-                    }
-                }
-
-
-                .student3 {
-                    cursor: pointer;
-                    position: absolute;
-                    bottom: 5%;
-                    left: 62%; // w
-                    height: 40%;
-                }
-
-                .student3_text {
-                    cursor: pointer;
-                    position: absolute;
-                    bottom: 44%;
-                    left: 61%;
-                    height: 40%;
-                }
-
-                .student4 {
-                    cursor: pointer;
-                    position: absolute;
-                    bottom: 30%;
-                    left: 89%; // w
-                    height: 40%;
-                }
-
-                .student4_text {
-                    cursor: pointer;
-                    position: absolute;
-                    bottom: 61%;
-                    left: 89%;
-                    height: 40%;
-                }
-            }
-
-
-        }
-    }
-
-    .home_mid {
-        // background-color: blanchedalmond;
-        width: 1200px;
-        left: 0;
-        right: 0;
-        margin: auto;
-        margin-top: 40px;
-        // position: relative;
-
-        .home_mid_plan {
-            cursor: pointer;
-            // top: 1000px;
-            position: absolute;
-            right: 0px;
-
-            // top: -30px;
-            img {
-                width: 100px;
-            }
-        }
-
-
-
-        .kepu_title {
-            text-align: center;
-
-            font-size: 50px;
-            color: #111111;
-            line-height: 95px;
-
-            // width: 100%;
-            // left: 0;
-            // right: 0;
-            // margin: auto
-        }
-
-        .kepu_title_sub {
-            margin-top: 30px;
-            text-align: center;
-            font-size: 28px;
-            color: #48D68E;
-            line-height: 26px;
-        }
-
-        .man1_group {
-            margin-top: 60px;
-            height: 100%;
-            display: flex;
-
-            .man1 {
-                position: relative;
-                width: 327px;
-                // height: 100%;
-
-                // height: 100%
-                .man1_img {
-                    position: absolute;
-                    bottom: 0;
-                    /* bottom: 0px; */
-                    /* height: auto; */
-                    width: 100%;
-                    left: 100px
-                }
-
-            }
-
-            .des {
-                border: #48D68E solid 5px;
-                border-radius: 40px;
-                padding: 20px;
-                letter-spacing: 6px;
-                flex: 1;
-
-                .des_inner {
-                    border: 1px dashed #48D68E;
-                    border-radius: 40px;
-                    padding-bottom: 40px;
-                    padding-top: 30px;
-                    padding-left: 100px;
-                    padding-right: 20px;
-                    letter-spacing: 6px;
-                    font-weight: normal;
-                    font-size: 24px;
-                    color: #333333;
-                    line-height: 40px;
-                }
-            }
-        }
-
-        .man2_group {
-            margin-top: 60px;
-            height: 100%;
-            display: flex;
-
-            .man2 {
-                position: relative;
-                width: 327px;
-                // height: 100%;
-
-                // height: 100%
-                .man2_img {
-                    position: absolute;
-                    bottom: 0;
-                    /* bottom: 0px; */
-                    /* height: auto; */
-                    width: 100%;
-                    left: -100px
-                }
-
-            }
-
-            .des2 {
-                border: #48D68E solid 5px;
-                border-radius: 40px;
-                padding: 20px;
-                letter-spacing: 6px;
-                flex: 1;
-
-                .des2_inner {
-                    border: 1px dashed #48D68E;
-                    border-radius: 40px;
-                    padding-bottom: 40px;
-                    padding-top: 30px;
-                    padding-left: 20px;
-                    padding-right: 100px;
-                    letter-spacing: 6px;
-                    font-weight: normal;
-                    font-size: 24px;
-                    color: #333333;
-                    line-height: 40px;
-                }
-            }
-        }
-
-        .get_more {
-            text-align: center;
-
-            img {
-                width: 300px;
-                margin-top: 60px;
-                margin-bottom: 60px;
-            }
-        }
-    }
-
     .home_footer_out {
         width: 100%;
         background-color: #000000;

src/views/HomeView.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import CpmdHeader from '@/components/CpmdHeader.vue';
-
-import CpmdFooter from '@/components/CpmdFooter.vue';
 import { onMounted, onUnmounted, ref } from 'vue'
+import { menuStatusStore } from '@/stores'
+const menuStatus = menuStatusStore();
+menuStatus.saveActiveIndex('1')
+
 const homeHeaderOut = ref<any>()
 const height = ref<number>()
 //心灵探索高度
@@ -31,10 +33,12 @@ const forStatus = () => {
   clearInterval(flag_time.value)
   // flag_text.value == 2
   flag_time.value = setInterval(() => {
-
+    console.log('定时器')
+    console.log(flag_text.value)
     flag_text.value = flag_text.value + 1
     if (flag_text.value > 4) {
       flag_text.value = 1
+
     }
 
 
@@ -72,10 +76,10 @@ const brightStatusLevel = () => {
 </script>
 
 <template>
-  <!-- 最外边宽度100% -->
+
 
   <div class="home_header_out" ref="homeHeaderOut" :style="{ height: height + 'px' }">
-    <!-- 此处宽度最小 头部包含导航栏为1200 -->
+
     <div class="home_header_inner">
       <CpmdHeader />
       <div :style="{ height: xlts + 'px' }">
@@ -115,7 +119,7 @@ const brightStatusLevel = () => {
       </div>
 
     </div>
-    <div class="home_mid_plan_des" ref="plan_jihua">
+    <div class="home_mid_plan_des">
       <div class="home_mid_plan_close">
         <img style="right:0" width="20px" src="../assets/home/close.png" />
       </div>
@@ -195,14 +199,17 @@ const brightStatusLevel = () => {
   // left: 90px;
   right: 0;
   top: 0px;
-
+  height: 30px;
+  width: 30px;
+  line-height: 30px;
+  text-align: center;
   // line-height: 18px;
   color: 10px;
   padding: 8px;
   font-weight: 300;
   font-size: 16px;
   color: #ffffff;
-  border-radius: 50%;
+  border-radius: 30px;
 }
 
 

src/views/PopularizationScience.vue

@@ -0,0 +1,335 @@
+<script setup lang="ts">
+import CpmdHeader from '@/components/CpmdHeader.vue';
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import { menuStatusStore } from '@/stores'
+const menuStatus = menuStatusStore();
+
+menuStatus.saveActiveIndex('2')
+
+const homeHeaderOut = ref<any>()
+const height = ref<number>()
+//心灵探索高度
+const xlts = ref<number>()
+
+//计划提醒的高度
+const plan_jihua = ref<number>()
+
+//显示标题及文本的标志
+const flag_text = ref<number>(1)
+//定时器标志
+const flag_time = ref<any>()
+
+//刚进入页面就将高度设置为页面需要的
+onMounted(() => {
+    setHeight()
+    window.addEventListener('resize', setHeight);
+    forStatus()
+    //进到界面开始轮询
+})
+//界面销毁函数
+
+
+//轮旋切换页面的方法
+const forStatus = () => {
+    clearInterval(flag_time.value)
+    // flag_text.value == 2
+    flag_time.value = setInterval(() => {
+        console.log('定时器')
+        console.log(flag_text.value)
+        flag_text.value = flag_text.value + 1
+        if (flag_text.value > 4) {
+            flag_text.value = 1
+
+        }
+
+
+    }, 3000)
+}
+
+const setHeight = () => {
+    console.log('----------------------------------------------')
+    //-------设置背景图的高度---------//
+    const width = homeHeaderOut.value
+    console.log(width.offsetWidth)
+    height.value = width.offsetWidth * 718 / 1920
+    xlts.value = height.value - 100
+    plan_jihua.value = height.value + 100
+}
+//退出页面销毁 方法
+onUnmounted(() => {
+    clearInterval(flag_time.value)
+    window.removeEventListener('resize', setHeight)
+})
+
+
+
+
+</script>
+
+<template>
+    <div class="home_header_out" ref="homeHeaderOut">
+        <div class=" home_header_inner">
+            <CpmdHeader />
+            <div style="text-align: center;">
+                <img class="xlts_img" style="margin-top:100px" src="../assets/home/other_text.png" />
+            </div>
+        </div>
+        <div class="kply">
+            <div class="kply_inner">
+                <div class="kepu_title">
+                    <div class="kepu_title_des">
+                        失眠抑郁问题科普
+                    </div>
+                    <div>
+                        <img src="../assets/kepu/title_right.png" />
+                    </div>
+                </div>
+                <div class="kply_inner_duan1">
+                    对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
+                    所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
+                    像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
+                </div>
+                <div class="kply_inner_duan1">
+                    睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
+                    阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
+                    眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
+                </div>
+                <img width="100%" style="margin-top:40px" src="../assets/kepu/bg1.png" />
+                <div class="kply_inner_duan1">
+                    对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
+                    所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
+                    像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
+                </div>
+                <div class="kply_inner_duan1">
+                    睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
+                    阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
+                    眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
+                </div>
+                <img width="100%" style="margin-top:40px" src="../assets/kepu/bg2.png" />
+            </div>
+
+        </div>
+
+    </div>
+
+
+</template>
+<style lang="scss" scoped>
+.home_header_out {
+    // 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: #FAFAFA; //估计是需要动态
+
+    //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
+    .home_header_inner {
+        min-height: 1;
+        left: 0;
+        right: 0;
+        margin: auto;
+        // height: 100px;
+        width: 1200px;
+
+        .xlts_img {
+            height: 80px;
+        }
+    }
+
+    .kply {
+        width: 100%;
+        margin-top: 100px;
+        // background-color: #FAFAFA;
+
+        .kply_inner {
+            padding: 20px 20px;
+            left: 0;
+            right: 0;
+            margin: auto;
+            width: 1200px;
+            background-color: #ffffff;
+            border-radius: 40px;
+            // height: 1000px;
+
+            // margin-bottom: 60px;
+            .kepu_title {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+
+                .kepu_title_des {
+
+                    width: 406px;
+
+                    font-family: Alibaba PuHuiTi 2.0;
+                    font-weight: 600;
+                    font-size: 44px;
+                    color: #48D68E;
+
+                }
+
+                img {
+                    width: 480px;
+                }
+            }
+
+            .kply_inner_duan1 {
+                margin-top: 40px;
+                font-family: Alibaba PuHuiTi 2.0;
+                font-weight: normal;
+                font-size: 24px;
+                color: #333333;
+                line-height: 40px;
+                letter-spacing: 4px;
+            }
+        }
+    }
+
+
+}
+
+
+
+.home_mid {
+    // background-color: blanchedalmond;
+    width: 1200px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    margin-top: 40px;
+    // position: relative;
+
+
+
+
+    .kepu_title {
+        text-align: center;
+
+        font-size: 50px;
+        color: #111111;
+        line-height: 95px;
+
+        // width: 100%;
+        // left: 0;
+        // right: 0;
+        // margin: auto
+    }
+
+    .kepu_title_sub {
+        margin-top: 30px;
+        text-align: center;
+        font-size: 28px;
+        color: #48D68E;
+        line-height: 26px;
+    }
+
+    .man1_group {
+        margin-top: 60px;
+        height: 100%;
+        display: flex;
+
+        .man1 {
+            position: relative;
+            width: 327px;
+            // height: 100%;
+
+            // height: 100%
+            .man1_img {
+                position: absolute;
+                bottom: 0;
+                /* bottom: 0px; */
+                /* height: auto; */
+                width: 100%;
+                left: 100px
+            }
+
+        }
+
+        .des {
+            border: #48D68E solid 5px;
+            border-radius: 40px;
+            padding: 20px;
+            letter-spacing: 6px;
+            flex: 1;
+
+            .des_inner {
+                border: 1px dashed #48D68E;
+                border-radius: 40px;
+                padding-bottom: 40px;
+                padding-top: 30px;
+                padding-left: 100px;
+                padding-right: 20px;
+                letter-spacing: 6px;
+                font-weight: normal;
+                font-size: 24px;
+                color: #333333;
+                line-height: 40px;
+            }
+        }
+    }
+
+    .man2_group {
+        margin-top: 60px;
+        height: 100%;
+        display: flex;
+
+        .man2 {
+            position: relative;
+            width: 327px;
+            // height: 100%;
+
+            // height: 100%
+            .man2_img {
+                position: absolute;
+                bottom: 0;
+                /* bottom: 0px; */
+                /* height: auto; */
+                width: 100%;
+                left: -100px
+            }
+
+        }
+
+        .des2 {
+            border: #48D68E solid 5px;
+            border-radius: 40px;
+            padding: 20px;
+            letter-spacing: 6px;
+            flex: 1;
+
+            .des2_inner {
+                border: 1px dashed #48D68E;
+                border-radius: 40px;
+                padding-bottom: 40px;
+                padding-top: 30px;
+                padding-left: 20px;
+                padding-right: 100px;
+                letter-spacing: 6px;
+                font-weight: normal;
+                font-size: 24px;
+                color: #333333;
+                line-height: 40px;
+            }
+        }
+    }
+
+    .get_more {
+        text-align: center;
+
+        img {
+            width: 300px;
+            margin-top: 60px;
+            margin-bottom: 60px;
+        }
+    }
+}
+
+// .home_footer_out {
+//     width: 100%;
+//     background-color: #000000;
+// }</style>