hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-11 03:46:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

解决定高问题

Browse Source
This commit is contained in:
songwc
2022-09-15 18:22:26 +08:00
parent 56e5c178f7
commit 6ef757a32d
9 changed files with 845 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/next.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 878 B

BIN
src/assets/image/rar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 590 B

BIN
src/assets/image/shangchuan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/image/shapan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/image/tijiao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

6
src/views/debate/debate.vue
View File

@@ -420,12 +420,13 @@ export default {
.detailinfo { .detailinfo {
width: calc(100% + 20px); width: calc(100% + 20px);
margin-top: 20px; margin-top: 20px;
// height: 10px;
display: flex; display: flex;
.detail { .detail {
flex: 1; flex: 1;
margin-right: 20px; margin-right: 20px;
.detailT { .detailT {
height: 1000px; // height: 1000px;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1);
@@ -495,13 +496,11 @@ export default {
.explain { .explain {
margin-top: 30px; margin-top: 30px;
width: 416px; width: 416px;
height: 158px;
background: #f2f5f7; background: #f2f5f7;
border-radius: 8px; border-radius: 8px;
} }
.explaincontent { .explaincontent {
width: 368px; width: 368px;
height: 64px;
font-size: 16px; font-size: 16px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
@@ -509,6 +508,7 @@ export default {
line-height: 24px; line-height: 24px;
margin-left: 24px; margin-left: 24px;
margin-top: 47px; margin-top: 47px;
margin-bottom: 47px;
} }
} }

820
src/views/homework/homework.vue Normal file
View File

@@ -0,0 +1,820 @@
<template>
<div class="moreactive">
<!-- 面包屑导航 -->
<div class="crumb">
<div>混合制项目</div>
<div style="margin-left: 6px; margin-right: 6px">/</div>
<div>管理者进阶-腾飞班</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">上一个</span>
<span class="content" style="margin-left: 31px">下一个</span>
<button class="btn btn02"></button>
</div>
</div>
<!-- 面包屑导航 -->
<div class="debateTitle">【作业】管理者进阶腾飞班 - 中级管理者作业</div>
<!-- 详细信息 -->
<div class="detailinfo">
<div class="detail">
<div class="detailT">
<div
style="margin-left: 48px; margin-right: 147px; position: relative"
>
<div class="title">
<img
width="20px"
height="20px"
src="../../assets/image/yuan.png"
/>
<div class="text">作业名称</div>
<div class="box"></div>
</div>
<div class="shapan clearfix">
<div class="shapanexplain">
管理者进阶腾飞班 - 第一次作业 - 沙盘实验
</div>
</div>
<button class="shangchuan">上传</button>
<div class="uploadDetail">
<div class="triangle"></div>
<div class="square clearfix">
<div class="squarecontent1">
<div class="rar"></div>
<div class="rarDetail">
<span class="detail1" style="margin-right: 130px">
文件名称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 btndetail">暂停</button>
<button class="btn">取消</button>
</div>
<div class="squarecontent2">
<div class="rar"></div>
<div class="rarDetail">
<span class="detail1" style="margin-right: 130px">
文件名称2.rar
</span>
<span class="detail2" style="margin-right: 10px">80%</span>
<span class="detail1">上传失败</span>
<div class="progress">
<div class="progressinner"></div>
</div>
</div>
<button class="btn btndetail">重传</button>
<button class="btn">取消</button>
</div>
<div class="squarecontent3">
<div class="rar"></div>
<div class="rarDetail">
<span class="detail1" style="margin-right: 125px">
文件名称3.rar
</span>
<span class="detail2" style="margin-right: 10px">100%</span>
<span class="detail1">上传成功</span>
<div class="progress">
<div class="progressinner"></div>
</div>
</div>
<button class="btn btndetail">删除</button>
</div>
</div>
</div>
<div class="title">
<img
width="20px"
height="20px"
src="../../assets/image/yuan.png"
/>
<div class="text">作业内容</div>
<div class="box"></div>
</div>
<div class="join"></div>
<button class="tijiao">提交</button>
<div class=""></div>
<div class="title" style="margin-top: 0px">
<img
width="20px"
height="20px"
src="../../assets/image/yuan.png"
/>
<div class="text">历史纪录</div>
<div class="box"></div>
</div>
<div class="history">
<div class="historytitle clearfix tongyi">
<div class="content1">提交时间</div>
<div class="content2">作业内容</div>
</div>
<div class="historytitle2 clearfix tongyi">
<div class="content1">2022-7-20&nbsp;00:00</div>
<div class="content2">大唐之音鉴赏 - 2022/7/20.zip</div>
</div>
<div class="fenge"></div>
<div class="historytitle2 clearfix tongyi">
<div class="content1">2022-7-18&nbsp;00:00</div>
<div class="content2">
《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…
</div>
</div>
<div class="fenge"></div>
<div
class="historytitle2 clearfix tongyi"
style="border-radius: 0px 0px 8px 8px"
>
<div class="content1">2022-7-14&nbsp;00:00</div>
<div class="content2">湖北黄冈语文压卷题.doc</div>
</div>
</div>
</div>
<div class="right">
<div class="righttitle">
<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&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;2022-8-29
23:59:59
</div>
<div class="endtime clearfix">
<div class="endtimetext">
距离结束还有&nbsp;&nbsp;
<span class="te">123</span>&nbsp;&nbsp; 小时&nbsp;&nbsp;<span
class="te"
>42</span
>&nbsp;&nbsp;分钟
</div>
</div>
</div>
<div class="righttitle">
<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 />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文言知识
</div>
<div class="explain1" style="margin-top: 22px">
2、《中国古代诗词文化鉴赏》大唐之音、两宋清雅、明清<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;情致
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 详细信息 -->
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
name: "homeWork",
setup() {
const state = reactive({
activeName: "first",
});
const handleClick = (tab, event) => {
console.log(tab, event);
};
return {
...toRefs(state),
handleClick,
};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.moreactive {
.crumb {
color: #fff;
display: flex;
font-size: 14px;
line-height: 24px;
position: relative;
}
.preNext {
position: absolute;
right: 0px;
.content {
font-size: 14px;
color: #fff;
width: 43px;
height: 14px;
display: inline-block;
position: relative;
top: -6px;
}
.btn {
width: 23px;
height: 23px;
border-radius: 50%;
border: 0;
}
.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;
}
.detailinfo {
width: calc(100% + 20px);
margin-top: 20px;
display: flex;
.detail {
flex: 1;
margin-right: 20px;
.detailT {
height: 1000px;
background: #ffffff;
border-radius: 8px;
color: rgba(51, 51, 51, 1);
display: flex;
.right {
.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-family: PingFang SC;
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-family: PingFang SC;
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-family: PingFang SC;
font-weight: 500;
color: #333330;
line-height: 24px;
}
}
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.shapan {
width: 1181px;
height: 58px;
margin-top: 30px;
background-image: url("../../assets/image/shapan.png");
.shapanexplain {
margin-top: 18px;
margin-left: 34px;
width: 391px;
height: 20px;
font-size: 20px;
font-family: PingFang SC;
font-weight: 800;
color: #4a9cf8;
line-height: 24px;
}
}
.shangchuan {
font-size: 16px;
font-family: PingFang SC;
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;
.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;
}
.square {
width: 475px;
height: 243px;
background: #ffffff;
box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
border-radius: 8px;
.squarecontent1 {
margin-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-family: PingFang SC;
font-weight: 500;
color: #677d86;
}
.detail2 {
// height: 11px;
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #277aff;
}
.progress {
width: 291px;
height: 8px;
background: #e8f1fe;
border-radius: 4px;
.progressinner {
width: 131px;
height: 8px;
background: linear-gradient(0deg, #2478ff 0%, #5093ff 100%);
border-radius: 4px;
}
}
}
.btn {
border: 0;
background-color: #fff;
color: #277aff;
margin-top: 20px;
}
.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-family: PingFang SC;
font-weight: 500;
color: #677d86;
}
.detail2 {
// height: 11px;
font-size: 12px;
font-family: PingFang SC;
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;
}
.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-family: PingFang SC;
font-weight: 500;
color: #677d86;
}
.detail2 {
// height: 11px;
font-size: 12px;
font-family: PingFang SC;
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;
}
.btndetail {
margin-left: 25px;
}
}
}
}
.tijiao {
margin-top: 22px;
margin-left: 480px;
width: 33px;
height: 16px;
font-size: 16px;
font-family: PingFang SC;
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: 1182px;
height: 200px;
border: 1px solid #d7e5fd;
border-radius: 8px;
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.fenge {
width: 1181px;
border-top: 1px solid #d7e5fd;
}
.tongyi {
display: flex;
}
.content1 {
margin-top: 14px;
margin-left: 87px;
}
.content2 {
position: absolute;
margin-top: 14px;
left: 400px;
}
.historycontent {
width: 59px;
height: 14px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333330;
line-height: 38px;
}
.historytitle {
width: 1182px;
height: 50px;
background: #f2f5f7;
border-radius: 8px 8px 0px 0px;
}
.historytitle2 {
width: 1182px;
height: 48px;
background: #fff;
}
}
.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: 1181px;
height: 271px;
background: #f5f6f7;
border-radius: 8px;
margin-top: 32px;
}
}
.detailB {
min-height: 363px;
background: #ffffff;
border-radius: 8px;
margin-top: 20px;
.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);
}
.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;
}
.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 .question {
font-size: 14px;
font-weight: 500;
color: #333330;
line-height: 18px;
}
.work .active {
width: 82px;
height: 28px;
background: linear-gradient(90deg, #a5d4e0 0%, #b4dce6 100%);
border-radius: 4px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
line-height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-right: 11px;
}
.work .unactive {
width: 80px;
height: 26px;
border: 1px solid #a5d4e0;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
color: #a5d4e0;
line-height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 11px;
cursor: pointer;
}
.work .btncolor {
background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%);
}
.work .bordercolor {
border: 1px solid #85aad2;
}
.work .fontcolor {
color: rgba(133, 170, 210, 1);
}
.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;
}
}
}
}
}
</style>

33
src/views/liveBroadcast/LiveBroadcast.vue
View File

@@ -34,19 +34,11 @@
<div style="margin-left: 8px">大族广场</div> <div style="margin-left: 8px">大族广场</div>
</div> </div>
</div> </div>
<div <div class="threeBtn">
class="btn" <botton class="btn" style="background: rgb(59, 191, 252)">观看</botton>
style="margin-right: -660px; background: rgb(59, 191, 252)" <botton class="btn" style="background: rgb(57, 146, 249)">签到</botton>
> <botton class="btn">评估</botton>
观看
</div> </div>
<div
class="btn"
style="margin-right: -660px; background: rgb(57, 146, 249)"
>
签到
</div>
<div class="btn">评估</div>
</div> </div>
<!-- 基本信息 --> <!-- 基本信息 -->
@@ -237,6 +229,10 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.threeBtn {
display: flex;
justify-content: space-between;
}
.btn { .btn {
width: 146px; width: 146px;
height: 46px; height: 46px;
@@ -277,7 +273,7 @@ export default {
flex: 1; flex: 1;
margin-right: 20px; margin-right: 20px;
.detailT { .detailT {
height: 646px; min-height: 646px;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1);
@@ -422,7 +418,8 @@ export default {
} }
.tell { .tell {
width: 434px; width: 434px;
height: 188px; // height: 10%;
// min-height: 557px; // min-height: 557px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 8px; border-radius: 8px;
@@ -453,10 +450,11 @@ export default {
top: 53px; top: 53px;
} }
.content { .content {
margin: 25px 24px 49px 49px; margin: 25px 24px 0px 49px;
padding-bottom: 55px;
color: #677d86; color: #677d86;
width: 361px; width: 361px;
height: 304px; // height: 304px;
line-height: 24px; line-height: 24px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
@@ -467,9 +465,10 @@ export default {
.teacher { .teacher {
margin-top: 22px; margin-top: 22px;
width: 434px; width: 434px;
height: 328px; // height: 328px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 8px; border-radius: 8px;
padding-bottom: 40px;
.title { .title {
display: flex; display: flex;
align-items: center; align-items: center;

11
src/views/moreActive/MoreActive.vue
View File

@@ -42,7 +42,7 @@
<div class="detailinfo"> <div class="detailinfo">
<div class="detail"> <div class="detail">
<div class="detailT"> <div class="detailT">
<div class="" style="margin-left: 48px; margin-right: 48px"> <div style="margin-left: 48px; margin-right: 48px">
<div class="title"> <div class="title">
<img <img
width="20px" width="20px"
@@ -203,7 +203,7 @@ export default {
flex: 1; flex: 1;
margin-right: 20px; margin-right: 20px;
.detailT { .detailT {
height: 646px; min-height: 646px;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1);
@@ -348,8 +348,8 @@ export default {
} }
.teacher { .teacher {
width: 434px; width: 434px;
height: 438px; height: 10%;
// min-height: 557px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 8px; border-radius: 8px;
background: linear-gradient( background: linear-gradient(
@@ -371,6 +371,7 @@ export default {
font-weight: 800; font-weight: 800;
} }
.title .box { .title .box {
margin-left: 4px;
width: 75px; width: 75px;
height: 10px; height: 10px;
background-color: rgba(36, 120, 255, 0.15); background-color: rgba(36, 120, 255, 0.15);
@@ -382,7 +383,7 @@ export default {
margin: 25px 24px 49px 49px; margin: 25px 24px 49px 49px;
color: #677d86; color: #677d86;
width: 361px; width: 361px;
height: 304px; // height: 304px;
line-height: 24px; line-height: 24px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;