<template>
|
<el-card class="layout" shadow="hover">
|
<!-- <el-steps :active="active" finish-status="success" style="">
|
<el-step title="Step 1" style=""/>
|
<el-step title="Step 2" />
|
<el-step title="Step 3" />
|
</el-steps> -->
|
<el-descriptions :column="3" size="small" >
|
<template #title>
|
<span class="d-index">{{ index + 1 }}</span>
|
<span class="d-title">{{ title }}</span>
|
</template>
|
<template #extra>
|
<!-- <span class="d-extra">{{ status }}</span> -->
|
<el-tag style="font-size: 16px;line-height: 16px;padding: 14px;" :type="status.type" effect="plain" size="large" round>{{
|
status.name
|
}}</el-tag>
|
</template>
|
<el-descriptions-item
|
label-class-name="descriptions-label-1"
|
v-for="(d, i) in descriptions"
|
:key="i"
|
:label="d.name"
|
>{{ d.value }}</el-descriptions-item
|
>
|
</el-descriptions>
|
|
<el-scrollbar>
|
<el-descriptions
|
title=" "
|
:column="2"
|
direction="vertical"
|
size="small"
|
border
|
>
|
<template v-for="(pic, t) in pics" :key="t">
|
<template v-if="pic.path.length > 0">
|
<el-descriptions-item
|
:label="pic.title"
|
:label-class-name="
|
t == 0 ? 'descriptions-label-1' : 'descriptions-label-2'
|
"
|
>
|
<el-space>
|
<el-image
|
v-for="(p, i) in pic.path"
|
class="image"
|
:key="i"
|
:src="p"
|
:preview-src-list="pic.path"
|
:initial-index="i"
|
fit="cover"
|
lazy
|
/>
|
</el-space>
|
</el-descriptions-item>
|
</template>
|
</template>
|
</el-descriptions>
|
</el-scrollbar>
|
|
<el-row style="margin-top: 16px">
|
<el-col :span="16"></el-col>
|
<el-col :span="8">
|
<el-row justify="end" class="btn-group">
|
<el-button
|
v-for="(b, i) in buttons"
|
:key="i"
|
:type="b.color ? b.color : 'primary'"
|
size="small"
|
@click="onButtonClick(i)"
|
>{{ b.name }}</el-button
|
>
|
</el-row>
|
</el-col>
|
</el-row>
|
</el-card>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
index: Number,
|
title: String,
|
status: {
|
type: Object,
|
default: () => {
|
return {
|
name: "",
|
type: "",
|
};
|
},
|
},
|
descriptions: {
|
type: Array,
|
default: () => [
|
{
|
name: "",
|
value: "",
|
},
|
],
|
},
|
pics: {
|
type: Array,
|
default: () => [
|
{
|
title: "",
|
path: [],
|
},
|
],
|
},
|
buttons: {
|
type: Array,
|
default: () => [
|
{
|
name: "primary",
|
color: "primary",
|
},
|
],
|
},
|
},
|
emits: ['buttonClick'],
|
data() {
|
return {
|
active: 1
|
}
|
},
|
methods: {
|
onButtonClick(i) {
|
this.$emit('buttonClick', this.index, i)
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.layout {
|
background-color: transparent;
|
margin-top: 20px;
|
/* border: none; */
|
border-color: rgba(0, 0, 0, 0.308);
|
}
|
|
.image {
|
width: 200px;
|
height: 210px;
|
border-radius: 4px;
|
}
|
|
.d-index {
|
display: inline-block;
|
width: 22px;
|
height: 22px;
|
line-height: 22px;
|
text-align: center;
|
border-radius: 50%;
|
color: var(--el-color-primary-light-3);
|
border: 2px solid var(--el-color-primary-light-3);
|
margin-right: 4px;
|
}
|
|
.d-title {
|
/* background: var(--el-color-danger-light-3); */
|
font-weight: 600;
|
font-size: var(--el-font-size-large);
|
}
|
|
.d-extra {
|
}
|
|
.descriptions-label-1 {
|
color: whitesmoke;
|
background: var(--el-color-danger-light-3);
|
}
|
|
.descriptions-label-2 {
|
color: whitesmoke;
|
background-color: var(--el-color-success-light-3);
|
}
|
</style>
|
