mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-06 17:36:45 +08:00
665 lines
19 KiB
Vue
665 lines
19 KiB
Vue
<template>
|
||
<div class="homeworkpage">
|
||
<TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead>
|
||
|
||
<div class="notice">
|
||
<div class="noticebox">
|
||
<div class="mani">
|
||
<div class="dir">
|
||
<div class="samegt pre"></div>
|
||
<div class="sameg">上一个</div>
|
||
<div class="sameg" style="margin-left: 15.5px">下一个</div>
|
||
<div class="samegt next"></div>
|
||
</div>
|
||
|
||
<div class="lefttitle">
|
||
<div class="img"></div>
|
||
<div class="rightmain">
|
||
<div class="talk">作业名称</div>
|
||
<div class="box"></div>
|
||
</div>
|
||
</div>
|
||
<div class="contentone clearfix">
|
||
<div class="onttitle">管理者进阶腾飞班 - 第一次作业 - 沙盘实验</div>
|
||
</div>
|
||
|
||
<div class="lefttitle">
|
||
<div class="img"></div>
|
||
<div class="rightmain">
|
||
<div class="talk">投票时间</div>
|
||
<div class="box"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contenttwo clearfix">
|
||
<div class="time">
|
||
<div class="timeone">2022-7-20 00:00</div>
|
||
<div class="timetwo" style="margin-top: -2.5px">至</div>
|
||
<div class="timethr">2022-8-29 23:59:59</div>
|
||
</div>
|
||
<div class="endbox">
|
||
<div class="endtalk clearfix">
|
||
<div class="sameto">距离结束还有</div>
|
||
<div class="sametoo">123</div>
|
||
<div class="sameto">小时</div>
|
||
<div class="sametoo">42</div>
|
||
<div class="sameto">分钟</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lefttitle">
|
||
<div class="img"></div>
|
||
<div class="rightmain">
|
||
<div class="talk">投票说明</div>
|
||
<div class="box"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contentthr clearfix">
|
||
<div class="thrcontent">
|
||
1、阅读文章，做名校题库，翻译文言文，整体文 化常识和文言知识；<br />
|
||
2、《中国古代诗词文化鉴赏》大唐之音、两宋清 雅、明清情致
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lefttitle">
|
||
<div class="img"></div>
|
||
<div class="rightmain">
|
||
<div class="talk">作业内容</div>
|
||
<div class="box"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contentfor clearfix">
|
||
<el-input
|
||
v-model="textarea1"
|
||
:autosize="{ minRows: 12.5, maxRows: 12.5 }"
|
||
resize="none"
|
||
type="textarea"
|
||
@input="textareaInput"
|
||
class="input"
|
||
/>
|
||
|
||
<div
|
||
class="uploadDetail"
|
||
:style="{ display: uploadfile ? 'block' : 'none' }"
|
||
>
|
||
<div class="square clearfix">
|
||
<div class="squarecontent1">
|
||
<div class="rar"></div>
|
||
<div class="rarDetail">
|
||
<span class="detail1" style="margin-right: 42px">
|
||
文件名称1.rar
|
||
</span>
|
||
<span class="detail2" style="margin-right: 10px">48%</span>
|
||
<span class="detail1">正在上传</span>
|
||
<div class="progress">
|
||
<div class="progressinner"></div>
|
||
</div>
|
||
</div>
|
||
<button class="btn samebtnn">暂停</button>
|
||
<button class="btn samebtnn">取消</button>
|
||
</div>
|
||
|
||
<div class="squarecontent2">
|
||
<div class="rar"></div>
|
||
<div class="rarDetail">
|
||
<span class="detail1" style="margin-right: 42px">
|
||
文件名称2.rar
|
||
</span>
|
||
<span class="detail2" style="margin-right: 10px">80%</span>
|
||
<span class="detail1">上传失败</span>
|
||
<div class="progress">
|
||
<div class="progressinner"></div>
|
||
</div>
|
||
</div>
|
||
<button class="btn samebtnn">重传</button>
|
||
<button class="btn samebtnn">取消</button>
|
||
</div>
|
||
|
||
<div class="squarecontent3">
|
||
<div class="rar"></div>
|
||
<div class="rarDetail">
|
||
<span class="detail1" style="margin-right: 34px">
|
||
文件名称3.rar
|
||
</span>
|
||
<span class="detail2" style="margin-right: 10px">100%</span>
|
||
<span class="detail1">上传成功</span>
|
||
<div class="progress">
|
||
<div class="progressinner"></div>
|
||
</div>
|
||
</div>
|
||
<button class="btn samebtnn" style="margin-left: 7px">
|
||
删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="triangle"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btnbox">
|
||
<div class="btnn">
|
||
<button class="btns btno" @click="uploadFile">上传</button>
|
||
<button class="btns btnt">提交</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lefttitle">
|
||
<div class="img"></div>
|
||
<div class="rightmain">
|
||
<div class="talk">历史纪录</div>
|
||
<div class="box"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contentfiv">
|
||
<div class="his clearfix">
|
||
<div class="histime">2022-7-20 00:00</div>
|
||
<div class="hiscon">大唐之音鉴赏 - 2022/7/20.zip</div>
|
||
</div>
|
||
<div class="his clearfix" style="background-color: #fff">
|
||
<div class="histime">2022-7-18 00:00</div>
|
||
<div class="hiscon">
|
||
《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…
|
||
</div>
|
||
</div>
|
||
<div class="his clearfix">
|
||
<div class="histime">2022-7-14 00:00</div>
|
||
<div class="hiscon">湖北黄冈语文压卷题.doc</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { reactive, toRefs } from "vue";
|
||
import TitleHead from "@/components/TitleHead.vue";
|
||
export default {
|
||
name: "HomeworkPage",
|
||
components: {
|
||
TitleHead,
|
||
},
|
||
setup() {
|
||
const state = reactive({
|
||
uploadfile: false,
|
||
textarea1: " ",
|
||
});
|
||
const uploadFile = () => {
|
||
state.uploadfile = !state.uploadfile;
|
||
};
|
||
const textareaInput = (e) => {
|
||
// console.log("eee", e);
|
||
state.textarea1 = e;
|
||
};
|
||
return {
|
||
...toRefs(state),
|
||
uploadFile,
|
||
textareaInput,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||
<style lang="scss">
|
||
.clearfix:before,
|
||
.clearfix:after {
|
||
content: " ";
|
||
display: table;
|
||
clear: both;
|
||
}
|
||
.homeworkpage {
|
||
width: 100%;
|
||
|
||
.notice {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 10px;
|
||
.noticebox {
|
||
width: 90%;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
.mani {
|
||
width: 90%;
|
||
margin-top: 20px;
|
||
|
||
.dir {
|
||
width: 100%;
|
||
height: 20px;
|
||
// background-color: red;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
justify-content: right;
|
||
font-size: 12px;
|
||
color: #2478ff;
|
||
.samegt {
|
||
margin-top: 3px;
|
||
height: 12px;
|
||
width: 12px;
|
||
}
|
||
.samege {
|
||
line-height: 12px;
|
||
}
|
||
.pre {
|
||
margin-right: 5px;
|
||
// background-size: 100%;
|
||
background-image: url(../../assets/image/ballotpage/pre.png);
|
||
}
|
||
.next {
|
||
margin-left: 5px;
|
||
// background-size: 100%;
|
||
background-image: url(../../assets/image/ballotpage/next.png);
|
||
}
|
||
}
|
||
|
||
.lefttitle {
|
||
display: flex;
|
||
position: relative;
|
||
width: 90px;
|
||
.img {
|
||
margin-top: 1.5px;
|
||
width: 16px;
|
||
height: 16px;
|
||
background-image: url(../../assets/image/ballotpage/cycle.png);
|
||
}
|
||
.rightmain {
|
||
margin-left: 7.5px;
|
||
.talk {
|
||
margin-left: -1.5px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
position: absolute;
|
||
z-index: 999;
|
||
}
|
||
.box {
|
||
position: absolute;
|
||
width: 62.5px;
|
||
height: 10px;
|
||
right: 8px;
|
||
bottom: -5px;
|
||
background: #ccdfff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.samenum {
|
||
margin-top: 18.5px;
|
||
position: absolute;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
.samego {
|
||
margin-top: 45px;
|
||
position: absolute;
|
||
font-size: 13px;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
.contentone {
|
||
margin-top: 23px;
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
height: 74px;
|
||
// #DFEBFF
|
||
// #fff
|
||
background-image: url(../../assets/image/homeworkpage/bacc.png);
|
||
background-size: 100% 100%;
|
||
color: #4a9cf8;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
.onttitle {
|
||
margin-top: 15px;
|
||
// width: 90%;
|
||
}
|
||
}
|
||
|
||
.contenttwo {
|
||
position: relative;
|
||
margin-top: 23px;
|
||
width: 100%;
|
||
height: 95px;
|
||
margin-bottom: 20px;
|
||
// #B6C6E1
|
||
// #89AED6
|
||
background-image: linear-gradient(to right, #b6c6e1, #89aed6 90%);
|
||
.time {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
margin-top: 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 80%;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
height: 20px;
|
||
}
|
||
.endbox {
|
||
margin-top: 42.5px;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
width: 95%;
|
||
height: 45px;
|
||
background-color: #f2f5f7;
|
||
border-radius: 0 3px 0 3px;
|
||
display: flex;
|
||
justify-content: center;
|
||
.endtalk {
|
||
width: 90%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 18px;
|
||
.sameto {
|
||
font-size: 14px;
|
||
}
|
||
.sametoo {
|
||
margin-top: -3px;
|
||
font-size: 21.5px;
|
||
color: #4a9cf8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.contentthr {
|
||
border-radius: 4px;
|
||
margin-bottom: 23px;
|
||
position: relative;
|
||
margin-top: 23px;
|
||
width: 100%;
|
||
// height: 95px;
|
||
background-color: #f2f5f7;
|
||
display: flex;
|
||
justify-content: center;
|
||
.thrcontent {
|
||
width: 90%;
|
||
margin-top: 19px;
|
||
margin-bottom: 15.5px;
|
||
// background-color: blue;
|
||
font-size: 13px;
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
|
||
.contentfor {
|
||
margin-top: 23px;
|
||
width: 100%;
|
||
margin-bottom: 34px;
|
||
height: 200px;
|
||
// background-color: red;
|
||
position: relative;
|
||
// .input {
|
||
// background-color: #f5f6f7;
|
||
// }
|
||
.el-textarea__inner {
|
||
background-color: #f5f6f7;
|
||
}
|
||
.uploadDetail {
|
||
.samebtnn {
|
||
padding: 0;
|
||
}
|
||
position: absolute;
|
||
// top: 110px;
|
||
top: 120px;
|
||
right: -14px;
|
||
z-index: 999;
|
||
width: 109%;
|
||
.triangle {
|
||
top: 156px;
|
||
left: 110px;
|
||
width: 0;
|
||
height: 0;
|
||
position: absolute;
|
||
border-right: 5px solid transparent;
|
||
border-left: 5px solid transparent;
|
||
border-top: 5px solid #fff;
|
||
// box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
|
||
}
|
||
|
||
.square {
|
||
// width: 475px;
|
||
// width: 100%;
|
||
height: 156px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
|
||
border-radius: 8px;
|
||
.squarecontent1 {
|
||
// padding-top: 18px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
.rar {
|
||
margin: 12px 15px 0 27px;
|
||
width: 19px;
|
||
height: 22px;
|
||
background-size: 100% 100%;
|
||
background-image: url("../../assets/image/homeworkpage/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: 202px;
|
||
height: 8px;
|
||
background: #e8f1fe;
|
||
border-radius: 4px;
|
||
.progressinner {
|
||
width: 48%;
|
||
height: 8px;
|
||
background: linear-gradient(
|
||
0deg,
|
||
#2478ff 0%,
|
||
#5093ff 100%
|
||
);
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
}
|
||
.btn {
|
||
border: 0;
|
||
background-color: #fff;
|
||
color: #277aff;
|
||
margin-top: 8px;
|
||
cursor: pointer;
|
||
width: 40px;
|
||
}
|
||
}
|
||
|
||
.squarecontent2 {
|
||
margin-top: 5px;
|
||
display: flex;
|
||
.rar {
|
||
margin: 12px 15px 0 27px;
|
||
width: 19px;
|
||
height: 22px;
|
||
background-size: 100% 100%;
|
||
background-image: url("../../assets/image/homeworkpage/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: 202px;
|
||
height: 8px;
|
||
background: #e8f1fe;
|
||
border-radius: 4px;
|
||
.progressinner {
|
||
width: 80%;
|
||
height: 8px;
|
||
background: linear-gradient(
|
||
0deg,
|
||
#ee625e 0%,
|
||
#eea4a1 100%
|
||
);
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
}
|
||
.btn {
|
||
border: 0;
|
||
background-color: #fff;
|
||
color: #277aff;
|
||
margin-top: 8px;
|
||
cursor: pointer;
|
||
width: 40px;
|
||
}
|
||
.btndetail {
|
||
// margin-left: 25px;
|
||
}
|
||
}
|
||
|
||
.squarecontent3 {
|
||
margin-top: 5px;
|
||
display: flex;
|
||
.rar {
|
||
margin: 12px 15px 0 27px;
|
||
width: 19px;
|
||
height: 22px;
|
||
background-size: 100% 100%;
|
||
background-image: url("../../assets/image/homeworkpage/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: 202px;
|
||
height: 8px;
|
||
background: #e8f1fe;
|
||
border-radius: 4px;
|
||
.progressinner {
|
||
width: 100%;
|
||
height: 8px;
|
||
background: linear-gradient(
|
||
0deg,
|
||
#36d1ae 0%,
|
||
#3be5bf 100%
|
||
);
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
}
|
||
.btn {
|
||
border: 0;
|
||
background-color: #fff;
|
||
color: #277aff;
|
||
margin-top: 8px;
|
||
cursor: pointer;
|
||
}
|
||
.btndetail {
|
||
margin-left: 25px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btnbox {
|
||
margin-top: 90px;
|
||
// height: 20px;
|
||
width: 100%;
|
||
// background-color: red;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
|
||
.btnn {
|
||
color: #fff;
|
||
width: 60%;
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.btns {
|
||
color: #fff;
|
||
width: 83px;
|
||
height: 33px;
|
||
border: 0;
|
||
border-radius: 2px;
|
||
}
|
||
.btno {
|
||
background-color: #ffb96d;
|
||
}
|
||
.btnt {
|
||
background-color: #2478ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.contentfiv {
|
||
margin-top: 26px;
|
||
width: 100%;
|
||
margin-bottom: 34px;
|
||
// height: 200px;
|
||
// background-color: #bfa;
|
||
.his {
|
||
width: 100%;
|
||
// height: 100px;
|
||
background-color: #f2f5f7;
|
||
border-radius: 4px;
|
||
.histime {
|
||
color: #677d86;
|
||
font-size: 12px;
|
||
margin-top: 11px;
|
||
margin-left: 22px;
|
||
}
|
||
.hiscon {
|
||
width: 87%;
|
||
font-size: 13px;
|
||
line-height: 24px;
|
||
margin: 11px 0 11px 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|