评估界面搭建

src/components/HomePage.vue

@@ -89,7 +89,7 @@
         <div
           class="bottom-sub-box"
           :style="{ backgroundImage: `url(${indexImages[3]})` }"
-          @click="notOpen()"
+          @click="goToPersonalized"
         >
           <span>个性化学习</span>
         </div>
@@ -151,6 +151,13 @@ const goToEvaluation = () =>{
  })
 }
 
+// 个性化学习
+const goToPersonalized = () =>{
+  router.push({
+    path:'/personalized'
+  })
+}
+
 // 添加下拉菜单选中项
 const selectedGrade = ref(localStorage.getItem('selectedGrade') || '')
 // 获取年级

src/router/index.js

@@ -31,6 +31,11 @@ const routes = [
     path: '/testTopic',
     component: () => import('../views/evaluation/testTopic.vue')
   },
+  // 个性化学习
+  {
+    path: '/personalized',
+    component: () => import('../views/personalized/Personalized.vue')
+  },
   // 测试提交
   {
     path: '/testSubmit',

src/views/evaluation/testTopic.vue

@@ -26,7 +26,7 @@
                 class="radio-button-group custom-radio-group"
               >
                 <el-radio-button
-                  v-for="(option, index) in questions[currentQuestionIndex]?.questionOptionsList || []"
+                  v-for="option in questions[currentQuestionIndex]?.questionOptionsList || []"
                   :key="option.oid"
                   :label="option.ovalue"
                   >{{ option.ovalue }}. {{ option.oname }}</el-radio-button 

src/views/personalized/Personalized.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="personalized">
+    <!-- 标题 -->
+    <div class="title-container" @click="goBack">
+      <el-icon><ArrowLeftBold /></el-icon>
+      评估报告
+    </div>
+    <!-- 评估报告内容 -->
+    <div class="report-container">
+      <!-- 课程开课率 -->
+      <div class="left-box">
+        <div class="left-top-box">
+          <div class="text-content">
+            <p>课程开课率</p>
+            <p>50%</p>
+          </div>
+        </div>
+        <!-- 进度条 -->
+        <div class="left-bottom-box">
+          <div
+            class="demo-progress"
+            v-for="item in progressData"
+            :key="item.id"
+          >
+            <p class="progress-desc">{{ item.desc }}</p>
+            <el-progress :percentage="item.percentage" />
+          </div>
+        </div>
+      </div>
+
+      <!-- 互动完成率 -->
+      <div class="middle-box">
+        <div class="middle-top-box">
+          <div class="middle-content">
+            <p>互动完成率</p>
+            <p>68%</p>
+          </div>
+        </div>
+        <div class="middle-bottom-box">
+          <div
+            class="demo-progress"
+            v-for="item in interactionProgressData"
+            :key="item.id"
+          >
+            <p class="progress-desc">{{ item.desc }}</p>
+            <el-progress :percentage="item.percentage" />
+          </div>
+        </div>
+      </div>
+
+      <div class="right-box">
+        <!-- 问答次数 -->
+        <div class="right-top-box">
+          <div class="right-content">
+            <p>AI问答次数</p>
+            <p>172</p>
+          </div>
+        </div>
+        <!-- 评语 -->
+        <div class="right-bottom-box">
+          <div class="comment-title">
+            <p>评语</p>
+          </div>
+          <div class="comment-content">
+            <p>
+              教师在AI通识课程的教学中展现出高度的专业素养与教学创新能力，能够有效结合理论知识与实际应用，激发学生对人工智能的兴趣与探索欲望。教学成果呈现出良好的结构性与针对性，课程内容紧贴时代发展，注重培养学生的跨学科思维与技术素养。在引导学生进行项目实践和思辨讨论方面，展现了出色的教学引导与组织能力，达成了“知AI、懂AI、用AI”的教学目标，成果显著，广受学生好评。
+            教师在AI通识课程的教学中展现出高度的专业素养与教学创新能力，能够有效结合理论知识与实际应用，激发学生对人工智能的兴趣与探索欲望。教学成果呈现出良好的结构性与针对性，课程内容紧贴时代发展，注重培养学生的跨学科思维与技术素养。在引导学生进行项目实践和思辨讨论方面，展现了出色的教学引导与组织能力，达成了“知AI、懂AI、用AI”的教学目标，成果显著，广受学生好评。
+            教师在AI通识课程的教学中展现出高度的专业素养与教学创新能力，能够有效结合理论知识与实际应用，激发学生对人工智能的兴趣与探索欲望。教学成果呈现出良好的结构性与针对性，课程内容紧贴时代发展，注重培养学生的跨学科思维与技术素养。在引导学生进行项目实践和思辨讨论方面，展现了出色的教学引导与组织能力，达成了“知AI、懂AI、用AI”的教学目标，成果显著，广受学生好评。
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ArrowLeftBold } from "@element-plus/icons-vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+// 返回首页
+const goBack = () => {
+  router.back();
+};
+
+// 课程开课率进度条数据
+const progressData = ref([
+  { id: 1, desc: "01 AI初体验", percentage: 50 },
+  { id: 2, desc: "02 AI发展历史", percentage: 65 },
+  { id: 3, desc: "03 AI与机器人", percentage: 40 },
+  { id: 4, desc: "04 AI的超级大脑", percentage: 75 },
+  { id: 5, desc: "05 AI的智能应用", percentage: 60 },
+  { id: 6, desc: "06 AI的数据表征与感知智能", percentage: 80 },
+  { id: 7, desc: "07 AI如何学习", percentage: 45 },
+  { id: 8, desc: "08 AI伦理安全", percentage: 0 },
+]);
+
+// 互动完成率进度条数据
+const interactionProgressData = ref([
+  { id: 1, desc: "01 AI初体验", percentage: 50 },
+  { id: 2, desc: "02 AI发展历史", percentage: 65 },
+  { id: 3, desc: "03 AI与机器人", percentage: 40 },
+  { id: 4, desc: "04 AI的超级大脑", percentage: 75 },
+  { id: 5, desc: "05 AI的智能应用", percentage: 60 },
+  { id: 6, desc: "06 AI的数据表征与感知智能", percentage: 80 },
+  { id: 7, desc: "07 AI如何学习", percentage: 45 },
+  { id: 8, desc: "08 AI伦理安全", percentage: 0 },
+]);
+</script>
+
+<style scoped lang="scss">
+@use "sass:math";
+// 定义rpx转换函数
+@function rpx($px) {
+  @return math.div($px, 750) * 100vw;
+}
+.personalized {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: #e2ddfc;
+  gap: rpx(0);
+}
+.title-container {
+  width: 100%;
+  height: rpx(30);
+  font-size: rpx(10);
+  cursor: pointer;
+  color: black;
+  display: flex; /* 设置flex布局 */
+  align-items: center; /* 垂直居中 */
+  padding-left: rpx(15); /* 添加左侧内边距 */
+  gap: rpx(5); /* 设置图标和文字间距 */
+}
+.report-container {
+  // width: 100%;
+  height: 100%;
+  display: flex;
+  gap: rpx(10);
+  padding: rpx(20);
+}
+.left-box,
+.middle-box {
+  flex: 1;
+  height: 100%;
+  background: rgb(255, 255, 255, 0.5);
+  border: 1px solid white;
+  border-radius: rpx(10);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+}
+.left-top-box {
+  background-color: #ffcf1199;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+  border-radius: rpx(8);
+}
+.text-content {
+  text-align: center;
+  color: #ff4d00;
+}
+.middle-content {
+  text-align: center;
+  color: #009b03;
+}
+.right-content {
+  text-align: center;
+  color: #4316ff;
+}
+.text-content p,
+.middle-content p,
+.right-content p {
+  margin: 0;
+  padding: 0;
+}
+.text-content p:first-child,
+.middle-content p:first-child,
+.right-content p:first-child {
+  font-size: rpx(10);
+}
+.text-content p:nth-child(2),
+.middle-content p:nth-child(2),
+.right-content p:nth-child(2) {
+  font-size: rpx(30);
+  font-weight: 600;
+}
+.middle-top-box {
+  background-color: #5aeb6b99;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+  border-radius: rpx(8);
+}
+.left-top-box,
+.middle-top-box {
+  height: 30%; // 上盒子占据30%高度
+  border-radius: rpx(8);
+}
+.left-bottom-box,
+.middle-bottom-box {
+  flex: 1; // 下盒子占据剩余高度
+}
+.right-box {
+  flex: 0.8;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: rpx(10);
+}
+.right-top-box {
+  height: 30%; // 上盒子占据30%高度
+  background: #a089ff80;
+  border-radius: rpx(8);
+  border: 1px solid white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+}
+.right-bottom-box {
+  flex: 1; // 下盒子占据剩余高度
+  background: rgb(255, 255, 255, 0.5);
+  border-radius: rpx(8);
+  border: 1px solid white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+// 课程开课率进度条
+.demo-progress {
+  padding-left: rpx(10);
+  padding-right: rpx(10);
+  padding-bottom: rpx(3);
+}
+.demo-progress .el-progress--line,
+.middle-bottom-box .el-progress--line {
+  margin-left: auto;
+}
+::v-deep(.el-progress-bar__outer) {
+  background-color: #fff;
+}
+::v-deep(.el-progress-bar__inner) {
+  background-color: #ffcf1199;
+}
+::v-deep(.el-progress__text) {
+  color: black;
+  position: absolute;
+  top: -10px;
+  right: 0;
+  transform: translateY(-100%);
+}
+.progress-desc {
+  font-size: rpx(8);
+  color: black;
+  margin-bottom: rpx(0);
+  text-align: left;
+}
+// 互动完成率
+.middle-bottom-box ::v-deep(.el-progress-bar__inner) {
+  background-color: #5aeb6b99;
+}
+
+// 评语样式
+.comment-title {
+  width: 100%;
+  text-align: left;
+  margin-bottom: rpx(10);
+  color: #8F74FF;
+  font-size: rpx(8);
+  padding-left: rpx(10);
+}
+.comment-content {
+  border-radius: rpx(8);
+  padding: rpx(10);
+  height: rpx(150);
+  overflow-y: auto;
+  text-align: justify;
+}
+.comment-content p {
+  margin: 0;
+  font-size: rpx(8);
+  line-height: 1.5;
+  color: #333;
+}
+// 修改滚动条样式
+.comment-content::-webkit-scrollbar {
+  width: rpx(2); // 滚动条宽度
+}
+.comment-content::-webkit-scrollbar-track {
+  background: #f1f1f1; // 滚动条轨道背景色
+  border-radius: rpx(3);
+}
+.comment-content::-webkit-scrollbar-thumb {
+  background: #8F74FF; // 滚动条滑块颜色
+  border-radius: rpx(3); // 滚动条滑块圆角
+}
+.comment-content::-webkit-scrollbar-thumb:hover {
+  background: #7a5dff; // 滚动条滑块悬停颜色
+}
+</style>