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

style:修改投票的参与情况样式

Browse Source
This commit is contained in:
李晓鸽
2022-09-19 16:36:03 +08:00
parent de0afd81d8 d2599087d1
commit 52b6d3fe75
5 changed files with 367 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@@ -1,6 +1,6 @@
<template>
<div id="container">
<div id="nav">
<!-- <div id="nav">
<router-link
v-for="item in routes"
:key="item.path"
@@ -12,7 +12,7 @@
>
{{ item.name }}
</router-link>
</div>
</div> -->
<main>
<router-view />
</main>

23
src/views/ballot/ballot.vue
View File

@@ -21,7 +21,7 @@
<div class="detailinfo">
<div class="detail">
<div class="detailT">
<div style="margin-left: 48px; margin-right: 48px">
<div class="left">
<div class="title">
<img
width="20px"
@@ -173,20 +173,26 @@ export default {
}
.detailinfo {
width: calc(100% + 20px);
width: 100%;
margin-top: 20px;
display: flex;
.detail {
flex: 1;
margin-right: 20px;
// margin-right: 20px;
.detailT {
height: 1000px;
background: #ffffff;
border-radius: 8px;
color: rgba(51, 51, 51, 1);
display: flex;
.left {
margin-left: 48px;
flex: 1;
}
.right {
width: 417px;
margin-right: 48px;
.righttitle {
display: flex;
padding-top: 39px;
@@ -289,9 +295,11 @@ export default {
.all {
display: flex;
justify-content: space-between;
width: 1280px;
// width: 1280px;
margin-right: 48px;
margin-top: 43px;
.allbox1 {
margin-right: 22px;
background: linear-gradient(
0deg,
rgba(160, 193, 230, 0) 0%,
@@ -299,6 +307,7 @@ export default {
);
}
.allbox2 {
margin-right: 22px;
background: linear-gradient(
0deg,
rgba(177, 219, 229, 0) 0%,
@@ -313,7 +322,8 @@ export default {
);
}
.item {
width: 410px;
// width: 410px;
width: calc(100% - 44px);
height: 149px;
text-align: center;
border-radius: 4px;
@@ -331,7 +341,8 @@ export default {
}
}
.join {
width: 1280px;
// width: 1280px;
margin-right: 48px;
min-height: 408px;
background: #f5f6f7;
border-radius: 8px;

215
src/views/examination/ExamPage.vue
View File

@@ -34,16 +34,81 @@
<!-- 标题 -->
<!-- 详细内容 -->
<div class="bascinfo">
<div></div>
<!-- 中间盒子 -->
<div class="centercontent">
<div class="righttitle">
<img width="20px" height="20px" src="../../assets/image/yuan.png" />
<div class="text">考试测试</div>
<div class="box"></div>
</div>
<!-- 考试测试的盒子 -->
<div class="test clearfix">
<div class="detail">
<span style="margin-right: 43px">考试时间：30分钟</span>
<span>及格线：60</span>
</div>
<div class="testtime clearfix">
<div class="timedetail">
考试时间：2022-7-20 00:00 至 2022-8-29 23:59:59
</div>
</div>
</div>
<!-- 考试测试的盒子 -->
<!-- 开始考试按钮 -->
<button class="starttest">开始考试</button>
<!-- 开始考试按钮 -->
<div class="righttitle" style="padding-top: 80px">
<img width="20px" height="20px" src="../../assets/image/yuan.png" />
<div class="text">历史纪录</div>
<div class="box" style="top: 94px"></div>
</div>
<div class="history">
<div class="historytitle clearfix tongyi">
<div class="content1">提交时间</div>
<div class="content2">成绩</div>
<div class="content3">状态</div>
<div class="content4">操作</div>
</div>
<div class="historytitle2 clearfix tongyi">
<div class="content1">2022-7-20&nbsp;00:00</div>
<div class="content2">10分</div>
<div class="content3" style="left: 505px">已完成</div>
<button class="contentbtn">查看考卷</button>
</div>
<div class="fenge"></div>
<div class="historytitle2 clearfix tongyi">
<div class="content1">2022-7-18&nbsp;00:00</div>
<div class="content2">10分</div>
<div class="content3" style="left: 505px">已完成</div>
<button class="contentbtn">查看考卷</button>
</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">10分</div>
<div class="content3" style="left: 505px">已完成</div>
<button class="contentbtn">查看考卷</button>
</div>
</div>
</div>
</div>
<!-- 详细内容 -->
</div>
</template>
<script>
export default {
name: "ExamPage",
};
</script>
<style scoped lang="scss">
.surveydetail {
.crumb {
@@ -73,6 +138,7 @@ export default {
margin-left: -11px;
}
.bascinfo {
min-height: 800px;
width: 100%;
background: #ffffff;
border-radius: 8px;
@@ -80,6 +146,153 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.centercontent {
position: relative;
.righttitle {
display: flex;
padding-top: 30px;
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: 44px;
}
}
.test {
margin-top: 16px;
margin-bottom: 26px;
width: 842px;
height: 158px;
background: #f2f5f7;
border-radius: 8px;
.detail {
margin-top: 29px;
margin-left: 44px;
height: 14px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #56a3f9;
}
.testtime {
margin-top: 20px;
margin-left: 10px;
width: 823px;
height: 81px;
background: #ffffff;
border-radius: 0px 8px 0px 8px;
.timedetail {
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #333330;
margin-top: 32px;
margin-left: 34px;
}
}
}
.starttest {
position: absolute;
width: 146px;
height: 46px;
background: #2478ff;
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
border-radius: 4px;
border: 0;
font-size: 14px;
font-family: PingFang SC;
font-weight: 800;
color: #ffffff;
left: calc(50% - 73px);
}
.history {
position: relative;
margin-top: 32px;
width: 842px;
height: 200px;
border: 1px solid #d7e5fd;
border-radius: 8px;
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.fenge {
width: 841px;
border-top: 1px solid #d7e5fd;
}
.tongyi {
display: flex;
}
.content1 {
margin-top: 14px;
margin-left: 77px;
}
.content2 {
position: absolute;
margin-top: 14px;
left: 328px;
}
.content3 {
position: absolute;
margin-top: 14px;
left: 512px;
}
.content4 {
position: absolute;
margin-top: 14px;
left: 700px;
}
.contentbtn {
position: absolute;
margin-top: 14px;
left: 685px;
font-size: 15px;
// line-height: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #2478ff;
background-color: #fff;
border: 0;
}
.historycontent {
width: 59px;
height: 14px;
font-size: 14px;
font-family: Microsoft YaHei;
// font-weight: 400;
color: #333330;
line-height: 38px;
}
.historytitle {
width: 842px;
height: 50px;
background: #f2f5f7;
border-radius: 8px 8px 0px 0px;
}
.historytitle2 {
width: 842px;
height: 48px;
background: #fff;
}
}
}
}
}
</style>

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

@@ -231,23 +231,25 @@ export default {
align-items: center;
.threeBtn {
display: flex;
width: 490px;
justify-content: space-between;
}
.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;
margin-right: 87px;
.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 {
@@ -257,6 +259,16 @@ export default {
line-height: 24px;
margin-left: -9px;
}
@media screen and (max-width: 1030px) {
// .threeBtn {
// margin-right: 30px;
// }
.title {
margin-bottom: -24px;
}
}
// @media screen and(max-width:) {
// }
.time {
font-size: 14px;
color: #6e7b84;

106
src/views/testscore/TestScore.vue Normal file
View File

@@ -0,0 +1,106 @@
<template>
<div class="surveydetail">
<!-- 标题 -->
<div class="title">考试模式</div>
<!-- 标题 -->
<!-- 详细内容 -->
<div class="bascinfo">
<!-- 中间盒子 -->
<div class="centercontent clearfix">
<div class="gaptest">阶段性考试</div>
<div class="scorebox clearfix">
<div class="yourscore">您本次考试分数：</div>
<div class="score">84</div>
<div class="fen">分</div>
</div>
</div>
</div>
<!-- 详细内容 -->
</div>
</template>
<script>
export default {
name: "TestScore",
};
</script>
<style scoped lang="scss">
.surveydetail {
.title {
font-size: 20px;
font-weight: 800;
color: #ffffff;
line-height: 24px;
margin-top: 17px;
margin-left: 0px;
}
.bascinfo {
min-height: 800px;
width: 100%;
background: #ffffff;
border-radius: 8px;
margin-top: 24px;
display: flex;
// flex-direction: column;
align-items: center;
justify-content: center;
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.centercontent {
width: 842px;
height: 228px;
background: #f2f5f7;
border-radius: 8px;
position: relative;
.gaptest {
// margin-left: 362px;
font-size: 24px;
font-family: PingFang SC;
font-weight: 800;
color: #56a3f9;
position: absolute;
left: 50%;
top: 38px;
transform: translate(-50%, 0);
}
.scorebox {
width: 803px;
height: 111px;
background: #ffffff;
border-radius: 0px 8px 0px 8px;
margin-top: 94px;
margin-left: 20px;
display: flex;
.yourscore {
margin-top: 44px;
margin-left: 277px;
font-size: 18px;
font-family: PingFang SC;
font-weight: 800;
color: #56a3f9;
}
.score {
font-size: 48px;
font-family: PingFang SC;
font-weight: 800;
color: #ee423d;
margin-left: 20px;
margin-top: 26px;
}
.fen {
font-size: 18px;
font-weight: 600;
color: #ef4f4a;
margin-left: 20px;
margin-top: 54px;
}
}
}
}
}
</style>