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

Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/stu_h5

Browse Source
This commit is contained in:
岳佳鑫
2022-09-28 14:21:50 +08:00
parent 898497ee4c 8097d89347
commit 3659a166a6
12 changed files with 1042 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@@ -53,6 +53,7 @@ export default defineComponent({
#container { #container {
display: flex; display: flex;
flex-direction: column;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
background-color: rgba(242, 245, 247, 1); background-color: rgba(242, 245, 247, 1);

6
src/assets/image/index.js Normal file
View File

@@ -0,0 +1,6 @@
const Images = {
//选择按钮
checkboxImg: require('./checkbox.png'),
checkbox2Img: require('./checkbox2.png')
}
export default Images

2
src/views/ballotpage/BallotPage.vue
View File

@@ -127,12 +127,12 @@ export default {
margin-top: -17.5px; margin-top: -17.5px;
.noticebox { .noticebox {
width: 90%; width: 90%;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 20px;
.mani { .mani {
width: 90%; width: 90%;
margin-top: 20px; margin-top: 20px;

1
src/views/discuss/DiscussDetail.vue
View File

@@ -202,6 +202,7 @@ export default {
} }
.discussdetail { .discussdetail {
width: 100%; width: 100%;
padding-bottom: 20px;
.main { .main {
width: 100%; width: 100%;
display: flex; display: flex;

1
src/views/discuss/DiscussPage.vue
View File

@@ -172,6 +172,7 @@ export default {
} }
.discusspage { .discusspage {
width: 100%; width: 100%;
padding-bottom: 20px;
.main { .main {
width: 100%; width: 100%;
display: flex; display: flex;

499
src/views/examination/Examination.vue
View File

@@ -1,96 +1,89 @@
<template> <template>
<div class="examination"> <div class="examination">
<TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead> <TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
<div class="notice"> <div class="notice">
<div class="noticebox"> <div class="noticebox">
<div class="main"> <div class="main">
<div class="dir"> <div class="dir">
<div class="samegt pre"></div> <div class="samegt pre"></div>
<div class="sameg">上一个</div> <div class="sameg">上一个</div>
<div class="sameg" style="margin-left: 15.5px">下一个</div> <div class="sameg" style="margin-left: 15.5px">下一个</div>
<div class="samegt next"></div> <div class="samegt next"></div>
</div> </div>
<div class="lefttitle"> <div class="lefttitle">
<div class="img"></div> <div class="img"></div>
<div class="rightmain"> <div class="rightmain">
<div class="talk">考试测试</div> <div class="talk">考试测试</div>
<div class="box"></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>
<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> </div>
</div>
</template> </template>
<script> <script>
@@ -101,180 +94,180 @@ export default {
components: { components: {
TitleHead, TitleHead,
}, },
setup() { setup() {},
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
content: " "; content: " ";
display: table; display: table;
clear: both; 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%; 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%; width: 100%;
display: flex; display: flex;
justify-content: center; flex-direction: column;
margin-top: -17.5px; font-size: 12px;
.noticebox { table {
width: 90%; width: 100%;
background: #fff; 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; border-radius: 4px;
position: relative; background-color: #f2f5f7;
display: flex; th {
justify-content: center; font-size: 12px;
.main { color: #333330;
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;
}
}
}
} }
}
td {
padding: 14.5px;
}
.trbox2,
.trbox3,
.trbox4 {
border-bottom: 0.5px solid #d7e5fd;
}
span {
color: #2478ff;
}
} }
}
} }
}
}
</style> </style>

184
src/views/examination/ExaminationScore.vue
View File

@@ -1,28 +1,26 @@
<template> <template>
<div class="examinationscore"> <div class="examinationscore">
<TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead> <TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
<div class="notice"> <div class="notice">
<div class="noticebox"> <div class="noticebox">
<div class="main"> <div class="main">
<div class="mainbody"> <div class="mainbody">
<div class="scoretitle"> <div class="scoretitle">阶段性考试</div>
阶段性考试 <div class="scorebox">
</div> <div class="scoredetail">
<div class="scorebox"> 您本次考试分数：
<div class="scoredetail"> <div class="score">84</div>
您本次考试分数： <div class="grade">分</div>
<div class="score">84</div> </div>
<div class="grade">分</div>
</div>
</div>
</div>
<div class="btnbox">
<div class="closebtn">关闭</div>
</div>
</div>
</div> </div>
</div>
<div class="btnbox">
<div class="closebtn">关闭</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -33,84 +31,84 @@ export default {
components: { components: {
TitleHead, TitleHead,
}, },
setup() { setup() {},
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.examinationscore{ .examinationscore {
width: 100%; 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%; width: 100%;
margin-top: 133.5px;
background-color: #f2f5f7;
display: flex; display: flex;
justify-content: center; flex-direction: column;
margin-top: -17.5px; align-items: center;
.noticebox { .scoretitle {
width: 90%; margin: 18px auto 15px auto;
background: #FFFFFF; font-size: 15px;
border-radius: 4px; font-weight: 600;
position: relative; color: #56a3f9;
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;
}
}
}
} }
.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>

642
src/views/examination/ReadyExamination.vue
View File

@@ -1,37 +1,47 @@
<template> <template>
<div class="readyexamination"> <div class="readyexamination">
<TitleHead text="考试模式"></TitleHead> <TitleHead text="考试模式"></TitleHead>
<div class="notice"> <div class="notice">
<div class="noticebox"> <div class="noticebox">
<div class="main"> <div class="main">
<div class="lefttitle"> <div class="lefttitle">
<div class="img"></div> <div class="img"></div>
<div class="rightmain"> <div class="rightmain">
<div class="time">剩余时间</div> <div class="time">剩余时间</div>
<div class="box">29分钟53秒</div> <div class="box">29分钟53秒</div>
</div> </div>
</div> </div>
<div class="questiontype clearfix"> <div class="questiontype clearfix">
<div class="type"> <div class="type">判断题</div>
判断题 </div>
</div>
</div>
<!-- 循环遍历生成判断题的问题和选项 --> <!-- 循环遍历生成判断题的问题和选项 -->
<!-- <div class="questions" <div class="questions" v-for="(q, index) in questions" :key="index">
v-for="(q,index) in j_questions" <div class="questiontitle">
:key="index"> {{ q.text }}
<div class="questiontitle" > </div>
{{q.text}} <div
</div> class="btnswitch"
<div class="btnswitch" v-for="(j,index) in j_options" v-for="(j, index) in q.options"
:key="index"> :key="index"
<div class="checkoutbtn"></div> @click="selectBtn(j)"
<div class="select">{{j.text}}</div> >
</div> <div
</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"> <div class="questiontitle">
1、控制计划是由工艺部门完成 （4分） 1、控制计划是由工艺部门完成 （4分）
</div> </div>
@@ -69,39 +79,39 @@
<div class="checkoutbtn"></div> <div class="checkoutbtn"></div>
<div class="select">错误</div> <div class="select">错误</div>
</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> -->
<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"> <div class="questiontitle">
4、.FMEA 是一种（ ）工具（4分） 4、.FMEA 是一种（ ）工具（4分）
</div> </div>
@@ -121,208 +131,332 @@
<div class="checkoutbtn"></div> <div class="checkoutbtn"></div>
<div class="select">风险分析</div> <div class="select">风险分析</div>
</div> </div>
</div> </div> -->
<div class="btnbox"> <div class="questiontype clearfix">
<div class="submitbtn"> <div class="type">选择题</div>
提交试卷 </div>
</div> <!-- 循环遍历生成选择题的问题和选项 -->
</div> <div class="questions" v-for="(q, index) in s_questions" :key="index">
<div class="questiontitle">
</div> {{ q.text }}
</div> </div>
</div> <div
</div> class="btnswitch"
</template> 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> <script>
// import { reactive,toRefs } from "vue"; import { reactive, toRefs } from "vue";
import Images from "../../assets/image/index";
import TitleHead from "@/components/TitleHead.vue"; import TitleHead from "@/components/TitleHead.vue";
export default { export default {
name: "ReadyExamination", name: "ReadyExamination",
components: { components: {
TitleHead, TitleHead,
}, },
// setup() { setup() {
// const state = reactive({ const state = reactive({
// j_questions: [ questions: [
// { {
// type: "judge", id: 1,
// id: 1, text: "1、控制计划是由工艺部门完成 （4分）",
// text: "1、控制计划是由工艺部门完成 （4分）", options: [
// }, {
// { text: "正确",
// type: "judge", select: "flase",
// id: 2, },
// text: "2、.PFMEA假定所设计的产品能满足设计要求", {
// }, text: "错误",
// { select: "flase",
// type: "judge", },
// id: 3, ],
// text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）", },
// }, {
// ], id: 2,
// s_questions: [ text: "2、.PFMEA假定所设计的产品能满足设计要求",
// { options: [
// type: "choice", {
// id: 1, text: "正确",
// text: "4、.FMEA 是一种（ ）工具（4分）", select: "flase",
// }, },
// ], {
// j_options: [ text: "错误",
// { select: "flase",
// id: 1, },
// text: "正确", ],
// selected: false, },
// }, {
// { id: 3,
// id: 2, text: "3、控制计划是由工艺部门完成 （4分）",
// text: "错误", options: [
// selected: false, {
// }, text: "正确",
// ], select: "flase",
// s_options: [ },
// { {
// id: 1, text: "错误",
// text: "问题解决", select: "flase",
// selected: false, },
// }, ],
// { },
// id: 2, {
// text: "项目策划", id: 4,
// selected: false, text: "4、.PFMEA假定所设计的产品能满足设计要求",
// }, options: [
// { {
// id: 3, text: "正确",
// text: "过程分析", select: "flase",
// selected: false, },
// }, {
// { text: "错误",
// id: 4, select: "flase",
// text: "风险分析", },
// selected: false, ],
// }, },
// ] ],
// }); // j_questions: [
// const selectBtn = (value) => { // {
// let arr = state.s_options; // type: "judge",
// arr.map((i) => { // id: 1,
// if (i.id === value.id) { // text: "1、控制计划是由工艺部门完成 （4分）",
// i.selected = !i.selected; // },
// } // {
// }); // type: "judge",
// state.s_options = arr; // id: 2,
// }; // text: "2、.PFMEA假定所设计的产品能满足设计要求",
// return { // },
// ...toRefs(state), // {
// selectBtn, // 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
content: " "; content: " ";
display: table; display: table;
clear: both; clear: both;
} }
.readyexamination {
.readyexamination{ width: 100%;
width: 100%; }
} .notice {
width: 100%;
.notice { display: flex;
width: 100%; 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; display: flex;
justify-content: center; margin-bottom: 21.5px;
margin-top: -17.5px; .img {
.noticebox { width: 16px;
width: 90%; height: 18.5px;
background: #fff; background-image: url(../../assets/image/readyexamination/sandclock.png);
border-radius: 4px; background-size: 100% 100%;
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;
}
}
}
} }
.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>

301
src/views/faceteach/FaceTeach.vue
View File

@@ -27,6 +27,127 @@
<div class="titlebtn">评估</div> <div class="titlebtn">评估</div>
</div> </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>
</div> </div>
</template> </template>
@@ -110,10 +231,12 @@ export default {
<style lang="scss"> <style lang="scss">
.faceteach { .faceteach {
width: 100%; width: 100%;
padding-bottom: 20px;
.main { .main {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center;
margin-top: -14.5px; margin-top: -14.5px;
.title { .title {
width: 90%; 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> </style>

2
src/views/homeworkpage/HomeworkPage.vue
View File

@@ -215,7 +215,7 @@ export default {
} }
.homeworkpage { .homeworkpage {
width: 100%; width: 100%;
padding-bottom: 20px;
.notice { .notice {
width: 100%; width: 100%;
display: flex; display: flex;

2
src/views/investigat/InvestigatPage.vue
View File

@@ -189,7 +189,7 @@ export default {
} }
.Investigat { .Investigat {
width: 100%; width: 100%;
padding-bottom: 20px;
.notice { .notice {
width: 100%; width: 100%;
display: flex; display: flex;

1
src/views/liveboradcast/LiveBoradcast.vue
View File

@@ -141,6 +141,7 @@ export default {
} }
.liveboradcast { .liveboradcast {
width: 100%; width: 100%;
padding-bottom: 20px;
.main { .main {
width: 100%; width: 100%;
display: flex; display: flex;