From 5af976d289ceacb0816690f038d93ab4e6a3b4c7 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Mon, 7 Apr 2025 01:07:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail-list-item/detail-list-item.vue     |   77 +-
 .../detail-preview-popup.vue                  |   19 +-
 pages/shouye/detail.vue                       |   81 +-
 pages/shouye/detail_wuxian.vue                | 4323 +++++++++--------
 4 files changed, 2332 insertions(+), 2168 deletions(-)

diff --git a/components/detail-list-item/detail-list-item.vue b/components/detail-list-item/detail-list-item.vue
index 14b9ce5..50a9484 100644
--- a/components/detail-list-item/detail-list-item.vue
+++ b/components/detail-list-item/detail-list-item.vue
@@ -1,37 +1,47 @@
 <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 : "" }}
+    <!-- 图片插槽 -->
+    <slot name="image">
+      <view class="pic center" :style="{ height: imageHeight }">
+        <image :src="item.imgurl" lazy-load mode="aspectFill" :style="{ height: imageHeight }"></image>
+        <view class="tag center" v-if="item.shang_info != null"
+          :style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">
+          {{ item.shang_info ? item.shang_info.title : "" }}
+        </view>
+        <view class="num center" v-if="item.stock != null">{{ item.surplus_stock }}/{{ item.stock }}</view>
+        <!-- 预售标签 -->
+        <view v-if="item.goods_type == 2" class="yu-tag ziti">预售</view>
+        <view v-if="item.doubling != null && item.doubling > 1" class="yu-tag ziti"
+          style="top:75%;right: 15rpx; font-size:40rpx;color: #FF5722;font-style: italic;transform: skewX(-10deg);">x{{
+            item.doubling }}</view>
+        <!-- 售罄遮罩 -->
+        <view class="sold-out-mask center" v-if="item.surplus_stock != null && item.surplus_stock <= 0">
+          <text>售罄</text>
+        </view>
       </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>
+    </slot>
+
+    <!-- 内容插槽 -->
+    <slot name="content">
+      <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>
-    <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>
+    </slot>
   </view>
 </template>
 
 <script>
 export default {
   name: 'DetailListItem',
-  
+
   props: {
     /**
      * 商品数据项
@@ -50,9 +60,18 @@ export default {
       type: Object,
       required: true,
       default: () => ({})
+    },
+
+    /**
+     * 图片高度
+     * @type {String}
+     */
+    imageHeight: {
+      type: String,
+      default: '220rpx'
     }
   },
-  
+
   methods: {
     /**
      * 处理点击事件
@@ -80,14 +99,12 @@ export default {
 
   .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;
     }
 
@@ -148,7 +165,7 @@ export default {
     line-height: 28rpx;
     color: #333333;
   }
-  
+
   // 售罄遮罩
   .sold-out-mask {
     position: absolute;
@@ -170,7 +187,7 @@ export default {
       text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
     }
   }
-  
+
   .tag {
     position: absolute;
     display: flex;
@@ -200,4 +217,4 @@ export default {
     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
+</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 a347dda..e62562d 100644
--- a/components/detail-preview-popup/detail-preview-popup.vue
+++ b/components/detail-preview-popup/detail-preview-popup.vue
@@ -7,7 +7,7 @@
           <!-- 正面：商品图片 -->
           <view class="front">
             <view class="pic center relative" @click="toggleList">
-              <image :src="innerImgUrl" lazy-load mode="aspectFit"></image>
+              <image :src="innerImgUrl" lazy-load mode="aspectFill"></image>
               <view class="type-tag justify-center"
                 :style="{ backgroundColor: dataItem.shang_info ? dataItem.shang_info.color : '#000000' }"
                 v-if="innerTipTitle">{{ innerTipTitle }}</view>
@@ -32,12 +32,8 @@
                 </view>
                 <!-- 赏品列表内容 -->
                 <view class="res-list" v-else>
-                  <detail-list-item 
-                    v-for="(item, i) in children" 
-                    :key="item.id || i"
-                    :item="item"
-                    @click="handleItemClick"
-                  />
+                  <detail-list-item v-for="(item, i) in children" :key="item.id || i" :item="item" imageHeight="180rpx"
+                    @click="handleItemClick" />
                 </view>
               </scroll-view>
             </view>
@@ -228,9 +224,11 @@ export default {
       this.loadError = false;
       this.showList = false;
       this.isTips = false;
-
+      this.dataItem = data.dataItem;
       // 更新商品基本信息
       if (data.dataItem) {
+        console.log(data.dataItem.shang_info.color);
+
         const item = data.dataItem;
         this.innerTitle = item.title || '';
         this.innerImgUrl = item.imgurl || '';
@@ -241,11 +239,12 @@ export default {
       // 更新其他信息
       if (data.productType) this.innerProductType = data.productType;
       if (data.extraInfo) this.innerExtraInfo = data.extraInfo;
+      console.log('data.goods', data.goods, data.dataItem);
 
       // 设置商品和数据项
       if (data.dataItem && data.goods && data.dataItem.goods_type == 4) {
         this.goods = data.goods;
-        this.dataItem = data.dataItem;
+
         this.isTips = true;
         this.children = [];
       }
@@ -585,6 +584,7 @@ export default {
 }
 
 @keyframes bounce {
+
   0%,
   100% {
     transform: scale(0);
@@ -595,5 +595,6 @@ export default {
     transform: scale(1);
     opacity: 1;
   }
+
 }
 </style>
\ No newline at end of file
diff --git a/pages/shouye/detail.vue b/pages/shouye/detail.vue
index 4c07f68..43f5642 100644
--- a/pages/shouye/detail.vue
+++ b/pages/shouye/detail.vue
@@ -89,8 +89,21 @@
 			</view>
 			<!-- 赏品列表 -->
 			<view class="list">
-				<detail-list-item v-for="(item, i) in pageData.goodslist" :key="i" :item="item"
-					@click="previewDetail" />
+				<detail-list-item v-for="(item, i) in pageData.goodslist" :key="i" :item="item" @click="previewDetail">
+					<template #content>
+						<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: 22rpx;">￥{{ item.sc_money }}</text></text>
+							</view>
+						</view>
+					</template>
+				</detail-list-item>
 			</view>
 		</view>
 
@@ -1383,5 +1396,69 @@ export default {
 			height: 1624rpx;
 		}
 	}
+
+
+	.item-info {
+		padding: 5rpx 0;
+	}
+
+	.item-title {
+		padding: 0 2%;
+		margin: 1rpx 0;
+		width: 100%;
+		font-size: 21rpx;
+		text-align: left;
+		height: 35rpx;
+		line-height: 35rpx;
+		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: 21rpx;
+		text-align: left;
+		height: 35rpx;
+		line-height: 35rpx;
+		color: #f39205;
+	}
+
+	.item-price {
+		padding: 0 2%;
+		margin: 1rpx 0;
+		width: 100%;
+		font-size: 21rpx;
+		text-align: left;
+		height: 35rpx;
+		line-height: 35rpx;
+		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);
+		}
+	}
 }
 </style>
\ No newline at end of file
diff --git a/pages/shouye/detail_wuxian.vue b/pages/shouye/detail_wuxian.vue
index 3ce0651..c041728 100644
--- a/pages/shouye/detail_wuxian.vue
+++ b/pages/shouye/detail_wuxian.vue
@@ -5,22 +5,22 @@
 -->
 <template>
 	<view class="content minHeight100">
-		<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
+		<view class="navLeft align-center" :style="{ top: $sys().statusBarHeight + 'px' }" @tap="$c.back(1)">
 			<uni-icons type="left" color="#000000"></uni-icons>
 			<!-- <view class="" style="color: #000000; margin-left: 240rpx;">
 				{{$c.detailPageTitle((pageData && pageData.goods) || '')}}
 			</view> -->
 		</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%'}">
-			<view class="header-wuzhe flex" v-if="pageData.goods.is_shou_zhe==1">
+
+
+		<view class="header relative" v-if="pageData && pageData.goods"
+			: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>
 			</view>
 			<view class="header-goodsTitel">{{ pageData.goods.title }}</view>
@@ -29,16 +29,16 @@
 				<image :src="pageData.lock_info.goods_lock_user_headimg" mode="aspectFill"></image>
 				<view class="hidden ml10">{{ pageData.lock_info.goods_lock_user_nickname }}</view>
 				<image class="ml20" :src="$img1('index/suoxinag.png')" mode="aspectFit"></image>
-				<view class="ml30">倒计时：{{secNum}}S</view>
+				<view class="ml30">倒计时：{{ secNum }}S</view>
 			</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>
 				<text>
 					<template>￥</template>
-					<template>{{pageData.goods.price}}</template>
+					<template>{{ pageData.goods.price }}</template>
 				</text>
 				<text>
 					<template>/抽</template>
@@ -46,7 +46,7 @@
 			</view>
 			<view class="header-canyu row align-center">
 				<view class="header-canyu-imgs flex">
-					<image v-for="(item, i) in pageData.goods.join_user.slice(0, 3)" :key="i" :style="{'z-index': i }"
+					<image v-for="(item, i) in pageData.goods.join_user.slice(0, 3)" :key="i" :style="{ 'z-index': i }"
 						:src="item" mode="aspectFill"></image>
 				</view>
 				<view class="header-canyu-num mt10">{{ pageData.goods.join_count }}次参与</view>
@@ -55,10 +55,10 @@
 
 			<view class="header-shoucang justify-center" style=" flex-direction: column; margin-right: 48rpx;"
 				@tap="toggleCollect">
-				<image :src="pageData.goods.collection_is?$img1('index/sc1.png'):$img1('index/sc2.png')"></image>
+				<image :src="pageData.goods.collection_is ? $img1('index/sc1.png') : $img1('index/sc2.png')"></image>
 				<text>收藏</text>
 			</view>
-			
+
 			<view
 				style="width: 100%; height: 232rpx; position: absolute; bottom: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));">
 			</view>
@@ -73,15 +73,15 @@
 				</image>
 			</view>
 			<view class="" style="margin-left: 26rpx;" @tap="tabChange(1)">
-				<image style="width: 160rpx; height: 92rpx;" v-if="tabCur==1" :src="$img1('common/spyl1.png')">
+				<image style="width: 160rpx; height: 92rpx;" v-if="tabCur == 1" :src="$img1('common/spyl1.png')">
 				</image>
-				<image style="width: 160rpx; height: 92rpx;" v-if="tabCur==2" :src="$img1('common/spyl2.png')">
+				<image style="width: 160rpx; height: 92rpx;" v-if="tabCur == 2" :src="$img1('common/spyl2.png')">
 				</image>
 			</view>
 			<view class="" style="margin-left: 26rpx;" @tap="tabChange(2)">
-				<image style="width: 160rpx; height: 92rpx;" v-if="tabCur==1" :src="$img1('common/zsjl22.png')">
+				<image style="width: 160rpx; height: 92rpx;" v-if="tabCur == 1" :src="$img1('common/zsjl22.png')">
 				</image>
-				<image style="width: 160rpx; height: 92rpx;" v-if="tabCur==2" :src="$img1('common/zsjl12.png')">
+				<image style="width: 160rpx; height: 92rpx;" v-if="tabCur == 2" :src="$img1('common/zsjl12.png')">
 				</image>
 			</view>
 		</view>
@@ -92,13 +92,13 @@
 				<image :src="$img1('index/king.png')"></image>
 			</view>
 			<view class="lingzhu-content ml30 flex-1">
-				<view class="">{{bossCardData.king_user.nickname}}</view>
+				<view class="">{{ bossCardData.king_user.nickname }}</view>
 				<view class="">
 					第
-					<text>{{bossCardData.king_user.count}}</text>
+					<text>{{ bossCardData.king_user.count }}</text>
 					发晋升领主
 					已占领
-					<text>{{bossCardData.king_user.z_nums}}</text>
+					<text>{{ bossCardData.king_user.z_nums }}</text>
 					发
 				</view>
 			</view>
@@ -125,8 +125,7 @@
 
 
 		<!-- 商品预览 -->
-		<view v-if="tabCur == 1 && pageData" class="list">
-
+		<view v-if="tabCur == 1 && pageData" class="list" style="padding: 30rpx 20rpx 0;">
 			<view class="list-item common_bg mb30" v-for="(item, i) in pageData.goodslist" :key="i">
 				<view class="list-title common_bg align-center">
 					<view class="align-center">
@@ -134,20 +133,21 @@
 						<text class="ml20" style="color: #999999;">{{ item.pro }}</text>
 					</view>
 				</view>
-				<!-- <scroll-view scroll-x></scroll-view> -->
 				<view class="goods-list justify-center">
 					<template v-for="(a, b) in item.goods_list">
-						<view class="goods-item column" :key="b" @click="previewDetail(item, a)">
-							<view class="pic flex">
-								<image class="img100" style="border-radius: 16rpx 16rpx 0rpx 0rpx;" :src="a.imgurl" mode="aspectFill"></image>
-								<view v-if="a.goods_type == 2" class="yu-tag ziti">预售</view>
-								<view v-if="a.doubling>1"  class="yu-tag ziti" style="bottom:79%;right: 15rpx; font-size:40rpx;color: #FF5722;font-style: italic;transform: skewX(-10deg);">x{{ a.doubling }}</view>
-							</view>
-							<view class="title hang1">
-								{{ a.title }}
-							</view>
-							<view class="price">售价:{{ a.price }}</view>
-						</view>
+						<detail-list-item :item="a" @click="previewDetail(item, a)" :key="b">
+							<template #content>
+								<view class="item-info">
+									<view class="item-title hang1">
+										<text>{{ a.title }}</text>
+									</view>
+									<view class="item-price hang1">
+										<text>售价:<text style="font-size: 22rpx;">{{ a.price }}</text></text>
+									</view>
+								</view>
+							</template>
+						</detail-list-item>
+
 					</template>
 				</view>
 			</view>
@@ -185,7 +185,7 @@
 								<image class="img100" :src="a.goodslist_imgurl"></image>
 							</view>
 							<view class="align-end column">
-								<view class="center" :style="{background: a.shang_color}">{{ a.shang_title}}</view>
+								<view class="center" :style="{ background: a.shang_color }">{{ a.shang_title }}</view>
 								<view class="align-center mt10">
 									<view class="title hang1">
 										{{ a.goodslist_title }}
@@ -216,19 +216,19 @@
     </view> -->
 		<view v-if="pageData" class="ft-fixed justify-evenly">
 			<view class="btn common_bg column center"
-				:style="{ backgroundImage: `url(${$img1('common/chouBtn1.png')})`}" @click="confirmSubmit([0, 1])">
+				:style="{ backgroundImage: `url(${$img1('common/chouBtn1.png')})` }" @click="confirmSubmit([0, 1])">
 				<!-- <view>冲一发</view> -->
 			</view>
-			<view class="btn common_bg column center" :style="{backgroundImage: `url(${$img1('common/chouBtn3.png')})`}"
-				@click="confirmSubmit([0, 3])">
+			<view class="btn common_bg column center"
+				:style="{ backgroundImage: `url(${$img1('common/chouBtn3.png')})` }" @click="confirmSubmit([0, 3])">
 				<!-- <view>冲三发</view> -->
 			</view>
-			<view class="btn common_bg column center" :style="{backgroundImage: `url(${$img1('common/chouBtn5.png')})`}"
-				@click="confirmSubmit([0, 5])">
+			<view class="btn common_bg column center"
+				:style="{ backgroundImage: `url(${$img1('common/chouBtn5.png')})` }" @click="confirmSubmit([0, 5])">
 				<!-- <view>冲五发</view> -->
 			</view>
 			<view class="btn common_bg column center"
-				:style="{backgroundImage: `url(${$img1('common/chouBtn10.png')})`}" @click="confirmSubmit([0, 10])">
+				:style="{ backgroundImage: `url(${$img1('common/chouBtn10.png')})` }" @click="confirmSubmit([0, 10])">
 				<!-- <view>冲十发</view> -->
 			</view>
 		</view>
@@ -242,11 +242,13 @@
 							<view class="pic center">
 								<image :src="item.goodslist_imgurl" lazy-load></image>
 								<view class="type-tag center"
-									:style="{backgroundColor: getBgColor(item.shang_title), color: getTextColor(item.shang_title)}">
+									:style="{ backgroundColor: getBgColor(item.shang_title), color: getTextColor(item.shang_title) }">
 									{{ item.shang_title }}
 								</view>
 								<view class="num center">{{ item.prize_num || '1' }}</view>
-								<view v-if="item.doubling>1"  class="yu-tag-text ziti" style="bottom:75%;right: 15rpx; font-size:40rpx;color: #FF5722;font-style: italic;transform: skewX(-10deg);">x{{ item.doubling }}</view>
+								<view v-if="item.doubling > 1" class="yu-tag-text ziti"
+									style="bottom:75%;right: 15rpx; font-size:40rpx;color: #FF5722;font-style: italic;transform: skewX(-10deg);">
+									x{{ item.doubling }}</view>
 							</view>
 							<view class="title hang1" style="text-align: center;">
 								<text> {{ item.goodslist_title }}</text>
@@ -265,14 +267,14 @@
 				<view class="res-pop-ft">
 					<view class="btn-list">
 						<view class="ft-btn common_bg justify-center center" :style="{
-								backgroundImage: `url(${$img1('common/quhegui.png')})`
-							  }" @click="toBag">
+							backgroundImage: `url(${$img1('common/quhegui.png')})`
+						}" @click="toBag">
 							<text>去盒柜</text>
 						</view>
 
 						<view class="ft-btn common_bg justify-center center" :style="{
-								backgroundImage: `url(${$img1('common/jixuchou.png')})`
-							  }" @click="confirmSubmit([0, buyNum])">
+							backgroundImage: `url(${$img1('common/jixuchou.png')})`
+						}" @click="confirmSubmit([0, buyNum])">
 							<text>继续抽</text>
 						</view>
 					</view>
@@ -290,7 +292,7 @@
 		</uni-popup>
 
 		<uni-popup ref="bossPop" type="bottom" mask-background-color="rgba(0,0,0,0.8)">
-			<view v-if="bossCardData&&bossCardData.king_user" class="boss-pop relative">
+			<view v-if="bossCardData && bossCardData.king_user" class="boss-pop relative">
 				<view class="boss-pop-title">
 					<text>领主接力</text>
 				</view>
@@ -328,7 +330,7 @@
 
 				<view class="boss-tab">
 					<view class="boss-tab-item" v-for="(item, i) in bossTab" :key="i" :class="{
-					  act: bossTabCur == i
+						act: bossTabCur == i
 					}" @click="bossTabChange(i)">
 
 						<text>{{ item.title }}</text>
@@ -402,7 +404,7 @@
 			<view v-if="previewData" class="d-pop">
 				<view class="pic center relative">
 					<image :src="previewData.imgurl" lazy-load></image>
-					<view class="flex center">{{previewData.shang_title}}</view>
+					<view class="flex center">{{ previewData.shang_title }}</view>
 				</view>
 				<view class="title">
 					<text class="hang1">
@@ -437,1232 +439,2087 @@
 
 		<rule-pop ref="rulePop"></rule-pop>
 		<coupon-pop ref="couponPop"></coupon-pop>
+		<!-- 添加直接引用的预览组件 -->
+		<detail-preview-popup ref="localPreviewPopup"></detail-preview-popup>
 	</view>
 </template>
 
 <script>
-	import OrderConfirmPopup from '@/components/order-confirm-popup/order-confirm-popup.vue'
-	
-	export default {
-		components: {
-			OrderConfirmPopup
-		},
-		data() {
-			return {
-				userCoupon: null,
-				optData: '',
-				buyNum: 0,
-				useMoney: true,
-				useIntegral: true,
-				useMoney2: true,
-				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
-				downOption: {
-					auto: false
+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,
+		DetailListItem
+	},
+	data() {
+		return {
+			userCoupon: null,
+			optData: '',
+			buyNum: 0,
+			useMoney: true,
+			useIntegral: true,
+			useMoney2: true,
+			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
+			downOption: {
+				auto: false
+			},
+			// 上拉加载的配置(可选, 绝大部分情况无需配置)
+			upOption: {
+				auto: false,
+				page: {
+					size: 15 // 每页数据的数量,默认10
+				}
+			},
+			tabList: {
+				1: {
+					title: '包含以下赠品'
 				},
-				// 上拉加载的配置(可选, 绝大部分情况无需配置)
-				upOption: {
-					auto: false,
-					page: {
-						size: 15 // 每页数据的数量,默认10
-					}
-				},
-				tabList: {
-					1: {
-						title: '包含以下赠品'
-					},
-					2: {
-						title: '中赏记录'
-					}
-				},
-				tabCur: 1,
-				swCur: 0,
-				autoplay: false,
-				subTab: [],
-				subTabCur: 0,
-				bossTab: [{
-						id: 1,
-						title: '挑战人数'
-					},
-					{
-						id: 2,
-						title: '领主记录'
-					}
-				],
-				bossTabCur: 0,
-				pageData: '',
-				previewData: '',
-				orderData: '',
-				prizeData: '',
-				sendRuleData: '',
-				couponData: '',
-				isAgree: true,
-				aniShow: false,
-				bossCardData: '',
-				bossList: [],
-				bossTotal: 0,
-				playRuleData: '',
-				logList: [],
-				choujiangloading: false
-			}
-		},
-
-		computed: {
-			reChooseNum() {
-				if (!this.prizeData || this.prizeData.data.length <= 0) {
-					return 0
+				2: {
+					title: '中赏记录'
 				}
-
-				const arr = this.prizeData.data.filter(item => item.isChoose)
-				console.log(arr.length)
-
-				return arr.length
+			},
+			tabCur: 1,
+			swCur: 0,
+			autoplay: false,
+			subTab: [],
+			subTabCur: 0,
+			bossTab: [{
+				id: 1,
+				title: '挑战人数'
+			},
+			{
+				id: 2,
+				title: '领主记录'
 			}
-		},
+			],
+			bossTabCur: 0,
+			pageData: '',
+			previewData: '',
+			orderData: '',
+			prizeData: '',
+			sendRuleData: '',
+			couponData: '',
+			isAgree: true,
+			aniShow: false,
+			bossCardData: '',
+			bossList: [],
+			bossTotal: 0,
+			playRuleData: '',
+			logList: [],
+			choujiangloading: false
+		}
+	},
 
-		onShareAppMessage() {
-
-			if (this.$refs["couponPop"] != null) {
-				var co = this.$refs["couponPop"].getfengxiaodata();
-				if (co != null) {
-					console.log(co);
-					return co;
-				}
+	computed: {
+		reChooseNum() {
+			if (!this.prizeData || this.prizeData.data.length <= 0) {
+				return 0
 			}
 
-			return {
-				title: this.$config.getAppSetting("app_name") + `${this.pageData.goods.title}系列`,
-				imageUrl: this.pageData.goods.imgurl_detail,
-				path: '/pages/shouye/detail_wuxian' +
-					this.$c.qs({
-						goods_id: this.pageData.goods.id,
-						goods_num: this.pageData.goods.num,
-						pid: uni.getStorageSync('userinfo').ID
-					})
+			const arr = this.prizeData.data.filter(item => item.isChoose)
+			console.log(arr.length)
+
+			return arr.length
+		}
+	},
+
+	onShareAppMessage() {
+
+		if (this.$refs["couponPop"] != null) {
+			var co = this.$refs["couponPop"].getfengxiaodata();
+			if (co != null) {
+				console.log(co);
+				return co;
 			}
-		},
+		}
 
-		onLoad(options) {
-			this.optData = options
-
-			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
-			//   }
-			// })
-			//$refs.rulePop.getRule(pageData.danye_id, '购买说明')
-
-			this.$c.getRule(10).then(res => {
-				if (res.status == 1) {
-					this.sendRuleData = res.data
-				}
-			})
-		},
-
-		onShow() {
-			this.autoplay = true
-		},
-
-		onReady() {
-			this.tabChange(this.tabCur)
-
-			// this.open('resPop')
-			// this.open('bossPop')
-			// this.open('playPop')
-		},
-
-		onHide() {
-			this.autoplay = false
-		},
-
-		onUnload() {
-			uni.$off('chooseCoupon')
-		},
-
-		methods: {
-			bossTabChange(i) {
-				this.bossTabCur = i
-				this.bossList = []
-
-				this.$refs.bossScroll.mescroll.resetUpScroll()
-				this.$refs.bossScroll.mescroll.scrollTo(0, 0)
-			},
-
-			previewDetail(item, a) {
-				const obj = {
-					imgurl: a.imgurl,
-					title: a.title,
-					shang_title: item.shang_title,
-					pro: a.real_pro
-				}
-
-				console.log(obj)
-				this.previewData = obj
-
-				this.open('dPop')
-			},
-
-			doReDraw() {
-				if (this.orderData.item_card_count <= 0) {
-					this.$c.toast({
-						title: '重置卡不足'
-					})
-
-					return
-				}
-
-				const arr = this.prizeData.data.map(item => item.id)
-
-				if (arr.length <= 0) {
-					this.$c.toast({
-						title: '请选择重置赏品'
-					})
-					return
-				}
-
-				this.req({
-					url: 'item_card_chou',
-					data: {
-						goods_id: this.pageData.goods.id,
-						order_list_ids: arr.join(',')
-					},
-					success: res => {
-						if (res.status == 1) {
-							this.close('resPop')
-
-							this.doRefresh()
-							this.getPrize(res.data.order_num)
-						}
-					}
-				})
-			},
-
-			swChange(e) {
-				this.swCur = e.detail.current
-			},
-
-			toggleCollect() {
-				this.req({
-					url: 'addCollect',
-					data: {
-						goods_id: this.pageData.goods.id
-					},
-					success: res => {
-						if (res.status == 1) {
-							this.getData()
-						}
-					}
-				})
-			},
-
-			toBag() {
-				this.close('resPop')
-
-				this.$c.to({
-					type: 3,
-					url: '/pages/sangdai/sangdai'
-				})
-			},
-
-			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: 'infinite_prizeorderlog',
-						data: {
-							order_num
-						},
-						success: res => {
-							if (res.status == 1) {
-								res.data.data.map(item => {
-									item.isChoose = false
-								})
-
-								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(type) {
-				if (type === 'useMoney') {
-					this.useMoney = !this.useMoney;
-				} else if (type === 'useIntegral') {
-					this.useIntegral = !this.useIntegral;
-				} else if (type === 'useMoney2') {
-					this.useMoney2 = !this.useMoney2;
-				}
-				this.confirmSubmit([0, this.buyNum]);
-			},
-
-			confirmSubmit([type, num, flag]) {
-				this.choujiangloading = true;
-				uni.showLoading({
-					title: '加载中'
-				});
-
-				let data = {
-					goods_id: this.optData.goods_id,
+		return {
+			title: this.$config.getAppSetting("app_name") + `${this.pageData.goods.title}系列`,
+			imageUrl: this.pageData.goods.imgurl_detail,
+			path: '/pages/shouye/detail_wuxian' +
+				this.$c.qs({
+					goods_id: this.pageData.goods.id,
 					goods_num: this.pageData.goods.num,
-					num: num,
-					use_money: this.useMoney ? 1 : 0,
-					use_integral: this.useIntegral ? 1 : 0,
-					use_money2: this.useMoney2 ? 1 : 0,
-					prize_id: this.optData.prize_id,
-				};
+					pid: uni.getStorageSync('userinfo').ID
+				})
+		}
+	},
 
-				let url = 'infinite_ordermoney'
-				console.log(type);
-				if (type == 1) {
-					url = 'infinite_orderbuy'
+	onLoad(options) {
+		this.optData = options
 
-					if (this.$refs.buyNotice.getIsShow() && !flag) {
-						this.$refs.buyNotice.getRule(6)
-						return
+		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
+		//   }
+		// })
+		//$refs.rulePop.getRule(pageData.danye_id, '购买说明')
+
+		this.$c.getRule(10).then(res => {
+			if (res.status == 1) {
+				this.sendRuleData = res.data
+			}
+		})
+	},
+
+	onShow() {
+		this.autoplay = true
+	},
+
+	onReady() {
+		this.tabChange(this.tabCur)
+
+		// this.open('resPop')
+		// this.open('bossPop')
+		// this.open('playPop')
+	},
+
+	onHide() {
+		this.autoplay = false
+	},
+
+	onUnload() {
+		uni.$off('chooseCoupon')
+	},
+
+	methods: {
+		bossTabChange(i) {
+			this.bossTabCur = i
+			this.bossList = []
+
+			this.$refs.bossScroll.mescroll.resetUpScroll()
+			this.$refs.bossScroll.mescroll.scrollTo(0, 0)
+		},
+
+		previewDetail(item, a) {
+			 
+			const obj = {
+				imgurl: a.imgurl,
+				title: a.title,
+				// shang_title: item.shang_title,
+				pro: '概率:' + a.real_pro,
+				shang_info: {
+					title: item.shang_title,
+					color: item.shang_color
+				},
+				goods_type: a.goods_type,
+				id: a.id
+
+			}
+			let goods = {
+				id: item.goods_id,
+				num: 0,
+			};
+			// console.log(a);
+ 
+			// 使用全局方法调用预览弹窗
+			this.$preview({
+				productType: this.optData.type_text,
+				dataItem: obj,
+				goods: goods
+			}).then(() => {
+				console.log('预览弹窗打开成功');
+			});
+			// this.previewData = obj
+
+			// this.open('dPop')
+		},
+
+		doReDraw() {
+			if (this.orderData.item_card_count <= 0) {
+				this.$c.toast({
+					title: '重置卡不足'
+				})
+
+				return
+			}
+
+			const arr = this.prizeData.data.map(item => item.id)
+
+			if (arr.length <= 0) {
+				this.$c.toast({
+					title: '请选择重置赏品'
+				})
+				return
+			}
+
+			this.req({
+				url: 'item_card_chou',
+				data: {
+					goods_id: this.pageData.goods.id,
+					order_list_ids: arr.join(',')
+				},
+				success: res => {
+					if (res.status == 1) {
+						this.close('resPop')
+
+						this.doRefresh()
+						this.getPrize(res.data.order_num)
 					}
 				}
+			})
+		},
 
-				this.buyNum = num
+		swChange(e) {
+			this.swCur = e.detail.current
+		},
 
-				this.req({
-					url,
-					data: {
-						goods_id: this.pageData.goods.id,
-						prize_num: this.buyNum,
-						use_money_is: this.useMoney ? 1 : 2,
-						use_integral_is: this.useIntegral ? 1 : 2,
-						use_money2_is: this.useMoney2 ? 1 : 2,
-						coupon_id: (this.couponData && this.couponData.id) || '',
-						
-						// ad_id: uni.getStorageSync('_ad_id')
-					},
-					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.orderData = res.data
-								this.$nextTick(() => {
-									if (this.$refs.buyPop) {
-										this.$refs.buyPop.open()
-									} else {
-										console.error('buyPop组件未找到')
-									}
-								})
-							}
-							if (type == 1) {
-								this.close('buyPop')
-
-								if (res.data.status == 1) {
-									const status = await this.$c.wxMpPay({
-										data: res.data.res
-									})
-
-									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()
-										}
-									})
-								}
-							}
-						}
-					}
-				})
-				if (type == 1) {
-					this.close('buyPop')
-				}
-			},
-
-			doRefresh() {
-				this.getData()
-
-				if (this.tabCur == 2) {
-					this.tabChange(this.tabCur)
-				}
-			},
-
-			subTabChange(i) {
-				this.subTabCur = i
-				this.logList = []
-
-				this.$nextTick(() => {
-					setTimeout(() => {
-						this.mescroll.resetUpScroll()
-					}, 100)
-				})
-			},
-
-			tabChange(i) {
-				this.tabCur = i
-
-				switch (Number(i)) {
-					case 1:
+		toggleCollect() {
+			this.req({
+				url: 'addCollect',
+				data: {
+					goods_id: this.pageData.goods.id
+				},
+				success: res => {
+					if (res.status == 1) {
 						this.getData()
-						break
-					case 2:
-						this.subTabChange(this.subTabCur)
-						break
+					}
 				}
-			},
+			})
+		},
 
-			getBossData({
-				num,
-				init
-			}) {
+		toBag() {
+			this.close('resPop')
+
+			this.$c.to({
+				type: 3,
+				url: '/pages/sangdai/sangdai'
+			})
+		},
+
+		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: 'ling_zhu_king',
+					url: 'infinite_prizeorderlog',
 					data: {
-						page: num,
-						goods_id: this.optData.goods_id,
-						type: this.bossTab[this.bossTabCur].id
+						order_num
 					},
-					Loading: true,
 					success: res => {
 						if (res.status == 1) {
-							this.bossCardData = res.data
-							console.log(this.bossCardData);
+							res.data.data.map(item => {
+								item.isChoose = false
+							})
 
-							if (init) {
+							this.prizeData = res.data
+
+							if (res.data.data.length <= 0) {
+								this.getPrize(order_num)
 								return
 							}
 
-							if (num == 1) {
-								this.bossList = []
-							}
-
-							this.bossList = this.bossList.concat(res.data.list.data)
-							this.$refs.bossScroll.mescroll.endByPage(
-								res.data.list.data.length,
-								res.data.list.last_page
-							)
-						}
-					}
-				})
-			},
-
-			getLog({
-				num,
-				size
-			}) {
-				if (num > 1) return this.mescroll.endByPage(this.logList.length, 1)
-				this.req({
-					url: 'infinite_shang_log',
-					data: {
-						page: num,
-						goods_id: this.optData.goods_id,
-						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)
-
-							// console.log(this.logList)
-
+							// this.aniShow = true
 							// setTimeout(() => {
-							//   console.log(this.logList)
-							// }, 1000)
+							//   this.aniShow = false
+							this.bgmCtx.openBgm.stop()
+							this.bgmCtx.openBgm.play()
+							this.open('resPop')
+							// }, 1300)
 						}
 					}
 				})
-			},
+			}, 500)
+		},
 
-			getData() {
-				this.req({
-					url: 'infinite_goodsdetail',
-					data: {
-						goods_id: this.optData.goods_id
-					},
-					success: res => {
-						if (res.status == 1) {
-							if (res.data.goods.lingzhu_is == 1) {
-								this.getBossData({
-									num: 1,
-									init: true
-								})
-							}
-							res.data.goodslist.forEach(item => {
-								this.$set(item, 'open', false)
-							})
-							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);
-						}
-					}
-				})
-			},
+		changePay(type) {
+			if (type === 'useMoney') {
+				this.useMoney = !this.useMoney;
+			} else if (type === 'useIntegral') {
+				this.useIntegral = !this.useIntegral;
+			} else if (type === 'useMoney2') {
+				this.useMoney2 = !this.useMoney2;
+			}
+			this.confirmSubmit([0, this.buyNum]);
+		},
 
-			close(e) {
-				if (e === 'buyPop') {
-					if (this.$refs.buyPop) {
-						this.$refs.buyPop.close()
-					}
-				} else {
-					this.$refs[e].close()
-				}
-				if (e == "resPop") {
-					if (this.prizeData['user_coupon'] != null) {
-						this.$refs["couponPop"].open(this.prizeData['user_coupon']);
-					}
-				}
-			},
+		confirmSubmit([type, num, flag]) {
+			this.choujiangloading = true;
+			uni.showLoading({
+				title: '加载中'
+			});
 
-			open(e) {
-				this.$refs[e].open()
+			let data = {
+				goods_id: this.optData.goods_id,
+				goods_num: this.pageData.goods.num,
+				num: num,
+				use_money: this.useMoney ? 1 : 0,
+				use_integral: this.useIntegral ? 1 : 0,
+				use_money2: this.useMoney2 ? 1 : 0,
+				prize_id: this.optData.prize_id,
+			};
 
-				if (e == 'bossPop') {
-					this.$nextTick(() => {
-						setTimeout(() => {
-							this.bossTabChange(this.bossTabCur)
-						}, 200)
-					})
-				}
+			let url = 'infinite_ordermoney'
+			console.log(type);
+			if (type == 1) {
+				url = 'infinite_orderbuy'
 
-				// if (e == "resPop") {
-				// 	this.$nextTick(() => {
-				// 		setTimeout(() => {
-				// 			this.$refs["couponPop"].open()
-				// 		}, 200)
-				// 	})
-				// }
-
-				if (e == 'playPop') {
-					this.$c.getRule(14).then(res => {
-						if (res.status == 1) {
-							this.playRuleData = res.data
-						}
-					})
-				}
-			},
-
-			// 设置背景颜色
-			getBgColor(text) {
-				switch (text) {
-					case "普通":
-						return "#DAFF27";
-						break;
-					case "黄金":
-						return "#9A8EF6";
-						break;
-					case "欧皇":
-						return "#FFEB8E";
-						break;
-					case "超神":
-						return "#FF8E8E";
-						break;
-				}
-			},
-
-			// 设置文字颜色
-			getTextColor(text) {
-				switch (text) {
-					case "普通":
-						return "#86AD46";
-						break;
-					case "黄金":
-						return "#FFFFFF";
-						break;
-					case "欧皇":
-						return "#DA8A50";
-						break;
-					case "超神":
-						return "#FFEFB4";
-						break;
+				if (this.$refs.buyNotice.getIsShow() && !flag) {
+					this.$refs.buyNotice.getRule(6)
+					return
 				}
 			}
 
+			this.buyNum = num
+
+			this.req({
+				url,
+				data: {
+					goods_id: this.pageData.goods.id,
+					prize_num: this.buyNum,
+					use_money_is: this.useMoney ? 1 : 2,
+					use_integral_is: this.useIntegral ? 1 : 2,
+					use_money2_is: this.useMoney2 ? 1 : 2,
+					coupon_id: (this.couponData && this.couponData.id) || '',
+
+					// ad_id: uni.getStorageSync('_ad_id')
+				},
+				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.orderData = res.data
+							this.$nextTick(() => {
+								if (this.$refs.buyPop) {
+									this.$refs.buyPop.open()
+								} else {
+									console.error('buyPop组件未找到')
+								}
+							})
+						}
+						if (type == 1) {
+							this.close('buyPop')
+
+							if (res.data.status == 1) {
+								const status = await this.$c.wxMpPay({
+									data: res.data.res
+								})
+
+								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()
+									}
+								})
+							}
+						}
+					}
+				}
+			})
+			if (type == 1) {
+				this.close('buyPop')
+			}
+		},
+
+		doRefresh() {
+			this.getData()
+
+			if (this.tabCur == 2) {
+				this.tabChange(this.tabCur)
+			}
+		},
+
+		subTabChange(i) {
+			this.subTabCur = i
+			this.logList = []
+
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.mescroll.resetUpScroll()
+				}, 100)
+			})
+		},
+
+		tabChange(i) {
+			this.tabCur = i
+
+			switch (Number(i)) {
+				case 1:
+					this.getData()
+					break
+				case 2:
+					this.subTabChange(this.subTabCur)
+					break
+			}
+		},
+
+		getBossData({
+			num,
+			init
+		}) {
+			this.req({
+				url: 'ling_zhu_king',
+				data: {
+					page: num,
+					goods_id: this.optData.goods_id,
+					type: this.bossTab[this.bossTabCur].id
+				},
+				Loading: true,
+				success: res => {
+					if (res.status == 1) {
+						this.bossCardData = res.data
+						console.log(this.bossCardData);
+
+						if (init) {
+							return
+						}
+
+						if (num == 1) {
+							this.bossList = []
+						}
+
+						this.bossList = this.bossList.concat(res.data.list.data)
+						this.$refs.bossScroll.mescroll.endByPage(
+							res.data.list.data.length,
+							res.data.list.last_page
+						)
+					}
+				}
+			})
+		},
+
+		getLog({
+			num,
+			size
+		}) {
+			if (num > 1) return this.mescroll.endByPage(this.logList.length, 1)
+			this.req({
+				url: 'infinite_shang_log',
+				data: {
+					page: num,
+					goods_id: this.optData.goods_id,
+					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)
+
+						// console.log(this.logList)
+
+						// setTimeout(() => {
+						//   console.log(this.logList)
+						// }, 1000)
+					}
+				}
+			})
+		},
+
+		getData() {
+			this.req({
+				url: 'infinite_goodsdetail',
+				data: {
+					goods_id: this.optData.goods_id
+				},
+				success: res => {
+					if (res.status == 1) {
+						if (res.data.goods.lingzhu_is == 1) {
+							this.getBossData({
+								num: 1,
+								init: true
+							})
+						}
+						res.data.goodslist.forEach(item => {
+							this.$set(item, 'open', false)
+						})
+						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);
+					}
+				}
+			})
+		},
+
+		close(e) {
+			if (e === 'buyPop') {
+				if (this.$refs.buyPop) {
+					this.$refs.buyPop.close()
+				}
+			} else {
+				this.$refs[e].close()
+			}
+			if (e == "resPop") {
+				if (this.prizeData['user_coupon'] != null) {
+					this.$refs["couponPop"].open(this.prizeData['user_coupon']);
+				}
+			}
+		},
+
+		open(e) {
+			this.$refs[e].open()
+
+			if (e == 'bossPop') {
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.bossTabChange(this.bossTabCur)
+					}, 200)
+				})
+			}
+
+			// if (e == "resPop") {
+			// 	this.$nextTick(() => {
+			// 		setTimeout(() => {
+			// 			this.$refs["couponPop"].open()
+			// 		}, 200)
+			// 	})
+			// }
+
+			if (e == 'playPop') {
+				this.$c.getRule(14).then(res => {
+					if (res.status == 1) {
+						this.playRuleData = res.data
+					}
+				})
+			}
+		},
+
+		// 设置背景颜色
+		getBgColor(text) {
+			switch (text) {
+				case "普通":
+					return "#DAFF27";
+					break;
+				case "黄金":
+					return "#9A8EF6";
+					break;
+				case "欧皇":
+					return "#FFEB8E";
+					break;
+				case "超神":
+					return "#FF8E8E";
+					break;
+			}
+		},
+
+		// 设置文字颜色
+		getTextColor(text) {
+			switch (text) {
+				case "普通":
+					return "#86AD46";
+					break;
+				case "黄金":
+					return "#FFFFFF";
+					break;
+				case "欧皇":
+					return "#DA8A50";
+					break;
+				case "超神":
+					return "#FFEFB4";
+					break;
+			}
 		}
+
 	}
+}
 </script>
 
 <style lang="scss">
-	.navLeft {
-		position: fixed;
-		left: 30rpx;
-		z-index: 100;
-		height: 44px;
+.navLeft {
+	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;
+	}
+}
+
+.lingzhu {
+	width: 686rpx;
+	height: 158rpx;
+	margin: 28rpx auto;
+	// border: 1rpx solid #9E907D;
+	background: #F8F8F8;
+
+	&-img {
+		width: 122rpx;
+		height: 106rpx;
+
+		>image:nth-child(1) {
+			width: 75rpx;
+			height: 76rpx;
+			position: absolute;
+			bottom: 4rpx;
+			left: 50%;
+			transform: translateX(-50%);
+			z-index: 1;
+			border-radius: 50rpx;
+		}
+
+		>image:nth-child(2) {
+			width: 122rpx;
+			height: 106rpx;
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 3;
 		}
 	}
 
-	.lingzhu {
-		width: 686rpx;
-		height: 158rpx;
-		margin: 28rpx auto;
-		// border: 1rpx solid #9E907D;
-		background: #F8F8F8;
+	&-content {
+		>view:nth-child(1) {
+			font-weight: normal;
+			font-size: 28rpx;
+			color: #333333;
+		}
 
-		&-img {
-			width: 122rpx;
-			height: 106rpx;
+		>view:nth-child(2) {
+			margin-top: 6rpx;
+			font-weight: normal;
+			font-size: 24rpx;
+			color: #999999;
 
-			>image:nth-child(1) {
-				width: 75rpx;
-				height: 76rpx;
-				position: absolute;
-				bottom: 4rpx;
-				left: 50%;
-				transform: translateX(-50%);
-				z-index: 1;
-				border-radius: 50rpx;
+			>text {
+				color: #333333;
+			}
+		}
+	}
+
+	&-lingzhu {
+		height: 46rpx;
+	}
+}
+
+.content {
+	padding: 0 0 300rpx;
+	background-color: #FFFFFF;
+
+	.boss-card {
+		margin: 0 auto -20rpx;
+		width: 690rpx;
+		height: 260rpx;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: space-between;
+		padding: 50rpx 50rpx 0 40rpx;
+
+		.boss-l {
+			flex: 1;
+			padding-top: 10rpx;
+
+			.user {
+				display: flex;
+				align-items: center;
+
+				.avatar {
+					width: 100rpx;
+					height: 100rpx;
+					background: #9d9d9d;
+					border: 1px solid #cccccc;
+					border-radius: 50%;
+				}
+
+				.info {
+					width: 250rpx;
+					margin-left: 20rpx;
+
+					.name {
+						font-size: 32rpx;
+						font-family: Source Han Sans CN;
+						font-weight: 400;
+						color: #ffffff;
+					}
+
+					.hang1 {}
+
+					.btn-text {
+						margin-top: 6rpx;
+						white-space: nowrap;
+
+						font-size: 36rpx;
+						font-family: YouSheBiaoTiHei;
+						font-weight: 400;
+						color: #d0d1ff;
+					}
+				}
 			}
 
-			>image:nth-child(2) {
-				width: 122rpx;
-				height: 106rpx;
-				position: absolute;
-				top: 0;
-				left: 0;
-				z-index: 3;
+			.btn-list {
+				display: flex;
+				justify-content: flex-end;
+				margin-top: 20rpx;
+
+				.btn {
+					width: 110rpx;
+					height: 40rpx;
+					margin-left: 30rpx;
+
+					&.large {
+						width: 150rpx;
+					}
+				}
+
+				.btn {}
+
+				.large {}
 			}
 		}
 
-		&-content {
-			>view:nth-child(1) {
-				font-weight: normal;
+		.boss-r {
+			display: flex;
+			flex-flow: column nowrap;
+			align-items: center;
+			padding-left: 50rpx;
+
+			.pic {
+				width: 130rpx;
+				height: 130rpx;
+				border: 1px solid;
+				border-image: linear-gradient(90deg, #6adeff, #7ab5ff, #ff7feb) 1 1;
+				box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(176, 128, 255, 0.8);
+			}
+
+			.ling {
+				width: 142rpx;
+				height: 50rpx;
+			}
+		}
+	}
+
+	.header {
+		width: 750rpx;
+		height: 722rpx;
+		margin-top: 130rpx;
+		background-color: #D8D8D8;
+
+		&-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;
+		}
+
+		&-shoucang {
+			width: 65rpx;
+			height: 95rpx;
+			position: absolute;
+			right: 0;
+			top: 232rpx;
+			box-sizing: border-box;
+			// background: url($imgurl+'/common/shoucang.png') no-repeat 0 0 / 100% 100%;
+
+			>image {
+				width: 64rpx;
+				height: 64rpx;
+				// margin-top: 22rpx;
+			}
+
+			>text {
+				width: 100%;
+				text-align: center;
+				font-weight: 400;
+				font-size: 20rpx;
+				color: #FFFFFF;
+				margin-top: 4rpx;
+				// line-height: 66rpx;
+				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: #000000;
+			}
+
+			>text:nth-child(2) {
+				font-weight: 700;
+				font-size: 24rpx;
+				color: #000000;
+			}
+		}
+
+		&-canyu {
+			position: absolute;
+			left: 304rpx;
+			bottom: 142rpx;
+			z-index: 10;
+
+			&-imgs {
+				>image {
+					margin-left: -12rpx;
+					width: 32rpx;
+					height: 32rpx;
+					border-radius: 50rpx;
+				}
+			}
+
+			&-num {
+				font-weight: 400;
+				font-size: 20rpx;
+				margin-left: 8rpx;
+				color: #FFFFFF;
+				// text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
+			}
+		}
+
+		&-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%;
+				}
+			}
+		}
+	}
+
+	.user-btns {
+		width: 690rpx;
+		padding: 0 30rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		position: absolute;
+		left: 0;
+		top: 60rpx;
+		z-index: 1;
+
+		.user-num {
+			display: flex;
+			align-items: center;
+
+			font-size: 24rpx;
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			color: #dddddd;
+
+			.user-list {
+				display: flex;
+				padding-left: 26rpx;
+				padding-right: 10rpx;
+
+				.avatar {
+					width: 50rpx;
+					height: 50rpx;
+					background: #7f7f7f;
+					border: 1px solid #cccccc;
+					border-radius: 50%;
+					box-sizing: border-box;
+					position: relative;
+					margin-left: -26rpx;
+				}
+			}
+		}
+
+		.btns {
+			display: flex;
+			align-items: center;
+
+			.btn {
+				display: flex;
+				align-items: center;
+				margin-left: 40rpx;
+
+				font-size: 28rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 400;
+				color: #ffffff;
+
+				.icon {
+					width: 32rpx;
+					height: 32rpx;
+					margin-right: 6rpx;
+				}
+
+				&.pd {
+					padding-left: 60rpx;
+				}
+
+				&.dis {
+					filter: grayscale(1);
+				}
+			}
+
+			.btn {
+				.icon {}
+			}
+		}
+	}
+
+	.angry {
+		margin: 30rpx auto 0;
+		width: 690rpx;
+		height: 136rpx;
+		box-sizing: border-box;
+		padding: 0 30rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background: #3B3941;
+		border-radius: 24rpx 24rpx 24rpx 24rpx;
+		border: 2rpx solid #FFFFFF;
+
+		.icon {
+			width: 100rpx;
+			height: 58rpx;
+		}
+
+		.ang-info {
+			width: 490rpx;
+
+			.ang-num {
+				text-align: center;
+				font-size: 24rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 400;
+				color: #FFFFFF;
+			}
+
+			.progress {
+				margin-top: 10rpx;
+
+				/deep/.cmd-progress-inner {
+					border-radius: 0;
+					background: #444444;
+				}
+			}
+
+			.tip {
+				margin-top: 20rpx;
+				display: flex;
+				font-size: 20rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 400;
+				color: #ffffff;
+				line-height: 20rpx;
+			}
+		}
+	}
+
+	.list {
+		
+
+		.list-item {
+			box-sizing: border-box;
+
+			.list-title {
+				height: 52rpx;
+
+				>view:nth-child(1) {
+					>image {
+						width: 160rpx;
+						height: 72rpx;
+					}
+
+					>text {
+						font-weight: 400;
+						font-size: 20rpx;
+						color: #FFFFFF;
+					}
+				}
+			}
+
+			.goods-list {
+				margin-top: 25rpx;
+				margin-bottom: 5rpx;
+				display: grid;
+				grid-template-columns: repeat(3, 31.5%);
+				gap: 30rpx 20rpx;
+
+				.goods-item {
+					display: inline-flex;
+					width: 220rpx;
+					background-color: #F8F8F8;
+					border-radius: 16rpx;
+					// height: 255rpx;
+
+					.pic {
+						width: 220rpx;
+						height: 220rpx;
+						border-radius: 12rpx;
+						position: relative;
+						margin: 0 auto;
+						background-color: #D8D8D8;
+						border-radius: 16rpx 16rpx 0rpx 0rpx;
+
+						.yu-tag {
+							position: absolute;
+							right: 10rpx;
+							bottom: 10rpx;
+							z-index: 1;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							font-weight: 400;
+							font-size: 32rpx;
+							color: #894DD3;
+							text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
+						}
+					}
+
+					.title {
+						text-align: left;
+						width: 200rpx;
+						margin: 20rpx auto 0;
+						font-size: 20rpx;
+						font-weight: 400;
+						color: #333333;
+					}
+
+					.price {
+						width: 200rpx;
+						margin: 12rpx auto 24rpx;
+						font-weight: 400;
+						font-size: 20rpx;
+						color: #333333;
+					}
+				}
+			}
+		}
+	}
+
+	.sub-tab {
+		white-space: nowrap;
+		padding: 10rpx 0 10rpx;
+
+		.sub-tab-item {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			min-width: 88rpx;
+			height: 44rpx;
+			margin-left: 30rpx;
+			// font-family: YouSheBiaoTiHei;
+			font-weight: 400;
+			font-size: 20rpx;
+			color: #333333;
+			background: #F5F5F5;
+			border-radius: 8rpx;
+			border: 2rpx solid rgba(#FFFFFF, 0.7);
+
+			&.act {
+				background: #E6F791;
+				// font-family: YouSheBiaoTiHei;
+				font-weight: 400;
+				font-size: 20rpx;
 				color: #333333;
 			}
 
-			>view:nth-child(2) {
-				margin-top: 6rpx;
-				font-weight: normal;
-				font-size: 24rpx;
-				color: #999999;
+			&:last-child {
+				margin-right: 30rpx;
+			}
+		}
 
-				>text {
+	}
+
+	.log-list {
+		padding: 1rpx 30rpx 30rpx;
+
+		.log-item {
+			height: 144rpx;
+			padding: 0 20rpx;
+			display: flex;
+			align-items: center;
+			background: #F8F8F8;
+			margin-top: 24rpx;
+
+			.avatar {
+				width: 80rpx;
+				height: 80rpx;
+				background: #9d9d9d;
+				border: 1px solid #cccccc;
+				border-radius: 50%;
+				overflow: hidden;
+			}
+
+			.info {
+				width: 230rpx;
+				margin-left: 20rpx;
+
+				.name {
+					font-size: 28rpx;
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+					color: #333333;
+				}
+
+				.hang1 {}
+
+				.time {
+					margin-top: 10rpx;
+					white-space: nowrap;
+
+					font-size: 24rpx;
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+					color: #999999;
+				}
+			}
+
+			.prize {
+				flex: 1;
+				padding-left: 50rpx;
+				display: flex;
+				align-items: center;
+
+				.pic {
+					width: 100rpx;
+					height: 100rpx;
+				}
+
+				>view:nth-child(2) {
+					>view:nth-child(1) {
+						padding: 0 20rpx;
+						min-width: 68rpx;
+						height: 32rpx;
+						box-sizing: border-box;
+						line-height: 40rpx;
+						border-radius: 18rpx;
+						font-size: 14rpx;
+						color: #FFFFFF;
+					}
+
+				}
+
+				.title {
+					width: 120rpx;
+					margin-left: 10rpx;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #333333;
+					text-align: right;
+				}
+
+				.num {
+					font-size: 24rpx;
+					font-family: Source Han Sans CN;
+					font-weight: 400;
 					color: #333333;
 				}
 			}
 		}
+	}
 
-		&-lingzhu {
-			height: 46rpx;
+	/* **************************************** */
+	/* **************************************** */
+	/* **************************************** */
+
+	.fixed-btns {
+		position: fixed;
+		z-index: 10;
+		right: 20rpx;
+		bottom: 300rpx;
+
+		.btn {
+			width: 94rpx;
+			height: 110rpx;
+			margin-top: 40rpx;
 		}
 	}
 
-	.content {
-		padding: 0 0 300rpx;
-		background-color: #FFFFFF;
+	.ft-fixed {
+		position: fixed;
+		z-index: 10;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: center;
+		padding-bottom: 50rpx;
+		background: #FFFFFF;
+		padding-top: 20rpx;
 
-		.boss-card {
-			margin: 0 auto -20rpx;
+		.lt-btn {
 			width: 690rpx;
-			height: 260rpx;
-			box-sizing: border-box;
+			height: 80rpx;
+			background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
+			border-radius: 40rpx;
 			display: flex;
-			justify-content: space-between;
-			padding: 50rpx 50rpx 0 40rpx;
+			justify-content: center;
+			align-items: center;
+			margin-bottom: 20rpx;
+			font-size: 32rpx;
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			color: #ffffff;
+		}
 
-			.boss-l {
-				flex: 1;
-				padding-top: 10rpx;
+		.btn {
+			width: 120rpx;
+			height: 68rpx;
+			position: relative;
 
-				.user {
+			>view {
+				white-space: nowrap;
+				font-family: YouSheBiaoTiHei;
+				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%;
+				// }
+			}
+		}
+	}
+
+	.res-pop {
+		width: 100%;
+		height: 100vh;
+		position: relative;
+		background: url($imgurl+'common/yb.png') no-repeat 0 0 / 100% 100%;
+
+		.res-pop-hd {
+			width: 380rpx;
+			height: 104rpx;
+			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;
+							border-radius: 18rpx;
+							// background: url($imgurl+ 'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
+							font-weight: 400;
+							font-size: 14rpx;
+							// color: #F8F8F8;
+						}
+
+						.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: #ffffff;
+							background: rgba(0, 0, 0, 0.5);
+							border-radius: 18rpx;
+						}
+					}
+
+					.title {
+						width: 180rpx;
+						padding: 22rpx 0;
+						font-weight: 400;
+						font-size: 16rpx;
+						color: #333333;
+					}
+
+					.exchange {
+						padding: 10rpx 10rpx;
+						font-weight: 400;
+						font-size: 20rpx;
+						color: #FFFFFF;
+					}
+				}
+			}
+		}
+
+		.res-pop-ft {
+			padding-top: 40rpx;
+
+			.btn-list {
+				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;
+				}
+			}
+
+			.r-draw {
+				margin: 50rpx auto 0;
+				width: 244rpx;
+				height: 116rpx;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #0E7792;
+
+				>text {
+					margin-top: 36rpx;
+				}
+			}
+		}
+	}
+
+	.boss-pop {
+		width: 750rpx;
+		box-sizing: border-box;
+		padding: 0 46rpx 40rpx;
+		position: relative;
+		background: #F7F7F7;
+		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%;
+		}
+
+		.boss-pop-title {
+			padding: 40rpx 0;
+			text-align: center;
+			// font-family: YouSheBiaoTiHei;
+			font-weight: 400;
+			font-size: 44rpx;
+			color: #333333;
+		}
+
+		.boss-pop-guize {
+			position: absolute;
+			top: 24rpx;
+			right: 24rpx;
+			color: #FFFFFF;
+			font-size: 28rpx;
+
+			>image {
+				width: 30rpx;
+				height: 30rpx;
+			}
+		}
+
+		.close {
+			position: absolute;
+			width: 30rpx;
+			height: 30rpx;
+			top: 50rpx;
+			right: 36rpx;
+		}
+
+		.boss-avatar {
+			margin: 20rpx auto 0;
+			width: 686rpx;
+			height: 264rpx;
+			background-color: #FFFFFF;
+
+			>image:nth-child(1) {
+				position: absolute;
+				left: 50%;
+				transform: translateX(-50%);
+				bottom: 112rpx;
+				width: 98rpx;
+				height: 98rpx;
+				border-radius: 50%;
+				z-index: 1;
+			}
+
+			>image:nth-child(2) {
+				position: absolute;
+				left: 50%;
+				transform: translateX(-50%);
+				width: 181rpx;
+				height: 153rpx;
+				bottom: 100rpx;
+				z-index: 2;
+			}
+		}
+
+		.boss-name {
+			margin: 30rpx auto 0;
+			width: 200rpx;
+			text-align: center;
+			font-size: 28rpx;
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			color: #333333;
+			left: 50%;
+			transform: translateX(-50%);
+			position: absolute;
+			bottom: 32rpx;
+		}
+
+		.hang1 {}
+
+		.boss-box {
+			margin: 70rpx auto 0;
+			width: 590rpx;
+			position: relative;
+			background: #3B3941;
+			border-radius: 22rpx;
+			padding: 30rpx;
+
+			.box-title {
+				color: #999999;
+
+				>text:nth-child(1) {
+					color: #999999;
+					font-size: 20rpx;
+					font-weight: bold;
+				}
+
+				>text:nth-child(2) {
+					font-size: 20rpx;
+					font-weight: 400;
+				}
+			}
+
+			.get-money {
+				margin-top: 30rpx;
+				font-size: 24rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 400;
+				color: #ffffff;
+
+				&-one {
+					font-weight: 400;
+					font-size: 26rpx;
+					color: #999999;
+				}
+
+				// &-two {
+				// 	width: 34rpx;
+				// 	height: 34rpx;
+				// 	margin: 0 10rpx;
+				// }
+
+				&-three {
+					font-weight: 400;
+					font-size: 26rpx;
+					color: #999999;
+				}
+			}
+		}
+
+		.common_bg {}
+
+		.boss-tab {
+			padding: 30rpx 0;
+			display: flex;
+			justify-content: space-around;
+			align-items: center;
+
+			.boss-tab-item {
+				width: 33%;
+				height: 60rpx;
+				font-size: 20rpx;
+				font-weight: 400;
+				color: #8A8A8A;
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+				text-align: center;
+				background-color: #FFFFFF;
+				border-radius: 8rpx;
+
+				&.act {
+					font-weight: 500;
+					font-size: 20rpx;
+					color: #333333;
+					background-color: #E6F791;
+					border-radius: 8rpx;
+				}
+			}
+		}
+
+		.list-wrap {
+			// height: 350rpx;
+
+			.boss-list {
+				display: flex;
+				flex-flow: row wrap;
+				justify-content: space-between;
+
+				.people-item {
+					display: flex;
+					align-items: center;
+					width: 30%;
+
+					.avatar {
+						width: 52rpx;
+						height: 52rpx;
+						background: #9d9d9d;
+						border-radius: 50%;
+						box-sizing: border-box;
+						overflow: hidden;
+					}
+
+					.name {
+						width: calc(100% - 70rpx);
+						box-sizing: border-box;
+						padding-left: 10rpx;
+
+						font-size: 20rpx;
+						font-family: Source Han Sans CN;
+						font-weight: 400;
+						color: #999999;
+					}
+
+					.hang1 {}
+				}
+
+				.boss-log {
+					width: 100%;
+					box-sizing: border-box;
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					justify-content: space-between;
+					padding: 10rpx;
+
+					.avatar {
+						width: 60rpx;
+						height: 60rpx;
+						background: #9d9d9d;
+						// border: 1px solid #cccccc;
+						border-radius: 50%;
+						overflow: hidden;
+					}
+
+					.name {
+						width: 100rpx;
+						margin-left: 20rpx;
+						font-size: 20rpx;
+						// font-family: Source Han Sans CN;
+						font-weight: 400;
+						color: #999999;
+					}
+
+					.hang1 {}
+
+					.place {
+						margin-left: 30rpx;
+
+						font-size: 20rpx;
+						font-family: Source Han Sans CN;
+						font-weight: 400;
+						color: #999999;
+
+						text {
+							padding-left: 4rpx;
+							color: #999999;
+						}
+					}
+
+					.time {
+						flex: 1;
+						padding-left: 30rpx;
+
+						font-size: 24rpx;
+						font-family: Source Han Sans CN;
+						font-weight: 400;
+						color: #999999;
+					}
+				}
+
+				.boss-money {
+					width: 100%;
+					padding: 10rpx;
 					display: flex;
 					align-items: center;
 
 					.avatar {
-						width: 100rpx;
-						height: 100rpx;
+						width: 60rpx;
+						height: 60rpx;
 						background: #9d9d9d;
 						border: 1px solid #cccccc;
 						border-radius: 50%;
 					}
 
-					.info {
-						width: 250rpx;
+					.name {
+						width: 200rpx;
 						margin-left: 20rpx;
 
-						.name {
-							font-size: 32rpx;
-							font-family: Source Han Sans CN;
-							font-weight: 400;
-							color: #ffffff;
-						}
+						font-size: 24rpx;
+						font-family: Source Han Sans CN;
+						font-weight: 400;
+						color: #ffffff;
+					}
 
-						.hang1 {}
+					.hang1 {}
 
-						.btn-text {
-							margin-top: 6rpx;
-							white-space: nowrap;
+					.money {
+						flex: 1;
+						text-align: right;
 
-							font-size: 36rpx;
-							font-family: YouSheBiaoTiHei;
-							font-weight: 400;
+						font-size: 24rpx;
+						font-family: Source Han Sans CN;
+						font-weight: 400;
+						color: #ffffff;
+
+						text {
+							padding-left: 10rpx;
 							color: #d0d1ff;
 						}
 					}
 				}
+			}
+		}
+	}
 
-				.btn-list {
-					display: flex;
-					justify-content: flex-end;
-					margin-top: 20rpx;
+	.play-pop {
+		width: 680rpx;
+		box-sizing: border-box;
+		padding: 0 46rpx 40rpx;
+		position: relative;
+		background: #FFFFFF;
+		border-radius: 30rpx;
+		// border: 1px solid #7776AD;
 
-					.btn {
-						width: 110rpx;
-						height: 40rpx;
-						margin-left: 30rpx;
+		.play-pop-hd {
+			position: relative;
+			top: -50rpx;
+			margin: 0 auto;
+			width: 460rpx;
+			height: 120rpx;
+		}
 
-						&.large {
-							width: 150rpx;
+		.close {
+			padding: 30rpx 0;
+
+			.close-title {
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #333333;
+			}
+
+			.close-icon {
+				width: 30rpx;
+				height: 30rpx;
+			}
+		}
+
+		.p-swiper {
+			margin-top: 10rpx;
+			width: 100%;
+			height: 300rpx;
+
+			.p-item {
+				.play-pic {
+					margin: 0 auto 0;
+					width: 200rpx;
+					height: 200rpx;
+					position: relative;
+
+					.play-type {
+						position: absolute;
+						left: 50%;
+						top: 20rpx;
+						z-index: 1;
+						width: 120rpx;
+						border-radius: 20rpx;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						transform: translateX(-50%);
+
+						text {
+							font-family: YouSheBiaoTiHei;
+							font-weight: 400;
+							font-size: 28rpx;
+							color: #FFFFFF;
+							text-stroke: 1rpx #F42FEA;
+							-webkit-text-stroke: 1rpx #F42FEA;
 						}
 					}
-
-					.btn {}
-
-					.large {}
-				}
-			}
-
-			.boss-r {
-				display: flex;
-				flex-flow: column nowrap;
-				align-items: center;
-				padding-left: 50rpx;
-
-				.pic {
-					width: 130rpx;
-					height: 130rpx;
-					border: 1px solid;
-					border-image: linear-gradient(90deg, #6adeff, #7ab5ff, #ff7feb) 1 1;
-					box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(176, 128, 255, 0.8);
 				}
 
-				.ling {
-					width: 142rpx;
-					height: 50rpx;
+				.play-ling {
+					width: 180rpx;
+					height: 60rpx;
+					margin: 10rpx auto 0;
+				}
+
+				.play-name {
+					width: 310rpx;
+					margin: 16rpx auto 0;
+					text-align: center;
+
+					font-size: 20rpx;
+					// font-family: Source Han Sans CN;
+					font-weight: 400;
+					color: #333333;
 				}
 			}
 		}
 
-		.header {
-			width: 750rpx;
-			height: 722rpx;
-			margin-top: 130rpx;
-			background-color: #D8D8D8;
+		.hang1 {}
 
-			&-wuzhe {
-				width: 160rpx;
-				height: 60rpx;
-				position: absolute;
-				top: 300rpx;
-				left: 0;
+		.line {
+			margin: 0 auto 0;
+			width: 560rpx;
+			height: 1px;
+			background: #444444;
+		}
+
+		.rule-title {
+			width: 118rpx;
+			margin-left: 10rpx;
+			// font-family: YouSheBiaoTiHei;
+			font-weight: 400;
+			font-size: 32rpx;
+			color: #FFFFFF;
+		}
+
+		.rule-text {
+			width: 560rpx;
+			height: 200rpx;
+			margin: 20rpx auto 0;
+			font-size: 24rpx;
+			font-weight: 400;
+			color: #8A8A8A;
+		}
+	}
+
+	.d-pop {
+		position: relative;
+		width: 564rpx;
+		box-sizing: border-box;
+
+		.pic {
+			width: 564rpx;
+			height: 564rpx;
+			border-radius: 16rpx;
+
+			>image {
+				width: 564rpx;
+				height: 564rpx;
+				border-radius: 16rpx;
 			}
 
-			&-goodsTitel {
+			>view {
+				width: 68rpx;
+				height: 32rpx;
 				position: absolute;
+				top: 24rpx;
+				left: 24rpx;
+				font-weight: 400;
+				font-size: 14rpx;
+				color: #FFFFFF;
+				box-sizing: border-box;
+				background: url($imgurl+'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
+			}
+		}
+
+		.title {
+			margin: 40rpx auto 0;
+			width: 564rpx;
+			height: 82rpx;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			box-sizing: border-box;
+			padding: 20rpx;
+			// border: 2rpx solid #894DD3;
+			border-radius: 12rpx;
+			background: #F5F5F5;
+
+			>text {
 				font-weight: 400;
 				font-size: 24rpx;
-				color: #FFFFFF;
-				left: 50%;
-				transform: translateX(-50%);
-				bottom: 24rpx;
-				z-index: 2;
-			}
-
-			&-shoucang {
-				width: 65rpx;
-				height: 95rpx;
-				position: absolute;
-				right: 0;
-				top: 232rpx;
-				box-sizing: border-box;
-				// background: url($imgurl+'/common/shoucang.png') no-repeat 0 0 / 100% 100%;
-
-				>image {
-					width: 64rpx;
-					height: 64rpx;
-					// margin-top: 22rpx;
-				}
-
-				>text {
-					width: 100%;
-					text-align: center;
-					font-weight: 400;
-					font-size: 20rpx;
-					color: #FFFFFF;
-					margin-top: 4rpx;
-					// line-height: 66rpx;
-					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: #000000;
-				}
-
-				>text:nth-child(2) {
-					font-weight: 700;
-					font-size: 24rpx;
-					color: #000000;
-				}
-			}
-
-			&-canyu {
-				position: absolute;
-				left: 304rpx;
-				bottom: 142rpx;
-				z-index: 10;
-
-				&-imgs {
-					>image {
-						margin-left: -12rpx;
-						width: 32rpx;
-						height: 32rpx;
-						border-radius: 50rpx;
-					}
-				}
-
-				&-num {
-					font-weight: 400;
-					font-size: 20rpx;
-					margin-left: 8rpx;
-					color: #FFFFFF;
-					// text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
-				}
-			}
-
-			&-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%;
-					}
-				}
+				color: #333333;
 			}
 		}
 
-		.user-btns {
-			width: 690rpx;
-			padding: 0 30rpx;
+		.d-list {
 			display: flex;
+			flex-flow: row wrap;
 			justify-content: space-between;
-			align-items: center;
-			position: absolute;
-			left: 0;
-			top: 60rpx;
-			z-index: 1;
+			padding: 20rpx 0 0;
 
-			.user-num {
-				display: flex;
-				align-items: center;
+			.d-item {
+				margin-top: 14rpx;
 
 				font-size: 24rpx;
 				font-family: Source Han Sans CN;
 				font-weight: 400;
-				color: #dddddd;
-
-				.user-list {
-					display: flex;
-					padding-left: 26rpx;
-					padding-right: 10rpx;
-
-					.avatar {
-						width: 50rpx;
-						height: 50rpx;
-						background: #7f7f7f;
-						border: 1px solid #cccccc;
-						border-radius: 50%;
-						box-sizing: border-box;
-						position: relative;
-						margin-left: -26rpx;
-					}
-				}
-			}
-
-			.btns {
-				display: flex;
-				align-items: center;
-
-				.btn {
-					display: flex;
-					align-items: center;
-					margin-left: 40rpx;
-
-					font-size: 28rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					color: #ffffff;
-
-					.icon {
-						width: 32rpx;
-						height: 32rpx;
-						margin-right: 6rpx;
-					}
-
-					&.pd {
-						padding-left: 60rpx;
-					}
-
-					&.dis {
-						filter: grayscale(1);
-					}
-				}
-
-				.btn {
-					.icon {}
-				}
+				color: #ffffff;
 			}
 		}
 
-		.angry {
-			margin: 30rpx auto 0;
-			width: 690rpx;
-			height: 136rpx;
-			box-sizing: border-box;
-			padding: 0 30rpx;
+		.close {
+			width: 48rpx;
+			height: 48rpx;
+			position: absolute;
+			left: 50%;
+			bottom: 0;
+			transform: translate(-50%, 160%);
+		}
+	}
+
+	.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: 40rpx 0;
+			padding-left: 10rpx;
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-			background: #3B3941;
-			border-radius: 24rpx 24rpx 24rpx 24rpx;
-			border: 2rpx solid #FFFFFF;
+			font-size: 40rpx;
+			font-weight: 500;
+			color: #ffffff;
 
-			.icon {
-				width: 100rpx;
-				height: 58rpx;
-			}
-
-			.ang-info {
-				width: 490rpx;
-
-				.ang-num {
-					text-align: center;
-					font-size: 24rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					color: #FFFFFF;
-				}
-
-				.progress {
-					margin-top: 10rpx;
-
-					/deep/.cmd-progress-inner {
-						border-radius: 0;
-						background: #444444;
-					}
-				}
-
-				.tip {
-					margin-top: 20rpx;
-					display: flex;
-					font-size: 20rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					color: #ffffff;
-					line-height: 20rpx;
-				}
+			.close {
+				width: 24rpx;
+				height: 24rpx;
 			}
 		}
 
-		.list {
-			padding: 30rpx 20rpx 0;
+		.buy-card {
+			border-radius: 20rpx;
+			padding: 30rpx;
+			background: #FFFFFF;
 
-			.list-item {
-				box-sizing: border-box;
-
-				.list-title {
-					height: 52rpx;
-
-					>view:nth-child(1) {
-						>image {
-							width: 160rpx;
-							height: 72rpx;
-						}
-
-						>text {
-							font-weight: 400;
-							font-size: 20rpx;
-							color: #FFFFFF;
-						}
-					}
-				}
-
-				.goods-list {
-					padding: 30rpx 0rpx 0;
-					display: grid;
-					grid-template-columns: repeat(3, 220rpx);
-					grid-gap: 20rpx;
-
-					.goods-item {
-						display: inline-flex;
-						width: 220rpx;
-						background-color: #F8F8F8;
-						border-radius: 16rpx;
-						// height: 255rpx;
-
-						.pic {
-							width: 220rpx;
-							height: 220rpx;
-							border-radius: 12rpx;
-							position: relative;
-							margin: 0 auto;
-							background-color: #D8D8D8;
-							border-radius: 16rpx 16rpx 0rpx 0rpx;
-
-							.yu-tag {
-								position: absolute;
-								right: 10rpx;
-								bottom: 10rpx;
-								z-index: 1;
-								display: flex;
-								justify-content: center;
-								align-items: center;
-								font-weight: 400;
-								font-size: 32rpx;
-								color: #894DD3;
-								text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
-							}
-						}
-
-						.title {
-							text-align: left;
-							width: 200rpx;
-							margin: 20rpx auto 0;
-							font-size: 20rpx;
-							font-weight: 400;
-							color: #333333;
-						}
-
-						.price {
-							width: 200rpx;
-							margin: 12rpx auto 24rpx;
-							font-weight: 400;
-							font-size: 20rpx;
-							color: #333333;
-						}
-					}
-				}
-			}
-		}
-
-		.sub-tab {
-			white-space: nowrap;
-			padding: 10rpx 0 10rpx;
-
-			.sub-tab-item {
-				display: inline-flex;
-				align-items: center;
-				justify-content: center;
-				min-width: 88rpx;
-				height: 44rpx;
-				margin-left: 30rpx;
-				// font-family: YouSheBiaoTiHei;
-				font-weight: 400;
-				font-size: 20rpx;
-				color: #333333;
-				background: #F5F5F5;
-				border-radius: 8rpx;
-				border: 2rpx solid rgba(#FFFFFF, 0.7);
-
-				&.act {
-					background: #E6F791;
-					// font-family: YouSheBiaoTiHei;
-					font-weight: 400;
-					font-size: 20rpx;
-					color: #333333;
-				}
-
-				&:last-child {
-					margin-right: 30rpx;
-				}
-			}
-
-		}
-
-		.log-list {
-			padding: 1rpx 30rpx 30rpx;
-
-			.log-item {
-				height: 144rpx;
-				padding: 0 20rpx;
+			.buy-info {
 				display: flex;
-				align-items: center;
-				background: #F8F8F8;
-				margin-top: 24rpx;
 
-				.avatar {
-					width: 80rpx;
-					height: 80rpx;
-					background: #9d9d9d;
-					border: 1px solid #cccccc;
-					border-radius: 50%;
-					overflow: hidden;
+				.pic {
+					width: 190rpx;
+					height: 190rpx;
+					border-radius: 10rpx;
 				}
 
-				.info {
-					width: 230rpx;
-					margin-left: 20rpx;
+				.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;
 
-					.name {
-						font-size: 28rpx;
+					.title {
+						font-size: 24rpx;
 						font-family: Source Han Sans CN;
 						font-weight: 400;
 						color: #333333;
@@ -1670,739 +2527,76 @@
 
 					.hang1 {}
 
-					.time {
-						margin-top: 10rpx;
-						white-space: nowrap;
-
-						font-size: 24rpx;
+					.type {
+						font-size: 20rpx;
 						font-family: Source Han Sans CN;
 						font-weight: 400;
 						color: #999999;
 					}
-				}
 
-				.prize {
-					flex: 1;
-					padding-left: 50rpx;
-					display: flex;
-					align-items: center;
-
-					.pic {
-						width: 100rpx;
-						height: 100rpx;
-					}
-
-					>view:nth-child(2) {
-						>view:nth-child(1) {
-							padding: 0 20rpx;
-							min-width: 68rpx;
-							height: 32rpx;
-							box-sizing: border-box;
-							line-height: 40rpx;
-							border-radius: 18rpx;
-							font-size: 14rpx;
-							color: #FFFFFF;
-						}
-
-					}
-
-					.title {
-						width: 120rpx;
-						margin-left: 10rpx;
-						font-weight: 400;
-						font-size: 24rpx;
-						color: #333333;
-						text-align: right;
-					}
-
-					.num {
-						font-size: 24rpx;
-						font-family: Source Han Sans CN;
-						font-weight: 400;
-						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: 50rpx;
-			background: #FFFFFF;
-			padding-top: 20rpx;
-
-			.lt-btn {
-				width: 690rpx;
-				height: 80rpx;
-				background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
-				border-radius: 40rpx;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				margin-bottom: 20rpx;
-				font-size: 32rpx;
-				font-family: Source Han Sans CN;
-				font-weight: 400;
-				color: #ffffff;
-			}
-
-			.btn {
-				width: 120rpx;
-				height: 68rpx;
-				position: relative;
-
-				>view {
-					white-space: nowrap;
-					font-family: YouSheBiaoTiHei;
-					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%;
-					// }
-				}
-			}
-		}
-
-		.res-pop {
-			width: 100%;
-			height: 100vh;
-			position: relative;
-			background: url($imgurl+'common/yb.png') no-repeat 0 0 / 100% 100%;
-
-			.res-pop-hd {
-				width: 380rpx;
-				height: 104rpx;
-				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;
-								border-radius: 18rpx;
-								// background: url($imgurl+ 'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
-								font-weight: 400;
-								font-size: 14rpx;
-								// color: #F8F8F8;
-							}
-
-							.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: #ffffff;
-								background: rgba(0, 0, 0, 0.5);
-								border-radius: 18rpx;
-							}
-						}
-
-						.title {
-							width: 180rpx;
-							padding: 22rpx 0;
-							font-weight: 400;
-							font-size: 16rpx;
-							color: #333333;
-						}
-
-						.exchange {
-							padding: 10rpx 10rpx;
-							font-weight: 400;
-							font-size: 20rpx;
-							color: #FFFFFF;
-						}
-					}
-				}
-			}
-
-			.res-pop-ft {
-				padding-top: 40rpx;
-
-				.btn-list {
-					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;
-					}
-				}
-
-				.r-draw {
-					margin: 50rpx auto 0;
-					width: 244rpx;
-					height: 116rpx;
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #0E7792;
-
-					>text {
-						margin-top: 36rpx;
-					}
-				}
-			}
-		}
-
-		.boss-pop {
-			width: 750rpx;
-			box-sizing: border-box;
-			padding: 0 46rpx 40rpx;
-			position: relative;
-			background: #F7F7F7;
-			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%;
-			}
-
-			.boss-pop-title {
-				padding: 40rpx 0;
-				text-align: center;
-				// font-family: YouSheBiaoTiHei;
-				font-weight: 400;
-				font-size: 44rpx;
-				color: #333333;
-			}
-
-			.boss-pop-guize {
-				position: absolute;
-				top: 24rpx;
-				right: 24rpx;
-				color: #FFFFFF;
-				font-size: 28rpx;
-
-				>image {
-					width: 30rpx;
-					height: 30rpx;
-				}
-			}
-
-			.close {
-				position: absolute;
-				width: 30rpx;
-				height: 30rpx;
-				top: 50rpx;
-				right: 36rpx;
-			}
-
-			.boss-avatar {
-				margin: 20rpx auto 0;
-				width: 686rpx;
-				height: 264rpx;
-				background-color: #FFFFFF;
-
-				>image:nth-child(1) {
-					position: absolute;
-					left: 50%;
-					transform: translateX(-50%);
-					bottom: 112rpx;
-					width: 98rpx;
-					height: 98rpx;
-					border-radius: 50%;
-					z-index: 1;
-				}
-
-				>image:nth-child(2) {
-					position: absolute;
-					left: 50%;
-					transform: translateX(-50%);
-					width: 181rpx;
-					height: 153rpx;
-					bottom: 100rpx;
-					z-index: 2;
-				}
-			}
-
-			.boss-name {
-				margin: 30rpx auto 0;
-				width: 200rpx;
-				text-align: center;
-				font-size: 28rpx;
-				font-family: Source Han Sans CN;
-				font-weight: 400;
-				color: #333333;
-				left: 50%;
-				transform: translateX(-50%);
-				position: absolute;
-				bottom: 32rpx;
-			}
-
-			.hang1 {}
-
-			.boss-box {
-				margin: 70rpx auto 0;
-				width: 590rpx;
-				position: relative;
-				background: #3B3941;
-				border-radius: 22rpx;
-				padding: 30rpx;
-
-				.box-title {
-					color: #999999;
-
-					>text:nth-child(1) {
-						color: #999999;
-						font-size: 20rpx;
-						font-weight: bold;
-					}
-
-					>text:nth-child(2) {
-						font-size: 20rpx;
-						font-weight: 400;
-					}
-				}
-
-				.get-money {
-					margin-top: 30rpx;
-					font-size: 24rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					color: #ffffff;
-
-					&-one {
-						font-weight: 400;
-						font-size: 26rpx;
-						color: #999999;
-					}
-
-					// &-two {
-					// 	width: 34rpx;
-					// 	height: 34rpx;
-					// 	margin: 0 10rpx;
-					// }
-
-					&-three {
-						font-weight: 400;
-						font-size: 26rpx;
-						color: #999999;
-					}
-				}
-			}
-
-			.common_bg {}
-
-			.boss-tab {
-				padding: 30rpx 0;
-				display: flex;
-				justify-content: space-around;
-				align-items: center;
-
-				.boss-tab-item {
-					width: 33%;
-					height: 60rpx;
-					font-size: 20rpx;
-					font-weight: 400;
-					color: #8A8A8A;
-					display: flex;
-					justify-content: space-around;
-					align-items: center;
-					text-align: center;
-					background-color: #FFFFFF;
-					border-radius: 8rpx;
-
-					&.act {
-						font-weight: 500;
-						font-size: 20rpx;
-						color: #333333;
-						background-color: #E6F791;
-						border-radius: 8rpx;
-					}
-				}
-			}
-
-			.list-wrap {
-				// height: 350rpx;
-
-				.boss-list {
-					display: flex;
-					flex-flow: row wrap;
-					justify-content: space-between;
-
-					.people-item {
+					.price-num {
 						display: flex;
-						align-items: center;
-						width: 30%;
-
-						.avatar {
-							width: 52rpx;
-							height: 52rpx;
-							background: #9d9d9d;
-							border-radius: 50%;
-							box-sizing: border-box;
-							overflow: hidden;
-						}
-
-						.name {
-							width: calc(100% - 70rpx);
-							box-sizing: border-box;
-							padding-left: 10rpx;
-
-							font-size: 20rpx;
-							font-family: Source Han Sans CN;
-							font-weight: 400;
-							color: #999999;
-						}
-
-						.hang1 {}
-					}
-
-					.boss-log {
-						width: 100%;
-						box-sizing: border-box;
-						display: flex;
-						flex-direction: row;
-						align-items: center;
 						justify-content: space-between;
-						padding: 10rpx;
-
-						.avatar {
-							width: 60rpx;
-							height: 60rpx;
-							background: #9d9d9d;
-							// border: 1px solid #cccccc;
-							border-radius: 50%;
-							overflow: hidden;
-						}
-
-						.name {
-							width: 100rpx;
-							margin-left: 20rpx;
-							font-size: 20rpx;
-							// font-family: Source Han Sans CN;
-							font-weight: 400;
-							color: #999999;
-						}
-
-						.hang1 {}
-
-						.place {
-							margin-left: 30rpx;
-
-							font-size: 20rpx;
-							font-family: Source Han Sans CN;
-							font-weight: 400;
-							color: #999999;
-
-							text {
-								padding-left: 4rpx;
-								color: #999999;
-							}
-						}
-
-						.time {
-							flex: 1;
-							padding-left: 30rpx;
-
-							font-size: 24rpx;
-							font-family: Source Han Sans CN;
-							font-weight: 400;
-							color: #999999;
-						}
-					}
-
-					.boss-money {
-						width: 100%;
-						padding: 10rpx;
-						display: flex;
 						align-items: center;
 
-						.avatar {
-							width: 60rpx;
-							height: 60rpx;
-							background: #9d9d9d;
-							border: 1px solid #cccccc;
-							border-radius: 50%;
-						}
-
-						.name {
-							width: 200rpx;
-							margin-left: 20rpx;
-
-							font-size: 24rpx;
+						.price {
+							font-size: 16rpx;
 							font-family: Source Han Sans CN;
 							font-weight: 400;
-							color: #ffffff;
-						}
-
-						.hang1 {}
-
-						.money {
-							flex: 1;
-							text-align: right;
-
-							font-size: 24rpx;
-							font-family: Source Han Sans CN;
-							font-weight: 400;
-							color: #ffffff;
+							color: #333333;
 
 							text {
-								padding-left: 10rpx;
-								color: #d0d1ff;
-							}
-						}
-					}
-				}
-			}
-		}
-
-		.play-pop {
-			width: 680rpx;
-			box-sizing: border-box;
-			padding: 0 46rpx 40rpx;
-			position: relative;
-			background: #FFFFFF;
-			border-radius: 30rpx;
-			// border: 1px solid #7776AD;
-
-			.play-pop-hd {
-				position: relative;
-				top: -50rpx;
-				margin: 0 auto;
-				width: 460rpx;
-				height: 120rpx;
-			}
-
-			.close {
-				padding: 30rpx 0;
-
-				.close-title {
-					font-weight: 500;
-					font-size: 28rpx;
-					color: #333333;
-				}
-
-				.close-icon {
-					width: 30rpx;
-					height: 30rpx;
-				}
-			}
-
-			.p-swiper {
-				margin-top: 10rpx;
-				width: 100%;
-				height: 300rpx;
-
-				.p-item {
-					.play-pic {
-						margin: 0 auto 0;
-						width: 200rpx;
-						height: 200rpx;
-						position: relative;
-
-						.play-type {
-							position: absolute;
-							left: 50%;
-							top: 20rpx;
-							z-index: 1;
-							width: 120rpx;
-							border-radius: 20rpx;
-							display: flex;
-							justify-content: center;
-							align-items: center;
-							transform: translateX(-50%);
-
-							text {
-								font-family: YouSheBiaoTiHei;
-								font-weight: 400;
 								font-size: 28rpx;
-								color: #FFFFFF;
-								text-stroke: 1rpx #F42FEA;
-								-webkit-text-stroke: 1rpx #F42FEA;
 							}
 						}
-					}
 
-					.play-ling {
-						width: 180rpx;
-						height: 60rpx;
-						margin: 10rpx auto 0;
-					}
-
-					.play-name {
-						width: 310rpx;
-						margin: 16rpx auto 0;
-						text-align: center;
-
-						font-size: 20rpx;
-						// font-family: Source Han Sans CN;
-						font-weight: 400;
-						color: #333333;
+						.num {
+							font-size: 20rpx;
+							font-family: Source Han Sans CN;
+							font-weight: 400;
+							color: #999999;
+						}
 					}
 				}
 			}
 
-			.hang1 {}
-
 			.line {
-				margin: 0 auto 0;
-				width: 560rpx;
 				height: 1px;
-				background: #444444;
+				background: #222222;
+				margin: 30rpx 0 10rpx;
 			}
 
-			.rule-title {
-				width: 118rpx;
-				margin-left: 10rpx;
-				// font-family: YouSheBiaoTiHei;
+			.yhfs {
 				font-weight: 400;
-				font-size: 32rpx;
+				font-size: 28rpx;
 				color: #FFFFFF;
 			}
 
-			.rule-text {
-				width: 560rpx;
-				height: 200rpx;
-				margin: 20rpx auto 0;
-				font-size: 24rpx;
-				font-weight: 400;
-				color: #8A8A8A;
+
+			.card-row {
+				.title {}
+
+				.row-r {
+					.icon {}
+				}
 			}
 		}
 
-		.d-pop {
-			position: relative;
-			width: 564rpx;
-			box-sizing: border-box;
-
-			.pic {
-				width: 564rpx;
-				height: 564rpx;
-				border-radius: 16rpx;
-
-				>image {
-					width: 564rpx;
-					height: 564rpx;
-					border-radius: 16rpx;
-				}
-
-				>view {
-					width: 68rpx;
-					height: 32rpx;
-					position: absolute;
-					top: 24rpx;
-					left: 24rpx;
-					font-weight: 400;
-					font-size: 14rpx;
-					color: #FFFFFF;
-					box-sizing: border-box;
-					background: url($imgurl+'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
-				}
-			}
+		.card-row {
+			padding: 16rpx 0;
+			display: flex;
+			height: 82rpx;
+			justify-content: space-between;
+			align-items: center;
+			border-radius: 16rpx;
+			margin-top: 24rpx;
+			background-color: #FFFFFF;
 
 			.title {
-				margin: 40rpx auto 0;
-				width: 564rpx;
-				height: 82rpx;
-				box-sizing: border-box;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				box-sizing: border-box;
-				padding: 20rpx;
-				// border: 2rpx solid #894DD3;
-				border-radius: 12rpx;
-				background: #F5F5F5;
+				>image {
+					width: 32rpx;
+					height: 32rpx;
+				}
 
 				>text {
 					font-weight: 400;
@@ -2411,318 +2605,193 @@
 				}
 			}
 
-			.d-list {
+			.row-r {
 				display: flex;
-				flex-flow: row wrap;
-				justify-content: space-between;
-				padding: 20rpx 0 0;
+				align-items: center;
 
-				.d-item {
-					margin-top: 14rpx;
+				font-size: 20rpx;
+				font-family: Source Han Sans CN;
+				font-weight: 400;
+				color: #999999;
 
-					font-size: 24rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					color: #ffffff;
+				.icon {
+					width: 10rpx;
+					margin-right: 24rpx;
+					margin-left: 10rpx;
+					height: 17rpx;
 				}
 			}
-
-			.close {
-				width: 48rpx;
-				height: 48rpx;
-				position: absolute;
-				left: 50%;
-				bottom: 0;
-				transform: translate(-50%, 160%);
-			}
 		}
 
-		.buy-pop {
-			padding: 0 30rpx;
-			box-sizing: border-box;
-			background: #F7F7F7;
-			padding-bottom: 30rpx;
-			border-radius: 16rpx 16rpx 0rpx 0rpx;
+		.pay-title {
+			margin-top: 30rpx;
+			font-size: 28rpx;
+			font-weight: 400;
+			color: #ffffff;
+		}
 
-			&::after {
-				content: '';
-				position: absolute;
-				top: -62rpx;
-				left: 0;
-				width: 750rpx;
-				height: 62rpx;
-				// background: url($imgurl+'common/ding.png') no-repeat 0 0 / 100% 100%;
+		.pay-type {
+			padding: 30rpx 24rpx;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			margin-top: 20rpx;
+			display: flex;
+			align-items: center;
+
+			.icon {
+				width: 32rpx;
+				height: 32rpx;
 			}
 
-			.buy-pop-hd {
-				padding: 40rpx 0;
-				padding-left: 10rpx;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				font-size: 40rpx;
-				font-weight: 500;
-				color: #ffffff;
-
-				.close {
-					width: 24rpx;
-					height: 24rpx;
-				}
-			}
-
-			.buy-card {
-				border-radius: 20rpx;
-				padding: 30rpx;
-				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-family: Source Han Sans CN;
-							font-weight: 400;
-							color: #333333;
-						}
-
-						.hang1 {}
-
-						.type {
-							font-size: 20rpx;
-							font-family: Source Han Sans CN;
-							font-weight: 400;
-							color: #999999;
-						}
-
-						.price-num {
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-
-							.price {
-								font-size: 16rpx;
-								font-family: Source Han Sans CN;
-								font-weight: 400;
-								color: #333333;
-
-								text {
-									font-size: 28rpx;
-								}
-							}
-
-							.num {
-								font-size: 20rpx;
-								font-family: Source Han Sans CN;
-								font-weight: 400;
-								color: #999999;
-							}
-						}
-					}
-				}
-
-				.line {
-					height: 1px;
-					background: #222222;
-					margin: 30rpx 0 10rpx;
-				}
-
-				.yhfs {
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #FFFFFF;
-				}
-
-
-				.card-row {
-					.title {}
-
-					.row-r {
-						.icon {}
-					}
-				}
-			}
-
-			.card-row {
-				padding: 16rpx 0;
-				display: flex;
-				height: 82rpx;
-				justify-content: space-between;
-				align-items: center;
-				border-radius: 16rpx;
-				margin-top: 24rpx;
-				background-color: #FFFFFF;
-
-				.title {
-					>image {
-						width: 32rpx;
-						height: 32rpx;
-					}
-
-					>text {
-						font-weight: 400;
-						font-size: 24rpx;
-						color: #333333;
-					}
-				}
-
-				.row-r {
-					display: flex;
-					align-items: center;
-
-					font-size: 20rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					color: #999999;
-
-					.icon {
-						width: 10rpx;
-						margin-right: 24rpx;
-						margin-left: 10rpx;
-						height: 17rpx;
-					}
-				}
-			}
-
-			.pay-title {
-				margin-top: 30rpx;
-				font-size: 28rpx;
-				font-weight: 400;
-				color: #ffffff;
-			}
-
-			.pay-type {
-				padding: 30rpx 24rpx;
-				background: #FFFFFF;
-				border-radius: 20rpx;
-				margin-top: 20rpx;
-				display: flex;
-				align-items: center;
-
-				.icon {
-					width: 32rpx;
-					height: 32rpx;
-				}
-
-				.title {
-					flex: 1;
-
-					font-size: 24rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					color: #333333;
-				}
-			}
-
-			.agree {
-				display: flex;
-				margin-top: 30rpx;
+			.title {
+				flex: 1;
 
 				font-size: 24rpx;
 				font-family: Source Han Sans CN;
 				font-weight: 400;
-				color: #999999;
-				line-height: 32rpx;
-
-				.icon {
-					width: 32rpx;
-					height: 32rpx;
-					margin-right: 10rpx;
-				}
-
-				text {
-					color: #999999;
-				}
-			}
-
-			.rule {
-				padding: 20rpx;
-				background: #F9F8E1;
-				border-radius: 20rpx;
-				box-sizing: border-box;
-				margin: 20rpx 0 0;
-
-				.rule-inner {
-					max-height: 160rpx;
-
-					font-size: 20rpx;
-					font-family: Source Han Sans CN;
-					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;
-				align-items: center;
-				justify-content: center;
-				font-weight: 500;
-				color: #CDEF27;
-
-				>text:nth-child(1) {
-					font-size: 24rpx;
-				}
-
-				>text:nth-child(2) {
-					font-size: 24rpx;
-				}
+				color: #333333;
 			}
 		}
 
-		.ani-pop {
-			width: 100vw;
-			height: 100vh;
-			position: fixed;
-			left: 0;
-			top: 0;
-			z-index: 88;
+		.agree {
 			display: flex;
-			justify-content: center;
-			align-items: center;
-			background: #000;
+			margin-top: 30rpx;
 
-			image {
-				width: 100%;
-				height: 1624rpx;
+			font-size: 24rpx;
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			color: #999999;
+			line-height: 32rpx;
+
+			.icon {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 10rpx;
+			}
+
+			text {
+				color: #999999;
+			}
+		}
+
+		.rule {
+			padding: 20rpx;
+			background: #F9F8E1;
+			border-radius: 20rpx;
+			box-sizing: border-box;
+			margin: 20rpx 0 0;
+
+			.rule-inner {
+				max-height: 160rpx;
+
+				font-size: 20rpx;
+				font-family: Source Han Sans CN;
+				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;
+			align-items: center;
+			justify-content: center;
+			font-weight: 500;
+			color: #CDEF27;
+
+			>text:nth-child(1) {
+				font-size: 24rpx;
+			}
+
+			>text:nth-child(2) {
+				font-size: 24rpx;
 			}
 		}
 	}
 
-	.gradient-text {
-		background-image: linear-gradient(to right, #FF5722, #FFEB3B); /* 从橙色到黄色的渐变 */
-		-webkit-background-clip: text;
-		background-clip: text;
-		-webkit-text-fill-color: transparent;
-		color: #FF5722;
-	}
-
-	.yu-tag-text {
-		position: absolute;
-		right: 10rpx;
-		bottom: 10rpx;
-		z-index: 1;
+	.ani-pop {
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		left: 0;
+		top: 0;
+		z-index: 88;
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		font-weight: 400;
-		font-size: 32rpx;
- 
+		background: #000;
+
+		image {
+			width: 100%;
+			height: 1624rpx;
+		}
 	}
+}
+
+.gradient-text {
+	background-image: linear-gradient(to right, #FF5722, #FFEB3B);
+	/* 从橙色到黄色的渐变 */
+	-webkit-background-clip: text;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+	color: #FF5722;
+}
+
+.yu-tag-text {
+	position: absolute;
+	right: 10rpx;
+	bottom: 10rpx;
+	z-index: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-weight: 400;
+	font-size: 32rpx;
+
+}
+
+
+.item-info {
+	padding: 5rpx 0;
+}
+
+.item-title {
+	padding: 0 2%;
+	margin: 10rpx 0rpx 0rpx 0rpx;
+	width: 100%;
+	font-size: 21rpx;
+	text-align: left;
+	height: 35rpx;
+	line-height: 35rpx;
+	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: 21rpx;
+	text-align: left;
+	height: 35rpx;
+	line-height: 35rpx;
+	color: #f39205;
+}
+
+.item-price {
+	padding: 0 2%;
+	margin: 1rpx 0;
+	width: 100%;
+	font-size: 21rpx;
+	text-align: left;
+	height: 35rpx;
+	line-height: 35rpx;
+	color: #333333;
+}
 </style>
\ No newline at end of file