|
After Width: | Height: | Size: 722 B |
@ -0,0 +1,215 @@
|
||||
<!-- 人员审查详情弹窗 -->
|
||||
<template>
|
||||
<el-dialog
|
||||
class="dialog"
|
||||
title="详情"
|
||||
:visible.sync="visible"
|
||||
:close-on-click-modal="false"
|
||||
width="1000px"
|
||||
@close="close"
|
||||
>
|
||||
<div class="item_text">
|
||||
<!-- 左方小三角 -->
|
||||
<div class="icon_line">
|
||||
<div class="icon_body"></div>
|
||||
</div>
|
||||
<div class="item_text_area">
|
||||
<div class="item_text_left">
|
||||
<div class="item_text_left_text">
|
||||
<div class="item_text_cell">企业名称:</div>
|
||||
<div class="item_text_cell">审核原因:</div>
|
||||
<div class="item_text_cell">审查人数:</div>
|
||||
</div>
|
||||
<div class="item_text_left_value">
|
||||
<div class="item_value_cell">{{ this.form_data.company_name }}</div>
|
||||
<div class="item_value_cell">{{ this.form_data.reason }}</div>
|
||||
<div class="item_value_cell">{{ this.form_data.people }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_text_right">
|
||||
<div class="item_text_right_text">
|
||||
<div class="item_text_cell">申请时间:</div>
|
||||
<div class="item_text_cell">审核结果:</div>
|
||||
</div>
|
||||
<div class="item_text_right_value">
|
||||
<div class="item_value_cell">{{ this.form_data.time }}</div>
|
||||
<div class="item_value_cell">{{ this.form_data.end }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下方表格 -->
|
||||
<div class="item_table">
|
||||
<!-- 左方小三角 -->
|
||||
<div class="icon_line">
|
||||
<div class="icon_body"></div>
|
||||
</div>
|
||||
<div class="item_table_title">审核人员名单</div>
|
||||
<!-- 正常异常切换 -->
|
||||
<el-tabs v-model="active" type="card" @tab-click="handle_click" class="item_tabs">
|
||||
<el-tab-pane label="正常" name="first"></el-tab-pane>
|
||||
<el-tab-pane label="异常" name="second"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "PersonBackDialog",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
form_data: {}, // 弹窗表单数据
|
||||
active:'first',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
open(item) {
|
||||
this.visible = true;
|
||||
this.form_data = item;
|
||||
},
|
||||
// 点击切换
|
||||
handle_click() {},
|
||||
close() {
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/.el-dialog {
|
||||
.el-dialog__title {
|
||||
color: #fff;
|
||||
font-size: 19px;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
background-image: url("~@/assets/companyFile/dialogBack.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 800px;
|
||||
/* 关闭弹窗叉号 */
|
||||
.el-dialog__headerbtn {
|
||||
.el-dialog__close {
|
||||
color: #e55b5b;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.item_text {
|
||||
margin-top: 40px;
|
||||
width: 970px;
|
||||
height: 210px;
|
||||
background: url("~@/assets/companyFile/background2.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.icon_line {
|
||||
width: 970px;
|
||||
height: 25px;
|
||||
// border: 0.1px solid #28847e;
|
||||
.icon_body {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: url("~@/assets/companyFile/decoration01.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.item_text_area {
|
||||
width: 970px;
|
||||
height: 180px;
|
||||
// border: 0.1px solid #28847e;
|
||||
display: flex;
|
||||
.item_text_left {
|
||||
width: 400px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
.item_text_left_text {
|
||||
width: 100px;
|
||||
height: 180px;
|
||||
.item_text_cell {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
color: #d0deee;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
// border: 0.1px solid #28847e;
|
||||
}
|
||||
}
|
||||
.item_text_left_value {
|
||||
width: 300px;
|
||||
height: 180px;
|
||||
.item_value_cell {
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item_text_right {
|
||||
width: 550px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
.item_text_right_text {
|
||||
width: 100px;
|
||||
height: 180px;
|
||||
.item_text_cell {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
color: #d0deee;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
// border: 0.1px solid #28847e;
|
||||
}
|
||||
}
|
||||
.item_text_right_value {
|
||||
width: 400px;
|
||||
height: 180px;
|
||||
.item_value_cell {
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item_table {
|
||||
margin-top: 10px;
|
||||
width: 970px;
|
||||
height: 450px;
|
||||
background: url("~@/assets/companyFile/background2.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.icon_line {
|
||||
width: 970px;
|
||||
height: 25px;
|
||||
// border: 0.1px solid #28847e;
|
||||
.icon_body {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: url("~@/assets/companyFile/decoration01.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.item_table_title {
|
||||
width: 970px;
|
||||
height: 30px;
|
||||
border: 0.1px solid #28847e;
|
||||
padding-left: 15px;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue