You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

92 lines
2.1 KiB
Vue

9 months ago
<template>
<div class="content2" :style="styleColor">
<div class="wrap1">
<div class="wrap1_1">
<slot name="l1"></slot>
</div>
<div class="wrap1_2">
<slot name="r1"></slot>
</div>
</div>
<div class="wrap1">
<div class="wrap1_1">
<slot name="l2"></slot>
</div>
<div class="wrap1_2">
<slot name="r2"></slot>
</div>
</div>
<div class="wrap1">
<div class="wrap1_1">
<slot name="l3"></slot>
</div>
<div class="wrap1_2">
<slot name="r3"></slot>
</div>
</div>
<div class="wrap1">
<div class="wrap1_1">
<slot name="l4"></slot>
</div>
<div class="wrap1_2">
<slot name="r4"></slot>
</div>
</div>
<div class="wrap1">
<div class="wrap1_1">
<slot name="l5"></slot>
</div>
<div class="wrap1_2">
<slot name="r5"></slot>
</div>
</div>
</div>
</template>
<script >
export default {
props: {
styleColor: {
type: Object,
default: () => {
return { backgroundColor: '#fff' }
}
}
}
}
</script>
<style lang="scss" scoped>
.content2 {
border-radius: 24rpx;
padding-left: 18rpx;
padding-right: 32rpx;
.wrap1 {
padding-left: 14rpx;
padding-top: 26rpx;
padding-bottom: 22rpx;
border-bottom: 1rpx solid #E4EAF1;
display: flex;
&:last-child {
border-bottom: none;
}
.wrap1_2 {
flex-grow: 1;
padding-left: 36rpx;
font-size: 24rpx;
color: #939393;
}
.wrap1_1 {
display: flex;
align-items: center;
width: 192rpx;
border-right: 1rpx solid #E4EAF1;
}
}
}
</style>