Merge branch 'test' into admin_zwk

完成接口1对接

work/package.json

@@ -9,20 +9,34 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/file-saver": "^2.0.7",
+    "@vueup/vue-quill": "^1.2.0",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.7.9",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "echart": "^0.1.3",
     "echarts": "^5.5.1",
     "element-plus": "^2.9.0",
     "elements": "^0.6.0",
+    "file-saver": "^2.0.5",
     "pinia": "^2.2.6",
+    "quill": "^2.0.3",
     "vue": "^3.5.13",
-    "vue-router": "^4.4.5"
+    "vue-quill-editor": "^3.0.6",
+    "vue-router": "^4.4.5",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
     "sass-embedded": "^1.83.0",
     "vite": "^6.0.1",
     "vite-plugin-vue-devtools": "^7.6.5"
+  },
+  "pnpm": {
+    "overrides": {
+      "quill": "2.0.2"
+    }
   }
 }

work/src/api/HomeworkApi.js

@@ -0,0 +1,12 @@
+import service from ".";
+const homeworkApi = {
+    //获取作业
+    getHomeworkQuestion(id) {
+        return service.post('api/homework_client/gethomeworkquestion', {id: id});
+    },
+    //提交作业
+    submitHomework(homework,groupId) {
+        return service.post('api/homework_client/commithomework', {homework,groupId});
+    }
+}
+export default homeworkApi;

work/src/api/ShowApi.js

@@ -0,0 +1,9 @@
+import service from "."
+
+const ShowApi = {
+    //获取作业列表
+    getWorks(){
+        return service.post('/api/homework_client/gethomeworklist')
+    },
+}
+export default ShowApi;

work/src/api/UpdateWorkApi.js

@@ -14,7 +14,7 @@ const UpdateWorkApi={
     },
     //数据导出
     excelexport(data){
-        return service.post("/api/homework_manage/exceleexport",data)
+        return service.post("/api/homework_manage/export-record",data)
     }
 }
 export default UpdateWorkApi;

work/src/api/index.js

@@ -1,3 +1,21 @@
+// import axios from "axios";
+
+// const service = axios.create({
+//     // baseURL: 'http://192.168.8.191:8080',
+//     // baseURL: 'http://localhost:8080',
+//     baseURL: '/api',
+// });
+// // http://192.168.8.191:8080
+
+// //Axios的响应拦截器..
+// service.interceptors.response.use(resp => {
+//     return resp.data;
+// }, error => {
+//     return Promise.reject(error);
+// });
+// export default service;
+
+
 import axios from "axios";
 
 const service = axios.create({
@@ -5,12 +23,29 @@ const service = axios.create({
     // baseURL: 'http://localhost:8080',
     baseURL: '/api',
 });
-// http://192.168.8.191:8080
 
-//Axios的响应拦截器..
+// 假设你的token存储在localStorage中，名为 'access_token'，你可以根据实际情况修改获取方式
+const getToken = () => {
+    return localStorage.getItem('access_token');
+};
+
+// Axios的请求拦截器，在这里添加token到请求头
+service.interceptors.request.use(config => {
+    const token = getToken();
+    if (token) {
+        // 一般后端会约定一个请求头的字段名来接收token，常见的如 'Authorization'，并要求按照一定格式传递，比如 'Bearer <token>'，这里按照此格式添加，你需要根据后端实际要求调整
+        config.headers['token'] = `${token}`;
+    }
+    return config;
+}, error => {
+    return Promise.reject(error);
+});
+
+// Axios的响应拦截器
 service.interceptors.response.use(resp => {
     return resp.data;
 }, error => {
     return Promise.reject(error);
 });
+
 export default service;

work/src/assets/main.css

@@ -0,0 +1,7 @@
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+}
+*{
+    margin: 0;
+}

work/src/main.js

@@ -10,11 +10,13 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
+import { QuillEditor } from '@vueup/vue-quill'
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
 
 const app = createApp(App)
-
 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus, {locale: zhCn,})
+app.component('QuillEditor', QuillEditor)
 
 app.mount('#app')

work/src/router/index.js

@@ -1,9 +1,11 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Login from '../views/Login.vue'
-import AddWork from '../views/AddWork.vue'
-import WorkDetail from '../views/WorkDetail.vue'
-import HomeWorkList from '../views/HomeWork.vue'
-import UpdateWork from '../views/UpdateWork.vue'
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeWork from '../views/HomeWork.vue';
+import Login from '../views/Login.vue';
+import WorksShowView from '../views/WorksShowView.vue';
+import DoHomeworkView from "@/views/DoHomeworkView.vue";
+import AddWork from '../views/AddWork.vue';
+import WorkDetail from '../views/WorkDetail.vue';
+import UpdateWork from '../views/UpdateWork.vue';
 
 const router = createRouter({
   history: createWebHistory(),
@@ -16,7 +18,7 @@ const router = createRouter({
     {
       path: '/list',
       name: 'homeWorklist',
-      component: HomeWorkList,
+      component: HomeWork,
     },
     {
       path:'/addwork',
@@ -24,6 +26,16 @@ const router = createRouter({
       component: AddWork
     },
     {
+      path: '/show',
+      name: 'workshow',
+      component: WorksShowView
+    },
+    {
+      path:'/doWork/:id?/:sub?',
+      name:'doWork',
+      component: DoHomeworkView
+    },
+    {
       path:'/workdetail/:id',
       name:'workdetail',
       component: WorkDetail

work/src/views/DoHomeworkView.vue

@@ -0,0 +1,366 @@
+<template>
+  <div class="container">
+    <div class="main">
+      <div class="content">
+        <div class="title">
+          {{ questionList[0].name }}
+        </div>
+        <template v-for="(question, questionIndex) in questionList" :key="questionIndex">
+          <!-- 单选 -->
+          <template v-if="question.type == 1">
+            <div class="question">
+              {{ questionIndex + 1 }}. {{ question.description }}（单选）
+            </div>
+            <div v-for="(answer, index) in question.content" :key="index" class="answer">
+              <div class="selected">
+                <input :id="`select-${questionIndex}-${index}`" :name="`radio-group-${questionIndex}`" type="radio"
+                       v-model="selectedAnswers[questionIndex]"
+                       :value="answer.text"
+                >
+                <label :for="`select-${questionIndex}-${index}`">{{ answer.text }}</label>
+              </div>
+            </div>
+          </template>
+
+          <!-- 多选 -->
+          <template v-if="question.type == 2">
+            <div class="question">
+              {{ questionIndex + 1 }}. {{ question.description }}（多选）
+            </div>
+            <div v-for="(answer, index) in question.content" :key="index" class="answer">
+              <div class="selected">
+                <input :id="`checkbox-${questionIndex}-${index}`" name="checkbox" type="checkbox"
+                       v-model="selectedAnswers[questionIndex]"
+                       :value="answer.text"
+                >
+                <label :for="`checkbox-${questionIndex}-${index}`">{{ answer.text }}</label>
+              </div>
+            </div>
+          </template>
+
+          <!-- 简答题 -->
+          <template v-if="question.type == 3">
+            <div class="Short-answers">
+              <div class="question">
+                {{ questionIndex + 1 }}. {{ question.description }}
+              </div>
+              <el-input
+                  v-model="editorTitles[questionIndex]"
+                  style="width: 100%; padding: 3.5%"
+                  size="large"
+                  placeholder="请输入标题(5-100字符)"
+                  maxlength="100"
+                  minlength="5"
+                  show-word-limit
+              />
+              <div class="editor">
+                <div style="border: 1px solid #ccc">
+                  <Toolbar
+                      style="border-bottom: 1px solid #ccc"
+                      :editor="editorRefs[questionIndex]"
+                      :defaultConfig="toolbarConfig"
+                      :mode="mode"
+                  />
+                  <Editor
+                      style="height: 500px; overflow-y: hidden;"
+                      v-model="editorContents[questionIndex]"
+                      :defaultConfig="editorConfig"
+                      :mode="mode"
+                      @onCreated="editor => handleCreated(editor, questionIndex)"
+
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
+        </template>
+
+        <!-- 提交按钮 -->
+        <div class="submit">
+          <img src="https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d2foxm6thylaa50qz6lgl.png" @click="submit">
+        </div>
+        <!-- 提交次数 -->
+        <div class="submit-times">
+          <span>您已提交{{sub}}次，每个作业可以提交3次</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+</template>
+
+<script setup>
+import { onMounted, ref, shallowRef } from 'vue';
+import homeworkApi from "@/api/HomeworkApi.js";
+import { ElMessage } from "element-plus";
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+import { onBeforeUnmount } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import {useRoute, useRouter} from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+let groupId = route.params.id;
+let sub = route.params.sub;
+// 编辑器实例，必须用 shallowRef
+const editorRefs = ref([]);
+
+// 内容 HTML
+const editorContents = ref([]);
+const editorTitles = ref([]);
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    editorContents.value = editorContents.value.map(() => '');
+  }, 1500)
+})
+
+const toolbarConfig = {
+  excludeKeys: [
+    'justify',
+    'table',
+    'codeBlock',
+    'divider',
+    'undo',
+    'redo',
+    'insertImage',  // 去掉插入图片
+    'insertLink',   // 去掉插入链接
+    'insertTable',  // 去掉插入表格
+    'video',
+    'group-more-style',
+    'group-image',
+    'group-video',
+    'fullScreen',
+    'todo'
+  ],
+  insertKeys: {
+    index: 0,
+    keys: ['bold', 'italic']
+  }
+}
+
+
+const editorConfig = {
+  placeholder: '请输入内容...',
+  toolbarKeys: toolbarConfig.toolbarKeys
+  }
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  editorRefs.value.forEach(editor => {
+    if (editor == null) return;
+    editor.destroy();
+  });
+})
+
+const handleCreated = (editor, questionIndex) => {
+  editorRefs.value[questionIndex] = editor; // 记录 editor 实例
+  editor.config.toolbarConfig = toolbarConfig; // 确保配置正确应用
+}
+
+const questionList = ref([]);
+
+function getQuestionList() {
+  console.log("ljghasjkhdjksahjkhsajkhjkasd",groupId);
+  homeworkApi.getHomeworkQuestion(groupId).then(resp => {
+    if (resp.code == 200) {
+      questionList.value = resp.data;
+      for (let i = 0; i < questionList.value.length; i++) {
+        questionList.value[i].content = JSON.parse(questionList.value[i].content);
+        // 初始化 editorTitles 和 editorContents
+        editorTitles.value.push('');
+        editorContents.value.push('');
+        // 初始化 selectedAnswers 为数组
+        selectedAnswers.value.push([]);
+      }
+    } else {
+      ElMessage.error("未知错误，请联系管理员");
+    }
+  });
+}
+getQuestionList();
+
+// 提交作业
+const homework = ref([]);
+
+const selectedAnswers = ref([]);
+questionList.value.forEach(() => {
+  selectedAnswers.value.push([]);
+});
+
+// 上一个页面传递的参数 groupId
+function submit() {
+  homework.value = [];
+  for (let i = 0; i < questionList.value.length; i++) {
+    if (questionList.value[i].type == 1 || questionList.value[i].type == 2) {
+      homework.value.push({
+        "id": questionList.value[i].id,
+        "answer": selectedAnswers.value[i],
+        "type": questionList.value[i].type
+      });
+    } else if (questionList.value[i].type == 3) {
+      const editor = editorRefs.value[i];
+      const plainText = editor ? editor.getText() : '';
+      homework.value.push({
+        "id": questionList.value[i].id,
+        "answer": [editorTitles.value[i], plainText],
+        "type": questionList.value[i].type
+      });
+    }
+  }
+  let groupId = route.params.id;
+  let sub = route.params.sub;
+  if (sub <=2){
+    homeworkApi.submitHomework(homework.value, groupId).then(resp => {
+      if (resp.code == 200) {
+        ElMessage.success("提交成功");
+        homework.value = [];
+        router.push("/show");
+      } else {
+        ElMessage.error("未知错误，请联系管理员");
+      }
+    });
+  }else {
+    ElMessage.error("提交失败您，已提交3次，每个作业可以提交3次");
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 34.375rem;
+  height: 114.399375rem;
+}
+
+.main {
+  background-image: url("https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/images/20230823/qiangdianbanHomeWorkBg.png");
+  background-size: contain;
+  background-position: center 0;
+  background-repeat: no-repeat;
+  margin: 0;
+  width: 100%;
+  height: 1830px;
+  text-align: center;
+  position: relative;
+}
+
+.content {
+  position: absolute;
+  width: 93%;
+  height: 80%;
+  overflow-y: scroll;
+  /* 居中显示 */
+  left: 50%;
+  transform: translate(-50%, 0);
+  top: 12.5%;
+  text-align: left;
+}
+
+/* 滚动条样式 */
+.content::-webkit-scrollbar {
+  width: 3px;
+}
+
+.content::-webkit-scrollbar-track {
+  background: #f1f1f1; /* 滚动条轨道的背景色 */
+}
+
+.content::-webkit-scrollbar-thumb {
+  background: #d9d9d9; /* 滚动条滑块的颜色 */
+  border-radius: 6px; /* 滑块的圆角 */
+}
+
+.title {
+  font-size: 1.65rem;
+  font-weight: 600;
+  /* 居中显示 */
+  text-align: center;
+  /*字体颜色*/
+  color: #3f27b1;
+}
+
+.question {
+  padding-top: 10%;
+  padding-left: 4%;
+  font-size: 1.35rem;
+  font-weight: 500;
+}
+
+.answer {
+  padding-top: 2.5%;
+  padding-left: 7%;
+  font-size: 1.35rem;
+}
+
+.selected {
+  display: block;
+  padding: 1% 0 1.2% 0;
+}
+
+
+.selected input[name="checkbox"] {
+  margin-right: 1%;
+  width: 1.2rem;
+  height: 1rem;
+  /* 透明度 */
+  opacity: 0.8;
+  cursor: pointer; /* 鼠标悬停时变成手的形状 */
+}
+.selected input[type="radio"]{
+  margin-right: 1%;
+  width: 1.2rem;
+  height: 1rem;
+  /* 透明度 */
+  opacity: 0.8;
+  cursor: pointer; /* 鼠标悬停时变成手的形状 */
+}
+
+/* 单选按钮选中时的样式 */
+.selected input[type="radio"]:checked {
+  accent-color: blue; /* 设置选中时的颜色为蓝色 */
+}
+
+/* 多选按钮选中时的样式 */
+.selected input[type="checkbox"]:checked {
+  accent-color: blue; /* 设置选中时的颜色为蓝色 */
+}
+
+.selected label {
+  cursor: pointer;
+}
+
+.editor {
+  padding-top: 2.5%;
+  padding-left: 3.5%;
+  padding-right: 3.5%;
+  height: 30rem;
+}
+
+.Short-answers {
+  height: 48rem;
+}
+
+.submit {
+  display: block;
+  text-align: center;
+}
+
+.submit img {
+  padding-top: 2.5%;
+  padding-left: 3.5%;
+  padding-right: 3.5%;
+  cursor: pointer;
+  width: 67%;
+}
+
+.submit-times {
+  font-size: 0.8rem;
+  color: #858585;
+  text-align: center;
+}
+</style>

work/src/views/HomeWork.vue

@@ -165,7 +165,7 @@ const logout = () => {
         console.log(res);
         // 移除axios请求拦截器中设置token的逻辑，恢复到初始状态
         axios.interceptors.request.eject(axios.interceptors.request.handlers.find(
-            handler => handler.fulfilled && handler.fulfilled.toString().includes('Authorization')
+            handler => handler.fulfilled && handler.fulfilled.toString().includes('token')
         ));
     }).catch(err => {
         // 处理退出登录接口调用失败的情况，比如提示错误信息等

work/src/views/Login.vue

@@ -52,7 +52,8 @@ const login = async() => {
             token.value = response.data.token; 
             // 设置axios的请求拦截器，将token添加到后续请求的请求头中
             axios.interceptors.request.use(config => {
-                config.headers.Authorization = `${token.value}`;
+                config.headers.token = `${token.value}`;
+                //config.headers['token'] = token.value;
                 return config;
             });
             console.log(token.value);

work/src/views/WorkDetail.vue

@@ -3,7 +3,8 @@
         <el-container>
             <el-header class="header">
                 <el-text class="header-text">抢点班作业后台管理</el-text>
-                <el-button class="header-button" type="primary" text style="float: right;">退出登录</el-button>
+                <el-button class="header-button" type="primary" text style="float: right;"
+                    @click="logout">退出登录</el-button>
             </el-header>
             <el-main class="main">
                 <div class="main-title">
@@ -83,10 +84,15 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, watch } from 'vue'
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import ClassListApi from '../api/ClassListApi';
 import { ElMessage } from 'element-plus';
 import UpdateWorkApi from '../api/UpdateWorkApi';
+import * as XLSX from 'xlsx';
+import axios from 'axios';
+import LoginApi from '../api/LoginApi';
+const router = useRouter();
+
 
 const back = () => {
     window.history.back()
@@ -125,20 +131,50 @@ const form = ref({
     shopId: "",
 });
 
-//导出数据
 const exportData = async () => {
     try {
         const params = {
+            // 这里假设form.value和id.value是你已有的正确数据获取方式，按需替换成实际的准确值
             ...form.value,
             id: id.value
         };
-        UpdateWorkApi.excelexport(params);
-
+        const response = await axios.post('/api/api/homework_manage/export-record', params, {
+            responseType: 'arraybuffer'
+        });
+        console.log('导出数据:', response);
+        console.log('导出数据:', response.data);
+        // 将返回的二进制数据转换为Blob对象，用于创建下载链接
+        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        // 尝试从响应头中获取Content-Disposition字段来解析文件名
+        const contentDisposition = response.headers['content-disposition'];
+        console.log('文件名:', contentDisposition);
+        if (contentDisposition) {
+            // 使用正则表达式匹配filename
+            const fileNameMatch = contentDisposition.match(/filename=([^"]+)/);
+            if (fileNameMatch && fileNameMatch.length > 1) {
+                const fileName = fileNameMatch[1];
+                a.download = fileName;
+            } else {
+                console.error('无法从Content-Disposition中解析出文件名');
+                return;
+            }
+        } else {
+            console.error('响应头中不存在Content-Disposition字段');
+            return;
+        }
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
     } catch (error) {
+        console.error('详细的请求错误信息：', error);
         ElMessage.error('导出失败');
-        console.error('导出失败', error);
     }
-}
+};
+
 // 搜索方法
 const searchData = async () => {
     try {
@@ -169,7 +205,6 @@ const getDept = async () => {
 getDept();
 
 
-
 const route = useRoute();
 const id = ref(route.params.id)
 console.log(id.value + '============')
@@ -184,11 +219,11 @@ const workdetailData = ref([]);
 //         console.error('接口请求出现错误:', error);
 //     }
 // });
-onMounted(async ()=>{
+onMounted(async () => {
     const refdata = {
         id: id.value,
-        pageNo:PageNo.value, 
-        pageSize:PageSize.value
+        pageNo: PageNo.value,
+        pageSize: PageSize.value
     }
     try {
         const response = await UpdateWorkApi.getrecordbycondition(refdata);
@@ -214,6 +249,16 @@ const getContent = (index) => {
         replies: []
     };
 };
+// 退出登录
+const logout = () => {
+    LoginApi.logout().then(res => {
+
+        router.push('/');
+    }).catch(err => {
+        // 处理退出登录接口调用失败的情况，比如提示错误信息等
+        ElMessage.error('退出登录失败，请稍后重试');
+    })
+}
 </script>
 
 <style scoped>

work/src/views/WorksShowView.vue

@@ -0,0 +1,563 @@
+<script setup>
+import { ref } from 'vue';
+import ShowApi from '../api/ShowApi';
+import { format } from 'date-fns';
+import {useRouter} from "vue-router";
+import {ElMessage} from "element-plus";
+
+const router = useRouter()
+
+//作业展示列表
+const works = ref([]);
+function loadWorks() {
+    ShowApi.getWorks().then(result => {
+        works.value = result.data;
+        console.log(works.value);
+        console.log(result.data)
+        works.value.forEach(work => {
+            let date = work.endData;
+            work.endData = format(new Date(date), 'yyyy-MM-dd');
+        });
+    })
+}
+loadWorks();
+//跳转写作业页面
+function writeWorks(id,sub){
+  if(sub >= 3){
+    ElMessage.error('每个作业可提交3次，您已提交3次。')
+  }else{
+    router.push({
+      path:`/doWork/${id}/${sub}`
+    })
+  }
+
+}
+</script>
+
+<template>
+    <div class="container">
+        <div class="works">
+            <div class="work-header">
+                <img class="ketangzuoye" src="http://39.101.133.168:8857/LiveActivity/img/ketangzuoye.cc888815.png">
+                <img class="book"
+                    src="https://img.js.design/assets/img/65f9235904fb00a3ea731672.png#dcda48ae8da37daeccd6583d45c7790b">
+            </div>
+            <div class="work-list">
+                <div class="list" v-for="work in works">
+                    <div class="work-item">
+                        <div class="work-name">
+                            {{ work.name }}
+                        </div>
+                        <div class="work-content">
+                            <div class="work-time">
+                                    <span class="deadline">截止时间：{{ work.endData }}</span>
+                              <!-- 作业提价状态 -->
+                              <div v-if="work.submit == 0" class="work-status">未提交</div>
+                              <div v-else class="work-status2">已提交</div>
+                            </div>
+                            <div class="work-bottem">
+                                <span class="write" @click="writeWorks(work.groupId,work.submit)">写作业</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.container {
+  width: 27%; /* 假设桌面布局的容器宽度为 80% */
+  margin: 0 auto; /* 居中对齐 */
+}
+body{
+    margin: 0;
+}
+.work-name {
+        opacity: 1;
+        /** 文本1 */
+        font-size: 1.5vw;
+        font-weight: 700;
+        letter-spacing: 0px;
+        color: rgba(53, 56, 112, 1);
+        text-align: left;
+        /*左对齐*/
+        vertical-align: top;
+        /* 这个属性在 Flex 容器中不起作用，将被移除 */
+        display: flex;
+        /* 启用 Flexbox 布局 */
+        align-items: center;
+        /* 垂直居中 */
+        height: 30%;
+        /* 设置高度，根据需要调整 */
+        width: 50%;
+        /* 如果需要，也可以设置宽度 */
+    }
+
+
+.ketangzuoye {
+    margin-top: 2vh;
+    margin-left: 2vw;
+    width: 43%;
+}
+
+.book {
+    float: right;
+    margin-right: 1vw;
+    width: 30%;
+}
+
+
+/* 手机 */
+@media (max-width: 768px) {
+    .container {
+        width: 100%;
+        margin: auto;
+    }
+    .works {
+    /* ../api/ShowApi
+    work\src\assets\bg@3x.png */
+    background-image: url('../assets/bg.png');
+    background-size: 100% 100%;
+    background-color: #8f98f6;
+    width: 100%;
+    min-height: 100vh;
+    position: relative;
+    margin: auto;
+}
+
+.work-list {
+    width: 95%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin: auto;
+}
+
+.list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 97%;
+    height: 16vh;
+    opacity: 1;
+    border-radius: 10px;
+    background-color: rgba(255, 225, 174, 1);
+    margin-bottom: 3%;
+}
+
+.work-item {
+
+    width: 87%;
+    height: 63%;
+    padding: 10px;
+    position: relative;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 245, 235, 1) 100%);
+    border-radius: 10px;
+    border-radius: 10px;
+}
+    .work-name {
+        opacity: 1;
+        /** 文本1 */
+        font-size: 4vw;
+        font-weight: 700;
+        letter-spacing: 0px;
+        color: rgba(53, 56, 112, 1);
+        text-align: left;
+        /*左对齐*/
+        vertical-align: top;
+        /* 这个属性在 Flex 容器中不起作用，将被移除 */
+        display: flex;
+        /* 启用 Flexbox 布局 */
+        align-items: center;
+        /* 垂直居中 */
+        height: 30%;
+        /* 设置高度，根据需要调整 */
+        width: 50%;
+        /* 如果需要，也可以设置宽度 */
+    }
+
+    .work-content {
+    width: 95%;
+    height: 35%;
+    position: absolute;
+    bottom: 10%;
+    display: flex;
+}
+
+.work-time {
+    position: absolute;
+    display: flex;
+    width: 70%;
+    bottom: 12%;
+}
+
+.deadline {
+    color: rgba(142, 142, 142, 1);
+    font-size: 3.6vw;
+    opacity: 1;
+    align-items: center;
+    padding-top: 0.5vw;
+    /* 水平居中 */
+    /* justify-content: center;  */
+}
+
+.work-status {
+    font-size: 3.8vw;
+    display: inline-block;
+    background: rgba(53, 56, 112, 0.1);
+    padding: 1% 3.5%;
+    text-align: center;
+    color: #353870;
+    border-radius: 5px;
+    opacity: 2;
+    margin-left: 5px;
+}
+  .work-status2 {
+    font-size: 3.8vw;
+    display: inline-block;
+    background: #ffe1ae;
+    padding: 1% 3.5%;
+    text-align: center;
+    color: #353870;
+    border-radius: 5px;
+    opacity: 2;
+    margin-left: 5px;
+  }
+
+.work-bottem {
+  cursor: pointer;
+    display: flex;
+    position: absolute;
+    width: 28%;
+    height: 70%;
+    right: 0;
+    bottom: 2%;
+    opacity: 1;
+    border-radius: 50px;
+    background: linear-gradient(270deg, rgba(4, 15, 179, 1) 0%, rgba(120, 89, 255, 1) 100%);
+    border: 1px solid #a5e0f3;
+    justify-content: center;
+    /* 水平居中 */
+    align-items: center;
+    /* 垂直居中 */
+    text-align: center;
+    /* 确保文本在其容器内居中 */
+}
+
+.write {
+    opacity: 1;
+    /** 文本1 */
+    padding: auto;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 0px;
+    line-height: 26.06px;
+    color: rgba(255, 255, 255, 1);
+  
+}
+}
+
+/* 平板 */
+@media (min-width: 768px) and (max-width:1280px) {
+    .container {
+        width: 100%;
+        margin: auto;
+    }
+    .works {
+    /* ../api/ShowApi
+    work\src\assets\bg@3x.png */
+    background-image: url('../assets/bg@2x.png');
+    background-color: #8f98f6;
+    width: 100%;
+    min-height: 100vh;
+    position: relative;
+    margin: auto;
+    background-size: 100% 100%;
+}
+
+    .work-list {
+    width: 95%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin: auto;
+}
+
+.list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 97%;
+    height: 17vh;
+    opacity: 1;
+    border-radius: 10px;
+    background-color: rgba(255, 225, 174, 1);
+    margin-bottom: 3%;
+}
+
+.work-item {
+
+    width: 90%;
+    height: 70%;
+    padding: 10px;
+    position: relative;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 245, 235, 1) 100%);
+    border-radius: 10px;
+    border-radius: 10px;
+}
+    .work-name {
+        opacity: 1;
+        /** 文本1 */
+        font-size: 1.6rem;
+        font-weight: 700;
+        letter-spacing: 0px;
+        color: rgba(53, 56, 112, 1);
+        text-align: left;
+        /*左对齐*/
+        vertical-align: top;
+        /* 这个属性在 Flex 容器中不起作用，将被移除 */
+        display: flex;
+        /* 启用 Flexbox 布局 */
+        align-items: center;
+        /* 垂直居中 */
+        height: 30%;
+        /* 设置高度，根据需要调整 */
+        width: 50%;
+        /* 如果需要，也可以设置宽度 */
+    }
+    .work-content {
+    width: 90%;
+    height: 35%;
+    position: absolute;
+    bottom: 10%;
+    display: flex;
+}
+
+.work-time {
+    position: absolute;
+    display: flex;
+    width: 70%;
+    bottom: 20%;
+}
+
+.deadline {
+    color: rgba(142, 142, 142, 1);
+    font-size: 14px;
+    opacity: 1;
+}
+
+.work-status {
+    display: inline-block;
+    background: rgba(53, 56, 112, 0.1);
+    padding: 0.5% 2%;
+    text-align: center;
+    color: #353870;
+    font-size: 1rem;
+    border-radius: 5px;
+    opacity: 2;
+    margin-left: 5px;
+}
+  .work-status2 {
+    display: inline-block;
+    background: #ffe1ae;
+    padding: 0.5% 2%;
+    text-align: center;
+    color: #353870;
+    font-size: 1rem;
+    border-radius: 5px;
+    opacity: 2;
+    margin-left: 5px;
+  }
+
+.work-bottem {
+  cursor: pointer;
+    display: flex;
+    position: absolute;
+    width: 25%;
+    height: 70%;
+    right: 0%;
+    bottom: 2%;
+    opacity: 1;
+    border-radius: 50px;
+    background: linear-gradient(270deg, rgba(4, 15, 179, 1) 0%, rgba(120, 89, 255, 1) 100%);
+    border: 1px solid #a5e0f3;
+    justify-content: center;
+    /* 水平居中 */
+    align-items: center;
+    /* 垂直居中 */
+    text-align: center;
+    /* 确保文本在其容器内居中 */
+}
+
+.write {
+    opacity: 1;
+    /** 文本1 */
+    padding: auto;
+    font-size: 1.125rem;
+    font-weight: 700;
+    letter-spacing: 0px;
+    line-height: 26.06px;
+    color: rgba(255, 255, 255, 1);
+}
+}
+    /* 电脑 */
+@media (min-width: 1280px) {
+    .container {
+        width: 27%;
+        margin: auto;
+    }
+    .works {
+    /* ../api/ShowApi
+    work\src\assets\bg@3x.png */
+    background-image: url('../assets/bg@3x.png');
+    background-color: #8f98f6;
+    width: 100%;
+    min-height: 100vh;
+    position: relative;
+    margin: auto;
+    background-size: 100% 100%;
+}
+.work-name {
+        opacity: 1;
+        /** 文本1 */
+        font-size: 1.4vw;
+        font-weight: 700;
+        letter-spacing: 0px;
+        color: rgba(53, 56, 112, 1);
+        text-align: left;
+        /*左对齐*/
+        vertical-align: top;
+        /* 这个属性在 Flex 容器中不起作用，将被移除 */
+        display: flex;
+        /* 启用 Flexbox 布局 */
+        align-items: center;
+        /* 垂直居中 */
+        height: 30%;
+        /* 设置高度，根据需要调整 */
+        width: 70%;
+    }
+
+    .work-list {
+    width: 95%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin: auto;
+}
+
+.list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 97%;
+    height: 17vh;
+    opacity: 1;
+    border-radius: 10px;
+    background-color: rgba(255, 225, 174, 1);
+    margin-bottom: 3%;
+}
+
+.work-item {
+
+    width: 90%;
+    height: 70%;
+    padding: 10px;
+    position: relative;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 245, 235, 1) 100%);
+    border-radius: 10px;
+    border-radius: 10px;
+}
+    .work-content {
+    width: 90%;
+    height: 35%;
+    position: absolute;
+    bottom: 10%;
+    display: flex;
+}
+
+.work-time {
+    position: absolute;
+    display: flex;
+    width: 70%;
+    bottom: 15%;
+}
+
+.deadline {
+    color: rgba(142, 142, 142, 1);
+    font-size: 14px;
+    opacity: 1;
+    align-items: center;
+    padding-top: 0.2vw;
+}
+
+.work-status {
+    display: inline-block;
+    background: rgba(53, 56, 112, 0.1);
+    padding: 0.5% 2%;
+    text-align: center;
+    color: #353870;
+    font-size: 1rem;
+    border-radius: 5px;
+    opacity: 2;
+    margin-left: 5px;
+}
+  .work-status2 {
+    display: inline-block;
+    background: #ffe1ae;
+    padding: 0.5% 2%;
+    text-align: center;
+    color: #353870;
+    font-size: 1rem;
+    border-radius: 5px;
+    opacity: 2;
+    margin-left: 5px;
+  }
+.work-bottem {
+    cursor: pointer;
+    display: flex;
+    position: absolute;
+    width: 25%;
+    height: 70%;
+    right: 0%;
+    bottom: 2%;
+    opacity: 1;
+    border-radius: 50px;
+    background: linear-gradient(270deg, rgba(4, 15, 179, 1) 0%, rgba(120, 89, 255, 1) 100%);
+    border: 1px solid #a5e0f3;
+    justify-content: center;
+    /* 水平居中 */
+    align-items: center;
+    /* 垂直居中 */
+    text-align: center;
+    /* 确保文本在其容器内居中 */
+}
+
+.write {
+    opacity: 1;
+    /** 文本1 */
+    padding: auto;
+    font-size: 1.125rem;
+    font-weight: 700;
+    letter-spacing: 0px;
+    line-height: 26.06px;
+    color: rgba(255, 255, 255, 1);
+}
+
+}
+
+.work-list{
+    margin-top: 12%;
+}
+
+
+
+
+
+
+
+</style>