style:修改调研、直播、投票、作业、讨论、讨论详情页面

This commit is contained in:
songwc
2022-09-29 18:06:22 +08:00
parent e480b03f02
commit bdf6734632
11 changed files with 1186 additions and 1813 deletions

View File

@@ -1,175 +1,77 @@
<template>
<div class="homeworkpage">
<TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead>
<!-- <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 class="joininfo">
管理者进阶腾飞班 - 第一次作业 - 沙盘实验
</div>
<div class="contenttitle">
<img class="timeimg" src="../../assets/image/ballotpage/time.png" >
<div class="timee">2022-07-20 20:00-21:00</div>
</div>
<div class="timebox">
<div class="samez" style="margin-left:18px">00</div>
<div class="samey"></div>
<div class="samez">00</div>
<div class="samey"></div>
<div class="samez">00</div>
<div class="samey"></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>
</div>
</div>
<div class="lefttitle">
<div class="img"></div>
<div class="rightmain">
<div class="talk">投票时间</div>
<div class="box"></div>
<div class="notice">
<div class="noticebox">
<div class="mani">
<div class="joininfo">
作业详情
</div>
<div class="line"></div>
<div class="contentone">
<div class="ballotdetail">
1阅读文章做名校题库翻译文言文整体文化常识和文言知识<br/>2中国古代诗词文化鉴赏大唐之音两宋清雅明清情致
</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>
</div>
<div class="notice">
<div class="noticebox">
<div class="mani">
<div class="joininfo">
历史纪录
</div>
<div class="lefttitle">
<div class="img"></div>
<div class="rightmain">
<div class="talk">投票说明</div>
<div class="box"></div>
<div class="line"></div>
<div class="contentone" style="margin-bottom:10px;">
<div class="hiscon">
<div
class="historyitem clearfix"
v-for="(item,index) in historywork"
:key="item.id"
:style="index%2 !==0? null : 'background-color:#F2F5F7'"
>
<div class="itemtime">{{item.time}}</div>
<div class="itemtitle">{{item.title}}</div>
</div>
</div>
</div>
<div class="contentthr clearfix">
<div class="thrcontent">
1阅读文章做名校题库翻译文言文整体文 化常识和文言知识<br />
2中国古代诗词文化鉴赏大唐之音两宋清 明清情致
<div class="btnc">
<button class="btncc">交作业</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="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>
@@ -178,29 +80,42 @@
<script>
import { reactive, toRefs } from "vue";
import TitleHead from "@/components/TitleHead.vue";
// import TitleHead from "@/components/TitleHead.vue";
export default {
name: "HomeworkPage",
components: {
TitleHead,
// TitleHead,
},
setup() {
const state = reactive({
uploadfile: false,
textarea1: " ",
historywork:[
{
id:1,
time:'2022-7-20 00:00',
title:'大唐之音鉴赏 - 2022/7/20.zip'
},
{
id:2,
time:'2022-7-18 00:00',
title:'《木兰辞》翻译:叹息声一声接着一声,木兰姑娘当门在织布。…'
},
{
id:3,
time:'2022-7-14 00:00',
title:'大唐之音鉴赏 - 2022/7/20.zip'
},
{
id:4,
time:'2022-7-18 00:00',
title:'《木兰辞》翻译:叹息声一声接着一声,木兰姑娘当门在织布。…'
},
]
});
const uploadFile = () => {
state.uploadfile = !state.uploadfile;
};
const textareaInput = (e) => {
// console.log("eee", e);
state.textarea1 = e;
};
return {
...toRefs(state),
uploadFile,
textareaInput,
};
}
},
};
</script>
@@ -220,443 +135,122 @@ export default {
width: 100%;
display: flex;
justify-content: center;
margin-top: -17.5px;
// margin-top: -17.5px;
margin-top: 20px;
.noticebox {
width: 90%;
width: 100%;
background: #fff;
border-radius: 4px;
// border-radius: 4px;
position: relative;
display: flex;
justify-content: center;
.line{
width: 100%;
height: 0;
border-top: 1px solid #F1F2F3;
margin-top: 17px;
position:absolute;
left:0;
}
.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;
// position:relative;
.joininfo{
color:#0D233A;
font-size: 16px;
font-weight: bold;
left: 50%;
transform: translate(-50%, 0);
}
.samego {
margin-top: 45px;
position: absolute;
font-size: 13px;
left: 50%;
transform: translate(-50%, 0);
.contenttitle{
width:100%;
// height:10px;
margin-top: 15px;
// background-color: #bfa;
display:flex;
.timeimg{
width: 12.8px;
height: 13px;
}
.timee{
color:#6E7B84;
font-size: 14px;
line-height: 13px;
margin-left: 6px;
}
}
.timebox{
display:flex;
width: 100%;
height:49px;
background-color:#F2F5F7;
margin-top: 17.5px;
margin-bottom: 27.5px;
border-radius: 10px;
.samez{
color:#0060FF;
font-size: 18px;
line-height: 49px;
margin-left: 13px;
}
.samey{
color:#6E7B84;
font-size: 14px;
line-height: 49px;
margin-left: 13px;
}
}
.contentone {
margin-top: 23px;
margin-top: 43px;
display: flex;
justify-content: center;
justify-content: space-between;
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;
// height: 200px;
.ballotdetail{
color:#6E7B84;
line-height: 30px;
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;
.hiscon{
width: 100%;
.historyitem{
// margin-left: 21px;
width: 100%;
border-radius: 4px;
.itemtime{
color:#6E7B84;
margin-left: 21px;
font-size: 12px;
margin-top: 11px;
}
.itemtitle{
line-height: 22px;
font-size: 13px;
color:#333330;
margin:10.5px 0 10.5px 21px;
}
}
}
}
.btnc{
width:100%;
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;
}
.btncc{
margin-bottom: 19px;
height:33px;
width:88%;
border:0;
background-color: #2478FF;
border-radius: 6px;
color:#fff;
font-size: 14px;
}
}
}
.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;
}
}
}
}
}
}