diff --git a/App.vue b/App.vue
index 64804e3..8600157 100644
--- a/App.vue
+++ b/App.vue
@@ -184,4 +184,13 @@ button.hide {
 .uni-tabbar__icon {
   height: 50px !important;
 }
-</style>
\ No newline at end of file
+</style>
+
+<template>
+  <view>    
+    <!-- 主应用容器 -->
+    <view>
+      <slot></slot>
+    </view>
+  </view>
+</template>
\ No newline at end of file
diff --git a/common/config.js b/common/config.js
index 4f751db..92f77cf 100644
--- a/common/config.js
+++ b/common/config.js
@@ -36,6 +36,7 @@ class ConfigManager {
           if (res.status === 1 && res.data) {
             configData = res.data;
             console.log('全局配置数据加载成功');
+            uni.setStorageSync('configData', configData);
             resolve(configData);
           } else {
             console.error('加载配置数据失败:', res.msg || '未知错误');
diff --git a/components/detail-preview-popup/detail-preview-popup.vue b/components/detail-preview-popup/detail-preview-popup.vue
new file mode 100644
index 0000000..2e36608
--- /dev/null
+++ b/components/detail-preview-popup/detail-preview-popup.vue
@@ -0,0 +1,240 @@
+<template>
+  <uni-popup ref="popup" type="center" maskBackgroundColor="rgba(0,0,0,0.9)">
+    <view v-if="visible" class="preview-popup">
+      <!-- 商品图片 -->
+      <view class="pic center relative">
+        <image :src="innerImgUrl" lazy-load></image>
+        <view class="type-tag justify-center" v-if="innerTipTitle">{{ innerTipTitle }}</view>
+      </view>
+
+      <!-- 商品标题 -->
+      <view class="title">
+        <text class="hang1">{{ innerTitle }}</text>
+      </view>
+
+      <!-- 商品信息列表 -->
+      <view class="info-list">
+        <view class="info-item" v-if="innerProbability">{{ innerProbability }}</view>
+        <view class="info-item" v-if="innerProductType">产品类型: {{ innerProductType }}</view>
+        <view class="info-item" v-for="(item, index) in innerExtraInfo" :key="index">{{ item }}</view>
+      </view>
+
+      <!-- 关闭按钮 -->
+      <view class="close icon" @click="closePopup">
+        <image :src="$img('/static/img/close.png')" lazy-load></image>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script>
+export default {
+  name: 'DetailPreviewPopup',
+  props: {
+    // 商品标题
+    title: {
+      type: String,
+      default: ''
+    },
+    // 商品图片地址
+    imgUrl: {
+      type: String,
+      default: ''
+    },
+    // 商品提示标签标题
+    tipTitle: {
+      type: String,
+      default: ''
+    },
+    // 商品类型
+    productType: {
+      type: String,
+      default: ''
+    },
+    // 商品概率
+    probability: {
+      type: String,
+      default: ''
+    },
+    // 额外信息(可选)
+    extraInfo: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      // 内部数据，用于显示
+      innerTitle: '',
+      innerImgUrl: '',
+      innerTipTitle: '',
+      innerProductType: '',
+      innerProbability: '',
+      innerExtraInfo: []
+    }
+  },
+  watch: {
+    // 监听props变化，更新内部数据
+    title(val) {
+      this.innerTitle = val;
+    },
+    imgUrl(val) {
+      this.innerImgUrl = val;
+    },
+    tipTitle(val) {
+      this.innerTipTitle = val;
+    },
+    productType(val) {
+      this.innerProductType = val;
+    },
+    probability(val) {
+      this.innerProbability = val;
+    },
+    extraInfo(val) {
+      this.innerExtraInfo = val;
+    }
+  },
+  created() {
+    // 初始化内部数据
+    this.innerTitle = this.title;
+    this.innerImgUrl = this.imgUrl;
+    this.innerTipTitle = this.tipTitle;
+    this.innerProductType = this.productType;
+    this.innerProbability = this.probability;
+    this.innerExtraInfo = this.extraInfo;
+  },
+  methods: {
+    // 设置预览数据并打开弹窗
+    setPreviewData(data) {
+      if (!data) return;
+      
+      // 更新内部数据
+      if (data.title !== undefined) this.innerTitle = data.title;
+      if (data.imgUrl !== undefined) this.innerImgUrl = data.imgUrl;
+      if (data.tipTitle !== undefined) this.innerTipTitle = data.tipTitle;
+      if (data.productType !== undefined) this.innerProductType = data.productType;
+      if (data.probability !== undefined) this.innerProbability = data.probability;
+      if (data.extraInfo !== undefined) this.innerExtraInfo = data.extraInfo;
+      
+      // 打开弹窗
+      this.open();
+    },
+    
+    // 打开弹窗
+    open() {
+      console.log('尝试打开弹窗');
+      this.visible = true;
+      
+      // 使用nextTick确保DOM更新后再打开弹窗
+      this.$nextTick(() => {
+        console.log('DOM已更新，准备打开弹窗');
+        if (this.$refs.popup) {
+          this.$refs.popup.open();
+          console.log('弹窗已打开');
+        } else {
+          console.error('popup ref不存在，请检查组件是否正确挂载');
+        }
+      });
+    },
+    
+    // 关闭弹窗
+    closePopup() {
+      this.visible = false;
+      if (this.$refs.popup) {
+        this.$refs.popup.close();
+      }
+      this.$emit('close');
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.preview-popup {
+  position: relative;
+  width: 570rpx;
+  box-sizing: border-box;
+
+  // 商品图片区域
+  .pic {
+    width: 570rpx;
+    height: 598rpx;
+    background: #FFFFFF;
+    border-radius: 16rpx;
+
+    image {
+      width: 548rpx;
+      height: 549rpx;
+    }
+
+    // 商品标签
+    .type-tag {
+      width: 68rpx;
+      height: 32rpx;
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      top: 12rpx;
+      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: 60rpx;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20rpx;
+    border-radius: 12rpx;
+    background: #F5F5F5;
+
+    text {
+      font-weight: 600;
+      font-size: 24rpx;
+      color: #333333;
+    }
+  }
+
+  // 商品信息列表
+  .info-list {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    padding: 20rpx 0 0;
+
+    .info-item {
+      margin-top: 14rpx;
+      font-size: 24rpx;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #ffffff;
+    }
+  }
+
+  // 关闭按钮
+  .close {
+    width: 48rpx;
+    height: 48rpx;
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, 160%);
+    
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/components/detail-prize-log/detail-prize-log.vue b/components/detail-prize-log/detail-prize-log.vue
new file mode 100644
index 0000000..937d060
--- /dev/null
+++ b/components/detail-prize-log/detail-prize-log.vue
@@ -0,0 +1,233 @@
+<template>
+  <view class="prize-log-wrapper">
+    <!-- 分类标签 -->
+    <scroll-view class="sub-tab" scroll-x>
+      <view
+        v-for="(item, i) in subTab"
+        :key="i"
+        class="sub-tab-item"
+        :class="{ act: currentSubTab === i, unact: currentSubTab !== i }"
+        @click="onSubTabChange(i)"
+      >
+        {{ item.shang_title }}
+      </view>
+    </scroll-view>
+
+    <!-- 中奖记录列表 -->
+    <view v-if="logList.length > 0" class="log-list">
+      <view v-for="(item, i) in logList" :key="i" class="log-item br20">
+        <!-- 用户头像 -->
+        <view class="avatar">
+          <image :src="item.user_info.headimg" lazy-load></image>
+        </view>
+
+        <!-- 用户信息 -->
+        <view class="info">
+          <view class="name hang1">{{ item.user_info.nickname }}</view>
+          <view class="time">{{ item.addtime }}</view>
+        </view>
+
+        <!-- 中奖信息 -->
+        <view class="prize">
+          <view class="pic flex">
+            <image
+              class="img100"
+              :src="item.goodslist_imgurl"
+              lazy-load
+            ></image>
+          </view>
+          <view class="column align-end">
+            <view
+              class="prize-shang center"
+              :style="{ background: item.shang_color }"
+            >
+              {{ item.shang_title }}
+            </view>
+            <view class="flex mt10">
+              <view class="title hang1">{{ item.goodslist_title }}</view>
+              <view class="num">×{{ item.prize_num }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 无数据提示 -->
+    <view v-else class="empty-tip">暂无中奖记录</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "DetailPrizeLog",
+  props: {
+    // 分类标签列表
+    subTab: {
+      type: Array,
+      default: () => [],
+    },
+    // 中奖记录列表
+    logList: {
+      type: Array,
+      default: () => [],
+    },
+    // 当前选中的分类
+    currentSubTab: {
+      type: Number,
+      default: 0,
+    },
+  },
+  methods: {
+    // 切换分类
+    onSubTabChange(index) {
+      if (index === this.currentSubTab) return;
+      this.$emit("sub-tab-change", index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.prize-log-wrapper {
+  width: 100%;
+
+  // 分类标签栏
+  .sub-tab {
+    white-space: nowrap;
+    padding: 30rpx 0 10rpx;
+
+    .sub-tab-item {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 20rpx;
+      height: 50rpx;
+      margin-left: 30rpx;
+      font-size: 24rpx;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #333333;
+      border-radius: 8rpx;
+      transition: all 0.2s;
+
+      // 活跃状态
+      &.act {
+        color: #333333;
+        background: #e6f791;
+      }
+
+      // 非活跃状态
+      &.unact {
+        color: #333333;
+        background: #f5f5f5;
+      }
+
+      &:last-child {
+        margin-right: 30rpx;
+      }
+    }
+  }
+
+  // 中奖记录列表
+  .log-list {
+    padding: 1rpx 30rpx 30rpx;
+
+    .log-item {
+      height: 144rpx;
+      padding: 0 20rpx;
+      display: flex;
+      align-items: center;
+      margin-top: 20rpx;
+      background: #f8f8f8;
+
+      // 用户头像
+      .avatar {
+        width: 76rpx;
+        height: 76rpx;
+        background: #9d9d9d;
+        border: 1px solid #cccccc;
+        border-radius: 50%;
+        overflow: hidden;
+
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      // 用户信息
+      .info {
+        width: 230rpx;
+        margin-left: 20rpx;
+
+        .name {
+          font-size: 20rpx;
+          font-weight: 400;
+          color: #333333;
+        }
+
+        .time {
+          margin-top: 10rpx;
+          white-space: nowrap;
+          font-size: 16rpx;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #999999;
+        }
+      }
+
+      // 中奖物品信息
+      .prize {
+        flex: 1;
+        padding-left: 60rpx;
+        display: flex;
+        align-items: center;
+
+        .prize-shang {
+          height: 40rpx;
+          padding: 0 20rpx;
+          border-radius: 8rpx;
+          border: 2rpx solid #ffffff;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #ffffff;
+        }
+
+        .pic {
+          width: 76rpx;
+          height: 76rpx;
+
+          image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .title {
+          width: 100rpx;
+          margin-left: 20rpx;
+          font-size: 16rpx;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #333333;
+          text-align: right;
+        }
+
+        .num {
+          font-size: 16rpx;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #333333;
+        }
+      }
+    }
+  }
+
+  // 空数据提示
+  .empty-tip {
+    text-align: center;
+    padding: 40rpx 0;
+    color: #999;
+    font-size: 28rpx;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/components/detail-toolbar/detail-toolbar.vue b/components/detail-toolbar/detail-toolbar.vue
new file mode 100644
index 0000000..c081774
--- /dev/null
+++ b/components/detail-toolbar/detail-toolbar.vue
@@ -0,0 +1,90 @@
+<template>
+  <view class="detail-toolbar" :style="customStyle">
+    <!-- 购买说明按钮 -->
+    <view class="toolbar-item">
+      <image class="toolbar-img" 
+        :src="$img1('common/gzsm.png')" 
+        @click="onRuleClick(getRuleId)">
+      </image>
+    </view>
+    
+    <!-- 商品预览按钮 -->
+    <view class="toolbar-item" @tap="onTabChange(1)">
+      <image class="toolbar-img" :src="$img1(currentTab==1 ? 'common/spyl1.png' : 'common/spyl2.png')"></image>
+    </view>
+    
+    <!-- 中赏记录按钮 -->
+    <view class="toolbar-item" @tap="onTabChange(2)">
+      <image class="toolbar-img" :src="$img1(currentTab==1 ? 'common/zsjl2.png' : 'common/zsjl1.png')"></image>
+    </view>
+    
+    <!-- 换箱按钮 -->
+    <view class="toolbar-item" @click="onChangeBox">
+      <image class="toolbar-img" :src="$img1('common/huanxiang.png')"></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'DetailToolbar',
+  props: {
+    goodsType: {
+      type: [Number, String],
+      default: 0
+    },
+    currentTab: {
+      type: [Number, String],
+      default: 1
+    },
+    customStyle: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    getRuleId() {
+      // 根据商品类型返回对应的规则ID
+      const typeRuleMap = {
+        5: 13,
+        6: 18
+      };
+      return typeRuleMap[this.goodsType] || 7;
+    }
+  },
+  methods: {
+    onRuleClick(ruleId) {
+      this.$emit('rule-click', ruleId, '购买说明');
+    },
+    onTabChange(tabId) {
+      this.$emit('tab-change', tabId);
+    },
+    onChangeBox() {
+      this.$emit('change-box');
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.detail-toolbar {
+  display: flex;
+  flex-direction: row;
+  margin-left: 32rpx;
+  margin-top: 56rpx;
+  
+  .toolbar-item {
+    width: 160rpx;
+    height: 92rpx;
+    
+    &:not(:first-child) {
+      margin-left: 16rpx;
+    }
+    
+    .toolbar-img {
+      width: 160rpx;
+      height: 92rpx;
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/main.js b/main.js
index 4838072..7f263a4 100644
--- a/main.js
+++ b/main.js
@@ -7,6 +7,10 @@ import ConfigManager from '@/common/config.js'
 import RequestManager from '@/common/request.js'
 import EnvConfig from '@/common/env.js'
 
+// 全局注册uni-popup组件
+import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
+Vue.component('uni-popup', uniPopup)
+
 // 全局变量配置
 Vue.prototype.siteBaseUrl = EnvConfig.apiBaseUrl
 Vue.prototype.$baseUrl = EnvConfig.baseUrl
diff --git a/pages.json b/pages.json
index 55d0260..b415c2f 100644
--- a/pages.json
+++ b/pages.json
@@ -1,7 +1,10 @@
 {
 	"easycom": {
 		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
-		"^collect-btn$": "@/components/collect-btn/collect-btn.vue"
+		"^collect-btn$": "@/components/collect-btn/collect-btn.vue",
+		"^detail-toolbar$": "@/components/detail-toolbar/detail-toolbar.vue",
+		"^detail-prize-log$": "@/components/detail-prize-log/detail-prize-log.vue",
+		"^detail-preview-popup$": "@/components/detail-preview-popup/detail-preview-popup.vue"
 	},
 	"pages": [{
 			"path": "pages/shouye/index",
diff --git a/pages/shouye/detail.vue b/pages/shouye/detail.vue
index 3991780..827c242 100644
--- a/pages/shouye/detail.vue
+++ b/pages/shouye/detail.vue
@@ -2,347 +2,301 @@
 盒子详情
 -->
 <template>
-	<view class="content">
-		<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 class="content">
+    <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="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>
+      <view
+        class="header-suoxiang center"
+        v-if="
+          pageData.goods.lock_is == 1 &&
+          pageData.lock_info.goods_lock_surplus_time > 0
+        "
+      >
+        <image
+          :src="pageData.lock_info.goods_lock_user_headimg"
+          mode="aspectFill"
+        ></image>
+        <view class="hidden ml10">{{
+          pageData.lock_info.goods_lock_user_nickname
+        }}</view>
+        <image
+          class="ml20"
+          :src="$img1('index/suoxiang.png')"
+          mode="aspectFit"
+        ></image>
+        <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%',
+        }"
+      >
+        <text>
+          <template></template>
+        </text>
+        <text>
+          <template v-if="pageData.goods.type != 5">￥</template>
+          <template>{{ pageData.goods.price }}</template>
+          <template v-if="pageData.goods.type == 5">积分</template>
+        </text>
+        <text>
+          <template v-if="pageData.goods.type != 5">/含明信片</template>
+        </text>
+      </view>
+      <collect-btn
+        v-if="pageData && pageData.goods"
+        :goods-id="pageData.goods.id"
+        :goods-num="pageData.goods.num"
+        :is-collected="pageData.goods.collection_is"
+        @collection-changed="onCollectionChanged"
+      ></collect-btn>
+    </view>
+    <!--选项卡-->
+    <detail-toolbar
+      :goods-type="pageData.goods.type"
+      :current-tab="tabCur"
+      @rule-click="handleRuleClick"
+      @tab-change="tabChange"
+      @change-box="changeBox"
+    ></detail-toolbar>
+    <view class="spylView" v-if="tabCur == 1 && pageData">
+      <view class="spylView-head align-center justify-between">
+        <view class="column align-center" @click="prev">
+          <view class="center" style="width: 64rpx; height: 64rpx">
+            <uni-icons type="left" color="#999999"></uni-icons>
+          </view>
+        </view>
+        <view class="">
+          <view class="bgfff flex">
+            <text :style="{ width: '80%' }"></text>
+          </view>
+          <view class="align-center justify-between" v-if="pageData.goods">
+            <view class="align-center"
+              >第 <text>{{ pageData.goods.num }}</text> /{{
+                pageData.goods.stock
+              }}箱
+            </view>
+            <view>赏品余量</view>
+            <view class="align-center">
+              <text>{{ pageData.goods.goodslist_surplus_stock }}</text
+              >/{{ pageData.goods.goodslist_stock }}
+            </view>
+          </view>
+        </view>
+        <view class="column align-center" @click="next">
+          <view class="center" style="width: 64rpx; height: 64rpx">
+            <uni-icons type="right" color="#999999"></uni-icons>
+          </view>
+        </view>
+      </view>
+      <!-- 赏品列表 -->
+      <view class="list">
+        <view
+          class="list-item"
+          v-for="(item, i) in pageData.goodslist"
+          :key="i"
+          @click="previewDetail(item)"
+        >
+          <view class="pic center relative">
+            <image class="pic-img" :src="item.imgurl" mode="aspectFit"></image>
+            <view
+              class="type-tag center"
+              :style="{
+                background: item.shang_info ? item.shang_info.color : '#FFFFFF',
+              }"
+            >
+              {{ item.shang_info ? item.shang_info.title : "" }}
+            </view>
+            <view class="num center bgfff"
+              >{{ item.surplus_stock }}/{{ item.stock }}</view
+            >
+            <view v-if="item.goods_type == 2" class="yu-tag ziti">预售</view>
+            <view v-if="item.surplus_stock <= 0" class="shadow center">
+              <image :src="$img1('common/sold_out.png')"></image>
+            </view>
+          </view>
+          <view class="title hang1">
+            {{ item.title }}
+          </view>
+          <view class="desc">{{ item.pro }}</view>
+          <view class="price">
+            <text
+              >售价:￥ <text style="font-size: 24rpx">{{ item.sc_money }}</text>
+            </text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <template v-if="tabCur == 2">
+      <mescroll-body
+        ref="mescrollRef"
+        @init="mescrollInit"
+        @down="downCallback"
+        @up="getLog"
+        :down="downOption"
+        :up="upOption"
+      >
+        <detail-prize-log
+          :sub-tab="subTab"
+          :log-list="logList"
+          :current-sub-tab="subTabCur"
+          @sub-tab-change="subTabChange"
+        ></detail-prize-log>
+      </mescroll-body>
+    </template>
+    <view v-if="pageData" class="ft-fixed justify-evenly">
+      <view
+        class="btn common_bg column center"
+        v-if="getBtnXianShi(1)"
+        :style="{ backgroundImage: `url(${$img1('common/chouBtn1.png')})` }"
+        @click="confirmSubmit([0, 1])"
+      >
+      </view>
+      <view
+        class="btn common_bg column center"
+        v-if="getBtnXianShi(3)"
+        :style="{ backgroundImage: `url(${$img1('common/chouBtn3.png')})` }"
+        @click="confirmSubmit([0, 3])"
+      >
+      </view>
+      <view
+        class="btn common_bg column center"
+        v-if="getBtnXianShi(5)"
+        :style="{ backgroundImage: `url(${$img1('common/chouBtn5.png')})` }"
+        @click="confirmSubmit([0, 5])"
+      >
+      </view>
+      <view
+        class="btn common_bg column center"
+        v-if="pageData.goods.type != 5 && getBtnXianShi(0)"
+        :style="{ backgroundImage: `url(${$img1('common/chouBtnAll.png')})` }"
+        @click="confirmSubmit([0, pageData.goods.goodslist_surplus_stock])"
+      >
+      </view>
+    </view>
 
-		</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">
-				<image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
-			</view>
-			<view class="header-goodsTitel">{{ pageData.goods.title }}</view>
-			<view class="header-suoxiang center"
-				v-if="pageData.goods.lock_is == 1 && pageData.lock_info.goods_lock_surplus_time > 0">
-				<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/suoxiang.png')" mode="aspectFit"></image>
-				<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%'}">
-				<text>
-					<template></template>
-				</text>
-				<text>
-					<template v-if="pageData.goods.type != 5">￥</template>
-					<template>{{pageData.goods.price}}</template>
-					<template v-if="pageData.goods.type == 5">积分</template>
-				</text>
-				<text>
-					<template v-if="pageData.goods.type != 5">/含明信片</template>
-				</text>
-			</view>
-			<collect-btn 
-				v-if="pageData && pageData.goods" :goods-id="pageData.goods.id" 
-				:goods-num="pageData.goods.num"
-				:is-collected="pageData.goods.collection_is"
-				@collection-changed="onCollectionChanged"
-			></collect-btn>
-		</view>
-		<view class="spylView" v-if="tabCur == 1 && pageData">
-			<view class="" style="display: flex; flex-direction: row; margin-left: 32rpx; margin-top: 56rpx;">
-				<view class="" style="width: 160rpx; height: 92rpx;">
-					<image style="width: 160rpx; height: 92rpx;" v-if="pageData.goods.type == 5"
-						@click="$refs.rulePop.getRule(13, '购买说明')" :src="$img1('common/gzsm.png')"></image>
-					<image style="width: 160rpx; height: 92rpx;" v-else-if="pageData.goods.type == 6"
-						@click="$refs.rulePop.getRule(18, '购买说明')" :src="$img1('common/gzsm.png')"></image>
-					<image style="width: 160rpx; height: 92rpx;" v-else @click="$refs.rulePop.getRule(7, '购买说明')"
-						:src="$img1('common/gzsm.png')"></image>
-				</view>
-				<view class="" style="width: 160rpx; height: 92rpx; margin-left: 16rpx;" @tap="tabChange(1)">
-					<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>
-				</view>
-				<view class="" style="width: 160rpx; height: 92rpx; margin-left: 16rpx;" @tap="tabChange(2)">
-					<image style="width: 160rpx; height: 92rpx;" v-if="tabCur==1" :src="$img1('common/zsjl2.png')">
-					</image>
-					<image style="width: 160rpx; height: 92rpx;" v-if="tabCur==2" :src="$img1('common/zsjl1.png')">
-					</image>
-				</view>
-				<view class="" style="width: 160rpx; height: 92rpx; margin-left: 16rpx;" @click="changeBox">
-					<image style="width: 160rpx; height: 92rpx;" :src="$img1('common/huanxiang.png')"></image>
-				</view>
-			</view>
+    <uni-popup ref="buyPop" type="bottom">
+      <view v-if="orderData" class="buy-pop relative">
+        <view class="buy-pop-hd">
+          <view class="" style="width: 60rpx"></view>
+          <text class="" style="font-size: 28rpx">确认订单</text>
+          <view class="close icon" @click="close('buyPop')">
+            <image
+              :src="$img('/static/img/close2.png')"
+              style="width: 24rpx; height: 24rpx"
+              lazy-load
+            >
+            </image>
+          </view>
+        </view>
 
+        <view class="buy-card">
+          <view class="buy-info">
+            <view class="pic flex">
+              <image
+                class="img100"
+                :src="orderData.goods.imgurl_detail"
+              ></image>
+            </view>
 
-			<view class="spylView-head align-center justify-between">
-				<view class="column align-center" @click="prev">
-					<view class="center" style="width: 64rpx; height: 64rpx;">
-						<uni-icons type="left" color="#999999"></uni-icons>
-					</view>
-					<!-- <view class="">上一箱</view> -->
-				</view>
-				<view class="">
-					<view class="bgfff flex">
-						<text :style="{width:'80%'}"></text>
-					</view>
-					<view class="align-center justify-between" v-if="pageData.goods">
-						<view class="align-center">第 <text>{{ pageData.goods.num }}</text> /{{ pageData.goods.stock }}箱
-						</view>
-						<view>赏品余量</view>
-						<view class="align-center">
-							<text>{{ pageData.goods.goodslist_surplus_stock }}</text>/{{ pageData.goods.goodslist_stock }}
-						</view>
-					</view>
-				</view>
-				<view class="column align-center" @click="next">
-					<view class="center" style="width: 64rpx; height: 64rpx;">
-						<uni-icons type="right" color="#999999"></uni-icons>
-					</view>
-					<!-- <view class="">下一箱</view> -->
-				</view>
-			</view>
+            <view class="info-r">
+              <view class="title hang1">
+                {{ orderData.goods.title }}
+              </view>
 
+              <view class="type">类型:明信片</view>
 
-			<!-- 赏品列表 -->
-			<view class="list">
-				<view class="list-item" v-for="(item, i) in pageData.goodslist" :key="i" @click="previewDetail(item)">
-					<view class="pic center relative">
-						<image class="pic-img" :src="item.imgurl" mode="aspectFit"></image>
-						<view class="type-tag center"
-							:style="{background: item.shang_info?item.shang_info.color:'#FFFFFF'}">
-							{{ item.shang_info?item.shang_info.title:'' }}
-						</view>
-						<view class="num center bgfff">{{ item.surplus_stock }}/{{ item.stock }}</view>
-						<view v-if="item.goods_type == 2" class="yu-tag ziti">预售</view>
-						<view v-if="item.surplus_stock <= 0" class="shadow center">
-							<image :src="$img1('common/sold_out.png')"></image>
-						</view>
-					</view>
+              <template
+                v-if="
+                  orderData.goods.is_shou_zhe == 1 &&
+                  orderData.goods.shou_zhe_price * 1 > 0
+                "
+              >
+                <view class="price-num">
+                  <view class="price">
+                    <template v-if="pageData.goods.type != 5">¥</template>
+                    <text>{{ orderData.goods.shou_zhe_price }}</text>
+                    <template v-if="pageData.goods.type == 5">积分</template>
+                    (首抽5折)
+                  </view>
 
-					<view class="title hang1">
-						{{ item.title }}
-					</view>
-					<view class="desc">{{ item.pro }}</view>
-					<view class="price">
-						<text>售价:￥ <text style="font-size: 24rpx;">{{ item.sc_money }}</text> </text>
-					</view>
+                  <view class="num">×{{ 1 }}</view>
+                </view>
 
+                <view v-if="orderData.goods.prize_num > 1" class="price-num">
+                  <view class="price">
+                    <template v-if="pageData.goods.type != 5">¥</template>
+                    <text>{{ orderData.goods.price }}</text>
+                    <template v-if="pageData.goods.type == 5">积分</template>
+                  </view>
 
-				</view>
-			</view>
-		</view>
+                  <view class="num">
+                    ×{{ orderData.goods.prize_num * 1 - 1 }}
+                  </view>
+                </view>
+              </template>
 
+              <view v-else class="price-num">
+                <view class="price">
+                  <template v-if="pageData.goods.type != 5">¥</template>
+                  <text>{{ orderData.goods.price }}</text>
+                  <template v-if="pageData.goods.type == 5">积分</template>
+                </view>
 
-		<template v-if="tabCur == 2">
-			<view class="" style="display: flex; flex-direction: row; margin-left: 32rpx; margin-top: 56rpx;">
-				<view class="" style="width: 160rpx; height: 92rpx;">
-					<image style="width: 160rpx; height: 92rpx;" v-if="pageData.goods.type == 5"
-						@click="$refs.rulePop.getRule(13, '购买说明')" :src="$img1('common/gzsm.png')"></image>
-					<image style="width: 160rpx; height: 92rpx;" v-else-if="pageData.goods.type == 6"
-						@click="$refs.rulePop.getRule(18, '购买说明')" :src="$img1('common/gzsm.png')"></image>
-					<image style="width: 160rpx; height: 92rpx;" v-else @click="$refs.rulePop.getRule(7, '购买说明')"
-						:src="$img1('common/gzsm.png')"></image>
-				</view>
-				<view class="" style="width: 160rpx; height: 92rpx; margin-left: 16rpx;" @tap="tabChange(1)">
-					<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>
-				</view>
-				<view class="" style="width: 160rpx; height: 92rpx; margin-left: 16rpx;" @tap="tabChange(2)">
-					<image style="width: 160rpx; height: 92rpx;" v-if="tabCur==1" :src="$img1('common/zsjl2.png')">
-					</image>
-					<image style="width: 160rpx; height: 92rpx;" v-if="tabCur==2" :src="$img1('common/zsjl1.png')">
-					</image>
-				</view>
-				<view class="" style="width: 160rpx; height: 92rpx; margin-left: 16rpx;" @click="changeBox">
-					<image style="width: 160rpx; height: 92rpx;" :src="$img1('common/huanxiang.png')"></image>
-				</view>
-			</view>
+                <view class="num">×{{ orderData.goods.prize_num }}</view>
+              </view>
+            </view>
+          </view>
 
-			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getLog" :down="downOption"
-				:up="upOption">
-				<scroll-view class="sub-tab" scroll-x>
-					<view class="sub-tab-item" v-for="(item, i) in subTab" :key="i"
-						:class="subTabCur == i?'act':'unact'" @click="subTabChange(i)">
-						{{ item.shang_title }}
-					</view>
-				</scroll-view>
+          <!-- <view class="line"></view> -->
+        </view>
 
-				<view class="log-list">
-					<view class="log-item br20" v-for="(item, i) in logList" :key="i">
-						<view class="avatar">
-							<image :src="item.user_info.headimg" lazy-load></image>
-						</view>
+        <template v-if="pageData.goods.type != 5">
+          <view class="card-row" @click="toCoupon">
+            <view class="title">优惠券</view>
 
-						<view class="info">
-							<view class="name hang1">
-								{{ item.user_info.nickname }}
-							</view>
-							<view class="time">{{ item.addtime }}</view>
-						</view>
+            <view class="row-r">
+              {{
+                couponData && orderData.coupon_price > 0
+                  ? `-${couponData.price}`
+                  : "未选择"
+              }}
 
-						<view class="prize">
-							<view class="pic flex">
-								<image class="img100" :src="item.goodslist_imgurl" lazy-load></image>
-							</view>
-							<view class="column align-end">
-								<view :style="{background: item.shang_color}" class="prize-shang center">
-									{{item.shang_title}}
-								</view>
-								<view class="flex mt10">
-									<view class="title hang1">
-										{{ item.goodslist_title }}
-									</view>
-									<view class="num">×{{item.prize_num}}</view>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-			</mescroll-body>
-		</template>
+              <view class="icon">
+                <image :src="$img1('common/right1.png')" lazy-load></image>
+              </view>
+            </view>
+          </view>
 
-
-		<view v-if="pageData" class="ft-fixed justify-evenly">
-			<view v-if="pageData.goods.type == 3" class="lt-btn" @click="confirmSubmit([0, 1])">
-				一发入魂
-			</view>
-
-			<template v-else>
-				<view class="btn common_bg column center" v-if="getBtnXianShi(1)"
-					:style="{ backgroundImage: `url(${$img1('common/chouBtn1.png')})`}" @click="confirmSubmit([0, 1])">
-					<!-- <view>冲一发</view> -->
-				</view>
-				<view class="btn common_bg column center" v-if="getBtnXianShi(3)"
-					:style="{backgroundImage: `url(${$img1('common/chouBtn3.png')})`}" @click="confirmSubmit([0, 3])">
-					<!-- <view>冲三发</view> -->
-				</view>
-				<view class="btn common_bg column center" v-if="getBtnXianShi(5)"
-					:style="{backgroundImage: `url(${$img1('common/chouBtn5.png')})`}" @click="confirmSubmit([0, 5])">
-					<!-- <view>冲五发</view> -->
-				</view>
-				<view class="btn common_bg column center" v-if="pageData.goods.type != 5&&getBtnXianShi(0)"
-					:style="{backgroundImage: `url(${$img1('common/chouBtnAll.png')})`}"
-					@click="confirmSubmit([0, pageData.goods.goodslist_surplus_stock])">
-					<!-- <view>全收</view> -->
-				</view>
-			</template>
-		</view>
-
-		<uni-popup ref="dPop" type="center" maskBackgroundColor="rgba(0,0,0,0.9)">
-			<view v-if="previewData" class="d-pop">
-				<view class="pic center relative">
-					<image :src="previewData.imgurl" lazy-load></image>
-					<view class="justify-center" v-if="previewData.shang_info.title">{{previewData.shang_info.title}}
-					</view>
-				</view>
-
-				<view class="title">
-					<text class="hang1">
-						{{ previewData.title }}
-					</text>
-				</view>
-
-				<view class="d-list">
-					<view class="d-item">
-						{{ previewData.shang_info.title }} {{ previewData.pro }}
-					</view>
-
-					<view class="d-item">产品类型:{{ optData.type_text }}</view>
-				</view>
-
-				<view class="close icon" @click="close('dPop')">
-					<image :src="$img('/static/img/close.png')" lazy-load></image>
-				</view>
-			</view>
-		</uni-popup>
-
-		<uni-popup ref="buyPop" type="bottom">
-			<view v-if="orderData" class="buy-pop relative">
-				<view class="buy-pop-hd">
-					<view class="" style="width: 60rpx;"></view>
-					<text class="" style="font-size: 28rpx;">确认订单</text>
-					<view class="close icon" @click="close('buyPop')">
-						<image :src="$img('/static/img/close2.png')" style="width: 24rpx; height: 24rpx;" lazy-load>
-						</image>
-					</view>
-				</view>
-
-				<view class="buy-card">
-					<view class="buy-info">
-						<view class="pic flex">
-							<image class="img100" :src="orderData.goods.imgurl_detail"></image>
-						</view>
-
-						<view class="info-r">
-							<view class="title hang1">
-								{{ orderData.goods.title }}
-							</view>
-
-							<view class="type">类型:明信片</view>
-
-							<template v-if="
-									  orderData.goods.is_shou_zhe == 1 &&
-									  orderData.goods.shou_zhe_price * 1 > 0
-									">
-								<view class="price-num">
-									<view class="price">
-										<template v-if="pageData.goods.type != 5">¥</template>
-										<text>{{ orderData.goods.shou_zhe_price }}</text>
-										<template v-if="pageData.goods.type == 5">积分</template>
-										(首抽5折)
-									</view>
-
-									<view class="num">×{{ 1 }}</view>
-								</view>
-
-								<view v-if="orderData.goods.prize_num > 1" class="price-num">
-									<view class="price">
-										<template v-if="pageData.goods.type != 5">¥</template>
-										<text>{{ orderData.goods.price }}</text>
-										<template v-if="pageData.goods.type == 5">积分</template>
-									</view>
-
-									<view class="num">
-										×{{ orderData.goods.prize_num * 1 - 1 }}
-									</view>
-								</view>
-							</template>
-
-							<view v-else class="price-num">
-								<view class="price">
-									<template v-if="pageData.goods.type != 5">¥</template>
-									<text>{{ orderData.goods.price }}</text>
-									<template v-if="pageData.goods.type == 5">积分</template>
-								</view>
-
-								<view class="num">×{{ orderData.goods.prize_num }}</view>
-							</view>
-						</view>
-					</view>
-
-					<!-- <view class="line"></view> -->
-
-
-				</view>
-
-				<template v-if="pageData.goods.type != 5">
-					<view class="card-row" @click="toCoupon">
-						<view class="title">优惠券</view>
-
-						<view class="row-r">
-							{{
-							  couponData && orderData.coupon_price > 0
-								? `-${couponData.price}`
-								: '未选择'
-							}}
-
-							<view class="icon">
-								<image :src="$img1('common/right1.png')" lazy-load></image>
-							</view>
-						</view>
-					</view>
-
-					<!-- <view class="card-row" @click="$c.to({ url: '/pages/user/vip' })">
+          <!-- <view class="card-row" @click="$c.to({ url: '/pages/user/vip' })">
 						<view class="title">
 							{{
 							  orderData.zhe
@@ -359,1624 +313,1462 @@
 							</view>
 						</view>
 					</view> -->
-				</template>
+        </template>
 
-				<!-- <view v-if="!(pageData.goods.type == 6 && !getBtnXianShi(0))" class="pay-title ziti">请选择抵扣方式</view> -->
+        <!-- <view v-if="!(pageData.goods.type == 6 && !getBtnXianShi(0))" class="pay-title ziti">请选择抵扣方式</view> -->
 
-				<view v-if="pageData.goods.type == 5" class="pay-type">
-					<!-- <view class="icon">
+        <view v-if="pageData.goods.type == 5" class="pay-type">
+          <!-- <view class="icon">
 						<image :src="$img('/static/img/pay_type3.png')" lazy-load></image>
 					</view> -->
-					<view class="title">
-						使用积分抵扣
-						{{ orderData.use_score }} (剩余:{{ orderData.score }})
-					</view>
+          <view class="title">
+            使用积分抵扣
+            {{ orderData.use_score }} (剩余:{{ orderData.score }})
+          </view>
 
-					<view class="icon">
-						<image v-if="true" :src="$img1('common/check_act.png')" lazy-load></image>
+          <view class="icon">
+            <image
+              v-if="true"
+              :src="$img1('common/check_act.png')"
+              lazy-load
+            ></image>
 
-						<image v-else :src="$img1('common/check.png')" lazy-load></image>
-					</view>
-				</view>
-				<view v-if="pageData.goods.type == 6 && !getBtnXianShi(0)">
+            <image v-else :src="$img1('common/check.png')" lazy-load></image>
+          </view>
+        </view>
+        <view v-if="pageData.goods.type == 6 && !getBtnXianShi(0)"> </view>
 
-				</view>
-
-				<template v-else>
-					<view class="pay-type" @click="changePay('useIntegral')">
-						<!-- <view class="icon">
+        <template v-else>
+          <view class="pay-type" @click="changePay('useIntegral')">
+            <!-- <view class="icon">
 							<image :src="$img('/static/img/pay_type1.png')" lazy-load></image>
 						</view> -->
 
-						<view class="title">
-							使用吧唧币抵扣¥ {{ orderData.use_integral_money }} (剩余:{{ orderData.integral }}个)
-						</view>
+            <view class="title">
+              使用吧唧币抵扣¥ {{ orderData.use_integral_money }} (剩余:{{
+                orderData.integral
+              }}个)
+            </view>
 
-						<view class="icon">
-							<image v-if="useIntegral" :src="$img1('common/check_act.png')" lazy-load></image>
+            <view class="icon">
+              <image
+                v-if="useIntegral"
+                :src="$img1('common/check_act.png')"
+                lazy-load
+              ></image>
 
-							<image v-else :src="$img1('common/check.png')" lazy-load></image>
-						</view>
-					</view>
+              <image v-else :src="$img1('common/check.png')" lazy-load></image>
+            </view>
+          </view>
 
-					<view class="pay-type" @click="changePay('useMoney')">
-						<!-- <view class="icon">
+          <view class="pay-type" @click="changePay('useMoney')">
+            <!-- <view class="icon">
 							<image :src="$img('/static/img/pay_type2.png')" lazy-load></image>
 						</view> -->
 
-						<view class="title">
-							使用星钻抵扣¥
-							{{ orderData.use_money }} (剩余:{{ orderData.money }})
-						</view>
+            <view class="title">
+              使用星钻抵扣¥
+              {{ orderData.use_money }} (剩余:{{ orderData.money }})
+            </view>
 
-						<view class="icon">
-							<image v-if="useMoney" :src="$img1('common/check_act.png')" lazy-load></image>
+            <view class="icon">
+              <image
+                v-if="useMoney"
+                :src="$img1('common/check_act.png')"
+                lazy-load
+              ></image>
 
-							<image v-else :src="$img1('common/check.png')" lazy-load></image>
-						</view>
-					</view>
-				</template>
-				<view class="rule">
-					<scroll-view class="rule-inner" scroll-y>
-						<view v-html="sendRuleData"></view>
-					</scroll-view>
-				</view>
-				<view class="agree" @click="isAgree = !isAgree">
-					<view class="icon">
-						<image v-if="isAgree" :src="$img1('common/check_act.png')" lazy-load></image>
+              <image v-else :src="$img1('common/check.png')" lazy-load></image>
+            </view>
+          </view>
+        </template>
+        <view class="rule">
+          <scroll-view class="rule-inner" scroll-y>
+            <div v-html="sendRuleData"></div>
+          </scroll-view>
+        </view>
+        <view class="agree" @click="isAgree = !isAgree">
+          <view class="icon">
+            <image
+              v-if="isAgree"
+              :src="$img1('common/check_act.png')"
+              lazy-load
+            ></image>
 
-						<image v-else :src="$img1('common/check.png')" lazy-load></image>
-					</view>
+            <image v-else :src="$img1('common/check.png')" lazy-load></image>
+          </view>
 
-					我已满18岁,阅读并同意
+          我已满18岁,阅读并同意
 
-					<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
-						《用户协议》
-					</text>
+          <text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
+            《用户协议》
+          </text>
 
-					<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
-						《隐私政策》
-					</text>
-				</view>
+          <text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
+            《隐私政策》
+          </text>
+        </view>
 
-				<view class="pay-btn" @click="$c.noDouble1(confirmSubmit, [1, buyNum], choujiangloading)">
-					<text>确认支付</text>
-					<text>{{
-						pageData.goods.type == 5
-						  ? ` ${orderData.use_score}积分`
-						  : ` ¥${orderData.price}`
-					  }}</text>
-				</view>
-			</view>
-		</uni-popup>
+        <view
+          class="pay-btn"
+          @click="$c.noDouble1(confirmSubmit, [1, buyNum], choujiangloading)"
+        >
+          <text>确认支付</text>
+          <text>{{
+            pageData.goods.type == 5
+              ? ` ${orderData.use_score}积分`
+              : ` ¥${orderData.price}`
+          }}</text>
+        </view>
+      </view>
+    </uni-popup>
 
-		<buy-notice ref="buyNotice"
-			@confirm="$c.noDouble(confirmSubmit, [1, buyNum, true],choujiangloading)"></buy-notice>
+    <buy-notice
+      ref="buyNotice"
+      @confirm="$c.noDouble(confirmSubmit, [1, buyNum, true], choujiangloading)"
+    ></buy-notice>
 
-		<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
-			<view v-if="prizeData" class="res-pop common_bg column center">
-				<view class="res-pop-hd"></view>
-				<scroll-view class="res-pop-bd" scroll-y>
-					<view class="res-list">
-						<view class="res-item" v-for="(item, i) in prizeData.data" :key="i">
-							<view class="pic center">
-								<image :src="item.goodslist_imgurl" lazy-load></image>
-								<view class="type-tag center">{{ item.shang_title }}</view>
-								<view class="num center">{{ item.prize_num }}</view>
-							</view>
-							<view class="title hang1 flex center">
-								<text> {{ item.goodslist_title }}</text>
-
-							</view>
-							<!-- <view class="exchange">
+    <uni-popup
+      ref="resPop"
+      type="center"
+      mask-background-color="rgba(0,0,0,0.8)"
+    >
+      <view v-if="prizeData" class="res-pop common_bg column center">
+        <view class="res-pop-hd"></view>
+        <scroll-view class="res-pop-bd" scroll-y>
+          <view class="res-list">
+            <view class="res-item" v-for="(item, i) in prizeData.data" :key="i">
+              <view class="pic center">
+                <image :src="item.goodslist_imgurl" lazy-load></image>
+                <view class="type-tag center">{{ item.shang_title }}</view>
+                <view class="num center">{{ item.prize_num }}</view>
+              </view>
+              <view class="title hang1 flex center">
+                <text> {{ item.goodslist_title }}</text>
+              </view>
+              <!-- <view class="exchange">
 								{{
 								  item.goodslist_money * 1 > 0
 									? `可兑换:${item.goodslist_money}`
 									: `不可兑换`
 								}}
 							</view> -->
-						</view>
-					</view>
-				</scroll-view>
+            </view>
+          </view>
+        </scroll-view>
 
-				<view class="res-pop-ft mt20">
-					<view class="ft-btn common_bg justify-center center" :style="{
-					  backgroundImage: `url(${$img1('common/quhegui.png')})`
-					}" @click="toBag">
-						<text>去发货</text>
-					</view>
+        <view class="res-pop-ft mt20">
+          <view
+            class="ft-btn common_bg justify-center center"
+            :style="{
+              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="close('resPop')">
-						<text>继续抽</text>
-					</view>
-				</view>
-			</view>
-		</uni-popup>
+          <view
+            class="ft-btn common_bg justify-center center"
+            :style="{
+              backgroundImage: `url(${$img1('common/jixuchou.png')})`,
+            }"
+            @click="close('resPop')"
+          >
+            <text>继续抽</text>
+          </view>
+        </view>
+      </view>
+    </uni-popup>
 
-		<view v-if="aniShow" class="ani-pop">
-			<image :src="aniSrc" lazy-load></image>
-		</view>
-		<rule-pop ref="rulePop"></rule-pop>
-		<coupon-pop ref="couponPop"></coupon-pop>
-	</view>
+    <view v-if="aniShow" class="ani-pop">
+      <image :src="aniSrc" lazy-load></image>
+    </view>
+    <rule-pop ref="rulePop"></rule-pop>
+    <coupon-pop ref="couponPop"></coupon-pop>
+    <!-- 添加直接引用的预览组件 -->
+    <detail-preview-popup ref="localPreviewPopup"></detail-preview-popup>
+    <!-- 全局预览组件已在App.vue中全局添加 -->
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				optData: '',
-				boxNum: '',
-				buyNum: 0,
-				useMoney: true,
-				useIntegral: true,
-				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
-				downOption: {
-					auto: false
-				},
-				// 上拉加载的配置(可选, 绝大部分情况无需配置)
-				upOption: {
-					auto: true,
-					page: {
-						size: 15 // 每页数据的数量,默认10
-					}
-				},
-				tabList: {
-					1: {
-						title: '商品预览'
-					},
-					2: {
-						title: '中赏记录'
-					}
-				},
-				tabCur: 1,
-				subTab: [],
-				subTabCur: 0,
-				payType: {
-					1: {
-						title: '吧唧币',
-						icon: '/static/img/pay_type1.png'
-					},
-					2: {
-						title: '星钻',
-						icon: '/static/img/pay_type2.png'
-					}
-				},
-				payTypeCur: 1,
-				isAgree: true,
-				pageData: '',
-				couponData: '',
-				orderData: '',
-				prizeData: '',
-				secTimer: null,
-				secNum: 0,
-				aniSrc: '',
-				aniShow: false,
+export default {
+  data() {
+    return {
+      optData: "",
+      boxNum: "",
+      buyNum: 0,
+      useMoney: true,
+      useIntegral: true,
+      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
+      downOption: {
+        auto: false,
+      },
+      // 上拉加载的配置(可选, 绝大部分情况无需配置)
+      upOption: {
+        auto: true,
+        page: {
+          size: 15, // 每页数据的数量,默认10
+        },
+      },
+      tabList: {
+        1: {
+          title: "商品预览",
+        },
+        2: {
+          title: "中赏记录",
+        },
+      },
+      tabCur: 1,
+      subTab: [],
+      subTabCur: 0,
+      payType: {
+        1: {
+          title: "吧唧币",
+          icon: "/static/img/pay_type1.png",
+        },
+        2: {
+          title: "星钻",
+          icon: "/static/img/pay_type2.png",
+        },
+      },
+      payTypeCur: 1,
+      isAgree: true,
+      pageData: "",
+      couponData: "",
+      orderData: "",
+      prizeData: "",
+      secTimer: null,
+      secNum: 0,
+      aniSrc: "",
+      aniShow: false,
 
-				logList: [],
-				sendRuleData: '',
-				previewData: '',
-				choujiangloading: false
-			}
-		},
-		computed: {
+      logList: [],
+      sendRuleData: "",
+      choujiangloading: false,
+    };
+  },
+  computed: {},
+  onShareAppMessage() {
+    if (this.$refs["couponPop"] != null) {
+      var co = this.$refs["couponPop"].getfengxiaodata();
+      if (co != null) {
+        console.log(co);
+        return co;
+      }
+    }
+    return {
+      title:
+        this.$config.getAppSetting("app_name") +
+        `${this.pageData.goods.title}系列 第${this.pageData.goods.num}套`,
+      imageUrl: this.pageData.goods.imgurl_detail,
+      path:
+        "/pages/shouye/detail" +
+        this.$c.qs({
+          goods_id: this.pageData.goods.id,
+          goods_num: this.pageData.goods.num,
+          pid: uni.getStorageSync("userinfo").ID,
+        }),
+    };
+  },
 
-		},
-		onShareAppMessage() {
-			if (this.$refs["couponPop"] != null) {
-				var co = this.$refs["couponPop"].getfengxiaodata();
-				if (co != null) {
-					console.log(co);
-					return co;
-				}
-			}
-			return {
-				title: this.$config.getAppSetting("app_name")+`${this.pageData.goods.title}系列 第${this.pageData.goods.num}套`,
-				imageUrl: this.pageData.goods.imgurl_detail,
-				path: '/pages/shouye/detail' +
-					this.$c.qs({
-						goods_id: this.pageData.goods.id,
-						goods_num: this.pageData.goods.num,
-						pid: uni.getStorageSync('userinfo').ID
-					})
-			}
-		},
+  onLoad(options) {
+    console.log(options);
+    this.optData = options;
 
-		onLoad(options) {
-			console.log(options);
-			this.optData = options
+    this.tabChange(this.tabCur);
 
-			this.tabChange(this.tabCur)
+    uni.$on("chooseCoupon", (data) => {
+      // console.log('data', data)
 
-			uni.$on('chooseCoupon', data => {
-				// console.log('data', data)
+      this.couponData = data;
+      this.confirmSubmit([0, this.buyNum]);
+    });
 
-				this.couponData = data
-				this.confirmSubmit([0, this.buyNum])
-			})
+    // uni.getImageInfo({
+    //   src: this.$img('/static/img/animation.png'),
+    //   success: ({ path }) => {
+    //     this.aniSrc = path
+    //   }
+    // })
 
-			// uni.getImageInfo({
-			//   src: this.$img('/static/img/animation.png'),
-			//   success: ({ path }) => {
-			//     this.aniSrc = path
-			//   }
-			// })
+    this.$c.getRule(10).then((res) => {
+      if (res.status == 1) {
+        this.sendRuleData = res.data;
+      }
+    });
+  },
 
-			this.$c.getRule(10).then(res => {
-				if (res.status == 1) {
-					this.sendRuleData = res.data
-				}
-			})
-		},
+  onReady() {
+    // this.open('dPop')
+    // this.open('buyPop')
+    // this.open('buyNotice')
+    // this.open('resPop')
+  },
 
-		onReady() {
-			// this.open('dPop')
-			// this.open('buyPop')
-			// this.open('buyNotice')
-			// this.open('resPop')
-		},
+  onUnload() {
+    uni.$off("chooseCoupon");
+  },
 
-		onUnload() {
-			uni.$off('chooseCoupon')
-		},
+  methods: {
+    previewDetail(item) {
+      console.log(item);
+      // 使用新的setPreviewData方法而不是直接修改props
+      if (this.$refs.localPreviewPopup) {
+        this.$refs.localPreviewPopup.setPreviewData({
+          title: item.title,
+          imgUrl: item.imgurl,
+          tipTitle: item.shang_info ? item.shang_info.title : '',
+          productType: this.optData.type_text,
+          probability: item.pro
+        });
+      }
+    },
 
-		methods: {
-			previewDetail(item) {
-				console.log(item)
-				this.previewData = item
+    resetSec() {
+      clearInterval(this.secTimer);
+      this.secTimer = null;
+      this.secNum = 0;
+    },
 
-				this.open('dPop')
-			},
+    runSec(time) {
+      const nowTime = Math.floor(Date.now() / 1000);
 
-			resetSec() {
-				clearInterval(this.secTimer)
-				this.secTimer = null
-				this.secNum = 0
-			},
+      if (time < nowTime) {
+        this.resetSec();
+        return;
+      }
 
-			runSec(time) {
-				const nowTime = Math.floor(Date.now() / 1000)
+      this.secTimer && clearInterval(this.secTimer);
 
-				if (time < nowTime) {
-					this.resetSec()
-					return
-				}
+      this.secNum = time - nowTime;
+      this.secTimer = setInterval(() => {
+        if (this.secNum <= 0) {
+          this.resetSec();
 
-				this.secTimer && clearInterval(this.secTimer)
+          uni.showLoading({
+            title: "加载中",
+            mask: true,
+          });
+          setTimeout(() => {
+            // uni.hideLoading()
+            this.doRefresh();
+          }, 1000);
+          return;
+        }
 
-				this.secNum = time - nowTime
-				this.secTimer = setInterval(() => {
-					if (this.secNum <= 0) {
-						this.resetSec()
+        this.secNum -= 1;
+      }, 1000);
+    },
 
-						uni.showLoading({
-							title: '加载中',
-							mask: true
-						})
-						setTimeout(() => {
-							// uni.hideLoading()
-							this.doRefresh()
-						}, 1000)
-						return
-					}
+    toCoupon() {
+      this.$c.to({
+        url: "/pages/user/coupon",
+        query: {
+          type: 2,
+          total_price: this.orderData.order_total,
+        },
+      });
+    },
 
-					this.secNum -= 1
-				}, 1000)
-			},
+    getPrize(order_num) {
+      if (!order_num) {
+        return;
+      }
 
-			toCoupon() {
-				this.$c.to({
-					url: '/pages/user/coupon',
-					query: {
-						type: 2,
-						total_price: this.orderData.order_total
-					}
-				})
-			},
+      setTimeout(() => {
+        this.req({
+          url: "prizeorderlog",
+          data: {
+            order_num,
+          },
+          success: (res) => {
+            if (res.status == 1) {
+              this.prizeData = res.data;
 
-			getPrize(order_num) {
-				if (!order_num) {
-					return
-				}
+              if (res.data.data.length <= 0) {
+                this.getPrize(order_num);
+                return;
+              }
 
-				setTimeout(() => {
-					this.req({
-						url: 'prizeorderlog',
-						data: {
-							order_num
-						},
-						success: res => {
-							if (res.status == 1) {
-								this.prizeData = res.data
+              // this.aniShow = true
+              // setTimeout(() => {
+              //   this.aniShow = false
+              this.bgmCtx.openBgm.stop();
+              this.bgmCtx.openBgm.play();
+              this.open("resPop");
+              // }, 1300)
+            }
+          },
+        });
+      }, 500);
+    },
 
-								if (res.data.data.length <= 0) {
-									this.getPrize(order_num)
-									return
-								}
+    changePay(e) {
+      this[e] = !this[e];
 
-								// this.aniShow = true
-								// setTimeout(() => {
-								//   this.aniShow = false
-								this.bgmCtx.openBgm.stop()
-								this.bgmCtx.openBgm.play()
-								this.open('resPop')
-								// }, 1300)
-							}
-						}
-					})
-				}, 500)
-			},
+      this.confirmSubmit([0, this.buyNum]);
+    },
 
-			changePay(e) {
-				this[e] = !this[e]
+    confirmSubmit([type, num, fromNotice = false]) {
+      let url = "ordermoney";
 
-				this.confirmSubmit([0, this.buyNum])
-			},
+      if (type == 1) {
+        url = "orderbuy";
 
-			confirmSubmit([type, num, fromNotice = false]) {
-				let url = 'ordermoney'
+        if (!uni.getStorageSync("_agree_buy_notice") && !fromNotice) {
+          this.$refs.buyNotice.getRule(6);
+          return;
+        }
+      }
+      if (!this.getBtnXianShi(0)) {
+        this.useMoney = false;
+        this.useIntegral = false;
+      }
+      this.buyNum = num;
 
-				if (type == 1) {
-					url = 'orderbuy'
+      let data = {
+        goods_id: this.pageData.goods.id,
+        prize_num: this.buyNum,
+        goods_num: this.pageData.goods.num,
+        use_money_is: this.useMoney ? 1 : 2,
+        use_integral_is: this.useIntegral ? 1 : 2,
+        coupon_id: (this.couponData && this.couponData.id) || "",
+        // ad_id: uni.getStorageSync('_ad_id')
+      };
 
-					if (!uni.getStorageSync('_agree_buy_notice') && !fromNotice) {
-						this.$refs.buyNotice.getRule(6)
-						return
-					}
-				}
-				if (!this.getBtnXianShi(0)) {
-					this.useMoney = false;
-					this.useIntegral = false;
-				}
-				this.buyNum = num
+      if (this.pageData.goods.type == 5) {
+        data.coupon_id = "";
+      }
 
-				let data = {
-					goods_id: this.pageData.goods.id,
-					prize_num: this.buyNum,
-					goods_num: this.pageData.goods.num,
-					use_money_is: this.useMoney ? 1 : 2,
-					use_integral_is: this.useIntegral ? 1 : 2,
-					coupon_id: (this.couponData && this.couponData.id) || ''
-					// ad_id: uni.getStorageSync('_ad_id')
-				}
+      this.req({
+        url,
+        data,
+        success: async (res) => {
+          if (res.status == 1) {
+            if (type == 0) {
+              if (res.data.coupon_id) {
+                this.couponData = {
+                  id: res.data.coupon_id,
+                  price: res.data.coupon_price,
+                };
+              }
 
-				if (this.pageData.goods.type == 5) {
-					data.coupon_id = ''
-				}
+              this.orderData = res.data;
 
-				this.req({
-					url,
-					data,
-					success: async res => {
-						if (res.status == 1) {
-							if (type == 0) {
-								if (res.data.coupon_id) {
-									this.couponData = {
-										id: res.data.coupon_id,
-										price: res.data.coupon_price
-									}
-								}
+              this.open("buyPop");
+            }
 
-								this.orderData = res.data
+            if (type == 1) {
+              this.close("buyPop");
 
-								this.open('buyPop')
-							}
+              if (res.data.status == 1) {
+                const status = await this.$c.wxMpPay({
+                  data: res.data.res,
+                });
 
-							if (type == 1) {
-								this.close('buyPop')
+                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");
+      }
+    },
 
-								if (res.data.status == 1) {
+    onCollectionChanged() {
+      this.doRefresh();
+    },
 
-									const status = await this.$c.wxMpPay({
-										data: res.data.res
-									})
+    handleRuleClick(ruleId, title) {
+      this.$refs.rulePop.getRule(ruleId, title);
+    },
 
-									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')
-				}
-			},
+    toBag() {
+      this.close("resPop");
 
-			onCollectionChanged() {
-				this.doRefresh()
-			},
+      this.$c.to({
+        type: 3,
+        url: "/pages/sangdai/sangdai",
+      });
+    },
 
-			toBag() {
-				this.close('resPop')
+    changeBox() {
+      this.$c.to({
+        url: "/pages/shouye/huanxiang",
+        query: {
+          id: this.pageData.goods.id,
+          type_text: this.optData.type_text,
+        },
+      });
+    },
 
-				this.$c.to({
-					type: 3,
-					url: '/pages/sangdai/sangdai'
-				})
-			},
+    doRefresh() {
+      this.getData();
 
-			changeBox() {
-				this.$c.to({
-					url: '/pages/shouye/huanxiang',
-					query: {
-						id: this.pageData.goods.id,
-						type_text: this.optData.type_text
-					}
-				})
-			},
+      if (this.tabCur == 2) {
+        this.tabChange(this.tabCur);
+      }
+    },
 
-			doRefresh() {
-				this.getData()
+    subTabChange(i) {
+      this.subTabCur = i;
+      this.logList = [];
 
-				if (this.tabCur == 2) {
-					this.tabChange(this.tabCur)
-				}
-			},
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.mescroll.resetUpScroll();
+          this.mescroll.scrollTo(0, 0);
+        }, 100);
+      });
+    },
 
-			subTabChange(i) {
-				this.subTabCur = i
-				this.logList = []
+    tabChange(i) {
+      this.tabCur = i;
 
-				this.$nextTick(() => {
-					setTimeout(() => {
-						this.mescroll.resetUpScroll()
-						this.mescroll.scrollTo(0, 0)
-					}, 100)
-				})
-			},
+      switch (Number(i)) {
+        case 1:
+          this.getData();
+          break;
+        case 2:
+          this.subTabChange(this.subTabCur);
+          break;
+      }
+    },
 
-			tabChange(i) {
-				this.tabCur = i
+    next() {
+      if (this.optData.goods_num >= this.pageData.goods.stock) {
+        this.optData.goods_num = this.pageData.goods.stock;
 
-				switch (Number(i)) {
-					case 1:
-						this.getData()
-						break
-					case 2:
-						this.subTabChange(this.subTabCur)
-						break
-				}
-			},
+        this.$c.toast({
+          title: "已经是最后一箱了",
+        });
+        return;
+      }
 
-			next() {
-				if (this.optData.goods_num >= this.pageData.goods.stock) {
-					this.optData.goods_num = this.pageData.goods.stock
+      this.optData.goods_num += 1;
+      this.getData();
+    },
 
-					this.$c.toast({
-						title: '已经是最后一箱了'
-					})
-					return
-				}
+    prev() {
+      if (this.optData.goods_num <= 1) {
+        this.optData.goods_num = 1;
 
-				this.optData.goods_num += 1
-				this.getData()
-			},
+        this.$c.toast({
+          title: "已经是第一箱了",
+        });
+        return;
+      }
 
-			prev() {
-				if (this.optData.goods_num <= 1) {
-					this.optData.goods_num = 1
+      this.optData.goods_num -= 1;
+      this.getData();
+    },
 
-					this.$c.toast({
-						title: '已经是第一箱了'
-					})
-					return
-				}
+    getLog({ num, size }) {
+      if (num > 1) return this.mescroll.endByPage(this.logList.length, 1);
+      this.req({
+        url: "shang_log",
+        data: {
+          page: num,
+          goods_id: this.optData.goods_id,
+          goods_num: this.optData.goods_num,
+          shang_id:
+            this.subTab.length > 0 ? this.subTab[this.subTabCur].shang_id : "",
+        },
+        Loading: true,
+        success: (res) => {
+          if (res.status == 1) {
+            this.subTab = res.data.category;
 
-				this.optData.goods_num -= 1
-				this.getData()
-			},
+            if (num == 1) {
+              this.logList = [];
+            }
 
-			getLog({
-				num,
-				size
-			}) {
-				if (num > 1) return this.mescroll.endByPage(this.logList.length, 1)
-				this.req({
-					url: 'shang_log',
-					data: {
-						page: num,
-						goods_id: this.optData.goods_id,
-						goods_num: this.optData.goods_num,
-						shang_id: this.subTab.length > 0 ? this.subTab[this.subTabCur].shang_id : ''
-					},
-					Loading: true,
-					success: res => {
-						if (res.status == 1) {
-							this.subTab = res.data.category
+            this.logList = this.logList.concat(res.data.data);
+            this.mescroll.endByPage(res.data.data.length, res.data.last_page);
+          }
+        },
+      });
+    },
 
-							if (num == 1) {
-								this.logList = []
-							}
+    getData() {
+      this.req({
+        url: "goodsdetail",
+        data: {
+          goods_id: this.optData.goods_id,
+          goods_num: this.optData.goods_num,
+        },
+        success: (res) => {
+          if (res.status == 1) {
+            this.optData.goods_num = Number(res.data.goods.num);
 
-							this.logList = this.logList.concat(res.data.data)
-							this.mescroll.endByPage(res.data.data.length, res.data.last_page)
-						}
-					}
-				})
-			},
+            if (
+              res.data.goods.lock_is == 1 &&
+              res.data.lock_info.goods_lock_surplus_time > 0
+            ) {
+              this.runSec(res.data.lock_info.goods_lock_surplus_time);
+            }
 
-			getData() {
-				this.req({
-					url: 'goodsdetail',
-					data: {
-						goods_id: this.optData.goods_id,
-						goods_num: this.optData.goods_num
-					},
-					success: res => {
-						if (res.status == 1) {
-							this.optData.goods_num = Number(res.data.goods.num)
+            this.pageData = res.data;
+            console.log(this.pageData);
+          }
+        },
+      });
+    },
+    getBtnXianShi(type) {
+      if (this.pageData == null || this.pageData["xuangou"] == null) {
+        // this.pageData
+        return true;
+      }
+      let xuangou = this.pageData["xuangou"];
+      if (xuangou.quanju_xiangou == 0) {
+        return true;
+      }
+      if (type == 0) {
+        return false;
+      }
+      if (type == 1) {
+        return true;
+      }
 
-							if (
-								res.data.goods.lock_is == 1 &&
-								res.data.lock_info.goods_lock_surplus_time > 0
-							) {
-								this.runSec(res.data.lock_info.goods_lock_surplus_time)
-							}
+      let yuxia = xuangou.quanju_xiangou - xuangou.user_xiangou_count;
+      console.log(yuxia);
+      if (yuxia >= type) {
+        return true;
+      }
+      return false;
+    },
+    close(e) {
+      this.$refs[e].close();
 
-							this.pageData = res.data
-							console.log(this.pageData);
-						}
-					}
-				})
-			},
-			getBtnXianShi(type) {
-				if (this.pageData == null || this.pageData['xuangou'] == null) {
-					// this.pageData
-					return true;
-				}
-				let xuangou = this.pageData['xuangou'];
-				if (xuangou.quanju_xiangou == 0) {
-					return true;
-				}
-				if (type == 0) {
-					return false;
-				}
-				if (type == 1) {
-					return true;
-				}
+      if (e == "resPop") {
+        if (this.prizeData["user_coupon"] != null) {
+          this.$refs["couponPop"].open(this.prizeData["user_coupon"]);
+        }
+      }
+    },
 
-				let yuxia = xuangou.quanju_xiangou - xuangou.user_xiangou_count;
-				console.log(yuxia);
-				if (yuxia >= type) {
-					return true;
-				}
-				return false;
-			},
-			close(e) {
-				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()
-			}
-		}
-	}
+    open(e) {
+      this.$refs[e].open();
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-	.navLeft {
-		width: 100%;
-		position: fixed;
-		left: 30rpx;
-		z-index: 100;
-		height: 44px;
-
-		>view {
-			// font-family: YouSheBiaoTiHei;
-			font-weight: 400;
-			font-size: 50rpx;
-			color: #FFFFFF;
-		}
-	}
-
-	.content {
-		padding: 0 0 300rpx;
-		background-color: #FFFFFF;
-
-		.sub-tab {
-			white-space: nowrap;
-			padding: 30rpx 0 10rpx;
-
-			.sub-tab-item {
-				display: inline-flex;
-				align-items: center;
-				padding: 0 20rpx;
-				height: 50rpx;
-				margin-left: 30rpx;
-				font-size: 24rpx;
-				font-family: Source Han Sans CN;
-				font-weight: 400;
-				color: #333333;
-				// font-family: YouSheBiaoTiHei;
-				font-weight: 400;
-				font-size: 20rpx;
-				border-radius: 6rpx;
-
-				&.act {
-					color: #333333;
-					background: #E6F791;
-					border-radius: 8rpx 8rpx 8rpx 8rpx;
-					// border: 2rpx solid #FFFFFF;
-				}
-
-				&.unact {
-					color: #333333;
-					background: #F5F5F5;
-					border-radius: 8rpx 8rpx 8rpx 8rpx;
-					// border: 2rpx solid rgba(255, 255, 255, 0.27);
-				}
-
-				&:last-child {
-					margin-right: 30rpx;
-				}
-			}
-
-			.common_bg {}
-		}
-
-		.log-list {
-			padding: 1rpx 30rpx 30rpx;
-
-			.log-item {
-				height: 144rpx;
-				padding: 0 20rpx;
-				display: flex;
-				align-items: center;
-				margin-top: 20rpx;
-				background: #F8F8F8;
-
-				.avatar {
-					width: 76rpx;
-					height: 76rpx;
-					background: #9d9d9d;
-					border: 1px solid #cccccc;
-					border-radius: 50%;
-					overflow: hidden;
-				}
-
-				.info {
-					width: 230rpx;
-					margin-left: 20rpx;
-
-					.name {
-						font-size: 20rpx;
-						font-weight: 400;
-						color: #333333;
-					}
-
-					.time {
-						margin-top: 10rpx;
-						white-space: nowrap;
-
-						font-size: 16rpx;
-						font-family: Source Han Sans CN;
-						font-weight: 400;
-						color: #999999;
-					}
-				}
-
-				.prize {
-					flex: 1;
-					padding-left: 60rpx;
-					display: flex;
-					align-items: center;
-
-					.prize-shang {
-						height: 40rpx;
-						padding: 0 20rpx;
-						// background: #B07AF3;
-						border-radius: 8rpx 8rpx 8rpx 8rpx;
-						border: 2rpx solid #FFFFFF;
-						font-weight: 400;
-						font-size: 24rpx;
-						color: #FFFFFF;
-					}
-
-					.pic {
-						width: 76rpx;
-						height: 76rpx;
-					}
-
-					.title {
-						width: 100rpx;
-						margin-left: 20rpx;
-						font-size: 16rpx;
-						font-family: Source Han Sans CN;
-						font-weight: 400;
-						color: #333333;
-						text-align: right;
-					}
-
-					.num {
-						font-size: 16rpx;
-						font-family: Source Han Sans CN;
-						font-weight: 400;
-						color: #333333;
-					}
-				}
-			}
-		}
-
-		.header {
-			width: 750rpx;
-			height: 722rpx;
-			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;
-				// 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;
-
-				>text:nth-child(2n+1) {
-					font-weight: 400;
-					font-size: 16rpx;
-					color: #333333;
-				}
-
-				>text:nth-child(2) {
-					font-weight: 700;
-					font-size: 24rpx;
-					color: #333333;
-				}
-			}
-
-			&-footer {
-				width: 750rpx;
-				position: absolute;
-				left: 0;
-				bottom: 0;
-
-				&-one {
-					width: 186rpx;
-					height: 106rpx;
-					display: flex;
-					position: absolute;
-					left: 0;
-					bottom: 0;
-					z-index: 1;
-
-					>image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-
-				&-two {
-					width: 224rpx;
-					height: 119rpx;
-					display: flex;
-					position: absolute;
-					left: 160rpx;
-					bottom: 0;
-					z-index: 1;
-
-					>image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-
-				&-three {
-					width: 224rpx;
-					height: 119rpx;
-					display: flex;
-					position: absolute;
-					right: 160rpx;
-					bottom: 0;
-
-					>image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-
-				&-four {
-					width: 186rpx;
-					height: 106rpx;
-					display: flex;
-					position: absolute;
-					right: 0;
-					bottom: 0;
-
-					>image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-			}
-		}
-
-		.spylView {
-			background: #FFFFFF;
-
-			&-head {
-				box-sizing: border-box;
-				padding: 24rpx 30rpx;
-				width: 750rpx;
-
-				>view:nth-child(2n+1) {
-					>view:nth-child(1) {
-						width: 74rpx;
-						height: 56rpx;
-						background: #F5F5F5;
-						border-radius: 12rpx;
-						// border: 2rpx solid #000000;
-					}
-
-					>view:nth-child(2) {
-						margin-top: 8rpx;
-						font-weight: 400;
-						font-size: 20rpx;
-						color: #FFFFFF;
-						text-align: center;
-					}
-				}
-
-				>view:nth-child(2) {
-					width: 420rpx;
-
-					>view:nth-child(1) {
-						width: 420rpx;
-						height: 14rpx;
-						border-radius: 40rpx;
-
-						>text {
-							height: 14rpx;
-							border-radius: 40rpx;
-							background: #CDF022;
-						}
-					}
-
-					>view:nth-child(2) {
-						padding: 14rpx 30rpx 0;
-						font-weight: 400;
-						font-size: 24rpx;
-						color: #999999;
-
-						>view {
-							>text {
-								font-family: YouSheBiaoTiHei;
-								font-weight: 400;
-								font-size: 36rpx;
-								color: #333333;
-							}
-						}
-					}
-				}
-			}
-
-			.list {
-				padding: 30rpx;
-				display: grid;
-				grid-template-columns: repeat(3, 210rpx);
-				gap: 30rpx 30rpx;
-
-				.list-item {
-					width: 210rpx;
-					box-sizing: border-box;
-					background-color: #F8F8F8;
-					border-radius: 16rpx;
-
-					.pic {
-						width: 210rpx;
-						height: 210rpx;
-						box-sizing: border-box;
-						position: relative;
-						background: #3B3941;
-						border-radius: 16rpx 16rpx 0rpx 0rpx;
-
-						.pic-img {
-							width: 210rpx;
-							height: 210rpx;
-							// border-radius: 24rpx;
-						}
-
-						.type-tag {
-							position: absolute;
-							top: 12rpx;
-							left: 12rpx;
-							border-radius: 18rpx;
-							font-weight: 400;
-							font-size: 20rpx;
-							color: #FFFFFF;
-							min-width: 78rpx;
-							height: 38rpx;
-							box-sizing: border-box;
-						}
-
-						.num {
-							position: absolute;
-							left: 50%;
-							padding: 0 10rpx;
-							transform: translateX(-50%);
-							bottom: 8rpx;
-							border-radius: 18rpx;
-							min-width: 66rpx;
-							height: 38rpx;
-							font-weight: 400;
-							font-size: 20rpx;
-							background-color: rgba(255, 255, 255, 0.50);
-							color: #000000;
-						}
-
-						.yu-tag {
-							position: absolute;
-							right: 10rpx;
-							top: 10rpx;
-							z-index: 1;
-							display: flex;
-							justify-content: center;
-							align-items: center;
-							font-weight: 400;
-							font-size: 32rpx;
-							color: #ff873a;
-							text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
-						}
-
-
-
-						.shadow {
-							position: absolute;
-							z-index: 1;
-							left: 0;
-							top: 0;
-							width: 100%;
-							height: 100%;
-							background: rgba(0, 0, 0, 0.6);
-							border-radius: 24rpx;
-
-							>image {
-								width: 86rpx;
-								height: 156rpx;
-							}
-						}
-					}
-
-					.title {
-						padding: 28rpx 10rpx 0;
-						font-size: 20rpx;
-						font-weight: 400;
-						color: #333333;
-					}
-
-					.desc {
-						padding: 24rpx 10rpx 0;
-						font-size: 16rpx;
-						font-weight: 300;
-						color: #F39205;
-					}
-
-					.price {
-						padding: 24rpx 10rpx 28rpx;
-						font-weight: 400;
-						font-size: 16rpx;
-						color: #333333;
-					}
-				}
-			}
-		}
-
-
-		.fixed-btns {
-			position: fixed;
-			z-index: 10;
-			right: 20rpx;
-			bottom: 300rpx;
-
-			.btn {
-				width: 94rpx;
-				height: 110rpx;
-				margin-top: 40rpx;
-			}
-		}
-
-		.ft-fixed {
-			position: fixed;
-			z-index: 10;
-			left: 0;
-			bottom: 0;
-			width: 100%;
-			display: flex;
-			flex-flow: row wrap;
-			justify-content: center;
-			padding-bottom: 40rpx;
-			background: #FFFFFF;
-			padding-top: 20rpx;
-
-			.lt-btn {
-				width: 690rpx;
-				height: 60rpx;
-				background: linear-gradient(90deg, #2dcbff 0%, #ff873a 100%);
-				border-radius: 40rpx;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				margin-bottom: 20rpx;
-				font-size: 32rpx;
-				font-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%;
-					// }
-				}
-			}
-		}
-
-		.d-pop {
-			position: relative;
-			width: 570rpx;
-			box-sizing: border-box;
-
-			.pic {
-				width: 570rpx;
-				height: 598rpx;
-				// background: #8953DC;
-				background: #FFFFFF;
-				border-radius: 16rpx;
-
-				>image {
-					width: 548rpx;
-					height: 549rpx;
-				}
-
-				>view {
-					width: 68rpx;
-					height: 32rpx;
-					position: absolute;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					top: 12rpx;
-					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: 60rpx;
-				box-sizing: border-box;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				box-sizing: border-box;
-				padding: 20rpx;
-				border-radius: 12rpx;
-				background: #F5F5F5;
-
-				>text {
-					font-weight: 600;
-					font-size: 24rpx;
-					color: #333333;
-				}
-			}
-
-			.d-list {
-				display: flex;
-				flex-flow: row wrap;
-				justify-content: space-between;
-				padding: 20rpx 0 0;
-
-				.d-item {
-					margin-top: 14rpx;
-
-					font-size: 24rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					color: #ffffff;
-				}
-			}
-
-			.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: 20rpx 0;
-				padding-left: 10rpx;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-
-				font-size: 40rpx;
-				font-weight: 500;
-				color: #333333;
-
-
-				.close {
-					width: 60rpx;
-					height: 60rpx;
-				}
-			}
-
-			.card-row {
-				padding: 16rpx 0;
-				display: flex;
-				height: 82rpx;
-				justify-content: space-between;
-				align-items: center;
-				margin-top: 24rpx;
-				border-radius: 16rpx;
-				background-color: #fff;
-
-				.title {
-					font-size: 20rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					margin-left: 24rpx;
-					color: #333333;
-				}
-
-				.row-r {
-					display: flex;
-					align-items: center;
-
-					font-size: 24rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					color: #999999;
-
-					.icon {
-						width: 10rpx;
-						height: 17rpx;
-						color: #999999;
-						margin-left: 10rpx;
-						margin-right: 24rpx;
-					}
-				}
-			}
-
-			.buy-card {
-				border-radius: 20rpx;
-				padding: 30rpx 30rpx 10rpx;
-				background: #FFFFFF;
-
-				.buy-info {
-					display: flex;
-
-					.pic {
-						width: 190rpx;
-						height: 190rpx;
-						border-radius: 10rpx;
-					}
-
-					.info-r {
-						width: calc(100% - 190rpx);
-						box-sizing: border-box;
-						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-weight: 500;
-								font-size: 16rpx;
-								color: #333333;
-
-								text {
-									font-size: 28rpx;
-								}
-							}
-
-							.num {
-								font-size: 28rpx;
-								font-family: Source Han Sans CN;
-								font-weight: 400;
-								color: #999999;
-							}
-						}
-					}
-				}
-
-				.line {
-					height: 1px;
-					background: #222222;
-					margin: 30rpx 0 10rpx;
-				}
-
-				.card-row {
-					padding: 16rpx 0;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-
-					.title {
-						font-size: 28rpx;
-						font-family: Source Han Sans CN;
-						font-weight: 400;
-						color: #ffffff;
-					}
-
-					.row-r {
-						display: flex;
-						align-items: center;
-
-						font-size: 24rpx;
-						font-family: Source Han Sans CN;
-						font-weight: 400;
-						color: #FFFFFF;
-
-						.icon {
-							width: 32rpx;
-							height: 32rpx;
-						}
-					}
-				}
-			}
-
-			.pay-title {
-				margin-top: 30rpx;
-				font-size: 32rpx;
-				font-weight: 400;
-				color: #ffffff;
-			}
-
-			.pay-type {
-				padding: 30rpx;
-				border-radius: 20rpx;
-				margin-top: 20rpx;
-				display: flex;
-				align-items: center;
-				background: #FFFFFF;
-
-				.icon {
-					width: 32rpx;
-					height: 32rpx;
-				}
-
-				.title {
-					flex: 1;
-					padding: 0 20rpx;
-					font-size: 28rpx;
-					font-weight: 400;
-					color: #333333;
-				}
-			}
-
-			.agree {
-				display: flex;
-				margin-top: 30rpx;
-				font-size: 24rpx;
-				font-weight: 400;
-				color: #999999;
-				line-height: 32rpx;
-
-				.icon {
-					width: 32rpx;
-					height: 32rpx;
-					margin-right: 10rpx;
-				}
-			}
-
-			.rule {
-				padding: 20rpx;
-				border-radius: 20rpx;
-				box-sizing: border-box;
-				margin: 20rpx 0 0;
-				height: 160rpx;
-				background: #F9F8E1;
-				border-radius: 20rpx;
-
-				.rule-inner {
-					max-height: 120rpx;
-					font-size: 20rpx;
-					font-weight: 400;
-					color: #333333;
-				}
-			}
-
-			.pay-btn {
-				margin: 30rpx auto 0;
-				width: 686rpx;
-				height: 84rpx;
-				background: url($imgurl+'common/payBtn.png') no-repeat 0 0 / 100% 100%;
-				display: flex;
-				margin-bottom: 90rpx;
-				align-items: center;
-				justify-content: center;
-				font-weight: 500;
-				color: #CDEF27;
-
-				>text:nth-child(1) {
-					font-size: 28rpx;
-				}
-
-				>text:nth-child(2) {
-					font-size: 36rpx;
-				}
-			}
-		}
-
-		.res-pop {
-			width: 100%;
-			height: 100vh;
-			position: relative;
-			background: url($imgurl+'common/yb.png') no-repeat 0 0 / 100% 100%;
-
-			.res-pop-hd {
-				width: 400rpx;
-				height: 108rpx;
-				background: url($imgurl+'common/gxhd.png') no-repeat 0 0 / 100% 100%;
-			}
-
-			.res-pop-bd {
-				width: 636rpx;
-				height: 760rpx;
-				background-color: #FFFFFF;
-				border-radius: 16rpx;
-				margin: 36rpx auto;
-
-				.res-list {
-					padding: 20rpx 10rpx;
-					display: grid;
-					grid-template-columns: repeat(3, 210rpx);
-					gap: 24rpx 10rpx;
-
-					.res-item {
-						width: 180rpx;
-						height: 240rpx;
-						background-color: #F8F8F8;
-						border-radius: 16rpx;
-
-						.pic {
-							width: 180rpx;
-							height: 180rpx;
-							position: relative;
-							background: #D8D8D8;
-							border-radius: 16rpx 16rpx 0rpx 0rpx;
-
-							>image {
-								width: 180rpx;
-								height: 180rpx;
-								border-radius: 16rpx 16rpx 0rpx 0rpx;
-							}
-
-							.type-tag {
-								position: absolute;
-								left: 12rpx;
-								top: 12rpx;
-								z-index: 2;
-								width: 68rpx;
-								height: 32rpx;
-								background: url($imgurl+ 'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
-								font-weight: 400;
-								font-size: 14rpx;
-								color: #FFFFFF;
-							}
-
-							.num {
-								position: absolute;
-								z-index: 2;
-								left: 50%;
-								transform: translateX(-50%);
-								bottom: 10rpx;
-								min-width: 42rpx;
-								height: 28rpx;
-								font-weight: 400;
-								font-size: 14rpx;
-								color: #333333;
-								background-color: rgba(255, 255, 255, 0.50);
-								border-radius: 18rpx;
-							}
-						}
-
-						.title {
-							padding: 22rpx 10rpx 0;
-							font-weight: 400;
-							font-size: 16rpx;
-							color: #333333;
-						}
-
-						.exchange {
-							padding: 10rpx 10rpx;
-							font-weight: 400;
-							font-size: 20rpx;
-							color: #FFFFFF;
-						}
-					}
-				}
-			}
-
-			.res-pop-ft {
-				width: 750rpx;
-				display: flex;
-				justify-content: space-evenly;
-
-				.ft-btn {
-					width: 200rpx;
-					height: 68rpx;
-					font-weight: 400;
-					font-size: 24rpx;
-				}
-
-				>view:nth-child(1) {
-					color: #333333;
-				}
-
-				>view:nth-child(2) {
-					color: #333333;
-				}
-			}
-		}
-
-		.ani-pop {
-			width: 100vw;
-			height: 100vh;
-			position: fixed;
-			left: 0;
-			top: 0;
-			z-index: 88;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			background: #000;
-
-			image {
-				width: 100%;
-				height: 1624rpx;
-			}
-		}
-	}
+.navLeft {
+  width: 100%;
+  position: fixed;
+  left: 30rpx;
+  z-index: 100;
+  height: 44px;
+
+  > view {
+    // font-family: YouSheBiaoTiHei;
+    font-weight: 400;
+    font-size: 50rpx;
+    color: #ffffff;
+  }
+}
+
+.content {
+  padding: 0 0 300rpx;
+  background-color: #ffffff;
+
+  .header {
+    width: 750rpx;
+    height: 722rpx;
+    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;
+      // 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;
+
+      > text:nth-child(2n + 1) {
+        font-weight: 400;
+        font-size: 16rpx;
+        color: #333333;
+      }
+
+      > text:nth-child(2) {
+        font-weight: 700;
+        font-size: 24rpx;
+        color: #333333;
+      }
+    }
+
+    &-footer {
+      width: 750rpx;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+
+      &-one {
+        width: 186rpx;
+        height: 106rpx;
+        display: flex;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        z-index: 1;
+
+        > image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &-two {
+        width: 224rpx;
+        height: 119rpx;
+        display: flex;
+        position: absolute;
+        left: 160rpx;
+        bottom: 0;
+        z-index: 1;
+
+        > image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &-three {
+        width: 224rpx;
+        height: 119rpx;
+        display: flex;
+        position: absolute;
+        right: 160rpx;
+        bottom: 0;
+
+        > image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &-four {
+        width: 186rpx;
+        height: 106rpx;
+        display: flex;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+
+        > image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .spylView {
+    background: #ffffff;
+
+    &-head {
+      box-sizing: border-box;
+      padding: 24rpx 30rpx;
+      width: 750rpx;
+
+      > view:nth-child(2n + 1) {
+        > view:nth-child(1) {
+          width: 74rpx;
+          height: 56rpx;
+          background: #f5f5f5;
+          border-radius: 12rpx;
+          // border: 2rpx solid #000000;
+        }
+
+        > view:nth-child(2) {
+          margin-top: 8rpx;
+          font-weight: 400;
+          font-size: 20rpx;
+          color: #ffffff;
+          text-align: center;
+        }
+      }
+
+      > view:nth-child(2) {
+        width: 420rpx;
+
+        > view:nth-child(1) {
+          width: 420rpx;
+          height: 14rpx;
+          border-radius: 40rpx;
+
+          > text {
+            height: 14rpx;
+            border-radius: 40rpx;
+            background: #cdf022;
+          }
+        }
+
+        > view:nth-child(2) {
+          padding: 14rpx 30rpx 0;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #999999;
+
+          > view {
+            > text {
+              font-family: YouSheBiaoTiHei;
+              font-weight: 400;
+              font-size: 36rpx;
+              color: #333333;
+            }
+          }
+        }
+      }
+    }
+
+    .list {
+      padding: 30rpx;
+      display: grid;
+      grid-template-columns: repeat(3, 210rpx);
+      gap: 30rpx 30rpx;
+
+      .list-item {
+        width: 210rpx;
+        box-sizing: border-box;
+        background-color: #f8f8f8;
+        border-radius: 16rpx;
+
+        .pic {
+          width: 210rpx;
+          height: 210rpx;
+          box-sizing: border-box;
+          position: relative;
+          background: #3b3941;
+          border-radius: 16rpx 16rpx 0rpx 0rpx;
+
+          .pic-img {
+            width: 210rpx;
+            height: 210rpx;
+            // border-radius: 24rpx;
+          }
+
+          .type-tag {
+            position: absolute;
+            top: 12rpx;
+            left: 12rpx;
+            border-radius: 18rpx;
+            font-weight: 400;
+            font-size: 20rpx;
+            color: #ffffff;
+            min-width: 78rpx;
+            height: 38rpx;
+            box-sizing: border-box;
+          }
+
+          .num {
+            position: absolute;
+            left: 50%;
+            padding: 0 10rpx;
+            transform: translateX(-50%);
+            bottom: 8rpx;
+            border-radius: 18rpx;
+            min-width: 66rpx;
+            height: 38rpx;
+            font-weight: 400;
+            font-size: 20rpx;
+            background-color: rgba(255, 255, 255, 0.5);
+            color: #000000;
+          }
+
+          .yu-tag {
+            position: absolute;
+            right: 10rpx;
+            top: 10rpx;
+            z-index: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-weight: 400;
+            font-size: 32rpx;
+            color: #ff873a;
+            text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0,
+              #fff 0 -1px 0;
+          }
+
+          .shadow {
+            position: absolute;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.6);
+            border-radius: 24rpx;
+
+            > image {
+              width: 86rpx;
+              height: 156rpx;
+            }
+          }
+        }
+
+        .title {
+          padding: 28rpx 10rpx 0;
+          font-size: 20rpx;
+          font-weight: 400;
+          color: #333333;
+        }
+
+        .desc {
+          padding: 24rpx 10rpx 0;
+          font-size: 16rpx;
+          font-weight: 300;
+          color: #f39205;
+        }
+
+        .price {
+          padding: 24rpx 10rpx 28rpx;
+          font-weight: 400;
+          font-size: 16rpx;
+          color: #333333;
+        }
+      }
+    }
+  }
+
+  .fixed-btns {
+    position: fixed;
+    z-index: 10;
+    right: 20rpx;
+    bottom: 300rpx;
+
+    .btn {
+      width: 94rpx;
+      height: 110rpx;
+      margin-top: 40rpx;
+    }
+  }
+
+  .ft-fixed {
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    padding-bottom: 40rpx;
+    background: #ffffff;
+    padding-top: 20rpx;
+
+    .lt-btn {
+      width: 690rpx;
+      height: 60rpx;
+      background: linear-gradient(90deg, #2dcbff 0%, #ff873a 100%);
+      border-radius: 40rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 20rpx;
+      font-size: 32rpx;
+      font-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%;
+        // }
+      }
+    }
+  }
+
+  .buy-pop {
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    background: #f7f7f7;
+    padding-bottom: 30rpx;
+    border-radius: 16rpx 16rpx 0rpx 0rpx;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: -62rpx;
+      left: 0;
+      width: 750rpx;
+      height: 62rpx;
+      // background: url($imgurl+'common/ding.png') no-repeat 0 0 / 100% 100%;
+    }
+
+    .buy-pop-hd {
+      padding: 20rpx 0;
+      padding-left: 10rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      font-size: 40rpx;
+      font-weight: 500;
+      color: #333333;
+
+      .close {
+        width: 60rpx;
+        height: 60rpx;
+      }
+    }
+
+    .card-row {
+      padding: 16rpx 0;
+      display: flex;
+      height: 82rpx;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 24rpx;
+      border-radius: 16rpx;
+      background-color: #fff;
+
+      .title {
+        font-size: 20rpx;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        margin-left: 24rpx;
+        color: #333333;
+      }
+
+      .row-r {
+        display: flex;
+        align-items: center;
+
+        font-size: 24rpx;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #999999;
+
+        .icon {
+          width: 10rpx;
+          height: 17rpx;
+          color: #999999;
+          margin-left: 10rpx;
+          margin-right: 24rpx;
+        }
+      }
+    }
+
+    .buy-card {
+      border-radius: 20rpx;
+      padding: 30rpx 30rpx 10rpx;
+      background: #ffffff;
+
+      .buy-info {
+        display: flex;
+
+        .pic {
+          width: 190rpx;
+          height: 190rpx;
+          border-radius: 10rpx;
+        }
+
+        .info-r {
+          width: calc(100% - 190rpx);
+          box-sizing: border-box;
+          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-weight: 500;
+              font-size: 16rpx;
+              color: #333333;
+
+              text {
+                font-size: 28rpx;
+              }
+            }
+
+            .num {
+              font-size: 28rpx;
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              color: #999999;
+            }
+          }
+        }
+      }
+
+      .line {
+        height: 1px;
+        background: #222222;
+        margin: 30rpx 0 10rpx;
+      }
+
+      .card-row {
+        padding: 16rpx 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title {
+          font-size: 28rpx;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #ffffff;
+        }
+
+        .row-r {
+          display: flex;
+          align-items: center;
+
+          font-size: 24rpx;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #ffffff;
+
+          .icon {
+            width: 32rpx;
+            height: 32rpx;
+          }
+        }
+      }
+    }
+
+    .pay-title {
+      margin-top: 30rpx;
+      font-size: 32rpx;
+      font-weight: 400;
+      color: #ffffff;
+    }
+
+    .pay-type {
+      padding: 30rpx;
+      border-radius: 20rpx;
+      margin-top: 20rpx;
+      display: flex;
+      align-items: center;
+      background: #ffffff;
+
+      .icon {
+        width: 32rpx;
+        height: 32rpx;
+      }
+
+      .title {
+        flex: 1;
+        padding: 0 20rpx;
+        font-size: 28rpx;
+        font-weight: 400;
+        color: #333333;
+      }
+    }
+
+    .agree {
+      display: flex;
+      margin-top: 30rpx;
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+      line-height: 32rpx;
+
+      .icon {
+        width: 32rpx;
+        height: 32rpx;
+        margin-right: 10rpx;
+      }
+    }
+
+    .rule {
+      padding: 20rpx;
+      border-radius: 20rpx;
+      box-sizing: border-box;
+      margin: 20rpx 0 0;
+      height: 160rpx;
+      background: #f9f8e1;
+      border-radius: 20rpx;
+
+      .rule-inner {
+        max-height: 120rpx;
+        font-size: 20rpx;
+        font-weight: 400;
+        color: #333333;
+      }
+    }
+
+    .pay-btn {
+      margin: 30rpx auto 0;
+      width: 686rpx;
+      height: 84rpx;
+      background: url($imgurl + "common/payBtn.png") no-repeat 0 0 / 100% 100%;
+      display: flex;
+      margin-bottom: 90rpx;
+      align-items: center;
+      justify-content: center;
+      font-weight: 500;
+      color: #cdef27;
+
+      > text:nth-child(1) {
+        font-size: 28rpx;
+      }
+
+      > text:nth-child(2) {
+        font-size: 36rpx;
+      }
+    }
+  }
+
+  .res-pop {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+    background: url($imgurl + "common/yb.png") no-repeat 0 0 / 100% 100%;
+
+    .res-pop-hd {
+      width: 400rpx;
+      height: 108rpx;
+      background: url($imgurl + "common/gxhd.png") no-repeat 0 0 / 100% 100%;
+    }
+
+    .res-pop-bd {
+      width: 636rpx;
+      height: 760rpx;
+      background-color: #ffffff;
+      border-radius: 16rpx;
+      margin: 36rpx auto;
+
+      .res-list {
+        padding: 20rpx 10rpx;
+        display: grid;
+        grid-template-columns: repeat(3, 210rpx);
+        gap: 24rpx 10rpx;
+
+        .res-item {
+          width: 180rpx;
+          height: 240rpx;
+          background-color: #f8f8f8;
+          border-radius: 16rpx;
+
+          .pic {
+            width: 180rpx;
+            height: 180rpx;
+            position: relative;
+            background: #d8d8d8;
+            border-radius: 16rpx 16rpx 0rpx 0rpx;
+
+            > image {
+              width: 180rpx;
+              height: 180rpx;
+              border-radius: 16rpx 16rpx 0rpx 0rpx;
+            }
+
+            .type-tag {
+              position: absolute;
+              left: 12rpx;
+              top: 12rpx;
+              z-index: 2;
+              width: 68rpx;
+              height: 32rpx;
+              background: url($imgurl + "common/chouLabel.png") no-repeat 0 0 /
+                100% 100%;
+              font-weight: 400;
+              font-size: 14rpx;
+              color: #ffffff;
+            }
+
+            .num {
+              position: absolute;
+              z-index: 2;
+              left: 50%;
+              transform: translateX(-50%);
+              bottom: 10rpx;
+              min-width: 42rpx;
+              height: 28rpx;
+              font-weight: 400;
+              font-size: 14rpx;
+              color: #333333;
+              background-color: rgba(255, 255, 255, 0.5);
+              border-radius: 18rpx;
+            }
+          }
+
+          .title {
+            padding: 22rpx 10rpx 0;
+            font-weight: 400;
+            font-size: 16rpx;
+            color: #333333;
+          }
+
+          .exchange {
+            padding: 10rpx 10rpx;
+            font-weight: 400;
+            font-size: 20rpx;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+
+    .res-pop-ft {
+      width: 750rpx;
+      display: flex;
+      justify-content: space-evenly;
+
+      .ft-btn {
+        width: 200rpx;
+        height: 68rpx;
+        font-weight: 400;
+        font-size: 24rpx;
+      }
+
+      > view:nth-child(1) {
+        color: #333333;
+      }
+
+      > view:nth-child(2) {
+        color: #333333;
+      }
+    }
+  }
+
+  .ani-pop {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 88;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #000;
+
+    image {
+      width: 100%;
+      height: 1624rpx;
+    }
+  }
+}
 </style>
\ No newline at end of file