修改首页--首页改为组件

src/components/CpmdFooter.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+</script>
+<template>
+    <!-- 此处最大宽度是1200px -->
+    <div class="home_footer_inner">
+        <div class="home_footer_icon">
+            <div class="home_footer_company">
+                <img width="200px" src="../assets/home/ding_xiang.png" />
+            </div>
+
+            <div class="home_footer_waizhan">
+                <img width="30px" style="margin-right:40px" src="../assets/home/dou_yin.png" />
+                <img width="40px" src="../assets/home/we_b.png" />
+            </div>
+        </div>
+
+        <div class="home_footer_mi">
+            <div class="home_footer_fo_des">关于我们</div>
+            <div class="home_footer_fo_des">我们的服务</div>
+            <div class="home_footer_fo_des">免费检测</div>
+            <div class="home_footer_fo_des">游戏内容</div>
+            <div class="home_footer_fo_des">联系我们</div>
+        </div>
+        <div class="home_footer_mi">
+            <div class="home_footer_fo_des">关于我们</div>
+            <div class="home_footer_fo_des">我们的服务</div>
+            <div class="home_footer_fo_des">免费检测</div>
+            <div class="home_footer_fo_des">游戏内容</div>
+            <div class="home_footer_fo_des">联系我们</div>
+        </div>
+        <div class="home_footer_mi">
+            <div class="home_footer_fo_des">关于我们</div>
+            <div class="home_footer_fo_des">我们的服务</div>
+            <div class="home_footer_fo_des">免费检测</div>
+            <div class="home_footer_fo_des">游戏内容</div>
+            <div class="home_footer_fo_des">联系我们</div>
+        </div>
+        <div style="width:1200px;height:10px;background-color: #ffffff;">
+        </div>
+        <div class="home_footer_fo">
+            <div class="home_footer_fo_des">隐私</div>
+            <div class="home_footer_fo_des">使用条款</div>
+            <div class="home_footer_fo_des">版本所有媒体</div>
+        </div>
+    </div>
+</template>
+<style lang="scss">
+.home_footer_inner {
+    padding: 30px 0px;
+    background-color: #000000;
+    // position: absolute;
+    // left: 0;
+    // right: 0;
+    margin: auto;
+    width: 1200px;
+
+    .home_footer_icon {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .home_footer_company {
+            flex: 1;
+        }
+
+        .home_footer_waizhan {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .home_footer_fo {
+        margin-top: 20px;
+        justify-content: center;
+        display: flex;
+        color: #ffffff;
+
+        // margin: auto;
+        .home_footer_fo_des {
+            margin: 0px 20px;
+        }
+    }
+
+    .home_footer_mi {
+        margin-top: 20px;
+        justify-content: space-around;
+        display: flex;
+        color: #ffffff;
+        margin-bottom: 20px;
+
+        // margin: auto;
+        .home_footer_fo_des {
+            margin: 0px 20px;
+        }
+    }
+}
+</style>

src/components/CpmdHeader.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 // import url from '../assets/home/trademark.png';
+//选中的索引
+const activeIndex = ref<string>('1')
+
+//选中菜单事件
+const handleSelect = (key: string, keyPath: []) => {
+    // console.log(key, keyPath)
+    activeIndex.value = key;
+}
 </script>
 
 <template>
@@ -8,15 +16,95 @@ import { ref } from 'vue'
         <div class="header_image">
             <img style="width: 239px; height: 55px" src="../assets/home/trademark.png"></img>
         </div>
-        <div>首页</div>
-        <div>科普乐园</div>
-        <div>留言社区</div>
-        <div>测试计划</div>
-        <div>测试记录</div>
-        <div>登录账号</div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" style="display: flex;" mode="horizontal"
+            :ellipsis="false" @select="handleSelect">
+            <el-menu-item index="1">首页</el-menu-item>
+            <el-menu-item index="2">科普乐园</el-menu-item>
+            <el-menu-item index="3">留言社区</el-menu-item>
+            <!-- <el-badge :value="200" :max="99" class="item">
+                <el-menu-item index="4">测试计划</el-menu-item>
+            </el-badge> -->
+            <el-menu-item index="4">
+                <div class="badge_custom">
+                    122
+                </div>
+                <span>测试计划</span>
+            </el-menu-item>
+            <el-menu-item index="5">测试记录</el-menu-item>
+        </el-menu>
+
+        <div class="login_button_bg">
+            <img width="20px" src="../assets/home/button_login.png" />
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <span>登录账号</span>
+        </div>
+        <!-- <div class="menu_gen">首页</div>
+        <div class="menu_gen">科普乐园</div>
+        <div class="menu_gen">留言社区</div>
+        <div class="menu_gen">测试计划</div>
+        <div class="menu_gen">测试记录</div>
+        <div class="menu_gen">登录账号</div> -->
     </div>
 </template>
 <style lang="scss" scoped>
+.badge_custom {
+    position: absolute;
+    background-color: #48D68E;
+    left: 90px;
+    top: 0px;
+
+    line-height: 18px;
+    color: 10px;
+    padding: 0px 8px;
+    font-weight: 300;
+    font-size: 10px;
+    color: #ffffff;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+}
+
+//整个菜单底部样式
+.el-menu--horizontal.el-menu {
+
+    border-bottom: 0px solid var(--el-menu-border-color);
+    display: flex;
+    align-items: center;
+}
+
+.el-menu--horizontal>.el-menu-item {
+    width: 120px;
+    height: 40px;
+    align-items: center;
+    border-bottom: 0px solid transparent;
+    color: var(--el-menu-text-color);
+    display: inline-flex;
+    // height: 100%;
+    justify-content: center;
+    align-items: center;
+    border-radius: 12px;
+    margin: 0;
+}
+
+.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
+.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+    background-color: #48D68E;
+    color: #000000 !important;
+    border-radius: 12px;
+}
+
+//激活某个菜单时   底部样式
+.el-menu--horizontal>.el-menu-item.is-active {
+    border-bottom: 0px solid var(--el-menu-active-color);
+    // color: var(--el-menu-active-color) !important;
+    color: #000000 !important;
+    background: #48D68E;
+    border-radius: 12px;
+    height: 40px;
+    font-weight: 700;
+
+}
+
 .header_p {
     margin-top: 20px;
     display: flex;
@@ -29,5 +117,30 @@ import { ref } from 'vue'
         // flex: 1
         margin-right: 100px;
     }
+
+    .login_button_bg {
+        background-color: #000000;
+        border-radius: 12px;
+        border: 3px solid #48D68E;
+        color: #ffffff;
+        padding: 8px 20px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+    }
+
+    .flex-grow {
+        flex: 1;
+    }
+
+    .menu_gen {
+        width: 80px;
+        height: 20px;
+        font-family: Alibaba PuHuiTi 2.0;
+        font-weight: normal;
+        font-size: 20px;
+        color: #333333;
+        line-height: 26px
+    }
 }
 </style>

src/router/index.ts

@@ -1,11 +1,33 @@
+
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import { defineAsyncComponent } from 'vue'
+
+// import Home from '@/views/Home.vue'
+// import HomeView from '@/views/HomeView.vue'
+//路由异步加载
+//主页框架
+const Home = () => import('@/views/Home.vue')
+
+//首页详细内容
+const HomeView = () => import('@/views/HomeView.vue')
 
+// 组件异步懒加载方法
+// const _import = (path: string) =>
+//   defineAsyncComponent(() => import(`../views/${path}.vue`))
 const routes = [
   {
-    path: '/',
+    path: '/home',
     name: 'home',
-    component: HomeView
+    // component: Home,
+    component: Home,
+    redirect: "/home/homeView",
+    children: [{
+      path: 'homeView',
+      name: 'homeView',
+      component: HomeView
+      // component: _import('HomeView')
+    }]
+    // component: HomeView
   },
 
 ]

src/views/Home.vue

@@ -0,0 +1,560 @@
+<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()
+    //进到界面开始轮询
+})
+//界面销毁函数
+
+
+//轮旋切换页面的方法
+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
+        }
+
+
+    }, 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>
+
+<template>
+    <!-- 最外边宽度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 />
+        </div>
+
+    </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;
+    }
+}
+</style>

src/views/HomeView.vue

@@ -1,18 +1,46 @@
 <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()
+  //进到界面开始轮询
 })
+//界面销毁函数
+
+
+//轮旋切换页面的方法
+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
+    }
+
+
+  }, 3000)
+}
+
 const setHeight = () => {
   console.log('----------------------------------------------')
   //-------设置背景图的高度---------//
@@ -20,456 +48,501 @@ const setHeight = () => {
   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>
 
 <template>
   <!-- 最外边宽度100% -->
-  <div class="home_view">
-    <!-- 此处算是头部图片包括图片宽度是100% -->
-    <div class="home_header_out" ref="homeHeaderOut" :style="{ height: height + 'px' }">
-      <!-- 此处宽度最小 头部包含导航栏为1200 -->
-      <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" src="../assets/home/student1_text.png" />
-              <img class="student1" src="../assets/home/student1_default.png" />
-            </div>
-            <div class="student2_group">
-              <img class="student2_text" src="../assets/home/student2_text.png" />
-              <img class="student2" src="../assets/home/student2_default.png" />
-            </div>
-
-            <img class="student3_text" src="../assets/home/student3_text.png" />
-            <img class="student3" src="../assets/home/student3_default.png" />
-            <img class="student4_text" src="../assets/home/student4_text.png" />
-            <img class="student4" src="../assets/home/student4_default.png" />
+
+  <div class="home_header_out" ref="homeHeaderOut" :style="{ height: height + 'px' }">
+    <!-- 此处宽度最小 头部包含导航栏为1200 -->
+    <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>
-    <!-- 此处是中间部分 最大宽度是1200px-->
-    <div class="home_mid">
-      <div class="kepu_title">科普小课堂</div>
-      <div class="kepu_title_sub">心灵成长不迷茫，科普小课堂为你点亮前行的方向</div>
-      <div class="man1_group">
-        <div class="man1">
-          <img class="man1_img" src="../assets/home/people1.png" />
-        </div>
-        <div class="des">
-          <div class="des_inner">
-            &nbsp;&nbsp;&nbsp;&nbsp;大学生的焦虑情绪往往源自多重压力的叠加效应，其中学业负担与未来职业的不确定性占据主导地位。
-            一方面，大学教育的高标准与快节奏，如繁重的课程任务、竞争激烈的考试、科研项目的压力，以及对学术成就的追求，
-            都无形中增加了学生的心理负担，让他们时常处于紧张与不安之中。另一方面，步入社会的临近，使得就业市场的严酷现实成为心头大石，
-            学生们担忧自己的能力是否足够，能否在毕业后顺利找到理想工作，这种对未来的不确定感进一步加剧了焦虑情绪。
-          </div>
+    <div class="home_mid_plan_des" ref="plan_jihua">
+      <div class="home_mid_plan_close">
+        <img style="right:0" width="20px" src="../assets/home/close.png" />
+      </div>
 
-        </div>
+      <div class="home_mid_plan_title">测试任务</div>
+      <div class="home_mid_plan_d">你的<span class="home_mid_plan_font">测试计划</span>中有新的<span
+          class="home_mid_plan_font">测试任务</span>，赶紧点击下方按钮去看看吧！
       </div>
-      <div class="man2_group">
-
-        <div class="des2">
-          <div class="des2_inner">
-            &nbsp;&nbsp;&nbsp;&nbsp;
-            失眠，对于许多大学生而言，已成为一种常见的困扰，它不仅影响睡眠质量，还可能波及到日常的学习效率与生活质量。
-            究其原因，多重因素交织其中。首先，学业压力无疑是首当其冲的罪魁祸首。
-            大学生活充满了挑战，无论是课程作业的紧迫、考试复习的重负，还是科研项目的压力，都可能让学生陷入焦虑与紧张之中，这种心理状态直接转化为夜晚辗转反侧的失眠。
-            其次，快节奏的生活方式与不规律的作息习惯也难辞其咎。深夜赶工、晨早赶课，加上社交媒体与电子产品的诱惑，打乱了生物钟的正常节律，使身体难以在需要的时候自然进入睡眠状态。
-            再者，生活环境的噪音与光线污染，或是室友的作息差异，也可能成为影响睡眠质量的外部因素。
-          </div>
+      <div class="home_mid_plan_button">
+        <div class="see_button">去看看</div>
+      </div>
+    </div>
+  </div>
+  <div class="home_mid">
 
-        </div>
-        <div class="man2">
-          <img class="man2_img" src="../assets/home/people2.png" />
-        </div>
+    <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="man1_group">
-        <div class="man1">
-          <img class="man1_img" src="../assets/home/people3.png" />
+      <div class="des">
+        <div class="des_inner">
+          &nbsp;&nbsp;&nbsp;&nbsp;大学生的焦虑情绪往往源自多重压力的叠加效应，其中学业负担与未来职业的不确定性占据主导地位。
+          一方面，大学教育的高标准与快节奏，如繁重的课程任务、竞争激烈的考试、科研项目的压力，以及对学术成就的追求，
+          都无形中增加了学生的心理负担，让他们时常处于紧张与不安之中。另一方面，步入社会的临近，使得就业市场的严酷现实成为心头大石，
+          学生们担忧自己的能力是否足够，能否在毕业后顺利找到理想工作，这种对未来的不确定感进一步加剧了焦虑情绪。
         </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="get_more">
-        <img src="../assets/home/get_more.png" />
+      <div class="man2">
+        <img class="man2_img" src="../assets/home/people2.png" />
       </div>
     </div>
-
-    <!-- 此处是底部部分最长宽度是100% -->
-    <div class="home_footer_out">
-      <!-- 此处最大宽度是1200px -->
-      <div class="home_footer_inner">
-        <div class="home_footer_icon">
-          <div class="home_footer_company">
-            <img width="200px" src="../assets/home/ding_xiang.png" />
-          </div>
-
-          <div class="home_footer_waizhan">
-            <img width="30px" style="margin-right:40px" src="../assets/home/dou_yin.png" />
-            <img width="40px" src="../assets/home/we_b.png" />
-          </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 class="home_footer_mi">
-          <div class="home_footer_fo_des">关于我们</div>
-          <div class="home_footer_fo_des">我们的服务</div>
-          <div class="home_footer_fo_des">免费检测</div>
-          <div class="home_footer_fo_des">游戏内容</div>
-          <div class="home_footer_fo_des">联系我们</div>
-        </div>
-        <div class="home_footer_mi">
-          <div class="home_footer_fo_des">关于我们</div>
-          <div class="home_footer_fo_des">我们的服务</div>
-          <div class="home_footer_fo_des">免费检测</div>
-          <div class="home_footer_fo_des">游戏内容</div>
-          <div class="home_footer_fo_des">联系我们</div>
-        </div>
-        <div class="home_footer_mi">
-          <div class="home_footer_fo_des">关于我们</div>
-          <div class="home_footer_fo_des">我们的服务</div>
-          <div class="home_footer_fo_des">免费检测</div>
-          <div class="home_footer_fo_des">游戏内容</div>
-          <div class="home_footer_fo_des">联系我们</div>
-        </div>
-        <div style="width:1200px;height:10px;background-color: #ffffff;">
-        </div>
-        <div class="home_footer_fo">
-          <div class="home_footer_fo_des">隐私</div>
-          <div class="home_footer_fo_des">使用条款</div>
-          <div class="home_footer_fo_des">版本所有媒体</div>
-        </div>
       </div>
     </div>
-
+    <div class="get_more">
+      <img src="../assets/home/get_more.png" />
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
-.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_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 {
-            position: absolute;
-            bottom: -62%;
-            left: -8%;
-            height: 52%;
-          }
-
-          .student1_text {
-            position: absolute;
-            bottom: -42%;
-            left: -86%;
-            height: 80%;
-          }
-        }
+.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%;
+}
 
 
-        .student2_group {
-          position: absolute;
-          bottom: 27%;
-          left: 34%;
-          height: 200px;
-          width: 200px;
-
-          .student2 {
-            position: absolute;
-            bottom: -1%;
-            left: 72%;
-            height: 76%;
-          }
-
-          .student2_text {
-            position: absolute;
-            bottom: 60%;
-            left: -8%;
-            height: 77%;
-          }
-        }
 
+.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;
 
-        .student3 {
-          position: absolute;
-          bottom: 5%;
-          left: 62%; // w
-          height: 40%;
-        }
+    .home_mid_plan_close {
+      cursor: pointer;
+      text-align: right;
+    }
 
-        .student3_text {
-          position: absolute;
-          bottom: 44%;
-          left: 61%;
-          height: 40%;
-        }
+    .home_mid_plan_title {
+      height: 38px;
+      font-weight: normal;
+      font-size: 20px;
+      font-weight: 700;
+      color: #000000;
+      // line-height: 95px;
+    }
 
-        .student4 {
-          position: absolute;
-          bottom: 30%;
-          left: 89%; // w
-          height: 40%;
-        }
+    .home_mid_plan_d {
+      height: 38px;
+      font-weight: normal;
+      font-size: 16px;
+      font-weight: 500;
+      color: #000000;
 
-        .student4_text {
-          position: absolute;
-          bottom: 61%;
-          left: 89%;
-          height: 40%;
-        }
+      // 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_mid {
-    // background-color: blanchedalmond;
-    width: 1200px;
+
+
+  .home_header_inner {
+    // position: absolute;
+    //需要水平居中
+    // top: 0;
+    // bottom: 0;
+    min-height: 1;
     left: 0;
     right: 0;
     margin: auto;
-    margin-top: 40px;
-
-    .kepu_title {
-      text-align: center;
-
-      font-size: 50px;
-      color: #111111;
-      line-height: 95px;
+    height: 100px;
+    width: 1200px;
 
+    .xlts_img {
+      height: 36%;
+      //还剩百分之64%
       // 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;
-    }
+    .chart_student {
+      height: 64%;
+      position: relative;
 
-    .man1_group {
-      margin-top: 60px;
-      height: 100%;
-      display: flex;
+      .student1_group {
+        position: absolute;
+        bottom: 50%;
+        left: 22%;
+        height: 200px;
+        width: 200px;
 
-      .man1 {
-        position: relative;
-        width: 327px;
-        // height: 100%;
-
-        // height: 100%
-        .man1_img {
+        .student1 {
+          cursor: pointer;
           position: absolute;
-          bottom: 0;
-          /* bottom: 0px; */
-          /* height: auto; */
-          width: 100%;
-          left: 100px
+          bottom: -62%;
+          left: -8%;
+          height: 52%;
         }
 
-      }
-
-      .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;
+        .student1_text {
+          cursor: pointer;
+          position: absolute;
+          bottom: -42%;
+          left: -86%;
+          height: 80%;
         }
       }
-    }
 
-    .man2_group {
-      margin-top: 60px;
-      height: 100%;
-      display: flex;
 
-      .man2 {
-        position: relative;
-        width: 327px;
-        // height: 100%;
+      .student2_group {
+        position: absolute;
+        bottom: 27%;
+        left: 34%;
+        height: 200px;
+        width: 200px;
 
-        // height: 100%
-        .man2_img {
+        .student2 {
+          cursor: pointer;
           position: absolute;
-          bottom: 0;
-          /* bottom: 0px; */
-          /* height: auto; */
-          width: 100%;
-          left: -100px
+
+          bottom: -1%;
+          left: 72%;
+          height: 76%;
         }
 
-      }
+        .student2_text {
+          cursor: pointer;
+          position: absolute;
+          bottom: 60%;
 
-      .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;
+          left: -8%;
+          height: 77%;
         }
       }
-    }
 
-    .get_more {
-      text-align: center;
 
-      img {
-        width: 300px;
-        margin-top: 60px;
-        margin-bottom: 60px;
+      .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_footer_out {
-    width: 100%;
-    background-color: #000000;
+.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;
+    }
+  }
 
-    .home_footer_inner {
-      padding: 30px 0px;
-      background-color: #000000;
-      // position: absolute;
-      // left: 0;
-      // right: 0;
-      margin: auto;
-      width: 1200px;
 
-      .home_footer_icon {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
 
-        .home_footer_company {
-          flex: 1;
-        }
+  .kepu_title {
+    text-align: center;
 
-        .home_footer_waizhan {
-          display: flex;
-          align-items: 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
       }
 
-      .home_footer_fo {
-        margin-top: 20px;
-        justify-content: center;
-        display: flex;
-        color: #ffffff;
+    }
 
-        // margin: auto;
-        .home_footer_fo_des {
-          margin: 0px 20px;
-        }
+    .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
       }
 
-      .home_footer_mi {
-        margin-top: 20px;
-        justify-content: space-around;
-        display: flex;
-        color: #ffffff;
-        margin-bottom: 20px;
+    }
 
-        // margin: auto;
-        .home_footer_fo_des {
-          margin: 0px 20px;
-        }
+    .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>