mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-08 02:16:47 +08:00
Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/stu_h5
This commit is contained in:
岳佳鑫
BIN
src/assets/image/filestorag/excel.png
Normal file
BIN
src/assets/image/filestorag/excel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 758 B |
BIN
src/assets/image/filestorag/md.png
Normal file
BIN
src/assets/image/filestorag/md.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 729 B |
BIN
src/assets/image/filestorag/pdf.png
Normal file
BIN
src/assets/image/filestorag/pdf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 642 B |
BIN
src/assets/image/filestorag/ppt.png
Normal file
BIN
src/assets/image/filestorag/ppt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 671 B |
BIN
src/assets/image/filestorag/rar.png
Normal file
BIN
src/assets/image/filestorag/rar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 615 B |
BIN
src/assets/image/filestorag/word.png
Normal file
BIN
src/assets/image/filestorag/word.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 650 B |
BIN
src/assets/image/filestorag/zip.png
Normal file
BIN
src/assets/image/filestorag/zip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 551 B |
@@ -1,6 +1,13 @@
|
|||||||
const Images = {
|
const Images = {
|
||||||
//选择按钮
|
//选择按钮
|
||||||
checkboxImg: require('./checkbox.png'),
|
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
|
export default Images
|
||||||
BIN
src/assets/image/readyexamination/smile.png
Normal file
BIN
src/assets/image/readyexamination/smile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 722 B |
BIN
src/assets/image/readyexamination/time.png
Normal file
BIN
src/assets/image/readyexamination/time.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 968 B |
@@ -1,258 +1,185 @@
|
|||||||
<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="e_title">管理者进阶腾飞班 - 第一次考试</div>
|
||||||
<div class="samegt pre"></div>
|
<div class="et_detail">
|
||||||
<div class="sameg">上一个</div>
|
<div class="et_icon"></div>
|
||||||
<div class="sameg" style="margin-left: 15.5px">下一个</div>
|
<div class="et_time">2022-7-20 00:00 至 2022-8-29 23:59:59</div>
|
||||||
<div class="samegt next"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="lefttitle">
|
<div class="et_box">
|
||||||
<div class="img"></div>
|
<div class="et_length">
|
||||||
<div class="rightmain">
|
<div class="et_name">考试时长：</div>
|
||||||
<div class="talk">考试测试</div>
|
<div class="et_minute">30分钟</div>
|
||||||
<div class="box"></div>
|
<div class="et_lineicon"></div>
|
||||||
</div>
|
<div class="et_name">及格分数：</div>
|
||||||
</div>
|
<div class="et_score">60</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>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="noticebox">
|
||||||
|
<div class="main">
|
||||||
<div class="btnbox">
|
<div class="btnbox">
|
||||||
<button class="textbtn">开始考试</button>
|
<button class="textbtn">开始考试</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="lefttitle">
|
<div class="e_form">
|
||||||
<div class="img"></div>
|
|
||||||
<div class="rightmain">
|
|
||||||
<div class="talk">历史记录</div>
|
|
||||||
<div class="box"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="contenttwo clearfix">
|
|
||||||
<table>
|
<table>
|
||||||
<tr class="trbox1">
|
<tr class="trbox1">
|
||||||
<th>提交时间</th>
|
<th>提交时间</th>
|
||||||
<th>成绩</th>
|
<th>成绩</th>
|
||||||
<th>状态</th>
|
<th>状态</th>
|
||||||
<th>操作</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="trbox2">
|
<tr class="trbox2">
|
||||||
<td>
|
<td>
|
||||||
2022-7-20
|
2022-7-20 00:00
|
||||||
<br />
|
|
||||||
00:00
|
|
||||||
</td>
|
</td>
|
||||||
<td>10分</td>
|
<td>10分</td>
|
||||||
<td>已完成</td>
|
<td>已完成</td>
|
||||||
<td><span>查看考卷</span></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="trbox3">
|
<tr class="trbox3">
|
||||||
<td>
|
<td>
|
||||||
2022-7-20
|
2022-7-20 00:00
|
||||||
<br />
|
|
||||||
00:00
|
|
||||||
</td>
|
</td>
|
||||||
<td>10分</td>
|
<td>10分</td>
|
||||||
<td>已完成</td>
|
<td>已完成</td>
|
||||||
<td><span>查看考卷</span></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="trbox4">
|
<tr class="trbox4">
|
||||||
<td>
|
<td>
|
||||||
2022-7-20
|
2022-7-20 00:00
|
||||||
<br />
|
|
||||||
00:00
|
|
||||||
</td>
|
</td>
|
||||||
<td>10分</td>
|
<td>10分</td>
|
||||||
<td>已完成</td>
|
<td>已完成</td>
|
||||||
<td><span>查看考卷</span></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import { reactive, toRefs } from "vue";
|
// import { reactive, toRefs } from "vue";
|
||||||
import TitleHead from "@/components/TitleHead.vue";
|
// import TitleHead from "@/components/TitleHead.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "ExamiNation",
|
name: "ExamiNation",
|
||||||
components: {
|
// components: {
|
||||||
TitleHead,
|
// TitleHead,
|
||||||
},
|
// },
|
||||||
setup() {},
|
setup() {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.clearfix:before,
|
|
||||||
.clearfix:after {
|
|
||||||
content: " ";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.examination {
|
.examination {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-bottom: 20px;
|
background-color: #F2F5F7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice {
|
.notice {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
margin-top: 10px;
|
||||||
justify-content: center;
|
font-size: 14px;
|
||||||
margin-top: -17.5px;
|
}
|
||||||
.noticebox {
|
.noticebox {
|
||||||
width: 90%;
|
width: 100%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 4px;
|
margin-bottom: 11.5px;
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
.main {
|
.main {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin-top: 20px;
|
margin: 0 auto;
|
||||||
.dir {
|
padding-top: 18.5px;
|
||||||
width: 100%;
|
padding-bottom: 27.5px;
|
||||||
height: 20px;
|
}
|
||||||
// background-color: red;
|
}
|
||||||
margin-bottom: 20px;
|
.e_title{
|
||||||
|
margin-bottom: 14.5px ;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.et_detail{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: right;
|
margin-bottom: 11.5px;
|
||||||
font-size: 12px;
|
align-items: center;
|
||||||
color: #2478ff;
|
.et_icon{
|
||||||
.samegt {
|
width: 15px;
|
||||||
margin-top: 3px;
|
height: 15px;
|
||||||
height: 12px;
|
background-image: url('../../assets/image/readyexamination/time.png');
|
||||||
width: 12px;
|
background-size: 100% 100%;
|
||||||
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
.samege {
|
.et_time{
|
||||||
line-height: 12px;
|
color: #6E7B84;
|
||||||
}
|
|
||||||
.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 {
|
.et_box{
|
||||||
display: flex;
|
margin-top: 16.5px;
|
||||||
position: relative;
|
background-color: #F2F5F7;
|
||||||
width: 90px;
|
border-radius: 10px;
|
||||||
.img {
|
padding: 18px 0 17px 22px;
|
||||||
margin-top: 1.5px;
|
.et_length{
|
||||||
width: 16px;
|
display: flex;
|
||||||
height: 16px;
|
align-items: center;
|
||||||
background-image: url(../../assets/image/cycle.png);
|
.et_name{
|
||||||
}
|
margin-right: 5px;
|
||||||
.rightmain {
|
color: #6E7B84;
|
||||||
margin-left: 7.5px;
|
}
|
||||||
.talk {
|
.et_minute{
|
||||||
margin-left: -1.5px;
|
color: #2478FF;
|
||||||
font-size: 14px;
|
margin-right: 56px;
|
||||||
font-weight: bold;
|
}
|
||||||
color: #333;
|
.et_lineicon{
|
||||||
position: absolute;
|
width: 17.5px;
|
||||||
z-index: 999;
|
height: 17.5px;
|
||||||
}
|
background-image: url(../../assets/image/readyexamination/smile.png);
|
||||||
.box {
|
margin-right: 8px;
|
||||||
position: absolute;
|
}
|
||||||
width: 62.5px;
|
.et_score{
|
||||||
height: 10px;
|
color: #FF9E00;
|
||||||
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 {
|
.btnbox {
|
||||||
width: 83px;
|
width: 301.5px;
|
||||||
height: 33px;
|
height: 33px;
|
||||||
background-color: #2478ff;
|
background-color: #2478ff;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||||
font-size: 13.5px;
|
font-size: 13.5px;
|
||||||
margin: 20px 109.5px 21.5px 109.5px;
|
margin: 18.5px auto 43.5px 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 33px;
|
line-height: 33px;
|
||||||
.textbtn {
|
.textbtn {
|
||||||
|
width: 301.5px;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #2478ff;
|
background-color: #2478ff;
|
||||||
|
border-radius: 6px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.contenttwo {
|
.e_form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
color: #333330;
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
// border-collapse:separate;
|
|
||||||
// border-spacing:0px 15.5px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 21px auto 48px auto;
|
margin-bottom: 6.5px ;
|
||||||
.trbox1 {
|
.trbox1 {
|
||||||
width: 302px;
|
width: 342.5px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #f2f5f7;
|
background-color: #f2f5f7;
|
||||||
th {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #333330;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
td {
|
td {
|
||||||
padding: 14.5px;
|
padding: 14.5px;
|
||||||
@@ -260,14 +187,8 @@ export default {
|
|||||||
.trbox2,
|
.trbox2,
|
||||||
.trbox3,
|
.trbox3,
|
||||||
.trbox4 {
|
.trbox4 {
|
||||||
border-bottom: 0.5px solid #d7e5fd;
|
border-bottom: 0.5px solid #F1F2F3;
|
||||||
}
|
|
||||||
span {
|
|
||||||
color: #2478ff;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<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">
|
||||||
@@ -14,9 +14,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btnbox">
|
<!-- <div class="btnbox">
|
||||||
<div class="closebtn">关闭</div>
|
<div class="closebtn">关闭</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -25,12 +25,12 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import { reactive, toRefs } from "vue";
|
// import { reactive, toRefs } from "vue";
|
||||||
import TitleHead from "@/components/TitleHead.vue";
|
// import TitleHead from "@/components/TitleHead.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "ExaminationScore",
|
name: "ExaminationScore",
|
||||||
components: {
|
// components: {
|
||||||
TitleHead,
|
// TitleHead,
|
||||||
},
|
// },
|
||||||
setup() {},
|
setup() {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -44,9 +44,9 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: -17.5px;
|
margin-top: 20px;
|
||||||
.noticebox {
|
.noticebox {
|
||||||
width: 90%;
|
width: 100%;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -55,59 +55,61 @@ export default {
|
|||||||
.main {
|
.main {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
// background-color: #FFFFFF;
|
|
||||||
.mainbody {
|
.mainbody {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 133.5px;
|
margin: 240px auto;
|
||||||
background-color: #f2f5f7;
|
background-color: #f2f5f7;
|
||||||
|
border-radius: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.scoretitle {
|
.scoretitle {
|
||||||
margin: 18px auto 15px auto;
|
margin: 17.5px auto 15.5px auto;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #56a3f9;
|
color: #04243C;
|
||||||
}
|
}
|
||||||
.scorebox {
|
.scorebox {
|
||||||
width: 290.5px;
|
width: 320.5px;
|
||||||
height: 55.5px;
|
height: 55.5px;
|
||||||
|
border-radius: 2px 6px 2px 6px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
margin-bottom: 6.5px;
|
margin-bottom:11.5px;
|
||||||
.scoredetail {
|
.scoredetail {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin: 21.5px auto 29.5px 72.5px;
|
font-weight: 500;
|
||||||
|
margin: 21.5px auto auto 92.5px;
|
||||||
.score {
|
.score {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #ee423d;
|
color: #FF9E00;
|
||||||
margin-top: -8px;
|
margin-top: -7px;
|
||||||
}
|
}
|
||||||
.grade {
|
.grade {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #ee423d;
|
color: #FF9E00;
|
||||||
margin-bottom: 21.5px;
|
margin-bottom: 21.5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btnbox {
|
// .btnbox {
|
||||||
width: 83px;
|
// width: 83px;
|
||||||
height: 33px;
|
// height: 33px;
|
||||||
background-color: #2478ff;
|
// background-color: #2478ff;
|
||||||
border-radius: 2px;
|
// border-radius: 2px;
|
||||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
// box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||||
font-size: 14px;
|
// font-size: 14px;
|
||||||
margin: 18px auto 218.5px auto;
|
// margin: 18px auto 218.5px auto;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
line-height: 33px;
|
// line-height: 33px;
|
||||||
.closebtn {
|
// .closebtn {
|
||||||
border: none;
|
// border: none;
|
||||||
background-color: #2478ff;
|
// background-color: #2478ff;
|
||||||
color: #ffffff;
|
// color: #ffffff;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,85 +1,81 @@
|
|||||||
<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="re_title">管理者进阶腾飞班 - 第一次考试</div>
|
||||||
|
<!-- <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>
|
<div class="type">判断题</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 循环遍历生成判断题的问题和选项 -->
|
<!-- 循环遍历生成判断题的问题和选项 -->
|
||||||
<div class="questions" v-for="(q, index) in questions" :key="index">
|
<div class="questions"
|
||||||
<div class="questiontitle">
|
v-for="(q,index) in questions"
|
||||||
{{ q.text }}
|
:key="index">
|
||||||
|
<div class="questiontitle" >
|
||||||
|
{{q.text}}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="btnswitch" v-for="(o,index) in q.options"
|
||||||
class="btnswitch"
|
:key="index"
|
||||||
v-for="(j, index) in q.options"
|
@click="selectBtn(o)"
|
||||||
:key="index"
|
|
||||||
@click="selectBtn(j)"
|
|
||||||
>
|
>
|
||||||
<div
|
<div class="checkoutbtn"
|
||||||
class="checkoutbtn"
|
|
||||||
:style="{
|
:style="{
|
||||||
backgroundImage:
|
backgroundImage:
|
||||||
'url(' +
|
'url('+( o.select === true? Images.checkboxImg : Images.checkbox2Img )+')'
|
||||||
(j.selected === true
|
|
||||||
? Images.checkboxImg
|
|
||||||
: Images.checkbox2Img) +
|
|
||||||
')',
|
|
||||||
}"
|
}"
|
||||||
></div>
|
></div>
|
||||||
<div class="select">{{ j.text }}</div>
|
<div class="select">{{o.text}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div class="questions">
|
<!-- <div class="questions">
|
||||||
<div class="questiontitle">
|
<div class="questiontitle">
|
||||||
1、控制计划是由工艺部门完成 （4分）
|
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>
|
</div>
|
||||||
<div class="questions">
|
<div class="btnswitch">
|
||||||
<div class="questiontitle">
|
<div class="checkoutbtn"></div>
|
||||||
2、.PFMEA假定所设计的产品能满足设计要求
|
<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>
|
||||||
<div class="questions">
|
<div class="btnswitch">
|
||||||
<div class="questiontitle">
|
<div class="checkoutbtn"></div>
|
||||||
3、PFMEA假定所设计的产品能满足设计要求 （4分）
|
<div class="select">错误</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btnswitch">
|
</div>
|
||||||
<div class="checkoutbtn"></div>
|
<div class="questions">
|
||||||
<div class="select">正确</div>
|
<div class="questiontitle">
|
||||||
</div>
|
2、.PFMEA假定所设计的产品能满足设计要求
|
||||||
<div class="btnswitch">
|
</div>
|
||||||
<div class="checkoutbtn"></div>
|
<div class="btnswitch">
|
||||||
<div class="select">错误</div>
|
<div class="checkoutbtn"></div>
|
||||||
</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">
|
||||||
|
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="questiontype clearfix">
|
||||||
<div class="type">选择题</div>
|
<div class="type">选择题</div>
|
||||||
@@ -112,84 +108,29 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div class="questions">
|
<!-- <div class="questions">
|
||||||
<div class="questiontitle">
|
<div class="questiontitle">
|
||||||
4、.FMEA 是一种（ ）工具（4分）
|
4、.FMEA 是一种（ ）工具（4分）
|
||||||
</div>
|
</div>
|
||||||
<div class="btnswitch">
|
<div class="btnswitch">
|
||||||
<div class="checkoutbtn"></div>
|
<div class="checkoutbtn"></div>
|
||||||
<div class="select">问题解决</div>
|
<div class="select">问题解决</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btnswitch">
|
<div class="btnswitch">
|
||||||
<div class="checkoutbtn"></div>
|
<div class="checkoutbtn"></div>
|
||||||
<div class="select">项目策划</div>
|
<div class="select">项目策划</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btnswitch">
|
<div class="btnswitch">
|
||||||
<div class="checkoutbtn"></div>
|
<div class="checkoutbtn"></div>
|
||||||
<div class="select">过程分析</div>
|
<div class="select">过程分析</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btnswitch">
|
<div class="btnswitch">
|
||||||
<div class="checkoutbtn"></div>
|
<div class="checkoutbtn"></div>
|
||||||
<div class="select">风险分析</div>
|
<div class="select">风险分析</div>
|
||||||
</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(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="btnbox">
|
||||||
<div class="submitbtn">提交试卷</div>
|
<div class="submitbtn">提交</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -199,239 +140,231 @@
|
|||||||
<script>
|
<script>
|
||||||
import { reactive, toRefs } from "vue";
|
import { reactive, toRefs } from "vue";
|
||||||
import Images from "../../assets/image/index";
|
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({
|
||||||
questions: [
|
questions: [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
text: "1、控制计划是由工艺部门完成 （4分）",
|
type: "judge",
|
||||||
options: [
|
text: "1、控制计划是由工艺部门完成 （4分）",
|
||||||
{
|
options: [
|
||||||
text: "正确",
|
{
|
||||||
select: "flase",
|
id:1,
|
||||||
},
|
text: "正确",
|
||||||
{
|
select:"flase",
|
||||||
text: "错误",
|
},
|
||||||
select: "flase",
|
{
|
||||||
},
|
id:2,
|
||||||
],
|
text: "错误",
|
||||||
},
|
select:"flase",
|
||||||
{
|
},
|
||||||
id: 2,
|
]
|
||||||
text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
},
|
||||||
options: [
|
{
|
||||||
{
|
id: 2,
|
||||||
text: "正确",
|
type: "judge",
|
||||||
select: "flase",
|
text: "2、.PFMEA假定所设计的产品能满足设计要求 （4分）",
|
||||||
},
|
options: [
|
||||||
{
|
{
|
||||||
text: "错误",
|
id:1,
|
||||||
select: "flase",
|
text: "正确",
|
||||||
},
|
select:"flase",
|
||||||
],
|
},
|
||||||
},
|
{
|
||||||
{
|
id:2,
|
||||||
id: 3,
|
text: "错误",
|
||||||
text: "3、控制计划是由工艺部门完成 （4分）",
|
select:"flase",
|
||||||
options: [
|
},
|
||||||
{
|
]
|
||||||
text: "正确",
|
},
|
||||||
select: "flase",
|
{
|
||||||
},
|
id: 3,
|
||||||
{
|
type: "judge",
|
||||||
text: "错误",
|
text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
|
||||||
select: "flase",
|
options: [
|
||||||
},
|
{
|
||||||
],
|
id:1,
|
||||||
},
|
text: "正确",
|
||||||
{
|
select:"flase",
|
||||||
id: 4,
|
},
|
||||||
text: "4、.PFMEA假定所设计的产品能满足设计要求",
|
{
|
||||||
options: [
|
id:2,
|
||||||
{
|
text: "错误",
|
||||||
text: "正确",
|
select:"flase",
|
||||||
select: "flase",
|
},
|
||||||
},
|
]
|
||||||
{
|
},
|
||||||
text: "错误",
|
],
|
||||||
select: "flase",
|
//判断题问题和选项（暂时被questions替代）
|
||||||
},
|
// j_questions: [
|
||||||
],
|
// {
|
||||||
},
|
// type: "judge",
|
||||||
],
|
// id: 1,
|
||||||
// j_questions: [
|
// text: "1、控制计划是由工艺部门完成 （4分）",
|
||||||
// {
|
// },
|
||||||
// type: "judge",
|
// {
|
||||||
// id: 1,
|
// type: "judge",
|
||||||
// text: "1、控制计划是由工艺部门完成 （4分）",
|
// id: 2,
|
||||||
// },
|
// text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
||||||
// {
|
// },
|
||||||
// type: "judge",
|
// {
|
||||||
// id: 2,
|
// type: "judge",
|
||||||
// text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
// id: 3,
|
||||||
// },
|
// text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
|
||||||
// {
|
// },
|
||||||
// type: "judge",
|
// ],
|
||||||
// id: 3,
|
// j_options: [
|
||||||
// text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
|
// {
|
||||||
// },
|
// id: 1,
|
||||||
// ],
|
// text: "正确",
|
||||||
s_questions: [
|
// selected: false,
|
||||||
{
|
// },
|
||||||
type: "choice",
|
// {
|
||||||
id: 1,
|
// id: 2,
|
||||||
text: "4、.FMEA 是一种（ ）工具（4分）",
|
// text: "错误",
|
||||||
},
|
// selected: false,
|
||||||
],
|
// },
|
||||||
// j_options: [
|
// ],
|
||||||
// {
|
|
||||||
// id: 1,
|
s_questions: [
|
||||||
// text: "正确",
|
{
|
||||||
// selected: false,
|
type: "choice",
|
||||||
// },
|
id: 1,
|
||||||
// {
|
text: "4、.FMEA 是一种（ ）工具（4分）",
|
||||||
// id: 2,
|
},
|
||||||
// text: "错误",
|
],
|
||||||
// selected: false,
|
s_options: [
|
||||||
// },
|
{
|
||||||
// ],
|
id: 1,
|
||||||
s_options: [
|
text: "问题解决",
|
||||||
{
|
selected: false,
|
||||||
id: 1,
|
},
|
||||||
text: "问题解决",
|
{
|
||||||
selected: false,
|
id: 2,
|
||||||
},
|
text: "项目策划",
|
||||||
{
|
selected: false,
|
||||||
id: 2,
|
},
|
||||||
text: "项目策划",
|
{
|
||||||
selected: false,
|
id: 3,
|
||||||
},
|
text: "过程分析",
|
||||||
{
|
selected: false,
|
||||||
id: 3,
|
},
|
||||||
text: "过程分析",
|
{
|
||||||
selected: false,
|
id: 4,
|
||||||
},
|
text: "风险分析",
|
||||||
{
|
selected: false,
|
||||||
id: 4,
|
},
|
||||||
text: "风险分析",
|
]
|
||||||
selected: false,
|
});
|
||||||
},
|
const selectBtn = (value) => {
|
||||||
],
|
value.select = !value.select
|
||||||
});
|
};
|
||||||
const selectBtn = (value) => {
|
const selectBtn2 = (value) => {
|
||||||
// let arr = state.questions;
|
let arr = state.s_options;
|
||||||
const arry = [];
|
arr.map((i) => {
|
||||||
state.questions.map((item) => {
|
if (i.id === value.id) {
|
||||||
arry.push(item.options);
|
i.selected = !i.selected;
|
||||||
});
|
}
|
||||||
console.log(arry);
|
});
|
||||||
console.log(value);
|
state.s_options = arr;
|
||||||
// arry.map((i) => {
|
};
|
||||||
// if (i.id === value.id) {
|
return {
|
||||||
// i.selected = !i.selected;
|
...toRefs(state),
|
||||||
// }
|
selectBtn,
|
||||||
// });
|
selectBtn2,
|
||||||
// state.questions = arry;
|
Images,
|
||||||
};
|
};
|
||||||
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%;
|
||||||
|
background-color: #F2F5F7;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #333330;
|
||||||
}
|
}
|
||||||
.notice {
|
.notice {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
background-color: #ffffff;
|
||||||
justify-content: center;
|
margin-top: 10px;
|
||||||
margin-top: -17.5px;
|
|
||||||
.noticebox {
|
.noticebox {
|
||||||
width: 90%;
|
width: 100%;
|
||||||
background: #fff;
|
// position: relative;
|
||||||
border-radius: 4px;
|
// display: flex;
|
||||||
position: relative;
|
// justify-content: center;
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
.main {
|
.main {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin-top: 20px;
|
margin: 0 auto;
|
||||||
font-size: 14px;
|
padding-top: 19.5px;
|
||||||
color: #333330;
|
// .lefttitle {
|
||||||
.lefttitle {
|
// display: flex;
|
||||||
display: flex;
|
// margin-bottom: 21.5px;
|
||||||
margin-bottom: 21.5px;
|
// .img {
|
||||||
.img {
|
// width: 16px;
|
||||||
width: 16px;
|
// height: 18.5px;
|
||||||
height: 18.5px;
|
// background-image: url(../../assets/image/readyexamination/sandclock.png);
|
||||||
background-image: url(../../assets/image/readyexamination/sandclock.png);
|
// background-size: 100% 100%;
|
||||||
background-size: 100% 100%;
|
// }
|
||||||
}
|
// .rightmain {
|
||||||
.rightmain {
|
// display: flex;
|
||||||
display: flex;
|
// margin-left: 4.5px;
|
||||||
margin-left: 4.5px;
|
// font-size: 14px;
|
||||||
font-size: 14px;
|
// .time {
|
||||||
.time {
|
// color: #56a3f9;
|
||||||
color: #56a3f9;
|
// }
|
||||||
}
|
// .box {
|
||||||
.box {
|
// margin-left: 9.5px;
|
||||||
margin-left: 9.5px;
|
// color: #ee423d;
|
||||||
color: #ee423d;
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
.re_title{
|
||||||
|
margin-bottom: 23.5px;
|
||||||
|
color: #04243C;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.questiontype {
|
.questiontype {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 35px;
|
height: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
background-color: #f9f9f9;
|
background-color: #F2F5F7;
|
||||||
line-height: 35px;
|
line-height: 40px;
|
||||||
|
font-weight: 500;
|
||||||
.type {
|
.type {
|
||||||
margin-left: 11px;
|
margin-left: 11px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.questions {
|
.questions {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-left: 9.5px;
|
margin-left: 9px;
|
||||||
.questiontitle {
|
.questiontitle {
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.btnswitch {
|
.btnswitch {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 13.6px;
|
height: 13.6px;
|
||||||
line-height: 13.6px;
|
line-height: 13.6px;
|
||||||
// align-items: center;
|
margin-left: 23px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
.checkoutbtn {
|
.checkoutbtn {
|
||||||
width: 13.6px;
|
width: 13.6px;
|
||||||
height: 13.6px;
|
height: 13.6px;
|
||||||
// background-image: url(../../assets/image/checkbox2.png);
|
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
margin-right: 6.5px;
|
margin-right: 6.5px;
|
||||||
}
|
}
|
||||||
@@ -441,17 +374,18 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btnbox {
|
.btnbox {
|
||||||
width: 83px;
|
width: 301.5px;
|
||||||
height: 33px;
|
height: 33px;
|
||||||
background-color: #2478ff;
|
background-color: #2478ff;
|
||||||
border-radius: 2px;
|
border-radius: 6px;
|
||||||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin: 18px auto 24px auto;
|
margin: 30px auto 24px auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 33px;
|
line-height: 33px;
|
||||||
.submitbtn {
|
.submitbtn {
|
||||||
border: none;
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
background-color: #2478ff;
|
background-color: #2478ff;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|||||||
93
src/views/filestorag/fileStorag.vue
Normal file
93
src/views/filestorag/fileStorag.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user