修改量表测试

src/App.vue

@@ -9,4 +9,23 @@ import { menuStatusStore } from '@/stores'
   <RouterView />
 </template>
 
-<style scoped></style>
+<style>
+/* 修改滚动条轨道的样式 */
+::-webkit-scrollbar-track {
+  background-color: #fcfcfc;
+  /* 设置轨道的背景颜色 */
+}
+
+/* 修改滚动条滑块的样式 */
+::-webkit-scrollbar-thumb {
+  background-color: #8d8d8d;
+  /* 设置滑块的背景颜色 */
+  border-radius: 10px;
+}
+
+/* 修改滚动条的宽度 */
+::-webkit-scrollbar {
+  width: 5px;
+  /* 设置滚动条的宽度 */
+}
+</style>

src/components/CpmdHeader.vue

@@ -33,6 +33,11 @@ const handleSelect = (key: string, keyPath: []) => {
     // menuStatus.saveActiveIndex(key)
 
 }
+//点击登录按钮
+const login = () => {
+    menuStatus.saveActiveIndex('6')
+    router.push({ name: 'login', params: {} })
+}
 </script>
 
 <template>
@@ -57,7 +62,7 @@ const handleSelect = (key: string, keyPath: []) => {
             <el-menu-item index="5">测试记录</el-menu-item>
         </el-menu>
 
-        <div class="login_button_bg">
+        <div class="login_button_bg" @click="login">
             <img width="20px" src="../assets/home/button_login.png" />
             &nbsp;&nbsp;&nbsp;&nbsp;
             <span>登录账号</span>

src/router/index.ts

@@ -57,6 +57,24 @@ const routes = [
       name: 'report',
       component: () => import('@/views/Report.vue')
 
+    },
+    {
+      path: 'login',
+      name: 'login',
+      component: () => import('@/views/Login.vue')
+
+    },
+    {
+      path: 'register',
+      name: 'register',
+      component: () => import('@/views/Register.vue')
+
+    },
+    {
+      path: 'scale',
+      name: 'scale',
+      component: () => import('@/views/Scale.vue')
+
     }
     ]
     // component: HomeView

src/views/Cognize.vue

@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import CpmdHeader from '@/components/CpmdHeader.vue';
+import { onMounted, onUnmounted, ref } from 'vue'
+
+//持久化设置 菜单状态
+import { menuStatusStore } from '@/stores'
+const menuStatus = menuStatusStore();
+menuStatus.saveActiveIndex('3')
+
+const homeHeaderOut = ref<any>()
+const height = ref<number>()
+//心灵探索高度
+const xlts = ref<number>()
+
+//计划提醒的高度
+const plan_jihua = ref<number>()
+
+//显示标题及文本的标志
+const flag_text = ref<number>(1)
+//定时器标志
+const flag_time = ref<any>()
+
+//刚进入页面就将高度设置为页面需要的
+onMounted(() => {
+
+    //进到界面开始轮询
+})
+//界面销毁函数
+
+
+//轮旋切换页面的方法
+
+
+
+//退出页面销毁 方法
+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 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 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>
+
+        </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 {
+            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 {
+                    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;
+
+
+                .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;
+                    }
+                }
+            }
+        }
+    }
+
+
+}
+
+
+
+.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/HomeView.vue

@@ -2,6 +2,8 @@
 import CpmdHeader from '@/components/CpmdHeader.vue';
 import { onMounted, onUnmounted, ref } from 'vue'
 import { menuStatusStore } from '@/stores'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 const menuStatus = menuStatusStore();
 menuStatus.saveActiveIndex('1')
 
@@ -18,6 +20,32 @@ const flag_text = ref<number>(1)
 //定时器标志
 const flag_time = ref<any>()
 
+//测试任务显示图标  圆图标
+const taskCircleFlag = ref<boolean>(true)
+
+//打开任务去看看
+const openSquare = () => {
+  taskSequareFlag.value = true
+}
+//点击关闭按钮触发
+const closeSquare = () => {
+  taskSequareFlag.value = false
+}
+//点击按钮去看看触发
+const goView = () => {
+  //应该跳转到测试计划页面
+  router.push({ name: 'plan' })
+}
+//点击查看更多==跳转到科普乐园
+const goMore = () => {
+  //点击查看更多跳转到科普乐园
+  router.push({ name: 'popularizationScience' })
+}
+
+//点击圆型图标--显示任务--去看看
+const taskSequareFlag = ref<boolean>(false)
+
+
 //刚进入页面就将高度设置为页面需要的
 onMounted(() => {
   setHeight()
@@ -119,9 +147,9 @@ const brightStatusLevel = () => {
       </div>
 
     </div>
-    <div class="home_mid_plan_des">
+    <div class="home_mid_plan_des" v-show="taskSequareFlag">
       <div class="home_mid_plan_close">
-        <img style="right:0" width="20px" src="../assets/home/close.png" />
+        <img style="right:0" width="20px" src="../assets/home/close.png" @click="closeSquare" />
       </div>
 
       <div class="home_mid_plan_title">测试任务</div>
@@ -129,13 +157,14 @@ const brightStatusLevel = () => {
           class="home_mid_plan_font">测试任务</span>，赶紧点击下方按钮去看看吧！
       </div>
       <div class="home_mid_plan_button">
-        <div class="see_button">去看看</div>
+        <div class="see_button" @click="goView">去看看</div>
       </div>
     </div>
   </div>
   <div class="home_mid">
 
-    <div class="home_mid_plan" ref="plan_jihua" :style="{ top: plan_jihua + 'px' }">
+    <div class="home_mid_plan" v-show="taskCircleFlag" @click="openSquare" ref="plan_jihua"
+      :style="{ top: plan_jihua + 'px' }">
       <div class="badge_custom">
         122
       </div>
@@ -188,7 +217,7 @@ const brightStatusLevel = () => {
       </div>
     </div>
     <div class="get_more">
-      <img src="../assets/home/get_more.png" />
+      <img src="../assets/home/get_more.png" @click="goMore" />
     </div>
   </div>
 </template>

src/views/Login.vue

@@ -0,0 +1,359 @@
+<script setup lang="ts">
+
+
+
+import CpmdHeader from '@/components/CpmdHeader.vue';
+
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
+
+import { useRoute, useRouter } from 'vue-router'
+
+
+//定义账号
+const account = ref<string>('')
+//定义密码
+const password = ref<string>('')
+
+
+
+
+
+//此处应该是唯一的报告ID
+const id = ref<string>('')
+//持久化设置 菜单状态
+//刚进入页面就将高度设置为页面需要的
+onMounted(() => {
+
+})
+//跳转到注册页面的方法
+const router = useRouter()
+const registerFun = () => {
+    router.push({ name: 'register' })
+
+}
+
+
+//轮旋切换页面的方法
+
+//退出页面销毁 方法
+onUnmounted(() => {
+
+})
+
+
+
+
+</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="account" 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 class="go_register">
+                        <span @click="registerFun">
+                            没有账号，去注册
+                        </span>
+                    </div>
+                    <div class="start_button_out">
+                        <div 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>

src/views/Plan.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import CpmdHeader from '@/components/CpmdHeader.vue';
 import { onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 
 //持久化设置 菜单状态
 import { menuStatusStore } from '@/stores'
@@ -8,17 +10,13 @@ const menuStatus = menuStatusStore();
 menuStatus.saveActiveIndex('4')
 
 const homeHeaderOut = ref<any>()
-const height = ref<number>()
-//心灵探索高度
-const xlts = ref<number>()
 
-//计划提醒的高度
-const plan_jihua = ref<number>()
+//点击了开始测试--跳转到测试页面
+const startPlan = () => {
+    //点击了开始跳转到量表测试页面
+    router.push({ name: 'scale' })
+}
 
-//显示标题及文本的标志
-const flag_text = ref<number>(1)
-//定时器标志
-const flag_time = ref<any>()
 
 //刚进入页面就将高度设置为页面需要的
 onMounted(() => {
@@ -51,10 +49,10 @@ onUnmounted(() => {
                 <div>
 
                     <!-- 测试记录列表 -->
-                    <div class="test_record_out">
+                    <div class="test_record_out" v-for="item in 3">
                         <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>
+                            <span><span class="record_tip_inner">结束时间：</span>2023/07/26</span>
                         </div>
                         <div class="test_record">
                             <img src="../assets/kepu/task_1.png" />
@@ -74,14 +72,14 @@ onUnmounted(() => {
                             <img class="record_img" src="../assets/kepu/qxbd_default.png">
                         </div>
                         <div class="start_button_out">
-                            <div class="start_button_self">开始测试</div>
+                            <div class="start_button_self" @click="startPlan">开始测试</div>
                         </div>
                     </div>
                     <!-- 测试记录列表 -->
-                    <div class="test_record_out">
+                    <!-- <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>
+                            <span><span class="record_tip_inner">结束时间：</span>2023/07/26</span>
                         </div>
                         <div class="test_record">
                             <img src="../assets/kepu/task_1.png" />
@@ -103,7 +101,7 @@ onUnmounted(() => {
                         <div class="start_button_out">
                             <div class="start_button_self">开始测试</div>
                         </div>
-                    </div>
+                    </div> -->
 
 
                 </div>

src/views/Register.vue

@@ -0,0 +1,541 @@
+<script setup lang="ts">
+
+
+
+import CpmdHeader from '@/components/CpmdHeader.vue';
+
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
+
+import { useRoute, useRouter } from 'vue-router'
+
+
+//定义账号
+const account = ref<string>('')
+//定义密码
+const password = ref<string>('')
+//定义所选组织架构
+const group = ref<string>('')
+//定义所选组织架构的数据
+const groupData = ref([
+    {
+        value: '1',
+        label: 'Level one 1',
+        children: [
+            {
+                value: '1-1',
+                label: 'Level two 1-1',
+                children: [
+                    {
+                        value: '1-1-1',
+                        label: 'Level three 1-1-1',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: '2',
+        label: 'Level one 2',
+        children: [
+            {
+                value: '2-1',
+                label: 'Level two 2-1',
+                children: [
+                    {
+                        value: '2-1-1',
+                        label: 'Level three 2-1-1',
+                    },
+                ],
+            },
+            {
+                value: '2-2',
+                label: 'Level two 2-2',
+                children: [
+                    {
+                        value: '2-2-1',
+                        label: 'Level three 2-2-1',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: '3',
+        label: 'Level one 3',
+        children: [
+            {
+                value: '3-1',
+                label: 'Level two 3-1',
+                children: [
+                    {
+                        value: '3-1-1',
+                        label: 'Level three 3-1-1',
+                    },
+                ],
+            },
+            {
+                value: '3-2',
+                label: 'Level two 3-2',
+                children: [
+                    {
+                        value: '3-2-1',
+                        label: 'Level three 3-2-1',
+                    },
+                ],
+            },
+        ],
+    },
+])
+
+//定义用户姓名
+const name = ref('')
+
+//选择性别
+const sex = ref('')
+
+
+
+
+
+//此处应该是唯一的报告ID
+const id = ref<string>('')
+//持久化设置 菜单状态
+//刚进入页面就将高度设置为页面需要的
+onMounted(() => {
+
+})
+//跳转到注册页面的方法
+const router = useRouter()
+const loginFun = () => {
+    router.push({ name: 'login' })
+
+}
+
+
+//轮旋切换页面的方法
+
+//退出页面销毁 方法
+onUnmounted(() => {
+
+})
+
+
+
+
+</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-tree-select v-model="group" placeholder="请选择组织架构" :data="groupData" filterable
+                                style="width:100%" />
+                        </div>
+                    </div>
+                    <div style="margin-top:40px">
+                        <div class="user_account">账号(学号):</div>
+                        <div class="input_cus"> <el-input v-model="account" style="width: 100%" placeholder="请输入账号" />
+                        </div>
+                    </div>
+                    <div style="margin-top:40px;display: flex;">
+                        <div>
+                            <div class="user_account">姓名:</div>
+                            <div class="input_cus"> <el-input v-model="name" style="width: 90%" placeholder="请输入姓名" />
+                            </div>
+                        </div>
+                        <div>
+                            <div class="user_account">性别:</div>
+                            <div class="input_cus"> <el-radio-group size="large" v-model="sex">
+                                    <el-radio value="1" size="large">男</el-radio>
+                                    <el-radio value="0" size="large">女</el-radio>
+                                </el-radio-group>
+                            </div>
+                        </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 class="go_register">
+                        <span @click="loginFun">
+                            已有账号，去登录
+                        </span>
+                    </div>
+                    <div class="start_button_out">
+                        <div class="start_button_self">注册</div>
+                    </div>
+
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</template>
+<style></style>
+<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;
+}
+
+:deep(.el-select__placeholder) {
+    color: var(--el-input-text-color, var(--el-text-color-regular));
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    line-height: 100px;
+    font-size: 40px;
+}
+
+:deep(.el-select__selection) {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    gap: 6px;
+    min-width: 0;
+    position: relative;
+    height: 100px;
+
+}
+
+:deep(.el-select__wrapper) {
+    border-radius: 60px;
+    border: 8px solid #B2F2D2;
+    padding-left: 40px;
+}
+
+:deep(.el-select__input) {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    border: none;
+    color: var(--el-select-multiple-input-color);
+    font-family: inherit;
+    font-size: 40px;
+    height: 100px;
+    max-width: 100%;
+    width: 100% !important;
+    outline: none;
+    padding: 0;
+}
+
+:deep(.el-tree) {
+    --el-tree-node-content-height: 53px;
+    --el-tree-node-hover-bg-color: var(--el-fill-color-light);
+    --el-tree-text-color: var(--el-text-color-regular);
+    --el-tree-expand-icon-color: var(--el-text-color-placeholder);
+    background: var(--el-fill-color-blank);
+    color: var(--el-tree-text-color);
+    cursor: default;
+    font-size: 27px !important;
+    position: relative;
+}
+
+:deep(.el-radio.el-radio--large .el-radio__inner) {
+    height: 44px;
+    width: 44px;
+}
+
+:deep(.el-radio.el-radio--large .el-radio__label) {
+    font-size: 44px;
+}
+
+:deep(.el-radio.el-radio--large) {
+    height: 100px;
+}
+
+:deep(.el-radio__input.is-checked .el-radio__inner) {
+    background: #48D68E;
+    border-color: #B2F2D2;
+}
+
+:deep(.el-radio__input.is-checked+.el-radio__label) {
+    color: #48D68E;
+}
+
+
+
+
+.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>

src/views/Scale.vue

@@ -0,0 +1,483 @@
+<script setup lang="ts">
+import CpmdHeader from '@/components/CpmdHeader.vue';
+import { onMounted, onUnmounted, ref } from 'vue'
+import { Check } from '@element-plus/icons-vue'
+import { number } from 'echarts';
+import { ElMessage } from 'element-plus';
+//持久化设置 菜单状态
+// import { menuStatusStore } from '@/stores'
+// const menuStatus = menuStatusStore();
+// menuStatus.saveActiveIndex('3')
+
+const homeHeaderOut = ref<any>()
+
+//获取到的题目数组
+const scaleList = ref([
+    {
+        ti: '1.在学校做作业或者其他活动时，无法专注于细节的 部分或出现粗心的错误',
+        radio: '没有；一点；常是；总是',
+        isCheck: ''
+
+    }, {
+        ti: '2.在学校做作业或者其他活动时，无法专注于细节的 部分或出现粗心的错误',
+        radio: '没有；一点；常是；总是',
+        isCheck: ''
+    }, {
+        ti: '3.在学校做作业或者其他活动时，无法专注于细节的 部分或出现粗心的错误',
+        radio: '没有；一点；常是；总是',
+        isCheck: ''
+    }, {
+        ti: '4.在学校做作业或者其他活动时，无法专注于细节的 部分或出现粗心的错误',
+        radio: '没有；一点；常是；总是',
+        isCheck: ''
+    }
+])
+//当前题的对象
+
+//做过题的数组
+const completeList = ref([])
+
+
+//刚进页面时第几题
+const topicIndex = ref<number>(1)
+
+//下一题的方法
+const nextTopic = () => {
+
+    //判断当前索引下的数组中是否有isCheck为空
+    //先判断这个是不是
+
+    if (scaleList.value[topicIndex.value - 1].isCheck == '') {
+        ElMessage({
+            message: '请选择当前题目',
+            type: "warning",
+        })
+        return
+    }
+    //判断当前是不是最后一题
+    //如果是最后一题就不++了
+    if (topicIndex.value == scaleList.value.length) {
+        // ElMessage({
+        //     message: '已经是最后一题了',
+        //     type: "warning",
+        // })
+        return
+    }
+    topicIndex.value++
+
+}
+//上一题的方法
+const lastTopic = () => {
+    if (topicIndex.value == 1) {
+        ElMessage({
+            message: '已经是第一题了',
+            type: "warning",
+        })
+        return
+    }
+    topicIndex.value--
+}
+//点击选中选项的事件
+const radioFun = () => {
+    console.log(JSON.stringify(scaleList.value))
+    nextTopic()
+}
+
+//刚进入页面就将高度设置为页面需要的
+onMounted(() => {
+
+    //进到界面开始轮询
+})
+//界面销毁函数
+
+
+//轮旋切换页面的方法
+
+
+
+//退出页面销毁 方法
+onUnmounted(() => {
+
+})
+
+
+
+
+</script>
+
+<template>
+    <div class="home_header_out" ref="homeHeaderOut">
+        <div class=" home_header_inner">
+            <CpmdHeader />
+            <div class="report_top">
+                <div class="report_jt">
+                    <span>心灵万花筒</span>
+                    <span class="des">请根据您的表现回答下列问题，每道题请选择最符合您的情况的选项。</span>
+                </div>
+                <img class="xlts_img" src="../assets/scale/scale.png" />
+            </div>
+            <el-progress :text-inside="true" :stroke-width="20" :percentage="(topicIndex / scaleList.length) * 100"
+                color="#48D68E">
+                <!-- <el-button type="success" :icon="Check" circle style='z-index: 10;' /> -->
+                {{ topicIndex }}/{{ scaleList.length }}
+            </el-progress>
+        </div>
+        <div class="kply">
+            <div class="kply_inner">
+                <div style="padding :20px 40px">
+                    <div>
+                        <div>{{ scaleList[topicIndex - 1].ti }}</div>
+                        <!-- <div v-for="item in scaleList[topicIndex - 1].radio.split('；')">
+                            {{ item }}
+                        </div> -->
+                        <el-radio-group v-model="scaleList[topicIndex - 1].isCheck">
+
+                            <el-radio v-for="item in scaleList[topicIndex - 1].radio.split('；')" @change="radioFun"
+                                :value="item" size="large" border>{{ item }}</el-radio>
+
+                        </el-radio-group>
+                        <div>
+                            <div style="background-color: aqua;margin-bottom: 10px;" @click="lastTopic">上一题</div>
+                            <div style="background-color: aqua;" @click="nextTopic">下一题</div>
+                        </div>
+                    </div>
+
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</template>
+<style lang="scss" scoped>
+:deep(.el-progress-bar__outer) {
+    background-color: #ffffff;
+    border-radius: 100px;
+    height: 6px;
+    overflow: hidden;
+    position: relative;
+    vertical-align: middle;
+}
+
+.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;
+            margin-bottom: 40px;
+
+            .xlts_img {
+                margin-right: 100px;
+                width: 200px;
+            }
+
+            .report_jt {
+                display: flex;
+                flex-direction: column;
+                font-size: 50px;
+                font-weight: 700;
+                letter-spacing: 3px;
+
+                .des {
+                    color: #888888;
+                    // opacity: 0.4;
+                    font-size: 20px;
+                    letter-spacing: 0px;
+                    margin-top: 10px;
+                }
+            }
+        }
+    }
+
+    .kply {
+        width: 100%;
+        margin-top: 40px;
+        // background-color: #FAFAFA;
+
+        .kply_inner {
+            border: 8px solid #B2F2D2;
+            min-height: 500px;
+            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 {
+                    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;
+
+
+                .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;
+                    }
+                }
+            }
+        }
+    }
+
+
+}
+
+
+
+.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>