接口初始化 第一版

src/api/api.js

@@ -1,5 +1,7 @@
 export const BASE = 'http://localhost:3000'
+// export const FILE_UPLOAD = 'http://111.231.196.214:30001/file/upload'
 export const FILE_UPLOAD = '/file/upload'
+export const COMMON_TOKEN = 'https://upload-z2.qiniup.com'
 export const ROUTER_CHAPTER_LIST = '/stu/router/chapterList'
 export const ROUTER_LIST = '/stu/router/list post'
 export const ROUTER_PROCESS = '/stu/router/process'
@@ -16,3 +18,8 @@ export const TASK_WORK_DETAIL = '/stu/task/work/detail'
 export const STU_OFFCOURSE_DETAIL = '/stu/offcourse/detail'
 export const WORK_QUERYWORKDETAILBYID = '/work/queryWorkDetailById'
 export const EXAMINATION_QUERYEXAMINATIONDETAILBYID = '/examination/queryExaminationDetailById'
+export const DISCUSS_COLLECTION = '/discussSubmit/clickDiscussCollectionCountOr POST'
+export const DISCUSS_LIKE = '/discussSubmit/clickDiscussLikeCountOr POST'
+export const DISCUSS_LIST = '/discussSubmit/queryDiscussSubmitDetailByDiscussId'
+export const DISCUSS_DETAIL = '/discuss/getDiscussDetail'
+export const DISCUSS_SUBMIT_REVIEW_LIST = '/discussSubmit/queryDiscussSubmitAndReview'

src/components/FileTypeImg.vue

@@ -0,0 +1,28 @@
+<template>
+  <img class="file"
+       :style="style"
+       :src="{pdf,doc:word,ppt,zip,excel,xlsx:excel,xls:excel,rar,book,md,docx:word}[filePath.split('.').slice(-1)] || book"/>
+</template>
+<script setup>
+import rar from '@/assets/image/file/rar.png'
+import excel from '@/assets/image/file/excel.png'
+import md from '@/assets/image/file/md.png'
+import pdf from '@/assets/image/file/pdf.png'
+import ppt from '@/assets/image/file/ppt.png'
+import word from '@/assets/image/file/word.png'
+import zip from '@/assets/image/file/zip.png'
+import book from '@/assets/image/file/book.png'
+import {defineProps, ref} from "vue";
+
+const {modelValue = [],style} = defineProps({
+  modelValue: String,
+  style: Object
+})
+const filePath = ref(modelValue)
+</script>
+<style lang="scss">
+.file {
+  width: 22px;
+  height: 26px;
+}
+</style>

src/components/img/UploadImg.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-upload
+      :file-list="files"
+      :action="FILE_UPLOAD"
+      method="POST"
+      :show-file-list="false"
+      :on-change="handleChange"
+      ref="imageRef"
+  >
+    <template #trigger>
+      <div>
+        <slot></slot>
+      </div>
+    </template>
+  </el-upload>
+</template>
+<script setup>
+import {FILE_UPLOAD} from "@/api/api";
+import {defineProps, ref} from "vue";
+
+const {modelValue = []} = defineProps({
+  modelValue: []
+})
+
+const emit = defineEmits()
+
+const files = ref(modelValue)
+const imageRef = ref()
+
+function handleChange(e) {
+  console.log(e)
+  if (e.response && e.response.code === 200) {
+    e.url = e.response.data
+  }
+
+  const index = files.value.findIndex(f => f.uid === e.uid)
+  if (index === -1) {
+    files.value.unshift(e)
+  } else {
+    files.value[index] = e
+  }
+  emit('update:modelValue', files)
+}
+
+function remove(i) {
+  files.value.splice(i, 1)
+}
+
+function reUpload(i) {
+  if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') {
+    imageRef.value.abort(files.value[i].raw)
+    files.value[i].status = 'abort';
+  } else if (files.value[i].status === 'fail'||files.value[i].status === 'abort') {
+    imageRef.value.handleStart(files.value[i].raw)
+    imageRef.value.submit()
+  }
+}
+
+function abort(i) {
+  imageRef.value.abort(files.value[i].raw)
+}
+
+
+defineExpose({reUpload, remove})
+
+</script>

src/components/index.js

@@ -1,4 +0,0 @@
-import CompulsoryTag from './tag/CompulsoryTag.vue'
-export {
-	CompulsoryTag
-}

src/mock/mocks/discuss.js

@@ -0,0 +1,138 @@
+export default {
+    DISCUSS_LIST: () => ({
+        "code": 0,
+        "data": {
+            "pageNo": 0,
+            "pageSize": 0,
+            "pages": 0,
+            "rows": [
+                {
+                    "createTime": "",
+                    "createUser": 0,
+                    "discussCollectionCount": 12,
+                    "discussId": "",
+                    "discussLikeCount": "123",
+                    "discussReviewCount": "12",
+                    "discussSubmitContent": "所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，\n" +
+                        "          不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。",
+                    "discussSubmitId": "",
+                    "discussSubmitPictureAddress": "",
+                    "discussSubmitTitle": "从营销角度分析：我的团队需要这些能力",
+                    "stuId": "",
+                    "stuName": "",
+                    "submitReviewVoList": [
+                        {
+                            "createTime": "",
+                            "createUser": 0,
+                            "discussLikeCount": "12",
+                            "discussReviewContent": "",
+                            "discussReviewFlag": "",
+                            "discussReviewId": "",
+                            "discussReviewPictureAddress": "",
+                            "discussSubmitId": "",
+                            "stuId": "",
+                            "stuName": "",
+                            "submitReplyVoList": [
+                                {
+                                    "createTime": "",
+                                    "createUser": 0,
+                                    "discussReplyId": 0,
+                                    "discussReviewId": "",
+                                    "replyContent": "",
+                                    "replyFlag": "",
+                                    "replyPictureAddress": "",
+                                    "reviewStuId": "",
+                                    "reviewStuName": "",
+                                    "stuId": "",
+                                    "stuName": "",
+                                    "updateTime": "",
+                                    "updateUser": 0
+                                }
+                            ],
+                            "updateTime": "",
+                            "updateUser": 0
+                        }
+                    ],
+                    "updateTime": "",
+                    "updateUser": 0
+                }
+            ],
+            "total": 0
+        },
+        "msg": "",
+        "success": true
+    }),
+    DISCUSS_DETAIL: () => ({
+        "code": 0,
+        "data": {
+            "createTime": "",
+            "createUser": 0,
+            "discussExplain": "第二讲：模块化产品展示：班内成员讨论\n" +
+                "进行中",
+            "discussFlag": "",
+            "discussId": 0,
+            "discussName": "请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求",
+            "discussSettings": "",
+            "discussTag": "",
+            "projectId": 0,
+            "updateTime": "",
+            "updateUser": 0
+        },
+        "msg": "",
+        "success": true
+    }),
+    DISCUSS_SUBMIT_REVIEW_LIST: () => ({
+        "code": 0,
+        "data": {
+            "createTime": "",
+            "createUser": 0,
+            "discussCollectionCount": 222,
+            "discussId": "",
+            "discussLikeCount": 123,
+            "discussReviewCount": "",
+            "discussSubmitContent": "所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说， 不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力",
+            "discussSubmitId": "",
+            "discussSubmitPictureAddress": "",
+            "discussSubmitTitle": "从营销角度分析：我的团队需要这些能力",
+            "stuId": "",
+            "stuName": "",
+            "submitReviewVoList": [
+                {
+                    "createTime": "2022-06-21 21:35:12",
+                    "createUser": 0,
+                    "discussLikeCount": "12",
+                    "discussReviewContent": "教师基本功扎实，知识讲解准确，教学设计合理，始终以学生为主体，自主学习，小组交流讨论，上台交流展示等形式，师生配合默契，取得了较好的学习效果。",
+                    "discussReviewFlag": "",
+                    "discussReviewId": "",
+                    "discussReviewPictureAddress": "",
+                    "discussSubmitId": "",
+                    "stuId": "",
+                    "stuName": "罗宗梅",
+                    "submitReplyVoList": [
+                        {
+                            "createTime": "2022-06-21 21:35:12",
+                            "createUser": 0,
+                            "discussReplyId": 0,
+                            "discussReviewId": "",
+                            "replyContent": "教学重难点突出，板书条理清晰。教学步骤设计合理，由浅入深，循序渐进",
+                            "replyFlag": "",
+                            "replyPictureAddress": "",
+                            "reviewStuId": "",
+                            "reviewStuName": "",
+                            "stuId": "",
+                            "stuName": "赵雪莉",
+                            "updateTime": "",
+                            "updateUser": 0
+                        }
+                    ],
+                    "updateTime": "",
+                    "updateUser": 0
+                }
+            ],
+            "updateTime": "",
+            "updateUser": 0
+        },
+        "msg": "",
+        "success": true
+    }),
+}

src/views/discuss/DiscussPage.vue

@@ -2,7 +2,7 @@
   <div class="surveydetail">
     <!-- 面包屑导航 -->
     <div
-      style="display: flex; align-items: center; justify-content: space-between"
+        style="display: flex; align-items: center; justify-content: space-between"
     >
       <div class="crumb">
         <div>混合制项目</div>
@@ -14,16 +14,16 @@
       <div class="prevnext">
         <div class="prev">
           <img
-            style="width: 23px; height: 23px"
-            src="../../assets/image/prev.png"
+              style="width: 23px; height: 23px"
+              src="../../assets/image/prev.png"
           />
           <div style="margin-left: 7px">上一个</div>
         </div>
         <div class="prev" style="margin-left: 31px">
           <div style="margin-right: 7px">下一个</div>
           <img
-            style="width: 23px; height: 23px"
-            src="../../assets/image/next.png"
+              style="width: 23px; height: 23px"
+              src="../../assets/image/next.png"
           />
         </div>
       </div>
@@ -37,92 +37,73 @@
       <!-- 中间部分 -->
       <div class="middletitle">
         <div class="title">
-          请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求
+          {{ disDetail.discussName }}
         </div>
         <button class="btn">发表帖子</button>
       </div>
 
       <div class="line clearfix">
-        <div class="linetitle">第二讲：模块化产品展示：班内成员讨论</div>
+        <div class="linetitle">{{ disDetail.discussExplain }}</div>
         <div class="radi"></div>
         <div class="intime">进行中</div>
       </div>
       <div class="allbtn">
-        <button class="btnone">最新</button>
-        <button class="btntwo" style="margin-left: 20px">最热</button>
+        <button :class="`btnone ${param.searchType==1?'active':''}`" @click="param.searchType=1">最新</button>
+        <button :class="`btntwo ${param.searchType==2?'active':''}`" @click="param.searchType=2"
+                style="margin-left: 20px">最热
+        </button>
       </div>
-      <div class="discusslist">
-        <div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
+      <div class="discusslist" v-for="d in data.rows">
+        <div class="itemtitle">{{ d.discussSubmitTitle }}</div>
         <div class="itemdiscuss">
-          所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
-          不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
+          {{ d.discussSubmitContent }}
         </div>
         <div class="allstar clearfix">
           <div class="sameone pinglun"></div>
-          <div class="count">317</div>
+          <div class="count"> {{ d.discussReviewCount }}</div>
           <div class="sameone dianzan"></div>
-          <div class="count">317</div>
+          <div class="count"> {{ d.discussLikeCount }}</div>
           <div class="sameone shoucang"></div>
-          <div class="count">317</div>
+          <div class="count"> {{ d.discussCollectionCount }}</div>
         </div>
         <div class="thinline"></div>
       </div>
-      <div class="discusslist">
-        <div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
-        <div class="itemdiscuss">
-          所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
-          不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
-        </div>
-        <div class="allstar clearfix">
-          <div class="sameone pinglun"></div>
-          <div class="count">317</div>
-          <div class="sameone dianzan"></div>
-          <div class="count">317</div>
-          <div class="sameone shoucang"></div>
-          <div class="count">317</div>
-        </div>
-        <div class="thinline"></div>
-      </div>
-      <div class="discusslist">
-        <div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
-        <div class="itemdiscuss">
-          所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
-          不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
-        </div>
-        <div class="allstar clearfix">
-          <div class="sameone pinglun"></div>
-          <div class="count">317</div>
-          <div class="sameone dianzan"></div>
-          <div class="count">317</div>
-          <div class="sameone shoucang"></div>
-          <div class="count">317</div>
-        </div>
-        <div class="thinline"></div>
-      </div>
-      <div class="discusslist">
-        <div class="itemtitle">从营销角度分析：我的团队需要这些能力</div>
-        <div class="itemdiscuss">
-          所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，
-          不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。
-        </div>
-        <div class="allstar clearfix">
-          <div class="sameone pinglun"></div>
-          <div class="count">317</div>
-          <div class="sameone dianzan"></div>
-          <div class="count">317</div>
-          <div class="sameone shoucang"></div>
-          <div class="count">317</div>
-        </div>
-        <div class="thinline" style="margin-bottom: 60px"></div>
-      </div>
     </div>
     <!-- 详细内容 -->
   </div>
 </template>
 
 <script>
+import {useRequest} from "@/api/request";
+import {DISCUSS_DETAIL, DISCUSS_LIST, TASK_VOTE_DETAIL} from "@/api/api";
+import {reactive, ref, toRefs} from "vue";
+import {useRoute, useRouter} from "vue-router";
+
 export default {
   name: "DiscussPage",
+  setup() {
+    const {query: {id: discussId}} = useRoute()
+    const param = ref({
+      searchType: 1,
+      discussId
+    })
+    const {data} = useRequest(DISCUSS_LIST, param.value)
+    const {data: disDetail} = useRequest(DISCUSS_DETAIL, {discussId})
+    const state = reactive({
+      activeName: "first",
+    });
+
+    const handleClick = (id) => {
+
+    };
+    return {
+      ...toRefs(state),
+      handleClick,
+      data,
+      param,
+      disDetail
+    };
+  },
 };
 </script>
 
@@ -133,6 +114,7 @@ export default {
   display: table;
   clear: both;
 }
+
 .surveydetail {
   .crumb {
     color: #fff;
@@ -140,18 +122,21 @@ export default {
     font-size: 14px;
     line-height: 24px;
   }
+
   .prevnext {
     display: flex;
     align-items: center;
     font-size: 14px;
     font-weight: 500;
     color: #ffffff;
+
     .prev {
       display: flex;
       align-items: center;
       cursor: pointer;
     }
   }
+
   .title {
     font-size: 20px;
     font-weight: 800;
@@ -160,6 +145,7 @@ export default {
     margin-top: 17px;
     margin-left: -11px;
   }
+
   .bascinfo {
     min-height: 800px;
     width: 100%;
@@ -173,6 +159,7 @@ export default {
       display: flex;
       margin-top: 64px;
       position: relative;
+
       .title {
         font-size: 24px;
         font-weight: 800;
@@ -180,11 +167,13 @@ export default {
         margin-left: 79px;
         margin-right: 210px;
       }
+
       @media screen and (max-width: 1574px) {
         .title {
           margin-bottom: -24px;
         }
       }
+
       .btn {
         cursor: pointer;
         position: absolute;
@@ -201,6 +190,7 @@ export default {
         top: 5px;
       }
     }
+
     .line {
       display: flex;
       margin: 47px 45px 0 75px;
@@ -208,12 +198,14 @@ export default {
       // height: 50px;
       background: #f9f9f9;
       position: relative;
+
       .linetitle {
         margin: 14px 120px 17px 28px;
         font-size: 16px;
         font-weight: 800;
         color: #333333;
       }
+
       .radi {
         position: absolute;
         width: 11px;
@@ -223,6 +215,7 @@ export default {
         margin-top: 19px;
         right: 91px;
       }
+
       .intime {
         position: absolute;
         margin-top: 15px;
@@ -233,20 +226,28 @@ export default {
         right: 36px;
       }
     }
+
     .allbtn {
       margin-top: 21px;
       margin-left: 105px;
+
+      .active {
+        background: #387df7 !important;
+        color: #ffffff !important;
+      }
+
       .btnone {
         width: 44px;
         height: 26px;
-        background: #387df7;
         border-radius: 4px;
         border: 0;
+        background-color: #fff;
         font-size: 14px;
         font-weight: 500;
-        color: #ffffff;
+        color: #6e7b84;
         cursor: pointer;
       }
+
       .btntwo {
         font-size: 14px;
         font-weight: 500;
@@ -256,15 +257,18 @@ export default {
         cursor: pointer;
       }
     }
+
     .discusslist {
       margin-left: 105px;
       margin-top: 39px;
+
       .itemtitle {
         font-size: 16px;
         font-weight: 500;
         color: #333333;
         margin-right: 88px;
       }
+
       .itemdiscuss {
         margin-top: 15px;
         width: 812px;
@@ -274,6 +278,7 @@ export default {
         color: #666666;
         line-height: 24px;
       }
+
       .allstar {
         display: flex;
         margin-top: 18px;
@@ -282,24 +287,29 @@ export default {
           width: 14px;
           height: 14px;
         }
+
         .count {
           margin-left: 7px;
           font-size: 14px;
           font-weight: 500;
           color: #b3bdc4;
         }
+
         .pinglun {
           background-image: url(../../assets/image/pinglun.png);
         }
+
         .dianzan {
           margin-left: 19px;
           background-image: url(../../assets/image/dianzan2.png);
         }
+
         .shoucang {
           margin-left: 19px;
           background-image: url(../../assets/image/shoucang.png);
         }
       }
+
       .thinline {
         // max-width: 1450px;
         width: calc(100% - 88px);

src/views/discussdetail/DiscussDetail.vue

@@ -2,7 +2,7 @@
   <div class="surveydetailpage">
     <!-- 面包屑导航 -->
     <div
-      style="display: flex; align-items: center; justify-content: space-between"
+        style="display: flex; align-items: center; justify-content: space-between"
     >
       <div class="crumb">
         <div>混合制项目</div>
@@ -14,16 +14,16 @@
       <div class="prevnext">
         <div class="prev">
           <img
-            style="width: 23px; height: 23px"
-            src="../../assets/image/prev.png"
+              style="width: 23px; height: 23px"
+              src="../../assets/image/prev.png"
           />
           <div style="margin-left: 7px">上一个</div>
         </div>
         <div class="prev" style="margin-left: 31px">
           <div style="margin-right: 7px">下一个</div>
           <img
-            style="width: 23px; height: 23px"
-            src="../../assets/image/next.png"
+              style="width: 23px; height: 23px"
+              src="../../assets/image/next.png"
           />
         </div>
       </div>
@@ -37,33 +37,26 @@
       <!-- 中间部分 -->
       <div class="middletitle">
         <div class="title">
-          请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求
+          {{ disDetail.discussName }}
         </div>
         <button class="btn">回复</button>
       </div>
 
       <div class="line clearfix">
-        <div class="linetitle">第二讲：模块化产品展示：班内成员讨论</div>
+        <div class="linetitle">{{ disDetail.discussExplain }}</div>
         <div class="radi"></div>
         <div class="intime">进行中</div>
       </div>
       <div class="discusscontent clearfix">
         <div class="contenttop clearfix">
-          <div class="contenttitle">从营销角度分析：我的团队需要这些能力</div>
-          <div class="same dianzan"></div>
-          <div class="count">103</div>
-          <div class="same shoucang"></div>
-          <div class="count">103</div>
+          <div class="contenttitle">{{ data.discussSubmitTitle }}</div>
+          <div class="same dianzan" @click="like(data.discussId)"></div>
+          <div class="count">{{ data.discussLikeCount }}</div>
+          <div class="same shoucang" @click="collection(data.discussId)"></div>
+          <div class="count">{{ data.discussCollectionCount }}</div>
         </div>
         <div class="contentmid">
-          所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。<br />
-          包容成员<br />
-          团队工作需要成员在一起不断地讨论，如果一个人固执己见，无法听取他人的意见，或无法和他人达成一致，团队的工作就无法进行下去。团队的效率在于配合的默契，如果达不成这种默契，团队合作就不可能成功。为此，对待团队中其他成员时一定要抱着宽容的心态，讨论问题的时候对事不对人，即使他人犯了错误，也要本着大家共同进步的目的去帮对方改正，而不是一味斥责。同时也要经常检查自己的缺点，如果意识到了自己的缺点，不妨将它坦诚地讲出来，承认自己的缺点，让大家共同帮助你改进，
-          这是最有效的方法。 <br />
-          获得支持<br />
-          要使自己的工作得到大家的支持和认可，而不是反对，必须让大家喜欢你。但一个人又如何让别人来喜欢你呢?除了在工作中互相支援、互相鼓励外，还应该尽量和大家一起去参加各种活动，或者礼貌地关心一下大家的生活。<br />
-          保持谦虚<br />
-          任何人都不喜欢骄傲自大的人，这种人在团队合作中也不会被大家认可。可能你在某个方面比其他人强，但你更应该将自己的注意力放在他人的强项上，只有这样，才能看到自己的肤浅和无知。因为团队中的任何一位成员，都有自己的专长，所以必须保持足够的谦虚。
+          {{ data.discussSubmitTitle }}
         </div>
       </div>
     </div>
@@ -71,117 +64,110 @@
     <div class="bascinfor">
       <div class="inputone">
         <el-input
-          v-model="textarea1"
-          :autosize="{ minRows: 5, maxRows: 5 }"
-          resize="none"
-          maxlength="100"
-          type="textarea"
-          placeholder="写评论~"
-          @input="textareaInput"
+            v-model="textarea1"
+            :autosize="{ minRows: 5, maxRows: 5 }"
+            resize="none"
+            maxlength="100"
+            type="textarea"
+            placeholder="写评论~"
+            @input="textareaInput"
         />
         <div class="words">{{ textarealength }}/100</div>
         <div class="upload">
-          <div class="allimg">
-            <div>
-              <div class="imgone"></div>
-              <div class="cha"></div>
-            </div>
-            <div style="margin-left: 15px">
-              <div class="imgone"></div>
-              <div class="cha" style="right: 131px"></div>
-            </div>
-            <div style="margin-left: 15px">
-              <div class="imgone"></div>
-              <div class="cha" style="right: 61px"></div>
+          <div style="display: flex">
+            <div class="allimg" v-for="(img,i) in commentSubmitFileList">
+              <div class="imgone" :style="{backgroundImage: `url('${img.url}')`,marginLeft:'15px'}"></div>
+              <div class="cha" @click="removeCommentImg(i)"></div>
             </div>
           </div>
           <datagrid class="uploadAnd">
-            <button class="btnone clearfix">
-              <img class="image" src="../../assets/image/uploadimg.png" />
-              <div class="shangchuan">上传图片</div>
-            </button>
+            <UploadImg v-model="commentSubmitFileList">
+              <button class="btnone clearfix">
+                <img class="image" src="../../assets/image/uploadimg.png"/>
+                <div class="shangchuan">上传图片</div>
+              </button>
+            </UploadImg>
+
             <button class="btntwo">发表</button>
           </datagrid>
         </div>
 
         <div class="thinline"></div>
         <div class="bottom">
-          <div class="header">
-            <div class="avator"></div>
-            <div class="id">罗宗梅</div>
-            <div class="showCareer">(显示事业)</div>
-            <div class="idThink">理性思考，崇尚科学</div>
-          </div>
-          <div class="discuss clearfix">
-            <div class="discussmain clearfix">
-              <div class="talkmain">
-                教师基本功扎实，知识讲解准确，教学设计合理，始终以学生为主体，自主学习，小组交流讨论，上台交流展示等形式，师生配合默契，取得了较好的学习效果。
+          <div v-for="row in data.submitReviewVoList">
+            <div class="header">
+              <div class="avator"></div>
+              <div class="id">{{ row.stuName }}</div>
+              <div class="showCareer">(显示事业)</div>
+              <div class="idThink">理性思考，崇尚科学</div>
+            </div>
+            <div class="discuss clearfix">
+              <div class="discussmain clearfix">
+                <div class="talkmain">
+                  {{ row.discussReviewContent }}
+                </div>
               </div>
-              <!-- <div class="talk"></div> -->
-            </div>
-            <div class="intime">2022-06-21&nbsp;21:35:12</div>
-            <div class="likeYou">
-              <div class="same pinglun"></div>
-              <div class="count">317</div>
-              <div class="same dianzan" style="margin-left: 19px"></div>
-              <div class="count">111</div>
-            </div>
-            <div class="reply">
-              <div class="sameava avaone"></div>
-              <div class="sameuser">赵雪莉</div>
-              <div class="centerreply">回复</div>
-              <div class="sameava avatwo"></div>
-              <div class="sameuser">罗宗梅</div>
-              <div class="replytime">2022-06-21 21:35:12</div>
-            </div>
-            <div class="allreplyimg">
-              <div class="singleimg"></div>
-              <div class="singleimg"></div>
-              <div class="singleimg"></div>
-            </div>
-            <div class="mainreply">
-              <div class="replydetail">
-                教学重难点突出，板书条理清晰。教学步骤设计合理，由浅入深，循序渐进
+              <div class="intime">{{ row.createTime }}</div>
+              <div class="likeYou">
+                <div class="same pinglun"></div>
+                <div class="count">{{ row.discussReviewCount }}</div>
+                <div class="same dianzan" style="margin-left: 19px"></div>
+                <div class="count">{{ row.discussLikeCount }}</div>
+              </div>
+              <div v-for="replay in row.submitReplyVoList">
+                <div class="reply">
+                  <div class="sameava avaone"></div>
+                  <div class="sameuser">{{ replay.stuName }}</div>
+                  <div class="centerreply">回复</div>
+                  <div class="sameava avatwo"></div>
+                  <div class="sameuser">{{ row.stuName }}</div>
+                  <div class="replytime">{{ replay.createTime }}</div>
+                </div>
+                <div class="allreplyimg">
+                  <div class="singleimg"></div>
+                </div>
+                <div class="mainreply">
+                  <div class="replydetail">
+                    {{ replay.replyContent }}
+                  </div>
+                  <!-- <div class="talk"></div> -->
+                </div>
+                <div class="likeYou">
+                  <div class="same pinglun"></div>
+                  <div class="count">无</div>
+                  <div class="same dianzan" style="margin-left: 19px"></div>
+                  <div class="count">无</div>
+                </div>
               </div>
-              <!-- <div class="talk"></div> -->
-            </div>
-            <div class="likeYou">
-              <div class="same pinglun"></div>
-              <div class="count">317</div>
-              <div class="same dianzan" style="margin-left: 19px"></div>
-              <div class="count">111</div>
             </div>
 
+
+          </div>
+          <div class="discuss clearfix">
             <div class="inreply">
               <el-input
-                v-model="textarea2"
-                :autosize="{ minRows: 5, maxRows: 5 }"
-                resize="none"
-                maxlength="100"
-                type="textarea"
-                @input="textareaInputdown"
+                  v-model="textarea2"
+                  :autosize="{ minRows: 5, maxRows: 5 }"
+                  resize="none"
+                  maxlength="100"
+                  type="textarea"
+                  @input="textareaInputdown"
               />
               <div class="words">{{ textarealength2 }}/100</div>
               <div class="upload">
-                <div class="allimg">
-                  <div>
-                    <div class="imgone"></div>
-                    <div class="cha"></div>
-                  </div>
-                  <div style="margin-left: 15px">
-                    <div class="imgone"></div>
-                    <div class="cha" style="right: 131px"></div>
-                  </div>
-                  <div style="margin-left: 15px">
-                    <div class="imgone"></div>
-                    <div class="cha" style="right: 61px"></div>
+                <div style="display: flex">
+                  <div class="allimg" v-for="(img,i) in fileList">
+                    <div class="imgone" :style="{backgroundImage: `url('${img.url}')`,marginLeft:'15px'}"></div>
+                    <div class="cha" @click="removeImg(i)"></div>
                   </div>
                 </div>
                 <datagrid class="uploadAnd">
-                  <button class="btnone clearfix">
-                    <img class="image" src="../../assets/image/uploadimg.png" />
-                    <div class="shangchuan">上传图片</div>
-                  </button>
+                  <UploadImg v-model="fileList">
+                    <button class="btnone clearfix">
+                      <img class="image" src="../../assets/image/uploadimg.png"/>
+                      <div class="shangchuan">上传图片</div>
+                    </button>
+                  </UploadImg>
                   <button class="btntwo">发表</button>
                 </datagrid>
               </div>
@@ -194,34 +180,70 @@
   </div>
 </template>
 
-<script>
-import { reactive, toRefs } from "vue";
-// import { expandKeys } from "element-plus/es/components/table-v2/src/common";
-export default {
-  name: "DiscussDetail",
-  setup() {
-    const state = reactive({
-      textarea1: "",
-      textarealength: 0,
-      textarea2: "",
-      textarealength2: 0,
-    });
-    const textareaInput = (e) => {
-      // console.log("eee", e);
-      state.textarea1 = e;
-      state.textarealength = e.length;
-    };
-    const textareaInputdown = (e) => {
-      state.textarea2 = e;
-      state.textarealength2 = e.length;
-    };
-    return {
-      ...toRefs(state),
-      textareaInput,
-      textareaInputdown,
-    };
-  },
+<script setup>
+import {reactive, ref, toRefs} from "vue";
+import {useRoute} from "vue-router/dist/vue-router";
+import {request, useRequest} from "@/api/request";
+import {
+  DISCUSS_COLLECTION,
+  DISCUSS_DETAIL,
+  DISCUSS_LIKE,
+  DISCUSS_LIST,
+  DISCUSS_SUBMIT_REVIEW_LIST,
+  FILE_UPLOAD
+} from "@/api/api";
+import UploadImg from '@/components/img/UploadImg.vue'
+
+const {query: {id: discussSubmitId, discussId}} = useRoute()
+
+const {data} = useRequest(DISCUSS_SUBMIT_REVIEW_LIST, {discussSubmitId})
+
+const {data: disDetail} = useRequest(DISCUSS_DETAIL, {discussId})
+
+const fileList = ref([])
+const commentSubmitFileList = ref([])
+
+const state = reactive({
+  textarea1: "",
+  textarealength: 0,
+  textarea2: "",
+  textarealength2: 0,
+});
+const {
+  textarea1,
+  textarealength,
+  textarea2,
+  textarealength2
+} = toRefs(state)
+
+const textareaInput = (e) => {
+  state.textarea1 = e;
+  state.textarealength = e.length;
 };
+const textareaInputdown = (e) => {
+  state.textarea2 = e;
+  state.textarealength2 = e.length;
+};
+
+
+function removeImg(i) {
+  fileList.value.splice(i, 1)
+}
+
+function removeCommentImg() {
+  commentSubmitFileList.value.splice(i, 1)
+}
+
+function like(discussSubmitId) {
+  data.value.discussLikeCount += 1
+  request(DISCUSS_LIKE, {discussSubmitId})
+  //todo 帖子和评论 返回是否点赞和收藏
+}
+
+function collection(discussSubmitId) {
+  data.value.discussCollectionCount += 1
+  request(DISCUSS_COLLECTION, {discussSubmitId})
+}
 </script>
 
 <style lang="scss">
@@ -231,6 +253,7 @@ export default {
   display: table;
   clear: both;
 }
+
 .surveydetailpage {
   .crumb {
     color: #fff;
@@ -238,18 +261,21 @@ export default {
     font-size: 14px;
     line-height: 24px;
   }
+
   .prevnext {
     display: flex;
     align-items: center;
     font-size: 14px;
     font-weight: 500;
     color: #ffffff;
+
     .prev {
       display: flex;
       align-items: center;
       cursor: pointer;
     }
   }
+
   .title {
     font-size: 20px;
     font-weight: 800;
@@ -258,6 +284,7 @@ export default {
     margin-top: 17px;
     margin-left: -11px;
   }
+
   .bascinfo {
     width: 100%;
     background: #ffffff;
@@ -268,6 +295,7 @@ export default {
       display: flex;
       margin-top: 64px;
       position: relative;
+
       .title {
         font-size: 24px;
         font-weight: 800;
@@ -275,11 +303,13 @@ export default {
         margin-left: 79px;
         margin-right: 210px;
       }
+
       @media screen and (max-width: 1574px) {
         .title {
           margin-bottom: -24px;
         }
       }
+
       .btn {
         cursor: pointer;
         position: absolute;
@@ -296,6 +326,7 @@ export default {
         top: 5px;
       }
     }
+
     .line {
       display: flex;
       margin: 47px 45px 0 75px;
@@ -303,12 +334,14 @@ export default {
       height: 50px;
       background: #f9f9f9;
       position: relative;
+
       .linetitle {
         margin: 14px 0 17px 28px;
         font-size: 16px;
         font-weight: 800;
         color: #333333;
       }
+
       .radi {
         position: absolute;
         width: 11px;
@@ -318,6 +351,7 @@ export default {
         margin-top: 19px;
         right: 91px;
       }
+
       .intime {
         position: absolute;
         margin-top: 15px;
@@ -328,22 +362,27 @@ export default {
         right: 36px;
       }
     }
+
     .discusscontent {
       margin-left: 105px;
       margin-top: 35px;
+
       .contenttop {
         display: flex;
+
         .contenttitle {
           font-size: 16px;
           font-weight: 500;
           color: #333333;
         }
+
         .same {
           width: 14px;
           height: 14px;
           margin-top: 4px;
           margin-left: 20px;
         }
+
         .count {
           font-size: 14px;
           font-weight: 500;
@@ -351,15 +390,18 @@ export default {
           margin-top: 4px;
           margin-left: 7px;
         }
+
         .dianzan {
           background-image: url(../../assets/image/dianzan2.png);
           // background-size: 100%;
         }
+
         .shoucang {
           background-image: url(../../assets/image/shoucang.png);
           // background-size: 100%;
         }
       }
+
       .contentmid {
         margin: 15px 47px 30px 0;
         font-size: 14px;
@@ -369,6 +411,7 @@ export default {
       }
     }
   }
+
   .bascinfor {
     width: 100%;
     background: #ffffff;
@@ -382,6 +425,7 @@ export default {
       // max-height: 110px;
       margin-left: 88px;
       margin-top: 44px;
+
       .words {
         position: absolute;
         right: 15px;
@@ -391,6 +435,7 @@ export default {
         font-weight: 500;
         color: #333330;
       }
+
       .el-textarea__inner {
         font-size: 14px;
         font-weight: 500;
@@ -401,12 +446,14 @@ export default {
         background-color: rgba(245, 246, 247, 1);
         padding: 11px 25px;
       }
+
       .el-textarea__inner::placeholder {
         font-size: 14px;
         font-weight: 500;
         color: #666666;
         line-height: 24px;
       }
+
       // .el-input__inner {
       //   &::-webkit-input-placeholder {
       //     /* WebKit browsers 适配谷歌 */
@@ -419,6 +466,7 @@ export default {
         .allimg {
           position: relative;
           display: flex;
+
           .imgone {
             margin-top: 24px;
             width: 55px;
@@ -427,6 +475,7 @@ export default {
             background-image: url(../../assets/image/px.png);
             background-size: 100%;
           }
+
           .cha {
             cursor: pointer;
             top: 15px;
@@ -440,12 +489,15 @@ export default {
             background-size: 100%;
           }
         }
+
         .uploadAnd {
           margin-top: 21px;
+
           .btnone {
             cursor: pointer;
             position: absolute;
             right: 140px;
+
             .image {
               padding-top: 8px;
               width: 18px;
@@ -453,6 +505,7 @@ export default {
               // margin-top: 10px;
               margin-left: -60px;
             }
+
             .shangchuan {
               position: absolute;
               right: 20px;
@@ -464,12 +517,14 @@ export default {
               color: #2478ff;
               line-height: 24px;
             }
+
             width: 126px;
             height: 36px;
             border: 1px solid #2478ff;
             border-radius: 4px;
             background-color: #fff;
           }
+
           .btntwo {
             cursor: pointer;
             position: absolute;
@@ -485,6 +540,7 @@ export default {
           }
         }
       }
+
       .thinline {
         margin-top: 26px;
         // width: 1635px;
@@ -492,6 +548,7 @@ export default {
         margin-left: -50px;
         opacity: 0.2;
       }
+
       .bottom {
         margin-top: 31px;
         // width: 100px;
@@ -499,6 +556,7 @@ export default {
         // background-color: #bfa;
         .header {
           display: flex;
+
           .avator {
             width: 41px;
             height: 41px;
@@ -506,6 +564,7 @@ export default {
             background-image: url(../../assets/image/px.png);
             background-size: 100%;
           }
+
           .id {
             margin-left: 8px;
             font-size: 14px;
@@ -514,6 +573,7 @@ export default {
             color: #333333;
             line-height: 41px;
           }
+
           .showCareer {
             margin-left: 7px;
             height: 41px;
@@ -522,6 +582,7 @@ export default {
             color: #666666;
             line-height: 41px;
           }
+
           .idThink {
             margin-left: 17px;
             height: 41px;
@@ -531,11 +592,12 @@ export default {
             line-height: 41px;
           }
         }
+
         .discuss {
           margin-left: 48px;
           margin-top: 23px;
           // width: 100px;
-          widows: 100%;
+          width: 100%;
           // height: 100px;
           // background-color: orange;
           .discussmain {
@@ -543,6 +605,7 @@ export default {
             width: 100%;
             display: flex;
             position: relative;
+
             .talkmain {
               margin-right: 25px;
               margin-top: 2px;
@@ -550,6 +613,7 @@ export default {
               font-weight: 500;
               color: #666666;
             }
+
             // .talk {
             //   position: absolute;
             //   right: 0;
@@ -559,27 +623,33 @@ export default {
             //   background-size: 100%;
             // }
           }
+
           .intime {
             margin-top: 11px;
             font-size: 14px;
             font-weight: 500;
             color: #999999;
           }
+
           .likeYou {
             margin-top: 15px;
             display: flex;
+
             .same {
               width: 14px;
               height: 14px;
             }
+
             .pinglun {
               background-image: url(../../assets/image/pinglun.png);
               background-size: 100%;
             }
+
             .dianzan {
               background-image: url(../../assets/image/dianzan2.png);
               background-size: 100%;
             }
+
             .count {
               margin-left: 7px;
               margin-top: -1px;
@@ -588,6 +658,7 @@ export default {
               color: #b3bdc4;
             }
           }
+
           .reply {
             display: flex;
             margin-top: 32px;
@@ -599,6 +670,7 @@ export default {
               height: 29px;
               border-radius: 50%;
             }
+
             .sameuser {
               margin-left: 14px;
               line-height: 29px;
@@ -607,6 +679,7 @@ export default {
               color: #333333;
               font-size: 14px;
             }
+
             .centerreply {
               height: 29px;
               font-size: 14px;
@@ -616,14 +689,17 @@ export default {
               margin-left: 23px;
               margin-right: 17px;
             }
+
             .avaone {
               background-image: url(../../assets/image/px.png);
               background-size: 100%;
             }
+
             .avatwo {
               background-image: url(../../assets/image/px.png);
               background-size: 100%;
             }
+
             .replytime {
               margin-left: 17px;
               height: 29px;
@@ -633,9 +709,11 @@ export default {
               line-height: 29px;
             }
           }
+
           .allreplyimg {
             display: flex;
             margin-top: 21px;
+
             .singleimg {
               margin-right: 7px;
               width: 65px;
@@ -645,9 +723,11 @@ export default {
               background-size: 100%;
             }
           }
+
           .mainreply {
             display: flex;
             margin-top: 16px;
+
             .replydetail {
               // width: 462px;
               height: 23px;
@@ -657,6 +737,7 @@ export default {
               line-height: 23px;
               margin-right: 11px;
             }
+
             // .talk {
             //   width: 23px;
             //   height: 23px;

src/views/homework/HomeworkPage.vue

@@ -47,72 +47,64 @@
                 </div>
               </div>
             </div>
-            <el-upload
-                v-model:file-list="fileList"
-                :action="FILE_UPLOAD"
-                :on-change="handleChange"
-            >
-              <template #trigger>
-                <button
-                    class="shangchuan"
-                    style="cursor: pointer"
-                    @click="uploadFile"
-                >
-                  上传
-                </button>
-              </template>
-            </el-upload>
+            <UploadImg v-model="fileList" ref="uploadRef">
+              <button
+                  class="shangchuan"
+                  style="cursor: pointer"
+                  @mousemove='showFileList=1'
+                  @mouseout='showFileList=0'
+              >
+                上传
+              </button>
+            </UploadImg>
             <div
                 class="uploadDetail"
-                :style="{ display: uploadfile ? 'block' : 'none' }"
+                :style="{ display: showFileList ? 'block' : 'none' }"
+                @mousemove='showFileList=1'
+                @mouseout='showFileList=0'
+                style="padding-top: 60px"
             >
               <div class="triangle"></div>
               <div class="square clearfix">
-                <div class="squarecontent1">
-                  <div class="rar"></div>
+                <div class="squarecontent1" v-for="(file,i) in fileList">
+                  <FileTypeImg v-model="file.name" :style="{margin:'12px 15px 0 27px'}"></FileTypeImg>
                   <div class="rarDetail">
                     <span class="detail1" style="margin-right: 130px">
-                      文件名称1.rar
+                      {{ file.name }}
                     </span>
-                    <span class="detail2" style="margin-right: 10px">48%</span>
-                    <span class="detail1">正在上传</span>
+                    <span class="detail2" style="margin-right: 10px">{{ file.percentage }}%</span>
+                    <span class="detail1">{{
+                        {
+                          ready: '正在上传',
+                          abort: '暂停',
+                          uploading: '正在上传',
+                          fail: '上传失败',
+                          success: '上传成功'
+                        }[file.status]
+                      }}</span>
                     <div class="progress">
-                      <div class="progressinner"></div>
+                      <div class="progressinner" :style="{width:`${291*file.percentage/100}px`}"></div>
                     </div>
                   </div>
-                  <button class="btn btndetail">暂停</button>
-                  <button class="btn">取消</button>
-                </div>
-
-                <div class="squarecontent2">
-                  <div class="rar"></div>
-                  <div class="rarDetail">
-                    <span class="detail1" style="margin-right: 130px">
-                      文件名称2.rar
-                    </span>
-                    <span class="detail2" style="margin-right: 10px">80%</span>
-                    <span class="detail1">上传失败</span>
-                    <div class="progress">
-                      <div class="progressinner"></div>
-                    </div>
-                  </div>
-                  <button class="btn btndetail">重传</button>
-                  <button class="btn">取消</button>
-                </div>
-
-                <div class="squarecontent3">
-                  <div class="rar"></div>
-                  <div class="rarDetail">
-                    <span class="detail1" style="margin-right: 125px">
-                      文件名称3.rar
-                    </span>
-                    <span class="detail2" style="margin-right: 10px">100%</span>
-                    <span class="detail1">上传成功</span>
-                    <div class="progress">
-                      <div class="progressinner"></div>
-                    </div>
-                  </div>
-                  <button class="btn btndetail">删除</button>
+                  <button class="btn btndetail" @click="reUpload(i)">{{
+                      {
+                        ready: '暂停',
+                        uploading: '暂停',
+                        abort: '开始',
+                        fail: '重传',
+                      }[file.status]
+                    }}
+                  </button>
+                  <button class="btn" @click="remove">{{
+                      {
+                        ready: '取消',
+                        abort: '取消',
+                        uploading: '取消',
+                        fail: '取消',
+                        success: '删除'
+                      }[file.status]
+                    }}
+                  </button>
                 </div>
               </div>
             </div>
@@ -224,77 +216,67 @@
   </div>
 </template>
 
-<script>
-import {reactive, toRefs} from "vue";
+<script setup>
+import {reactive, ref, toRefs} from "vue";
 import {request, useRequest} from "@/api/request";
-import {TASK_WORK_COMMIT, TASK_WORK_DETAIL, FILE_UPLOAD} from "@/api/api";
+import {TASK_WORK_COMMIT, TASK_WORK_DETAIL} from "@/api/api";
 import dayjs from "dayjs";
 import {useRouter} from "vue-router";
+import UploadImg from '@/components/img/UploadImg.vue'
+import FileTypeImg from "@/components/FileTypeImg.vue";
 
-export default {
-  name: "homeWork",
-  setup() {
-    const {data} = useRequest(TASK_WORK_DETAIL, {})
-    const state = reactive({
-      activeName: "first",
-      uploadfile: false,
-      fileList: [],
-      textarea1: "",
-      history: [
-        {
-          id: 1,
-          time: "2022-7-20 00:00",
-          content: "大唐之音鉴赏 - 2022/7/20.zip",
-        },
-        {
-          id: 2,
-          time: "2022-7-18 00:00",
-          content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
-        },
-        {
-          id: 3,
-          time: "2022-7-17 00:00",
-          content: "湖北黄冈语文压卷题.doc",
-        },
-        {
-          id: 2,
-          time: "2022-7-18 00:00",
-          content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
-        },
-        {
-          id: 3,
-          time: "2022-7-17 00:00",
-          content: "湖北黄冈语文压卷题.doc",
-        },
-      ],
-    });
-    const router = useRouter()
-    const handleClick = () => {
-      request(TASK_WORK_COMMIT, {workSubmitDto: {workUploadContent: state.textarea1}}).then(() => {
-        router.back()
-      })
-    };
-    const uploadFile = () => {
-      state.uploadfile = !state.uploadfile;
-    };
-    const handleChange = () => {
-
-    }
-    const textareaInput = (e) => {
-      // console.log("eee", e);
-      state.textarea1 = e;
-    };
-    return {
-      ...toRefs(state),
-      data,
-      dayjs,
-      handleClick,
-      uploadFile,
-      textareaInput,
-      FILE_UPLOAD
-    };
-  },
+const {data} = useRequest(TASK_WORK_DETAIL, {})
+const fileList = ref([])
+const uploadRef = ref()
+const showFileList = ref(0)
+const state = reactive({
+  textarea1: "",
+  history: [
+    {
+      id: 1,
+      time: "2022-7-20 00:00",
+      content: "大唐之音鉴赏 - 2022/7/20.zip",
+    },
+    {
+      id: 2,
+      time: "2022-7-18 00:00",
+      content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
+    },
+    {
+      id: 3,
+      time: "2022-7-17 00:00",
+      content: "湖北黄冈语文压卷题.doc",
+    },
+    {
+      id: 2,
+      time: "2022-7-18 00:00",
+      content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
+    },
+    {
+      id: 3,
+      time: "2022-7-17 00:00",
+      content: "湖北黄冈语文压卷题.doc",
+    },
+  ],
+})
+const {history, textarea1} = toRefs(state);
+const router = useRouter()
+const handleClick = () => {
+  request(TASK_WORK_COMMIT, {workSubmitDto: {workUploadContent: state.textarea1}}).then(() => {
+    router.back()
+  })
 };
+const textareaInput = (e) => {
+  state.textarea1 = e;
+};
+
+function remove(i) {
+  uploadRef.value.remove(i)
+}
+
+function reUpload(i) {
+  uploadRef.value.reUpload(i)
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -408,7 +390,7 @@ export default {
 
         .uploadDetail {
           position: absolute;
-          top: 235px;
+          //top: 235px;
           right: 3px;
           z-index: 100;
 
@@ -465,7 +447,6 @@ export default {
                   border-radius: 4px;
 
                   .progressinner {
-                    width: 131px;
                     height: 8px;
                     background: linear-gradient(0deg, #2478ff 0%, #5093ff 100%);
                     border-radius: 4px;

vite.config.js

@@ -23,6 +23,14 @@ export default defineConfig(({command}) =>
             alias: [
                 {find: '@', replacement: path.resolve(__dirname, 'src')}
             ]
+        }, server: {
+            proxy: {
+                '/file/upload': {
+                    target: 'http://111.231.196.214:30001',
+                    changeOrigin: true,
+                }
+
+            }
         }
     })
 )