From 933490d804d40cbcc7a12cc12b4d8e04ef60f91d Mon Sep 17 00:00:00 2001
From: lixg <lixg@dongwu-inc.com>
Date: Thu, 2 Feb 2023 18:46:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/faceteach/FaceTeach.vue   | 1316 ++++++++++--------
 src/views/homework/HomeworkPage.vue | 1940 +++++++++++++++------------
 2 files changed, 1796 insertions(+), 1460 deletions(-)

diff --git a/src/views/faceteach/FaceTeach.vue b/src/views/faceteach/FaceTeach.vue
index d18679d..e2c8c5c 100644
--- a/src/views/faceteach/FaceTeach.vue
+++ b/src/views/faceteach/FaceTeach.vue
@@ -1,173 +1,311 @@
 <template>
-	<div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
-	<div class="faceteach" style="padding: 30px">
-		<!-- 面包屑导航 -->
-		<div class="crumb">
-			<div>课程列表</div>
-			<div style="margin-left: 6px; margin-right: 6px">/</div>
-			<div style="font-weight: 700">课程详情</div>
+  <div
+    style="
+      background: #0078fc;
+      height: 150px;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      z-index: -9999;
+    "
+  ></div>
+  <div class="faceteach" style="padding: 30px">
+    <!-- 面包屑导航 -->
+    <div class="crumb">
+      <div>课程列表</div>
+      <div style="margin-left: 6px; margin-right: 6px">/</div>
+      <div style="font-weight: 700">课程详情</div>
 
+      <div v-if="pName != ''" class="return">
+        <div style="display: flex" @click="returnclick">
+          <el-button style="color: #0073fb">
+            <img
+              class="img2"
+              style="margin-right: 11px; cursor: pointer"
+              src="../../assets/image/return.png"
+            />返回</el-button
+          >
+        </div>
+      </div>
+    </div>
+    <!-- 面包屑导航 -->
 
-			<div v-if="pName != ''" class="return">
-				<div style="display: flex" @click="returnclick">
-					<el-button style="color:#0073FB"> <img class="img2" style="margin-right:11px;cursor: pointer;"
-							src="../../assets/image/return.png" />返回</el-button>
-				</div>
-			</div>
-		</div>
-		<!-- 面包屑导航 -->
-
-		<!-- 基本信息 -->
-		<div class="bascinfo">
-			<div style="margin-left: 46px">
-				<div class="title">【面授课】{{ data.planDto?.name }}</div>
-				<div class="time" style="margin-top: 26px">
-					<img style="width: 15px; height: 17px" src="../../assets/image/time.png" />
-					<div style="margin-left: 8px">
-						{{ dayjs(data.planDto?.beginTime).format('YYYY-MM-DD HH:mm') + " 至 " +
-		dayjs(data.planDto?.endTime).format('YYYY-MM-DD HH:mm')
-}}
-					</div>
-				</div>
-				<div v-if="data.planDto?.address" class="time" style="margin-top: 23px">
-					<img style="width: 16px; height: 18px" src="../../assets/image/position.png" />
-					<div style="margin-left: 8px">{{ data.planDto?.address }}</div>
-				</div>
-			</div>
-			<div >
-				<div style="display: flex">
-
-					<botton class="btn" style="margin-right: 20px" :style="{
-		background: isAllowSign? data.signFlag ? '#999' : 'rgb(57, 146, 249)':'#999',
-	}" @click="signClick">{{ data.signFlag ? "已签到" : "签到" }}
-					</botton>
-					<!-- <botton style="background: #999" class="btn" @click="toSurvery" v-if="data.planDto?.evalFlag == 0">
+    <!-- 基本信息 -->
+    <div class="bascinfo">
+      <div style="margin-left: 46px">
+        <div class="title">【面授课】{{ data.planDto?.name }}</div>
+        <div class="time" style="margin-top: 26px">
+          <img
+            style="width: 15px; height: 17px"
+            src="../../assets/image/time.png"
+          />
+          <div style="margin-left: 8px">
+            {{
+              dayjs(data.planDto?.beginTime).format("YYYY-MM-DD HH:mm") +
+              " 至 " +
+              dayjs(data.planDto?.endTime).format("YYYY-MM-DD HH:mm")
+            }}
+          </div>
+        </div>
+        <div v-if="data.planDto?.address" class="time" style="margin-top: 23px">
+          <img
+            style="width: 16px; height: 18px"
+            src="../../assets/image/position.png"
+          />
+          <div style="margin-left: 8px">{{ data.planDto?.address }}</div>
+        </div>
+      </div>
+      <div>
+        <div style="display: flex">
+          <botton
+            class="btn"
+            style="margin-right: 20px"
+            :style="{
+              background: isAllowSign
+                ? data.signFlag
+                  ? '#999'
+                  : 'rgb(57, 146, 249)'
+                : '#999',
+            }"
+            @click="signClick"
+            >{{ data.signFlag ? "已签到" : "签到" }}
+          </botton>
+          <!-- <botton style="background: #999" class="btn" @click="toSurvery" v-if="data.planDto?.evalFlag == 0">
 						评估
 					</botton> -->
-					<botton  v-if="data.planDto?.evalFlag !== 0"  :style="{
-		background: `${new Date(data.planDto?.beginTime).getTime() > new Date().getTime() ? '#999' : data.isSurvery ? '#999' : 'rgb(57, 146, 249)'}`,
-	}" class="btn" @click="toSurvery">{{ data.isSurvery ? "已评估" : "评估" }}
-					</botton>
-				</div>
-			</div>
-		</div>
-		<!-- 基本信息 -->
+          <botton
+            v-if="data.planDto?.evalFlag !== 0"
+            :style="{
+              background: `${
+                new Date(data.planDto?.beginTime).getTime() >
+                new Date().getTime()
+                  ? '#999'
+                  : data.isSurvery
+                  ? '#999'
+                  : 'rgb(57, 146, 249)'
+              }`,
+            }"
+            class="btn"
+            @click="toSurvery"
+            >{{ data.isSurvery ? "已评估" : "评估" }}
+          </botton>
+        </div>
+      </div>
+    </div>
+    <!-- 基本信息 -->
 
-		<!-- 详细信息 -->
-		<div class="detailinfo">
-			<div class="detail">
-				<div class="detailT">
-					<div class="" style="margin-left: 48px; margin-right: 48px">
-						<div class="title">
-							<img style="width: 20px; height: 20px" src="../../assets/image/course.png" />
-							<div class="text">课程详情</div>
-							<div class="box"></div>
-						</div>
-						<div style="display: flex; align-items: center">
-							<div class="content" v-html="data.offcourseDto?.intro"></div>
-						</div>
-					</div>
-				</div>
+    <!-- 详细信息 -->
+    <div class="detailinfo">
+      <div class="detail">
+        <div class="detailT">
+          <div class="" style="margin-left: 48px; margin-right: 48px">
+            <div class="title">
+              <img
+                style="width: 20px; height: 20px"
+                src="../../assets/image/course.png"
+              />
+              <div class="text">课程详情</div>
+              <div class="box"></div>
+            </div>
+            <div style="display: flex; align-items: center">
+              <div class="content" v-html="data.offcourseDto?.intro"></div>
+            </div>
+          </div>
+        </div>
 
-				<div class="detailB">
-					<el-tabs v-model="activeName" @tab-click="handleClick">
-						<el-tab-pane label="课程附件" name="first">
-							<div v-if="data.planDto?.attach === ''"
-								style="font-size: 14px;font-weight: 400; line-height: 24px; cursor: pointer;margin-left: 40px; margin-top: 20px;">
-								此课程无附件
-							</div>
-							<div v-else>
-								<div v-for="(el, index) in formateArr(data.planDto?.attach)" :key="index" class="enclosure"
-									:style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }">
-									<div class="enclosureL">
-										<FileTypeImg :v-model="el.name? el.name : el.slice(el.lastIndexOf('/')+1,el.indexOf('-')) + el.slice(el.lastIndexOf('.'))" :style="{width: '22px',height: '26px',marginLeft: '10px',}"></FileTypeImg>
-										<div style="margin-left: 20px">{{ el.name? el.name : el.slice(el.lastIndexOf('/')+1,el.indexOf('-')) + el.slice(el.lastIndexOf('.')) }}</div>
-									</div>
-									<div>
-										<div v-if="new Date(data.planDto.beginTime).getTime() > new Date().getTime()" class="download">
-											<img style="width: 16px; height: 15px" src="../../assets/image/download.png" />
-											<div style="margin-left: 5px;color:#999;" @click="downloads(el)">
-												下载
-											</div>
-										</div>
-										<div v-else class="download">
-											<img style="width: 16px; height: 15px" src="../../assets/image/download.png" />
-											<div style="margin-left: 5px" @click="download(el.name? el.response.data : el)">
-												下载
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</el-tab-pane>
-						<el-tab-pane label="课程作业" name="second">
-							<div class="work" v-if="data.workDto">
-									<div>
-                    <div class="question">{{ data.workDto?.workName }}</div>
-                    <div style="margin-top: 16px; display: flex">
-                      <div class="tag1" v-if="data.workDto?.workFlag">必修</div>
-                      <div class="tag3" style="margin-left: 11px">作业</div>
+        <div class="detailB">
+          <el-tabs v-model:activeName="activeName" @tab-click="handleClick">
+            <el-tab-pane label="课程附件" name="first">
+              <div
+                v-if="data.planDto?.attach === ''"
+                style="
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 24px;
+                  cursor: pointer;
+                  margin-left: 40px;
+                  margin-top: 20px;
+                "
+              >
+                此课程无附件
+              </div>
+              <div v-else>
+                <div
+                  v-for="(el, index) in formateArr(data.planDto?.attach)"
+                  :key="index"
+                  class="enclosure"
+                  :style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }"
+                >
+                  <div class="enclosureL">
+                    <FileTypeImg
+                      :v-model="
+                        el.name
+                          ? el.name
+                          : el.slice(el.lastIndexOf('/') + 1, el.indexOf('-')) +
+                            el.slice(el.lastIndexOf('.'))
+                      "
+                      :style="{
+                        width: '22px',
+                        height: '26px',
+                        marginLeft: '10px',
+                      }"
+                    ></FileTypeImg>
+                    <div style="margin-left: 20px">
+                      {{
+                        el.name
+                          ? el.name
+                          : el.slice(el.lastIndexOf("/") + 1, el.indexOf("-")) +
+                            el.slice(el.lastIndexOf("."))
+                      }}
                     </div>
                   </div>
-                  <div
-                    :style="{ background: new Date(data.planDto?.beginTime).getTime() > new Date().getTime() ? '#999' : '' }"
-                    class="submit" @click="toWork">
-                    交作业
+                  <div>
+                    <div
+                      v-if="
+                        new Date(data.planDto.beginTime).getTime() >
+                        new Date().getTime()
+                      "
+                      class="download"
+                    >
+                      <img
+                        style="width: 16px; height: 15px"
+                        src="../../assets/image/download.png"
+                      />
+                      <div
+                        style="margin-left: 5px; color: #999"
+                        @click="downloads(el)"
+                      >
+                        下载
+                      </div>
+                    </div>
+                    <div v-else class="download">
+                      <img
+                        style="width: 16px; height: 15px"
+                        src="../../assets/image/download.png"
+                      />
+                      <div
+                        style="margin-left: 5px"
+                        @click="download(el.name ? el.response.data : el)"
+                      >
+                        下载
+                      </div>
+                    </div>
                   </div>
-							</div>
-							<div v-else style=" font-size: 14px; font-weight: 400; line-height: 24px; cursor: pointer;margin-left: 40px;margin-top: 20px; ">
-								此课程无作业
-							</div>
-						</el-tab-pane>
-						<el-tab-pane label="课程考试" name="third" :disabed=dayjs().isBefore(dayjs(data.planDto?.beginTime))>
-
-							<div class="work" v-if="data.examinationDto?.examinationTestName">
-								<div>
-									<div class="question">
-										{{ data.examinationDto?.examinationName }}
-									</div>
-									<div style="margin-top: 16px; display: flex">
-										<div class="tag1" v-if="data.examinationDto?.examinationFlag">
-											必修
-										</div>
-										<div class="tag3" style="margin-left: 11px">考试</div>
-									</div>
-								</div>
-								<div
-									:style="{ background: new Date(data.planDto?.beginTime).getTime() > new Date().getTime() ? '#999' : '' }"
-									class="submit" @click="toExamItem(data.examinationDto)">
-									去考试
-								</div>
-							</div>
-							<div v-else
-								style=" font-size: 14px; font-weight: 400;line-height: 24px;cursor: pointer; margin-left: 40px; margin-top: 20px; ">
-								此课程无考试
-							</div>
-						</el-tab-pane>
-					</el-tabs>
-				</div>
-			</div>
-			<div class="teacher">
-				<div class="title">
-					<img style="width: 21px; height: 23px" src="../../assets/image/livelecturer.png" />
-					<div class="text">面授课讲师</div>
-					<div class="box"></div>
-				</div>
-				<!--        todo #面授课接口 讲师缺少img和介绍-->
-				<div class="teacheritem">
-					<img class="peopleimg" :src="teacherInfo.avatar" />
-					<div class="nameSpan">
-						<div class="teacherName" style="margin-right: 5px">
-							{{ data.planDto?.teacher }}
-						</div>
-						<div class="introduce">{{ data.planDto?.bandDesc }}</div>
-					</div>
-					<!--          <div class="follow">+ 关注</div>-->
-				</div>
-			</div>
-		</div>
-		<!-- 详细信息 -->
-	</div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="课程作业" name="second">
+              <div class="work" v-if="data.workDto">
+                <div>
+                  <div class="question">{{ data.workDto?.workName }}</div>
+                  <div style="margin-top: 16px; display: flex">
+                    <div class="tag1" v-if="data.workDto?.workFlag">必修</div>
+                    <div class="tag3" style="margin-left: 11px">作业</div>
+                  </div>
+                </div>
+                <div
+                  :style="{
+                    background:
+                      new Date(data.planDto?.beginTime).getTime() >
+                      new Date().getTime()
+                        ? '#999'
+                        : '',
+                  }"
+                  class="submit"
+                  @click="toWork"
+                >
+                  交作业
+                </div>
+              </div>
+              <div
+                v-else
+                style="
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 24px;
+                  cursor: pointer;
+                  margin-left: 40px;
+                  margin-top: 20px;
+                "
+              >
+                此课程无作业
+              </div>
+            </el-tab-pane>
+            <el-tab-pane
+              label="课程考试"
+              name="third"
+              :disabed="dayjs().isBefore(dayjs(data.planDto?.beginTime))"
+            >
+              <div class="work" v-if="data.examinationDto?.examinationTestName">
+                <div>
+                  <div class="question">
+                    {{ data.examinationDto?.examinationName }}
+                  </div>
+                  <div style="margin-top: 16px; display: flex">
+                    <div
+                      class="tag1"
+                      v-if="data.examinationDto?.examinationFlag"
+                    >
+                      必修
+                    </div>
+                    <div class="tag3" style="margin-left: 11px">考试</div>
+                  </div>
+                </div>
+                <div
+                  :style="{
+                    background:
+                      new Date(data.planDto?.beginTime).getTime() >
+                      new Date().getTime()
+                        ? '#999'
+                        : '',
+                  }"
+                  class="submit"
+                  @click="toExamItem(data.examinationDto)"
+                >
+                  去考试
+                </div>
+              </div>
+              <div
+                v-else
+                style="
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 24px;
+                  cursor: pointer;
+                  margin-left: 40px;
+                  margin-top: 20px;
+                "
+              >
+                此课程无考试
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+      <div class="teacher">
+        <div class="title">
+          <img
+            style="width: 21px; height: 23px"
+            src="../../assets/image/livelecturer.png"
+          />
+          <div class="text">面授课讲师</div>
+          <div class="box"></div>
+        </div>
+        <!--        todo #面授课接口 讲师缺少img和介绍-->
+        <div class="teacheritem">
+          <img class="peopleimg" :src="teacherInfo.avatar" />
+          <div class="nameSpan">
+            <div class="teacherName" style="margin-right: 5px">
+              {{ data.planDto?.teacher }}
+            </div>
+            <div class="introduce">{{ data.planDto?.bandDesc }}</div>
+          </div>
+          <!--          <div class="follow">+ 关注</div>-->
+        </div>
+      </div>
+    </div>
+    <!-- 详细信息 -->
+  </div>
 </template>
 
 <script setup>
@@ -175,10 +313,10 @@ import { computed, reactive, toRefs, watch, onUnmounted } from "vue";
 import FileTypeImg from "@/components/FileTypeImg.vue";
 import { request, useRequest } from "@/api/request";
 import {
-	STU_OFFCOURSE_DETAIL,
-	TASK_OFFCOURSE_NOTASK_SIGN,
-	TASK_OFFCOURSE_SIGN,
-	TASK_BROADCAST_SIGN,
+  STU_OFFCOURSE_DETAIL,
+  TASK_OFFCOURSE_NOTASK_SIGN,
+  TASK_OFFCOURSE_SIGN,
+  TASK_BROADCAST_SIGN,
 } from "@/api/api";
 import { useRoute, useRouter } from "vue-router";
 import { useUserInfo } from "@/api/utils";
@@ -186,509 +324,517 @@ import { ElMessage, messageConfig } from "element-plus";
 import dayjs from "dayjs";
 const router = useRouter();
 const returnclick = () => {
-	router.back();
+  router.back();
 };
 const {
-	query: { courseId, type, id: taskId },
+  query: { courseId, type, id: taskId },
 } = useRoute();
 
-const { data } = useRequest(STU_OFFCOURSE_DETAIL, { courseId,usePermission:true });
-const teacherInfo = useUserInfo(
-	computed(() => data.value?.planDto?.teacherId)
-);
+const { data } = useRequest(STU_OFFCOURSE_DETAIL, {
+  courseId,
+  usePermission: true,
+});
+const teacherInfo = useUserInfo(computed(() => data.value?.planDto?.teacherId));
 
 const state = reactive({
-	activeName: "first",
-	enclosure: "",
-	isAllowSign: false,
+  activeName: "first",
+  enclosure: "",
+  isAllowSign: false,
 });
 const { activeName, enclosure, isAllowSign } = toRefs(state);
 const handleClick = (tab, event) => {
-	console.log("附件", tab, event);
+  console.log("附件", tab, event);
 };
 const download = (url) => {
-	window.open(url);
+  window.open(url);
 };
 const downloads = (url) => {
-	ElMessage.warning("未到开始时间，请耐心等待！");
+  ElMessage.warning("未到开始时间，请耐心等待！");
 };
 
 function formateArr(strs) {
-	let newArr = [];
-	try{
-		newArr = JSON.parse(strs)
-	} catch {
-		newArr = strs?.split(',')
-	}
-	console.log('112233', newArr)
-	return newArr
+  let newArr = [];
+  try {
+    newArr = JSON.parse(strs);
+  } catch {
+    newArr = strs?.split(",");
+  }
+  console.log("112233", newArr);
+  return newArr;
 }
 
 let timer = null;
 //判断能否签到
 function isSignClick() {
-	timer = setInterval(() => {
-		let beginTime = new Date(data.value.planDto?.beginTime).getTime();
-		let endTime = !data.value.planDto?.afterStart || data.value.afterStart == '0'
-			? new Date(data.value.planDto?.endTime).getTime()
-			: new Date(data.value.planDto?.beginTime).getTime();
-		let nowTime = new Date().getTime();
-		if (data.value.planDto?.beforeStart && data.value.planDto?.afterStart  && data.value.beforeStart !=='0' && data.value.afterStart!=='0') {
-			//有开始前有开始后
-			beginTime = beginTime - data.value.planDto?.beforeStart * 60 * 1000;
-			endTime = endTime + data.value.planDto?.afterStart * 60 * 1000;
-			console.log("1111");
-		} else if (
-			data.value.planDto?.beforeStart &&
-			!data.value.planDto?.afterStart && data.value.beforeStart !== '0' && data.value.afterStart == '0'
-		) {
-			//只有开始前无开始后
-			beginTime = beginTime - data.value.planDto?.beforeStart * 60 * 1000;
-			console.log("11112222");
-		} else if (
-			!data.value.planDto?.beforeStart &&
-			data.value.planDto?.afterStart && data.value.beforeStart == '0' && data.value.afterStart !== '0'
-		) {
-			//无开始前有开始后
-			endTime = endTime + data.value.planDto?.afterStart * 60 * 1000;
-			console.log("1111333");
-		}
-		if (nowTime < endTime && nowTime > beginTime) {
-			state.isAllowSign = true;
-		} else {
-			state.isAllowSign = false;
-		}
-		// console.log(
-		//   "isAllowSign",
-		//   state.isAllowSign,
-		//   nowTime,
-		//   endTime,
-		//   beginTime,
-		//   nowTime < endTime,
-		//   nowTime > beginTime
-		// );
-	}, 1000);
+  timer = setInterval(() => {
+    let beginTime = new Date(data.value.planDto?.beginTime).getTime();
+    let endTime =
+      !data.value.planDto?.afterStart || data.value.afterStart == "0"
+        ? new Date(data.value.planDto?.endTime).getTime()
+        : new Date(data.value.planDto?.beginTime).getTime();
+    let nowTime = new Date().getTime();
+    if (
+      data.value.planDto?.beforeStart &&
+      data.value.planDto?.afterStart &&
+      data.value.beforeStart !== "0" &&
+      data.value.afterStart !== "0"
+    ) {
+      //有开始前有开始后
+      beginTime = beginTime - data.value.planDto?.beforeStart * 60 * 1000;
+      endTime = endTime + data.value.planDto?.afterStart * 60 * 1000;
+      console.log("1111");
+    } else if (
+      data.value.planDto?.beforeStart &&
+      !data.value.planDto?.afterStart &&
+      data.value.beforeStart !== "0" &&
+      data.value.afterStart == "0"
+    ) {
+      //只有开始前无开始后
+      beginTime = beginTime - data.value.planDto?.beforeStart * 60 * 1000;
+      console.log("11112222");
+    } else if (
+      !data.value.planDto?.beforeStart &&
+      data.value.planDto?.afterStart &&
+      data.value.beforeStart == "0" &&
+      data.value.afterStart !== "0"
+    ) {
+      //无开始前有开始后
+      endTime = endTime + data.value.planDto?.afterStart * 60 * 1000;
+      console.log("1111333");
+    }
+    if (nowTime < endTime && nowTime > beginTime) {
+      state.isAllowSign = true;
+    } else {
+      state.isAllowSign = false;
+    }
+    // console.log(
+    //   "isAllowSign",
+    //   state.isAllowSign,
+    //   nowTime,
+    //   endTime,
+    //   beginTime,
+    //   nowTime < endTime,
+    //   nowTime > beginTime
+    // );
+  }, 1000);
 }
 isSignClick();
 
 //签到
 const signClick = () => {
-	if (data.value.signFlag) {
-		return;
-	}
-	// console.log(
-	//   "data.signFlag",
-	//   data.value.signFlag,
-	//   state.isAllowSign,
-	//   !state.isAllowSign
-	// );
-	//if (data.value.planDto.beginTime) {
-	//	let date1 = new Date(data.value.planDto.beginTime).getTime()
-	//	let date2 = new Date().getTime()
-	//	if (date1 > date2) {
-	//		ElMessage.info("未到开始时间，请耐心等待！");
-	//		return;
-	//	}
-	//}
-	if (!state.isAllowSign) {
-		// console.log("data.signFlag", data.value.signFlag, isAllowSign);
-		ElMessage.warning("未在允许签到时间范围内");
-		return;
-	}
+  if (data.value.signFlag) {
+    return;
+  }
+  // console.log(
+  //   "data.signFlag",
+  //   data.value.signFlag,
+  //   state.isAllowSign,
+  //   !state.isAllowSign
+  // );
+  //if (data.value.planDto.beginTime) {
+  //	let date1 = new Date(data.value.planDto.beginTime).getTime()
+  //	let date2 = new Date().getTime()
+  //	if (date1 > date2) {
+  //		ElMessage.info("未到开始时间，请耐心等待！");
+  //		return;
+  //	}
+  //}
+  if (!state.isAllowSign) {
+    // console.log("data.signFlag", data.value.signFlag, isAllowSign);
+    ElMessage.warning("未在允许签到时间范围内");
+    return;
+  }
 
-	data.value.signFlag = 1;
-	ElMessage.warning("签到成功");
+  data.value.signFlag = 1;
+  ElMessage.warning("签到成功");
 
   request(TASK_OFFCOURSE_NOTASK_SIGN, { courseId: courseId });
 };
 
 function toSurvery() {
-	if (data.value.isSurvery) {
-		// return;
-	}
-	if (data.value.planDto.beginTime && dayjs().isBefore(data.value.planDto.beginTime)) {
-		ElMessage.warning("课程未开始，请耐心等待！");
-		return;
-	}
-	if (data.value.planDto.evalFlag == 0) {
-		ElMessage.warning("此课程无评估");
-		return;
-	}
-	router.push({
-		path: "/surveydetail",
-		query: {
-      id:taskId,
-			courseId: data.value.planDto.evaluateId,
-			pName: "面授课",
-			infoId: data.value.planDto.offcoursePlanId,
-			chapterOrStageId: 0,
-			sName: data.value.planDto.name,
-			type:3
-		},
-	});
+  if (data.value.isSurvery) {
+    // return;
+  }
+  if (
+    data.value.planDto.beginTime &&
+    dayjs().isBefore(data.value.planDto.beginTime)
+  ) {
+    ElMessage.warning("课程未开始，请耐心等待！");
+    return;
+  }
+  if (data.value.planDto.evalFlag == 0) {
+    ElMessage.warning("此课程无评估");
+    return;
+  }
+  router.push({
+    path: "/surveydetail",
+    query: {
+      id: taskId,
+      courseId: data.value.planDto.evaluateId,
+      pName: "面授课",
+      infoId: data.value.planDto.offcoursePlanId,
+      chapterOrStageId: 0,
+      sName: data.value.planDto.name,
+      type: 3,
+    },
+  });
 }
 
-
-
 function toWork() {
-	if (data.value.planDto.beginTime) {
-		let date1 = new Date(data.value.planDto.beginTime).getTime()
-		let date2 = new Date().getTime()
-		if (date1 > date2) {
-			ElMessage.warning("未到开始时间，请耐心等待！");
-
-		}
-	}
-	router.push({
-		path: "/homeworkpage",
-		query: {
-			courseId: data.value.workDto.workId,
-			id: taskId,
-			infoId: data.value.planDto.offcoursePlanId,
-			chapterOrStageId: 0,
-			type,
-			pName: "面授课",
-			sName: data.value.planDto.name,
-		},
-	});
+  if (data.value.planDto.beginTime) {
+    let date1 = new Date(data.value.planDto.beginTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 > date2) {
+      ElMessage.warning("未到开始时间，请耐心等待！");
+    }
+  }
+  router.push({
+    path: "/homeworkpage",
+    query: {
+      courseId: data.value.workDto.workId,
+      id: taskId,
+      infoId: data.value.planDto.offcoursePlanId,
+      chapterOrStageId: 0,
+      type,
+      pName: "面授课",
+      sName: data.value.planDto.name,
+    },
+  });
 }
 
 function toExamItem(obj) {
-	if (data.value.planDto.beginTime) {
-		let date1 = new Date(data.value.planDto.beginTime).getTime()
-		let date2 = new Date().getTime()
-		if (date1 > date2) {
-			ElMessage.warning("未到开始时间，请耐心等待！");
-
-		}
-	}
-	console.log("obj", obj.examinationTestId);
-	window.open(import.meta.env.VITE_BOE_EXAM_DETAIL_URL + obj.examinationTestId,'_top'); //测评
-	// router.push({ path: import.meta.env.VITE_BOE_EXAM_DETAIL_URL+ obj.examinationTestId });
+  if (data.value.planDto.beginTime) {
+    let date1 = new Date(data.value.planDto.beginTime).getTime();
+    let date2 = new Date().getTime();
+    if (date1 > date2) {
+      ElMessage.warning("未到开始时间，请耐心等待！");
+    }
+  }
+  console.log("obj", obj.examinationTestId);
+  window.open(
+    import.meta.env.VITE_BOE_EXAM_DETAIL_URL + obj.examinationTestId,
+    "_top"
+  ); //测评
+  // router.push({ path: import.meta.env.VITE_BOE_EXAM_DETAIL_URL+ obj.examinationTestId });
 }
 
 onUnmounted(() => {
-	if (timer) {
-		clearInterval(timer);
-	}
+  if (timer) {
+    clearInterval(timer);
+  }
 });
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss">
 .faceteach {
-	.crumb {
-		color: #fff;
-		display: flex;
-		font-size: 14px;
-		line-height: 24px;
-	}
+  .crumb {
+    color: #fff;
+    display: flex;
+    font-size: 14px;
+    line-height: 24px;
+  }
 
-	.bascinfo {
-		width: 100%;
-		height: 180px;
-		border-radius: 8px;
-		background-color: rgba(255, 255, 255, 1);
-		margin-top: 37px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
+  .bascinfo {
+    width: 100%;
+    height: 180px;
+    border-radius: 8px;
+    background-color: rgba(255, 255, 255, 1);
+    margin-top: 37px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-		.btn {
-			width: 146px;
-			height: 46px;
-			background: #2478ff;
-			border-radius: 4px;
-			box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			color: #fff;
-			font-size: 14px;
-			font-weight: 800;
-			line-height: 24px;
-			cursor: pointer;
-			margin-right: 96px;
-		}
+    .btn {
+      width: 146px;
+      height: 46px;
+      background: #2478ff;
+      border-radius: 4px;
+      box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 14px;
+      font-weight: 800;
+      line-height: 24px;
+      cursor: pointer;
+      margin-right: 96px;
+    }
 
-		.title {
-			font-size: 20px;
-			font-weight: 800;
-			color: #333333;
-			line-height: 24px;
-			margin-left: -9px;
-		}
+    .title {
+      font-size: 20px;
+      font-weight: 800;
+      color: #333333;
+      line-height: 24px;
+      margin-left: -9px;
+    }
 
-		.time {
-			font-size: 14px;
-			color: #6e7b84;
-			line-height: 24px;
-			display: flex;
-			align-items: center;
-		}
-	}
+    .time {
+      font-size: 14px;
+      color: #6e7b84;
+      line-height: 24px;
+      display: flex;
+      align-items: center;
+    }
+  }
 
-	.return {
-		position: absolute;
-		right: 10%;
+  .return {
+    position: absolute;
+    right: 10%;
 
-		.text {
-			text-align: center;
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-		}
-	}
+    .text {
+      text-align: center;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
 
-	.detailinfo {
-		width: 100%;
-		margin-top: 20px;
-		display: flex;
-		align-items: flex-start;
+  .detailinfo {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: flex-start;
 
-		.detail {
-			flex: 1;
-			margin-right: 20px;
+    .detail {
+      flex: 1;
+      margin-right: 20px;
 
-			.detailT {
-				min-height: 263px;
-				background: #ffffff;
-				border-radius: 8px;
-				color: rgba(51, 51, 51, 1);
+      .detailT {
+        min-height: 263px;
+        background: #ffffff;
+        border-radius: 8px;
+        color: rgba(51, 51, 51, 1);
 
-				.title {
-					display: flex;
-					align-items: center;
-					padding-top: 39px;
-					position: relative;
-				}
+        .title {
+          display: flex;
+          align-items: center;
+          padding-top: 39px;
+          position: relative;
+        }
 
-				.title .text {
-					margin-left: 8px;
-					font-size: 16px;
-					color: rgba(51, 51, 51, 1);
-					font-weight: 800;
-				}
+        .title .text {
+          margin-left: 8px;
+          font-size: 16px;
+          color: rgba(51, 51, 51, 1);
+          font-weight: 800;
+        }
 
-				.title .box {
-					width: 75px;
-					height: 10px;
-					background-color: rgba(36, 120, 255, 0.15);
-					position: absolute;
-					left: 23px;
-					top: 53px;
-				}
+        .title .box {
+          width: 75px;
+          height: 10px;
+          background-color: rgba(36, 120, 255, 0.15);
+          position: absolute;
+          left: 23px;
+          top: 53px;
+        }
 
-				.content {
-					margin-left: 8px;
-					font-size: 14px;
-					color: rgba(51, 51, 48, 1);
-					font-weight: 500;
-					line-height: 35px;
-					margin-top: 30px;
-					padding-bottom: 30px;
-				}
-			}
+        .content {
+          margin-left: 8px;
+          font-size: 14px;
+          color: rgba(51, 51, 48, 1);
+          font-weight: 500;
+          line-height: 35px;
+          margin-top: 30px;
+          padding-bottom: 30px;
+        }
+      }
 
-			.detailB {
-				min-height: 363px;
-				background: #ffffff;
-				border-radius: 8px;
-				margin-top: 20px;
+      .detailB {
+        min-height: 363px;
+        background: #ffffff;
+        border-radius: 8px;
+        margin-top: 20px;
 
-				.wenxintishi {
-					display: flex;
-					justify-content: stretch;
-					padding: 72px;
-				}
+        .wenxintishi {
+          display: flex;
+          justify-content: stretch;
+          padding: 72px;
+        }
 
-				.el-tabs__item {
-					height: 69px;
-					padding: 25px 7px 0px 52px;
-					font-size: 14px;
-					font-weight: 500;
-				}
+        .el-tabs__item {
+          height: 69px;
+          padding: 25px 7px 0px 52px;
+          font-size: 14px;
+          font-weight: 500;
+        }
 
-				.el-tabs__nav-wrap::after {
-					background-color: rgba(56, 125, 247, 0.2);
-				}
+        .el-tabs__nav-wrap::after {
+          background-color: rgba(56, 125, 247, 0.2);
+        }
 
-				.enclosure {
-					height: 89px;
-					margin-left: 51px;
-					margin-right: 40px;
-					// border-bottom: 1px solid rgba(56, 125, 247, 0.2);
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
+        .enclosure {
+          height: 89px;
+          margin-left: 51px;
+          margin-right: 40px;
+          // border-bottom: 1px solid rgba(56, 125, 247, 0.2);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
 
-					.enclosureL {
-						display: flex;
-						align-items: center;
-						font-size: 14px;
-						font-weight: 400;
-						color: #677d86;
-						line-height: 24px;
-					}
+          .enclosureL {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #677d86;
+            line-height: 24px;
+          }
 
-					.download {
-						display: flex;
-						align-items: center;
-						font-size: 16px;
-						font-weight: 400;
-						color: #2478ff;
-						line-height: 24px;
-						cursor: pointer;
-					}
-				}
+          .download {
+            display: flex;
+            align-items: center;
+            font-size: 16px;
+            font-weight: 400;
+            color: #2478ff;
+            line-height: 24px;
+            cursor: pointer;
+          }
+        }
 
-				.work {
-					margin-left: 51px;
-					margin-right: 40px;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					margin-top: 37px;
-				}
+        .work {
+          margin-left: 51px;
+          margin-right: 40px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 37px;
+        }
 
-				.work .question {
-					font-size: 14px;
-					font-weight: 500;
-					color: #333330;
-					line-height: 18px;
-				}
+        .work .question {
+          font-size: 14px;
+          font-weight: 500;
+          color: #333330;
+          line-height: 18px;
+        }
 
-				.work .submit {
-					width: 126px;
-					height: 46px;
-					background: #2478ff;
-					box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
-					border-radius: 4px;
-					font-size: 16px;
-					font-weight: 800;
-					color: #ffffff;
-					line-height: 24px;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					cursor: pointer;
-				}
-			}
-		}
+        .work .submit {
+          width: 126px;
+          height: 46px;
+          background: #2478ff;
+          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+          border-radius: 4px;
+          font-size: 16px;
+          font-weight: 800;
+          color: #ffffff;
+          line-height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+        }
+      }
+    }
 
-		.teacher {
-			width: 434px;
-			min-height: 500px;
-			// height: 10%;
-			background-color: rgba(255, 255, 255, 1);
-			border-radius: 8px;
+    .teacher {
+      width: 434px;
+      min-height: 500px;
+      // height: 10%;
+      background-color: rgba(255, 255, 255, 1);
+      border-radius: 8px;
 
-			.title {
-				display: flex;
-				align-items: center;
-				padding-top: 39px;
-				position: relative;
-				margin-left: 48px;
-			}
+      .title {
+        display: flex;
+        align-items: center;
+        padding-top: 39px;
+        position: relative;
+        margin-left: 48px;
+      }
 
-			.title .text {
-				margin-left: 8px;
-				font-size: 16px;
-				color: rgba(51, 51, 51, 1);
-				font-weight: 800;
-			}
+      .title .text {
+        margin-left: 8px;
+        font-size: 16px;
+        color: rgba(51, 51, 51, 1);
+        font-weight: 800;
+      }
 
-			.title .box {
-				width: 75px;
-				height: 10px;
-				background-color: rgba(36, 120, 255, 0.15);
-				position: absolute;
-				left: 23px;
-				top: 53px;
-			}
+      .title .box {
+        width: 75px;
+        height: 10px;
+        background-color: rgba(36, 120, 255, 0.15);
+        position: absolute;
+        left: 23px;
+        top: 53px;
+      }
 
-			.teacheritem {
-				margin-left: 48px;
-				margin-right: 48px;
-				// min-height: 115px;
-				margin-top: 20px;
-				padding: 25px 0px;
-				display: flex;
-				position: relative;
+      .teacheritem {
+        margin-left: 48px;
+        margin-right: 48px;
+        // min-height: 115px;
+        margin-top: 20px;
+        padding: 25px 0px;
+        display: flex;
+        position: relative;
 
-				// align-items: center;
-			}
+        // align-items: center;
+      }
 
-			.teacheritem .peopleimg {
-				width: 60px;
-				height: 60px;
-				border-radius: 30px;
-			}
+      .teacheritem .peopleimg {
+        width: 60px;
+        height: 60px;
+        border-radius: 30px;
+      }
 
-			.teacheritem {
-				.nameSpan {
-					width: 190px;
-					display: flex;
-					align-items: center;
-					justify-content: center;
+      .teacheritem {
+        .nameSpan {
+          width: 190px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
 
-					.teacherName {
-						font-size: 14px;
-						font-weight: bold;
-						color: #394145;
-						display: flex;
-						align-items: center;
-					}
-				}
+          .teacherName {
+            font-size: 14px;
+            font-weight: bold;
+            color: #394145;
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
 
+      .teacheritem {
+        .nameSpan {
+          width: 190px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
 
-			}
+          .teacherName {
+            font-size: 14px;
+            font-weight: bold;
+            color: #394145;
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
 
-			.teacheritem {
-				.nameSpan {
-					width: 190px;
-					display: flex;
-					align-items: center;
-					justify-content: center;
+      .teacheritem .introduce {
+        font-size: 14px;
+        font-weight: 500;
+        color: #394145;
+        margin-top: 14px;
+      }
 
-					.teacherName {
-						font-size: 14px;
-						font-weight: bold;
-						color: #394145;
-						display: flex;
-						align-items: center;
-					}
-				}
-
-			}
-
-			.teacheritem .introduce {
-				font-size: 14px;
-				font-weight: 500;
-				color: #394145;
-				margin-top: 14px;
-			}
-
-			.teacheritem .follow {
-				width: 80px;
-				height: 30px;
-				background: #387df7;
-				border-radius: 4px;
-				margin-top: 28px;
-				position: absolute;
-				right: -25px;
-				font-size: 14px;
-				font-weight: 500;
-				color: #ffffff;
-				line-height: 24px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				cursor: pointer;
-			}
-		}
-
-
-	}
+      .teacheritem .follow {
+        width: 80px;
+        height: 30px;
+        background: #387df7;
+        border-radius: 4px;
+        margin-top: 28px;
+        position: absolute;
+        right: -25px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/homework/HomeworkPage.vue b/src/views/homework/HomeworkPage.vue
index 35ae47d..7efbba7 100644
--- a/src/views/homework/HomeworkPage.vue
+++ b/src/views/homework/HomeworkPage.vue
@@ -1,273 +1,448 @@
 <template>
-	<div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
-	<div class="homework" style="padding: 30px">
-		<!-- 面包屑导航 -->
-		<div class="crumb">
-			<div>{{ pName }}</div>
-			<div style="margin-left: 6px; margin-right: 6px">/</div>
-			<div>{{ sName }}</div>
-			<div style="margin-left: 6px; margin-right: 6px">/</div>
-			<div style="font-weight: 700; font-size: 16px">作业详情</div>
-			<!--
+  <div
+    style="
+      background: #0078fc;
+      height: 150px;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      z-index: -9999;
+    "
+  ></div>
+  <div class="homework" style="padding: 30px">
+    <!-- 面包屑导航 -->
+    <div class="crumb">
+      <div>{{ pName }}</div>
+      <div style="margin-left: 6px; margin-right: 6px">/</div>
+      <div>{{ sName }}</div>
+      <div style="margin-left: 6px; margin-right: 6px">/</div>
+      <div style="font-weight: 700; font-size: 16px">作业详情</div>
+      <!--
       <div class="preNext">
         <button class="btn btn01"></button>
         <span class="content" style="margin-left: 6px">上一个</span>
         <span class="content" style="margin-left: 31px">下一个</span>
         <button class="btn btn02" style="margin-left: 6px"></button>
       </div>-->
-			<div class="return">
-				<div style="display: flex" @click="returnclick">
-					<el-button style="color:#0073FB"> <img class="img2" style="margin-right:11px;cursor: pointer;"
-							src="../../assets/image/return.png" />返回</el-button>
-				</div>
-			</div>
-		</div>
-		<!-- 面包屑导航 -->
-		<div class="debateTitle" style="color: #fff">
-			【作业】{{ data?.workName }}
-		</div>
-		<!-- 详细信息 -->
-		<div class="detailinfo">
-			<div class="detail">
-				<div class="detailT">
-					<div style="
+      <div class="return">
+        <div style="display: flex" @click="returnclick">
+          <el-button style="color: #0073fb">
+            <img
+              class="img2"
+              style="margin-right: 11px; cursor: pointer"
+              src="../../assets/image/return.png"
+            />返回</el-button
+          >
+        </div>
+      </div>
+    </div>
+    <!-- 面包屑导航 -->
+    <div class="debateTitle" style="color: #fff">
+      【作业】{{ data?.workName }}
+    </div>
+    <!-- 详细信息 -->
+    <div class="detailinfo">
+      <div class="detail">
+        <div class="detailT">
+          <div
+            style="
               margin-left: 45px;
               margin-right: 42px;
               position: relative;
               width: 100%;
-            ">
-						<div class="title">
-							<img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
-							<div class="text">作业名称</div>
-							<div class="box"></div>
-						</div>
-						<div class="shapan">
-							<div style="flex: 1; width: 0">
-								<div class="shapanexplain">
-									{{ data?.workName }}
-								</div>
-							</div>
-						</div>
-						<div v-if="projectStatus && projectEndTime">
-							<div v-if="projectStatus !=='3' && new Date(projectEndTime).getTime() > new Date().getTime()" >
-								<div v-if="dayjs().isBefore(dayjs(data?.submitEndTime)) && dayjs(data?.submitStartTime).isBefore(dayjs())">
-									<UploadImg v-model:value="fileList" ref="uploadRef">
-										<button class="shangchuan" style="cursor: pointer">
-											上传
-										</button>
-									</UploadImg>
-								</div>
-							</div>
-						</div>
-						<div v-else>
-							<div>
-								<div v-if="dayjs().isBefore(dayjs(data?.submitEndTime)) && dayjs(data?.submitStartTime).isBefore(dayjs())">
-									<UploadImg v-model:value="fileList" ref="uploadRef">
-										<button class="shangchuan" style="cursor: pointer">
-											上传
-										</button>
-									</UploadImg>
-								</div>
-							</div>
-						</div>
-						<div class="uploadDetail"
-							:style="{ display: showFileList && fileList && fileList.length > 0 ? 'block' : 'none' }"
-							@mousemove="showFileList = 1" @mouseout="showFileList = 0" style="padding-top: 60px">
-							<div class="triangle"></div>
-							<div class="square clearfix">
-								<div class="squarecontent1" v-for="(file, i) in fileList" :key="i">
-									<FileTypeImg v-model="file.name" :style="{ margin: '12px 15px 0 27px' }"></FileTypeImg>
-									<div class="rarDetail">
-										<span class="detail1" style="margin-right: 130px">
-											{{ file.name }}
-										</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" :style="{ width: `${(291 * file.percentage) / 100}px` }"></div>
-										</div>
-									</div>
-									<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>
+            "
+          >
+            <div class="title">
+              <img
+                style="width: 20px; height: 20px"
+                src="../../assets/image/yuan.png"
+              />
+              <div class="text">作业名称</div>
+              <div class="box"></div>
+            </div>
+            <div class="shapan">
+              <div style="flex: 1; width: 0">
+                <div class="shapanexplain">
+                  {{ data?.workName }}
+                </div>
+              </div>
+            </div>
+            <div v-if="projectStatus && projectEndTime">
+              <div
+                v-if="
+                  projectStatus !== '3' &&
+                  new Date(projectEndTime).getTime() > new Date().getTime()
+                "
+              >
+                <div
+                  v-if="
+                    dayjs().isBefore(dayjs(data?.submitEndTime)) &&
+                    dayjs(data?.submitStartTime).isBefore(dayjs())
+                  "
+                >
+                  <UploadImg v-model:value="fileList" ref="uploadRef">
+                    <button class="shangchuan" style="cursor: pointer">
+                      上传
+                    </button>
+                  </UploadImg>
+                </div>
+              </div>
+            </div>
+            <div v-else>
+              <div>
+                <div
+                  v-if="
+                    dayjs().isBefore(dayjs(data?.submitEndTime)) &&
+                    dayjs(data?.submitStartTime).isBefore(dayjs())
+                  "
+                >
+                  <UploadImg v-model:value="fileList" ref="uploadRef">
+                    <button class="shangchuan" style="cursor: pointer">
+                      上传
+                    </button>
+                  </UploadImg>
+                </div>
+              </div>
+            </div>
+            <div
+              class="uploadDetail"
+              :style="{
+                display:
+                  showFileList && fileList && fileList.length > 0
+                    ? 'block'
+                    : 'none',
+              }"
+              @mousemove="showFileList = 1"
+              @mouseout="showFileList = 0"
+              style="padding-top: 60px"
+            >
+              <div class="triangle"></div>
+              <div class="square clearfix">
+                <div
+                  class="squarecontent1"
+                  v-for="(file, i) in fileList"
+                  :key="i"
+                >
+                  <FileTypeImg
+                    v-model="file.name"
+                    :style="{ margin: '12px 15px 0 27px' }"
+                  ></FileTypeImg>
+                  <div class="rarDetail">
+                    <span class="detail1" style="margin-right: 130px">
+                      {{ file.name }}
+                    </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"
+                        :style="{ width: `${(291 * file.percentage) / 100}px` }"
+                      ></div>
+                    </div>
+                  </div>
+                  <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>
 
-						<div class="title">
-							<img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
-							<div class="text">作业内容</div>
-							<div class="box"></div>
-						</div>
-						<div v-if="dayjs().isBefore(dayjs(data?.submitEndTime)) && dayjs(data?.submitStartTime).isBefore(dayjs())">
-							<el-input v-model="sbValue.content" :autosize="{ minRows: 12.5, maxRows: 12.5 }" resize="none"
-								type="textarea" />
-						</div>
-						<div v-else class="join">
-							<el-input disabled v-model="sbValue.content" :autosize="{ minRows: 12.5, maxRows: 12.5 }" resize="none"
-								type="textarea" />
-						</div>
-						<div v-if="projectStatus && projectEndTime">
-							<div v-if="projectStatus !=='3' && new Date(projectEndTime).getTime() > new Date().getTime()" >
-								<div v-if="dayjs().isBefore(dayjs(data?.submitEndTime)) && dayjs(data?.submitStartTime).isBefore(dayjs())">
-									<div style="display: flex; justify-content: center">
-										<button class="tijiao" @click="handleClick">{{ submitList && submitList.length > 0 ? "再次" : ""
-		}}提交</button>
-									</div>
-								</div>
+            <div class="title">
+              <img
+                style="width: 20px; height: 20px"
+                src="../../assets/image/yuan.png"
+              />
+              <div class="text">作业内容</div>
+              <div class="box"></div>
+            </div>
+            <div
+              v-if="
+                dayjs().isBefore(dayjs(data?.submitEndTime)) &&
+                dayjs(data?.submitStartTime).isBefore(dayjs())
+              "
+            >
+              <el-input
+                v-model="sbValue.content"
+                :autosize="{ minRows: 12.5, maxRows: 12.5 }"
+                resize="none"
+                type="textarea"
+              />
+            </div>
+            <div v-else class="join">
+              <el-input
+                disabled
+                v-model="sbValue.content"
+                :autosize="{ minRows: 12.5, maxRows: 12.5 }"
+                resize="none"
+                type="textarea"
+              />
+            </div>
+            <div v-if="projectStatus && projectEndTime">
+              <div
+                v-if="
+                  projectStatus !== '3' &&
+                  new Date(projectEndTime).getTime() > new Date().getTime()
+                "
+              >
+                <div
+                  v-if="
+                    dayjs().isBefore(dayjs(data?.submitEndTime)) &&
+                    dayjs(data?.submitStartTime).isBefore(dayjs())
+                  "
+                >
+                  <div style="display: flex; justify-content: center">
+                    <button class="tijiao" @click="handleClick">
+                      {{
+                        submitList && submitList.length > 0 ? "再次" : ""
+                      }}提交
+                    </button>
+                  </div>
+                </div>
 
-								<div v-else>
-									<div style="display: flex; justify-content: center">
-										<button disabled class="tijiao"
-											style="background:#999;border-radius: 6px;cursor: not-allowed;">未在有效时间范围内</button>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div v-else>
-							<div>
-								<div v-if="dayjs().isBefore(dayjs(data?.submitEndTime)) && dayjs(data?.submitStartTime).isBefore(dayjs())">
-									<div style="display: flex; justify-content: center">
-										<button class="tijiao" @click="handleClick">{{ submitList && submitList.length > 0 ? "再次" : ""
-		}}提交</button>
-									</div>
-								</div>
+                <div v-else>
+                  <div style="display: flex; justify-content: center">
+                    <button
+                      disabled
+                      class="tijiao"
+                      style="
+                        background: #999;
+                        border-radius: 6px;
+                        cursor: not-allowed;
+                      "
+                    >
+                      未在有效时间范围内
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-else>
+              <div>
+                <div
+                  v-if="
+                    dayjs().isBefore(dayjs(data?.submitEndTime)) &&
+                    dayjs(data?.submitStartTime).isBefore(dayjs())
+                  "
+                >
+                  <div style="display: flex; justify-content: center">
+                    <button class="tijiao" @click="handleClick">
+                      {{
+                        submitList && submitList.length > 0 ? "再次" : ""
+                      }}提交
+                    </button>
+                  </div>
+                </div>
 
-								<div v-else>
-									<div style="display: flex; justify-content: center">
-										<button disabled class="tijiao"
-											style="background:#999;border-radius: 6px;cursor: not-allowed;">未在有效时间范围内</button>
-									</div>
-								</div>
-							</div>
-						</div>
+                <div v-else>
+                  <div style="display: flex; justify-content: center">
+                    <button
+                      disabled
+                      class="tijiao"
+                      style="
+                        background: #999;
+                        border-radius: 6px;
+                        cursor: not-allowed;
+                      "
+                    >
+                      未在有效时间范围内
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
 
-						<div class=""></div>
+            <div class=""></div>
 
-						<div class="title" style="margin-top: 0px">
-							<img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
-							<div class="text">历史记录</div>
-							<div class="box"></div>
-						</div>
+            <div class="title" style="margin-top: 0px">
+              <img
+                style="width: 20px; height: 20px"
+                src="../../assets/image/yuan.png"
+              />
+              <div class="text">历史记录</div>
+              <div class="box"></div>
+            </div>
 
-						<div class="history">
-							<div class="historytitle">
-								<div class="content1">提交时间</div>
-								<div class="content2">作业内容</div>
-								<div class="content3">附件</div>
-							</div>
-							<div v-for="(value, index) in submitList" :key="index" class="historytitle2" :style="{
-	'border-bottom':
-		index === submitList.length - 1
-			? '1px solid rgba(215, 229, 253, 0)'
-			: '1px solid rgba(215, 229, 253, 1)',
-}">
-								<div class="content1">{{ value.createTime }}</div>
-								<div class="content2">
-									<div :title="value.workUploadContent">
-										{{ value.workUploadContent }}
+            <div class="history">
+              <div class="historytitle">
+                <div class="content1">提交时间</div>
+                <div class="content2">作业内容</div>
+                <div class="content3">附件</div>
+              </div>
+              <div
+                v-for="(value, index) in submitList"
+                :key="index"
+                class="historytitle2"
+                :style="{
+                  'border-bottom':
+                    index === submitList.length - 1
+                      ? '1px solid rgba(215, 229, 253, 0)'
+                      : '1px solid rgba(215, 229, 253, 1)',
+                }"
+              >
+                <div class="content1">{{ value.createTime }}</div>
+                <div class="content2">
+                  <div :title="value.workUploadContent">
+                    {{ value.workUploadContent }}
+                  </div>
+                </div>
+                <div class="content3">
+                  <div>
+                    <span style="margin-left: 10px">
+                      <el-link
+                        target="_blank"
+                        type="primary"
+                        :href="
+                          fielPath + value.workUploadAddress?.split(',')[0] ||
+                          ''
+                        "
+                        >{{ value.workUploadAddress?.split(",")[0] }}</el-link
+                      >
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="righttitle">
+          <img
+            style="width: 20px; height: 20px"
+            src="../../assets/image/yuan.png"
+          />
+          <div class="text">截止时间</div>
+          <div class="box"></div>
+        </div>
+        <div class="timebox clearfix">
+          <div class="innertime">
+            {{
+              data?.submitStartTime
+            }}&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;{{
+              data?.submitEndTime
+            }}
+          </div>
+          <div class="endtime clearfix">
+            <div
+              v-if="dayjs(data?.submitEndTime).isBefore(dayjs())"
+              class="endtimetext"
+            >
+              该任务已结束
+            </div>
+            <div v-else class="endtimetext">
+              距离结束还有&nbsp;&nbsp;<span class="te">{{
+                parseInt(
+                  dayjs(data?.submitEndTime).diff(dayjs(), "minute") / 60
+                )
+              }}</span
+              >&nbsp;&nbsp; 小时&nbsp;&nbsp;
+              <span class="te">{{
+                dayjs(data?.submitEndTime).diff(dayjs(), "minute") % 60
+              }}</span
+              >&nbsp;&nbsp;分钟
+            </div>
+          </div>
+        </div>
+        <div class="righttitle">
+          <img
+            style="width: 20px; height: 20px"
+            src="../../assets/image/yuan.png"
+          />
 
-									</div>
-								</div>
-								<div class="content3">
-									<div><span style="margin-left: 10px">
-											<el-link target="_blank" type="primary" :href="fielPath+value.workUploadAddress?.split(',')[0] || ''">{{value.workUploadAddress?.split(',')[0] }}</el-link>
-										</span>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="right">
-				<div class="righttitle">
-					<img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
-					<div class="text">截止时间</div>
-					<div class="box"></div>
-				</div>
-				<div class="timebox clearfix">
-					<div class="innertime">
-						{{ data?.submitStartTime }}&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;{{ data?.submitEndTime }}
-					</div>
-					<div class="endtime clearfix">
-						<div v-if="dayjs(data?.submitEndTime).isBefore(dayjs())" class="endtimetext">该任务已结束</div>
-						<div v-else class="endtimetext">距离结束还有&nbsp;&nbsp;<span class="te">{{
-		parseInt(dayjs(data?.submitEndTime).diff(dayjs(), "minute") / 60)
-}}</span>&nbsp;&nbsp;
-							小时&nbsp;&nbsp;
-							<span class="te">{{ dayjs(data?.submitEndTime).diff(dayjs(), "minute") % 60 }}</span>&nbsp;&nbsp;分钟
-						</div>
-					</div>
-				</div>
-				<div class="righttitle">
-					<img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
+          <div class="text">作业说明</div>
+          <div class="box"></div>
+        </div>
+        <div class="explain clearfix">
+          <!-- todo #作业任务详情 作业说明是作业要求字段么？-->
+          <div
+            class="explain1"
+            style="margin-top: 26px"
+            v-html="data?.workRequirement"
+          ></div>
+        </div>
+      </div>
+    </div>
+    <!-- 详细信息 -->
+  </div>
 
-					<div class="text">作业说明</div>
-					<div class="box"></div>
-				</div>
-				<div class="explain clearfix">
-					<!-- todo #作业任务详情 作业说明是作业要求字段么？-->
-					<div class="explain1" style="margin-top: 26px" v-html="data?.workRequirement"></div>
-				</div>
-			</div>
-		</div>
-		<!-- 详细信息 -->
-	</div>
-
-	<el-dialog v-model="centerDialogVisible" title="" width="20%" center :show-close="false" :align-center="true">
-		<div style="text-align: center;font-size:16px;"> <span style="color:black">
-				提交成功
-			</span></div>
-		<template #footer>
-			<span class="dialog-footer">
-				<el-button class="cancel"
-					style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;"
-					@click="centerDialogVisible = false">取消</el-button>
-				<el-button class="back"
-					style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;"
-					type="primary" @click="returnclick">
-					返回
-				</el-button>
-			</span>
-		</template>
-	</el-dialog>
+  <el-dialog
+    v-model="centerDialogVisible"
+    title=""
+    width="20%"
+    center
+    :show-close="false"
+    :align-center="true"
+  >
+    <div style="text-align: center; font-size: 16px">
+      <span style="color: black"> 提交成功 </span>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button
+          class="cancel"
+          style="
+            color: #387df7;
+            border: 1px solid #387df7;
+            padding: 8px 32px;
+            border-radius: 4px;
+          "
+          @click="centerDialogVisible = false"
+          >取消</el-button
+        >
+        <el-button
+          class="back"
+          style="
+            background: #387df7;
+            box-shadow: 1px 2px 15px 1px rgba(56, 125, 247, 0.34);
+            border: 0px;
+            padding: 8px 32px;
+          "
+          type="primary"
+          @click="returnclick"
+        >
+          返回
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
 import { computed, reactive, ref, toRefs } from "vue";
 import { request, useRequest } from "@/api/request";
 import {
-	TASK_WORK_COMMIT,
-	TASK_WORK_DETAIL,
-	TASK_WORK_SUBMIT_LIST,
-	WORK_HISTROY,
+  TASK_WORK_COMMIT,
+  TASK_WORK_DETAIL,
+  TASK_WORK_SUBMIT_LIST,
+  WORK_HISTROY,
 } from "@/api/api";
 import dayjs from "dayjs";
 import { useRouter } from "vue-router";
@@ -283,667 +458,682 @@ const uploadRef = ref();
 
 const centerDialogVisible = ref(false);
 const sbValue = ref({
-	content: "",
-	attach: "",
+  content: "",
+  attach: "",
 });
 const router = useRouter();
 const returnclick = () => {
-	router.back();
+  router.back();
 };
 const {
-	query: { courseId: workId, type, id: taskId, pName, sName, projectStatus, projectEndTime,infoId},
+  query: {
+    courseId: workId,
+    type,
+    id: taskId,
+    pName,
+    sName,
+    projectStatus,
+    projectEndTime,
+    infoId,
+  },
 } = useRoute();
 
-const { data } = taskId && taskId !== 'undefined' ? useRequest(TASK_WORK_DETAIL, { workId, taskId }) : useRequest(TASK_WORK_DETAIL, { workId });
+const { data } =
+  taskId && taskId !== "undefined"
+    ? useRequest(TASK_WORK_DETAIL, { workId, taskId })
+    : useRequest(TASK_WORK_DETAIL, { workId });
 
-console.log('data==----->', data)
+console.log("data==----->", data);
 
 const { data: submitList } = useRequest(TASK_WORK_SUBMIT_LIST, {
-	workerId: workId,
+  workerId: workId,
 });
 
 const open = () => {
-	centerDialogVisible.value = true
+  centerDialogVisible.value = true;
 };
 const showFileList = computed(() => {
-	return fileList.value.length
-})
-
+  return fileList.value.length;
+});
 
 const handleClick = () => {
-	console.log(fileList.value, uploadRef.value)
-	if (!sbValue.value.content) {
-		if (fileList.value.length === 0) {
-			return ElMessage.warning("请输入作业内容");
-		}
-	}
-	request(TASK_WORK_COMMIT, {
-		projectOrRouterLogo: type,
-		workUploadContent: sbValue.value.content,
-		workUploadAddress: fileList.value.map((e) => e.url).join(",") || "",
-		workId,
-		type,
-		taskId:taskId || infoId,
-	}).then((res) => {
-		console.log(res);
-		submitList.value.unshift(res.data);
-		open();
-		sbValue.value.content = "";
-		fileList.value = [];
-		remove(0);
-		clearFiles();
-	});
+  console.log(fileList.value, uploadRef.value);
+  if (!sbValue.value.content) {
+    if (fileList.value.length === 0) {
+      return ElMessage.warning("请输入作业内容");
+    }
+  }
+  request(TASK_WORK_COMMIT, {
+    projectOrRouterLogo: type,
+    workUploadContent: sbValue.value.content,
+    workUploadAddress: fileList.value.map((e) => e.url).join(",") || "",
+    workId,
+    type,
+    taskId: taskId || infoId,
+  }).then((res) => {
+    console.log(res);
+    submitList.value.unshift(res.data);
+    open();
+    sbValue.value.content = "";
+    fileList.value = [];
+    remove(0);
+    clearFiles();
+  });
 };
 
 function clearFiles() {
-	uploadRef.value.clearFiles();
+  uploadRef.value.clearFiles();
 }
 
 function remove(i) {
-	uploadRef.value.remove(i);
+  uploadRef.value.remove(i);
 }
 
 function reUpload(i) {
-	uploadRef.value.reUpload(i);
+  uploadRef.value.reUpload(i);
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss">
 .homework {
-	.crumb {
-		color: #fff;
-		display: flex;
-		font-size: 14px;
-		line-height: 24px;
-		position: relative;
-	}
-
-	.return {
-		position: absolute;
-		right: 10%;
-
-		.text {
-			text-align: center;
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-		}
-	}
-
-	.preNext {
-		position: absolute;
-		right: 0px;
-
-		.content {
-			font-size: 14px;
-			color: #fff;
-			width: 43px;
-			height: 14px;
-			display: inline-block;
-			position: relative;
-			top: -6px;
-			cursor: pointer;
-		}
-
-		.btn {
-			width: 23px;
-			height: 23px;
-			border-radius: 50%;
-			border: 0;
-			cursor: pointer;
-		}
-
-		.btn01 {
-			background-image: url("../../assets/image/prev.png");
-		}
-
-		.btn02 {
-			background-image: url("../../assets/image/next.png");
-		}
-	}
-
-	.debateTitle {
-		margin-top: 15px;
-		font-size: 20px;
-		line-height: 24px;
-		height: 24px;
-		font-weight: 600;
-		margin-left: -10px;
-	}
-
-	.detailinfo {
-		width: 100%;
-		margin-top: 20px;
-		background: #ffffff;
-		border-radius: 8px;
-		display: flex;
-
-		.detail {
-			flex: 1;
-
-			.detailT {
-				// height: 1000px;
-
-				color: rgba(51, 51, 51, 1);
-				display: flex;
-				padding-bottom: 30px;
-				width: 100%;
-
-				.shapan {
-					width: 100%;
-					height: 58px;
-					margin-top: 30px;
-					background-image: url("../../assets/image/shapan.png");
-					background-repeat: no-repeat;
-					background-size: 100% 100%;
-					display: flex;
-					align-items: center;
-
-					.shapanexplain {
-						margin-left: 34px;
-						margin-right: 10px;
-						font-size: 20px;
-						font-weight: 800;
-						color: #4a9cf8;
-						line-height: 24px;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-					}
-				}
-
-				.shangchuan {
-					z-index: 999;
-					font-size: 16px;
-					font-weight: 800;
-					color: #ffffff;
-					line-height: 24px;
-					position: absolute;
-					right: -6px;
-					top: 162px;
-					border: 0;
-					background-color: #fff;
-					width: 162px;
-					height: 62px;
-					background-image: url("../../assets/image/shangchuan.png");
-				}
-
-				.uploadDetail {
-					position: absolute;
-					//top: 235px;
-					right: 3px;
-					z-index: 100;
-
-					.triangle {
-						top: -10px;
-						right: 60px;
-						width: 0;
-						height: 0;
-						position: absolute;
-						border-right: 10px solid transparent;
-						border-left: 10px solid transparent;
-						border-bottom: 10px solid #fff;
-						// box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
-					}
-
-					.square {
-						padding-bottom: 40px;
-						width: 600px;
-						background: #ffffff;
-						box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
-						border-radius: 8px;
-
-						.squarecontent1 {
-							padding-top: 40px;
-							display: flex;
-
-							.rar {
-								margin: 12px 15px 0 27px;
-								width: 22px;
-								height: 26px;
-								background-image: url("../../assets/image/rar.png");
-							}
-
-							.rarDetail {
-								.detail1 {
-									// height: 14px;
-									font-size: 12px;
-									line-height: 30px;
-									font-weight: 500;
-									color: #677d86;
-								}
-
-								.detail2 {
-									// height: 11px;
-									font-size: 12px;
-									font-weight: 500;
-									color: #277aff;
-								}
-
-								.progress {
-									width: 291px;
-									height: 8px;
-									background: #e8f1fe;
-									border-radius: 4px;
-
-									.progressinner {
-										height: 8px;
-										background: linear-gradient(0deg, #2478ff 0%, #5093ff 100%);
-										border-radius: 4px;
-									}
-								}
-							}
-
-							.btn {
-								border: 0;
-								background-color: #fff;
-								color: #277aff;
-								margin-top: 20px;
-								cursor: pointer;
-							}
-
-							.btndetail {
-								margin-left: 25px;
-							}
-						}
-
-						.squarecontent2 {
-							margin-top: 25px;
-							display: flex;
-
-							.rar {
-								margin: 12px 15px 0 27px;
-								width: 22px;
-								height: 26px;
-								background-image: url("../../assets/image/rar.png");
-							}
-
-							.rarDetail {
-								.detail1 {
-									// height: 14px;
-									font-size: 12px;
-									line-height: 30px;
-									font-weight: 500;
-									color: #677d86;
-								}
-
-								.detail2 {
-									// height: 11px;
-									font-size: 12px;
-									font-weight: 500;
-									color: #277aff;
-								}
-
-								.progress {
-									width: 291px;
-									height: 8px;
-									background: #e8f1fe;
-									border-radius: 4px;
-
-									.progressinner {
-										width: 231px;
-										height: 8px;
-										background: linear-gradient(0deg, #ee625e 0%, #eea4a1 100%);
-										border-radius: 4px;
-									}
-								}
-							}
-
-							.btn {
-								border: 0;
-								background-color: #fff;
-								color: #277aff;
-								margin-top: 20px;
-								cursor: pointer;
-							}
-
-							.btndetail {
-								margin-left: 25px;
-							}
-						}
-
-						.squarecontent3 {
-							margin-top: 25px;
-							display: flex;
-
-							.rar {
-								margin: 12px 15px 0 27px;
-								width: 22px;
-								height: 26px;
-								background-image: url("../../assets/image/rar.png");
-							}
-
-							.rarDetail {
-								.detail1 {
-									// height: 14px;
-									font-size: 12px;
-									line-height: 30px;
-									font-weight: 500;
-									color: #677d86;
-								}
-
-								.detail2 {
-									// height: 11px;
-									font-size: 12px;
-									font-weight: 500;
-									color: #277aff;
-								}
-
-								.progress {
-									width: 291px;
-									height: 8px;
-									background: #e8f1fe;
-									border-radius: 4px;
-
-									.progressinner {
-										width: 291px;
-										height: 8px;
-										background: linear-gradient(0deg, #36d1ae 0%, #3be5bf 100%);
-										border-radius: 4px;
-									}
-								}
-							}
-
-							.btn {
-								border: 0;
-								background-color: #fff;
-								color: #277aff;
-								margin-top: 20px;
-								cursor: pointer;
-							}
-
-							.btndetail {
-								margin-left: 25px;
-							}
-						}
-					}
-				}
-
-				.tijiao {
-					z-index: 999;
-					cursor: pointer;
-					margin-top: 22px;
-					// margin-left: 480px;
-					width: 33px;
-					height: 16px;
-					font-size: 16px;
-					font-weight: 800;
-					color: #ffffff;
-					line-height: 24px;
-					border: 0;
-					background-color: #fff;
-					width: 162px;
-					height: 62px;
-					background-image: url("../../assets/image/tijiao.png");
-				}
-
-				.history {
-					position: relative;
-					margin-top: 32px;
-					width: 100%;
-					border: 1px solid #d7e5fd;
-					border-radius: 8px;
-
-					.fenge {
-						width: 100%;
-						border-top: 1px solid #d7e5fd;
-					}
-
-					.tongyi {
-						display: flex;
-					}
-
-					.content1 {
-						margin-top: 14px;
-						margin-left: 20px;
-						width: 160px;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-
-					.content2 {
-						margin-top: 14px;
-						margin-left: 20px;
-						width: 460px;
-						;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-
-					.content3 {
-						margin-top: 14px;
-						margin-left: 20px;
-						width: 230px;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-
-					.historycontent {
-						height: 14px;
-						font-size: 14px;
-						font-weight: 400;
-						color: #333330;
-						line-height: 38px;
-					}
-
-					.historytitle {
-						width: 100%;
-						height: 50px;
-						background: #f2f5f7;
-						border-radius: 8px 8px 0px 0px;
-						display: flex;
-					}
-
-					.historytitle2 {
-						width: 100%;
-						height: 48px;
-						// background: #fff;
-						display: flex;
-					}
-				}
-
-				.title {
-					display: flex;
-					align-items: center;
-					padding-top: 39px;
-					position: relative;
-				}
-
-				.title .text {
-					margin-left: 8px;
-					font-size: 16px;
-					color: rgba(51, 51, 51, 1);
-					font-weight: 800;
-				}
-
-				.title .box {
-					width: 75px;
-					height: 10px;
-					background-color: rgba(36, 120, 255, 0.15);
-					position: absolute;
-					left: 23px;
-					top: 53px;
-				}
-
-				.all {
-					display: flex;
-					justify-content: space-between;
-					width: 1280px;
-					margin-top: 43px;
-
-					.allbox1 {
-						background: linear-gradient(0deg,
-								rgba(160, 193, 230, 0) 0%,
-								rgba(161, 195, 231, 0.2) 100%);
-					}
-
-					.allbox2 {
-						background: linear-gradient(0deg,
-								rgba(177, 219, 229, 0) 0%,
-								rgba(172, 216, 227, 0.2) 100%);
-					}
-
-					.allbox3 {
-						background: linear-gradient(0deg,
-								rgba(195, 209, 234, 0) 0%,
-								rgba(191, 206, 231, 0.2) 100%);
-					}
-
-					.item {
-						width: 410px;
-						height: 149px;
-						text-align: center;
-						border-radius: 4px;
-
-						.item1 {
-							color: #089dff;
-							font-size: 24px;
-							font-weight: bold;
-							margin-top: 36px;
-						}
-
-						.item2 {
-							color: #333330;
-							font-size: 14px;
-							margin-top: 29px;
-						}
-					}
-				}
-
-				.join {
-					width: 100%;
-					margin-top: 32px;
-
-					.el-textarea__inner {
-						border-radius: 8px;
-						background-color: rgba(245, 246, 247, 1);
-					}
-				}
-			}
-		}
-
-		.right {
-			margin-right: 45px;
-
-			.righttitle {
-				display: flex;
-				padding-top: 39px;
-				position: relative;
-
-				.text {
-					margin-left: 8px;
-					font-size: 16px;
-					color: rgba(51, 51, 51, 1);
-					font-weight: 800;
-				}
-
-				.box {
-					width: 75px;
-					height: 10px;
-					background-color: rgba(36, 120, 255, 0.15);
-					position: absolute;
-					left: 23px;
-					top: 53px;
-				}
-			}
-
-			.timebox {
-				width: 417px;
-				height: 149px;
-				background: linear-gradient(90deg, #b6c6e1 0%, #89aed6 100%);
-				border-radius: 4px;
-				margin-top: 52px;
-			}
-
-			.clearfix:before,
-			.clearfix:after {
-				content: "";
-				display: table;
-				clear: both;
-			}
-
-			.innertime {
-				margin-top: 17px;
-				margin-left: 55px;
-				font-size: 14px;
-				font-weight: 500;
-				color: #ffffff;
-				line-height: 24px;
-			}
-
-			.endtime {
-				margin-left: 10px;
-				margin-top: 16px;
-				width: 397px;
-				height: 81px;
-				background: #f2f5f7;
-				border-radius: 0px 8px 0px 8px;
-
-				.endtimetext {
-					margin-top: 25px;
-					margin-left: 46px;
-
-					.te {
-						font-size: 28px;
-						font-weight: 800;
-						color: #4a9cf8;
-						line-height: 24px;
-					}
-				}
-			}
-
-			.explain {
-				margin-top: 30px;
-				width: 416px;
-				// height: 158px;
-				background: #f2f5f7;
-				border-radius: 8px;
-				padding-bottom: 25px;
-
-				.explain1 {
-					margin-left: 23px;
-					width: 360px;
-					// height: 38px;
-					font-size: 14px;
-					font-weight: 500;
-					color: #333330;
-					line-height: 24px;
-				}
-			}
-		}
-	}
-
-	.el-dialog {
-		color: black;
-		text-align: center;
-		font-size: 16px;
-
-		.title {
-			text-align: center;
-		}
-
-		.dialog-footer {
-			.back {
-				background: #387DF7;
-				box-shadow: 1px 2px 15px 1px rgba(56, 125, 247, 0.34);
-				border: 0px;
-				padding: 8px 32px;
-				border-radius: 4px;
-			}
-
-			.cancel {
-				background: #387DF7;
-				border: 0px;
-				padding: 8px 32px;
-				border: 1px solid #387DF7;
-				border-radius: 4px;
-			}
-
-		}
-	}
+  .crumb {
+    color: #fff;
+    display: flex;
+    font-size: 14px;
+    line-height: 24px;
+    position: relative;
+  }
+
+  .return {
+    position: absolute;
+    right: 10%;
+
+    .text {
+      text-align: center;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  .preNext {
+    position: absolute;
+    right: 0px;
+
+    .content {
+      font-size: 14px;
+      color: #fff;
+      width: 43px;
+      height: 14px;
+      display: inline-block;
+      position: relative;
+      top: -6px;
+      cursor: pointer;
+    }
+
+    .btn {
+      width: 23px;
+      height: 23px;
+      border-radius: 50%;
+      border: 0;
+      cursor: pointer;
+    }
+
+    .btn01 {
+      background-image: url("../../assets/image/prev.png");
+    }
+
+    .btn02 {
+      background-image: url("../../assets/image/next.png");
+    }
+  }
+
+  .debateTitle {
+    margin-top: 15px;
+    font-size: 20px;
+    line-height: 24px;
+    height: 24px;
+    font-weight: 600;
+    margin-left: -10px;
+  }
+
+  .detailinfo {
+    width: 100%;
+    margin-top: 20px;
+    background: #ffffff;
+    border-radius: 8px;
+    display: flex;
+
+    .detail {
+      flex: 1;
+
+      .detailT {
+        // height: 1000px;
+
+        color: rgba(51, 51, 51, 1);
+        display: flex;
+        padding-bottom: 30px;
+        width: 100%;
+
+        .shapan {
+          width: 100%;
+          height: 58px;
+          margin-top: 30px;
+          background-image: url("../../assets/image/shapan.png");
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+
+          .shapanexplain {
+            margin-left: 34px;
+            margin-right: 10px;
+            font-size: 20px;
+            font-weight: 800;
+            color: #4a9cf8;
+            line-height: 24px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .shangchuan {
+          z-index: 999;
+          font-size: 16px;
+          font-weight: 800;
+          color: #ffffff;
+          line-height: 24px;
+          position: absolute;
+          right: -6px;
+          top: 162px;
+          border: 0;
+          background-color: #fff;
+          width: 162px;
+          height: 62px;
+          background-image: url("../../assets/image/shangchuan.png");
+        }
+
+        .uploadDetail {
+          position: absolute;
+          //top: 235px;
+          right: 3px;
+          z-index: 100;
+
+          .triangle {
+            top: -10px;
+            right: 60px;
+            width: 0;
+            height: 0;
+            position: absolute;
+            border-right: 10px solid transparent;
+            border-left: 10px solid transparent;
+            border-bottom: 10px solid #fff;
+            // box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
+          }
+
+          .square {
+            padding-bottom: 40px;
+            width: 600px;
+            background: #ffffff;
+            box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
+            border-radius: 8px;
+
+            .squarecontent1 {
+              padding-top: 40px;
+              display: flex;
+
+              .rar {
+                margin: 12px 15px 0 27px;
+                width: 22px;
+                height: 26px;
+                background-image: url("../../assets/image/rar.png");
+              }
+
+              .rarDetail {
+                .detail1 {
+                  // height: 14px;
+                  font-size: 12px;
+                  line-height: 30px;
+                  font-weight: 500;
+                  color: #677d86;
+                }
+
+                .detail2 {
+                  // height: 11px;
+                  font-size: 12px;
+                  font-weight: 500;
+                  color: #277aff;
+                }
+
+                .progress {
+                  width: 291px;
+                  height: 8px;
+                  background: #e8f1fe;
+                  border-radius: 4px;
+
+                  .progressinner {
+                    height: 8px;
+                    background: linear-gradient(0deg, #2478ff 0%, #5093ff 100%);
+                    border-radius: 4px;
+                  }
+                }
+              }
+
+              .btn {
+                border: 0;
+                background-color: #fff;
+                color: #277aff;
+                margin-top: 20px;
+                cursor: pointer;
+              }
+
+              .btndetail {
+                margin-left: 25px;
+              }
+            }
+
+            .squarecontent2 {
+              margin-top: 25px;
+              display: flex;
+
+              .rar {
+                margin: 12px 15px 0 27px;
+                width: 22px;
+                height: 26px;
+                background-image: url("../../assets/image/rar.png");
+              }
+
+              .rarDetail {
+                .detail1 {
+                  // height: 14px;
+                  font-size: 12px;
+                  line-height: 30px;
+                  font-weight: 500;
+                  color: #677d86;
+                }
+
+                .detail2 {
+                  // height: 11px;
+                  font-size: 12px;
+                  font-weight: 500;
+                  color: #277aff;
+                }
+
+                .progress {
+                  width: 291px;
+                  height: 8px;
+                  background: #e8f1fe;
+                  border-radius: 4px;
+
+                  .progressinner {
+                    width: 231px;
+                    height: 8px;
+                    background: linear-gradient(0deg, #ee625e 0%, #eea4a1 100%);
+                    border-radius: 4px;
+                  }
+                }
+              }
+
+              .btn {
+                border: 0;
+                background-color: #fff;
+                color: #277aff;
+                margin-top: 20px;
+                cursor: pointer;
+              }
+
+              .btndetail {
+                margin-left: 25px;
+              }
+            }
+
+            .squarecontent3 {
+              margin-top: 25px;
+              display: flex;
+
+              .rar {
+                margin: 12px 15px 0 27px;
+                width: 22px;
+                height: 26px;
+                background-image: url("../../assets/image/rar.png");
+              }
+
+              .rarDetail {
+                .detail1 {
+                  // height: 14px;
+                  font-size: 12px;
+                  line-height: 30px;
+                  font-weight: 500;
+                  color: #677d86;
+                }
+
+                .detail2 {
+                  // height: 11px;
+                  font-size: 12px;
+                  font-weight: 500;
+                  color: #277aff;
+                }
+
+                .progress {
+                  width: 291px;
+                  height: 8px;
+                  background: #e8f1fe;
+                  border-radius: 4px;
+
+                  .progressinner {
+                    width: 291px;
+                    height: 8px;
+                    background: linear-gradient(0deg, #36d1ae 0%, #3be5bf 100%);
+                    border-radius: 4px;
+                  }
+                }
+              }
+
+              .btn {
+                border: 0;
+                background-color: #fff;
+                color: #277aff;
+                margin-top: 20px;
+                cursor: pointer;
+              }
+
+              .btndetail {
+                margin-left: 25px;
+              }
+            }
+          }
+        }
+
+        .tijiao {
+          z-index: 999;
+          cursor: pointer;
+          margin-top: 22px;
+          // margin-left: 480px;
+          width: 33px;
+          height: 16px;
+          font-size: 16px;
+          font-weight: 800;
+          color: #ffffff;
+          line-height: 24px;
+          border: 0;
+          background-color: #fff;
+          width: 162px;
+          height: 62px;
+          background-image: url("../../assets/image/tijiao.png");
+        }
+
+        .history {
+          position: relative;
+          margin-top: 32px;
+          width: 100%;
+          border: 1px solid #d7e5fd;
+          border-radius: 8px;
+
+          .fenge {
+            width: 100%;
+            border-top: 1px solid #d7e5fd;
+          }
+
+          .tongyi {
+            display: flex;
+          }
+
+          .content1 {
+            margin-top: 14px;
+            margin-left: 20px;
+            width: 160px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .content2 {
+            margin-top: 14px;
+            margin-left: 20px;
+            width: 460px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .content3 {
+            margin-top: 14px;
+            margin-left: 20px;
+            width: 230px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .historycontent {
+            height: 14px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #333330;
+            line-height: 38px;
+          }
+
+          .historytitle {
+            width: 100%;
+            height: 50px;
+            background: #f2f5f7;
+            border-radius: 8px 8px 0px 0px;
+            display: flex;
+          }
+
+          .historytitle2 {
+            width: 100%;
+            height: 48px;
+            // background: #fff;
+            display: flex;
+          }
+        }
+
+        .title {
+          display: flex;
+          align-items: center;
+          padding-top: 39px;
+          position: relative;
+        }
+
+        .title .text {
+          margin-left: 8px;
+          font-size: 16px;
+          color: rgba(51, 51, 51, 1);
+          font-weight: 800;
+        }
+
+        .title .box {
+          width: 75px;
+          height: 10px;
+          background-color: rgba(36, 120, 255, 0.15);
+          position: absolute;
+          left: 23px;
+          top: 53px;
+        }
+
+        .all {
+          display: flex;
+          justify-content: space-between;
+          width: 1280px;
+          margin-top: 43px;
+
+          .allbox1 {
+            background: linear-gradient(
+              0deg,
+              rgba(160, 193, 230, 0) 0%,
+              rgba(161, 195, 231, 0.2) 100%
+            );
+          }
+
+          .allbox2 {
+            background: linear-gradient(
+              0deg,
+              rgba(177, 219, 229, 0) 0%,
+              rgba(172, 216, 227, 0.2) 100%
+            );
+          }
+
+          .allbox3 {
+            background: linear-gradient(
+              0deg,
+              rgba(195, 209, 234, 0) 0%,
+              rgba(191, 206, 231, 0.2) 100%
+            );
+          }
+
+          .item {
+            width: 410px;
+            height: 149px;
+            text-align: center;
+            border-radius: 4px;
+
+            .item1 {
+              color: #089dff;
+              font-size: 24px;
+              font-weight: bold;
+              margin-top: 36px;
+            }
+
+            .item2 {
+              color: #333330;
+              font-size: 14px;
+              margin-top: 29px;
+            }
+          }
+        }
+
+        .join {
+          width: 100%;
+          margin-top: 32px;
+
+          .el-textarea__inner {
+            border-radius: 8px;
+            background-color: rgba(245, 246, 247, 1);
+          }
+        }
+      }
+    }
+
+    .right {
+      margin-right: 45px;
+
+      .righttitle {
+        display: flex;
+        padding-top: 39px;
+        position: relative;
+
+        .text {
+          margin-left: 8px;
+          font-size: 16px;
+          color: rgba(51, 51, 51, 1);
+          font-weight: 800;
+        }
+
+        .box {
+          width: 75px;
+          height: 10px;
+          background-color: rgba(36, 120, 255, 0.15);
+          position: absolute;
+          left: 23px;
+          top: 53px;
+        }
+      }
+
+      .timebox {
+        width: 417px;
+        height: 149px;
+        background: linear-gradient(90deg, #b6c6e1 0%, #89aed6 100%);
+        border-radius: 4px;
+        margin-top: 52px;
+      }
+
+      .clearfix:before,
+      .clearfix:after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+
+      .innertime {
+        margin-top: 17px;
+        margin-left: 55px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 24px;
+      }
+
+      .endtime {
+        margin-left: 10px;
+        margin-top: 16px;
+        width: 397px;
+        height: 81px;
+        background: #f2f5f7;
+        border-radius: 0px 8px 0px 8px;
+
+        .endtimetext {
+          margin-top: 25px;
+          margin-left: 46px;
+
+          .te {
+            font-size: 28px;
+            font-weight: 800;
+            color: #4a9cf8;
+            line-height: 24px;
+          }
+        }
+      }
+
+      .explain {
+        margin-top: 30px;
+        width: 416px;
+        // height: 158px;
+        background: #f2f5f7;
+        border-radius: 8px;
+        padding-bottom: 25px;
+
+        .explain1 {
+          margin-left: 23px;
+          width: 360px;
+          // height: 38px;
+          font-size: 14px;
+          font-weight: 500;
+          color: #333330;
+          line-height: 24px;
+        }
+      }
+    }
+  }
+
+  .el-dialog {
+    color: black;
+    text-align: center;
+    font-size: 16px;
+
+    .title {
+      text-align: center;
+    }
+
+    .dialog-footer {
+      .back {
+        background: #387df7;
+        box-shadow: 1px 2px 15px 1px rgba(56, 125, 247, 0.34);
+        border: 0px;
+        padding: 8px 32px;
+        border-radius: 4px;
+      }
+
+      .cancel {
+        background: #387df7;
+        border: 0px;
+        padding: 8px 32px;
+        border: 1px solid #387df7;
+        border-radius: 4px;
+      }
+    }
+  }
 }
 </style>