92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
|
<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>
|