<template>
<view>
<image class="respon-image" :src="isIcon" mode="aspectFit"></image>
<view class="container">
<view class="functional-entry" v-for="(entry, index) in Controllist" :key="entry.id">
<image class="icon" :src="entry.img" mode="aspectFit"></image>
<text class="text" :style="{ lineHeight: lineHeightStyle }">{{ entry.name }}</text>
</view>
<view v-for="n in getSpaces" :key="'space-${n}'" class="functional-entry space"></view>
</view>
</view>
</template>
<script setup>
const isIcon = ref("/static/control_back.png");
const Controllist = ref([
{ id: '1', name: '1', img: '/static/control1.png' },
{ id: '2', name: '2', img: '/static/control2.png' },
{ id: '3', name: '3', img: '/static/control3.png' },
{ id: '4', name: '4', img: '/static/control4.png' },
{ id: '5', name: '5', img: '/static/control1.png' },
{ id: '6', name: '6', img: '/static/control1.png' },
{ id: '7', name: '7', img: '/static/control1.png' }
]);
const lineHeightStyle = computed(() => '1.5em'); // 例如,设置为字体大小的1.5倍
const getSpaces = computed(() => {
const spaces = [];
const entriesCount = Controllist.value.length;
const rows = Math.ceil(entriesCount / 4);
for (let i = 0; i < rows; i++) {
const spacesPerRow = 4 - (entriesCount - i * 4);
for (let j = 0; j < spacesPerRow; j++) {
spaces.push(null); // 添加占位符null
}
}
return spaces;
});
</script>
<style lang="scss" scoped>
.respon-image {
width: 100%;
height: 210px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
}
.functional-entry {
display: flex;
flex-direction: column;
align-items: center;
flex-basis: 24%;
margin-bottom: 20px;
}
.functional-entry.space {
flex-basis: 24%;
height: 0;
padding-bottom: 100%;
}
.icon {
width: 50px;
height: 50px;
margin-bottom: 5px;
}
.text {
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
line-height: 1.5em; /* 使用计算属性设置行高 */
}
</style>
04-29
01-17
1962
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
03-20
1932
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)