Browse Source

图片换成banner

tanxue 1 day ago
parent
commit
b5bf9b6aed
2 changed files with 41 additions and 8 deletions
  1. 6 6
      common/styles/global/pages.scss
  2. 35 2
      pages/chanpinMy/my.vue

+ 6 - 6
common/styles/global/pages.scss

@@ -1490,9 +1490,10 @@
 		.head-content-box{font-size: 30rpx;}
 	}
 
-	.my-banner-img{
-		width: 730rpx;height: 413rpx;@include ezy-no-repeat-cover;margin: 0 auto;
-		background-image: url("@/static/images/phone/my/my-banner.png");border-radius: 16rpx;
+	.my-hyqy-swiper{
+		width: 710rpx;height: 402rpx;margin: 0 auto;border-radius: 12rpx;overflow: hidden;
+		.uni-swiper-dots-horizontal{bottom: 24rpx;}
+		.my-banner-img{max-width: 100%;}
 	}
 
 	// list
@@ -1525,8 +1526,7 @@
 			.head-img-box{width: 130rpx;height: 130rpx;margin: 0 16rpx 0 8rpx;}
 			.head-content-box{font-size: 28rpx;}
 		}
-		.my-banner-img{width: 712rpx;height: 300rpx;border-radius: 10rpx;
-		background-image: url("@/static/images/pad/my/my-banner.png");}
+		.my-hyqy-swiper{width: 712rpx;height: 300rpx;border-radius: 10rpx;}
 		.my-list-box{
 			width: 712rpx;margin: 16rpx auto;padding: 30rpx 4rpx 0;border-radius: 16rpx;
 			justify-content: space-around;
@@ -1548,7 +1548,7 @@
 			.head-img-box{width: 350rpx;height: 350rpx;margin: 0 38rpx 0 19rpx;}
 			.head-content-box{font-size: 66rpx;}
 		}
-		.my-banner-img{width: 1940rpx;height: 818rpx;border-radius: 26rpx;}
+		.my-hyqy-swiper{width: 1940rpx;height: 818rpx;border-radius: 26rpx;}
 		.my-list-box{
 			width: 1940rpx;margin: 38rpx auto;padding: 75rpx 10rpx 0;border-radius: 26rpx;
 			.list-item{font-size: 45rpx;margin-bottom: 75rpx;}

+ 35 - 2
pages/chanpinMy/my.vue

@@ -14,8 +14,26 @@
 					</view> -->
 				</view>
 			</view>
-			<!-- 图 -->
-			<view class="my-banner-img"></view>
+			<!-- 手机banner图 -->
+			<swiper class="my-hyqy-swiper ezy-hidden-pad" circular :indicator-dots="hyqyData.indicatorDots" :autoplay="hyqyData.autoplay"
+				:interval="hyqyData.interval" :duration="hyqyData.duration" indicator-color="#5195d3"
+				indicator-active-color="#83d9ff" v-if="bannerArr">
+				<!-- 1.数学 2.英语-->
+				<swiper-item v-for="(item, index) in bannerArr" :key="index" class="hyqy-box" @click="hyqyBtn(item)">
+					<img :src="item.addCover" class="my-banner-img" />
+				</swiper-item>
+			</swiper>
+			<!-- padbanner图 -->
+			<swiper class="my-hyqy-swiper ezy-hidden-phone" circular :indicator-dots="hyqyData.indicatorDots" :autoplay="hyqyData.autoplay"
+				:interval="hyqyData.interval" :duration="hyqyData.duration" indicator-color="#5195d3"
+				indicator-active-color="#83d9ff" v-if="bannerArr">
+				<!-- 1.数学 2.英语-->
+				<swiper-item v-for="(item, index) in bannerPadArr" :key="index" class="hyqy-box" @click="hyqyBtn(item)">
+					<img :src="item.addCover" class="my-banner-img" />
+				</swiper-item>
+			</swiper>
+			
+			<!-- <view class="my-banner-img"></view> -->
 
 			<!-- 设置 -->
 			<view class="my-list-box">
@@ -96,6 +114,21 @@
 	let pageFrom = ref(null)
   const goLoRef = ref(null)
   let tishiTxt = ref('您现在是游客身份,请先登录再进行兑换操作!')
+  // banner
+  let hyqyData = reactive({
+  	indicatorDots: true,
+  	autoplay: true,
+  	interval: 10000,
+  	duration: 500
+  });
+  const bannerArr = ref([
+    { addCover: 'static/images/phone/my/my-banner1.png' }, // 替换为实际图片路径
+    { addCover: 'static/images/phone/my/my-banner2.png' }  // 替换为实际图片路径
+  ]);
+  const bannerPadArr = ref([
+    { addCover: 'static/images/pad/my/my-banner1.png' }, // 替换为实际图片路径
+    { addCover: 'static/images/pad/my/my-banner2.png' }  // 替换为实际图片路径
+  ]);
 
 	onShow(() => {
 		console.log('pageFrom.value', pageFrom.value);