132 lines
2.7 KiB
Vue
132 lines
2.7 KiB
Vue
<template>
|
|
<div class="audit_item flex flex_between">
|
|
<div class="item_left flex">
|
|
<img class="main_img mr15" :src="url" />
|
|
<div class="flex_fit">
|
|
<div class="main_title active">{{title}}</div>
|
|
<div class="main_tip">{{tip}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="pass_item" v-if="pass" @click="showDetail">
|
|
<span>{{status}}</span>
|
|
<img v-if="title != '审核信息'" class="arrow_icon" src="@/assets/authentication/arrow_right.png" />
|
|
</div>
|
|
<div class="uploadBtn" :class="{'activeBtn': currentClass }"
|
|
v-else-if="!pass && buttonHide" @click="uploadHandler">{{buttonTitle}}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "auditItem",
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
methods: {
|
|
uploadHandler(){
|
|
if( !this.pass && this.currentClass ) {
|
|
this.$emit('upload')
|
|
}
|
|
},
|
|
showDetail() {
|
|
this.$emit('detail')
|
|
}
|
|
},
|
|
props: {
|
|
buttonHide: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
status: {
|
|
type: String,
|
|
default: '查看'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
tip: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
url: {
|
|
type: String,
|
|
default: require('@/assets/authentication/aduit_icon1.png')
|
|
},
|
|
pass: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
currentClass: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
buttonTitle: {
|
|
type: String,
|
|
default: '上传'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.audit_item {
|
|
width: 100%;
|
|
padding: 20px 0;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.item_left {
|
|
flex: 1;
|
|
.main_img {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
.flex_fit {
|
|
flex: 1;
|
|
}
|
|
.main_title {
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
color: #33495E;
|
|
}
|
|
.active {
|
|
color: #33495E;
|
|
}
|
|
.main_tip {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #33495E;
|
|
line-height: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.uploadBtn {
|
|
width: 68px;
|
|
height: 31px;
|
|
background: rgba($color: #5B739D, $alpha: 0.24);
|
|
color: #fff;
|
|
font-size: 13px;
|
|
border-radius: 4px;
|
|
line-height: 31px;
|
|
text-align: center;
|
|
}
|
|
.activeBtn {
|
|
background: #3364B7;
|
|
}
|
|
.pass_item {
|
|
font-size: 13px;
|
|
color: rgba($color: #000, $alpha: 0.59);
|
|
.arrow_icon {
|
|
width: 8px;
|
|
height: 12px;
|
|
vertical-align: sub;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|