From f691d86c7290eb8ecc9df4b3d49256ea4060f395 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Sun, 6 Apr 2025 22:00:13 +0800
Subject: [PATCH] 123

---
 .../detail-list-item/detail-list-item.vue     |  203 ++
 components/detail-list-item/usage-example.vue |  130 +
 .../detail-preview-popup.vue                  |  121 +-
 pages/shouye/detail.vue                       | 2366 ++++++++---------
 4 files changed, 1466 insertions(+), 1354 deletions(-)
 create mode 100644 components/detail-list-item/detail-list-item.vue
 create mode 100644 components/detail-list-item/usage-example.vue

diff --git a/components/detail-list-item/detail-list-item.vue b/components/detail-list-item/detail-list-item.vue
new file mode 100644
index 0000000..14b9ce5
--- /dev/null
+++ b/components/detail-list-item/detail-list-item.vue
@@ -0,0 +1,203 @@
+<template>
+  <view class="res-item" @click="handleItemClick">
+    <view class="pic center">
+      <image :src="item.imgurl" lazy-load mode="aspectFill"></image>
+      <view class="tag center"
+        :style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">
+        {{ item.shang_info ? item.shang_info.title : "" }}
+      </view>
+      <view class="num center">{{ item.surplus_stock }}/{{ item.stock }}</view>
+      <!-- 预售标签 -->
+      <view v-if="item.goods_type == 2" class="yu-tag ziti">预售</view>
+      <!-- 售罄遮罩 -->
+      <view class="sold-out-mask center" v-if="item.surplus_stock <= 0">
+        <text>售罄</text>
+      </view>
+    </view>
+    <view class="item-info">
+      <view class="item-title hang1">
+        <text>{{ item.title }}</text>
+      </view>
+      <view class="item-probability hang1">
+        <text>{{ item.pro }}</text>
+      </view>
+      <view class="item-price hang1">
+        <text>售价：<text style="font-size: 21rpx;">￥</text>{{ item.sc_money }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'DetailListItem',
+  
+  props: {
+    /**
+     * 商品数据项
+     * @property {string} id - 商品ID
+     * @property {string} imgurl - 商品图片地址
+     * @property {string} title - 商品标题
+     * @property {string} pro - 商品概率
+     * @property {string|number} price - 商品价格
+     * @property {number} surplus_stock - 剩余库存
+     * @property {number} stock - 总库存
+     * @property {Object} shang_info - 商品标签信息
+     * @property {string} shang_info.title - 标签标题
+     * @property {string} shang_info.color - 标签背景色
+     */
+    item: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+  
+  methods: {
+    /**
+     * 处理点击事件
+     * 将点击事件与数据项一起传递给父组件
+     */
+    handleItemClick() {
+      this.$emit('click', this.item);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.res-item {
+  width: 100%;
+  background-color: #f8f8f8;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease;
+  overflow: hidden;
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  .pic {
+    width: 100%;
+    height: 180rpx;
+    position: relative;
+    background: #d8d8d8;
+    border-radius: 16rpx 16rpx 0rpx 0rpx;
+
+    >image {
+      width: 100%;
+      height: 180rpx;
+      border-radius: 16rpx 16rpx 0rpx 0rpx;
+    }
+
+    .num {
+      position: absolute;
+      z-index: 2;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 10rpx;
+      min-width: 90rpx;
+      height: 28rpx;
+      font-weight: 400;
+      font-size: 20rpx;
+      color: #333333;
+      background-color: rgba(255, 255, 255, 0.7);
+      border-radius: 18rpx;
+      text-align: center;
+    }
+  }
+
+  .item-info {
+    padding: 5rpx 0;
+  }
+
+  .item-title {
+    padding: 0 2%;
+    margin: 1rpx 0;
+    width: 100%;
+    font-size: 20rpx;
+    text-align: left;
+    height: 28rpx;
+    line-height: 28rpx;
+    font-weight: 500;
+    color: #333333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .item-probability {
+    padding: 0 2%;
+    margin: 1rpx 0;
+    width: 100%;
+    font-size: 20rpx;
+    text-align: left;
+    height: 28rpx;
+    line-height: 28rpx;
+    color: #f39205;
+  }
+
+  .item-price {
+    padding: 0 2%;
+    margin: 1rpx 0;
+    width: 100%;
+    font-size: 20rpx;
+    text-align: left;
+    height: 28rpx;
+    line-height: 28rpx;
+    color: #333333;
+  }
+  
+  // 售罄遮罩
+  .sold-out-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 16rpx 16rpx 0 0;
+    z-index: 10;
+
+    text {
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #FFFFFF;
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+    }
+  }
+  
+  .tag {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 5%;
+    left: 5%;
+    font-weight: 400;
+    font-size: 20rpx;
+    color: #fff;
+    box-sizing: border-box;
+    padding: 5rpx 15rpx;
+    border-radius: 25rpx;
+  }
+
+  .yu-tag {
+    position: absolute;
+    right: 10rpx;
+    top: 10rpx;
+    z-index: 5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 400;
+    font-size: 32rpx;
+    color: #ff873a;
+    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/components/detail-list-item/usage-example.vue b/components/detail-list-item/usage-example.vue
new file mode 100644
index 0000000..46f112b
--- /dev/null
+++ b/components/detail-list-item/usage-example.vue
@@ -0,0 +1,130 @@
+<template>
+  <view class="container">
+    <view class="title">商品列表示例</view>
+    
+    <!-- 网格布局的列表 -->
+    <view class="grid-list">
+      <detail-list-item 
+        v-for="(item, index) in productList" 
+        :key="item.id || index"
+        :item="item"
+        @click="onItemClick"
+      />
+    </view>
+    
+    <!-- 点击信息展示 -->
+    <view class="click-info" v-if="selectedItem">
+      <view class="info-title">您点击了：</view>
+      <view class="info-content">{{ selectedItem.title }}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+import DetailListItem from './detail-list-item.vue';
+
+export default {
+  components: {
+    DetailListItem
+  },
+  
+  data() {
+    return {
+      selectedItem: null,
+      productList: [
+        {
+          id: '1',
+          imgurl: '/static/img/product1.jpg',
+          title: '限定款手办',
+          pro: '中奖概率 10%',
+          price: '299.00',
+          surplus_stock: 10,
+          stock: 100,
+          shang_info: {
+            title: 'SSR',
+            color: '#FF5722'
+          }
+        },
+        {
+          id: '2',
+          imgurl: '/static/img/product2.jpg',
+          title: '精美钥匙扣',
+          pro: '中奖概率 30%',
+          price: '39.00',
+          surplus_stock: 50,
+          stock: 200,
+          shang_info: {
+            title: 'SR',
+            color: '#9C27B0'
+          }
+        },
+        {
+          id: '3',
+          imgurl: '/static/img/product3.jpg',
+          title: '主题明信片',
+          pro: '中奖概率 60%',
+          price: '12.00',
+          surplus_stock: 0,
+          stock: 300,
+          shang_info: {
+            title: 'R',
+            color: '#2196F3'
+          }
+        }
+      ]
+    };
+  },
+  
+  methods: {
+    // 处理商品点击事件
+    onItemClick(item) {
+      console.log('点击了商品:', item);
+      this.selectedItem = item;
+      
+      // 在实际应用中，这里可以弹出详情框或导航到详情页
+      uni.showToast({
+        title: `已选择: ${item.title}`,
+        icon: 'none'
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 30rpx;
+}
+
+.title {
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-bottom: 30rpx;
+  text-align: center;
+}
+
+.grid-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20rpx;
+  justify-items: center;
+}
+
+.click-info {
+  margin-top: 40rpx;
+  padding: 20rpx;
+  background-color: #f5f5f5;
+  border-radius: 12rpx;
+  
+  .info-title {
+    font-size: 28rpx;
+    font-weight: bold;
+    margin-bottom: 10rpx;
+  }
+  
+  .info-content {
+    font-size: 24rpx;
+    color: #333;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/components/detail-preview-popup/detail-preview-popup.vue b/components/detail-preview-popup/detail-preview-popup.vue
index 85c636c..a347dda 100644
--- a/components/detail-preview-popup/detail-preview-popup.vue
+++ b/components/detail-preview-popup/detail-preview-popup.vue
@@ -32,32 +32,12 @@
                 </view>
                 <!-- 赏品列表内容 -->
                 <view class="res-list" v-else>
-                  <view class="res-item" v-for="(item, i) in children" :key="item.id || i"
-                    @click.stop="handleItemClick(item)">
-                    <view class="pic center">
-                      <image :src="item.imgurl" lazy-load mode="aspectFill"></image>
-                      <view class="tag center"
-                        :style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">
-                        {{ item.shang_info ? item.shang_info.title : "" }}
-                      </view>
-                      <view class="num center">{{ item.surplus_stock }}/{{ item.stock }}</view>
-                      <!-- 售罄遮罩 -->
-                      <view class="sold-out-mask center" v-if="item.surplus_stock <= 0">
-                        <text>售罄</text>
-                      </view>
-                    </view>
-                    <view class="item-info">
-                      <view class="item-title hang1">
-                        <text>{{ item.title }}</text>
-                      </view>
-                      <view class="item-probability hang1">
-                        <text>{{ item.pro }}</text>
-                      </view>
-                      <view class="item-price hang1">
-                        <text>售价：{{ item.price }}</text>
-                      </view>
-                    </view>
-                  </view>
+                  <detail-list-item 
+                    v-for="(item, i) in children" 
+                    :key="item.id || i"
+                    :item="item"
+                    @click="handleItemClick"
+                  />
                 </view>
               </scroll-view>
             </view>
@@ -90,10 +70,15 @@
 </template>
 
 <script>
+import DetailListItem from '@/components/detail-list-item/detail-list-item.vue';
 
 export default {
   name: 'DetailPreviewPopup',
 
+  components: {
+    DetailListItem
+  },
+
   props: {
     // 商品标题
     title: {
@@ -405,89 +390,6 @@ export default {
       grid-template-columns: repeat(3, 33%);
       gap: 20rpx 8rpx;
       justify-content: center;
-
-      .res-item {
-        width: 180rpx;
-        background-color: #f8f8f8;
-        border-radius: 16rpx;
-        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-        transition: transform 0.2s ease;
-
-        &:active {
-          transform: scale(0.98);
-        }
-
-        .pic {
-          width: 100%;
-          height: 180rpx;
-          position: relative;
-          background: #d8d8d8;
-          border-radius: 16rpx 16rpx 0rpx 0rpx;
-
-          >image {
-            width: 100%;
-            height: 180rpx;
-            border-radius: 16rpx 16rpx 0rpx 0rpx;
-          }
-
-          .num {
-            position: absolute;
-            z-index: 2;
-            left: 50%;
-            transform: translateX(-50%);
-            bottom: 10rpx;
-            min-width: 90rpx;
-            height: 28rpx;
-            font-weight: 400;
-            font-size: 20rpx;
-            color: #333333;
-            background-color: rgba(255, 255, 255, 0.7);
-            border-radius: 18rpx;
-            text-align: center;
-          }
-        }
-
-        .item-info {
-          padding: 5rpx 0;
-        }
-
-        .item-title {
-          padding: 0 2%;
-          margin: 1rpx 0;
-          width: 100%;
-          font-size: 20rpx;
-          text-align: left;
-          height: 28rpx;
-          line-height: 28rpx;
-          font-weight: 500;
-          color: #333333;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        .item-probability {
-          padding: 0 2%;
-          margin: 1rpx 0;
-          width: 100%;
-          font-size: 20rpx;
-          text-align: left;
-          height: 28rpx;
-          line-height: 28rpx;
-          color: #f39205;
-        }
-
-        .item-price {
-          padding: 0 2%;
-          margin: 1rpx 0;
-          width: 100%;
-          font-size: 20rpx;
-          text-align: left;
-          height: 28rpx;
-          line-height: 28rpx;
-          color: #333333;
-        }
-      }
     }
   }
 
@@ -683,7 +585,6 @@ export default {
 }
 
 @keyframes bounce {
-
   0%,
   100% {
     transform: scale(0);
diff --git a/pages/shouye/detail.vue b/pages/shouye/detail.vue
index 5da0d46..4c07f68 100644
--- a/pages/shouye/detail.vue
+++ b/pages/shouye/detail.vue
@@ -4,20 +4,20 @@
 <template>
 	<view class="content">
 		<view>
-			
+
 		</view>
 		<view class="navLeft align-center" :style="{ top: $sys().statusBarHeight + 'px' }" @tap="$c.back(1)">
 			<uni-icons type="left" color="#000000"></uni-icons>
 		</view>
 
-		<view class="center relative" style="z-index: 10;" :style="{top:$sys().statusBarHeight+'px'}">
-			<text class=""
-				style="padding-top: 20rpx;">{{ $c.detailPageTitle((pageData && pageData.goods) || "") }}</text>
+		<view class="center relative" style="z-index: 10;" :style="{ top: $sys().statusBarHeight + 'px' }">
+			<text class="" style="padding-top: 20rpx;">{{ $c.detailPageTitle((pageData && pageData.goods) || "")
+			}}</text>
 		</view>
 
 
 		<view class="header relative" v-if="pageData && pageData.goods"
-			:style="{background:'url(' + pageData.goods.imgurl_detail + ') no-repeat 0 0 / 100% 100%',}">
+			:style="{ background: 'url(' + pageData.goods.imgurl_detail + ') no-repeat 0 0 / 100% 100%', }">
 
 			<view class="header-wuzhe flex" v-if="pageData.goods.is_shou_zhe == 1">
 				<image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
@@ -25,10 +25,8 @@
 
 			<view class="header-goodsTitel">{{ pageData.goods.title }}</view>
 
-			<view class="header-suoxiang center" v-if="
-				pageData.goods.lock_is == 1 &&
-				pageData.lock_info.goods_lock_surplus_time > 0
-			">
+			<view class="header-suoxiang center"
+				v-if="pageData.goods.lock_is == 1 && pageData.lock_info.goods_lock_surplus_time > 0">
 				<image :src="pageData.lock_info.goods_lock_user_headimg" mode="aspectFill"></image>
 				<view class="hidden ml10">{{
 					pageData.lock_info.goods_lock_user_nickname
@@ -38,7 +36,7 @@
 			</view>
 
 			<view class="header-title center"
-				:style="{background:'url(' +$img1('common/chouTitle.png') +') no-repeat 0 0 / 100% 100%',}">
+				:style="{ background: 'url(' + $img1('common/chouTitle.png') + ') no-repeat 0 0 / 100% 100%', }">
 				<text>
 					<template></template>
 				</text>
@@ -74,11 +72,12 @@
 						<text :style="{ width: '80%' }"></text>
 					</view>
 					<view class="align-center" v-if="pageData.goods">
-						<view class="align-center">第 <text>{{ pageData.goods.num }}</text> /{{pageData.goods.stock}}箱
+						<view class="align-center">第 <text>{{ pageData.goods.num }}</text> /{{ pageData.goods.stock }}箱
 						</view>
 						<view style="margin-left: 58rpx;">赏品余量</view>
 						<view class="align-center">
-							<text>{{ pageData.goods.goodslist_surplus_stock }}</text>/{{ pageData.goods.goodslist_stock}}
+							<text>{{ pageData.goods.goodslist_surplus_stock }}</text>/{{
+								pageData.goods.goodslist_stock }}
 						</view>
 					</view>
 				</view>
@@ -90,29 +89,8 @@
 			</view>
 			<!-- 赏品列表 -->
 			<view class="list">
-				<view class="list-item" v-for="(item, i) in pageData.goodslist" :key="i" @click="previewDetail(item)">
-					<view class="pic center relative">
-						<image class="pic-img" :src="item.imgurl" mode="aspectFit"></image>
-						<view class="type-tag center" :style="{
-							background: item.shang_info ? item.shang_info.color : '#FFFFFF',
-						}">
-							{{ item.shang_info ? item.shang_info.title : "" }}
-						</view>
-						<view class="num center bgfff">{{ item.surplus_stock }}/{{ item.stock }}</view>
-						<view v-if="item.goods_type == 2" class="yu-tag ziti">预售</view>
-						<view v-if="item.surplus_stock <= 0" class="shadow center">
-							<image :src="$img1('common/sold_out.png')"></image>
-						</view>
-					</view>
-					<view class="title hang1">
-						{{ item.title }}
-					</view>
-					<view class="desc">{{ item.pro }}</view>
-					<view class="price">
-						<text>售价:￥ <text style="font-size: 24rpx">{{ item.sc_money }}</text>
-						</text>
-					</view>
-				</view>
+				<detail-list-item v-for="(item, i) in pageData.goodslist" :key="i" :item="item"
+					@click="previewDetail" />
 			</view>
 		</view>
 
@@ -195,991 +173,987 @@
 </template>
 
 <script>
-	import OrderConfirmPopup from '@/components/order-confirm-popup/order-confirm-popup.vue'
+import OrderConfirmPopup from '@/components/order-confirm-popup/order-confirm-popup.vue'
+import DetailListItem from '@/components/detail-list-item/detail-list-item.vue'
 
-	export default {
-		components: {
-			OrderConfirmPopup
+export default {
+	components: {
+		OrderConfirmPopup,
+		DetailListItem
+	},
+	data() {
+		return {
+			optData: "",
+			boxNum: "",
+			buyNum: 0,
+
+			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
+			downOption: {
+				auto: false,
+			},
+			// 上拉加载的配置(可选, 绝大部分情况无需配置)
+			upOption: {
+				auto: true,
+				page: {
+					size: 15, // 每页数据的数量,默认10
+				},
+			},
+			tabList: {
+				1: {
+					title: "商品预览",
+				},
+				2: {
+					title: "中赏记录",
+				},
+			},
+			tabCur: 1,
+			subTab: [],
+			subTabCur: 0,
+			payType: {
+				1: {
+					title: "吧唧币",
+					icon: "/static/img/pay_type1.png",
+				},
+				2: {
+					title: "星钻",
+					icon: "/static/img/pay_type2.png",
+				},
+			},
+			payTypeCur: 1,
+			isAgree: true,
+			pageData: "",
+			couponData: "",
+			orderData: "",
+			prizeData: "",
+			secTimer: null,
+			secNum: 0,
+			aniSrc: "",
+			aniShow: false,
+
+			logList: [],
+			sendRuleData: "",
+			choujiangloading: false,
+			useMoney: true,
+			useIntegral: true,
+			useMoney2: true,
+		};
+	},
+	created() {
+
+	},
+	computed: {},
+	onShareAppMessage() {
+		if (this.$refs["couponPop"] != null) {
+			var co = this.$refs["couponPop"].getfengxiaodata();
+			if (co != null) {
+				console.log(co);
+				return co;
+			}
+		}
+		return {
+			title: this.$config.getAppSetting("app_name") +
+				`${this.pageData.goods.title}系列 第${this.pageData.goods.num}套`,
+			imageUrl: this.pageData.goods.imgurl_detail,
+			path: "/pages/shouye/detail" +
+				this.$c.qs({
+					goods_id: this.pageData.goods.id,
+					goods_num: this.pageData.goods.num,
+					pid: uni.getStorageSync("userinfo").ID,
+				}),
+		};
+	},
+
+	onLoad(options) {
+		console.log(options);
+		this.optData = options;
+
+		this.tabChange(this.tabCur);
+
+		uni.$on("chooseCoupon", (data) => {
+			// console.log('data', data)
+
+			this.couponData = data;
+			this.confirmSubmit([0, this.buyNum]);
+		});
+
+		// uni.getImageInfo({
+		//   src: this.$img('/static/img/animation.png'),
+		//   success: ({ path }) => {
+		//     this.aniSrc = path
+		//   }
+		// })
+
+		this.$c.getRule(10).then((res) => {
+			if (res.status == 1) {
+				this.sendRuleData = res.data;
+			}
+		});
+	},
+
+	onReady() {
+		// this.open('dPop')
+		// this.open('buyPop')
+		// this.open('buyNotice')
+		// this.open('resPop')
+	},
+
+	onUnload() {
+		uni.$off("chooseCoupon");
+	},
+
+	methods: {
+		previewDetail(item) {
+			console.log(item);
+			// 使用全局方法调用预览弹窗
+			this.$preview({
+				productType: this.optData.type_text,
+				dataItem: item,
+				goods: this.pageData.goods
+			}).then(() => {
+				console.log('预览弹窗打开成功');
+			});
 		},
-		data() {
-			return {
-				optData: "",
-				boxNum: "",
-				buyNum: 0,
 
-				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
-				downOption: {
-					auto: false,
-				},
-				// 上拉加载的配置(可选, 绝大部分情况无需配置)
-				upOption: {
-					auto: true,
-					page: {
-						size: 15, // 每页数据的数量,默认10
-					},
-				},
-				tabList: {
-					1: {
-						title: "商品预览",
-					},
-					2: {
-						title: "中赏记录",
-					},
-				},
-				tabCur: 1,
-				subTab: [],
-				subTabCur: 0,
-				payType: {
-					1: {
-						title: "吧唧币",
-						icon: "/static/img/pay_type1.png",
-					},
-					2: {
-						title: "星钻",
-						icon: "/static/img/pay_type2.png",
-					},
-				},
-				payTypeCur: 1,
-				isAgree: true,
-				pageData: "",
-				couponData: "",
-				orderData: "",
-				prizeData: "",
-				secTimer: null,
-				secNum: 0,
-				aniSrc: "",
-				aniShow: false,
-
-				logList: [],
-				sendRuleData: "",
-				choujiangloading: false,
-				useMoney: true,
-				useIntegral: true,
-				useMoney2: true,
-			};
+		resetSec() {
+			clearInterval(this.secTimer);
+			this.secTimer = null;
+			this.secNum = 0;
 		},
-		created() {
 
+		runSec(time) {
+			const nowTime = Math.floor(Date.now() / 1000);
+
+			if (time < nowTime) {
+				this.resetSec();
+				return;
+			}
+
+			this.secTimer && clearInterval(this.secTimer);
+
+			this.secNum = time - nowTime;
+			this.secTimer = setInterval(() => {
+				if (this.secNum <= 0) {
+					this.resetSec();
+
+					uni.showLoading({
+						title: "加载中",
+						mask: true,
+					});
+					setTimeout(() => {
+						// uni.hideLoading()
+						this.doRefresh();
+					}, 1000);
+					return;
+				}
+
+				this.secNum -= 1;
+			}, 1000);
 		},
-		computed: {},
-		onShareAppMessage() {
-			if (this.$refs["couponPop"] != null) {
-				var co = this.$refs["couponPop"].getfengxiaodata();
-				if (co != null) {
-					console.log(co);
-					return co;
+
+		toCoupon() {
+			this.$c.to({
+				url: "/pages/user/coupon",
+				query: {
+					type: 2,
+					total_price: this.orderData.order_total,
+				},
+			});
+		},
+
+		getPrize(order_num) {
+			if (!order_num) {
+				return;
+			}
+
+			setTimeout(() => {
+				this.req({
+					url: "prizeorderlog",
+					data: {
+						order_num,
+					},
+					success: (res) => {
+						if (res.status == 1) {
+							this.prizeData = res.data;
+
+							if (res.data.data.length <= 0) {
+								this.getPrize(order_num);
+								return;
+							}
+
+							// this.aniShow = true
+							// setTimeout(() => {
+							//   this.aniShow = false
+							this.bgmCtx.openBgm.stop();
+							this.bgmCtx.openBgm.play();
+							this.open("resPop");
+							// }, 1300)
+						}
+					},
+				});
+			}, 500);
+		},
+
+		changePay(e) {
+			this[e] = !this[e];
+			this.confirmSubmit([0, this.buyNum]);
+		},
+
+		confirmSubmit([type, num, fromNotice = false]) {
+			let url = "ordermoney";
+
+			if (type == 1) {
+				url = "orderbuy";
+
+				if (this.$refs.buyNotice.getIsShow() && !fromNotice) {
+					this.$refs.buyNotice.getRule(6);
+					return;
 				}
 			}
-			return {
-				title: this.$config.getAppSetting("app_name") +
-					`${this.pageData.goods.title}系列 第${this.pageData.goods.num}套`,
-				imageUrl: this.pageData.goods.imgurl_detail,
-				path: "/pages/shouye/detail" +
-					this.$c.qs({
-						goods_id: this.pageData.goods.id,
-						goods_num: this.pageData.goods.num,
-						pid: uni.getStorageSync("userinfo").ID,
-					}),
+			if (!this.getBtnXianShi(0)) {
+				this.useMoney = false;
+				this.useIntegral = false;
+				this.useMoney2 = false;
+			}
+			this.buyNum = num;
+
+			let data = {
+				goods_id: this.pageData.goods.id,
+				prize_num: this.buyNum,
+				goods_num: this.pageData.goods.num,
+				use_money_is: this.useMoney ? 1 : 2,
+				use_integral_is: this.useIntegral ? 1 : 2,
+				coupon_id: (this.couponData && this.couponData.id) || "",
+				use_money2_is: this.useMoney2 ? 1 : 2
 			};
-		},
 
-		onLoad(options) {
-			console.log(options);
-			this.optData = options;
+			if (this.pageData.goods.type == 5) {
+				data.coupon_id = "";
+			}
 
-			this.tabChange(this.tabCur);
-
-			uni.$on("chooseCoupon", (data) => {
-				// console.log('data', data)
-
-				this.couponData = data;
-				this.confirmSubmit([0, this.buyNum]);
-			});
-
-			// uni.getImageInfo({
-			//   src: this.$img('/static/img/animation.png'),
-			//   success: ({ path }) => {
-			//     this.aniSrc = path
-			//   }
-			// })
-
-			this.$c.getRule(10).then((res) => {
-				if (res.status == 1) {
-					this.sendRuleData = res.data;
-				}
-			});
-		},
-
-		onReady() {
-			// this.open('dPop')
-			// this.open('buyPop')
-			// this.open('buyNotice')
-			// this.open('resPop')
-		},
-
-		onUnload() {
-			uni.$off("chooseCoupon");
-		},
-
-		methods: {
-			previewDetail(item) {
-				console.log(item,this.pageData);
-				// 使用全局方法调用预览弹窗
-				this.$preview({
-					productType: this.optData.type_text,
-					dataItem: item,
-					goods: this.pageData.goods
-				}).then(() => {
-					console.log('预览弹窗打开成功');
-				});
-			},
-
-			resetSec() {
-				clearInterval(this.secTimer);
-				this.secTimer = null;
-				this.secNum = 0;
-			},
-
-			runSec(time) {
-				const nowTime = Math.floor(Date.now() / 1000);
-
-				if (time < nowTime) {
-					this.resetSec();
-					return;
-				}
-
-				this.secTimer && clearInterval(this.secTimer);
-
-				this.secNum = time - nowTime;
-				this.secTimer = setInterval(() => {
-					if (this.secNum <= 0) {
-						this.resetSec();
-
-						uni.showLoading({
-							title: "加载中",
-							mask: true,
-						});
-						setTimeout(() => {
-							// uni.hideLoading()
-							this.doRefresh();
-						}, 1000);
-						return;
-					}
-
-					this.secNum -= 1;
-				}, 1000);
-			},
-
-			toCoupon() {
-				this.$c.to({
-					url: "/pages/user/coupon",
-					query: {
-						type: 2,
-						total_price: this.orderData.order_total,
-					},
-				});
-			},
-
-			getPrize(order_num) {
-				if (!order_num) {
-					return;
-				}
-
-				setTimeout(() => {
-					this.req({
-						url: "prizeorderlog",
-						data: {
-							order_num,
-						},
-						success: (res) => {
-							if (res.status == 1) {
-								this.prizeData = res.data;
-
-								if (res.data.data.length <= 0) {
-									this.getPrize(order_num);
-									return;
-								}
-
-								// this.aniShow = true
-								// setTimeout(() => {
-								//   this.aniShow = false
-								this.bgmCtx.openBgm.stop();
-								this.bgmCtx.openBgm.play();
-								this.open("resPop");
-								// }, 1300)
+			this.req({
+				url,
+				data,
+				success: async (res) => {
+					if (res.status == 1) {
+						if (type == 0) {
+							if (res.data.coupon_id) {
+								this.couponData = {
+									id: res.data.coupon_id,
+									price: res.data.coupon_price,
+								};
 							}
-						},
-					});
-				}, 500);
-			},
 
-			changePay(e) {
-				this[e] = !this[e];
-				this.confirmSubmit([0, this.buyNum]);
-			},
+							this.orderData = res.data;
 
-			confirmSubmit([type, num, fromNotice = false]) {
-				let url = "ordermoney";
-
-				if (type == 1) {
-					url = "orderbuy";
-
-					if (this.$refs.buyNotice.getIsShow() && !fromNotice) {
-						this.$refs.buyNotice.getRule(6);
-						return;
-					}
-				}
-				if (!this.getBtnXianShi(0)) {
-					this.useMoney = false;
-					this.useIntegral = false;
-					this.useMoney2 = false;
-				}
-				this.buyNum = num;
-
-				let data = {
-					goods_id: this.pageData.goods.id,
-					prize_num: this.buyNum,
-					goods_num: this.pageData.goods.num,
-					use_money_is: this.useMoney ? 1 : 2,
-					use_integral_is: this.useIntegral ? 1 : 2,
-					coupon_id: (this.couponData && this.couponData.id) || "",
-					use_money2_is: this.useMoney2 ? 1 : 2
-				};
-
-				if (this.pageData.goods.type == 5) {
-					data.coupon_id = "";
-				}
-
-				this.req({
-					url,
-					data,
-					success: async (res) => {
-						if (res.status == 1) {
-							if (type == 0) {
-								if (res.data.coupon_id) {
-									this.couponData = {
-										id: res.data.coupon_id,
-										price: res.data.coupon_price,
-									};
+							// 使用this.$nextTick确保视图已更新，组件已挂载
+							this.$nextTick(() => {
+								if (this.$refs.buyPop) {
+									this.$refs.buyPop.open();
+								} else {
+									console.error('buyPop组件引用不存在');
 								}
+							});
+						}
 
-								this.orderData = res.data;
+						if (type == 1) {
+							this.close("buyPop");
 
-								// 使用this.$nextTick确保视图已更新，组件已挂载
-								this.$nextTick(() => {
-									if (this.$refs.buyPop) {
-										this.$refs.buyPop.open();
-									} else {
-										console.error('buyPop组件引用不存在');
-									}
+							if (res.data.status == 1) {
+								const status = await this.$c.wxMpPay({
+									data: res.data.res,
 								});
-							}
 
-							if (type == 1) {
-								this.close("buyPop");
-
-								if (res.data.status == 1) {
-									const status = await this.$c.wxMpPay({
-										data: res.data.res,
-									});
-
-									if (status == "success") {
+								if (status == "success") {
+									this.getPrize(res.data.order_num);
+									this.doRefresh();
+								}
+							} else {
+								this.$c.toast({
+									title: res.msg,
+									duration: 500,
+									success: () => {
 										this.getPrize(res.data.order_num);
 										this.doRefresh();
-									}
-								} else {
-									this.$c.toast({
-										title: res.msg,
-										duration: 500,
-										success: () => {
-											this.getPrize(res.data.order_num);
-											this.doRefresh();
-										},
-									});
-								}
+									},
+								});
 							}
 						}
-					},
-				});
-				if (type == 1) {
-					this.close("buyPop");
-				}
-			},
-
-			onCollectionChanged() {
-				this.doRefresh();
-			},
-
-			handleRuleClick(ruleId, title) {
-				this.$refs.rulePop.getRule(ruleId, title);
-			},
-
-			toBag() {
-				this.close("resPop");
-
-				this.$c.to({
-					type: 3,
-					url: "/pages/sangdai/sangdai",
-				});
-			},
-
-			changeBox() {
-				this.$c.to({
-					url: "/pages/shouye/huanxiang",
-					query: {
-						id: this.pageData.goods.id,
-						type_text: this.optData.type_text,
-					},
-				});
-			},
-
-			doRefresh() {
-				this.getData();
-
-				if (this.tabCur == 2) {
-					this.tabChange(this.tabCur);
-				}
-			},
-
-			subTabChange(i) {
-				this.subTabCur = i;
-				this.logList = [];
-
-				this.$nextTick(() => {
-					setTimeout(() => {
-						this.mescroll.resetUpScroll();
-						this.mescroll.scrollTo(0, 0);
-					}, 100);
-				});
-			},
-
-			tabChange(i) {
-				this.tabCur = i;
-
-				switch (Number(i)) {
-					case 1:
-						this.getData();
-						break;
-					case 2:
-						this.subTabChange(this.subTabCur);
-						break;
-				}
-			},
-
-			next() {
-				if (this.optData.goods_num >= this.pageData.goods.stock) {
-					this.optData.goods_num = this.pageData.goods.stock;
-
-					this.$c.toast({
-						title: "已经是最后一箱了",
-					});
-					return;
-				}
-
-				this.optData.goods_num += 1;
-				this.getData();
-			},
-
-			prev() {
-				if (this.optData.goods_num <= 1) {
-					this.optData.goods_num = 1;
-
-					this.$c.toast({
-						title: "已经是第一箱了",
-					});
-					return;
-				}
-
-				this.optData.goods_num -= 1;
-				this.getData();
-			},
-
-			getLog({
-				num,
-				size
-			}) {
-				if (num > 1) return this.mescroll.endByPage(this.logList.length, 1);
-				this.req({
-					url: "shang_log",
-					data: {
-						page: num,
-						goods_id: this.optData.goods_id,
-						goods_num: this.optData.goods_num,
-						shang_id: this.subTab.length > 0 ? this.subTab[this.subTabCur].shang_id : "",
-					},
-					Loading: true,
-					success: (res) => {
-						if (res.status == 1) {
-							this.subTab = res.data.category;
-
-							if (num == 1) {
-								this.logList = [];
-							}
-
-							this.logList = this.logList.concat(res.data.data);
-							this.mescroll.endByPage(res.data.data.length, res.data.last_page);
-						}
-					},
-				});
-			},
-
-			getData() {
-				this.req({
-					url: "goodsdetail",
-					data: {
-						goods_id: this.optData.goods_id,
-						goods_num: this.optData.goods_num,
-					},
-					success: (res) => {
-						if (res.status == 1) {
-							this.optData.goods_num = Number(res.data.goods.num);
-
-							if (
-								res.data.goods.lock_is == 1 &&
-								res.data.lock_info.goods_lock_surplus_time > 0
-							) {
-								this.runSec(res.data.lock_info.goods_lock_surplus_time);
-							}
-
-							this.pageData = res.data;
-							let goodType = this.$config.getGoodTypeFind(this.pageData.goods.type);
-							this.useMoney = goodType.pay_balance == 1 ? true : false;
-							this.useIntegral = goodType.pay_currency == 1 ? true : false;
-							this.useMoney2 = goodType.pay_currency2 == 1 ? true : false;
-							console.log(this.pageData);
-						}
-					},
-				});
-			},
-			getBtnXianShi(type) {
-				if (this.pageData == null || this.pageData["xuangou"] == null) {
-					// this.pageData
-					return true;
-				}
-				let xuangou = this.pageData["xuangou"];
-				if (xuangou.quanju_xiangou == 0) {
-					return true;
-				}
-
-				if (type == 0) {
-					return false;
-				}
-				if (type == 1) {
-					return true;
-				}
-
-				let yuxia = xuangou.quanju_xiangou - xuangou.user_xiangou_count;
-				console.log(yuxia);
-				if (yuxia >= type) {
-					return true;
-				}
-				return false;
-			},
-			close(e) {
-				console.log('关闭弹窗:', e, this.$refs[e]);
-				if (e === 'buyPop') {
-					if (this.$refs[e]) {
-						this.$refs[e].close();
-					} else {
-						console.error('找不到buyPop组件引用');
 					}
-				} else {
-					if (this.$refs[e]) {
-						this.$refs[e].close();
-					} else {
-						console.error('找不到组件引用:', e);
-					}
-				}
-
-				if (e == "resPop") {
-					if (this.prizeData && this.prizeData["user_coupon"] != null) {
-						this.$refs["couponPop"].open(this.prizeData["user_coupon"]);
-					}
-				}
-			},
-
-			open(e) {
-				console.log('打开弹窗:', e, this.$refs[e]);
-				if (e === 'buyPop') {
-					if (this.$refs[e]) {
-						this.$refs[e].open();
-					} else {
-						console.error('找不到buyPop组件引用');
-					}
-				} else {
-					if (this.$refs[e]) {
-						this.$refs[e].open();
-					} else {
-						console.error('找不到组件引用:', e);
-					}
-				}
-			},
+				},
+			});
+			if (type == 1) {
+				this.close("buyPop");
+			}
 		},
-	};
+
+		onCollectionChanged() {
+			this.doRefresh();
+		},
+
+		handleRuleClick(ruleId, title) {
+			this.$refs.rulePop.getRule(ruleId, title);
+		},
+
+		toBag() {
+			this.close("resPop");
+
+			this.$c.to({
+				type: 3,
+				url: "/pages/sangdai/sangdai",
+			});
+		},
+
+		changeBox() {
+			this.$c.to({
+				url: "/pages/shouye/huanxiang",
+				query: {
+					id: this.pageData.goods.id,
+					type_text: this.optData.type_text,
+				},
+			});
+		},
+
+		doRefresh() {
+			this.getData();
+
+			if (this.tabCur == 2) {
+				this.tabChange(this.tabCur);
+			}
+		},
+
+		subTabChange(i) {
+			this.subTabCur = i;
+			this.logList = [];
+
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.mescroll.resetUpScroll();
+					this.mescroll.scrollTo(0, 0);
+				}, 100);
+			});
+		},
+
+		tabChange(i) {
+			this.tabCur = i;
+
+			switch (Number(i)) {
+				case 1:
+					this.getData();
+					break;
+				case 2:
+					this.subTabChange(this.subTabCur);
+					break;
+			}
+		},
+
+		next() {
+			if (this.optData.goods_num >= this.pageData.goods.stock) {
+				this.optData.goods_num = this.pageData.goods.stock;
+
+				this.$c.toast({
+					title: "已经是最后一箱了",
+				});
+				return;
+			}
+
+			this.optData.goods_num += 1;
+			this.getData();
+		},
+
+		prev() {
+			if (this.optData.goods_num <= 1) {
+				this.optData.goods_num = 1;
+
+				this.$c.toast({
+					title: "已经是第一箱了",
+				});
+				return;
+			}
+
+			this.optData.goods_num -= 1;
+			this.getData();
+		},
+
+		getLog({
+			num,
+			size
+		}) {
+			if (num > 1) return this.mescroll.endByPage(this.logList.length, 1);
+			this.req({
+				url: "shang_log",
+				data: {
+					page: num,
+					goods_id: this.optData.goods_id,
+					goods_num: this.optData.goods_num,
+					shang_id: this.subTab.length > 0 ? this.subTab[this.subTabCur].shang_id : "",
+				},
+				Loading: true,
+				success: (res) => {
+					if (res.status == 1) {
+						this.subTab = res.data.category;
+
+						if (num == 1) {
+							this.logList = [];
+						}
+
+						this.logList = this.logList.concat(res.data.data);
+						this.mescroll.endByPage(res.data.data.length, res.data.last_page);
+					}
+				},
+			});
+		},
+
+		getData() {
+			this.req({
+				url: "goodsdetail",
+				data: {
+					goods_id: this.optData.goods_id,
+					goods_num: this.optData.goods_num,
+				},
+				success: (res) => {
+					if (res.status == 1) {
+						this.optData.goods_num = Number(res.data.goods.num);
+
+						if (
+							res.data.goods.lock_is == 1 &&
+							res.data.lock_info.goods_lock_surplus_time > 0
+						) {
+							this.runSec(res.data.lock_info.goods_lock_surplus_time);
+						}
+
+						this.pageData = res.data;
+						let goodType = this.$config.getGoodTypeFind(this.pageData.goods.type);
+						this.useMoney = goodType.pay_balance == 1 ? true : false;
+						this.useIntegral = goodType.pay_currency == 1 ? true : false;
+						this.useMoney2 = goodType.pay_currency2 == 1 ? true : false;
+						console.log(this.pageData);
+					}
+				},
+			});
+		},
+		getBtnXianShi(type) {
+			if (this.pageData == null || this.pageData["xuangou"] == null) {
+				// this.pageData
+				return true;
+			}
+			let xuangou = this.pageData["xuangou"];
+			if (xuangou.quanju_xiangou == 0) {
+				return true;
+			}
+
+			if (type == 0) {
+				return false;
+			}
+			if (type == 1) {
+				return true;
+			}
+
+			let yuxia = xuangou.quanju_xiangou - xuangou.user_xiangou_count;
+			console.log(yuxia);
+			if (yuxia >= type) {
+				return true;
+			}
+			return false;
+		},
+		close(e) {
+			console.log('关闭弹窗:', e, this.$refs[e]);
+			if (e === 'buyPop') {
+				if (this.$refs[e]) {
+					this.$refs[e].close();
+				} else {
+					console.error('找不到buyPop组件引用');
+				}
+			} else {
+				if (this.$refs[e]) {
+					this.$refs[e].close();
+				} else {
+					console.error('找不到组件引用:', e);
+				}
+			}
+
+			if (e == "resPop") {
+				if (this.prizeData && this.prizeData["user_coupon"] != null) {
+					this.$refs["couponPop"].open(this.prizeData["user_coupon"]);
+				}
+			}
+		},
+
+		open(e) {
+			console.log('打开弹窗:', e, this.$refs[e]);
+			if (e === 'buyPop') {
+				if (this.$refs[e]) {
+					this.$refs[e].open();
+				} else {
+					console.error('找不到buyPop组件引用');
+				}
+			} else {
+				if (this.$refs[e]) {
+					this.$refs[e].open();
+				} else {
+					console.error('找不到组件引用:', e);
+				}
+			}
+		},
+	},
+};
 </script>
 
 <style lang="scss">
-	.navLeft {
-		width: 100%;
-		position: fixed;
-		left: 30rpx;
-		z-index: 100;
-		height: 44px;
+.navLeft {
+	width: 100%;
+	position: fixed;
+	left: 30rpx;
+	z-index: 100;
+	height: 44px;
 
-		>view {
-			font-weight: 600;
-			font-size: 50rpx;
-			color: #ffffff;
-		}
+	>view {
+		font-weight: 600;
+		font-size: 50rpx;
+		color: #ffffff;
 	}
+}
 
-	.content {
-		padding: 0 0 300rpx;
-		background-color: #ffffff;
+.content {
+	padding: 0 0 300rpx;
+	background-color: #ffffff;
 
-		.header {
-			width: 750rpx;
-			height: 722rpx;
-			margin-top: 130rpx;
-			background-color: #d8d8d8;
+	.header {
+		width: 750rpx;
+		height: 722rpx;
+		margin-top: 130rpx;
+		background-color: #d8d8d8;
 
-			&-wuzhe {
-				width: 160rpx;
-				height: 60rpx;
-				position: absolute;
-				top: 300rpx;
-				left: 0;
+		&-wuzhe {
+			width: 160rpx;
+			height: 60rpx;
+			position: absolute;
+			top: 300rpx;
+			left: 0;
+		}
+
+		&-goodsTitel {
+			position: absolute;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #ffffff;
+			left: 50%;
+			transform: translateX(-50%);
+			bottom: 24rpx;
+			z-index: 2;
+			// text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
+		}
+
+		&-suoxiang {
+			position: absolute;
+			width: 584rpx;
+			height: 120rpx;
+			background: rgba(0, 0, 0, 0.73);
+			left: 50%;
+			transform: translateX(-50%);
+			bottom: 390rpx;
+			z-index: 2;
+
+			>image:nth-of-type(1) {
+				width: 46rpx;
+				height: 46rpx;
+				border: 2rpx solid #ffffff;
+				border-radius: 50rpx;
 			}
 
-			&-goodsTitel {
-				position: absolute;
+			>image:nth-of-type(2) {
+				width: 144rpx;
+				height: 68rpx;
+			}
+
+			>view:nth-of-type(1) {
+				width: 140rpx;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #ffffff;
+			}
+
+			>view:nth-of-type(2) {
 				font-weight: 400;
 				font-size: 24rpx;
 				color: #ffffff;
-				left: 50%;
-				transform: translateX(-50%);
-				bottom: 24rpx;
-				z-index: 2;
-				// text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
-			}
-
-			&-suoxiang {
-				position: absolute;
-				width: 584rpx;
-				height: 120rpx;
-				background: rgba(0, 0, 0, 0.73);
-				left: 50%;
-				transform: translateX(-50%);
-				bottom: 390rpx;
-				z-index: 2;
-
-				>image:nth-of-type(1) {
-					width: 46rpx;
-					height: 46rpx;
-					border: 2rpx solid #ffffff;
-					border-radius: 50rpx;
-				}
-
-				>image:nth-of-type(2) {
-					width: 144rpx;
-					height: 68rpx;
-				}
-
-				>view:nth-of-type(1) {
-					width: 140rpx;
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #ffffff;
-				}
-
-				>view:nth-of-type(2) {
-					font-weight: 400;
-					font-size: 24rpx;
-					color: #ffffff;
-				}
-			}
-
-			&-title {
-				position: absolute;
-				padding: 0 20rpx;
-				width: 280rpx;
-				height: 44rpx;
-				left: 50%;
-				transform: translateX(-50%);
-				bottom: 78rpx;
-				z-index: 10;
-
-				>text:nth-child(2n + 1) {
-					font-weight: 400;
-					font-size: 18rpx;
-					color: #333333;
-				}
-
-				>text:nth-child(2) {
-					font-weight: 700;
-					font-size: 24rpx;
-					color: #333333;
-				}
-			}
-
-			&-footer {
-				width: 750rpx;
-				position: absolute;
-				left: 0;
-				bottom: 0;
-
-				&-one {
-					width: 186rpx;
-					height: 106rpx;
-					display: flex;
-					position: absolute;
-					left: 0;
-					bottom: 0;
-					z-index: 1;
-
-					>image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-
-				&-two {
-					width: 224rpx;
-					height: 119rpx;
-					display: flex;
-					position: absolute;
-					left: 160rpx;
-					bottom: 0;
-					z-index: 1;
-
-					>image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-
-				&-three {
-					width: 224rpx;
-					height: 119rpx;
-					display: flex;
-					position: absolute;
-					right: 160rpx;
-					bottom: 0;
-
-					>image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-
-				&-four {
-					width: 186rpx;
-					height: 106rpx;
-					display: flex;
-					position: absolute;
-					right: 0;
-					bottom: 0;
-
-					>image {
-						width: 100%;
-						height: 100%;
-					}
-				}
 			}
 		}
 
-		.spylView {
-			background: #ffffff;
+		&-title {
+			position: absolute;
+			padding: 0 20rpx;
+			width: 280rpx;
+			height: 44rpx;
+			left: 50%;
+			transform: translateX(-50%);
+			bottom: 78rpx;
+			z-index: 10;
 
-			&-head {
-				box-sizing: border-box;
-				padding: 24rpx 30rpx;
-				width: 750rpx;
+			>text:nth-child(2n + 1) {
+				font-weight: 400;
+				font-size: 18rpx;
+				color: #333333;
+			}
 
-				>view:nth-child(2n + 1) {
-					>view:nth-child(1) {
-						width: 74rpx;
-						height: 56rpx;
-						background: #f5f5f5;
-						border-radius: 12rpx;
-						// border: 2rpx solid #000000;
-					}
+			>text:nth-child(2) {
+				font-weight: 700;
+				font-size: 24rpx;
+				color: #333333;
+			}
+		}
 
-					>view:nth-child(2) {
-						margin-top: 8rpx;
-						font-weight: 400;
-						font-size: 20rpx;
-						color: #ffffff;
-						text-align: center;
+		&-footer {
+			width: 750rpx;
+			position: absolute;
+			left: 0;
+			bottom: 0;
+
+			&-one {
+				width: 186rpx;
+				height: 106rpx;
+				display: flex;
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				z-index: 1;
+
+				>image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			&-two {
+				width: 224rpx;
+				height: 119rpx;
+				display: flex;
+				position: absolute;
+				left: 160rpx;
+				bottom: 0;
+				z-index: 1;
+
+				>image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			&-three {
+				width: 224rpx;
+				height: 119rpx;
+				display: flex;
+				position: absolute;
+				right: 160rpx;
+				bottom: 0;
+
+				>image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			&-four {
+				width: 186rpx;
+				height: 106rpx;
+				display: flex;
+				position: absolute;
+				right: 0;
+				bottom: 0;
+
+				>image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+
+	.spylView {
+		background: #ffffff;
+
+		&-head {
+			box-sizing: border-box;
+			padding: 24rpx 30rpx;
+			width: 750rpx;
+
+			>view:nth-child(2n + 1) {
+				>view:nth-child(1) {
+					width: 74rpx;
+					height: 56rpx;
+					background: #f5f5f5;
+					border-radius: 12rpx;
+					// border: 2rpx solid #000000;
+				}
+
+				>view:nth-child(2) {
+					margin-top: 8rpx;
+					font-weight: 400;
+					font-size: 20rpx;
+					color: #ffffff;
+					text-align: center;
+				}
+			}
+
+			>view:nth-child(2) {
+				width: 420rpx;
+
+				>view:nth-child(1) {
+					width: 420rpx;
+					height: 14rpx;
+					border-radius: 40rpx;
+
+					>text {
+						height: 14rpx;
+						border-radius: 40rpx;
+						background: #cdf022;
 					}
 				}
 
 				>view:nth-child(2) {
-					width: 420rpx;
-
-					>view:nth-child(1) {
-						width: 420rpx;
-						height: 14rpx;
-						border-radius: 40rpx;
+					padding: 14rpx 30rpx 0;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #999999;
 
+					>view {
 						>text {
-							height: 14rpx;
-							border-radius: 40rpx;
-							background: #cdf022;
-						}
-					}
-
-					>view:nth-child(2) {
-						padding: 14rpx 30rpx 0;
-						font-weight: 400;
-						font-size: 24rpx;
-						color: #999999;
-
-						>view {
-							>text {
-								font-weight: 400;
-								color: #333333;
-							}
+							font-weight: 400;
+							color: #333333;
 						}
 					}
 				}
 			}
+		}
 
-			.list {
-				padding: 30rpx;
-				display: grid;
-				grid-template-columns: repeat(3, 210rpx);
-				gap: 30rpx 30rpx;
+		.list {
+			padding: 30rpx;
+			display: grid;
+			grid-template-columns: repeat(3, 31.5%);
+			gap: 30rpx 20rpx;
+		}
+	}
 
-				.list-item {
-					width: 210rpx;
+	.fixed-btns {
+		position: fixed;
+		z-index: 10;
+		right: 20rpx;
+		bottom: 300rpx;
+
+		.btn {
+			width: 94rpx;
+			height: 110rpx;
+			margin-top: 40rpx;
+		}
+	}
+
+	.ft-fixed {
+		position: fixed;
+		z-index: 10;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: center;
+		padding-bottom: 40rpx;
+		background: #ffffff;
+		padding-top: 20rpx;
+
+		.lt-btn {
+			width: 690rpx;
+			height: 60rpx;
+			background: linear-gradient(90deg, #2dcbff 0%, #ff873a 100%);
+			border-radius: 40rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-bottom: 20rpx;
+			font-size: 32rpx;
+			font-weight: 400;
+			color: #ffffff;
+		}
+
+		.btn {
+			width: 120rpx;
+			height: 68rpx;
+			position: relative;
+
+			>view {
+				white-space: nowrap;
+				font-weight: 400;
+				font-size: 52rpx;
+				color: #ffffff;
+				position: relative;
+				text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
+
+				// &::before {
+				// 	content: '';
+				// 	position: absolute;
+				// 	bottom: 10rpx;
+				// 	left: -8rpx;
+				// 	width: 22rpx;
+				// 	height: 22rpx;
+				// 	background: url($imgurl+'common/jiantou1.png') no-repeat 0 0 / 100% 100%;
+				// }
+
+				// &::after {
+				// 	content: '';
+				// 	position: absolute;
+				// 	top: 0rpx;
+				// 	right: -10rpx;
+				// 	width: 22rpx;
+				// 	height: 22rpx;
+				// 	background: url($imgurl+'common/jiantou2.png') no-repeat 0 0 / 100% 100%;
+				// }
+			}
+		}
+	}
+
+	.buy-pop {
+		padding: 0 30rpx;
+		box-sizing: border-box;
+		background: #f7f7f7;
+		padding-bottom: 30rpx;
+		border-radius: 16rpx 16rpx 0rpx 0rpx;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: -62rpx;
+			left: 0;
+			width: 750rpx;
+			height: 62rpx;
+			// background: url($imgurl+'common/ding.png') no-repeat 0 0 / 100% 100%;
+		}
+
+		.buy-pop-hd {
+			padding: 20rpx 0;
+			padding-left: 10rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			font-size: 40rpx;
+			font-weight: 500;
+			color: #333333;
+
+			.close {
+				width: 60rpx;
+				height: 60rpx;
+			}
+		}
+
+		.card-row {
+			padding: 16rpx 0;
+			display: flex;
+			height: 82rpx;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 24rpx;
+			border-radius: 16rpx;
+			background-color: #fff;
+
+			.title {
+				font-size: 20rpx;
+				font-weight: 400;
+				margin-left: 24rpx;
+				color: #333333;
+			}
+
+			.row-r {
+				display: flex;
+				align-items: center;
+
+				font-size: 24rpx;
+				font-weight: 400;
+				color: #999999;
+
+				.icon {
+					width: 10rpx;
+					height: 17rpx;
+					color: #999999;
+					margin-left: 10rpx;
+					margin-right: 24rpx;
+				}
+			}
+		}
+
+		.buy-card {
+			border-radius: 20rpx;
+			padding: 30rpx 30rpx 10rpx;
+			background: #ffffff;
+
+			.buy-info {
+				display: flex;
+
+				.pic {
+					width: 190rpx;
+					height: 190rpx;
+					border-radius: 10rpx;
+				}
+
+				.info-r {
+					width: calc(100% - 190rpx);
 					box-sizing: border-box;
-					background-color: #f8f8f8;
-					border-radius: 16rpx;
+					display: flex;
+					flex-flow: column nowrap;
+					justify-content: space-between;
+					padding: 10rpx 0 10rpx 30rpx;
 
-					.pic {
-						width: 210rpx;
-						height: 210rpx;
-						box-sizing: border-box;
-						position: relative;
-						background: #3b3941;
-						border-radius: 16rpx 16rpx 0rpx 0rpx;
+					.title {
+						font-size: 24rpx;
+						font-weight: 400;
+						color: #333333;
+					}
 
-						.pic-img {
-							width: 210rpx;
-							height: 210rpx;
-							// border-radius: 24rpx;
-						}
+					.hang1 {}
 
-						.type-tag {
-							position: absolute;
-							top: 12rpx;
-							left: 12rpx;
-							border-radius: 18rpx;
-							font-weight: 400;
-							font-size: 20rpx;
-							color: #ffffff;
-							min-width: 78rpx;
-							height: 38rpx;
-							box-sizing: border-box;
+					.type {
+						font-size: 20rpx;
+						font-weight: 400;
+						color: #999999;
+					}
+
+					.price-num {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+
+						.price {
+							font-weight: 500;
+							font-size: 16rpx;
+							color: #333333;
+
+							text {
+								font-size: 28rpx;
+							}
 						}
 
 						.num {
-							position: absolute;
-							left: 50%;
-							padding: 0 10rpx;
-							transform: translateX(-50%);
-							bottom: 8rpx;
-							border-radius: 18rpx;
-							min-width: 66rpx;
-							height: 38rpx;
+							font-size: 28rpx;
 							font-weight: 400;
-							font-size: 20rpx;
-							background-color: rgba(255, 255, 255, 0.5);
-							color: #000000;
+							color: #999999;
 						}
-
-						.yu-tag {
-							position: absolute;
-							right: 10rpx;
-							top: 10rpx;
-							z-index: 1;
-							display: flex;
-							justify-content: center;
-							align-items: center;
-							font-weight: 400;
-							font-size: 32rpx;
-							color: #ff873a;
-							text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0,
-								#fff 0 -1px 0;
-						}
-
-						.shadow {
-							position: absolute;
-							z-index: 1;
-							left: 0;
-							top: 0;
-							width: 100%;
-							height: 100%;
-							background: rgba(0, 0, 0, 0.6);
-							border-radius: 24rpx;
-
-							>image {
-								width: 84.93rpx;
-								height: 98rpx;
-							}
-						}
-					}
-
-					.title {
-						padding: 28rpx 10rpx 0;
-						font-size: 20rpx;
-						font-weight: 400;
-						color: #333333;
-					}
-
-					.desc {
-						padding: 24rpx 10rpx 0;
-						font-size: 18rpx;
-						font-weight: 300;
-						color: #f39205;
-					}
-
-					.price {
-						padding: 24rpx 10rpx 28rpx;
-						font-weight: 400;
-						font-size: 16rpx;
-						color: #333333;
 					}
 				}
 			}
-		}
 
-		.fixed-btns {
-			position: fixed;
-			z-index: 10;
-			right: 20rpx;
-			bottom: 300rpx;
-
-			.btn {
-				width: 94rpx;
-				height: 110rpx;
-				margin-top: 40rpx;
-			}
-		}
-
-		.ft-fixed {
-			position: fixed;
-			z-index: 10;
-			left: 0;
-			bottom: 0;
-			width: 100%;
-			display: flex;
-			flex-flow: row wrap;
-			justify-content: center;
-			padding-bottom: 40rpx;
-			background: #ffffff;
-			padding-top: 20rpx;
-
-			.lt-btn {
-				width: 690rpx;
-				height: 60rpx;
-				background: linear-gradient(90deg, #2dcbff 0%, #ff873a 100%);
-				border-radius: 40rpx;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				margin-bottom: 20rpx;
-				font-size: 32rpx;
-				font-weight: 400;
-				color: #ffffff;
-			}
-
-			.btn {
-				width: 120rpx;
-				height: 68rpx;
-				position: relative;
-
-				>view {
-					white-space: nowrap;
-					font-weight: 400;
-					font-size: 52rpx;
-					color: #ffffff;
-					position: relative;
-					text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
-
-					// &::before {
-					// 	content: '';
-					// 	position: absolute;
-					// 	bottom: 10rpx;
-					// 	left: -8rpx;
-					// 	width: 22rpx;
-					// 	height: 22rpx;
-					// 	background: url($imgurl+'common/jiantou1.png') no-repeat 0 0 / 100% 100%;
-					// }
-
-					// &::after {
-					// 	content: '';
-					// 	position: absolute;
-					// 	top: 0rpx;
-					// 	right: -10rpx;
-					// 	width: 22rpx;
-					// 	height: 22rpx;
-					// 	background: url($imgurl+'common/jiantou2.png') no-repeat 0 0 / 100% 100%;
-					// }
-				}
-			}
-		}
-
-		.buy-pop {
-			padding: 0 30rpx;
-			box-sizing: border-box;
-			background: #f7f7f7;
-			padding-bottom: 30rpx;
-			border-radius: 16rpx 16rpx 0rpx 0rpx;
-
-			&::after {
-				content: "";
-				position: absolute;
-				top: -62rpx;
-				left: 0;
-				width: 750rpx;
-				height: 62rpx;
-				// background: url($imgurl+'common/ding.png') no-repeat 0 0 / 100% 100%;
-			}
-
-			.buy-pop-hd {
-				padding: 20rpx 0;
-				padding-left: 10rpx;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-
-				font-size: 40rpx;
-				font-weight: 500;
-				color: #333333;
-
-				.close {
-					width: 60rpx;
-					height: 60rpx;
-				}
+			.line {
+				height: 1px;
+				background: #222222;
+				margin: 30rpx 0 10rpx;
 			}
 
 			.card-row {
 				padding: 16rpx 0;
 				display: flex;
-				height: 82rpx;
 				justify-content: space-between;
 				align-items: center;
-				margin-top: 24rpx;
-				border-radius: 16rpx;
-				background-color: #fff;
 
 				.title {
-					font-size: 20rpx;
+					font-size: 28rpx;
 					font-weight: 400;
-					margin-left: 24rpx;
-					color: #333333;
+					color: #ffffff;
 				}
 
 				.row-r {
@@ -1188,322 +1162,226 @@
 
 					font-size: 24rpx;
 					font-weight: 400;
-					color: #999999;
+					color: #ffffff;
 
 					.icon {
-						width: 10rpx;
-						height: 17rpx;
-						color: #999999;
-						margin-left: 10rpx;
-						margin-right: 24rpx;
+						width: 32rpx;
+						height: 32rpx;
 					}
 				}
 			}
-
-			.buy-card {
-				border-radius: 20rpx;
-				padding: 30rpx 30rpx 10rpx;
-				background: #ffffff;
-
-				.buy-info {
-					display: flex;
-
-					.pic {
-						width: 190rpx;
-						height: 190rpx;
-						border-radius: 10rpx;
-					}
-
-					.info-r {
-						width: calc(100% - 190rpx);
-						box-sizing: border-box;
-						display: flex;
-						flex-flow: column nowrap;
-						justify-content: space-between;
-						padding: 10rpx 0 10rpx 30rpx;
-
-						.title {
-							font-size: 24rpx;
-							font-weight: 400;
-							color: #333333;
-						}
-
-						.hang1 {}
-
-						.type {
-							font-size: 20rpx;
-							font-weight: 400;
-							color: #999999;
-						}
-
-						.price-num {
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-
-							.price {
-								font-weight: 500;
-								font-size: 16rpx;
-								color: #333333;
-
-								text {
-									font-size: 28rpx;
-								}
-							}
-
-							.num {
-								font-size: 28rpx;
-								font-weight: 400;
-								color: #999999;
-							}
-						}
-					}
-				}
-
-				.line {
-					height: 1px;
-					background: #222222;
-					margin: 30rpx 0 10rpx;
-				}
-
-				.card-row {
-					padding: 16rpx 0;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-
-					.title {
-						font-size: 28rpx;
-						font-weight: 400;
-						color: #ffffff;
-					}
-
-					.row-r {
-						display: flex;
-						align-items: center;
-
-						font-size: 24rpx;
-						font-weight: 400;
-						color: #ffffff;
-
-						.icon {
-							width: 32rpx;
-							height: 32rpx;
-						}
-					}
-				}
-			}
-
-			.pay-title {
-				margin-top: 30rpx;
-				font-size: 32rpx;
-				font-weight: 400;
-				color: #ffffff;
-			}
-
-			.pay-type {
-				padding: 30rpx 24rpx;
-				border-radius: 20rpx;
-				margin-top: 20rpx;
-				display: flex;
-				align-items: center;
-				background: #ffffff;
-
-				.icon {
-					width: 32rpx;
-					height: 32rpx;
-				}
-
-				.title {
-					flex: 1;
-					font-size: 24rpx;
-					font-weight: 500;
-					color: #333333;
-				}
-			}
-
-			.agree {
-				display: flex;
-				margin-top: 30rpx;
-				font-size: 24rpx;
-				font-weight: 400;
-				color: #999999;
-				line-height: 32rpx;
-
-				.icon {
-					width: 32rpx;
-					height: 32rpx;
-					margin-right: 10rpx;
-				}
-			}
-
-			.rule {
-				padding: 20rpx;
-				border-radius: 20rpx;
-				box-sizing: border-box;
-				margin: 20rpx 0 0;
-				height: 160rpx;
-				background: #f9f8e1;
-				border-radius: 20rpx;
-
-				.rule-inner {
-					max-height: 120rpx;
-					font-size: 20rpx;
-					font-weight: 400;
-					color: #333333;
-				}
-			}
-
-			.pay-btn {
-				margin: 30rpx auto 0;
-				width: 686rpx;
-				height: 84rpx;
-				background: url($imgurl + "common/payBtn.png") no-repeat 0 0 / 100% 100%;
-				display: flex;
-				margin-bottom: 90rpx;
-				align-items: center;
-				justify-content: center;
-				font-weight: 500;
-				color: #cdef27;
-
-				>text:nth-child(1) {
-					font-size: 28rpx;
-				}
-
-				>text:nth-child(2) {
-					font-size: 36rpx;
-				}
-			}
 		}
 
-		.res-pop {
-			width: 100%;
-			height: 100vh;
-			position: relative;
-			background: url($imgurl + "common/yb.png") no-repeat 0 0 / 100% 100%;
-
-			.res-pop-hd {
-				width: 400rpx;
-				height: 108rpx;
-				background: url($imgurl + "common/gxhd.png") no-repeat 0 0 / 100% 100%;
-			}
-
-			.res-pop-bd {
-				width: 636rpx;
-				height: 760rpx;
-				background-color: #ffffff;
-				border-radius: 16rpx;
-				margin: 36rpx auto;
-
-				.res-list {
-					padding: 20rpx 10rpx;
-					display: grid;
-					grid-template-columns: repeat(3, 210rpx);
-					gap: 24rpx 10rpx;
-
-					.res-item {
-						width: 180rpx;
-						height: 240rpx;
-						background-color: #f8f8f8;
-						border-radius: 16rpx;
-
-						.pic {
-							width: 180rpx;
-							height: 180rpx;
-							position: relative;
-							background: #d8d8d8;
-							border-radius: 16rpx 16rpx 0rpx 0rpx;
-
-							>image {
-								width: 180rpx;
-								height: 180rpx;
-								border-radius: 16rpx 16rpx 0rpx 0rpx;
-							}
-
-							.type-tag {
-								position: absolute;
-								left: 12rpx;
-								top: 12rpx;
-								z-index: 2;
-								width: 68rpx;
-								height: 32rpx;
-								background: url($imgurl + "common/chouLabel.png") no-repeat 0 0 / 100% 100%;
-								font-weight: 400;
-								font-size: 14rpx;
-								color: #ffffff;
-							}
-
-							.num {
-								position: absolute;
-								z-index: 2;
-								left: 50%;
-								transform: translateX(-50%);
-								bottom: 10rpx;
-								min-width: 42rpx;
-								height: 28rpx;
-								font-weight: 400;
-								font-size: 14rpx;
-								color: #333333;
-								background-color: rgba(255, 255, 255, 0.5);
-								border-radius: 18rpx;
-							}
-						}
-
-						.title {
-							padding: 22rpx 10rpx 0;
-							font-weight: 400;
-							font-size: 16rpx;
-							color: #333333;
-						}
-
-						.exchange {
-							padding: 10rpx 10rpx;
-							font-weight: 400;
-							font-size: 20rpx;
-							color: #ffffff;
-						}
-					}
-				}
-			}
-
-			.res-pop-ft {
-				width: 750rpx;
-				display: flex;
-				justify-content: space-evenly;
-
-				.ft-btn {
-					width: 200rpx;
-					height: 68rpx;
-					font-weight: 400;
-					font-size: 24rpx;
-				}
-
-				>view:nth-child(1) {
-					color: #333333;
-				}
-
-				>view:nth-child(2) {
-					color: #333333;
-				}
-			}
+		.pay-title {
+			margin-top: 30rpx;
+			font-size: 32rpx;
+			font-weight: 400;
+			color: #ffffff;
 		}
 
-		.ani-pop {
-			width: 100vw;
-			height: 100vh;
-			position: fixed;
-			left: 0;
-			top: 0;
-			z-index: 88;
+		.pay-type {
+			padding: 30rpx 24rpx;
+			border-radius: 20rpx;
+			margin-top: 20rpx;
 			display: flex;
-			justify-content: center;
 			align-items: center;
-			background: #000;
+			background: #ffffff;
 
-			image {
-				width: 100%;
-				height: 1624rpx;
+			.icon {
+				width: 32rpx;
+				height: 32rpx;
+			}
+
+			.title {
+				flex: 1;
+				font-size: 24rpx;
+				font-weight: 500;
+				color: #333333;
+			}
+		}
+
+		.agree {
+			display: flex;
+			margin-top: 30rpx;
+			font-size: 24rpx;
+			font-weight: 400;
+			color: #999999;
+			line-height: 32rpx;
+
+			.icon {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 10rpx;
+			}
+		}
+
+		.rule {
+			padding: 20rpx;
+			border-radius: 20rpx;
+			box-sizing: border-box;
+			margin: 20rpx 0 0;
+			height: 160rpx;
+			background: #f9f8e1;
+			border-radius: 20rpx;
+
+			.rule-inner {
+				max-height: 120rpx;
+				font-size: 20rpx;
+				font-weight: 400;
+				color: #333333;
+			}
+		}
+
+		.pay-btn {
+			margin: 30rpx auto 0;
+			width: 686rpx;
+			height: 84rpx;
+			background: url($imgurl + "common/payBtn.png") no-repeat 0 0 / 100% 100%;
+			display: flex;
+			margin-bottom: 90rpx;
+			align-items: center;
+			justify-content: center;
+			font-weight: 500;
+			color: #cdef27;
+
+			>text:nth-child(1) {
+				font-size: 28rpx;
+			}
+
+			>text:nth-child(2) {
+				font-size: 36rpx;
 			}
 		}
 	}
+
+	.res-pop {
+		width: 100%;
+		height: 100vh;
+		position: relative;
+		background: url($imgurl + "common/yb.png") no-repeat 0 0 / 100% 100%;
+
+		.res-pop-hd {
+			width: 400rpx;
+			height: 108rpx;
+			background: url($imgurl + "common/gxhd.png") no-repeat 0 0 / 100% 100%;
+		}
+
+		.res-pop-bd {
+			width: 636rpx;
+			height: 760rpx;
+			background-color: #ffffff;
+			border-radius: 16rpx;
+			margin: 36rpx auto;
+
+			.res-list {
+				padding: 20rpx 10rpx;
+				display: grid;
+				grid-template-columns: repeat(3, 210rpx);
+				gap: 24rpx 10rpx;
+
+				.res-item {
+					width: 180rpx;
+					height: 240rpx;
+					background-color: #f8f8f8;
+					border-radius: 16rpx;
+
+					.pic {
+						width: 180rpx;
+						height: 180rpx;
+						position: relative;
+						background: #d8d8d8;
+						border-radius: 16rpx 16rpx 0rpx 0rpx;
+
+						>image {
+							width: 180rpx;
+							height: 180rpx;
+							border-radius: 16rpx 16rpx 0rpx 0rpx;
+						}
+
+						.type-tag {
+							position: absolute;
+							left: 12rpx;
+							top: 12rpx;
+							z-index: 2;
+							width: 68rpx;
+							height: 32rpx;
+							background: url($imgurl + "common/chouLabel.png") no-repeat 0 0 / 100% 100%;
+							font-weight: 400;
+							font-size: 14rpx;
+							color: #ffffff;
+						}
+
+						.num {
+							position: absolute;
+							z-index: 2;
+							left: 50%;
+							transform: translateX(-50%);
+							bottom: 10rpx;
+							min-width: 42rpx;
+							height: 28rpx;
+							font-weight: 400;
+							font-size: 14rpx;
+							color: #333333;
+							background-color: rgba(255, 255, 255, 0.5);
+							border-radius: 18rpx;
+						}
+					}
+
+					.title {
+						padding: 22rpx 10rpx 0;
+						font-weight: 400;
+						font-size: 16rpx;
+						color: #333333;
+					}
+
+					.exchange {
+						padding: 10rpx 10rpx;
+						font-weight: 400;
+						font-size: 20rpx;
+						color: #ffffff;
+					}
+				}
+			}
+		}
+
+		.res-pop-ft {
+			width: 750rpx;
+			display: flex;
+			justify-content: space-evenly;
+
+			.ft-btn {
+				width: 200rpx;
+				height: 68rpx;
+				font-weight: 400;
+				font-size: 24rpx;
+			}
+
+			>view:nth-child(1) {
+				color: #333333;
+			}
+
+			>view:nth-child(2) {
+				color: #333333;
+			}
+		}
+	}
+
+	.ani-pop {
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		left: 0;
+		top: 0;
+		z-index: 88;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: #000;
+
+		image {
+			width: 100%;
+			height: 1624rpx;
+		}
+	}
+}
 </style>
\ No newline at end of file