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