refactor: 优化导航栏样式，能够适应各种页面宽度；优化批改结果页面样式

src/layout/Header/Header.vue

@@ -1,169 +1,116 @@
-<!--
-  Description: 主页面Header布局
-  Author: BaiQi
-  Created Date: 2024-6-30
--->
 <template>
-
-  <el-row class="header">
-    <!--产品图标与名称-->
-    <el-col :span="2" class="header-icons">
-      <div>
-        <!-- 这个相对路径很迷 -->
-        <img src="../Header/seecoderLogo_wide.png" alt="logo">
-      </div>
-      <div>
-        
-      </div>
-    </el-col>
-    <!--选择菜单-->
-    <el-col :span="10" class="header-menu">
-      <el-menu mode="horizontal" :default-active="activePage" @select="handleSelect" class="menu">
+  <div class="header">
+    <!-- 产品图标与名称 -->
+    <div class="header-icons">
+      <img src="../Header/seecoderLogo_wide.png" alt="logo">
+    </div>
+    <!-- 选择菜单 -->
+    <div class="header-menu">
+      <el-menu mode="horizontal" :default-active="activePage" @select="handleSelect" :ellipsis="false" class="menu">
         <template v-if="role == 'student'">
-          <el-menu-item v-for="item in studentMenuItems" :index="item.key" class="header-menu-item">
-            <div>
-              {{ item.value }}
-            </div>
+          <el-menu-item v-for="item in studentMenuItems" :key="item.key" :index="item.key" class="header-menu-item">
+            <div>{{ item.value }}</div>
           </el-menu-item>
         </template>
         <template v-else>
-          <el-menu-item v-for="item in teacherMenuItems" :index="item.key" class="header-menu-item">
-            <div>
-              {{ item.value }}
-            </div>
+          <el-menu-item v-for="item in teacherMenuItems" :key="item.key" :index="item.key" class="header-menu-item">
+            <div>{{ item.value }}</div>
           </el-menu-item>
         </template>
       </el-menu>
-    </el-col>
-    <!--用户头像和昵称-->
-    <el-col :span="3" :offset="7">
-      <el-dropdown @command="handleCommand" style="margin-top: 5px">
-        <div class="header-userName">
-          <!--如果是登录状态-->
+    </div>
+    <!-- 用户头像和昵称 -->
+    <div class="header-userName">
+      <el-dropdown @command="handleCommand">
+        <div class="user-info">
+          <!-- 如果是登录状态 -->
           <template v-if="store.token !== ''">
-            <!--用户有头像-->
+            <!-- 用户有头像 -->
             <template v-if="store.user.userAvatar !== ''">
-            <el-avatar :size="32" :shape="'circle'" :src="store.user.userAvatar"/>
+              <el-avatar :size="32" :shape="'circle'" :src="store.user.userAvatar" />
             </template>
-            <!--用户没有头像-->
+            <!-- 用户没有头像 -->
             <template v-else>
-              <el-avatar :size="32" :shape="'circle'"> {{ store.user.name.charAt(0) }}</el-avatar>
+              <el-avatar :size="32" :shape="'circle'">{{ store.user.name.charAt(0) }}</el-avatar>
             </template>
-            <div class="nickName">
-              {{store.user.name}}
-            </div>
+            <div class="nickName">{{ store.user.name }}</div>
           </template>
-          <!--如果是未登录状态-->
+          <!-- 如果是未登录状态 -->
           <template v-else>
-            <el-avatar :size="32" :shape="'circle'"> U</el-avatar>
+            <el-avatar :size="32" :shape="'circle'">U</el-avatar>
             <div class="nickName">user</div>
           </template>
         </div>
         <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item command="logout">退出登录</el-dropdown-item>
-          </el-dropdown-menu>
-          <el-dropdown-menu disabled="ture">
             <el-dropdown-item command="profile">个人资料</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-<!--      <el-dropdown @command="handleCommand" style="position: absolute;top: 35%">-->
-<!--        <span style="color: blue">-->
-<!--            user-->
-<!--            <el-icon class="el-icon&#45;&#45;right">-->
-<!--              <arrow-down />-->
-<!--            </el-icon>-->
-<!--        </span>-->
-<!--        <template #dropdown>-->
-<!--          <el-dropdown-menu>-->
-<!--            <el-dropdown-item command="logout">退出登录</el-dropdown-item>-->
-<!--          </el-dropdown-menu>-->
-<!--        </template>-->
-<!--      </el-dropdown>-->
-    </el-col>
-  </el-row>
-
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import router from "../../router/index.js";
-  import {getCurrentInstance, onMounted, ref} from "vue";
-  import './index.scss'
-  import {useStore} from "@/store";
-  import emitter from "@/utils/emitter";
-  import {useRoute} from "vue-router";
+import router from "../../router/index.js";
+import { onMounted, ref } from "vue";
+import './index.scss';
+import { useStore } from "@/store";
+import emitter from "@/utils/emitter";
+import { useRoute } from "vue-router";
 
-  const store = useStore()
-  const role:'teachers' | 'student' = store.user.role === 'STUDENT' ?   'student':'teachers';
+const store = useStore();
+const role: 'teachers' | 'student' = store.user.role === 'STUDENT' ? 'student' : 'teachers';
 
-  const studentMenuItems = [
-    {
-      value: "课程广场",
-      key: "CourseSquare"
-    },
-    {
-      value: "我的课程",
-      key: "MyCourse"
-    },
-    {
-      value: "我的作业",
-      key: "MyWork"
-    },
-  ]
-  const teacherMenuItems = [
-    {
-      value: "课程广场",
-      key: "CourseSquare"
-    },
-    {
-      value: "我的课程",
-      key: "MyCourse"
-    },
-    {
-      value: "我的批改",
-      key: "MyWork"
-    },
-  ]
+const studentMenuItems = [
+  { value: "课程广场", key: "CourseSquare" },
+  { value: "我的课程", key: "MyCourse" },
+  { value: "我的作业", key: "MyWork" },
+];
 
-  const handleSelect = (index:string)=>{
-    emitter.emit('change-page', index)
-  }
+const teacherMenuItems = [
+  { value: "课程广场", key: "CourseSquare" },
+  { value: "我的课程", key: "MyCourse" },
+  { value: "我的批改", key: "MyWork" },
+];
 
-  const handleCommand = (command:string)=>{
-    if(command==="logout"){
-      localStorage.clear()
-      store.clear()
-      router.push({path: "/login"})
-    } else if(command==="profile"){
-      router.push({path: "/profile"})
-    }
+const handleSelect = (index: string) => {
+  emitter.emit('change-page', index);
+};
+
+const handleCommand = (command: string) => {
+  if (command === "logout") {
+    localStorage.clear();
+    store.clear();
+    router.push({ path: "/login" });
+  } else if (command === "profile") {
+    router.push({ path: "/profile" });
   }
+};
 
-  const route = useRoute()
-  let activePage = ref('')
+const route = useRoute();
+let activePage = ref('');
 
-  //处理刷新页面时，菜单项和内容不匹配的问题
-  onMounted(()=>{
-    let path = route.path.split('/')[1]
-    if(path == "profile"){
-      activePage.value = null
-    }
+onMounted(() => {
+  let path = route.path.split('/')[1];
+  if (path == "profile") {
+    activePage.value = null;
+  }
 
-    //找到/home/后的名字
-    if(route.path.split('/')[1] == "home"){
-      path = route.path.split('/')[2].charAt(0).toUpperCase()+route.path.split('/')[2].slice(1)
-      if(path === 'Assignment'){
-        activePage.value = 'MyWork'
-      }else {
-        activePage.value = path
-      }
+  if (route.path.split('/')[1] == "home") {
+    path = route.path.split('/')[2].charAt(0).toUpperCase() + route.path.split('/')[2].slice(1);
+    if (path === 'Assignment') {
+      activePage.value = 'MyWork';
+    } else {
+      activePage.value = path;
     }
-  })
+  }
+});
 </script>
 
 <script lang="ts">
-  export default {
-    name: "Layout"
-  }
-</script>
+export default {
+  name: "Layout"
+};
+</script>

src/layout/Header/index.scss

@@ -5,64 +5,64 @@
   padding: 0 32px;
   box-sizing: border-box;
   border-bottom: solid 1px #e8e8e8;
-  //box-shadow: rgba(0, 0, 0, 0.1) 0 4px 10px;
   display: flex;
   align-items: center;
   background-color: #fff;
   overflow: hidden;
 
   .header-icons {
-    
-    justify-content: space-between;  
-    display: flex;   
+    display: flex;
     align-items: center;
-    // color: #597D3B;
 
-    img{
-      width:auto ;
-      vertical-align: middle;
+    img {
+      width: auto;
       height: 36px;
+      vertical-align: middle;
     }
   }
 
   .header-menu {
-    margin-left: 100px;
+    display: flex;
+    align-items: center;
+    margin-left: 50px;
 
-    & .menu {
+    .menu {
       height: 40px;
     }
 
-    & .header-menu-item{
+    .header-menu-item {
       vertical-align: middle;
       color: #000000;
       height: 40px;
 
-      &:hover{
-        //z-index: 1;
+      &:hover {
         background-color: #fff;
         color: #000000;
-        border-bottom: 2px solid #597D3B;
-        //& .header-menu-item-text{
-        //  z-index: 99;
-        //  border-bottom: 2px solid #597D3B;
-        //}
+        border-bottom: 2px solid #597d3b;
       }
 
-      &.is-active{
+      &.is-active {
         background-color: #fff;
-        color: #597D3B!important;
-        border-bottom: 2px solid #597D3B;
+        color: #597d3b !important;
+        border-bottom: 2px solid #597d3b;
       }
     }
   }
 
   .header-userName {
+    margin-right: 100px;
     margin-left: auto;
     display: flex;
-    vertical-align: middle;
     align-items: center;
     gap: 15px;
-    float: right;
+
+    .user-info {
+      display: flex;
+      align-items: center;
+    }
+
+    .nickName {
+      margin-left: 10px;
+    }
   }
 }
-

src/views/CorrectPage/CorrectPage.vue

@@ -5,53 +5,54 @@
 -->
 <template>
 
-    <div class="my-correct">
-      <!-- 写作题目 及 作文内容 -->
-      
-      <div class="my-correct-header">
-        <StudentWritingRequirements /> 
-        <StudentEssay :studentId = "studentId" :assignmentId="assignmentId"/> 
+  <div class="my-correct">
+    <!-- 写作题目 及 作文内容 -->
+
+    <div class="my-correct-header">
+      <el-card>
+        <StudentWritingRequirements />
+      </el-card>
+      <div style="height: 10px"></div>
+      <el-card>
+        <StudentEssay :studentId="studentId" :assignmentId="assignmentId" />
+      </el-card>
+    </div>
+
+    <div class="right-side">
+      <!-- update: 仅保留AI历史对话 -->
+      <div class="my-correct-record">
+        <h2>学生与AI对话历史记录</h2>
+        <AIChatter :dialogueId="dataForm.dialogueId" :messages="dataForm.messages" :is-teacher="true" />
+      </div>
+
+      <!-- 教师评分、修改意见及评价 -->
+      <div class="my-correct-remark">
+        <Remark :studentId="studentId" :assignmentId="assignmentId" />
       </div>
-      
-      <div class="right-side">
-        <!-- update: 仅保留AI历史对话 -->
-        <div class="my-correct-record">
-            <h2>学生与AI对话历史记录</h2><br>
-            <AIChatter :dialogueId="dataForm.dialogueId" :messages="dataForm.messages" :is-teacher="true"/>
-        </div>
-        
-        <!-- 教师评分、修改意见及评价 -->
-        <div class="my-correct-remark">
-            
-            <Remark :studentId = "studentId" :assignmentId="assignmentId"/>              
-        </div>  
-        
-      <div class = "my-correct-goback">
-        <el-button color="#597D3B" @click="goBack">返回</el-button> 
-      </div>  
-        
+
+      <div class="my-correct-goback">
+        <el-button color="#597D3B" @click="goBack">返回</el-button>
       </div>
-      
-      
-      
+
     </div>
-  </template>
+
+  </div>
+</template>
 
 <script setup lang="ts">
 import AIChatter from "@/components/AIChatter/AIChatter.vue";
 import Dictionaries from "@/views/Home/component/Dictionaries/index.vue";
 import useApis from "@/apis";
-import {useStore} from "@/store";
+import { useStore } from "@/store";
 import router from "@/router"
-import {onMounted, reactive, ref, watchEffect} from "vue";
-import type {engagementVO} from "@/types/vo";
-import type {IDialogue} from "@/types/dialogue.ts";
+import { onMounted, reactive, ref, watchEffect } from "vue";
+import type { engagementVO } from "@/types/vo";
+import type { IDialogue } from "@/types/dialogue.ts";
 import Edit from "@/views/Home/component/Edit/index.vue";
 import Slider from '@/views/Home/component/Silder/index.vue'
 import "./index.scss"
-import {useRoute} from 'vue-router'
+import { useRoute } from 'vue-router'
 import StudentEssay from "../Home/component/StudentEssay/StudentEssay.vue";
-import ContentSelector from "../Home/component/ContentSelector/ContentSelector.vue";
 import StudentWritingRequirements from "../Home/component/StudentEssay/StudentWritingRequirements.vue";
 import Remark from "../Home/component/Remark/Remark.vue";
 
@@ -76,35 +77,35 @@ const dataForm = reactive<{
 })
 
 // 获取数据
-async function fetchData(){
-  await apis.getAIDialogues(assignmentId,studentId )
-      .then((_res:any) => {
-        const data = _res.data.data
-        console.log(data)
-        Object.assign(dataForm, {
-          dialogueId: data?.dialogueId,
-          messages: data?.messages.content,
-          engagement: dataForm.engagement
-        })
+async function fetchData() {
+  await apis.getAIDialogues(assignmentId, studentId)
+    .then((_res: any) => {
+      const data = _res.data.data
+      console.log(data)
+      Object.assign(dataForm, {
+        dialogueId: data?.dialogueId,
+        messages: data?.messages.content,
+        engagement: dataForm.engagement
       })
+    })
 
   await apis.getEngagement(studentId, assignmentId)
-      .then((_res:any) => {
-        console.log(_res)
-        Object.assign(dataForm, {
-          dialogueId: dataForm.dialogueId,
-          messages: dataForm.messages,
-          engagement: _res.data.data
-        })
-      }).catch((_err:any) => {
-        console.log(_err)
-        router.push("/login")
+    .then((_res: any) => {
+      console.log(_res)
+      Object.assign(dataForm, {
+        dialogueId: dataForm.dialogueId,
+        messages: dataForm.messages,
+        engagement: _res.data.data
       })
+    }).catch((_err: any) => {
+      console.log(_err)
+      router.push("/login")
+    })
 }
 
-onMounted( () => {
+onMounted(() => {
   console.log("获取数据")
-  console.log(assignmentId,"assassignmentId的值")
+  console.log(assignmentId, "assassignmentId的值")
   fetchData()
 })
 
@@ -112,12 +113,12 @@ onMounted( () => {
 
 <script lang="ts">
 export default {
-  methods: {  
-    goBack() {  
+  methods: {
+    goBack() {
       // 使用Vue Router的$router.go(-1)来返回上一个页面  
-      this.$router.go(-1);  
-    },  
-  },  
+      this.$router.go(-1);
+    },
+  },
   name: "CorrectPage"
 }
 </script>

src/views/CorrectPage/index.scss

@@ -1,7 +1,5 @@
-
-
 .my-correct {
-    padding: 20px 0 20px 12px;
+    padding: 12px;
     box-sizing: border-box;
     height: calc(100vh - 40px);
     display: flex;
@@ -19,10 +17,9 @@
       height: 100%;
       flex-shrink: 0;
       //border: 1px solid black;
-      background-color:#fff;
-
-      
+      // background-color:#fff;
     }
+
     .right-side{
       display: flex;
       gap: 10px;
@@ -31,15 +28,15 @@
       width: 50%;
 
       .my-correct-record {
+        height: 36vh;
         background-color: #f9f9f9;  
         border-radius: 5px;  
         padding: 15px;  
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        height: 36vh;
         //border: 1px solid black;
         background-color: #fff;
-        
       }
+
       .my-correct-remark {
         background-color: #f9f9f9;  
         border-radius: 5px;  
@@ -48,14 +45,9 @@
         height: 63vh;
         //border: 1px solid black;
         background-color: #fff;
-        
       }
 
 
     }
-
-    
-    
-    
-    
+ 
 }

src/views/Home/component/Remark/Remark.vue

@@ -1,110 +1,100 @@
-<template>  
-  <div>  
-    <div class="rating-component">  
-      <span>评分:&nbsp;&nbsp;</span>  
-      <input  
-        type="number"  
-        class="score-input"  
-        :min="1"  
-        :max="100"  
-        placeholder="暂无分数"
-        title="请输入0~100间的数字"  
-        v-model="correction.score" 
-        :disabled="isStudent" 
-      />  
-    </div>  
-  
-    <div class="textarea" >  
-      <textarea v-model="correction.remark" placeholder="暂无评语" :readonly="isStudent"></textarea>  
-    </div>  
-  
-    <el-button color="#597D3B" @click="handleCorrect" v-if="!isStudent">提交批改</el-button>  
-  </div>  
-</template>  
-  
-<script lang="ts">  
-import { defineComponent, ref, onMounted, computed } from 'vue';  
-import useApis from "@/apis";  
-import { ElMessage } from "element-plus";  
-import router from '@/router';  
+<template>
+  <div>
+    <div class="rating-component">
+      <span>评分:&nbsp;&nbsp;</span>
+      <input type="number" class="score-input" :min="1" :max="100" placeholder="暂无分数" title="请输入0~100间的数字"
+        v-model="correction.score" :disabled="isStudent" />
+    </div>
+
+    <div class="textarea-container">
+      <textarea v-model="correction.remark" placeholder="暂无评语" :readonly="isStudent"></textarea>
+    </div>
+
+    <el-button color="#597D3B" @click="handleCorrect" v-if="!isStudent">提交批改</el-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, computed } from 'vue';
+import useApis from "@/apis";
+import { ElMessage } from "element-plus";
+import router from '@/router';
 import "./index.scss"
-import {useStore} from "@/store";
+import { useStore } from "@/store";
 
 const store = useStore()
 
 
-export default defineComponent({  
-  props: {  
-    studentId: {  
-      type: Number,  
-      required: true  
-    },  
-    assignmentId: {  
-      type: Number,  
-      required: true  
-    }  
-  },  
+export default defineComponent({
+  props: {
+    studentId: {
+      type: Number,
+      required: true
+    },
+    assignmentId: {
+      type: Number,
+      required: true
+    }
+  },
   setup(props) {
-
-    const isStudent = computed(() => store.user.role === 'STUDENT');  
+    const isStudent = computed(() => store.user.role === 'STUDENT');
 
     //定义一个correction接收后端传过来的批改信息（如果有） 
-    const correction = ref({  
-      score: 0,  
-      remark: ''  
-    });  
-  //新增：获取后台批改数据
-  const fetchCorrection = async () => {    
-    const apis = useApis();    
-    try {  
-      const res = await apis.getEngagement(props.studentId, props.assignmentId);  
-      if (res.data.code === 200) {  
-        //这有两个.data，老是漏掉
-        correction.value.score = res.data.data.score;     
-        correction.value.remark = res.data.data.remark;
-      } else {  
-        ElMessage.error("获取批改异常" + res.data.msg);  
-      }  
-    } catch (err) {  
-      console.log(err);  
-      ElMessage.error("请求失败，请重试");  
-    }  
-  };
+    const correction = ref({
+      score: 0,
+      remark: ''
+    });
 
+    //新增：获取后台批改数据
+    const fetchCorrection = async () => {
+      const apis = useApis();
+      try {
+        const res = await apis.getEngagement(props.studentId, props.assignmentId);
+        if (res.data.code === 200) {
+          //这有两个.data，老是漏掉
+          correction.value.score = res.data.data.score;
+          correction.value.remark = res.data.data.remark;
+        } else {
+          ElMessage.error("获取批改异常" + res.data.msg);
+        }
+      } catch (err) {
+        console.log(err);
+        ElMessage.error("请求失败，请重试");
+      }
+    };
 
-    onMounted(() => {  
-      fetchCorrection();  
-    });  
-  
-    const handleCorrect = async () => { 
-      if (isStudent.value) {  
-        ElMessage.error("学生不能提交批改");  
-        return;  
-      }else{
-        const apis = useApis();  
-      try {  
-        await apis.engagementCorrect(props.studentId, props.assignmentId, correction.value)  
-          .then(res => {  
-            if (res.data.code === 200) {  
-              ElMessage.success("批改成功");  
-              router.push(`/home/myCorrect/assignment/${props.assignmentId}`);  
-            } else {  
-              ElMessage.error("批改异常" + res.data.msg);  
-            }  
-          });  
-      } catch (err) {  
-        console.log(err)
-      }  
-      }   
-      
-    };  
-  
-    return {  
-      correction,  
+
+    onMounted(() => {
+      fetchCorrection();
+    });
+
+    const handleCorrect = async () => {
+      if (isStudent.value) {
+        ElMessage.error("学生不能提交批改");
+        return;
+      } else {
+        const apis = useApis();
+        try {
+          await apis.engagementCorrect(props.studentId, props.assignmentId, correction.value)
+            .then(res => {
+              if (res.data.code === 200) {
+                ElMessage.success("批改成功");
+                router.push(`/home/myCorrect/assignment/${props.assignmentId}`);
+              } else {
+                ElMessage.error("批改异常" + res.data.msg);
+              }
+            });
+        } catch (err) {
+          console.log(err)
+        }
+      }
+    };
+
+    return {
+      correction,
       handleCorrect,
-      isStudent  
-    };  
-  }  
+      isStudent
+    };
+  }
 });  
 </script>
-

src/views/Home/component/Remark/index.scss

@@ -36,9 +36,11 @@
 textarea { 
   margin-bottom: 10px; /* 为textarea底部留出空间给提交按钮 */ 
   height:35vh;
-  width: 98%; // 宽度占满父容器  
+  width: 100%; // 宽度占满父容器
+  box-sizing: border-box; // 内容区域包括内边距和边框，不会撑大元素
   padding: 10px; // 内边距   
   border: 1px solid #ccc; // 边框  
   border-radius: 4px; // 边框圆角  
   font-size: 18px;  
+  resize: none; // 禁止用户调整大小
 }   

src/views/Home/component/StudentEssay/StudentEssay.vue

@@ -7,42 +7,33 @@
 
 <template>
     <div>
-      <div style="margin-left: 5%;">
-          <span style="font-weight: 600 " >学生姓名: </span>
-          {{ data.studentName }}
-          <span style="font-weight: 600 " >&nbsp;&nbsp;学生ID: </span>
-          {{ studentId }}
-          
-      </div>
+        <div>
+            <span style="font-weight: 600 ">学生姓名: </span>
+            {{ data.studentName }}
+        </div>
 
         <!-- 最后使用的在线预览是Office Web Viewer（微软） -->
-         <!-- TODO:如果height不用绝对值而是百分比，则无法调整，一直是半边的 -->
-    <div class="iframe-wrapper">  
-        <iframe
-            :src="officeUrl"
-            frameborder="0"
-            width="100%"
-            height="560px"
-        >
-        </iframe>
-    </div>
-            
-       
+        <!-- TODO:如果height不用绝对值而是百分比，则无法调整，一直是半边的 -->
+        <div class="iframe-wrapper">
+            <!-- height计算剩余高度 -->
+            <iframe :src="officeUrl" frameborder="0" width="100%" height="550px">
+            </iframe>
+        </div>
+
     </div>
 </template>
 <!-- TODO:文件无法渲染 -->
 <script setup lang="ts">
-import { onMounted, defineProps ,computed, reactive} from 'vue';
+import { onMounted, defineProps, computed, reactive } from 'vue';
 
 import useApis from '@/apis'; //  API 钩子函数
 
- 
 const apis = useApis()
 
 let data = reactive({
     loading: false,
-    docxUrl:"",
-    studentName:""
+    docxUrl: "",
+    studentName: ""
 })
 
 // 调用 API 获取文档 URL  
@@ -56,21 +47,19 @@ const fetchDocxUrl = async (studentId: number, assignmentId: number) => {
             console.log(_err)
         }).finally(() => {
             data.loading = false
-        })   
+        })
 };
 
-
-
-async function fetchUserAndPrint(studentId) {  
+async function fetchUserAndPrint(studentId) {
     apis.findUserById(props.studentId)
-        .then((res:any)=>{
+        .then((res: any) => {
             data.studentName = res.data.data.records[0].name
-        })    
-}  
+        })
+}
 // Office Web Viewer（微软）实现在线预览
 const officeUrl = computed(() => {
-      return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(data.docxUrl)}`;
-    });
+    return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(data.docxUrl)}`;
+});
 
 // 组件挂载时调用，请求数据的方法
 onMounted(() => {
@@ -79,9 +68,9 @@ onMounted(() => {
 });
 
 const props = defineProps<{
-        studentId: number;
-        assignmentId: number;
-    }>();
+    studentId: number;
+    assignmentId: number;
+}>();
 
 
 </script>
@@ -89,7 +78,6 @@ const props = defineProps<{
 <script lang="ts">
 
 
-
 </script>
 
 <style scoped>
@@ -105,9 +93,11 @@ const props = defineProps<{
     text-align: center;
     padding: 20px;
 }
-.iframe-wrapper {  
-  margin-top: 20px; /* 上边距 */  
-  margin-bottom: 20px; /* 下边距 */
-} 
-</style>
 
+.iframe-wrapper {
+    margin-top: 15px;
+    /* 上边距 */
+    /* margin-bottom: 20px; */
+    /* 下边距 */
+}
+</style>

src/views/Home/component/StudentEssay/StudentWritingRequirements.vue

@@ -19,12 +19,16 @@
           <div class="file">
 
             <template v-if="data.descriptionFile || data.attachments">
-              <div >
+              <div>
+                <span>相关文件下载：</span>
                 <template v-if="data.descriptionFile">
-                  &nbsp;&nbsp;<el-link  @click="downloadFile(data.descriptionFile,data.assignmentName)">相关文件下载：作业要求</el-link>
+                  <el-link  @click="downloadFile(data.descriptionFile,data.assignmentName)">作业要求</el-link>
                 </template>
                 <template v-if="data.attachments">
-                  &nbsp;&nbsp;相关文件下载：<el-link  v-for="(item, index) in data.attachments" :key="index" @click="downloadFile(item, '附件' + index)">附件{{ index+1 }}</el-link>
+                  <span v-for="(item, index) in data.attachments" :key="index">
+                    <span v-if="index !== 0">，</span>
+                    <el-link @click="downloadFile(item, '附件' + index)">附件{{ index+1 }}</el-link>
+                  </span>
                 </template>
               </div>
             </template>

src/views/Home/component/StudentEssay/studentWritingRequirements.scss

@@ -1,14 +1,13 @@
 .homework-details {
-    width: 800px;
+    width: 100%;
     margin: 0 auto;
-    padding: 20px;
+    // padding: 20px;
     //background-color: #fff;
   
     .homework-details-info {
-      padding: 16px;
       box-sizing: border-box;
       border-radius: 7px;
-      border: solid 1px #d0d0d0;
+      // border: solid 1px #d0d0d0;
       display: flex;
       gap: 20px;
       background-color: #fff;
@@ -26,16 +25,14 @@
       }
   
       .file {
-        color: #597D3B;
-
+        font-weight: 600;
+  
         a{
           font-size: 16px;
           color: #597D3B;
         }
       }
-      .item{
-
-      }
+      
     }
 
   }