From 88bd4347d72af8f3543c2a724242b988b6448ce9 Mon Sep 17 00:00:00 2001 From: jiazhipeng Date: Mon, 14 Apr 2025 09:35:18 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=93=E9=A2=98=E6=94=B9=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- subPackages/activity/springTour.vue | 216 +++++++++++++++++----------- 1 file changed, 129 insertions(+), 87 deletions(-) diff --git a/subPackages/activity/springTour.vue b/subPackages/activity/springTour.vue index 0d1eed6..fcd9ab2 100644 --- a/subPackages/activity/springTour.vue +++ b/subPackages/activity/springTour.vue @@ -1,22 +1,16 @@ @@ -44,22 +49,37 @@ data() { return { couponList: [ - {id: 1, price:5, title: '满15减5'}, - {id: 2, price:10, title: '满30减10'}, - {id: 3, price:15, title: '满50减15'}, - {id: 4, price:20, title: '满60减20'}, + {id: 1, price:5, title: '满15减5',img: 'https://tongli.sz-trip.com/uploads/20250411/c94ac0d977b4767d2809134fdace5a62.png'}, + {id: 2, price:10, title: '满30减10',img: 'https://tongli.sz-trip.com/uploads/20250411/15a8af6400b71c5b7e2f8da78ead6f04.png'}, + {id: 3, price:15, title: '满50减15',img: 'https://tongli.sz-trip.com/uploads/20250411/529b589eec9ac511f13fadbdd8188f2c.png'}, + {id: 4, price:20, title: '满60减20',img: 'https://tongli.sz-trip.com/uploads/20250411/883734155ee9cbbbcee590194f6143be.png'}, ], list:[], finished: false, isReceive: true, + goTop: false } }, onReady() { this.getCouponId() this.getList() }, + onPageScroll(e){ + // 监听页面滚动 + if(e.scrollTop>200){ + this.goTop=true; + }else{ + this.goTop=false; + } + }, methods: { + Totop(){ + uni.pageScrollTo({ + scrollTop: 0,//滚动到页面的目标位置 + duration: 300 + }); + }, // 获取优惠券id getCouponId () { this.Post({id: 256},'/api/multimedia/detail').then(res=>{ @@ -140,43 +160,61 @@ } .bg { - background: #A2EEC0; + background: #AFEBB7; min-height: 100vh; - padding-bottom: 26rpx; + padding-bottom: 120rpx; + position: relative; } .topImg { width: 750rpx; - height: 440rpx; + height: 893.33rpx; + } + .rule{ + width: 58rpx; + height: 170rpx; + background: rgba(255,122,69,0.86); + border-radius: 7rpx 0rpx 0rpx 7rpx; + border: 2px solid #FF503B; + font-weight: 500; + font-size: 27rpx; + color: #FFFFFF; + text-align: center; + position: absolute; + top: 529rpx; + right: 0; + padding: 8rpx 14rpx 0; + line-height: 28rpx; } .box { margin-top: 50rpx; - // border-radius: 20rpx 20rpx 0rpx 0rpx; padding: 0 26rpx; - display: flex; - flex-wrap: wrap; - justify-content: space-between; } .item { margin-bottom: 22rpx; - width: 335rpx; - height: 448rpx; - background: #FFFFFF; - box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(153,153,153,0.38); - border-radius: 13rpx; + width: 100%; + height: 272.67rpx; + position: relative; } .item-img { - width: 100%; - height: 266.67rpx; - border-radius: 13rpx 13rpx 0rpx 0rpx; + width: 307rpx; + height: 100%; + background: #FA6216; + border-radius: 20rpx; } .content { - height: 145rpx; - padding: 0 13rpx 13.33rpx; + height: 100%; + width: 459rpx; + background: #FFFFFF; + border-radius: 20rpx; + position: absolute; + top: 0; + right: 0; + padding: 24rpx; display: flex; flex-direction: column; justify-content: space-between; @@ -184,10 +222,9 @@ .title { font-family: PingFang SC; - font-size: 29rpx; - color: #000000; - width: 291rpx; font-weight: 500; + font-size: 31rpx; + color: #00132F; } .bottom { @@ -195,31 +232,50 @@ justify-content: space-between; align-items: center; } - + .oldPrice{ + font-weight: 400; + font-size: 24rpx; + color: #66676A; + line-height: 15rpx; + text-decoration-line: line-through; + display: block; + } .price { font-size: 33.33rpx; font-family: PingFangSC; font-weight: bold; - color: #F40F0B; + color: #F75008; } .price::before { content: '￥'; font-size: 24rpx; } - .price::after { - content: '起'; - font-size: 20rpx; - color: #666; - font-weight: 400; + .tag-content { + display: flex; + width: 100%; + overflow: hidden; + margin-top: 20rpx; + .tag-item{ + border-radius: 20rpx; + border: 1px solid #FFA416; + font-weight: 500; + font-size: 24rpx; + color: #FFA416; + line-height: 23rpx; + padding:10rpx 20rpx; + flex-shrink: 0; + margin-right: 13rpx; + } } + .buy { - width: 151rpx; - height: 48rpx; - background: linear-gradient(180deg, #FB6493, #E2235B); - border-radius: 24rpx; + width: 107rpx; + height: 53rpx; + background: linear-gradient(90deg, #FF413B, #FFAB2E); + border-radius: 27rpx; text-align: center; - line-height: 48rpx; + line-height: 53rpx; font-family: PingFang SC; font-weight: bold; font-size: 27rpx; @@ -227,48 +283,34 @@ } .coupon-header{ - width: 589.33rpx; - height: 75.33rpx; + width: 450rpx; + height: 100rpx; display: block; margin: 0 auto; position: relative; - margin-top: 35rpx; z-index: 2; } .coupon-box{ width: 697rpx; - height: 413rpx; - background: #FFFDEB; + height: 597rpx; + background: #FFFFFF; border-radius: 20rpx; margin: -50rpx auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; - padding: 92rpx 17rpx 0; + padding: 62rpx 32rpx 0; position: relative; z-index: 1; - .rule{ - width: 83rpx; - height: 40rpx; - background: #27967B; - border-radius: 20rpx 0rpx 0rpx 20rpx; - font-weight: 500; - font-size: 25rpx; - color: #FFFFFF; - position: absolute; - top: 13rpx; - right: 0; - text-align: center; - line-height: 40rpx; - } + .coupon-item{ - width: 327.33rpx; - height: 120.67rpx; + width: 306.67rpx; + height: 233.33rpx; display: flex; - background-image: url("https://tongli.sz-trip.com/uploads/20250401/df0ba64e58d91457c062be571ea51b3e.png"); background-size: 100% 100%; + margin-bottom: 24rpx; } .coupon-price{ font-weight: 600; @@ -287,16 +329,16 @@ flex: 1; } .coupon-btn{ - width: 133rpx; - height: 40rpx; - background: linear-gradient(180deg, #FB6493, #E2235B); - border-radius: 20rpx; - font-weight: bold; - font-size: 24rpx; - color: #FFFFFF; - text-align: center; - line-height: 40rpx; + width: 205.33rpx; + height: 48.67rpx; + margin: 161rpx auto 0; } } - + .goTopImg{ + width: 102rpx; + height: 102rpx; + position: fixed; + right: 28rpx; + bottom: 48rpx; + }