<template>
<view class="prefix-home_center_class">
<view class="prefix-container">
<view v-for="(item, index) in navList" :key="index" class="prefix-item">
<view :style="{ backgroundColor: item.color }" class="prefix-color-box"></view>
<view class="prefix-font_icon">{{ item.class_name }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
navList: [
{ class_name: '海鲜水产', color: '#ff0000' },
{ class_name: '新鲜水果', color: '#00ff00' },
{ class_name: '优品鲜蔬', color: '#0000ff' },
{ class_name: '米面粮油', color: '#ffff00' },
{ class_name: '肉类蛋禽', color: '#ff00ff' },
{ class_name: '厨具用品', color: '#00ffff' },
{ class_name: '高等预制', color: '#999999' },
{ class_name: '奶制品', color: '#ff9999' },
{ class_name: '调味干货', color: '#99ff99' },
{ class_name: '药食同源', color: '#9999ff' }
]
};
},
methods: {
toGoodsList(item, index) {
// Your method implementation here
}
}
};
</script>
<style>
.prefix-home_center_class {
padding: 16rpx;
}
.prefix-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.prefix-item {
width: 128rpx;
height: 148rpx;
background-color: #fff;
border-radius: 16rpx;
margin-bottom: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.prefix-color-box {
width: 60rpx;
height: 60rpx;
margin-bottom: 8rpx;
border-radius: 8rpx;
}
.prefix-font_icon {
font-size: 14rpx;
}
</style>
uniapp的小排版
最新推荐文章于 2024-08-19 17:04:41 发布