hz/student-h5
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git synced 2025-12-06 17:36:45 +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-29 18:06:30 +08:00
parent 12af499546 667b513a06
commit 485c17cbc7
14 changed files with 498 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/filestorag/excel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 758 B

BIN
src/assets/image/filestorag/md.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 729 B

BIN
src/assets/image/filestorag/pdf.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 642 B

BIN
src/assets/image/filestorag/ppt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 671 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 615 B

BIN
src/assets/image/filestorag/word.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 650 B

BIN
src/assets/image/filestorag/zip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 551 B

9
src/assets/image/index.js
View File

@@ -1,6 +1,13 @@
const Images = {
//选择按钮
checkboxImg: require('./checkbox.png'),
checkbox2Img: require('./checkbox2.png')
checkbox2Img: require('./checkbox2.png'),
zipImg: require('./filestorag/zip.png'),
excelImg: require('./filestorag/excel.png'),
mdImg: require('./filestorag/md.png'),
pdfImg: require('./filestorag/pdf.png'),
pptImg: require('./filestorag/ppt.png'),
rarImg: require('./filestorag/rar.png'),
wordImg: require('./filestorag/word.png'),
}
export default Images

BIN
src/assets/image/readyexamination/smile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 722 B

BIN
src/assets/image/readyexamination/time.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 968 B

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

@@ -1,258 +1,185 @@
<template>
<div class="examination">
<TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
<!-- <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 class="e_title">管理者进阶腾飞班 - 第一次考试</div>
<div class="et_detail">
<div class="et_icon"></div>
<div class="et_time">2022-7-20 00:00 至 2022-8-29 23:59:59</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 class="et_box">
<div class="et_length">
<div class="et_name">考试时长：</div>
<div class="et_minute">30分钟</div>
<div class="et_lineicon"></div>
<div class="et_name">及格分数：</div>
<div class="et_score">60</div>
</div>
</div>
</div>
</div>
<div class="noticebox">
<div class="main">
<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">
<div class="e_form">
<table>
<tr class="trbox1">
<th>提交时间</th>
<th>成绩</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr class="trbox2">
<td>
2022-7-20
<br />
00:00
2022-7-20 00:00
</td>
<td>10分</td>
<td>已完成</td>
<td><span>查看考卷</span></td>
</tr>
<tr class="trbox3">
<td>
2022-7-20
<br />
00:00
2022-7-20 00:00
</td>
<td>10分</td>
<td>已完成</td>
<td><span>查看考卷</span></td>
</tr>
<tr class="trbox4">
<td>
2022-7-20
<br />
00:00
2022-7-20 00:00
</td>
<td>10分</td>
<td>已完成</td>
<td><span>查看考卷</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// import { reactive, toRefs } from "vue";
import TitleHead from "@/components/TitleHead.vue";
// import TitleHead from "@/components/TitleHead.vue";
export default {
name: "ExamiNation",
components: {
TitleHead,
},
// components: {
// TitleHead,
// },
setup() {},
};
</script>
<style lang="scss" scoped>
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
clear: both;
}
.examination {
width: 100%;
padding-bottom: 20px;
background-color: #F2F5F7;
}
.notice {
width: 100%;
display: flex;
justify-content: center;
margin-top: -17.5px;
margin-top: 10px;
font-size: 14px;
}
.noticebox {
width: 90%;
width: 100%;
background: #fff;
border-radius: 4px;
position: relative;
display: flex;
justify-content: center;
margin-bottom: 11.5px;
.main {
width: 90%;
margin-top: 20px;
.dir {
width: 100%;
height: 20px;
// background-color: red;
margin-bottom: 20px;
margin: 0 auto;
padding-top: 18.5px;
padding-bottom: 27.5px;
}
}
.e_title{
margin-bottom: 14.5px ;
font-weight: 600;
}
.et_detail{
display: flex;
justify-content: right;
font-size: 12px;
color: #2478ff;
.samegt {
margin-top: 3px;
height: 12px;
width: 12px;
margin-bottom: 11.5px;
align-items: center;
.et_icon{
width: 15px;
height: 15px;
background-image: url('../../assets/image/readyexamination/time.png');
background-size: 100% 100%;
margin-right: 6px;
}
.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);
.et_time{
color: #6E7B84;
}
}
.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;
.et_box{
margin-top: 16.5px;
background-color: #F2F5F7;
border-radius: 10px;
padding: 18px 0 17px 22px;
.et_length{
display: flex;
align-items: center;
.et_name{
margin-right: 5px;
color: #6E7B84;
}
.et_minute{
color: #2478FF;
margin-right: 56px;
}
.et_lineicon{
width: 17.5px;
height: 17.5px;
background-image: url(../../assets/image/readyexamination/smile.png);
margin-right: 8px;
}
.et_score{
color: #FF9E00;
}
}
}
}
.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;
width: 301.5px;
height: 33px;
background-color: #2478ff;
border-radius: 4px;
border-radius: 6px;
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
font-size: 13.5px;
margin: 20px 109.5px 21.5px 109.5px;
margin: 18.5px auto 43.5px 20px;
text-align: center;
line-height: 33px;
.textbtn {
width: 301.5px;
border: none;
background-color: #2478ff;
border-radius: 6px;
color: #ffffff;
}
}
.contenttwo {
.e_form {
width: 100%;
display: flex;
flex-direction: column;
font-size: 12px;
color: #333330;
table {
width: 100%;
border-collapse: collapse;
// border-collapse:separate;
// border-spacing:0px 15.5px;
text-align: center;
margin: 21px auto 48px auto;
margin-bottom: 6.5px ;
.trbox1 {
width: 302px;
width: 342.5px;
height: 40px;
border-radius: 4px;
background-color: #f2f5f7;
th {
font-size: 12px;
color: #333330;
}
}
td {
padding: 14.5px;
@@ -260,14 +187,8 @@ export default {
.trbox2,
.trbox3,
.trbox4 {
border-bottom: 0.5px solid #d7e5fd;
}
span {
color: #2478ff;
border-bottom: 0.5px solid #F1F2F3;
}
}
}
}
}
}
</style>

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

@@ -1,6 +1,6 @@
<template>
<div class="examinationscore">
<TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
<!-- <TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead> -->
<div class="notice">
<div class="noticebox">
<div class="main">
@@ -14,9 +14,9 @@
</div>
</div>
</div>
<div class="btnbox">
<!-- <div class="btnbox">
<div class="closebtn">关闭</div>
</div>
</div> -->
</div>
</div>
</div>
@@ -25,12 +25,12 @@
<script>
// import { reactive, toRefs } from "vue";
import TitleHead from "@/components/TitleHead.vue";
// import TitleHead from "@/components/TitleHead.vue";
export default {
name: "ExaminationScore",
components: {
TitleHead,
},
// components: {
// TitleHead,
// },
setup() {},
};
</script>
@@ -44,9 +44,9 @@ export default {
width: 100%;
display: flex;
justify-content: center;
margin-top: -17.5px;
margin-top: 20px;
.noticebox {
width: 90%;
width: 100%;
background: #ffffff;
border-radius: 4px;
position: relative;
@@ -55,59 +55,61 @@ export default {
.main {
width: 90%;
border-radius: 2px;
// background-color: #FFFFFF;
.mainbody {
width: 100%;
margin-top: 133.5px;
margin: 240px auto;
background-color: #f2f5f7;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
.scoretitle {
margin: 18px auto 15px auto;
margin: 17.5px auto 15.5px auto;
font-size: 15px;
font-weight: 600;
color: #56a3f9;
color: #04243C;
}
.scorebox {
width: 290.5px;
width: 320.5px;
height: 55.5px;
border-radius: 2px 6px 2px 6px;
background-color: #ffffff;
margin-bottom: 6.5px;
margin-bottom:11.5px;
.scoredetail {
display: flex;
font-size: 13px;
margin: 21.5px auto 29.5px 72.5px;
font-weight: 500;
margin: 21.5px auto auto 92.5px;
.score {
font-size: 24px;
font-weight: 600;
color: #ee423d;
margin-top: -8px;
color: #FF9E00;
margin-top: -7px;
}
.grade {
font-size: 13px;
color: #ee423d;
color: #FF9E00;
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;
}
}
// .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;
// }
// }
}
}
}

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

@@ -1,85 +1,81 @@
<template>
<div class="readyexamination">
<TitleHead text="考试模式"></TitleHead>
<!-- <TitleHead text="考试模式"></TitleHead> -->
<div class="notice">
<div class="noticebox">
<div class="main">
<div class="lefttitle">
<div class="re_title">管理者进阶腾飞班 - 第一次考试</div>
<!-- <div class="lefttitle">
<div class="img"></div>
<div class="rightmain">
<div class="time">剩余时间</div>
<div class="box">29分钟53秒</div>
</div>
</div>
</div> -->
<div class="questiontype clearfix">
<div class="type">判断题</div>
</div>
<!-- 循环遍历生成判断题的问题和选项 -->
<div class="questions" v-for="(q, index) in questions" :key="index">
<div class="questiontitle">
{{ q.text }}
<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="btnswitch" v-for="(o,index) in q.options"
:key="index"
@click="selectBtn(o)"
>
<div
class="checkoutbtn"
<div class="checkoutbtn"
:style="{
backgroundImage:
'url(' +
(j.selected === true
? Images.checkboxImg
: Images.checkbox2Img) +
')',
backgroundImage:
'url('+( o.select === true? Images.checkboxImg : Images.checkbox2Img )+')'
}"
></div>
<div class="select">{{ j.text }}</div>
></div>
<div class="select">{{o.text}}</div>
</div>
</div>
<!-- <div class="questions">
<div class="questiontitle">
1、控制计划是由工艺部门完成 （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="questiontitle">
1、控制计划是由工艺部门完成 （4分）
</div>
<div class="questions">
<div class="questiontitle">
2、.PFMEA假定所设计的产品能满足设计要求
</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="questions">
<div class="questiontitle">
3、PFMEA假定所设计的产品能满足设计要求 （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> -->
<div class="btnswitch">
<div class="checkoutbtn"></div>
<div class="select">错误</div>
</div>
</div>
<div class="questions">
<div class="questiontitle">
2、.PFMEA假定所设计的产品能满足设计要求
</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="questions">
<div class="questiontitle">
3、PFMEA假定所设计的产品能满足设计要求 （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> -->
<div class="questiontype clearfix">
<div class="type">选择题</div>
@@ -112,84 +108,29 @@
</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="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="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(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 class="submitbtn">提交</div>
</div>
</div>
</div>
@@ -199,239 +140,231 @@
<script>
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 {
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,
};
},
name: "ReadyExamination",
// components: {
// TitleHead,
// },
setup() {
const state = reactive({
questions: [
{
id: 1,
type: "judge",
text: "1、控制计划是由工艺部门完成 （4分）",
options: [
{
id:1,
text: "正确",
select:"flase",
},
{
id:2,
text: "错误",
select:"flase",
},
]
},
{
id: 2,
type: "judge",
text: "2、.PFMEA假定所设计的产品能满足设计要求 （4分）",
options: [
{
id:1,
text: "正确",
select:"flase",
},
{
id:2,
text: "错误",
select:"flase",
},
]
},
{
id: 3,
type: "judge",
text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
options: [
{
id:1,
text: "正确",
select:"flase",
},
{
id:2,
text: "错误",
select:"flase",
},
]
},
],
//判断题问题和选项（暂时被questions替代）
// j_questions: [
// {
// type: "judge",
// id: 1,
// text: "1、控制计划是由工艺部门完成 （4分）",
// },
// {
// type: "judge",
// id: 2,
// text: "2、.PFMEA假定所设计的产品能满足设计要求",
// },
// {
// type: "judge",
// id: 3,
// text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
// },
// ],
// j_options: [
// {
// id: 1,
// text: "正确",
// selected: false,
// },
// {
// id: 2,
// text: "错误",
// selected: false,
// },
// ],
s_questions: [
{
type: "choice",
id: 1,
text: "4、.FMEA 是一种（ ）工具（4分）",
},
],
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) => {
value.select = !value.select
};
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;
}
// .clearfix:before,
// .clearfix:after {
// content: " ";
// display: table;
// clear: both;
// }
.readyexamination {
width: 100%;
background-color: #F2F5F7;
font-size: 14px;
font-weight: normal;
color: #333330;
}
.notice {
width: 100%;
display: flex;
justify-content: center;
margin-top: -17.5px;
background-color: #ffffff;
margin-top: 10px;
.noticebox {
width: 90%;
background: #fff;
border-radius: 4px;
position: relative;
display: flex;
justify-content: center;
width: 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;
}
}
margin: 0 auto;
padding-top: 19.5px;
// .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;
// }
// }
// }
.re_title{
margin-bottom: 23.5px;
color: #04243C;
font-weight: 600;
}
.questiontype {
width: 100%;
height: 35px;
height: 40px;
border-radius: 4px;
margin-bottom: 20px;
background-color: #f9f9f9;
line-height: 35px;
background-color: #F2F5F7;
line-height: 40px;
font-weight: 500;
.type {
margin-left: 11px;
}
}
.questions {
width: 100%;
margin-left: 9.5px;
margin-left: 9px;
.questiontitle {
margin-bottom: 18px;
font-weight: 500;
}
.btnswitch {
display: flex;
height: 13.6px;
line-height: 13.6px;
// align-items: center;
margin-left: 23px;
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;
}
@@ -441,17 +374,18 @@ export default {
}
}
.btnbox {
width: 83px;
width: 301.5px;
height: 33px;
background-color: #2478ff;
border-radius: 2px;
border-radius: 6px;
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
font-size: 14px;
margin: 18px auto 24px auto;
margin: 30px auto 24px auto;
text-align: center;
line-height: 33px;
.submitbtn {
border: none;
border-radius: 6px;
background-color: #2478ff;
color: #ffffff;
}

93
src/views/filestorag/fileStorag.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<div class="filestorag">
<div class="notice">
<div class="noticebox">
<div class="main">
<div class="filebox"
v-for="(t,index) in t_items"
:key="index">
<div class="fileimg"
:style="{
backgroundImage:
'url('+ t.imgUrl +')'
}"
></div>
<div class="filename">{{t.text}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
import Images from "../../assets/image/index";
export default {
name: "FileStorag",
setup() {
const state = reactive({
t_items: [
{
id: 1,
text: "示例文档.zip",
imgUrl:Images.zipImg,
},
{
id: 2,
text: "示例文档.md",
imgUrl:Images.mdImg,
},
{
id: 3,
text: "示例文档.rar",
imgUrl:Images.rarImg,
},
{
id: 4,
text: "示例文档.word",
imgUrl:Images.wordImg,
},
],
});
return {
...toRefs(state),
Images,
};
}
};
</script>
<style lang="scss" scoped>
.filestorag{
width: 100%;
background-color: #F2F5F7;
font-size: 13px;
color: #677D86;
.notice{
width: 100%;
background-color: #ffffff;
margin-top: 10px;
.noticebox{
width: 90%;
margin: 0 auto;
.main{
width: 100%;
.filebox{
display: flex;
margin-left: 16.5px;
padding: 21.5px 0;
align-items: center;
border-bottom: 1px solid #EDF3FF;
.fileimg{
width: 19.5px;
height: 22px;
background-size: 100% 100%;
margin-right: 19px;
}
}
}
}
}
}
</style>