52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
|
|
<template>
|
|
<view class="grid-card">
|
|
<view class="grid-card-title" v-if="title">{{title}}</view>
|
|
<view class="grid-card-content">
|
|
<slot />
|
|
<Rc-grid-item background="#fff" v-for="item in seat" :key="item"></Rc-grid-item>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ["title"],
|
|
data () {
|
|
return {
|
|
seat: [] // 占位
|
|
};
|
|
},
|
|
mounted () {
|
|
console.warn(this.$slots.default.length);
|
|
let num = this.$slots.default.length;
|
|
let yushu = num % 3;
|
|
if (yushu > 0) {
|
|
for (let i = 0; i < 3 - yushu; i++) {
|
|
this.seat.push(i);
|
|
}
|
|
}
|
|
},
|
|
components: {}
|
|
};
|
|
</script>
|
|
<style lang='scss'>
|
|
.grid-card {
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
.grid-card-title {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-indent: 40rpx;
|
|
border-bottom: 2rpx solid #f6f7f8;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
.grid-card-content {
|
|
background: #f6f7f8;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-gap: 2rpx;
|
|
}
|
|
}
|
|
</style> |