outsource/mahjong_group
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改首页

Browse Source
This commit is contained in:
zpc 2025-09-10 23:11:48 +08:00
parent 4b6f7641b6
commit 56f89e9ae2
8 changed files with 471 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

560
components/index/MahjongCard.vue
View File

@ -1,309 +1,333 @@
<template>
<view class="grid-item" @click="handleCardClick">
<uni-card margin="0px" padding="0px" spacing="0px">
<view
style="position:absolute;top:0;right:0;width:100%; background: linear-gradient(to bottom, rgba(255, 108, 0, 0.9), rgba(255, 108, 0, 0.7));box-shadow: 0 2px 8px rgba(235,135,58, 0.3);z-index:999;border-radius:4px 4px 0 0;font-size:24rpx;color:#fff;font-weight: 500; opacity: 0.7;">
<text style="padding-left:10rpx;">{{ item.status }}</text>
</view>
<view class="item-content column">
<!-- 麻将桌区域 -->
<view class="mahjong-table">
<!-- 九宫格布局 -->
<view style="width:300rpx;height: 300rpx;">
<view class="nine-grid-container">
<!-- 第一行 -->
<view class="grid-cell"></view>
<view class="grid-cell" :class="getCellClass(0)">
<view v-if="getPlayerAtPosition(0)" class="player-avatar">
<image :src="getPlayerAtPosition(0).avatar || ''" class="avatar-img"></image>
</view>
<view v-else-if="canJoinAtPosition(0)" class="join-button" @click.stop="handleJoin">
<text class="join-text">+</text>
</view>
</view>
<view class="grid-cell"></view>
<!-- 第二行 -->
<view class="grid-cell" :class="getCellClass(1)">
<view v-if="getPlayerAtPosition(1)" class="player-avatar">
<image :src="getPlayerAtPosition(1).avatar || ''" class="avatar-img"></image>
</view>
<view v-else-if="canJoinAtPosition(1)" class="join-button" @click.stop="handleJoin">
<text class="join-text">+</text>
</view>
</view>
<view class="grid-cell center-cell">
<!-- 麻将桌背景图 -->
<image src="/static/9.png" class="table-bg" mode=""></image>
</view>
<view class="grid-cell" :class="getCellClass(2)">
<view v-if="getPlayerAtPosition(2)" class="player-avatar">
<image :src="getPlayerAtPosition(2).avatar || ''" class="avatar-img"></image>
</view>
<view v-else-if="canJoinAtPosition(2)" class="join-button" @click.stop="handleJoin">
<text class="join-text">+</text>
</view>
</view>
<!-- 第三行 -->
<view class="grid-cell"></view>
<view class="grid-cell" :class="getCellClass(3)">
<view v-if="getPlayerAtPosition(3)" class="player-avatar">
<image :src="getPlayerAtPosition(3).avatar || ''" class="avatar-img"></image>
</view>
<view v-else-if="canJoinAtPosition(3)" class="join-button" @click.stop="handleJoin">
<text class="join-text">+</text>
</view>
</view>
<view class="grid-cell"></view>
<view class="grid" @click="handleCardClick">
<view class="grid-item">
<view style="height: 251rpx;">
<view class="nine-grid-container">
<view></view>
<view class="item">
<view class="item-avatar">
<image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
</image>
</view>
</view>
</view>
<!-- 信息区域 -->
<view class="info-section">
<text class="info-text" style="font-size: 26rpx;font-weight: 600;color: #FA690B;">{{
item.description }}</text>
<text class="info-text" style="margin-top: -7rpx;">{{ item.room }}</text>
<text class="info-text" style="font-size: 22rpx;font-weight: 600;line-height:28rpx;">2025-09-06</text>
<text class="info-text" style="font-size: 22rpx;font-weight: 600;line-height:28rpx;">{{ item.time }}</text>
<text class="info-text" style="color:#FA690B;line-height:30rpx;margin-top:6rpx;">{{ item.requirements }}</text>
<view></view>
<view class="item">
<view class="item-avatar">
<image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
</image>
</view>
</view>
<view></view>
<view class="item">
<view class="item-avatar">
<image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
</image>
</view>
</view>
<view></view>
<view class="item">
<view class="item-avatar">
<image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
</image>
</view>
</view>
<view></view>
</view>
</view>
</uni-card>
<view style="width: 100%;display: flex;align-items: center;justify-content: center;">
<view style="width: 90%;">
<view
style="color: #000000;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 28rpx;text-align: left;font-style: normal;text-transform: none;">
{{item.description}}
</view>
<view
style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 18rpx;color: #575757;text-align: left;font-style: normal;text-transform: none;">
{{item.time}}
</view>
<view
style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 18rpx;color: #575757;text-align: left;font-style: normal;text-transform: none;">
{{item.room}}
</view>
<view
style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 18rpx;color: #575757;text-align: left;font-style: normal;text-transform: none;">
{{item.requirements}}
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { defineProps, defineEmits, computed } from 'vue'
import {
defineProps,
defineEmits,
computed
} from 'vue'
// 定义 props
const props = defineProps({
item: {
type: Object,
required: true,
default: () => ({
id: '',
status: '',
description: '',
time: '',
room: '',
requirements: '',
personCount: 4,//总人数
joinPerson: [
{
// 定义 props
const props = defineProps({
item: {
type: Object,
required: true,
default: () => ({
id: '',
status: '',
description: '',
time: '',
room: '',
requirements: '',
personCount: 4, //总人数
joinPerson: [{
id: 1,
name: '张三',
avatar: '',
phone: '',
}
],//已加入人
})
}
})
// 定义 emits
const emit = defineEmits(['click', 'join'])
// 计算属性：获取玩家位置布局
const playerPositions = computed(() => {
const { personCount, joinPerson } = props.item
const joinedCount = joinPerson.length
// 根据总人数确定布局
if (personCount === 2) {
// 2人局：第二行左边和右边
return {
positions: [null, joinPerson[0] || null, joinPerson[1] || null, null],
joinPositions: [null, !joinPerson[0], !joinPerson[1], null]
}], //已加入人
})
}
} else if (personCount === 3) {
// 3人局：第一行中间、第二行左边和右边
return {
positions: [joinPerson[2] || null, joinPerson[0] || null, joinPerson[1] || null, null],
joinPositions: [!joinPerson[2], !joinPerson[0], !joinPerson[1], null]
})
// 定义 emits
const emit = defineEmits(['click', 'join'])
// 计算属性：获取玩家位置布局
const playerPositions = computed(() => {
const {
personCount,
joinPerson
} = props.item
const joinedCount = joinPerson.length
// 根据总人数确定布局
if (personCount === 2) {
// 2人局：第二行左边和右边
return {
positions: [null, joinPerson[0] || null, joinPerson[1] || null, null],
joinPositions: [null, !joinPerson[0], !joinPerson[1], null]
}
} else if (personCount === 3) {
// 3人局：第一行中间、第二行左边和右边
return {
positions: [joinPerson[2] || null, joinPerson[0] || null, joinPerson[1] || null, null],
joinPositions: [!joinPerson[2], !joinPerson[0], !joinPerson[1], null]
}
} else {
// 4人局：标准布局（上、左、右、下）
return {
positions: [
joinPerson[2] || null, // 第一行中间
joinPerson[0] || null, // 第二行左边
joinPerson[1] || null, // 第二行右边
joinPerson[3] || null // 第三行中间
],
joinPositions: [
!joinPerson[2], // 第一行中间
!joinPerson[0], // 第二行左边
!joinPerson[1], // 第二行右边
!joinPerson[3] // 第三行中间
]
}
}
} else {
// 4人局：标准布局（上、左、右、下）
return {
positions: [
joinPerson[2] || null, // 第一行中间
joinPerson[0] || null, // 第二行左边
joinPerson[1] || null, // 第二行右边
joinPerson[3] || null // 第三行中间
],
joinPositions: [
!joinPerson[2], // 第一行中间
!joinPerson[0], // 第二行左边
!joinPerson[1], // 第二行右边
!joinPerson[3] // 第三行中间
]
})
// 获取指定位置的玩家
const getPlayerAtPosition = (position) => {
return playerPositions.value.positions[position]
}
// 判断指定位置是否可以加入
const canJoinAtPosition = (position) => {
const {
personCount,
joinPerson
} = props.item
const joinedCount = joinPerson.length
// 如果已满员，不能加入
if (joinedCount >= personCount) {
return false
}
}
})
// 获取指定位置的玩家
const getPlayerAtPosition = (position) => {
return playerPositions.value.positions[position]
}
// 判断指定位置是否可以加入
const canJoinAtPosition = (position) => {
const { personCount, joinPerson } = props.item
const joinedCount = joinPerson.length
// 如果已满员，不能加入
if (joinedCount >= personCount) {
return false
// 直接使用计算属性中的 joinPositions
return playerPositions.value.joinPositions[position]
}
// 直接使用计算属性中的 joinPositions
return playerPositions.value.joinPositions[position]
}
// 获取单元格样式类
const getCellClass = (position) => {
if (getPlayerAtPosition(position)) {
return 'player-cell'
} else if (canJoinAtPosition(position)) {
return 'join-cell'
// 获取单元格样式类
const getCellClass = (position) => {
if (getPlayerAtPosition(position)) {
return 'player-cell'
} else if (canJoinAtPosition(position)) {
return 'join-cell'
}
return ''
}
return ''
}
// 处理卡片点击事件
const handleCardClick = () => {
emit('click', props.item)
}
// 处理卡片点击事件
const handleCardClick = () => {
emit('click', props.item)
}
// 处理加入按钮点击事件
const handleJoin = () => {
emit('join', props.item)
}
// 处理加入按钮点击事件
const handleJoin = () => {
emit('join', props.item)
}
</script>
<style lang="scss" scoped>
.item-content {
height: 540rpx;
color: white;
border-radius: 10rpx;
font-size: 32rpx;
}
.grid {
width: 100%;
display: flex;
align-content: center;
justify-content: center;
}
.mahjong-table {
width: 100%;
background-color: #D4D4D4;
border-radius: 10rpx 10rpx 0 0;
display: flex;
justify-content: center;
}
.grid-item {
width: 320rpx;
height: 400rpx;
background: #FFFFFF;
box-shadow: -4rpx 12rpx 7rpx 0rpx rgba(0, 0, 0, 0.25);
border-radius: 27rpx 27rpx 27rpx 27rpx;
border: 4rpx solid #006C1A
}
.status-tag {
position: absolute;
left: 15rpx;
top: 15rpx;
font-size: 16rpx;
color: black;
z-index: 10;
}
.item-content {
height: 540rpx;
color: white;
border-radius: 10rpx;
font-size: 32rpx;
}
/* 九宫格容器 */
.nine-grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width: 100%;
height: 100%;
padding: 20rpx;
box-sizing: border-box;
}
.item {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}
/* 网格单元格 */
.grid-cell {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.item-avatar {
width: 60rpx;
height: 60rpx;
background-color: #60AA72;
border-radius: 50rpx;
}
/* 玩家头像单元格 */
.player-cell {
display: flex;
align-items: center;
justify-content: center;
}
.mahjong-table {
width: 100%;
background-color: #D4D4D4;
border-radius: 10rpx 10rpx 0 0;
display: flex;
justify-content: center;
}
/* 中心单元格（麻将桌） */
.center-cell {
display: flex;
align-items: center;
justify-content: center;
}
.status-tag {
position: absolute;
left: 15rpx;
top: 15rpx;
font-size: 16rpx;
color: black;
z-index: 10;
}
/* 加入按钮单元格 */
.join-cell {
display: flex;
align-items: center;
justify-content: center;
}
/* 九宫格容器 */
.nine-grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width: 100%;
height: 100%;
box-sizing: border-box;
background: url('@@:app/static/index_logo.png') no-repeat center center;
background-size: 50%;
}
/* 麻将桌背景图 */
.table-bg {
width: 80rpx;
height: 80rpx;
}
/* 网格单元格 */
.grid-cell {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* 玩家头像 */
.player-avatar {
width: 60rpx;
height: 60rpx;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
/* 玩家头像单元格 */
.player-cell {
display: flex;
align-items: center;
justify-content: center;
}
.avatar-img {
width: 100%;
height: 100%;
background-color: aqua;
border-radius: 50%;
}
/* 中心单元格（麻将桌） */
.center-cell {
display: flex;
align-items: center;
justify-content: center;
}
/* 加入按钮 */
.join-button {
width: 60rpx;
height: 60rpx;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.3s ease;
}
/* 加入按钮单元格 */
.join-cell {
display: flex;
align-items: center;
justify-content: center;
}
.join-button:hover {
transform: scale(1.1);
background-color: #f0f0f0;
}
/* 麻将桌背景图 */
.table-bg {
width: 80rpx;
height: 80rpx;
}
.join-text {
color: black;
font-size: 24rpx;
font-weight: bold;
}
/* 玩家头像 */
.player-avatar {
width: 60rpx;
height: 60rpx;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.info-section {
padding: 10rpx;
}
.avatar-img {
.info-text {
font-size: 24rpx;
color: black;
display: block;
}
</style>
border-radius: 50%;
width: 60rpx;
height: 60rpx;
}
/* 加入按钮 */
.join-button {
width: 60rpx;
height: 60rpx;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.3s ease;
}
.join-button:hover {
transform: scale(1.1);
background-color: #f0f0f0;
}
.join-text {
color: black;
font-size: 24rpx;
font-weight: bold;
}
.info-section {
padding: 10rpx;
}
.info-text {
font-size: 24rpx;
color: black;
display: block;
}
</style>

354
pages/index/index.vue
View File

@ -4,10 +4,13 @@
<z-paging ref="pagePaging" v-model="dataList" @query="queryList" :refresher-enabled="true"
:loading-more-enabled="true" :auto="true" :empty-view-text="'暂无麻将局数据'" :empty-view-img="'/static/empty.png'"
:refresher-threshold="80" :loading-more-threshold="50" style="flex: 1; width: 95%; margin-top: 10rpx;">
<view style="z-index: 100;position: sticky;top :0;">
<view :style="{ height: statusBarHeight + 'px' }" style="background-color: #fff;" class="status-bar">
<template #top>
<view style="z-index: 100;position: sticky;top :0;">
<view :style="{ height: statusBarHeight + 'px' }" style="background-color: #fff;"
class="status-bar">
</view>
</view>
</view>
</template>
<view style="z-index: 100;margin-top:10rpx;height:532rpx;">
<view style="width: 100%;width:100%;display:flex;justify-content: center;"
@ -16,7 +19,8 @@
<swiper class="img-swiper" :indicator-dots="false" circular autoplay interval="3000">
<swiper-item v-for="(item, index) in homeData.advertList" :key="index">
<image :src="item.imageUrl" mode="scaleToFill" class="slide-img"
style="border-radius:25rpx;"> </image>
style="border-radius:25rpx;">
</image>
</swiper-item>
</swiper>
</view>
@ -174,195 +178,195 @@
</template>
<script setup>
import {
ref,
reactive,
onMounted
} from 'vue'
import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import MahjongCard from '@/components/index/MahjongCard.vue'
import {
homeData,
preloadHomeData
} from '@/common/server/index'
import {
configData,
getConfigData,
preloadConfigData
} from '@/common/server/config'
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
const getBackgroundImg = () => {
return {
background: `url(${configData.value.config.defaultImage}) 100% 100% `,
backgroundSize: '100%',
backgroundRepeat: "no-repeat",
backgroundRepeatX: "0px",
backgroundSize: "100%",
backgroundRepeatY: "0px",
backgroundPositionX: "0px",
backgroundPositionY: statusBarHeight.value + "px",
};
}
// 响应式数据
const title = ref('Hello')
const imgList = ref([1, 2, 3, 4, 5])
const dataList = ref([]) // 分页数据列表
const rateValue = ref(3.5)
const mockData = ref([]) // 模拟数据源
import {
ref,
reactive,
onMounted
} from 'vue'
import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import MahjongCard from '@/components/index/MahjongCard.vue'
import {
homeData,
preloadHomeData
} from '@/common/server/index'
import {
configData,
getConfigData,
preloadConfigData
} from '@/common/server/config'
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
const getBackgroundImg = () => {
return {
background: `url(${configData.value.config.defaultImage}) 100% 100% `,
backgroundSize: '100%',
backgroundRepeat: "no-repeat",
backgroundRepeatX: "0px",
backgroundSize: "100%",
backgroundRepeatY: "0px",
backgroundPositionX: "0px",
backgroundPositionY: statusBarHeight.value + "px",
};
}
// 响应式数据
const title = ref('Hello')
const imgList = ref([1, 2, 3, 4, 5])
const dataList = ref([]) // 分页数据列表
const rateValue = ref(3.5)
const mockData = ref([]) // 模拟数据源
// 组件引用
const pagePaging = ref(null)
const cardInfo = ref(null)
const userInfo = ref(null)
// 组件引用
const pagePaging = ref(null)
const cardInfo = ref(null)
const userInfo = ref(null)
// 初始化模拟数据
const initMockData = () => {
mockData.value = []
for (let i = 1; i <= 50; i++) {
// 随机生成不同人数的麻将局
const personCount = [2, 3, 4][Math.floor(Math.random() * 3)]
const joinedCount = Math.floor(Math.random() * (personCount + 1))
// 初始化模拟数据
const initMockData = () => {
mockData.value = []
for (let i = 1; i <= 50; i++) {
// 随机生成不同人数的麻将局
const personCount = [2, 3, 4][Math.floor(Math.random() * 3)]
const joinedCount = Math.floor(Math.random() * (personCount + 1))
// 生成已加入的玩家
const joinPerson = []
for (let j = 0; j < joinedCount; j++) {
joinPerson.push({
id: j + 1,
name: `玩家${j + 1}`,
avatar: '',
phone: `138****${String(j + 1).padStart(4, '0')}`
})
}
mockData.value.push({
id: i,
title: `麻将局 ${i}`,
status: joinedCount >= personCount ? '已满员' : '组局中',
time: '20：00 ~ 04：30 共8小时30分钟',
room: `304包厢-大包，${personCount}人`,
description: '休闲局，随便来',
requirements: '麻将、斗地主、不可吸烟、性别不限、信誉≧4.0',
personCount: personCount,
joinPerson: joinPerson
// 生成已加入的玩家
const joinPerson = []
for (let j = 0; j < joinedCount; j++) {
joinPerson.push({
id: j + 1,
name: `玩家${j + 1}`,
avatar: '',
phone: `138****${String(j + 1).padStart(4, '0')}`
})
}
}
// 分页查询方法
const queryList = (pageNo, pageSize) => {
console.log(`加载第${pageNo}页，每页${pageSize}条数据`)
// 模拟网络请求延迟
setTimeout(() => {
const startIndex = (pageNo - 1) * pageSize
const endIndex = startIndex + pageSize
const pageData = mockData.value.slice(startIndex, endIndex)
// 调用 z-paging 的完成方法
pagePaging.value.complete(pageData)
// 如果是第一页，显示加载完成提示
// if (pageNo === 1) {
// uni.showToast({
// title: '刷新成功',
// icon: 'success',
// duration: 1500
// })
// }
}, 100) // 模拟1秒网络延迟
}
// 手动刷新
const refreshData = () => {
pagePaging.value.reload()
}
// 清空数据
const clearData = () => {
pagePaging.value.clear()
}
// 弹窗相关方法
const openPop = () => {
cardInfo.value.open()
}
const clasePop = () => {
cardInfo.value.close()
}
const openUserPop = () => {
userInfo.value.open()
}
const closeUserPop = () => {
userInfo.value.close()
}
const onChange = (e) => {
console.log('rate发生改变:' + JSON.stringify(e))
}
// 处理加入麻将局事件
const handleJoin = (item) => {
console.log('加入麻将局:', item)
// 这里可以添加加入逻辑，比如调用API
uni.showToast({
title: '加入成功',
icon: 'success',
duration: 1500
mockData.value.push({
id: i,
title: `麻将局 ${i}`,
status: joinedCount >= personCount ? '已满员' : '组局中',
time: '20：00 ~ 04：30 共8小时30分钟',
room: `304包厢-大包，${personCount}人`,
description: '休闲局，随便来',
requirements: '麻将、斗地主、不可吸烟、性别不限、信誉≧4.0',
personCount: personCount,
joinPerson: joinPerson
})
}
}
// 生命周期
onMounted(() => {
// 初始化模拟数据
initMockData()
// 分页查询方法
const queryList = (pageNo, pageSize) => {
console.log(`加载第${pageNo}页，每页${pageSize}条数据`)
// 模拟网络请求延迟
setTimeout(() => {
const startIndex = (pageNo - 1) * pageSize
const endIndex = startIndex + pageSize
const pageData = mockData.value.slice(startIndex, endIndex)
// 调用 z-paging 的完成方法
pagePaging.value.complete(pageData)
// 如果是第一页，显示加载完成提示
// if (pageNo === 1) {
// uni.showToast({
// title: '刷新成功',
// icon: 'success',
// duration: 1500
// })
// }
}, 100) // 模拟1秒网络延迟
}
// 手动刷新
const refreshData = () => {
pagePaging.value.reload()
}
// 清空数据
const clearData = () => {
pagePaging.value.clear()
}
// 弹窗相关方法
const openPop = () => {
cardInfo.value.open()
}
const clasePop = () => {
cardInfo.value.close()
}
const openUserPop = () => {
userInfo.value.open()
}
const closeUserPop = () => {
userInfo.value.close()
}
const onChange = (e) => {
console.log('rate发生改变:' + JSON.stringify(e))
}
// 处理加入麻将局事件
const handleJoin = (item) => {
console.log('加入麻将局:', item)
// 这里可以添加加入逻辑，比如调用API
uni.showToast({
title: '加入成功',
icon: 'success',
duration: 1500
})
}
onLoad(async () => {
if (!homeData.value) preloadHomeData();
if (!configData.value) preloadConfigData();
});
// 生命周期
onMounted(() => {
// 初始化模拟数据
initMockData()
})
onLoad(async () => {
if (!homeData.value) preloadHomeData();
if (!configData.value) preloadConfigData();
});
</script>
<style lang="scss">
.content {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
.content {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
}
.img-swiper {
width: 100%;
height: 386rpx;
}
.img-swiper {
width: 100%;
height: 386rpx;
}
.slide-img {
width: 100%;
height: 100%;
.slide-img {
width: 100%;
height: 100%;
}
}
/* 网格容器 - 2列布局 */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* 2列，每列宽度相等 */
gap: 20rpx;
/* 网格间距（行列间距相同） */
padding: 0 15rpx;
}
/* 网格容器 - 2列布局 */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* 2列，每列宽度相等 */
gap: 20rpx;
/* 网格间距（行列间距相同） */
padding: 0 15rpx;
}
/* 网格项内容 */
.item-content {
height: 630rpx;
// background-color: #E6E6E6;
color: white;
border-radius: 10rpx;
font-size: 32rpx;
}
/* 网格项内容 */
.item-content {
height: 630rpx;
// background-color: #E6E6E6;
color: white;
border-radius: 10rpx;
font-size: 32rpx;
}
</style>

BIN
static/tabbar/appointment.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/tabbar/appointment_s.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
static/tabbar/home.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
static/tabbar/home_s.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
static/tabbar/me.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
static/tabbar/me_s.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB