commit
3c566bb2bf
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 378 B |
After Width: | Height: | Size: 351 B |
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<!-- 我的流程流程图 -->
|
||||
<div class="picture_body">
|
||||
<!-- 流程图示例 -->
|
||||
<div class="picture_title">
|
||||
<div class="picture_area">
|
||||
<div class="picture_icon_one"></div>
|
||||
<div class="picture_text_one">已经过的节点</div>
|
||||
</div>
|
||||
<div class="picture_area">
|
||||
<div class="picture_icon_two"></div>
|
||||
<div class="picture_text_two">未经过的节点</div>
|
||||
</div>
|
||||
<div class="picture_area">
|
||||
<div class="picture_icon_three"></div>
|
||||
<div class="picture_text_three">当前节点</div>
|
||||
</div>
|
||||
<div class="picture_area">
|
||||
<div class="picture_icon_four"></div>
|
||||
<div class="picture_text_four">已经过的出口</div>
|
||||
</div>
|
||||
<div class="picture_area">
|
||||
<div class="picture_icon_five"></div>
|
||||
<div class="picture_text_five">未经过的出口</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "MyCourseDetailPicture",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.picture_body {
|
||||
width: 95.9vw;
|
||||
height: 70vh;
|
||||
// border: 0.1px solid #3f5564;
|
||||
background: url("~@/assets/companyFile/09091.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.picture_title {
|
||||
width: 94vw;
|
||||
height: 6vh;
|
||||
margin-left: 1vw;
|
||||
border-bottom: 0.1px solid #3f5564;
|
||||
display: flex;
|
||||
.picture_area {
|
||||
width: 8vw;
|
||||
height: 4vh;
|
||||
margin-top: 1vh;
|
||||
margin-left: 1vw;
|
||||
// border: 0.1px solid #3f5564;
|
||||
display: flex;
|
||||
.picture_icon_one {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
// border: 0.1px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: #41ffc4;
|
||||
margin-top: 0.9vh;
|
||||
}
|
||||
.picture_text_one {
|
||||
color: #fff;
|
||||
margin-left: 1vw;
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
}
|
||||
.picture_icon_two {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
// border: 0.1px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: #c8c8c8;
|
||||
margin-top: 0.9vh;
|
||||
}
|
||||
.picture_text_two {
|
||||
color: #fff;
|
||||
margin-left: 1vw;
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
}
|
||||
.picture_icon_three {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
// border: 0.1px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: #2fe7ff;
|
||||
margin-top: 0.9vh;
|
||||
}
|
||||
.picture_text_three {
|
||||
color: #fff;
|
||||
margin-left: 1vw;
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
}
|
||||
.picture_icon_four {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
// border: 0.1px solid #fff;
|
||||
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
margin-top: 0.9vh;
|
||||
}
|
||||
.picture_text_four {
|
||||
color: #fff;
|
||||
margin-left: 1vw;
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
}
|
||||
.picture_icon_five {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
// border: 0.1px solid #fff;
|
||||
background: url("~@/assets/companyFile/rightarrow02.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
margin-top: 0.9vh;
|
||||
}
|
||||
.picture_text_five {
|
||||
color: #fff;
|
||||
margin-left: 1vw;
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<!-- 流程记录 -->
|
||||
<div class="record_body">
|
||||
<div class="all_step">
|
||||
<div class="record_step" v-for="item in record_list" :key="item.id">
|
||||
<div class="step">
|
||||
<div class="step_icon"></div>
|
||||
</div>
|
||||
<div class="step_table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "MyCourseDetailRecords",
|
||||
data() {
|
||||
return {
|
||||
record_list: [
|
||||
{
|
||||
id: "1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='less' scoped>
|
||||
.record_body {
|
||||
width: 95.9vw;
|
||||
height: 70vh;
|
||||
background: url("~@/assets/companyFile/09091.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.record_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 6px;
|
||||
background-color: #5e666a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.record_body::-webkit-scrollbar-thumb {
|
||||
display: none;
|
||||
width: 5px;
|
||||
background-color: #3c4b4a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.all_step {
|
||||
margin-top: 1vh;
|
||||
}
|
||||
/* 不固定高度,给自由展示空间 */
|
||||
.record_step {
|
||||
width: 94vw;
|
||||
height: 20vh;
|
||||
margin-left: 1vw;
|
||||
border: 0.1px solid #3f5564;
|
||||
display: flex;
|
||||
.step {
|
||||
width: 20px;
|
||||
// margin-top: 10%;
|
||||
margin-left: 1vw;
|
||||
height: 100%;
|
||||
border: 0.1px solid #fff;
|
||||
.step_icon {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in new issue