修改测试计划测试记录

package-lock.json

@@ -9,9 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.7.2",
+        "echarts": "^5.5.1",
         "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"
@@ -2384,6 +2384,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
+      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.1",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.1.tgz",
@@ -3756,49 +3770,6 @@
         }
       }
     },
-    "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",
@@ -4550,6 +4521,19 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
+      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   }
 }

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "axios": "^1.7.2",
+    "echarts": "^5.5.1",
     "element-plus": "^2.7.7",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",

src/components/CpmdHeader.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import router from '@/router';
+// import router from '@/router';
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 
 import { menuStatusStore } from '@/stores';
 // import url from '../assets/home/trademark.png';
@@ -14,15 +16,19 @@ activeIndex.value = menuStatus.activeIndex
 
 //选中菜单事件
 const handleSelect = (key: string, keyPath: []) => {
-    // console.log(key, keyPath)
+    console.log(key, keyPath)
     menuStatus.saveActiveIndex(key)
     activeIndex.value = key;
     if (key == '1') {
-        router.push({ name: 'homeView', params: { id: 1 } })
+        router.push({ name: 'homeView' })
     } else if (key == '2') {
-        router.push({ name: 'popularizationScience', params: { id: 1 } })
+        router.push({ name: 'popularizationScience' })
     } else if (key == '3') {
-        router.push({ name: 'community', params: { id: 1 } })
+        router.push({ name: 'community', })
+    } else if (key == '4') {
+        router.push({ name: 'plan', })
+    } else if (key == '5') {
+        router.push({ name: 'testRecord' })
     }
     // menuStatus.saveActiveIndex(key)
 

src/router/index.ts

@@ -42,6 +42,21 @@ const routes = [
       name: 'community',
       component: () => import('@/views/Community.vue')
 
+    }, {
+      path: 'plan',
+      name: 'plan',
+      component: () => import('@/views/Plan.vue')
+
+    }, {
+      path: 'testRecord',
+      name: 'testRecord',
+      component: () => import('@/views/TestRecord.vue')
+
+    }, {
+      path: 'report/:id',
+      name: 'report',
+      component: () => import('@/views/Report.vue')
+
     }
     ]
     // component: HomeView

src/stores/modules/menuStatus.ts

@@ -1,32 +1,3 @@
-// //引入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'

src/views/Community.vue

@@ -22,44 +22,19 @@ 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)
+
 })
 
 
@@ -77,39 +52,46 @@ onUnmounted(() => {
         </div>
         <div class="kply">
             <div class="kply_inner">
-                <div style="height:500px">
-                    留言社区
-                </div>
-                <!-- <div class="kepu_title">
-                    <div class="kepu_title_des">
-                        失眠抑郁问题科普
+                <div style="padding :20px 40px">
+                    <div class="kepu_title">
+                        <div class="kepu_title_des">
+                            留言社区
+                        </div>
+                        <div>
+                            <div class="home_mid_plan_button">
+
+                                <div class="pub_button"> <img width="30px"
+                                        src="../assets/kepu/pub.png" />&nbsp;&nbsp;发布留言
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div>
-                        <img src="../assets/kepu/title_right.png" />
+                    <!-- //留言内容 -->
+                    <div class="com_out">
+                        <div class="com_title">
+                            <img src="../assets/kepu/man.png" />
+                            <div class="com_des">
+                                <div class="com_name">
+                                    李武
+                                </div>
+                                <div class="com_time">
+                                    2024/07/23 20:05:24
+                                </div>
+                            </div>
+                        </div>
+                        <div class="com_content">
+                            请根据您最近一个月的实际情况，选择最符合自己的选项。所有陈述都无正确和错误之分。所以请您不要再三思考，要根据第一反应诚实作答。
+                            选择最符合自己的选项。所有陈述都无正确和错误之分。所以请您不要再三思考，要根据第一反应诚实作答
+                        </div>
+                        <div class="com_yan">
+                            <img height="40px" src="../assets/kepu/yan.png" />
+                            <span>42</span>
+                        </div>
+
+
                     </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>
@@ -149,46 +131,117 @@ onUnmounted(() => {
         // background-color: #FAFAFA;
 
         .kply_inner {
-            padding: 20px 20px;
             left: 0;
             right: 0;
             margin: auto;
             width: 1200px;
+            // padding: 20px 20px;
             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;
+                    font-size: 30px;
+                    color: #000000;
 
                 }
 
-                img {
-                    width: 480px;
+                .home_mid_plan_button {
+                    width: 100%;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: end;
+
+                    // text-align: right;
+                    .pub_button {
+                        cursor: pointer;
+                        // width: 100px;
+                        border-radius: 12px;
+                        border: 3px solid #48D68E;
+                        color: #ffffff;
+                        background-color: #000000;
+
+                        padding: 8px 30px;
+                        cursor: pointer;
+                        display: flex;
+                        align-items: center;
+                    }
                 }
+
             }
 
-            .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;
+            .com_out {
+                min-height: 500px;
+
+
+                .com_title {
+                    margin-top: 40px;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+
+                    img {
+                        width: 66px
+                    }
+
+                    .com_des {
+                        margin-left: 5px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+                        height: 66px;
+
+                        .com_name {
+
+                            font-weight: normal;
+                            font-size: 20px;
+                            color: #222222;
+
+                        }
+
+                        .com_time {
+                            font-weight: normal;
+                            font-size: 16px;
+                            color: #000000;
+                            opacity: 0.4;
+
+                        }
+
+                    }
+
+
+                }
+
+                .com_content {
+                    letter-spacing: 3px;
+                    margin-top: 20px;
+                    background-color: #F7F7F7;
+                    padding: 10px 20px;
+                    border-radius: 15px;
+                    line-height: 24px;
+                }
+
+                .com_yan {
+
+                    margin-top: 20px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: end;
+
+                    span {
+                        margin-left: 8px;
+                    }
+                }
             }
         }
     }

src/views/Plan.vue

@@ -0,0 +1,340 @@
+<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('4')
+
+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(() => {
+
+    //进到界面开始轮询
+})
+//界面销毁函数
+
+
+//退出页面销毁 方法
+onUnmounted(() => {
+
+})
+
+
+
+
+</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>
+
+                    <!-- 测试记录列表 -->
+                    <div class="test_record_out">
+                        <div class="record_tip">
+                            <span class="record_tip_out"><span class="record_tip_inner">创建时间：</span>2023/07/20</span>
+                            <span><span class="record_tip_inner">创建时间：</span>2023/07/26</span>
+                        </div>
+                        <div class="test_record">
+                            <img src="../assets/kepu/task_1.png" />
+                            <span>科技学院普查计划</span>
+                        </div>
+                        <div class="test_time">
+                            <span>请根据您最近一个月的实际情况，选择最符合自己的选项。所有陈述都无正确和错误之分。所以请您不要再三思考，要根据第一反应诚实作答。</span>
+
+                        </div>
+                        <div class="record_out">
+                            <img class="record_img" src="../assets/kepu/xlwht_active.png">
+                            <img class="record_diceng" src="../assets/kepu/diceng.png">
+                            <img class="record_img" src="../assets/kepu/czscz_default.png">
+                            <img class="record_diceng" src="../assets/kepu/diceng.png">
+                            <img class="record_img" src="../assets/kepu/cdzkds_default.png">
+                            <img class="record_diceng" src="../assets/kepu/diceng.png">
+                            <img class="record_img" src="../assets/kepu/qxbd_default.png">
+                        </div>
+                        <div class="start_button_out">
+                            <div class="start_button_self">开始测试</div>
+                        </div>
+                    </div>
+                    <!-- 测试记录列表 -->
+                    <div class="test_record_out">
+                        <div class="record_tip">
+                            <span class="record_tip_out"><span class="record_tip_inner">创建时间：</span>2023/07/20</span>
+                            <span><span class="record_tip_inner">创建时间：</span>2023/07/26</span>
+                        </div>
+                        <div class="test_record">
+                            <img src="../assets/kepu/task_1.png" />
+                            <span>科技学院普查计划</span>
+                        </div>
+                        <div class="test_time">
+                            <span>请根据您最近一个月的实际情况，选择最符合自己的选项。所有陈述都无正确和错误之分。所以请您不要再三思考，要根据第一反应诚实作答。</span>
+
+                        </div>
+                        <div class="record_out">
+                            <img class="record_img" src="../assets/kepu/xlwht_active.png">
+                            <img class="record_diceng" src="../assets/kepu/diceng.png">
+                            <img class="record_img" src="../assets/kepu/czscz_default.png">
+                            <img class="record_diceng" src="../assets/kepu/diceng.png">
+                            <img class="record_img" src="../assets/kepu/cdzkds_default.png">
+                            <img class="record_diceng" src="../assets/kepu/diceng.png">
+                            <img class="record_img" src="../assets/kepu/qxbd_default.png">
+                        </div>
+                        <div class="start_button_out">
+                            <div class="start_button_self">开始测试</div>
+                        </div>
+                    </div>
+
+
+                </div>
+
+            </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: #FAFAFA;
+            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 {
+                    font-family: Alibaba PuHuiTi 2.0;
+                    font-weight: 600;
+                    font-size: 30px;
+                    color: #000000;
+
+                }
+
+                .home_mid_plan_button {
+                    width: 100%;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: end;
+
+                    // text-align: right;
+                    .pub_button {
+                        cursor: pointer;
+                        // width: 100px;
+                        border-radius: 12px;
+                        border: 3px solid #48D68E;
+                        color: #ffffff;
+                        background-color: #000000;
+
+                        padding: 8px 30px;
+                        cursor: pointer;
+                        display: flex;
+                        align-items: center;
+                    }
+                }
+
+            }
+
+            .com_out {
+                min-height: 500px;
+                padding: 20px 20px;
+            }
+
+            .test_record {
+                margin-top: 20px;
+                display: flex;
+                align-items: center;
+
+                img {
+                    width: 70px;
+                }
+
+                span {
+                    margin-left: 20px;
+                    font-size: 30px;
+                    font-weight: 700;
+                    letter-spacing: 3px;
+                }
+            }
+
+            .test_time {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+                letter-spacing: 3px;
+                line-height: 30px;
+
+                span {
+                    color: #000000;
+                    opacity: 0.4;
+                    font-size: 20px;
+                }
+
+                div {
+                    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;
+                }
+            }
+
+            .record_out {
+                margin-top: 30px;
+                background-color: #F7F7F7;
+
+                padding: 30px 40px;
+                border-radius: 40px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                .record_diceng {
+                    width: 80px;
+                    margin-left: 10px;
+                    margin-right: 10px;
+                }
+
+                .record_img {
+                    cursor: pointer;
+                    width: 180px;
+                }
+
+            }
+
+            .start_button_out {
+                margin-top: 40px;
+                margin-bottom: 40px;
+                display: flex;
+                flex-direction: row;
+                justify-content: end;
+
+                .start_button_self {
+                    cursor: pointer;
+                    // width: 100px;
+                    border-radius: 12px;
+                    border: 3px solid #48D68E;
+                    color: #ffffff;
+                    background-color: #000000;
+                    margin-right: 20px;
+                    padding: 8px 60px;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+
+                }
+            }
+
+            .test_record_out {
+                margin-top: 40px;
+                padding: 20px 40px;
+                background-color: #ffffff;
+                border-radius: 40px;
+                position: relative;
+
+                .record_tip {
+                    background-color: #FFF6DF;
+                    position: absolute;
+                    right: 0;
+                    display: flex;
+                    flex-direction: column;
+                    top: 0;
+
+                    border-top-right-radius: 40px;
+                    border-bottom-left-radius: 40px;
+                    padding: 10px 40px;
+                    color: #FFB700;
+                    font-size: 14px;
+                    font-weight: 700;
+                    letter-spacing: 2px;
+
+                    .record_tip_inner {
+                        font-size: 13px;
+                        letter-spacing: 3px;
+                    }
+
+                    .record_tip_out {
+                        margin-bottom: 4px;
+
+                        .record_tip_inner {
+                            font-size: 13px;
+                            letter-spacing: 3px;
+                        }
+
+                    }
+                }
+            }
+        }
+    }
+
+
+}
+</style>

src/views/PopularizationScience.vue

@@ -22,44 +22,15 @@ 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)
+
 })
 
 
@@ -77,36 +48,44 @@ onUnmounted(() => {
         </div>
         <div class="kply">
             <div class="kply_inner">
-                <div class="kepu_title">
-                    <div class="kepu_title_des">
-                        失眠抑郁问题科普
+                <div style="padding:20px 40px">
+                    <div class="kepu_title">
+                        <div class="kepu_title_des">
+                            失眠抑郁问题科普
+                        </div>
+                        <div>
+                            <img src="../assets/kepu/title_right.png" />
+                        </div>
                     </div>
-                    <div>
-                        <img src="../assets/kepu/title_right.png" />
+                    <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 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>
@@ -146,7 +125,7 @@ onUnmounted(() => {
         // background-color: #FAFAFA;
 
         .kply_inner {
-            padding: 20px 20px;
+
             left: 0;
             right: 0;
             margin: auto;
@@ -157,6 +136,7 @@ onUnmounted(() => {
 
             // margin-bottom: 60px;
             .kepu_title {
+
                 display: flex;
                 flex-direction: row;
                 justify-content: space-between;
@@ -164,6 +144,7 @@ onUnmounted(() => {
 
                 .kepu_title_des {
 
+
                     width: 406px;
 
                     font-family: Alibaba PuHuiTi 2.0;
@@ -175,10 +156,12 @@ onUnmounted(() => {
 
                 img {
                     width: 480px;
+
                 }
             }
 
             .kply_inner_duan1 {
+
                 margin-top: 40px;
                 font-family: Alibaba PuHuiTi 2.0;
                 font-weight: normal;
@@ -186,6 +169,7 @@ onUnmounted(() => {
                 color: #333333;
                 line-height: 40px;
                 letter-spacing: 4px;
+
             }
         }
     }

src/views/Report.vue

@@ -0,0 +1,438 @@
+<script setup lang="ts">
+//引入echarts 
+import * as echarts from 'echarts'
+
+
+import CpmdHeader from '@/components/CpmdHeader.vue';
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
+
+import { useRoute } from 'vue-router'
+
+//雷达图
+const echarts_ld = ref<any>()
+const option = reactive({
+    title: {
+        // text: 'Basic Radar Chart'
+    },
+    legend: {
+        // data: ['Allocated Budget', 'Actual Spending']
+    },
+    radar: {
+        shape: 'square', //设置雷达图形状，值有circle、square,默认为方形
+        splitNumber: 3, // 雷达图圈数设置
+        // shape: 'circle',
+        indicator: [
+            { name: '阳光指数', max: 100 },
+            { name: '社交能力', max: 100 },
+            { name: '爱情观', max: 100 },
+            { name: '人生观', max: 100 },
+            { name: '自律能力', max: 100 },
+            { name: '应变能力', max: 100 }
+        ],
+        name: { //修改indicator文字的颜色
+            textStyle: {
+                color: "#999999"
+            }
+        },
+        // 设置雷达图中间射线的颜色
+        axisLine: {
+            lineStyle: {
+                color: '#FFBA92',
+            },
+        },
+        // splitArea: {  //设置图表颜色，show的值为true
+        //     show: true,
+        //     areaStyle: {
+        //         // color:"#c1ddf8", //一般设置方式
+        //         //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
+        //         //a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
+        //         //b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
+        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 0, [
+        //             { offset: 1, color: '#F7E1DE' }, // 0% 处的颜色 
+        //             { offset: 0, color: '#FF1E00' }// 100% 处的颜色
+        //         ], false)
+        //     }
+        // },
+        splitArea: {
+            areaStyle: {
+                color: {
+                    type: 'radial', // linear 线性渐变  radial径向渐变
+                    x: 0.4,                  // 0.5为正中心，如果小于渐变中心靠左
+                    y: 0.5,                  // 0.5为正中心，如果小于渐变中心靠上
+                    r: 1,
+                    colorStops: [{
+                        offset: 0, color: '#f16e6e' // 0% 处的颜色rgba(247, 215, 211, 1)
+                    }, {
+                        offset: 1, color: 'rgba(247, 225, 222, 1)' // 100% 处的颜色rgba(247, 225, 222, 1)
+                    }],
+                }
+            }
+        },
+
+
+
+        //网格颜色设置
+        splitLine: {
+            show: true,
+            lineStyle: {
+                width: 1,
+                color: '#FFBA92',
+            },
+        },
+
+    },
+    series: [
+        {
+            name: 'Budget vs spending',
+            type: 'radar',
+            symbolSize: 6,
+            data: [
+                {
+                    value: [90, 10, 30, 20, 10, 60],
+                    itemStyle: { //该数值区域样式设置
+                        normal: {
+                            color: 'red', //背景颜色，还需设置areaStyle   //修改线条颜色
+                            lineStyle: {
+                                color: '#FF1E00', //边框颜色
+                            },
+                        },
+                    },
+                    // name: 'Actual Spending'
+                    areaStyle: {
+                        //阴影区域背景
+                        // color: 'rgba(255, 228, 52, 0.6)'
+                        color: 'rgba(255,30,0,0.6)'
+                    }
+                }
+            ]
+        }
+    ]
+})
+
+const route = useRoute()
+//此处应该是唯一的报告ID
+const id = ref<string>('')
+//持久化设置 菜单状态
+//刚进入页面就将高度设置为页面需要的
+onMounted(() => {
+    console.log(route.params)
+    const params = route.params
+
+    id.value = params.id as string
+    //进到界面开始轮询
+
+    const myChart = echarts.init(echarts_ld.value)
+    myChart.setOption(option);
+})
+//界面销毁函数
+
+//跳转页面切换页面
+const viewReport = () => {
+
+}
+
+//轮旋切换页面的方法
+
+//退出页面销毁 方法
+onUnmounted(() => {
+
+})
+
+
+
+
+</script>
+
+<template>
+    <div class="home_header_out">
+        <div class=" home_header_inner">
+            <CpmdHeader />
+            <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 class="kply">
+            <div class="kply_inner">
+                <div style="padding: 20px 40px;">
+                    <div class="report_totol_score">
+                        <div class="report_bei">
+                            <img height="200xp" src="../assets/report/bei.png" />
+                            <div class="score">360</div>
+                        </div>
+                        <div class="totol_result_des">
+                            结论：潜力无限，未来因挑战而更加精彩。你有着巨大的成长空间，只要勇于面对挑战，不断努力，你的人生必将绽放出璀璨的光芒。
+                        </div>
+                    </div>
+                    <div class="report_echarts_out">
+                        <div ref="echarts_ld" style="width:400px;height:300px">
+
+                        </div>
+                    </div>
+
+                </div>
+
+            </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;
+
+
+        .report_top {
+            margin-top: 50px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+
+            .xlts_img {
+                width: 200px;
+            }
+
+            .report_jt {
+                display: flex;
+                flex-direction: column;
+                font-size: 50px;
+                font-weight: 700;
+                letter-spacing: 3px;
+            }
+        }
+    }
+
+    .kply {
+        width: 100%;
+        margin-top: 100px;
+        // background-color: #FAFAFA;
+
+        .kply_inner {
+            // padding: 20px 20px;
+            left: 0;
+            right: 0;
+            margin: auto;
+            width: 1200px;
+            min-height: 500px;
+
+            background-color: #ffffff;
+            border-radius: 40px;
+
+            .report_totol_score {
+                margin-top: 60px;
+                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: -40px;
+                        bottom: 0;
+                        margin: auto;
+                        color: #ffffff;
+                        font-size: 40px;
+                    }
+                }
+
+                .totol_result_des {
+                    font-size: 30px;
+                    margin-left: 50px;
+                    letter-spacing: 3px;
+                    line-height: 50px;
+                }
+            }
+
+            .report_echarts_out {
+                margin-top: 100px;
+                background-color: #F7F7F7;
+                border-radius: 40px;
+                // height: 200px;
+            }
+
+
+
+
+        }
+    }
+
+
+}
+
+
+
+.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/TestRecord.vue

@@ -0,0 +1,430 @@
+<script setup lang="ts">
+import CpmdHeader from '@/components/CpmdHeader.vue';
+import { onMounted, onUnmounted, ref } from 'vue'
+
+//持久化设置 菜单状态
+import { menuStatusStore } from '@/stores'
+// import router from '@/router';
+import { useRouter } from 'vue-router';
+const router = useRouter()
+const menuStatus = menuStatusStore();
+menuStatus.saveActiveIndex('5')
+
+
+
+
+//刚进入页面就将高度设置为页面需要的
+onMounted(() => {
+
+    //进到界面开始轮询
+})
+//界面销毁函数
+
+//跳转页面切换页面
+const viewReport = () => {
+    router.push({ name: 'report', params: { id: 'xx1000xx' } })
+}
+
+//轮旋切换页面的方法
+
+//退出页面销毁 方法
+onUnmounted(() => {
+
+})
+
+
+
+
+</script>
+
+<template>
+    <div class="home_header_out">
+        <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="padding: 20px 40px;">
+
+                    <!-- 测试记录列表 -->
+                    <div>
+                        <div class="test_record">
+                            <img src="../assets/kepu/task_1.png" />
+                            <span>科技学院普查计划</span>
+                        </div>
+                        <div class="test_time">
+                            <span>测试时间：2024/07/23 20:05:24～2024/07/28 20:05:24:</span>
+                            <div @click="viewReport">查看报告</div>
+                        </div>
+                        <div class="record_out">
+                            <div class="record_score">
+                                <span>得&nbsp;&nbsp;&nbsp;&nbsp;分：</span>
+                                <span>32.00</span>
+                            </div>
+
+                            <div class="record_result">
+                                <span>结&nbsp;&nbsp;&nbsp;&nbsp;论：</span>
+                                <span>潜力无限，未来因挑战而更加精彩。你有着巨大的成长空间，只要勇于面
+                                    对挑战，不断努力，你的人生必将绽放出璀璨的光芒。</span>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div>
+                        <div class="test_record">
+                            <img src="../assets/kepu/task_1.png" />
+                            <span>科技学院普查计划</span>
+                        </div>
+                        <div class="test_time">
+                            <span>测试时间：2024/07/23 20:05:24～2024/07/28 20:05:24:</span>
+                            <div>查看报告</div>
+                        </div>
+                        <div class="record_out">
+                            <div class="record_score">
+                                <span>得&nbsp;&nbsp;&nbsp;&nbsp;分：</span>
+                                <span>32.00</span>
+                            </div>
+
+                            <div class="record_result">
+                                <span>结&nbsp;&nbsp;&nbsp;&nbsp;论：</span>
+                                <span>潜力无限，未来因挑战而更加精彩。你有着巨大的成长空间，只要勇于面
+                                    对挑战，不断努力，你的人生必将绽放出璀璨的光芒。</span>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div>
+                        <div class="test_record">
+                            <img src="../assets/kepu/task_1.png" />
+                            <span>科技学院普查计划</span>
+                        </div>
+                        <div class="test_time">
+                            <span>测试时间：2024/07/23 20:05:24～2024/07/28 20:05:24:</span>
+                            <div>查看报告</div>
+                        </div>
+                        <div class="record_out">
+                            <div class="record_score">
+                                <span>得&nbsp;&nbsp;&nbsp;&nbsp;分：</span>
+                                <span>32.00</span>
+                            </div>
+
+                            <div class="record_result">
+                                <span>结&nbsp;&nbsp;&nbsp;&nbsp;论：</span>
+                                <span>潜力无限，未来因挑战而更加精彩。你有着巨大的成长空间，只要勇于面
+                                    对挑战，不断努力，你的人生必将绽放出璀璨的光芒。</span>
+                            </div>
+
+                        </div>
+                    </div>
+
+                </div>
+
+            </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 {
+                    font-family: Alibaba PuHuiTi 2.0;
+                    font-weight: 600;
+                    font-size: 30px;
+                    color: #000000;
+
+                }
+
+                .home_mid_plan_button {
+                    width: 100%;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: end;
+
+                    // text-align: right;
+                    .pub_button {
+                        cursor: pointer;
+                        // width: 100px;
+                        border-radius: 12px;
+                        border: 3px solid #48D68E;
+                        color: #ffffff;
+                        background-color: #000000;
+
+                        padding: 8px 30px;
+                        cursor: pointer;
+                        display: flex;
+                        align-items: center;
+                    }
+                }
+
+            }
+
+            .com_out {
+                min-height: 500px;
+                padding: 20px 20px;
+            }
+
+            .test_record {
+                margin-top: 20px;
+                display: flex;
+                align-items: center;
+
+                img {
+                    width: 70px;
+                }
+
+                span {
+                    margin-left: 20px;
+                    font-size: 30px;
+                    font-weight: 700;
+                    letter-spacing: 3px;
+                }
+            }
+
+            .test_time {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+
+                span {
+                    color: #000000;
+                    opacity: 0.4;
+                    font-size: 20px;
+                }
+
+                div {
+                    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;
+                }
+            }
+
+            .record_out {
+                margin-top: 30px;
+                background-color: #F7F7F7;
+
+                padding: 30px 40px;
+                border-radius: 40px;
+
+                .record_score {
+                    color: #48D68E;
+                    margin-bottom: 15px;
+                    font-size: 26px;
+                    letter-spacing: 3px;
+                }
+
+                .record_result {
+                    line-height: 50px;
+                    color: #48D68E;
+                    margin-bottom: 20px;
+                    font-size: 26px;
+                    letter-spacing: 3px;
+
+                }
+            }
+        }
+    }
+
+
+}
+
+
+
+.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>