mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-15 05:46:48 +08:00
接口初始化 第一版
This commit is contained in:
yuping
@@ -24,7 +24,7 @@
|
||||
<div class="detail">
|
||||
<div class="detailT">
|
||||
<div
|
||||
style="
|
||||
style="
|
||||
margin-left: 45px;
|
||||
margin-right: 42px;
|
||||
position: relative;
|
||||
@@ -33,9 +33,9 @@
|
||||
>
|
||||
<div class="title">
|
||||
<img
|
||||
width="20px"
|
||||
height="20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
width="20px"
|
||||
height="20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<div class="text">作业名称</div>
|
||||
<div class="box"></div>
|
||||
@@ -43,22 +43,28 @@
|
||||
<div class="shapan">
|
||||
<div style="flex: 1; width: 0">
|
||||
<div class="shapanexplain">
|
||||
管理者进阶腾飞班 - 第一次作业 - 沙盘实验
|
||||
{{ data.detail?.workName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="shangchuan"
|
||||
style="cursor: pointer"
|
||||
@click="uploadFile"
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
:action="FILE_UPLOAD"
|
||||
:on-change="handleChange"
|
||||
>
|
||||
上传
|
||||
</button>
|
||||
|
||||
<template #trigger>
|
||||
<button
|
||||
class="shangchuan"
|
||||
style="cursor: pointer"
|
||||
@click="uploadFile"
|
||||
>
|
||||
上传
|
||||
</button>
|
||||
</template>
|
||||
</el-upload>
|
||||
<div
|
||||
class="uploadDetail"
|
||||
:style="{ display: uploadfile ? 'block' : 'none' }"
|
||||
class="uploadDetail"
|
||||
:style="{ display: uploadfile ? 'block' : 'none' }"
|
||||
>
|
||||
<div class="triangle"></div>
|
||||
<div class="square clearfix">
|
||||
@@ -113,8 +119,8 @@
|
||||
|
||||
<div class="title">
|
||||
<img
|
||||
style="width: 20px; height: 20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
style="width: 20px; height: 20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<div class="text">作业内容</div>
|
||||
<div class="box"></div>
|
||||
@@ -122,24 +128,24 @@
|
||||
|
||||
<div class="join">
|
||||
<el-input
|
||||
v-model="textarea1"
|
||||
:autosize="{ minRows: 12.5, maxRows: 12.5 }"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
@input="textareaInput"
|
||||
v-model="textarea1"
|
||||
:autosize="{ minRows: 12.5, maxRows: 12.5 }"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
@input="textareaInput"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center">
|
||||
<button class="tijiao">提交</button>
|
||||
<button class="tijiao" @click="handleClick">提交</button>
|
||||
</div>
|
||||
|
||||
<div class=""></div>
|
||||
|
||||
<div class="title" style="margin-top: 0px">
|
||||
<img
|
||||
width="20px"
|
||||
height="20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
width="20px"
|
||||
height="20px"
|
||||
src="../../assets/image/yuan.png"
|
||||
/>
|
||||
<div class="text">历史纪录</div>
|
||||
<div class="box"></div>
|
||||
@@ -151,27 +157,27 @@
|
||||
<div class="content2">作业内容</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(value, index) in history"
|
||||
:key="index"
|
||||
class="historytitle2"
|
||||
:style="{
|
||||
v-for="(value, index) in data.workSubmitList"
|
||||
:key="index"
|
||||
class="historytitle2"
|
||||
:style="{
|
||||
'border-bottom':
|
||||
index === history.length - 1
|
||||
? '1px solid rgba(215, 229, 253, 0)'
|
||||
: '1px solid rgba(215, 229, 253, 1)',
|
||||
}"
|
||||
>
|
||||
<div class="content1">{{ value.time }}</div>
|
||||
<div class="content1">{{ value.createTime }}</div>
|
||||
<div class="content2">
|
||||
<div
|
||||
style="
|
||||
style="
|
||||
width: 95%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
"
|
||||
>
|
||||
{{ value.content }}
|
||||
{{ value.workUploadContent }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -181,40 +187,36 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="righttitle">
|
||||
<img width="20px" height="20px" src="../../assets/image/yuan.png" />
|
||||
<img 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">
|
||||
2022-7-20
|
||||
00:00 至 2022-8-29
|
||||
23:59:59
|
||||
{{
|
||||
data.detail?.submitStartTime
|
||||
}} 至 {{ data.detail?.submitEndTime }}
|
||||
</div>
|
||||
<div class="endtime clearfix">
|
||||
<div class="endtimetext">
|
||||
距离结束还有
|
||||
<span class="te">123</span> 小时 <span
|
||||
<span class="te">{{ parseInt(dayjs(data.detail?.submitEndTime).diff(dayjs(), 'minute') / 60) }}</span>
|
||||
小时 <span
|
||||
class="te"
|
||||
>42</span
|
||||
> 分钟
|
||||
>{{ dayjs(data.detail?.submitEndTime).diff(dayjs(), 'minute') % 60 }}</span
|
||||
> 分钟
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="righttitle">
|
||||
<img width="20px" height="20px" src="../../assets/image/yuan.png" />
|
||||
<img width="20px" height="20px" src="../../assets/image/yuan.png"/>
|
||||
|
||||
<div class="text">作业说明</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="explain clearfix">
|
||||
<div class="explain1" style="margin-top: 26px">
|
||||
1、阅读文章，做名校题库，翻译文言文，整体文化常识和<br />
|
||||
文言知识
|
||||
</div>
|
||||
<div class="explain1" style="margin-top: 22px">
|
||||
2、《中国古代诗词文化鉴赏》大唐之音、两宋清雅、明清<br /> 情致
|
||||
</div>
|
||||
<!-- todo #作业任务详情 作业说明是作业要求字段么？-->
|
||||
<div class="explain1" style="margin-top: 26px" v-html="data.detail?.workRequirement"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -223,13 +225,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
import {reactive, toRefs} from "vue";
|
||||
import {request, useRequest} from "@/api/request";
|
||||
import {TASK_WORK_COMMIT, TASK_WORK_DETAIL, FILE_UPLOAD} from "@/api/api";
|
||||
import dayjs from "dayjs";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
export default {
|
||||
name: "homeWork",
|
||||
setup() {
|
||||
const {data} = useRequest(TASK_WORK_DETAIL, {})
|
||||
const state = reactive({
|
||||
activeName: "first",
|
||||
uploadfile: false,
|
||||
fileList: [],
|
||||
textarea1: "",
|
||||
history: [
|
||||
{
|
||||
@@ -259,21 +268,30 @@ export default {
|
||||
},
|
||||
],
|
||||
});
|
||||
const handleClick = (tab, event) => {
|
||||
console.log(tab, event);
|
||||
const router = useRouter()
|
||||
const handleClick = () => {
|
||||
request(TASK_WORK_COMMIT, {workSubmitDto: {workUploadContent: state.textarea1}}).then(() => {
|
||||
router.back()
|
||||
})
|
||||
};
|
||||
const uploadFile = () => {
|
||||
state.uploadfile = !state.uploadfile;
|
||||
};
|
||||
const handleChange = () => {
|
||||
|
||||
}
|
||||
const textareaInput = (e) => {
|
||||
// console.log("eee", e);
|
||||
state.textarea1 = e;
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
data,
|
||||
dayjs,
|
||||
handleClick,
|
||||
uploadFile,
|
||||
textareaInput,
|
||||
FILE_UPLOAD
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -293,6 +311,7 @@ export default {
|
||||
.preNext {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
|
||||
.content {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
@@ -303,6 +322,7 @@ export default {
|
||||
top: -6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
@@ -310,9 +330,11 @@ export default {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn01 {
|
||||
background-image: url("../../assets/image/prev.png");
|
||||
}
|
||||
|
||||
.btn02 {
|
||||
background-image: url("../../assets/image/next.png");
|
||||
}
|
||||
@@ -333,8 +355,10 @@ export default {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
|
||||
.detail {
|
||||
flex: 1;
|
||||
|
||||
.detailT {
|
||||
// height: 1000px;
|
||||
|
||||
@@ -342,6 +366,7 @@ export default {
|
||||
display: flex;
|
||||
padding-bottom: 30px;
|
||||
width: 100%;
|
||||
|
||||
.shapan {
|
||||
width: 100%;
|
||||
height: 58px;
|
||||
@@ -351,6 +376,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.shapanexplain {
|
||||
margin-left: 34px;
|
||||
margin-right: 10px;
|
||||
@@ -363,6 +389,7 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.shangchuan {
|
||||
z-index: 999;
|
||||
font-size: 16px;
|
||||
@@ -384,6 +411,7 @@ export default {
|
||||
top: 235px;
|
||||
right: 3px;
|
||||
z-index: 100;
|
||||
|
||||
.triangle {
|
||||
top: -10px;
|
||||
right: 60px;
|
||||
@@ -402,15 +430,18 @@ export default {
|
||||
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;
|
||||
@@ -419,17 +450,20 @@ export default {
|
||||
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: 131px;
|
||||
height: 8px;
|
||||
@@ -438,6 +472,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
@@ -445,6 +480,7 @@ export default {
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btndetail {
|
||||
margin-left: 25px;
|
||||
}
|
||||
@@ -453,12 +489,14 @@ export default {
|
||||
.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;
|
||||
@@ -467,17 +505,20 @@ export default {
|
||||
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;
|
||||
@@ -486,6 +527,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
@@ -493,6 +535,7 @@ export default {
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btndetail {
|
||||
margin-left: 25px;
|
||||
}
|
||||
@@ -501,12 +544,14 @@ export default {
|
||||
.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;
|
||||
@@ -515,17 +560,20 @@ export default {
|
||||
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;
|
||||
@@ -534,6 +582,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
@@ -541,6 +590,7 @@ export default {
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btndetail {
|
||||
margin-left: 25px;
|
||||
}
|
||||
@@ -565,6 +615,7 @@ export default {
|
||||
height: 62px;
|
||||
background-image: url("../../assets/image/tijiao.png");
|
||||
}
|
||||
|
||||
.history {
|
||||
position: relative;
|
||||
margin-top: 32px;
|
||||
@@ -576,20 +627,24 @@ export default {
|
||||
width: 100%;
|
||||
border-top: 1px solid #d7e5fd;
|
||||
}
|
||||
|
||||
.tongyi {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content1 {
|
||||
width: 150px;
|
||||
margin-top: 14px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.content2 {
|
||||
margin-top: 14px;
|
||||
margin-left: 80px;
|
||||
width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.historycontent {
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
@@ -597,6 +652,7 @@ export default {
|
||||
color: #333330;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.historytitle {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
@@ -604,6 +660,7 @@ export default {
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.historytitle2 {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
@@ -611,18 +668,21 @@ export default {
|
||||
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;
|
||||
@@ -631,43 +691,50 @@ export default {
|
||||
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%
|
||||
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%
|
||||
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%
|
||||
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;
|
||||
@@ -675,9 +742,11 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.join {
|
||||
width: 100%;
|
||||
margin-top: 32px;
|
||||
|
||||
.el-textarea__inner {
|
||||
border-radius: 8px;
|
||||
background-color: rgba(245, 246, 247, 1);
|
||||
@@ -685,18 +754,22 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -706,6 +779,7 @@ export default {
|
||||
top: 53px;
|
||||
}
|
||||
}
|
||||
|
||||
.timebox {
|
||||
width: 417px;
|
||||
height: 149px;
|
||||
@@ -713,12 +787,14 @@ export default {
|
||||
border-radius: 4px;
|
||||
margin-top: 52px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.innertime {
|
||||
margin-top: 17px;
|
||||
margin-left: 55px;
|
||||
@@ -727,6 +803,7 @@ export default {
|
||||
color: #ffffff;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.endtime {
|
||||
margin-left: 10px;
|
||||
margin-top: 16px;
|
||||
@@ -734,9 +811,11 @@ export default {
|
||||
height: 81px;
|
||||
background: #f2f5f7;
|
||||
border-radius: 0px 8px 0px 8px;
|
||||
|
||||
.endtimetext {
|
||||
margin-top: 25px;
|
||||
margin-left: 46px;
|
||||
|
||||
.te {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
@@ -745,6 +824,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.explain {
|
||||
margin-top: 30px;
|
||||
width: 416px;
|
||||
@@ -752,6 +832,7 @@ export default {
|
||||
background: #f2f5f7;
|
||||
border-radius: 8px;
|
||||
padding-bottom: 25px;
|
||||
|
||||
.explain1 {
|
||||
margin-left: 23px;
|
||||
width: 360px;
|
||||
|
||||
Reference in New Issue
Block a user