87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
<template>
|
|
<div class="content2" :style="styleColor">
|
|
<div class="wrap1" v-for="item in result">
|
|
<div class="wrap1_1">
|
|
<slot :name="Object.keys(item).find(x=>x.includes('l'))"></slot>
|
|
</div>
|
|
<div class="wrap1_2">
|
|
<slot :name="Object.keys(item).find(x=>x.includes('r'))"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup >
|
|
import {useSlots,ref,defineProps} from 'vue'
|
|
const slots = useSlots();
|
|
const prop=defineProps({
|
|
styleColor:{
|
|
type:Object,
|
|
default:()=>{
|
|
return {backgroundColor:'#fff'}
|
|
}
|
|
}
|
|
})
|
|
const groupObjectsByNumberKeys=(obj)=> {
|
|
const grouped = {};
|
|
for (const key in obj) {
|
|
const numericPart = key.slice(1);
|
|
if (!grouped[numericPart]) {
|
|
grouped[numericPart] = {};
|
|
}
|
|
grouped[numericPart][key] = obj[key];
|
|
}
|
|
return Object.values(grouped);
|
|
}
|
|
const result = ref(groupObjectsByNumberKeys(slots))
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.content2{
|
|
|
|
border-radius: 20rpx;
|
|
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{
|
|
padding-right: 30rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 192rpx;
|
|
border-right: 1rpx solid #E4EAF1;
|
|
.wrap1_1_1{
|
|
font-size: 24rpx;
|
|
color: #626262;
|
|
margin-right: 12rpx;
|
|
}
|
|
.wrap1_1_2{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 16rpx;
|
|
color: #fff;
|
|
width: 80rpx;
|
|
height: 28rpx;
|
|
background-color:#FFCD5C ;
|
|
border-radius: 24rpx;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|