Merge pull request 'lukeyan' (#69) from lukeyan into master

Reviewed-on: #69
pull/71/head^2
lukeyan 1 year ago
commit 3c566bb2bf

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 378 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 351 B

@ -5,17 +5,25 @@
<el-tab-pane label="表单信息" name="first">
<MyCourseDetailForm ref="myCourseDetailForm"></MyCourseDetailForm>
</el-tab-pane>
<el-tab-pane label="流程图" name="second">流程图</el-tab-pane>
<el-tab-pane label="流转记录" name="third">流转记录</el-tab-pane>
<el-tab-pane label="流程图" name="second">
<MyCourseDetailPicture ref="myCourseDetailPicture"></MyCourseDetailPicture>
</el-tab-pane>
<el-tab-pane label="流转记录" name="third">
<MyCourseDetailRecords ref="myCourseDetailRecords"></MyCourseDetailRecords>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import MyCourseDetailForm from "./myCourseDetailForm";
import MyCourseDetailPicture from "./myCourseDetailPicture";
import MyCourseDetailRecords from './myCourseDetailRecords'
export default {
name: "MyCourseDetail",
components:{
MyCourseDetailForm
MyCourseDetailForm,
MyCourseDetailPicture,
MyCourseDetailRecords
},
data() {
return {

@ -82,6 +82,7 @@
</template>
<script>
export default {
name: "MyCourseDetailForm",
data() {
return {
attachment_show: true, //

@ -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…
Cancel
Save