|
@@ -171,15 +171,15 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <u-popup :show="liveItem.goodsCard?.isShow" @close="!liveItem.goodsCard?.isShow" round='20rpx'
|
|
|
- mode="center" bgColor='#ffffff'>
|
|
|
+ <u-popup :show="liveItem.goodsCard?.isShowGoods" @close="!liveItem.goodsCard?.isShowGoods"
|
|
|
+ round='20rpx' mode="center" bgColor='#ffffff'>
|
|
|
<view class="goods">
|
|
|
<view class="top">
|
|
|
<view class="left">
|
|
|
<image class="w30 h30 mr8" src="/static/images/signal.png"></image>讲解中
|
|
|
</view>
|
|
|
<image class="w30 h30" src="/static/images/close.png"
|
|
|
- @click="liveItem.goodsCard.isShow=false"></image>
|
|
|
+ @click="liveItem.goodsCard.isShowGoods=false"></image>
|
|
|
</view>
|
|
|
<image class="photo" :src="liveItem.goodsCard?.imgUrl"></image>
|
|
|
<view class="item">
|
|
@@ -194,77 +194,8 @@
|
|
|
</u-popup>
|
|
|
|
|
|
<!-- 抽奖 -->
|
|
|
- <u-popup :show="isShowLotteryPop" @close="!isShowLotteryPop" round='40rpx'>
|
|
|
- <view class="prize-box" style="border-radius: 40rpx;height: fit-content;">
|
|
|
- <image class="nav-img " src="/static/images/red_head.png" mode="widthFix"></image>
|
|
|
- <image class="bg-img " src="/static/images/red_bg.png"></image>
|
|
|
- <view class="prize-content">
|
|
|
- <view class="u-flex-row-reverse u-flex mr20">
|
|
|
- <u-icon name="close" color="#fff" size="20"
|
|
|
- @click="isShowLotteryPop=false"></u-icon>
|
|
|
- </view>
|
|
|
- <view class="column align-center ">
|
|
|
- <image class="w446 h80" src="/static/images/red_title.png"></image>
|
|
|
- <view class="fs24 colorf u-flex-y-center mt30 mb30">
|
|
|
- 52人已参与,开奖倒计时
|
|
|
- <view class="white-item">14</view>:
|
|
|
- <view class="white-item">344</view>:
|
|
|
- <view class="white-item">44</view>
|
|
|
- </view>
|
|
|
- <!-- <view class="item-group">
|
|
|
- <view class="item" v-for="(item,index) in lotteryProducts" :key="index">
|
|
|
- <image class="w280 h280" :src="item.imgUrl"></image>
|
|
|
- <view v-show="true" class="title">{{item.prizeLevel}}等奖</view>
|
|
|
- <view v-show="true" class="txt">{{item.productName}}</view>
|
|
|
- </view>
|
|
|
- <view class="item center">
|
|
|
- <image class="w280 h280" src="/static/images/img.png"></image>
|
|
|
- <view v-show="true" class="title">二等奖</view>
|
|
|
- <view v-show="true" class="txt">新用户免费领礼品弹窗</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item">
|
|
|
- <image class="w280 h280" src="/static/images/img.png"></image>
|
|
|
- <view v-show="false" class="title">二等奖</view>
|
|
|
- <view v-show="false" class="txt">新用户免费领礼品弹窗</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="point-group" v-for="(item,index) in lotteryProducts" :key="index">
|
|
|
- <view class="item" v-if="item.length" :class="{ selected: activePointIndex === 0 }"
|
|
|
- @click="activePointIndex = 0"></view>
|
|
|
- <view class="item" :class="{ selected: activePointIndex === 1 }"
|
|
|
- @click="() => { activePointIndex = 1; scrollToCenterItem() }"></view>
|
|
|
- <view class="item" :class="{ selected: activePointIndex === 2 }"
|
|
|
- @click="activePointIndex = 2"></view>
|
|
|
- </view> -->
|
|
|
-
|
|
|
-
|
|
|
- <swiper class="prize-swiper" :current="activePointIndex"
|
|
|
- @change="onPrizeSwiperChange" :circular="false" :duration="300"
|
|
|
- indicator-dots="false">
|
|
|
- <swiper-item v-for="(product, idx) in lotteryProducts" :key="idx">
|
|
|
- <view class="item" :class="{center: idx === 1}">
|
|
|
- <image class="w280 h280" :src="product.imgUrl"></image>
|
|
|
- <view class="title">{{product.prizeLevel}}等奖</view>
|
|
|
- <view class="txt">{{product.productName}}</view>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
-
|
|
|
- <view class="point-group" v-if="lotteryProducts.length > 0">
|
|
|
- <view class="item" v-for="(_, idx) in lotteryProducts" :key="idx"
|
|
|
- :class="{ selected: activePointIndex === idx }"
|
|
|
- @click="activePointIndex = idx"></view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="colorf fs28">
|
|
|
- 观看直播参与抽奖
|
|
|
- </view>
|
|
|
- <view class="button" @click="">参与抽奖</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
+ <!--show="true" -->
|
|
|
+
|
|
|
|
|
|
<u-popup :show="liveItem.integral?.status" @close="!liveItem.integral?.status" round='20rpx'
|
|
|
mode="center" bgColor='#ffffff'>
|
|
@@ -353,6 +284,59 @@
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
+
|
|
|
+ <u-popup :show="isShowLotteryPop" @close="!isShowLotteryPop" round='40rpx'>
|
|
|
+ <view class="prize-box" style="border-radius: 40rpx;height: fit-content;">
|
|
|
+ <image class="nav-img " src="/static/images/red_head.png" mode="widthFix"></image>
|
|
|
+ <image class="bg-img " src="/static/images/red_bg.png"></image>
|
|
|
+ <view class="prize-content">
|
|
|
+ <view class="u-flex-row-reverse u-flex mr20">
|
|
|
+ <u-icon name="close" color="#fff" size="20"
|
|
|
+ @click="isShowLotteryPop=false"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="column align-center ">
|
|
|
+ <image class="w446 h80" src="/static/images/red_title.png"></image>
|
|
|
+ <view class="fs24 colorf u-flex-y-center mt30 mb30">
|
|
|
+ 52人已参与,开奖倒计时
|
|
|
+ <view class="white-item">14</view>:
|
|
|
+ <view class="white-item">344</view>:
|
|
|
+ <view class="white-item">44</view>
|
|
|
+ </view>
|
|
|
+ <view class="item-group">
|
|
|
+ <!-- <view class="item" v-for="(item,index) in lotteryProducts" :key="index">
|
|
|
+ <image class="w280 h280" :src="item.imgUrl"></image>
|
|
|
+ <view v-show="true" class="title">{{item.prizeLevel}}等奖</view>
|
|
|
+ <view v-show="true" class="txt">{{item.productName}}</view>
|
|
|
+ </view> -->
|
|
|
+ <view class="item center">
|
|
|
+ <image class="w280 h280" src="/static/images/img.png"></image>
|
|
|
+ <view v-show="true" class="title">二等奖</view>
|
|
|
+ <view v-show="true" class="txt">新用户免费领礼品弹窗</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <image class="w280 h280" src="/static/images/img.png"></image>
|
|
|
+ <view v-show="false" class="title">二等奖</view>
|
|
|
+ <view v-show="false" class="txt">新用户免费领礼品弹窗</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="point-group" v-for="(item,index) in lotteryProducts" :key="index">
|
|
|
+ <!-- <view class="item" v-if="item.length"
|
|
|
+ :class="{ selected: activePointIndex === 0 }" @click="activePointIndex = 0">
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="item" :class="{ selected: activePointIndex === 1 }"
|
|
|
+ @click="() => { activePointIndex = 1; scrollToCenterItem() }"></view>
|
|
|
+ <view class="item" :class="{ selected: activePointIndex === 2 }"
|
|
|
+ @click="activePointIndex = 2"></view> -->
|
|
|
+ </view>
|
|
|
+ <view class="colorf fs28">
|
|
|
+ 观看直播参与抽奖
|
|
|
+ </view>
|
|
|
+ <view class="button" @click="">参与抽奖</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
</view>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
@@ -413,17 +397,23 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+
|
|
|
lotteryProducts: [],
|
|
|
|
|
|
- activePointIndex: 0,
|
|
|
+ activePointIndex: 1,
|
|
|
|
|
|
lotteryTimer: null,
|
|
|
redTimer: null,
|
|
|
|
|
|
+ // 抽奖
|
|
|
isShowLotteryPop: false,
|
|
|
isShowLottery: false,
|
|
|
isShowRed: false,
|
|
|
- // 新增:滑动节流相关变量
|
|
|
+ lotteryProducts: [],
|
|
|
+ activePointIndex: 1,
|
|
|
+ lotteryTimer: null,
|
|
|
+
|
|
|
+ // 滑动节流相关变量
|
|
|
lastSwiperChangeTime: 0, // 上次切换时间戳
|
|
|
swiperChangeThrottle: 300, // 切换节流阈值(毫秒)
|
|
|
|
|
@@ -616,12 +606,8 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- onPrizeSwiperChange(e) {
|
|
|
- // 同步指示点与轮播当前索引
|
|
|
- this.activePointIndex = e.detail.current;
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
scrollToCenterItem() {
|
|
|
this.$nextTick(() => { // 确保DOM渲染完成后再获取位置
|
|
|
// 1. 获取父容器(item-group)的DOM信息
|
|
@@ -691,9 +677,15 @@
|
|
|
this.$set(liveItem, 'goodsCard', res.goods);
|
|
|
// 红包
|
|
|
this.$set(liveItem, 'redInfo', res.red[0]);
|
|
|
- this.isShowRed = true
|
|
|
// 抽奖
|
|
|
this.$set(liveItem, 'lotteryInfo', res.lottery[0]);
|
|
|
+ if (liveItem.goodsCard) {
|
|
|
+ this.isShowGoods = true
|
|
|
+ }
|
|
|
+ if (liveItem.redInfo) {
|
|
|
+ this.isShowRed = true
|
|
|
+ }
|
|
|
+
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: res.msg,
|
|
@@ -1893,6 +1885,7 @@
|
|
|
});
|
|
|
} else if (socketMessage.cmd == 'goods') {
|
|
|
this.$set(liveItem, 'goodsCard', JSON.parse(socketMessage.data));
|
|
|
+ this.isShowGoods = true
|
|
|
}
|
|
|
} else {
|
|
|
uni.showToast({
|
|
@@ -2271,7 +2264,126 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
+ .content-top {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 68rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .sum {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 26rpx 26rpx 26rpx 26rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 52rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .follow-btn {
|
|
|
+ padding: 8rpx 16rpx;
|
|
|
+ background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
|
|
|
+ border-radius: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-box {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 20rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .videolist {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .video {
|
|
|
+ height: 100vh;
|
|
|
+ /* 占屏幕高度的80% */
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(57, 57, 57, 0.4);
|
|
|
+
|
|
|
+ .time {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 20rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .videotop {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video_row {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 500rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 360rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .integral-box {
|
|
|
+ width: 300rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-shadow: 0px 4px 8px rgba(255, 89, 2, 0.8);
|
|
|
+ position: absolute;
|
|
|
+ top: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background: linear-gradient(270deg, #ff4702 0%, #fe6304 100%);
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ padding: 16rpx 30rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.goods {
|
|
|
position: fixed;
|
|
|
// bottom: 160rpx;
|
|
@@ -2353,6 +2465,98 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
+ .icon-bg {
|
|
|
+ background-color: rgba(57, 57, 57, 0.8);
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ transition: transform 0.2s ease;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ background-color: transparent;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ width: 80%;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ animation: xxxawdawd .2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes xxxawdawd {
|
|
|
+ from {
|
|
|
+ margin-top: 0rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-prompt {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 600rpx;
|
|
|
+ left: 24rpx;
|
|
|
+ padding: 6rpx 20rpx;
|
|
|
+ background: rgba(230, 154, 34, 0.7);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ z-index: 9;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ transition: opacity 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .red-box {
|
|
|
+ .button {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 80%;
|
|
|
+ line-height: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ background: linear-gradient(90deg, #FF5701 0%, #FFB501 100%);
|
|
|
+ box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(238, 124, 80, 0.2);
|
|
|
+ border-radius: 44rpx 44rpx 44rpx 44rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .view-box {
|
|
|
+ position: relative;
|
|
|
+ height: 40vh;
|
|
|
+ /* 设置弹出层高度为视窗高度的70% */
|
|
|
+ padding: 40rpx 0rpx 120rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .scroll-content {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 0 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(195, 195, 195, 0.3);
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
// 抽奖
|
|
|
.prize-box {
|
|
|
position: relative;
|
|
@@ -2396,91 +2600,6 @@
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
|
|
|
- .prize-swiper {
|
|
|
- width: 100%;
|
|
|
- height: 400rpx;
|
|
|
- margin: 20rpx 0;
|
|
|
- overflow: visible;
|
|
|
- /* 轮播项基础样式 */
|
|
|
- .item {
|
|
|
- flex-shrink: 0;
|
|
|
- width: 348rpx;
|
|
|
- height: 348rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0rpx 12rpx 19rpx 2rpx rgba(219, 73, 22, 0.6);
|
|
|
- border-radius: 24rpx;
|
|
|
- border: 4rpx solid #FFCA96;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20rpx 0;
|
|
|
- margin: 0 auto;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- &:not(.center) {
|
|
|
- transform: scale(0.85);
|
|
|
- z-index: 1;
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
-
|
|
|
- &.center {
|
|
|
- width: 440rpx;
|
|
|
- height: 450rpx;
|
|
|
- transform: scale(1);
|
|
|
- z-index: 2;
|
|
|
- opacity: 1;
|
|
|
- box-shadow: 0rpx 16rpx 24rpx 4rpx rgba(219, 73, 22, 0.8);
|
|
|
- border-color: #FFEB66;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #222222;
|
|
|
- margin: 20rpx 0 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .txt {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #757575;
|
|
|
- text-align: center;
|
|
|
- padding: 0 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 220rpx;
|
|
|
- height: 220rpx;
|
|
|
- object-fit: cover;
|
|
|
- border-radius: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /* 5. 指示点样式优化 */
|
|
|
- .point-group {
|
|
|
- margin: 30rpx 0 50rpx;
|
|
|
- display: flex;
|
|
|
- gap: 12rpx;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 24rpx;
|
|
|
- height: 8rpx;
|
|
|
- background: rgba(255, 255, 255, 0.5);
|
|
|
- border-radius: 4rpx;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- &.selected {
|
|
|
- background: #FFEB66;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
.item-group {
|
|
|
position: absolute;
|
|
|
top: 250rpx;
|
|
@@ -2530,22 +2649,22 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // .point-group {
|
|
|
- // margin: 480rpx 0 50rpx;
|
|
|
- // display: flex;
|
|
|
- // gap: 6rpx;
|
|
|
+ .point-group {
|
|
|
+ margin: 480rpx 0 50rpx;
|
|
|
+ display: flex;
|
|
|
+ gap: 6rpx;
|
|
|
|
|
|
- // .item {
|
|
|
- // width: 20rpx;
|
|
|
- // height: 8rpx;
|
|
|
- // background: rgba(255, 255, 255, 0.5);
|
|
|
- // border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
- // }
|
|
|
+ .item {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
+ }
|
|
|
|
|
|
- // .selected {
|
|
|
- // background: #FFEB66;
|
|
|
- // }
|
|
|
- // }
|
|
|
+ .selected {
|
|
|
+ background: #FFEB66;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.button {
|
|
|
margin-top: 30rpx;
|
|
@@ -2596,8 +2715,111 @@
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
+ .shop-list {
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .list-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 16rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .goods-img {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 24rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-label {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 64rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 16rpx 0rpx 16rpx 0rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-right {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .goods-title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-details {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin: 10rpx 0 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-people {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #E69A22;
|
|
|
+ height: 56rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-shop {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .nummber {
|
|
|
+ color: #FF5C03;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-group {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+
|
|
|
+ .collect-btn {
|
|
|
+ width: 72rpx;
|
|
|
+ background: #F5F7FA;
|
|
|
+ border-radius: 8rpx 0rpx 0rpx 8rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-btn {
|
|
|
+ width: 152rpx;
|
|
|
+ background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
|
|
|
+ border-radius: 0rpx 8rpx 8rpx 0rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ :deep(.u-list-item) {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.u-safe-area-inset-bottom) {
|
|
|
+ padding-bottom: 0
|
|
|
+ }
|
|
|
</style>
|