<template>
<zk-theme type="page" :padding="30" showBack navbarTitle="Grid宫格">
<!-- 基础宫格 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="primary" :size="32" weight="bold" margin="0 0 30rpx 0" text="基础宫格" align="center" />
<zk-grid :col="4" :border="false">
<zk-grid-item v-for="(item, index) in baseList" :key="index" @click="onClick">
<zk-image :src="item.avatar" mode="aspectFill" width="120" height="120" :radius="16" />
<zk-text type="third" :size="26" margin="10rpx 0 0 0" :text="item.name" align="center" />
</zk-grid-item>
</zk-grid>
</zk-theme>
<!-- 功能菜单 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="primary" :size="32" weight="bold" margin="0 0 30rpx 0" text="功能菜单" align="center" />
<zk-grid :col="4" :border="true">
<zk-grid-item v-for="(item, index) in menuList" :key="index">
<zk-icon :name="item.icon" :size="48" />
<zk-text type="third" :size="26" margin="16rpx 0 0 0" :text="item.name" align="center" />
</zk-grid-item>
</zk-grid>
</zk-theme>
<!-- 圆形头像 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="primary" :size="32" weight="bold" margin="0 0 30rpx 0" text="圆形头像" align="center" />
<zk-grid :col="3" :border="false">
<zk-grid-item v-for="(item, index) in circleList" :key="index">
<zk-image :src="item.avatar" mode="aspectFill" width="130" height="130" round />
<zk-text type="primary" :size="28" margin="10rpx 0 6rpx 0" :text="item.name" align="center" />
<zk-text type="secondary" :size="24" :text="item.desc" align="center" />
</zk-grid-item>
</zk-grid>
</zk-theme>
<!-- 卡片样式 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="primary" :size="32" weight="bold" margin="0 0 30rpx 0" text="卡片样式" align="center" />
<zk-grid :col="2" :border="false">
<zk-grid-item v-for="(item, index) in cardList" :key="index">
<zk-theme type="card1" :padding="20" :margin="20" :radius="12">
<view class="card-top">
<zk-image :src="item.avatar" mode="aspectFill" width="96" height="96" round />
<view class="card-info">
<zk-text type="primary" :size="28" margin="0 0 6rpx 0" :text="item.name" />
<zk-text type="secondary" :size="24" :text="item.title" />
</view>
</view>
<zk-text type="third" :size="26" margin="16rpx 0" :text="item.desc" />
<view class="card-footer">
<view class="" style="display: flex;">
<zk-text type="primary" :size="28" :text="item.count" />
</view>
<zk-tag size="mini" :type="item.status === 'online' ? 'success' : 'warning'"
:text="item.status === 'online' ? '在线' : '离线'" />
</view>
</zk-theme>
</zk-grid-item>
</zk-grid>
</zk-theme>
<!-- 带徽标的宫格 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="primary" :size="32" weight="bold" margin="0 0 30rpx 0" text="带徽标的宫格" align="center" />
<zk-grid :col="3" :border="false">
<zk-grid-item v-for="(item, index) in badgeList" :key="index">
<view class="badge-wrap">
<zk-image :src="item.avatar" mode="aspectFill" width="130" height="130" :radius="16" />
<zk-badge v-if="item.badge" :content="item.badge" type="danger" :offset="[6, 6]" />
</view>
<zk-text type="third" :size="26" margin="16rpx 0 0 0" :text="item.name" align="center" />
</zk-grid-item>
</zk-grid>
</zk-theme>
<!-- 商品列表 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="primary" :size="32" weight="bold" margin="0 0 30rpx 0" text="商品列表" align="center" />
<zk-grid :col="2" :border="false">
<zk-grid-item v-for="(item, index) in goodsList" :key="index">
<zk-theme type="card" :padding="20" :radius="12">
<zk-image :src="item.image" mode="aspectFill" width="300" height="340" :radius="16" />
<view class="goods-info">
<zk-text type="primary" :size="28" margin="16rpx 0 10rpx 0" :text="item.name" />
<zk-text type="secondary" :size="24" margin="0 0 20rpx 0" :text="item.desc" />
<view class="goods-bottom">
<zk-text type="primary" :size="32" weight="bold" :text="`¥${item.price}`" />
<zk-button type="primary" size="mini" text="购买" :radius="40" />
</view>
</view>
</zk-theme>
</zk-grid-item>
</zk-grid>
</zk-theme>
<!-- 图文卡片 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="primary" :size="32" weight="bold" margin="0 0 30rpx 0" text="图文卡片" align="center" />
<zk-grid :col="2" :border="false">
<zk-grid-item v-for="(item, index) in articleList" :key="index">
<zk-theme type="card" :padding="20" :radius="12">
<zk-image :src="item.cover" mode="aspectFill" width="320" height="260" :radius="16" />
<view class="article-info">
<zk-text type="primary" :size="28" margin="16rpx 0 12rpx 0" :text="item.title" />
<zk-text type="secondary" :size="24" margin="0 0 20rpx 0" :text="item.desc" />
<view class="article-footer">
<view class="article-author">
<zk-image :src="item.avatar" mode="aspectFill" width="44" height="44" round />
<zk-text type="third" :size="24" margin="0 0 0 12rpx" :text="item.author" />
</view>
<view class="">
<zk-text type="secondary" :size="22" :text="item.time" />
</view>
</view>
</view>
</zk-theme>
</zk-grid-item>
</zk-grid>
</zk-theme>
</zk-theme>
</template>
<script>
export default {
data() {
return {
// 保持原有的数据结构不变
baseList: [{
name: '用户1',
avatar: '/static/user/1.jpg'
},
{
name: '用户2',
avatar: '/static/user/2.jpg'
},
{
name: '用户3',
avatar: '/static/user/3.jpg'
},
{
name: '用户4',
avatar: '/static/user/4.jpg'
}
],
circleList: [{
name: '小明',
desc: '设计师',
avatar: '/static/user/1.jpg'
},
{
name: '小红',
desc: '工程师',
avatar: '/static/user/2.jpg'
},
{
name: '小张',
desc: '产品',
avatar: '/static/user/3.jpg'
}
],
cardList: [{
name: '张三',
title: '高级工程师',
desc: '负责前端开发工作，专注于用户体验',
avatar: '/static/user/1.jpg',
count: '1.2k粉丝',
status: 'online'
},
{
name: '李四',
title: '产品经理',
desc: '主导产品规划和功能设计',
avatar: '/static/user/2.jpg',
count: '3.5k粉丝',
status: 'offline'
}
],
badgeList: [{
name: '消息',
desc: '未读消息',
avatar: '/static/user/1.jpg',
badge: '99+'
},
{
name: '通知',
desc: '系统通知',
avatar: '/static/user/2.jpg',
badge: '12'
},
{
name: '评论',
desc: '新评论',
avatar: '/static/user/3.jpg',
badge: '5'
}
],
goodsList: [{
name: 'iPhone 14 Pro',
desc: '超视网膜XDR显示屏',
price: '7999',
image: '/static/user/1.jpg'
},
{
name: 'MacBook Pro',
desc: 'M2芯片 专业性能',
price: '12999',
image: '/static/user/2.jpg'
}
],
menuList: [{
name: '扫一扫',
icon: 'fullscreen-line'
},
{
name: '付款码',
icon: 'instagram-line'
},
{
name: '卡包',
icon: 'coupon-3-line'
},
{
name: '收藏',
icon: 'star-line'
}
],
articleList: [{
title: '如何提高开发效率？',
desc: '分享一些实用的开发技巧和工具...',
cover: '/static/user/1.jpg',
avatar: '/static/user/1.jpg',
author: '技术派',
time: '2小时前'
},
{
title: '设计趋势分析',
desc: '2024年UI设计的主要趋势...',
cover: '/static/user/2.jpg',
avatar: '/static/user/2.jpg',
author: '设计派',
time: '5小时前'
}
]
}
},
methods: {
onClick(index) {
uni.showToast({
title: `点击了第${index + 1}个格子`,
icon: 'none'
})
},
onGoodsClick(item) {
uni.showToast({
title: `点击了商品：${item.name}`,
icon: 'none'
})
},
onMenuClick(item) {
uni.showToast({
title: `点击了菜单：${item.name}`,
icon: 'none'
})
},
onArticleClick(item) {
uni.showToast({
title: `点击了文章：${item.title}`,
icon: 'none'
})
}
}
}
</script>
<style lang="scss">
/* 只保留必要的布局样式 */
.card-top {
flex-direction: row;
align-items: center;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
}
.card-info {
flex: 1;
margin-left: 20rpx;
}
.card-footer {
flex-direction: row;
align-items: center;
justify-content: space-between;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
}
.badge-wrap {
position: relative;
margin-bottom: 16rpx;
}
.goods-bottom {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.article-footer {
flex-direction: row;
align-items: center;
justify-content: space-between;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
}
.article-author {
flex-direction: row;
align-items: center;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
}
/* #ifdef APP-NVUE */
.demo-row {
flex-direction: row;
align-items: center;
}
/* #endif */
/* #ifndef APP-NVUE */
.demo-row {
display: flex;
flex-direction: row;
align-items: center;
}
/* #endif */
</style>