2025-09-18

修改主页菜单

pages/home/index.vue

@@ -6,62 +6,48 @@
 		<!-- 可滚动的内容区域 -->
 		<view class="content-container" :style="'height:'+height+'px'">
 
-			<u-swiper :list="list" name="url" height="324"></u-swiper>
+			<u-swiper class="u-m-t-60" :list="list" name="url" height="324"></u-swiper>
 
 			<view class="menu-list">
-				<swiper class="swiper">
+				<swiper class="swiper" @change="changeMenu">
 					<swiper-item>
-						<u-grid :col="4">
-							<u-grid-item>
-								<u-icon name="photo" :size="46"></u-icon>
-								<view class="grid-text">图片</view>
+						<u-grid :col="4" :border="false">
+							<u-grid-item bg-color="transparent">
+								<u-icon name="/static/home/1.png" :size="120"></u-icon>
+								<view class="grid-text">精选直播</view>
 							</u-grid-item>
-							<u-grid-item>
-								<u-icon name="lock" :size="46"></u-icon>
-								<view class="grid-text">锁头</view>
+							<u-grid-item bg-color="transparent">
+								<u-icon name="/static/home/2.png" :size="120"></u-icon>
+								<view class="grid-text">订单数据</view>
 							</u-grid-item>
-							<u-grid-item>
-								<u-icon name="hourglass" :size="46"></u-icon>
-								<view class="grid-text">沙漏</view>
+							<u-grid-item bg-color="transparent" @click="openMall">
+								<u-icon name="/static/home/3.png" :size="120"></u-icon>
+								<view class="grid-text">商城好物</view>
 							</u-grid-item>
-							<u-grid-item>
-								<u-icon name="hourglass" :size="46"></u-icon>
-								<view class="grid-text">沙漏</view>
+							<u-grid-item bg-color="transparent">
+								<u-icon name="/static/home/4.png" :size="120"></u-icon>
+								<view class="grid-text">获得积分</view>
 							</u-grid-item>
 						</u-grid>
 					</swiper-item>
 					<swiper-item>
-						<u-grid :col="4">
-							<u-grid-item>
-								<u-icon name="photo" :size="46"></u-icon>
-								<view class="grid-text">图片</view>
-							</u-grid-item>
-							<u-grid-item>
-								<u-icon name="lock" :size="46"></u-icon>
-								<view class="grid-text">锁头</view>
-							</u-grid-item>
-							<u-grid-item>
-								<u-icon name="hourglass" :size="46"></u-icon>
-								<view class="grid-text">沙漏</view>
+						<u-grid :col="4" :border="false">
+							<u-grid-item bg-color="transparent">
+								<u-icon name="/static/home/5.png" :size="120"></u-icon>
+								<view class="grid-text">微信读书</view>
 							</u-grid-item>
 						</u-grid>
 					</swiper-item>
 				</swiper>
 
 				<view class="indicator-dots">
-					<view class="indicator-dots-item indicator-dots-active">
+					<view class="indicator-dots-item" :class="current==0?'indicator-dots-active':''">
 					</view>
-					<view class="indicator-dots-item">
-					</view>
-					<view class="indicator-dots-item">
+					<view class="indicator-dots-item" :class="current==1?'indicator-dots-active':''">
 					</view>
 				</view>
 			</view>
 
-			<view style="margin-top: 20rpx;">
-				<u-button @click="openShop" type="primary" style="width: 200rpx;">商城</u-button>
-			</view>
-
 		</view>
 
 		<Tabbar id="tabbarId"></Tabbar>
@@ -94,8 +80,13 @@
 		{ url: '/static/banner/2.png' },
 		{ url: '/static/banner/3.png' },
 	]
-	
-	const openShop = () => {
+
+	const current = ref(0)
+	const changeMenu = (val : any) => {
+		current.value = val.detail.current
+	}
+
+	const openMall = () => {
 		uni.navigateTo({
 			url: '/pages/mall/mall'
 		})
@@ -139,14 +130,23 @@
 			// padding: 32rpx;
 
 			.menu-list {
+				border-top-left-radius: 32rpx;
+				border-top-right-radius: 32rpx;
+				box-shadow: 0rpx -8rpx 20rpx 0rpx #628AC080;
+				padding-bottom: 20rpx;
 
 				.swiper {
-					height: 170rpx;
+					height: 200rpx;
 
 					.grid-text {
+						font-family: Work Sans;
+						font-weight: 400;
+						font-style: Regular;
 						font-size: 28rpx;
-						margin-top: 4rpx;
-						color: $u-type-info;
+						leading-trim: NONE;
+						line-height: 32rpx;
+						letter-spacing: -2%;
+						text-align: center;
 					}
 				}