测评列表滚动条问题修复

src/apis/user.js

@@ -19,6 +19,12 @@ export const loginAPI = (loginBody) => {
   })
 }
 
+export const userInfoAPI = () => {
+    return request({
+    url: '/system/user/getInfo'
+  })
+}
+
 export const getPublishAPI = () => {
   return request({
     url: '/web/scale/publish'

src/utils/http.js

@@ -21,6 +21,7 @@ http.interceptors.request.use(config => {
 http.interceptors.response.use(res => {
   if(res.data.code == 401) {
     localStorage.removeItem('token')
+    localStorage.removeItem('userInfo')
     window.location.href = '/login'
   }
   return res.data;

src/views/Exam/index.vue

@@ -2,8 +2,9 @@
   <el-container class="container-exam">
     <el-header class="header">
       <img src="@/assets/images/logo.png" alt="">
-      <span class="desc">本平台提供专业的自评量表、请仔细地阅读每一条，根据近期内您的实际感受，点击适合您的选项，请注意不要漏题、答题完成后您将获得一份专业的分析报告！</span>
+      <span class="desc">本平台提供专业的自评量表、请仔细地阅读每一条，根据近期内您的实际感受，点击适合您的选项，请注意不要漏题！</span>
-      <el-button round classs="right-btn" style="margin-left: 50px;" @click="logout">退出登录</el-button>
+      <span class="user">{{ userInfo.nickName }}</span>
+      <el-button round classs="right-btn" style="margin-left: 20px;" @click="logout">退出登录</el-button>
     </el-header>
 
     <div class="content">
@@ -90,6 +91,8 @@ const recordId = route.query.recordId
 
 const router = useRouter()
 
+const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))
+
 const timeLeft = ref(Date.now() + 1000 * 60 * scaleTime)
 
 const questionList = ref([])
@@ -149,6 +152,7 @@ function handleChange() {
 
 function logout() {
   localStorage.removeItem('token')
+  localStorage.removeItem('userInfo')
   router.replace("/login")
 }
 
@@ -200,6 +204,13 @@ async function submit() {
       font-size: 18px;
       padding-top: 15px;
     }
+
+    .user {
+      margin-left: 50px;
+      color: #41515C;
+      font-size: 18px;
+      padding-top: 15px;
+    }
   }
 
   .content {

src/views/ExamDetail/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="header">
     <img src="@/assets/images/logo.png" alt="">
-    <span class="desc">本平台提供专业的自评量表、请仔细地阅读每一条，根据近期内您的实际感受，点击适合您的选项，请注意不要漏题、答题完成后您将获得一份专业的分析报告！</span>
+    <span class="desc">本平台提供专业的自评量表、请仔细地阅读每一条，根据近期内您的实际感受，点击适合您的选项，请注意不要漏题！</span>
-    <el-button round classs="right-btn" style="margin-left: 50px;" @click="logout">退出登录</el-button>
+    <span class="user">{{ userInfo.nickName }}</span>
+    <el-button round classs="right-btn" style="margin-left: 20px;" @click="logout">退出登录</el-button>
   </div>
   <div class="content">
     <el-card style="margin-top: 20px;min-height: calc(100vh - 100px);">
@@ -39,6 +40,8 @@ const router = useRouter()
 const data = localStorage.getItem('examDetail') || ''
 const des = JSON.parse(data)
 
+const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))
+
 function goToHome() {
   localStorage.removeItem('examDetail')
   router.push('/')
@@ -46,6 +49,7 @@ function goToHome() {
 
 function logout() {
   localStorage.removeItem('token')
+  localStorage.removeItem('userInfo')
   router.replace("/login")
 }
 </script>
@@ -53,14 +57,21 @@ function logout() {
 <style lang="scss" scoped>
 .header {
   height: 60px;
-  color: #41515C;
   background-color: #FFF;
   text-align: center;
-  font-size: 18px;
-  padding-top: 15px;
 
   .desc {
     margin-left: 20px;
+    color: #41515C;
+    font-size: 18px;
+    padding-top: 15px;
+  }
+
+  .user {
+    margin-left: 50px;
+    color: #41515C;
+    font-size: 18px;
+    padding-top: 15px;
   }
 }
 

src/views/ScaleList/index.vue

@@ -1,41 +1,44 @@
 <template>
-  <el-container class="container-exam">
+  <el-scrollbar height="100vh">
-    <el-header class="header">
+    <el-container class="container-exam">
-      <img src="@/assets/images/logo.png" alt="">
+      <el-header class="header">
-      <span
+        <img src="@/assets/images/logo.png" alt="">
-          class="desc">本平台提供专业的自评量表、请仔细地阅读每一条，根据近期内您的实际感受，点击适合您的选项，请注意不要漏题、答题完成后您将获得一份专业的分析报告！</span>
+        <span class="desc">本平台提供专业的自评量表、请仔细地阅读每一条，根据近期内您的实际感受，点击适合您的选项，请注意不要漏题！</span>
-      <el-button round classs="right-btn" style="margin-left: 50px;" @click="logout">退出登录</el-button>
+        <span class="user">{{ userInfo.nickName }}</span>
-    </el-header>
+        <el-button round classs="right-btn" style="margin-left: 20px;" @click="logout">退出登录</el-button>
-    <el-main class="main">
+      </el-header>
-      <div class="content" v-if="scaleList.length > 0">
+      <el-main class="main">
-        <el-card shadow="hover" style="max-width: 520px; margin-bottom: 10px; position: relative;"
+
-                 v-for="item in scaleList" :key="item.scaleId" @click="gotoExam(item)">
+        <div class="content" v-if="scaleList.length > 0">
-          <img :src="item.coverUrl" alt="">
+          <el-card shadow="hover" style="max-width: 520px; margin-bottom: 10px; position: relative;"
-          <div class="title">{{ item.scaleName }}</div>
+            v-for="item in scaleList" :key="item.scaleId" @click="gotoExam(item)">
-          <div v-if="item.used" class="desc">
+            <img :src="item.coverUrl" alt="">
-            <el-tag round effect="dark" type="danger">已测评</el-tag>
+            <div class="title">{{ item.scaleName }}</div>
-          </div>
+            <div v-if="item.used" class="desc">
-          <template #footer>
+              <el-tag round effect="dark" type="danger">已测评</el-tag>
-            <div class="footer">
-              <div>
-                {{ item.scaleTitle }}
-              </div>
-              <div>
-                {{ item.questionsNum }}
-              </div>
             </div>
-          </template>
+            <template #footer>
-        </el-card>
+              <div class="footer">
-      </div>
+                <div>
-      <el-empty v-else description="暂无测评量表" style=" height: 600px;"/>
+                  {{ item.scaleTitle }}
-    </el-main>
+                </div>
-  </el-container>
+                <div>
+                  {{ item.questionsNum }}
+                </div>
+              </div>
+            </template>
+          </el-card>
+        </div>
+        <el-empty v-else description="暂无测评量表" style=" height: 600px;" />
+      </el-main>
+    </el-container>
+  </el-scrollbar>
 </template>
 
 <script setup>
-import {ref, onMounted} from 'vue'
+import { ref, onMounted } from 'vue'
-import {useRouter} from 'vue-router'
+import { useRouter } from 'vue-router'
-import {getPublishAPI, addRecordIdAPI} from '@/apis/user'
+import { getPublishAPI, addRecordIdAPI, userInfoAPI } from '@/apis/user'
 
 const router = useRouter()
 
@@ -72,21 +75,29 @@ async function gotoExam(item) {
   })
 }
 
+const userInfo = ref('')
+async function getUserInfo() {
+  const res = await userInfoAPI()
+  userInfo.value = res.data.user
+
+  localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
+}
+
 function logout() {
   localStorage.removeItem('token')
+  localStorage.removeItem('userInfo')
   router.replace("/login")
 }
 
 onMounted(() => {
   getScaleList()
+  getUserInfo()
 })
 
 </script>
 
 <style lang="scss" scoped>
 .container-exam {
-  height: 100vh;
-
   .header {
     height: 60px;
     background-color: #FFF;
@@ -98,12 +109,20 @@ onMounted(() => {
       font-size: 18px;
       padding-top: 15px;
     }
+
+    .user {
+      margin-left: 50px;
+      color: #41515C;
+      font-size: 18px;
+      padding-top: 15px;
+    }
   }
 
   .main {
     width: 1200px;
     margin: 0 auto;
     text-align: center;
+    padding: 0;
 
     .title {
       font-size: 30px;
@@ -115,6 +134,7 @@ onMounted(() => {
       margin-top: 20px;
       display: grid;
       grid-template-columns: 50% 50%;
+      position: relative;
 
       img {
         width: 500px;
@@ -133,6 +153,8 @@ onMounted(() => {
         color: red;
         font-size: 20px;
         font-weight: bold;
+        position: absolute;
+        top: 0;
       }
 
       .footer {

web/index.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>云舒-心理健康平台-学生端</title>
     <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css" />
-    <script type="module" crossorigin src="/web/assets/index--qMp6osd.js"></script>
+    <script type="module" crossorigin src="/web/assets/index-hcESTLrl.js"></script>
-    <link rel="stylesheet" crossorigin href="/web/assets/index-_wR1FQpr.css">
+    <link rel="stylesheet" crossorigin href="/web/assets/index-jbRSnGfa.css">
   </head>
   <body>
     <div id="app"></div>