学校端代码提交

src/views/ScaleList/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-container class="container-exam">
+    <el-header class="header">
+      <img src="@/assets/images/fenxiang.png" alt="">
+      <span class="desc">本平台提供专业的自评量表、请仔细地阅读每一条，根据近期内您的实际感受，点击适合您的选项，请注意不要漏题、答题完成后您将获得一份专业的分析报告！</span>
+    </el-header>
+    <el-main class="main">
+      <div class="title">国际标准抑郁与焦虑自评量表</div>
+
+      <div class="content">
+        <el-card shadow="hover" style="max-width: 520px; margin-bottom: 10px;" v-for="item in scaleList"
+          :key="item.scaleId" @click="gotoExam(item)">
+          <img :src="item.coverUrl" alt="">
+          <div class="title">{{ item.scaleName }}</div>
+          <template #footer>
+            <div class="footer">
+              <div>
+                全面的心理健康评估10项分析报告
+              </div>
+              <div>
+                {{ item.questionsNum }}
+              </div>
+            </div>
+          </template>
+        </el-card>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { getPublishAPI } from '@/apis/user'
+
+const router = useRouter()
+
+const scaleList = ref([])
+async function getScaleList() {
+  const res = await getPublishAPI()
+  scaleList.value = res.data.scaleList
+}
+
+function gotoExam(item) {
+  router.push(`/exam/${item.scaleId}`)
+}
+
+onMounted(() => {
+  getScaleList()
+})
+
+</script>
+
+<style lang="scss" scoped>
+.container-exam {
+  height: 100vh;
+
+  .header {
+    height: 60px;
+    color: #41515C;
+    background-color: #FFF;
+    text-align: center;
+    font-size: 18px;
+    padding-top: 15px;
+
+    .desc {
+      margin-left: 20px;
+    }
+  }
+
+  .main {
+    width: 70%;
+    height: calc(100vh - 60px);
+    margin: 0 auto;
+    text-align: center;
+
+    .title {
+      font-size: 30px;
+      font-weight: bold;
+      color: #31424E;
+    }
+
+    .content {
+      margin-top: 20px;
+      display: grid;
+      grid-template-columns: 50% 50%;
+
+      img {
+        width: 500px;
+        height: 200px;
+      }
+
+      .title {
+        font-size: 25px;
+        font-weight: bold;
+        color: #31424E;
+        margin-top: 10px;
+      }
+
+      .footer {
+        display: flex;
+        justify-content: space-between;
+        color: #DDDEDD;
+        font-size: 18px;
+      }
+    }
+  }
+}
+</style>