byte-sailing-new/src/views/process/processApproval/auxiliary.vue

<template>
	<div class="auxiliary">
		<el-collapse>
			<el-collapse-item :title="i.label" v-for="(i,index) in data" :key='i.label' :name="index">
				<ul>
					<li v-for="(j,jindex) in i.data" :key="jindex">
						<div class="list-box" v-for="n in j" :key='n.label' :style="n.num ? `width:${100/n.num}%` : ''">
							<div class="label">{{n.label}}：</div>
							<div 
								class="value" 
								:class="n.fn ? 'color-bl' : ''" 
								@click="n.fn ? n.fn() : ''"
								:style="n.style || ''">
								{{n.value}}
							</div>
						</div>
					</li>
				</ul>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>
<script setup>
import { defineProps } from 'vue'
const { proxy } = getCurrentInstance()
defineProps({
	data: {
		type: Array,
		default: [],
	},
})
console.log(proxy.data)
</script>
<style lang="scss">
.auxiliary {
	ul {
		padding: 0;
		margin: 0;
		li {
			list-style: none;
			padding: 15px 15px;
			background: #f1f1f1;
			overflow: hidden;
			margin-bottom: 10px;
			
			.list-box {
				float: left;
				width: 50%;
				padding: 0 5px;
				box-sizing: border-box;
				.label {
					width: 70px;
					text-align: right;
					color: #666;
					font-size: 14px;
					float: left;
					line-height: 30px;
				}
				.value {
					flex: 1;
					float: left;
					font-size: 14px;
					line-height: 30px;
					color: #333;
					width: calc(100% - 70px);
				}
				.color-bl{
					color: #0084FF;
					cursor: pointer;
				}
			}
		}
	}
}
</style>