mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-06 09:26:46 +08:00
Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/stu_h5
This commit is contained in:
岳佳鑫
@@ -53,6 +53,7 @@ export default defineComponent({
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: rgba(242, 245, 247, 1);
|
||||
|
||||
6
src/assets/image/index.js
Normal file
6
src/assets/image/index.js
Normal file
@@ -0,0 +1,6 @@
|
||||
const Images = {
|
||||
//选择按钮
|
||||
checkboxImg: require('./checkbox.png'),
|
||||
checkbox2Img: require('./checkbox2.png')
|
||||
}
|
||||
export default Images
|
||||
@@ -127,12 +127,12 @@ export default {
|
||||
margin-top: -17.5px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
.mani {
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
|
||||
@@ -202,6 +202,7 @@ export default {
|
||||
}
|
||||
.discussdetail {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
.main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@@ -172,6 +172,7 @@ export default {
|
||||
}
|
||||
.discusspage {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
.main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@@ -1,96 +1,89 @@
|
||||
<template>
|
||||
<div class="examination">
|
||||
<TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
|
||||
<div class="notice">
|
||||
<div class="noticebox">
|
||||
<div class="main">
|
||||
<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="areaone">
|
||||
<div class="texttime">
|
||||
考试时间：30分钟
|
||||
</div>
|
||||
<div class="passline">
|
||||
及格线：60
|
||||
</div>
|
||||
</div>
|
||||
<div class="areatwo">
|
||||
<div class="time">
|
||||
<span>考试时间：</span>
|
||||
<br/>
|
||||
<span>2022-7-20 00:00 至 2022-8-29 23:59:59</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<button class="textbtn">
|
||||
开始考试
|
||||
</button>
|
||||
</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">
|
||||
<table>
|
||||
<tr class="trbox1">
|
||||
<th>提交时间</th>
|
||||
<th>成绩</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr >
|
||||
<tr class="trbox2">
|
||||
<td>
|
||||
2022-7-20
|
||||
<br/>
|
||||
00:00
|
||||
</td>
|
||||
<td>10分</td>
|
||||
<td>已完成</td>
|
||||
<td><span>查看考卷</span> </td>
|
||||
</tr>
|
||||
<tr class="trbox3">
|
||||
<td>
|
||||
2022-7-20
|
||||
<br/>
|
||||
00:00
|
||||
</td>
|
||||
<td>10分</td>
|
||||
<td>已完成</td>
|
||||
<td><span>查看考卷</span></td>
|
||||
</tr>
|
||||
<tr class="trbox4">
|
||||
<td>
|
||||
2022-7-20
|
||||
<br/>
|
||||
00:00
|
||||
</td>
|
||||
<td>10分</td>
|
||||
<td>已完成</td>
|
||||
<td><span>查看考卷</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="examination">
|
||||
<TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
|
||||
<div class="notice">
|
||||
<div class="noticebox">
|
||||
<div class="main">
|
||||
<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="areaone">
|
||||
<div class="texttime">考试时间：30分钟</div>
|
||||
<div class="passline">及格线：60</div>
|
||||
</div>
|
||||
<div class="areatwo">
|
||||
<div class="time">
|
||||
<span>考试时间：</span>
|
||||
<br />
|
||||
<span>2022-7-20 00:00 至 2022-8-29 23:59:59</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<button class="textbtn">开始考试</button>
|
||||
</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">
|
||||
<table>
|
||||
<tr class="trbox1">
|
||||
<th>提交时间</th>
|
||||
<th>成绩</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr class="trbox2">
|
||||
<td>
|
||||
2022-7-20
|
||||
<br />
|
||||
00:00
|
||||
</td>
|
||||
<td>10分</td>
|
||||
<td>已完成</td>
|
||||
<td><span>查看考卷</span></td>
|
||||
</tr>
|
||||
<tr class="trbox3">
|
||||
<td>
|
||||
2022-7-20
|
||||
<br />
|
||||
00:00
|
||||
</td>
|
||||
<td>10分</td>
|
||||
<td>已完成</td>
|
||||
<td><span>查看考卷</span></td>
|
||||
</tr>
|
||||
<tr class="trbox4">
|
||||
<td>
|
||||
2022-7-20
|
||||
<br />
|
||||
00:00
|
||||
</td>
|
||||
<td>10分</td>
|
||||
<td>已完成</td>
|
||||
<td><span>查看考卷</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -101,180 +94,180 @@ export default {
|
||||
components: {
|
||||
TitleHead,
|
||||
},
|
||||
setup() {
|
||||
},
|
||||
setup() {},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.examination{
|
||||
.examination {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.notice {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -17.5px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.main {
|
||||
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/pre.png);
|
||||
}
|
||||
.next {
|
||||
margin-left: 5px;
|
||||
// background-size: 100%;
|
||||
background-image: url(../../assets/image/next.png);
|
||||
}
|
||||
}
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
.img {
|
||||
margin-top: 1.5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(../../assets/image/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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentone {
|
||||
width: 100%;
|
||||
background: #f2f5f7;
|
||||
border-radius: 2px;
|
||||
margin-top: 20.5px;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.areaone {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
color: #56a3f9;
|
||||
.texttime {
|
||||
margin-left: 22.5px;
|
||||
}
|
||||
.passline {
|
||||
margin-left: 42px;
|
||||
}
|
||||
}
|
||||
.areatwo {
|
||||
// width: 290.5px;
|
||||
// height: 50.5px;
|
||||
margin: 0 5.5px 6.5px 5.5px;
|
||||
background: #ffffff;
|
||||
border-radius: 0px 4px 0px 4px;
|
||||
font-size: 13px;
|
||||
|
||||
.notice {
|
||||
.time {
|
||||
margin: 9px 16px 9.5px 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnbox {
|
||||
width: 83px;
|
||||
height: 33px;
|
||||
background-color: #2478ff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||
font-size: 13.5px;
|
||||
margin: 20px 109.5px 21.5px 109.5px;
|
||||
text-align: center;
|
||||
line-height: 33px;
|
||||
.textbtn {
|
||||
border: none;
|
||||
background-color: #2478ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.contenttwo {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -17.5px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
background: #fff;
|
||||
flex-direction: column;
|
||||
font-size: 12px;
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
// border-collapse:separate;
|
||||
// border-spacing:0px 15.5px;
|
||||
text-align: center;
|
||||
margin: 21px auto 48px auto;
|
||||
.trbox1 {
|
||||
width: 302px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.main {
|
||||
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/pre.png);
|
||||
}
|
||||
.next {
|
||||
margin-left: 5px;
|
||||
// background-size: 100%;
|
||||
background-image: url(../../assets/image/next.png);
|
||||
}
|
||||
}
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
.img {
|
||||
margin-top: 1.5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(../../assets/image/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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentone{
|
||||
width: 100%;
|
||||
background: #F2F5F7;
|
||||
border-radius: 2px;
|
||||
margin-top: 20.5px;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.areaone{
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
color: #56A3F9;
|
||||
.texttime{
|
||||
margin-left: 22.5px ;
|
||||
}
|
||||
.passline{
|
||||
margin-left: 42px;
|
||||
}
|
||||
}
|
||||
.areatwo{
|
||||
// width: 290.5px;
|
||||
// height: 50.5px;
|
||||
margin: 0 5.5px 6.5px 5.5px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0px 4px 0px 4px;
|
||||
font-size: 13px;
|
||||
|
||||
.time{
|
||||
margin: 9px 16px 9.5px 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnbox{
|
||||
width: 83px;
|
||||
height: 33px;
|
||||
background-color: #2478FF;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56,125,247,0.7);
|
||||
font-size: 13.5px;
|
||||
margin: 20px 109.5px 21.5px 109.5px;
|
||||
text-align: center;
|
||||
line-height: 33px;
|
||||
.textbtn{
|
||||
border: none;
|
||||
background-color: #2478FF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.contenttwo{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 12px;
|
||||
table{
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
// border-collapse:separate;
|
||||
// border-spacing:0px 15.5px;
|
||||
text-align: center;
|
||||
margin: 21px auto 48px auto;
|
||||
.trbox1{
|
||||
width: 302px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
background-color: #F2F5F7;
|
||||
th{
|
||||
font-size: 12px;
|
||||
color: #333330;
|
||||
}
|
||||
}
|
||||
td{
|
||||
padding: 14.5px;
|
||||
}
|
||||
.trbox2,
|
||||
.trbox3,
|
||||
.trbox4{
|
||||
border-bottom: 0.5px solid #D7E5FD ;
|
||||
}
|
||||
span{
|
||||
color: #2478FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
background-color: #f2f5f7;
|
||||
th {
|
||||
font-size: 12px;
|
||||
color: #333330;
|
||||
}
|
||||
}
|
||||
td {
|
||||
padding: 14.5px;
|
||||
}
|
||||
.trbox2,
|
||||
.trbox3,
|
||||
.trbox4 {
|
||||
border-bottom: 0.5px solid #d7e5fd;
|
||||
}
|
||||
span {
|
||||
color: #2478ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,28 +1,26 @@
|
||||
<template>
|
||||
<div class="examinationscore">
|
||||
<TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
|
||||
<div class="notice">
|
||||
<div class="noticebox">
|
||||
<div class="main">
|
||||
<div class="mainbody">
|
||||
<div class="scoretitle">
|
||||
阶段性考试
|
||||
</div>
|
||||
<div class="scorebox">
|
||||
<div class="scoredetail">
|
||||
您本次考试分数：
|
||||
<div class="score">84</div>
|
||||
<div class="grade">分</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<div class="closebtn">关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="examinationscore">
|
||||
<TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
|
||||
<div class="notice">
|
||||
<div class="noticebox">
|
||||
<div class="main">
|
||||
<div class="mainbody">
|
||||
<div class="scoretitle">阶段性考试</div>
|
||||
<div class="scorebox">
|
||||
<div class="scoredetail">
|
||||
您本次考试分数：
|
||||
<div class="score">84</div>
|
||||
<div class="grade">分</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<div class="closebtn">关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -33,84 +31,84 @@ export default {
|
||||
components: {
|
||||
TitleHead,
|
||||
},
|
||||
setup() {
|
||||
},
|
||||
setup() {},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.examinationscore{
|
||||
width: 100%;
|
||||
}
|
||||
.examinationscore {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.notice {
|
||||
.notice {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -17.5px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.main {
|
||||
width: 90%;
|
||||
border-radius: 2px;
|
||||
// background-color: #FFFFFF;
|
||||
.mainbody {
|
||||
width: 100%;
|
||||
margin-top: 133.5px;
|
||||
background-color: #f2f5f7;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -17.5px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.main {
|
||||
width: 90%;
|
||||
border-radius: 2px;
|
||||
// background-color: #FFFFFF;
|
||||
.mainbody{
|
||||
width: 100%;
|
||||
margin-top: 133.5px;
|
||||
background-color: #F2F5F7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.scoretitle{
|
||||
margin: 18px auto 15px auto;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #56A3F9;
|
||||
}
|
||||
.scorebox{
|
||||
width: 290.5px;
|
||||
height: 55.5px;
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 6.5px;
|
||||
.scoredetail{
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
margin: 21.5px auto 29.5px 72.5px;
|
||||
.score{
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #EE423D;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.grade{
|
||||
font-size: 13px;
|
||||
color: #EE423D;
|
||||
margin-bottom: 21.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnbox{
|
||||
width: 83px;
|
||||
height: 33px;
|
||||
background-color: #2478FF;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56,125,247,0.7);
|
||||
font-size: 14px;
|
||||
margin: 18px auto 218.5px auto;
|
||||
text-align: center;
|
||||
line-height: 33px;
|
||||
.closebtn{
|
||||
border: none;
|
||||
background-color: #2478FF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.scoretitle {
|
||||
margin: 18px auto 15px auto;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #56a3f9;
|
||||
}
|
||||
.scorebox {
|
||||
width: 290.5px;
|
||||
height: 55.5px;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 6.5px;
|
||||
.scoredetail {
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
margin: 21.5px auto 29.5px 72.5px;
|
||||
.score {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #ee423d;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.grade {
|
||||
font-size: 13px;
|
||||
color: #ee423d;
|
||||
margin-bottom: 21.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnbox {
|
||||
width: 83px;
|
||||
height: 33px;
|
||||
background-color: #2478ff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||
font-size: 14px;
|
||||
margin: 18px auto 218.5px auto;
|
||||
text-align: center;
|
||||
line-height: 33px;
|
||||
.closebtn {
|
||||
border: none;
|
||||
background-color: #2478ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,37 +1,47 @@
|
||||
<template>
|
||||
<div class="readyexamination">
|
||||
<TitleHead text="考试模式"></TitleHead>
|
||||
<div class="notice">
|
||||
<div class="noticebox">
|
||||
<div class="main">
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="time">剩余时间</div>
|
||||
<div class="box">29分钟53秒</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="questiontype clearfix">
|
||||
<div class="type">
|
||||
判断题
|
||||
</div>
|
||||
</div>
|
||||
<div class="readyexamination">
|
||||
<TitleHead text="考试模式"></TitleHead>
|
||||
<div class="notice">
|
||||
<div class="noticebox">
|
||||
<div class="main">
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="time">剩余时间</div>
|
||||
<div class="box">29分钟53秒</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="questiontype clearfix">
|
||||
<div class="type">判断题</div>
|
||||
</div>
|
||||
|
||||
<!-- 循环遍历生成判断题的问题和选项 -->
|
||||
<!-- <div class="questions"
|
||||
v-for="(q,index) in j_questions"
|
||||
:key="index">
|
||||
<div class="questiontitle" >
|
||||
{{q.text}}
|
||||
</div>
|
||||
<div class="btnswitch" v-for="(j,index) in j_options"
|
||||
:key="index">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">{{j.text}}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 循环遍历生成判断题的问题和选项 -->
|
||||
<div class="questions" v-for="(q, index) in questions" :key="index">
|
||||
<div class="questiontitle">
|
||||
{{ q.text }}
|
||||
</div>
|
||||
<div
|
||||
class="btnswitch"
|
||||
v-for="(j, index) in q.options"
|
||||
:key="index"
|
||||
@click="selectBtn(j)"
|
||||
>
|
||||
<div
|
||||
class="checkoutbtn"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' +
|
||||
(j.selected === true
|
||||
? Images.checkboxImg
|
||||
: Images.checkbox2Img) +
|
||||
')',
|
||||
}"
|
||||
></div>
|
||||
<div class="select">{{ j.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="questions">
|
||||
<!-- <div class="questions">
|
||||
<div class="questiontitle">
|
||||
1、控制计划是由工艺部门完成 （4分）
|
||||
</div>
|
||||
@@ -69,39 +79,39 @@
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">错误</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="questiontype clearfix">
|
||||
<div class="type">
|
||||
选择题
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 循环遍历生成选择题的问题和选项 -->
|
||||
<!-- <div class="questions"
|
||||
v-for="(q,index) in s_questions"
|
||||
:key="index">
|
||||
<div class="questiontitle">
|
||||
{{q.text}}
|
||||
</div>
|
||||
<div class="btnswitch" v-for="(s,index) in s_options"
|
||||
:key="index"
|
||||
@click="selectBtn(value)"
|
||||
>
|
||||
<div class="checkoutbtn"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
value.selected === true
|
||||
? 'url( ../../assets/image/checkbox.png )'
|
||||
: 'url( ../../assets/image/checkbox2.png )'
|
||||
}"
|
||||
></div>
|
||||
<div class="select">{{s.text}}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="questions">
|
||||
|
||||
<div class="questiontype clearfix">
|
||||
<div class="type">选择题</div>
|
||||
</div>
|
||||
|
||||
<!-- 循环遍历生成选择题的问题和选项 -->
|
||||
<div class="questions" v-for="(q, index) in s_questions" :key="index">
|
||||
<div class="questiontitle">
|
||||
{{ q.text }}
|
||||
</div>
|
||||
<div
|
||||
class="btnswitch"
|
||||
v-for="(s, index) in s_options"
|
||||
:key="index"
|
||||
@click="selectBtn2(s)"
|
||||
>
|
||||
<div
|
||||
class="checkoutbtn"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' +
|
||||
(s.selected === true
|
||||
? Images.checkboxImg
|
||||
: Images.checkbox2Img) +
|
||||
')',
|
||||
}"
|
||||
></div>
|
||||
<div class="select">{{ s.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="questions">
|
||||
<div class="questiontitle">
|
||||
4、.FMEA 是一种（ ）工具（4分）
|
||||
</div>
|
||||
@@ -121,208 +131,332 @@
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">风险分析</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="btnbox">
|
||||
<div class="submitbtn">
|
||||
提交试卷
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="questiontype clearfix">
|
||||
<div class="type">选择题</div>
|
||||
</div>
|
||||
<!-- 循环遍历生成选择题的问题和选项 -->
|
||||
<div class="questions" v-for="(q, index) in s_questions" :key="index">
|
||||
<div class="questiontitle">
|
||||
{{ q.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
class="btnswitch"
|
||||
v-for="(s, index) in s_options"
|
||||
:key="index"
|
||||
@click="selectBtn(s)"
|
||||
>
|
||||
<!-- <img
|
||||
:src="
|
||||
s.selected === true
|
||||
? require('../../assets/image/checkbox.png')
|
||||
: require('../../assets/image/checkbox2.png')
|
||||
"
|
||||
style="width: 13.6px; height: 13.6px"
|
||||
/> -->
|
||||
<div
|
||||
class="checkoutbtn"
|
||||
:style="{
|
||||
'background-image':
|
||||
s.selected === true
|
||||
? 'url(' + select + ')'
|
||||
: 'url(' + noselect + ')',
|
||||
}"
|
||||
style="background-size: 100%"
|
||||
></div>
|
||||
<div class="select">{{ s.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="questions">
|
||||
<div class="questiontitle">4、.FMEA 是一种（ ）工具（4分）</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">问题解决</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">项目策划</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">过程分析</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">风险分析</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="btnbox">
|
||||
<div class="submitbtn">提交试卷</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { reactive,toRefs } from "vue";
|
||||
import { reactive, toRefs } from "vue";
|
||||
import Images from "../../assets/image/index";
|
||||
import TitleHead from "@/components/TitleHead.vue";
|
||||
export default {
|
||||
name: "ReadyExamination",
|
||||
components: {
|
||||
TitleHead,
|
||||
},
|
||||
// setup() {
|
||||
// const state = reactive({
|
||||
// j_questions: [
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 1,
|
||||
// text: "1、控制计划是由工艺部门完成 （4分）",
|
||||
// },
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 2,
|
||||
// text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
||||
// },
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 3,
|
||||
// text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
|
||||
// },
|
||||
// ],
|
||||
// s_questions: [
|
||||
// {
|
||||
// type: "choice",
|
||||
// id: 1,
|
||||
// text: "4、.FMEA 是一种（ ）工具（4分）",
|
||||
// },
|
||||
// ],
|
||||
// j_options: [
|
||||
// {
|
||||
// id: 1,
|
||||
// text: "正确",
|
||||
// selected: false,
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// text: "错误",
|
||||
// selected: false,
|
||||
// },
|
||||
// ],
|
||||
// s_options: [
|
||||
// {
|
||||
// id: 1,
|
||||
// text: "问题解决",
|
||||
// selected: false,
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// text: "项目策划",
|
||||
// selected: false,
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// text: "过程分析",
|
||||
// selected: false,
|
||||
// },
|
||||
// {
|
||||
// id: 4,
|
||||
// text: "风险分析",
|
||||
// selected: false,
|
||||
// },
|
||||
// ]
|
||||
// });
|
||||
// const selectBtn = (value) => {
|
||||
// let arr = state.s_options;
|
||||
// arr.map((i) => {
|
||||
// if (i.id === value.id) {
|
||||
// i.selected = !i.selected;
|
||||
// }
|
||||
// });
|
||||
// state.s_options = arr;
|
||||
// };
|
||||
// return {
|
||||
// ...toRefs(state),
|
||||
// selectBtn,
|
||||
// };
|
||||
// }
|
||||
name: "ReadyExamination",
|
||||
components: {
|
||||
TitleHead,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
questions: [
|
||||
{
|
||||
id: 1,
|
||||
text: "1、控制计划是由工艺部门完成 （4分）",
|
||||
options: [
|
||||
{
|
||||
text: "正确",
|
||||
select: "flase",
|
||||
},
|
||||
{
|
||||
text: "错误",
|
||||
select: "flase",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
||||
options: [
|
||||
{
|
||||
text: "正确",
|
||||
select: "flase",
|
||||
},
|
||||
{
|
||||
text: "错误",
|
||||
select: "flase",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "3、控制计划是由工艺部门完成 （4分）",
|
||||
options: [
|
||||
{
|
||||
text: "正确",
|
||||
select: "flase",
|
||||
},
|
||||
{
|
||||
text: "错误",
|
||||
select: "flase",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: "4、.PFMEA假定所设计的产品能满足设计要求",
|
||||
options: [
|
||||
{
|
||||
text: "正确",
|
||||
select: "flase",
|
||||
},
|
||||
{
|
||||
text: "错误",
|
||||
select: "flase",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
// j_questions: [
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 1,
|
||||
// text: "1、控制计划是由工艺部门完成 （4分）",
|
||||
// },
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 2,
|
||||
// text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
||||
// },
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 3,
|
||||
// text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
|
||||
// },
|
||||
// ],
|
||||
s_questions: [
|
||||
{
|
||||
type: "choice",
|
||||
id: 1,
|
||||
text: "4、.FMEA 是一种（ ）工具（4分）",
|
||||
},
|
||||
],
|
||||
// j_options: [
|
||||
// {
|
||||
// id: 1,
|
||||
// text: "正确",
|
||||
// selected: false,
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// text: "错误",
|
||||
// selected: false,
|
||||
// },
|
||||
// ],
|
||||
s_options: [
|
||||
{
|
||||
id: 1,
|
||||
text: "问题解决",
|
||||
selected: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "项目策划",
|
||||
selected: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "过程分析",
|
||||
selected: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: "风险分析",
|
||||
selected: false,
|
||||
},
|
||||
],
|
||||
});
|
||||
const selectBtn = (value) => {
|
||||
// let arr = state.questions;
|
||||
const arry = [];
|
||||
state.questions.map((item) => {
|
||||
arry.push(item.options);
|
||||
});
|
||||
console.log(arry);
|
||||
console.log(value);
|
||||
// arry.map((i) => {
|
||||
// if (i.id === value.id) {
|
||||
// i.selected = !i.selected;
|
||||
// }
|
||||
// });
|
||||
// state.questions = arry;
|
||||
};
|
||||
const selectBtn2 = (value) => {
|
||||
let arr = state.s_options;
|
||||
arr.map((i) => {
|
||||
if (i.id === value.id) {
|
||||
i.selected = !i.selected;
|
||||
}
|
||||
});
|
||||
state.s_options = arr;
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
selectBtn,
|
||||
selectBtn2,
|
||||
Images,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.readyexamination{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.notice {
|
||||
width: 100%;
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.readyexamination {
|
||||
width: 100%;
|
||||
}
|
||||
.notice {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -17.5px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.main {
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #333330;
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -17.5px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.main {
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #333330;
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
margin-bottom: 21.5px;
|
||||
.img {
|
||||
width: 16px;
|
||||
height: 18.5px;
|
||||
background-image: url(../../assets/image/readyexamination/sandclock.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.rightmain {
|
||||
display: flex;
|
||||
margin-left: 4.5px;
|
||||
font-size: 14px;
|
||||
.time {
|
||||
color:#56A3F9;
|
||||
}
|
||||
.box {
|
||||
margin-left: 9.5px;
|
||||
color: #EE423D;
|
||||
}
|
||||
}
|
||||
}
|
||||
.questiontype{
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #F9F9F9;
|
||||
line-height: 35px;
|
||||
.type{
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
.questions{
|
||||
width: 100%;
|
||||
margin-left: 9.5px;
|
||||
.questiontitle{
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.btnswitch{
|
||||
display: flex;
|
||||
height: 13.6px;
|
||||
line-height: 13.6px;
|
||||
// align-items: center;
|
||||
margin-bottom: 15px;
|
||||
.checkoutbtn {
|
||||
width: 13.6px;
|
||||
height: 13.6px;
|
||||
background-image: url(../../assets/image/checkbox2.png);
|
||||
background-size: 100% 100%;
|
||||
margin-right: 6.5px;
|
||||
}
|
||||
.select{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.btnbox{
|
||||
width: 83px;
|
||||
height: 33px;
|
||||
background-color: #2478FF;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56,125,247,0.7);
|
||||
font-size: 14px;
|
||||
margin: 18px auto 24px auto;
|
||||
text-align: center;
|
||||
line-height: 33px;
|
||||
.submitbtn{
|
||||
border: none;
|
||||
background-color: #2478FF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-bottom: 21.5px;
|
||||
.img {
|
||||
width: 16px;
|
||||
height: 18.5px;
|
||||
background-image: url(../../assets/image/readyexamination/sandclock.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.rightmain {
|
||||
display: flex;
|
||||
margin-left: 4.5px;
|
||||
font-size: 14px;
|
||||
.time {
|
||||
color: #56a3f9;
|
||||
}
|
||||
.box {
|
||||
margin-left: 9.5px;
|
||||
color: #ee423d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.questiontype {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f9f9f9;
|
||||
line-height: 35px;
|
||||
.type {
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
.questions {
|
||||
width: 100%;
|
||||
margin-left: 9.5px;
|
||||
.questiontitle {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.btnswitch {
|
||||
display: flex;
|
||||
height: 13.6px;
|
||||
line-height: 13.6px;
|
||||
// align-items: center;
|
||||
margin-bottom: 15px;
|
||||
.checkoutbtn {
|
||||
width: 13.6px;
|
||||
height: 13.6px;
|
||||
// background-image: url(../../assets/image/checkbox2.png);
|
||||
background-size: 100% 100%;
|
||||
margin-right: 6.5px;
|
||||
}
|
||||
.select {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnbox {
|
||||
width: 83px;
|
||||
height: 33px;
|
||||
background-color: #2478ff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||
font-size: 14px;
|
||||
margin: 18px auto 24px auto;
|
||||
text-align: center;
|
||||
line-height: 33px;
|
||||
.submitbtn {
|
||||
border: none;
|
||||
background-color: #2478ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,6 +27,127 @@
|
||||
<div class="titlebtn">评估</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teacher">
|
||||
<div style="width: 90%">
|
||||
<div class="teachertitle">
|
||||
<img
|
||||
style="width: 17px; height: 17px"
|
||||
src="../../assets/image/faceteach/livelecturer.png"
|
||||
/>
|
||||
<div class="talk">直播讲师</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="teachermain">
|
||||
<img class="teacherAvatar" src="../../assets/image/img.jpg" />
|
||||
<div style="flex: 1; margin-left: 11px; margin-right: 13px">
|
||||
<div class="teacherName">王星天（显示事业）</div>
|
||||
<div class="teacherIntro">
|
||||
教师是学生的镜子,学生是 老师的影子。
|
||||
</div>
|
||||
</div>
|
||||
<div class="teacherFollow">+ 关注</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div style="width: 90%">
|
||||
<div class="teachertitle">
|
||||
<img
|
||||
style="width: 17px; height: 17px"
|
||||
src="../../assets/image/faceteach/livelecturer.png"
|
||||
/>
|
||||
<div class="talk">课程详情</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="detailMain">
|
||||
通过对各级人员的软件平台培训，使其能够了解如何
|
||||
运用乾元坤和智能信息管理系统来提升企业管理水平
|
||||
最大限度发挥软件产品在企业中的作用。<br />
|
||||
1.使企业不同部门人员掌握便捷、有效的系统平台操 作方法;<br />
|
||||
2.通过系统平台的培训提高员工对企业的管理理念认 识与提升。<br />
|
||||
3.通过系统平台培训加强沟通，统一部署，协同工作 提高效率。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course">
|
||||
<div style="width: 100%">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="课程附件" name="first">
|
||||
<div
|
||||
v-for="(el, index) in enclosure"
|
||||
:key="el.id"
|
||||
class="enclosure"
|
||||
:style="{
|
||||
'border-bottom':
|
||||
index === enclosure.length - 1
|
||||
? null
|
||||
: '1px solid rgba(56, 125, 247, 0.2)',
|
||||
}"
|
||||
>
|
||||
<div class="enclosureL">
|
||||
<img style="width: 19.5px; height: 22px" :src="el.img" />
|
||||
<div style="margin-left: 15px">{{ el.name }}</div>
|
||||
</div>
|
||||
<div class="download">
|
||||
<img
|
||||
style="width: 13px; height: 12px"
|
||||
src="../../assets/image/faceteach/download.png"
|
||||
/>
|
||||
<div style="margin-left: 2.5px">下载</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="课程作业" name="second">
|
||||
<div class="work">
|
||||
<div class="question">社交产品如何做好模块化处理？</div>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div
|
||||
style="
|
||||
margin-top: 16px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
"
|
||||
>
|
||||
<div class="tag1" style="margin: 0px 10px 10px 0px">
|
||||
必修
|
||||
</div>
|
||||
<div class="tag3" style="margin: 0px 10px 10px 0px">
|
||||
作业
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit">提交</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="课程考试" name="third">
|
||||
<div class="work">
|
||||
<div class="question">
|
||||
模块化产品展示相关案例与展示：如何自由组合你的 思考？
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div
|
||||
style="
|
||||
margin-top: 16px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
"
|
||||
>
|
||||
<div class="tag1" style="margin: 0px 10px 10px 0px">
|
||||
必修
|
||||
</div>
|
||||
<div class="tag3" style="margin: 0px 10px 10px 0px">
|
||||
作业
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit">提交</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -110,10 +231,12 @@ export default {
|
||||
<style lang="scss">
|
||||
.faceteach {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
.main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: -14.5px;
|
||||
.title {
|
||||
width: 90%;
|
||||
@@ -150,6 +273,182 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.teachertitle {
|
||||
width: 90px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 21px;
|
||||
.talk {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
line-height: 12px;
|
||||
margin-left: 7.5px;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 62.5px;
|
||||
height: 10px;
|
||||
right: 6px;
|
||||
bottom: -4px;
|
||||
background: rgba(36, 120, 255, 0.15);
|
||||
}
|
||||
}
|
||||
.teacher {
|
||||
width: 90%;
|
||||
padding-bottom: 15px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
|
||||
.teachermain {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.teacherAvatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.teacherName {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #394145;
|
||||
line-height: 21px;
|
||||
}
|
||||
.teacherIntro {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #394145;
|
||||
line-height: 21px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.teacherFollow {
|
||||
width: 73px;
|
||||
height: 28px;
|
||||
background: #2478ff;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 12px;
|
||||
color: #fff;
|
||||
margin-top: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
width: 90%;
|
||||
padding-bottom: 25px;
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.detailMain {
|
||||
margin-top: 22px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #333330;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.course {
|
||||
width: 90%;
|
||||
// padding-bottom: 15px;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.el-tabs__nav {
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.el-tabs__item {
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 21px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: rgba(56, 125, 247, 0.2);
|
||||
}
|
||||
.el-tabs__header {
|
||||
margin: 0;
|
||||
}
|
||||
.enclosure {
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.enclosureL {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #677d86;
|
||||
line-height: 19px;
|
||||
}
|
||||
.download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #2478ff;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
.work {
|
||||
// margin-left: 51px;
|
||||
// margin-right: 40px;
|
||||
padding-bottom: 20px;
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-top: 17.5px;
|
||||
}
|
||||
.work .question {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #333330;
|
||||
line-height: 21.5px;
|
||||
}
|
||||
|
||||
.work .submit {
|
||||
width: 73px;
|
||||
height: 28px;
|
||||
margin-top: 16px;
|
||||
background: #2478ff;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||
border-radius: 2px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -215,7 +215,7 @@ export default {
|
||||
}
|
||||
.homeworkpage {
|
||||
width: 100%;
|
||||
|
||||
padding-bottom: 20px;
|
||||
.notice {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@@ -189,7 +189,7 @@ export default {
|
||||
}
|
||||
.Investigat {
|
||||
width: 100%;
|
||||
|
||||
padding-bottom: 20px;
|
||||
.notice {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@@ -141,6 +141,7 @@ export default {
|
||||
}
|
||||
.liveboradcast {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
.main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user