修改中间件的下一页问题

src/api/login.ts

@@ -8,6 +8,7 @@ const userRegisterUrl = '/system/registerUser'
 const userLoginUrl = '/system/login'
 
 const homeUrl = ''
+const updatePasUrl = '/system/updatePassword'
 
 //首页API
 export const homeApi = (val: any) => {
@@ -45,5 +46,15 @@ export const userLoginApi = (val: any) => {
             method: 'get',
             url: `${userLoginUrl}?userNo=${val.userNo}&password=${val.password}`,
 
+        })
+}
+
+//修改密码
+export const updatePasApi = (val: any) => {
+    return http<any>(
+        {
+            method: 'get',
+            url: `${updatePasUrl}?oldPassword=${val.oldPassword}&password=${val.password}&userNo=${val.id}`,
+
         })
 }

src/components/CpmdHeader.vue

@@ -14,6 +14,8 @@ const menuStatus = menuStatusStore()
 const activeIndex = ref<string>()
 activeIndex.value = menuStatus.activeIndex
 
+const visible = ref<boolean>(false)
+
 //选中菜单事件
 const handleSelect = (key: string, keyPath: []) => {
     console.log(key, keyPath)
@@ -31,7 +33,6 @@ const handleSelect = (key: string, keyPath: []) => {
         router.push({ name: 'testRecord' })
     }
     // menuStatus.saveActiveIndex(key)
-
 }
 //点击登录按钮
 const login = () => {
@@ -48,6 +49,19 @@ const leaveMenu = () => {
     falgMenu.value = false
 }
 
+const updatePassFun = () => {
+    router.push({ name: 'updatePas' })
+}
+
+const exitFun = () => {
+    //退出登录清除缓存
+    visible.value = true
+    // userInfo.clearUserInfo()
+}
+const comT = () => {
+    visible.value = false
+    userInfo.clearUserInfo()
+}
 </script>
 
 <template>
@@ -78,10 +92,10 @@ const leaveMenu = () => {
             <span>{{ userInfo.userInfo.userName }}</span>
             <transition>
                 <div class="login_user" v-show="falgMenu">
-                    <div class="update_pass">
+                    <div class="update_pass" @click="updatePassFun">
                         修改密码
                     </div>
-                    <div class="exit_login">
+                    <div class="exit_login" @click="exitFun">
                         退出登录
                     </div>
                 </div>
@@ -101,6 +115,21 @@ const leaveMenu = () => {
         <div class="menu_gen">测试计划</div>
         <div class="menu_gen">测试记录</div>
         <div class="menu_gen">登录账号</div> -->
+        <el-dialog v-model="visible" :show-close="true" width="500" style="border-radius: 20px;">
+            <template #header="{ close, titleId, titleClass }">
+                <div class="my-header" style="text-align: center;">
+                    <div class="exit_login_title">退出登录</div>
+                    <div class="exit_login_info">是否退出当前账号?</div>
+                    <div class="start_button_out">
+                        <div class="start_button_self" @click="comT">
+                            确定
+                        </div>
+                    </div>
+
+                </div>
+            </template>
+
+        </el-dialog>
     </div>
 </template>
 <style lang="scss" scoped>
@@ -108,6 +137,44 @@ const leaveMenu = () => {
     background-color: transparent !important
 }
 
+.exit_login_title {
+    text-align: center;
+    color: #222222;
+    font-weight: 700;
+    font-size: 30px;
+    letter-spacing: 3px;
+}
+
+.exit_login_info {
+    text-align: center;
+    letter-spacing: 3px;
+    font-size: 24px;
+    margin-top: 20px;
+}
+
+.start_button_out {
+    margin-top: 40px;
+    // margin-bottom: 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    .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;
+
+    }
+}
+
 .badge_custom {
     position: absolute;
     background-color: #48D68E;

src/router/index.ts

@@ -63,6 +63,12 @@ const routes = [
       name: 'login',
       component: () => import('@/views/Login.vue')
 
+    },
+    {
+      path: 'updatePas',
+      name: 'updatePas',
+      component: () => import('@/views/UpdatePas.vue')
+
     },
     {
       path: 'register',

src/stores/modules/userInfo.ts

@@ -29,8 +29,14 @@ const userInfoStore = defineStore(
       //重置用户信息
       userInfo.value = val
     }
+    //清除用户信息
+    const clearUserInfo = () => {
+      userInfo.value = { account: '' }
+      token.value = ''
+      planCurrentNum.value = 0
+    }
 
-    return { planCurrentNum, savePlanCurrentNum, token, saveToken, userInfo, saveUserInfo }
+    return { planCurrentNum, clearUserInfo, savePlanCurrentNum, token, saveToken, userInfo, saveUserInfo }
   },
   { persist: true }
 )

src/views/CognizeFaceDot.vue

@@ -108,7 +108,7 @@ onMounted(() => {
 })
 const getStartTime = () => {
     let date = new Date()
-    startTime1.value = format(date, "yyyy-MM-dd hh:mm:ss");
+    startTime1.value = format(date, "yyyy-MM-dd HH:mm:ss");
     console.log(startTime1.value)
 }
 onUnmounted(() => {

src/views/CognizeGoNoGo.vue

@@ -75,7 +75,7 @@ onMounted(() => {
 })
 const getStartTime = () => {
     let date = new Date()
-    startTime.value = format(date, "yyyy-MM-dd hh:mm:ss");
+    startTime.value = format(date, "yyyy-MM-dd HH:mm:ss");
     console.log(startTime.value)
 }
 const init = () => {

src/views/Login.vue

@@ -81,6 +81,8 @@ const loginFun = async () => {
         userInfo.saveToken(res.data.token)
         userInfo.saveUserInfo(res.data.user)
         ElMessage({ message: `${res.msg}`, type: 'success' })
+        //跳转到首页
+        router.push({ name: 'homeView' })
     } else {
         ElMessage({ message: `${res.msg}`, type: 'error' })
     }

src/views/Plan.vue

@@ -2,6 +2,7 @@
 import CpmdHeader from '@/components/CpmdHeader.vue';
 import { onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { format } from 'date-fns/format';
 const router = useRouter()
 
 //持久化设置 菜单状态
@@ -18,7 +19,15 @@ const planList = ref<any>([
 
 ])
 
+//时间格式化 1000  60  60
+// const formatterTi = (val: number) => {
+//     let mill = Math.floor(val / 1000)
+//     let ss = Math.floor(mill / 60)
 
+//     //先判断是多少个小时
+//     let hour = Math.floor(val / 1000 / 60 / 60)
+//     return hour + ':时'
+// }
 //点击了开始测试--跳转到测试页面
 const startPlan = (val: any) => {
     let flag = ''
@@ -176,47 +185,75 @@ onUnmounted(() => {
 
                         </div>
                         <div class="record_out">
-                            <img class="record_img" src="../assets/kepu/xlwht_active.png">
+                            <div class="record_img_out">
+                                <img class="record_img" v-show="item.list[0].isCompleted != 0"
+                                    src="../assets/kepu/xlwht_active.png">
+                                <img class="record_img" v-show="item.list[0].isCompleted == 0"
+                                    src="../assets/kepu/xlwht_default.png">
+                                <div v-show="item.list[0].isCompleted != 0" class="record_img_inner">
+                                    <span class="test_des">测试时间：</span>
+                                    <span class="test_time1">{{ item.list[0].createTime }}</span>
+                                    <span style="display: flex;align-items: center;"><span
+                                            class="test_des">测试用时:</span><span class="test_time1">{{
+                                                item.list[0].useTime
+                                            }}
+                                        </span></span>
+
+                                </div>
+                            </div>
+
                             <img class="record_diceng" src="../assets/kepu/diceng.png">
-                            <img class="record_img" src="../assets/kepu/czscz_default.png">
+                            <div class="record_img_out">
+                                <img class="record_img" v-show="item.list[1].isCompleted != 0"
+                                    src="../assets/kepu/czscz_active.png">
+                                <img class="record_img" v-show="item.list[1].isCompleted == 0"
+                                    src="../assets/kepu/czscz_default.png">
+                                <div v-show="item.list[1].isCompleted != 0" class="record_img_inner">
+                                    <span class="test_des">测试时间：</span>
+                                    <span class="test_time1">{{ item.list[1].createTime }}</span>
+                                    <span style="display: flex;align-items: center;"><span
+                                            class="test_des">测试用时:</span><span class="test_time1">{{
+                                                item.list[1].useTime }}</span></span>
+
+                                </div>
+                            </div>
+
                             <img class="record_diceng" src="../assets/kepu/diceng.png">
-                            <img class="record_img" src="../assets/kepu/cdzkds_default.png">
+                            <div class="record_img_out">
+                                <img class="record_img" v-show="item.list[2].isCompleted != 0"
+                                    src="../assets/kepu/cdzkds_active.png">
+                                <img class="record_img" v-show="item.list[2].isCompleted == 0"
+                                    src="../assets/kepu/cdzkds_default.png">
+                                <div v-show="item.list[2].isCompleted != 0" class="record_img_inner">
+                                    <span class="test_des">测试时间：</span>
+                                    <span class="test_time1">{{ item.list[2].createTime }}</span>
+                                    <span style="display: flex;align-items: center;"><span
+                                            class="test_des">测试用时:</span><span class="test_time1">{{
+                                                item.list[2].useTime }}</span></span>
+
+                                </div>
+                            </div>
+
                             <img class="record_diceng" src="../assets/kepu/diceng.png">
-                            <img class="record_img" src="../assets/kepu/qxbd_default.png">
+                            <div class="record_img_out">
+                                <img class="record_img" v-show="item.list[3].isCompleted != 0"
+                                    src="../assets/kepu/qxbd_active.png">
+                                <img class="record_img" v-show="item.list[3].isCompleted == 0"
+                                    src="../assets/kepu/qxbd_default.png">
+                                <div v-show="item.list[3].isCompleted != 0" class="record_img_inner">
+                                    <span class="test_des">测试时间：</span>
+                                    <span class="test_time1">{{ item.list[3].createTime }}</span>
+                                    <span style="display: flex;align-items: center;"><span
+                                            class="test_des">测试用时:</span><span class="test_time1">{{
+                                                item.list[3].useTime }}</span></span>
+
+                                </div>
+                            </div>
                         </div>
                         <div class="start_button_out">
                             <div class="start_button_self" @click="startPlan(item)">开始测试</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>
@@ -368,6 +405,41 @@ onUnmounted(() => {
                 justify-content: center;
                 align-items: center;
 
+                .record_img_out {
+                    position: relative;
+
+                    .record_img_inner {
+                        bottom: 0;
+                        margin-bottom: 10px;
+                        padding-left: 20px;
+                        width: 100%;
+                        position: absolute;
+                        display: flex;
+                        flex-direction: column;
+                        // background-color: #000000;
+                        justify-content: center;
+
+                        .test_des {
+                            color: #FEFFFE;
+                            font-size: 10px;
+                            line-height: 15px;
+
+                            .test_time1 {
+                                color: #E4FF00;
+                                font-size: 10px;
+                                // line-height: 30px;
+                                line-height: 15px;
+                            }
+                        }
+
+                        .test_time1 {
+                            color: #E4FF00;
+                            font-size: 10px;
+                            line-height: 15px;
+                        }
+                    }
+                }
+
                 .record_diceng {
                     width: 80px;
                     margin-left: 10px;

src/views/Register.vue

@@ -16,6 +16,8 @@ import { useRoute, useRouter } from 'vue-router'
 const account = ref<string>('')
 //定义密码
 const password = ref<string>('')
+//定义确认密码
+const comPassword = ref<string>('')
 //定义所选组织架构ID
 const group = ref<string>('')
 //定义组织架构的名字
@@ -90,6 +92,20 @@ const registerFun = async () => {
         })
         return
     }
+    if (comPassword.value == '') {
+        ElMessage({
+            message: '请填写确认密码',
+            type: 'warning'
+        })
+        return
+    }
+    if (comPassword.value != password.value) {
+        ElMessage({
+            message: '两次密码输入不一致',
+            type: 'warning'
+        })
+        return
+    }
 
     queryOrgName()
     //开始组织参数
@@ -262,6 +278,12 @@ onUnmounted(() => {
                                 show-password />
                         </div>
                     </div>
+                    <div style="margin-top:40px">
+                        <div class="user_account">确认密码:</div>
+                        <div><el-input v-model="comPassword" type="password" style="width: 100%" placeholder="请输入密码"
+                                show-password />
+                        </div>
+                    </div>
                     <div class="go_register">
                         <span @click="loginFun">
                             已有账号，去登录

src/views/Scale.vue

@@ -182,7 +182,7 @@ onMounted(() => {
 //获取当前时间
 const getStartTime = () => {
     let date = new Date()
-    startTime.value = format(date, "yyyy-MM-dd hh:mm:ss");
+    startTime.value = format(date, "yyyy-MM-dd HH:mm:ss");
     console.log(startTime.value)
 }
 

src/views/ScaleMid.vue

@@ -5,6 +5,10 @@ import { Check } from '@element-plus/icons-vue'
 import { number } from 'echarts';
 import { ElMessage } from 'element-plus';
 import { useRouter, useRoute } from 'vue-router';
+import { menuStatusStore, userInfoStore } from '@/stores'
+import { isHaveManage } from '@/utils/test';
+import { userPlanApi, userPlanDetailApi } from '@/api/home';
+const userInfo = userInfoStore();
 const router = useRouter()
 const route = useRoute()
 //持久化设置 菜单状态
@@ -21,10 +25,16 @@ const planId = ref<string>('')
 const planName = ref<string>('')
 const num = ref<string>('')
 
+const obj = ref<any>({})
+const planNextId = ref<string>('')
+const planNextName = ref<string>('')
 
 //当前题的对象
 
+//定义计划列表数据
+const planList = ref<any>([
 
+])
 
 
 //点击跳转到下一列表
@@ -45,8 +55,8 @@ const nextTask = () => {
             name: 'scale', params: {
                 planId: planId.value,
                 planName: planName.value,
-                flag: flag.value,
-                flagName: flagName.value,
+                flag: obj.value.flag,
+                flagName: obj.value.name,
                 num: '2'
 
             }
@@ -57,8 +67,8 @@ const nextTask = () => {
             name: 'cognize', params: {
                 planId: planId.value,
                 planName: planName.value,
-                flag: flag.value,
-                flagName: flagName.value,
+                flag: obj.value.flag,
+                flagName: obj.value.name,
                 num: '3'
 
             }
@@ -69,8 +79,8 @@ const nextTask = () => {
             name: 'cognize', params: {
                 planId: planId.value,
                 planName: planName.value,
-                flag: flag.value,
-                flagName: flagName.value,
+                flag: obj.value.flag,
+                flagName: obj.value.name,
                 num: '4'
 
             }
@@ -95,7 +105,61 @@ onMounted(() => {
     flagName.value = route.params.flagName as string
     num.value = route.params.num as string
     //进到界面开始轮询
+    if (num.value !== '4') {
+        planNumGet()
+    }
+
 })
+const planNumGet = async () => {
+    //如果在就是登录了
+    if (userInfo.token) {
+        let userNo = ''
+        //登录的话
+        //判断当前是否有后台管理
+        if (isHaveManage) {
+            userNo = userInfo.userInfo.userNo
+        } else {
+            userNo = '20240726001'
+        }
+        //调用根据用户查询计划的API
+        let res: any = await userPlanApi(userNo)
+
+
+        userInfo.savePlanCurrentNum(res.data.length)
+        planList.value = res.data
+
+        //循环list 给她赋值
+        for (let i = 0; i < planList.value.length; i++) {
+            let params = {
+                planId: planList.value[i].id,
+                userNo: isHaveManage ? userInfo.userInfo.userNo : '20240726001'
+            }
+            let temp: any = await userPlanDetailApi(params)
+            planList.value[i].list = temp.data
+        }
+        console.log(planList.value)
+
+        for (let i = 0; i < planList.value.length; i++) {
+
+            if (planId.value == planList.value[i].id) {
+                for (let k = 0; k < planList.value[i].list.length; k++) {
+                    if (planList.value[i].list[k].flag == flag.value) {
+                        obj.value = planList.value[i].list[k + 1]
+                    }
+                }
+            }
+        }
+        console.log(obj.value)
+
+
+    }
+}
+
+//查询进行中过的计划
+//然后根据ID筛选是那个ID
+
+
+
 //界面销毁函数
 
 
@@ -120,7 +184,7 @@ onUnmounted(() => {
             <div class="report_top">
                 <div class="report_jt">
 
-                    <span v-show="isCompleted">心灵万花筒测试完成</span>
+                    <span v-show="isCompleted">{{ flagName }}测试完成</span>
 
                     <span v-show="isCompleted" class="des">以上测试已完成，请选择进行下一个测试或返回任务。</span>
                 </div>

src/views/UpdatePas.vue

@@ -0,0 +1,431 @@
+<script setup lang="ts">
+
+
+import { md5 } from 'js-md5'
+import CpmdHeader from '@/components/CpmdHeader.vue';
+import { ElMessage } from 'element-plus';
+
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
+
+import { useRoute, useRouter } from 'vue-router'
+import { updatePasApi, userLoginApi } from '@/api/login';
+
+import { userInfoStore } from '@/stores'
+const userInfo = userInfoStore()
+
+//定义账号
+const currentPass = ref<string>('')
+//定义密码
+const password = ref<string>('')
+
+const comPassword = ref<string>('')
+
+
+
+//此处应该是唯一的报告ID
+const id = ref<string>('')
+//持久化设置 菜单状态
+//刚进入页面就将高度设置为页面需要的
+onMounted(() => {
+
+})
+//跳转到注册页面的方法
+const router = useRouter()
+
+const registerFun = () => {
+    router.push({ name: 'register' })
+}
+
+
+
+
+//轮旋切换页面的方法
+
+//退出页面销毁 方法
+onUnmounted(() => {
+
+})
+
+
+
+//登录方法
+const loginFun = async () => {
+    //先判断是否是字段都填写了
+    if (currentPass.value == '') {
+        ElMessage({
+            message: '当前密码不能为空',
+            type: 'warning'
+        })
+        return
+    }
+    if (password.value == '') {
+        ElMessage({
+            message: '密码不能为空',
+            type: 'warning'
+        })
+        return
+    } else if (password.value.length < 6) {
+        ElMessage({
+            message: '密码最少6位',
+            type: 'warning'
+        })
+        return
+    }
+
+    if (comPassword.value == '') {
+        ElMessage({
+            message: '确认密码不能为空',
+            type: 'warning'
+        })
+        return
+    } else if (comPassword.value.length < 6) {
+        ElMessage({
+            message: '确认密码最少6位',
+            type: 'warning'
+        })
+        return
+    }
+
+    if (comPassword.value != password.value) {
+        ElMessage({
+            message: '两次密码输入不一致',
+            type: 'warning'
+        })
+        return
+    }
+
+
+    let params = {
+        id: userInfo.userInfo.userNo,
+        password: md5(password.value),
+        oldPassword: md5(currentPass.value),
+
+    }
+    const res: any = await updatePasApi(params)
+    if (res.code == 200) {
+        //登录成功后将信息存入缓存  
+        // userInfo.saveToken(res.data.token)
+        // userInfo.saveUserInfo(res.data.user)
+        ElMessage({ message: `${res.msg}`, type: 'success' })
+    } else {
+        ElMessage({ message: `${res.msg}`, type: 'error' })
+    }
+
+}
+</script>
+
+<template>
+    <div class="home_header_out">
+        <div class=" home_header_inner">
+            <CpmdHeader />
+            <div class="report_top">
+                <div class="report_jt">
+                    <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: 40px 100px;">
+
+                    <div style="margin-top:40px">
+                        <div class="user_account">当前密码:</div>
+                        <div class="input_cus"> <el-input v-model="currentPass" type="password" show-password
+                                style="width: 100%" placeholder="请输入密码" />
+                        </div>
+                    </div>
+                    <div style="margin-top:40px">
+                        <div class="user_account">新密码:</div>
+                        <div><el-input v-model="password" type="password" style="width: 100%" placeholder="请输入密码"
+                                show-password />
+                        </div>
+                    </div>
+                    <div style="margin-top:40px">
+                        <div class="user_account">确认密码:</div>
+                        <div><el-input v-model="comPassword" type="password" style="width: 100%" placeholder="请输入密码"
+                                show-password />
+                        </div>
+                    </div>
+
+                    <div class="start_button_out">
+                        <div @click="loginFun" class="start_button_self">确定</div>
+                    </div>
+
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</template>
+<style lang="scss" scoped>
+:deep(.el-input__wrapper) {
+    align-items: center;
+    border-radius: 60px !important;
+    border: 8px solid #B2F2D2 !important;
+    padding-left: 40px;
+
+}
+
+:deep(.el-input__wrapper .is-fous) {
+    box-shadow: none
+}
+
+:deep(.el-input__inner) {
+    height: 100px;
+    font-size: 40px;
+}
+
+
+.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: 60px;
+            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: 70px;
+                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;
+
+            .user_account {
+                font-size: 40px;
+                line-height: 70px;
+                margin-bottom: 30px;
+                letter-spacing: 5px;
+            }
+
+
+            .start_button_out {
+                margin-top: 100px;
+                margin-bottom: 40px;
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+
+                .start_button_self {
+                    cursor: pointer;
+                    // width: 100px;
+                    border-radius: 12px;
+                    border: 3px solid #48D68E;
+                    color: #ffffff;
+                    background-color: #000000;
+                    margin-right: 20px;
+                    padding: 10px 90px;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    font-size: 40px;
+
+                }
+            }
+
+        }
+
+        .go_register {
+            text-align: right;
+            margin-top: 40px;
+
+            span {
+                color: #48D68E;
+                cursor: pointer;
+                font-size: 40px;
+            }
+        }
+    }
+
+
+}
+
+
+
+.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>