<!--

-->
<template>
  <view
    class="content"
    :style="{
      'padding-top': `calc(600rpx)`
    }"
  >
    <!-- 购买说明 -->

    <view
      class="header common_bg"
      v-if="goods"
      :style="{
        'background-image': `url(${goods.imgurl_detail})`
      }"
    >
      <uni-nav-bar
        left-icon="left"
        :title="goods.title"
        color="#fff"
        backgroundColor="transparent"
        :fixed="true"
        :statusBar="true"
        :border="false"
        @clickLeft="back"
      ></uni-nav-bar>
      <!-- <view class="head">
        <view
          class="status_bar"
          :style="'height:' + statusBarHeight + 'px;'"
        ></view>
        <view class="header_title">
          <view @click="back()">
            <image :src="z_imgPath + 'back.png'"></image>
            返回
          </view>
          <view class="hang1">{{ goods.title }}</view>
        </view>
      </view> -->

      <view
        @click="$refs.shuoming.open()"
        class="info-btn"
        :style="{
          top: `calc(${$sys().statusBarHeight}px + 130rpx)`
        }"
      >
        <image :src="$img('/static/icon/info.png')" mode="scaleToFill" />
        购买说明
      </view>

      <view
        @click="sc_collect()"
        class="like-btn"
        :style="{
          top: `calc(${$sys().statusBarHeight}px + 130rpx)`
        }"
      >
        <image
          v-if="goods.collection_is == 1"
          :src="$img('/static/icon/like_act.png')"
          mode="scaleToFill"
        />

        <image v-else :src="$img('/static/icon/like.png')" mode="scaleToFill" />
        {{ goods.collection_is == 1 ? '已收藏' : '收藏' }}
      </view>

      <view
        class="pic-bt common_bg"
        :style="{
          'background-image': `url(${$img('/static/img/yf_banner_bg.png')})`
        }"
      >
        <view class="pic-bt-hd">
          <view class="left">
            当前第{{ goods.num || 0 }}/{{ goods.stock || 0 }}箱
          </view>

          <view class="center">
            赏品余量
            <text>{{ goods.goodslist_surplus_stock || 0 }}</text>
            /{{ goods.goodslist_stock || 0 }}张
          </view>

          <view class="right">
            <text>{{ goods.price }}</text>
            {{ goods.type == 5 ? '积分' : '元' }}
            /张明信片
          </view>
        </view>

        <view class="pic-bt-ft">
          <view @click="before()" class="prev">
            <image :src="$img('/static/icon/left.png')" mode="scaleToFill" />
            上一箱
          </view>

          <view
            @click="gotoPage('/pages/shouye/huanxiang?id=' + goods_id)"
            class="change-box common_bg"
            :style="{
              'background-image': `url(${$img('/static/img/yf_cbb.png')})`
            }"
          >
            换箱
          </view>

          <view @click="after()" class="next">
            下一箱
            <image :src="$img('/static/icon/right.png')" mode="scaleToFill" />
          </view>
        </view>
      </view>

      <!-- <view class="header_center">
        <image
          :src="z_imgPath + 'detail/ysc.png'"
          v-if="goods.collection_is == 1"
          @click="sc_collect()"
        ></image>
        <image
          :src="z_imgPath + 'detail/wsc.png'"
          v-else
          @click="sc_collect()"
        ></image>
        <image
          :src="z_imgPath + 'detail/gmsm.png'"
          @click="$refs.shuoming.open()"
        ></image>
        <image :src=" z_imgPath + 'detail/hegui.png'" @click="tosangdai()"></image> 暂时隐藏
      </view> -->
      <!-- <view class="header_news">
        <view
          class="header_news_t"
          :style="
            'background: url(' +
            z_imgPath +
            'detail/news_t_bg.png' +
            ') no-repeat 0 0 / 100% auto;'
          "
        >
          <view class="header_news_t_price">
            <view>{{ goods.price }}{{ goods.type == 5 ? '积分' : '元' }}</view>
            <view>1张明信片</view>
          </view>
          <view class="riqi">
            <view v-if="goods.addtime">发售日</view>
            <view>{{ goods.addtime }}</view>
          </view>
          <image :src="z_imgPath + 'detail/jiaoliu.png?11'" @click="toNewMp()"></image>
          @click="tohuanxiang()" 换箱弹窗操作
          <image
            :src="z_imgPath + 'detail/huanxiang1.png'"
            style="width: 120rpx; height: 50rpx; margin-top: 30rpx"
            @click="gotoPage('/pages/shouye/huanxiang?id=' + goods_id)"
          ></image>
          <image
            :src="z_imgPath + 'detail/jilv.png'"
            @click="getjilv()"
            style="width: 180rpx; height: 50rpx; margin: 30rpx 45rpx 0"
          ></image>
          <image
            :src="z_imgPath + 'detail/shuaxin.png'"
            @click="getlist(goods.num)"
            style="width: 120rpx; height: 50rpx; margin: 30rpx 30rpx 0 0"
          ></image>
        </view>
      </view> -->
    </view>
    <view class="header_news_c">
      <view class="redu">
        <image
          :src="item"
          v-for="(item, index) in join_user"
          :key="index"
          v-if="index < 5"
          :style="'transform:translateX(' + -index * 20 + 'rpx' + ')'"
        ></image>
        {{ join_count }}次参与
      </view>
      <view class="flex_center" v-if="lock_info.goods_lock_surplus_time > 0">
        <image
          :src="lock_info.goods_lock_user_headimg"
          style="
            width: 44rpx;
            height: 44rpx;
            border-radius: 50%;
            margin-right: 10rpx;
          "
        ></image>
        <view class="hang1" style="max-width: 150rpx; color: #85dfff">
          {{ lock_info.goods_lock_user_nickname || '' }}
        </view>
        锁箱
        <xwCountDown2
          @change="change_time"
          style="color: #85dfff"
          v-if="lock_info.goods_lock_surplus_time > 0"
          :datatime="lock_info.goods_lock_surplus_time"
        ></xwCountDown2>
        秒
      </view>
      <view v-else>未锁箱</view>
    </view>
    <!-- <view class="header_news_b">
      <image :src="z_imgPath + 'detail/before.png'" @click="before()"></image>
      <view
        class="flex_center"
        :style="
          'background: url(' +
          z_imgPath +
          'detail/news_b_bg.png' +
          ') no-repeat 0 0 / 100% auto;'
        "
      >
        第
        <text>{{ goods.num }}</text>
        /{{ goods.stock }}箱，商品余量
        <text>{{ goods.goodslist_surplus_stock }}</text>
        /{{ goods.goodslist_stock }}张
      </view>
      <image :src="z_imgPath + 'detail/after.png'" @click="after()"></image>
    </view> -->
    <!-- style="min-height: 400rpx;" -->

    <view class="tab-list">
      <view
        @click="tabChange(i)"
        v-for="(item, i) in tabList"
        :key="i"
        class="tab-list-item"
        :class="{
          active: tabCur == i
        }"
      >
        {{ item.title }}

        <image
          class="arrow"
          v-if="tabCur == i"
          :src="$img('/static/img/tab_arrow.png')"
          mode="scaleToFill"
        />
      </view>
    </view>

    <!-- 赏池预览 -->
    <view v-if="tabList[tabCur].id == 1" class="shop">
      <view
        v-for="(item, index) in goodslist"
        :key="index"
        class="shop_item common_bg"
        @click="yulan(item, index)"
        :style="{
          'background-image': `url(${$img('/static/img/yf_ib.png')})`
        }"
      >
        <view class="item_head">
          <image :src="item.imgurl"></image>
          <view class="item_num">
            <view>{{ item.shang_title }}</view>
            <view>{{ item.surplus_stock }}/{{ item.stock }}</view>
          </view>
        </view>
        <view class="shop_con">
          <view class="hang1" style="color: #ffffff">{{ item.title }}</view>
          <view class="hang1">{{ item.pro }}</view>
          <view class="hang1" v-if="item.shang_id > 5">
            参考价:{{ goods.type == 5 ? '' : '¥' }}{{ item.price
            }}{{ goods.type == 5 ? '积分' : '' }}
          </view>
        </view>
        <view class="qiangguang" v-if="item.surplus_stock == 0">
          <image :src="$img('/static/img/yf_sold_out.png')"></image>
        </view>
      </view>
    </view>

    <mescroll-body
      v-if="tabList[tabCur].id == 2"
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      :up="upOption"
      @down="downCallback"
      @up="getjilv"
    >
      <scroll-view scroll-x class="log-tab">
        <view
          @click="logTabChange(i)"
          v-for="(item, i) in shang_cate"
          :key="i"
          class="log-tab-item common_bg"
          :style="{
            'background-image': `url(${$img(
              logTabCur == i
                ? '/static/img/yf_tab_act.png'
                : '/static/img/yf_tab.png'
            )})`
          }"
        >
          {{ item.shang_title }}
        </view>
      </scroll-view>

      <view class="log-list">
        <view
          v-for="(item, i) in jl_Arr"
          :key="i"
          class="log-list-item common_bg"
          :style="{
            'background-image': `url(${$img('/static/img/yf_log_ib.png')})`
          }"
        >
          <view class="log-l">
            <image
              class="avatar"
              :src="item.user_info.headimg"
              mode="scaleToFill"
            />

            <view class="log-l-info">
              <view class="info-name hang1">{{ item.user_info.nickname }}</view>

              <view class="info-time">
                {{ item.addtime }}
              </view>
            </view>
          </view>

          <view class="log-r">
            <view class="log-r-hd">{{ item.shang_title }}</view>

            <view class="log-r-ft">
              <image
                class="ft-pic"
                :src="item.goodslist_imgurl"
                mode="scaleToFill"
              />

              <view class="ft-title hang1">{{ item.goodslist_title }}</view>

              ×1
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
    <!-- 抽奖按钮 -->
    <view class="ft-fixed">
      <template v-if="goods.type != 3">
        <view class="ft-fixed-hd">
          <view
            @click="choujiang(1)"
            class="btn common_bg"
            :style="{
              'background-image': `url(${$img('/static/img/yf_1fa.png')})`
            }"
          >
            冲一发
          </view>

          <view
            @click="choujiang(3)"
            class="btn center common_bg"
            :style="{
              'background-image': `url(${$img('/static/img/yf_3fa.png')})`
            }"
          >
            冲三发
          </view>

          <view
            @click="choujiang(5)"
            class="btn common_bg"
            :style="{
              'background-image': `url(${$img('/static/img/yf_5fa.png')})`
            }"
          >
            冲五发
          </view>
        </view>

        <view class="ft-fixed-ft">
          <view
            @click="gotoPage('/pages/shouye/huanxiang?id=' + goods_id)"
            class="change-box common_bg"
            :style="{
              'background-image': `url(${$img('/static/img/yf_cbb1.png')})`
            }"
          >
            换箱
          </view>

          <view
            class="lock-btn common_bg"
            :style="{
              'background-image': `url(${$img('/static/img/yf_lbb.png')})`
            }"
          >
            <xwCountDown2
              class="lock-count"
              v-if="lock_info.goods_lock_surplus_time > 0"
              :datatime="lock_info.goods_lock_surplus_time"
            ></xwCountDown2>

            {{
              lock_info.lock_is == 1 && lock_info.goods_lock_surplus_time !== 0
                ? '锁箱中'
                : '自由模式'
            }}
          </view>

          <view
            @click="choujiang(goods.goodslist_surplus_stock)"
            class="all-btn common_bg"
            :style="{
              'background-image': `url(${$img('/static/img/yf_all.png')})`
            }"
          >
            抱箱
          </view>
        </view>
      </template>
    </view>

    <!-- <view class="bar_box" v-if="goods.type != 3">
      <view
        @click="choujiang(1)"
        class="bar_box_1"
        :style="
          'background: url(' +
          z_imgPath +
          'detail/fa_1.png' +
          ') no-repeat 0 0 / 100% 100%;'
        "
      ></view>
      <view
        @click="choujiang(3)"
        class="bar_box_2"
        :style="
          'background: url(' +
          z_imgPath +
          'detail/fa_3.png?1' +
          ') no-repeat 0 0 / 100% 100%;'
        "
      >
        <text v-if="goods.type == 1 || goods.type == 5">
          +{{ goods.three_time }}秒
        </text>
      </view>
      <view
        @click="choujiang(5)"
        class="bar_box_3"
        :style="
          'background: url(' +
          z_imgPath +
          'detail/fa_5.png?1' +
          ') no-repeat 0 0 / 100% 100%;'
        "
      >
        <text v-if="goods.type == 1 || goods.type == 5">
          +{{ goods.five_time }}秒
        </text>
      </view>
      <view
        @click="gotoPage('/pages/shouye/huanxiang?id=' + goods_id)"
        class="bar_box_5"
        :style="
          'background: url(' +
          z_imgPath +
          'detail/huanxiang.png' +
          ') no-repeat 0 0 / 100% 100%;'
        "
      ></view>
      <view
        class="bar_box_4"
        v-if="lock_info.lock_is == 1 && lock_info.goods_lock_surplus_time !== 0"
        :style="
          'background: url(' +
          z_imgPath +
          'detail/suoxiang_sel.png' +
          ') no-repeat 0 0 / 100% 100%;'
        "
      >
        <xwCountDown2
          v-if="
            lock_info.lock_is == 1 && lock_info.goods_lock_surplus_time !== 0
          "
          :datatime="lock_info.goods_lock_surplus_time"
          @change="change_time"
          class="daoji"
        ></xwCountDown2>
      </view>
      <view
        class="bar_box_7"
        :style="
          'background: url(' +
          z_imgPath +
          'detail/suoxiang.png' +
          ') no-repeat 0 0 / 100% 100%;'
        "
      >
        {{
          lock_info.lock_is == 1 && lock_info.goods_lock_surplus_time !== 0
            ? '锁箱中'
            : '自由模式'
        }}
      </view>
      <view
        @click="choujiang(goods.goodslist_surplus_stock)"
        class="bar_box_6"
        :style="
          'background: url(' +
          z_imgPath +
          'detail/baoxiang.png' +
          ') no-repeat 0 0 / 100% 100%;'
        "
      ></view>
    </view> -->
    <!-- 抽奖按钮 -->
    <view class="bar_box" v-if="goods.type == 3">
      <!-- <view @click="tohuanxiang()" class="bar_box_5"
				:style="'background: url('+ z_imgPath + 'detail/huanxiang.png'+ ') no-repeat 0 0 / 100% 100%;'">
			</view> -->
      <view
        @click="choujiang(1)"
        class="btns common_bg"
        :style="{
          'background-image': `url(${$img('/static/img/yf_1fa1.png')})`
        }"
      >
        一发入魂
      </view>
    </view>
    <!-- 刷新浮框 -->
    <view class="xuanfu">
      <image
        :src="$img('/static/img/yf_rb.png')"
        @click="loadData(true)"
      ></image>

      <button open-type="share" hover-class="">
        <image :src="$img('/static/img/yf_sb.png')"></image>
      </button>

      <!-- <image :src="z_imgPath + 'detail/shuaxin.png'" @click="getlist(goods.num)"></image> -->

      <image :src="$img('/static/img/yf_bb.png')" @click="toBag"></image>
    </view>

    <!-- 购买说明 -->
    <uni-popup ref="shuoming" type="center">
      <view
        class="popGm common_bg"
        :style="{
          'background-image': `url(${$img('/static/img/yf_rule_pop_bg.png')})`
        }"
      >
        <view class="pop_title">购买说明</view>
        <view class="pop_con">
          <scroll-view scroll-y="true" style="height: 600rpx">
            <view v-html="news"></view>
          </scroll-view>
        </view>

        <image
          @click="$refs.shuoming.close()"
          class="close"
          :src="$img('/static/icon/close.png')"
        ></image>
      </view>
    </uni-popup>

    <!-- 确认订单 -->
    <uni-popup ref="dingdan" type="bottom">
      <view class="order animated fadeInUp">
        <view class="order_title">
          <view class="ca">确认订单</view>
          <image
            :src="$img('/static/icon/close1.png')"
            @click="$refs.dingdan.close()"
          ></image>
          <!-- <image :src="z_imgPath + 'detail/order_p.png'"></image>
					<view class="ca" @click="$refs.dingdan.close()">×</view> -->
        </view>
        <view class="order_title_con1">
          <view class="order_pic" v-if="pay_news.goods">
            <view class="order_pic_img">
              <image :src="pay_news.goods.imgurl_detail"></image>
            </view>
            <view>
              <view style="font-size: 35rpx">{{ pay_news.goods.title }}</view>
              <view style="margin-top: 40rpx">类型：明信片</view>
              <view style="margin-top: 10rpx">
                <text>
                  <text style="font-family: zihun152hao-jijiachaojihei">
                    {{ pay_news.goods.price }}元
                  </text>
                </text>
                <text>×{{ pay_news.goods.prize_num }}</text>
              </view>
            </view>
          </view>
          <view class="order_num">
            <view style="font-size: 28rpx" v-if="pay_news.goods">
              明信片×{{ pay_news.goods.prize_num }}
            </view>
            <view>
              小计:{{ goods.box_type == 5 ? '' : '￥' }}
              <text>
                {{ pay_news.order_total
                }}{{ goods.box_type == 5 ? '积分' : '' }}
              </text>
            </view>
          </view>
        </view>
        <view class="order_title_con1" v-if="goods.box_type != 1">
          <view style="font-size: 28rpx; margin-bottom: 10rpx">支付方式</view>
          <!-- 积分赏 -->
          <view class="fangshi" v-if="goods.type == 5">
            <view class="flex_center">
              <image
                :src="$img('/static/icon/coin.png')"
                style="width: 40rpx; height: 40rpx"
              ></image>
              <view>
                使用积分抵扣￥
                <text>{{ pay_news.use_score }}</text>
                （剩余：
                <text>{{ pay_news.score }}</text>
                ）
              </view>
            </view>
            <image :src="z_imgPath + 'yuan_sel.png'"></image>
          </view>
          <!-- 一番赏 -->
          <template v-else>
            <view
              class="fangshi"
              @click="toCoupon"
              style="padding-bottom: 15rpx"
            >
              <view class="flex_center">
                <image
                  :src="$img('/static/icon/coupon.png')"
                  style="width: 40rpx; height: 40rpx"
                ></image>
                <view>优惠券</view>
              </view>

              <view class="fangshi-right">
                {{ couponData ? `-${couponData.price}` : '未选择' }}

                <image
                  class="icon"
                  :src="$img('/static/icon/right2.png')"
                ></image>
              </view>
            </view>

            <view
              class="fangshi"
              @click="change_yuan_index(1)"
              style="padding-bottom: 15rpx"
            >
              <view class="flex_center">
                <image
                  :src="$img('/static/icon/coin.png')"
                  style="width: 40rpx; height: 40rpx"
                ></image>
                <view>
                  使用星钻抵扣￥
                  <text>{{ pay_news.use_integral }}</text>
                  （剩余：
                  <text>{{ pay_news.integral }}</text>
                  ）
                </view>
              </view>
              <image
                v-if="bi"
                :src="$img('/static/icon/check_act.png')"
                style="width: 40rpx; height: 40rpx"
              ></image>
              <image
                v-else
                :src="$img('/static/icon/check.png')"
                style="width: 40rpx; height: 40rpx"
              ></image>
            </view>
            <view
              class="fangshi"
              @click="change_yuan_index(2)"
              style="
                border-top: 1px solid rgba(255, 255, 255, 0.2);
                padding-top: 15rpx;
              "
            >
              <view class="flex_center">
                <image
                  :src="$img('/static/icon/balance.png')"
                  style="width: 40rpx; height: 40rpx"
                ></image>
                <view>
                  使用星钻抵扣￥
                  <text>{{ pay_news.use_money }}</text>
                  （剩余：
                  <text>{{ pay_news.money }}</text>
                  ）
                </view>
              </view>
              <image
                v-if="yue"
                :src="$img('/static/icon/check_act.png')"
                style="width: 40rpx; height: 40rpx"
              ></image>
              <image
                v-else
                :src="$img('/static/icon/check.png')"
                style="width: 40rpx; height: 40rpx"
              ></image>
            </view>
          </template>
        </view>
        <view style="color: #999; font-size: 24rpx; margin: 20rpx 10rpx">
          下单购买即表示同意
          <text
            style="color: #fff"
            @click="gotoPage('/pages/guize/guize?type=2')"
          >
            《用户服务协议条款》
          </text>
        </view>
        <view class="order_title_btn">
          <view class="total-price">
            共{{ pay_news.goods && pay_news.goods.prize_num }}抽总计:{{
              goods.box_type == 5 ? '' : '￥'
            }}
            <text>
              {{ pay_news.price }}{{ goods.box_type == 5 ? '积分' : '' }}
            </text>
          </view>
          <view
            class="zhifu common_bg"
            @click="pay()"
            :style="{
              'background-image': `url(${$img('/static/img/yf_ljzf.png')})`
            }"
          >
            <!-- 支付 -->
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 奖品弹窗 -->
    <uni-popup
      ref="jp_show"
      type="center"
      mask-background-color="rgba(0,0,0,0.8)"
    >
      <view class="pop_jp">
        <!-- <image class="pop_gongxi" :src="z_imgPath + 'detail/jp_img.png'"></image> -->
        <!-- 	<view class="jp_headimg">
					<image :src="jp_news.headimg"></image>
				</view> -->
        <!-- <view class="jp_name">{{jp_news.nickname}}</view> -->
        <view
          class="suc-pop-hd common_bg"
          :style="{
            'background-image': `url(${$img('/static/img/yf_gxhd.png')})`
          }"
        ></view>

        <view
          :style="{
            'background-image': `url(${$img('/static/img/yf_res_pop_bg.png')})`
          }"
          class="jp_bg common_bg"
        >
          <view class="jp_title animated zoomIn">
            <view class="jp_title_1">
              <view
                class="jp_list common_bg"
                v-for="(v, i) in jp_arr"
                :key="i"
                :style="{
                  'background-image': `url(${$img(
                    '/static/img/yf_item_bg.png'
                  )})`
                }"
              >
                <view class="list_img">
                  <image :src="v.goodslist_imgurl"></image>
                  <view class="type-num">
                    <view class="type">{{ v.shang_title }}</view>

                    <view class="num">×1</view>
                  </view>
                </view>
                <view class="shang-title hang1">{{ v.goodslist_title }}</view>
              </view>
            </view>
          </view>
        </view>
        <!-- <image class="dhbtmbox" :src="z_imgPath + 'detail/dong_bottom.png'" style="margin-top: 35rpx;"></image> -->
        <view class="jp_btn">
          <view
            @click="tosangdai()"
            class="animated fadeInLeft common_bg"
            :style="{
              'background-image': `url(${$img('/static/img/yf_qhg.png')})`
            }"
          >
            <!-- 去赏袋 -->
          </view>
          <view
            @click="$refs.jp_show.close()"
            class="animated fadeInRight common_bg"
            :style="{
              'background-image': `url(${$img('/static/img/yf_qd.png')})`
            }"
          >
            <!-- 确定 -->
          </view>
          <!-- <view class="animated fadeInLeft" @click="tosangdai()">去赏袋</view>
					<view class="animated fadeInRight" @click="$refs.jp_show.close()">继续抽</view> -->
        </view>
      </view>
    </uni-popup>

    <!-- 详情弹窗 -->
    <uni-popup
      ref="yulanPop"
      type="center"
      mask-background-color="rgba(0,0,0,.95)"
    >
      <swiper
        :indicator-dots="false"
        :autoplay="false"
        :duration="300"
        :current="current_index"
        style="width: 600rpx; height: 830rpx"
      >
        <swiper-item v-for="(v, i) in goodslist" :key="i">
          <view>
            <view class="yulanStyle">
              <view style="font-size: 36rpx; flex: 1; text-align: left">
                {{ v.shang_title }}
              </view>
              <image :src="v.imgurl" mode="" class="shang_img"></image>
              <image
                class="img_bg"
                :src="$img('/static/img/yf_detail_pop_bg.png')"
              ></image>

              <view
                class="detail-title common_bg"
                :style="{
                  'background-image': `url(${$img(
                    '/static/img/yf_detail_pop_title_bg.png'
                  )})`
                }"
              >
                <view class="hang1">{{ v.title }}</view>
              </view>

              <view class="detail-type">
                产品类型:
                <text>{{ $config.getAppSetting("app_name")}}</text>
              </view>

              <view class="detail-price">
                市场参考价:
                <text>{{ v.sc_money }}</text>
              </view>

              <image
                @click="$refs.yulanPop.close()"
                class="close"
                :src="$img('/static/icon/close.png')"
              ></image>
            </view>

            <!-- <view
              class=" hang1"
              style="
                color: #fff;
                font-size: 28rpx;
                padding: 10rpx 0;
                text-align: center;
              "
            >
              {{ v.title }}
            </view>
            <view
              style="
                color: #fff;
                font-size: 28rpx;
                padding: 10rpx 0;
                text-align: center;
              "
            >
              市场参考价：{{ v.sc_money }}
            </view> -->
          </view>
        </swiper-item>
      </swiper>
    </uni-popup>

    <!-- 中赏记录 -->
    <uni-popup ref="jilv" type="bottom" :isMaskClick="false">
      <view
        class="order animated fadeInUp"
        :style="
          'background: url(' +
          z_imgPath +
          'detail/zsjl_bg.png' +
          ') no-repeat 0 0 / 100% auto;'
        "
      >
        <view class="order_title">
          <view class="ca">中赏记录</view>
          <image
            :src="z_imgPath + 'detail/guanbi_bg.png'"
            @click="$refs.jilv.close(), (page_num = 1), (mixTotal = 0)"
          ></image>
        </view>
        <view class="jilv_title">
          <view
            v-for="(item, index) in shang_cate"
            :key="index"
            @click="change_shang_id(item.shang_id)"
            :style="
              shang_id == item.shang_id
                ? 'background: url(' +
                  z_imgPath +
                  'detail/tabSel_bg.png' +
                  ') no-repeat 0 0 / 100% 100%;'
                : 'background: url(' +
                  z_imgPath +
                  'detail/tab_bg.png' +
                  ') no-repeat 0 0 / 100% 100%;'
            "
          >
            <text>{{ item.shang_title }}</text>
          </view>
        </view>
        <!-- -->
        <scroll-view
          scroll-y="true"
          @scrolltolower="getjilv"
          style="height: 900rpx"
        >
          <view
            v-for="(item, index) in jl_Arr"
            :key="index"
            class="jilv_list"
            :style="
              'background: url(' +
              z_imgPath +
              'detail/jilv_list_bg.png' +
              ') no-repeat 0 0 / 100% auto;'
            "
          >
            <view>
              <view class="flex_center">
                <image :src="item.user_info.headimg"></image>
                <view class="hang1" style="max-width: 260rpx">
                  {{ item.user_info.nickname }}
                </view>
              </view>
              <view style="font-size: 24rpx">{{ item.addtime }}</view>
            </view>
            <view>
              <view class="flex_center">
                <image
                  :src="item.goodslist_imgurl"
                  style="border-radius: 8rpx"
                ></image>
                <view class="hang1" style="max-width: 300rpx">
                  {{ item.goodslist_title }}
                </view>
              </view>
              <view>X{{ item.prize_num }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <!-- 换箱 -->
    <!-- <uni-popup ref="huanxiang" type="bottom">
			<view class="order animated fadeInUp">
				<view class="order_title">
					<image :src="z_imgPath + 'detail/huanxiang_p.png'" style="width: 173rpx;height: 87rpx;"></image>
					<view class="ca" @click="$refs.huanxiang.close()">×</view>
				</view>
				<view class="huanxiang_header">
					<view v-for="(v,i) in huanxiang_arr" :key="i" @click="huanxiang_click(saixuan_index,v.page_no)"
						:class="page_no==v.page_no?'header_view_sel':'header_view'">{{v.title}}</view>
				</view>
				商品展示
				<view class="goods_v">
					<view class="flex_center" @click="huanxiang_click(1,page_no)">
						<text :style="'color:'+(saixuan_index==1?'#FF7514':'')">箱号</text>
						<image :src="z_imgPath+'saixuan' +(saixuan_index==1?'_sel':'')+ '.png'" class="goods_v_1">
						</image>
					</view>
					<view class="flex_center" @click="huanxiang_click(2,page_no)" style="margin-left: 40rpx;">
						<text :style="'color:'+(saixuan_index==2?'#FF7514':'')">余量</text>
						<image :src="z_imgPath+'saixuan' +(saixuan_index==2?'_sel':'')+ '.png'" class="goods_v_1">
						</image>
					</view>
				</view>
				赏品余量
				<scroll-view scroll-y="true" class="yuliang">
					<view class="yuliang_list" v-for="(v,i) in huanxiang_Detail" :key='i' @click="getlist(v.num)">
						<view class="list_l"
							:style="'background: url('+ z_imgPath + 'kong_box.png'+ ') no-repeat 0 0 / 100% 100%;'">
							<view style="margin-top:65rpx;">第{{v.num}}箱</view>
							<view style="margin-top: 10rpx;">剩
								<text style="color: #96FFFE;">{{v.surplus_all_stock}}</text> 张
							</view>
						</view>
						<view class="list_r">
							<view v-for="(a,b) in v.goodslist" :key='b'>
								<text>{{a.shang_title}}</text>
								<text>{{a.surplus_stock}}/{{a.stock}}</text>
							</view>
						</view>
						<view class="qiangguang" v-if="v.surplus_stock==0">
							<image :src="z_imgPath + 'qiangguangle1.png'"></image>
						</view>
					</view>

				</scroll-view>

			</view>
		</uni-popup> -->

    <!-- 抽奖动画 -->
    <uni-popup
      ref="popup"
      type="center"
      :maskClick="false"
      mask-background-color="rgba(0,0,0,.8)"
    >
      <view
        class="dhboxs"
        v-if="jp_arr.length && jp_arr.length > 0"
        :style="
          'background: url(' +
          z_imgPath +
          'detail/jp_bg' +
          jp_arr.length +
          '.png' +
          ') no-repeat 0 0 / 100% 100%;height:' +
          (jp_arr.length == 1 ? '330' : jp_arr.length == 3 ? '660' : '909') +
          'rpx;'
        "
      >
        <view class="choubox" v-for="(b, v) in jp_arr.length" :key="v">
          <view class="choulist">
            <view class="choulists" :style="moveCss[v]">
              <view class="cj_title" v-for="(a, c) in items[v]" :key="c">
                <image :src="a.imgurl"></image>
                <view>{{ a.shang_title }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="dhxian"></view>
      </view>
      <view class="tiaobox" @click="tiaofun()">跳过</view>
      <!-- <image class="tiaobox"  :src="z_imgPath + 'tiaoguo.png'"></image> -->
    </uni-popup>
    <view class="zzz" ref="refDivName"></view>
    <!-- <bangding></bangding> -->
  </view>
</template>

<script>
import xwCountDown2 from '@/components/xw-CountDown2'
// import bangding from '@/components/bangding'
export default {
  components: {
    xwCountDown2
    // bangding
  },
  data() {
    return {
      z_imgPath: this.$z_img2 + 'shouye/',
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      goods_id: '', //商品id
      goods_num: '', //箱数
      goods: {},
      goodslist: [],
      join_count: '',
      join_user: [], // 参与人数
      // 锁箱
      lock_info: {},
      // 中赏记录
      jl_Arr: [],
      page_num: 1, // 页码
      mixTotal: 0, // 统计信息总页数
      // 换箱头部
      huanxiang_arr: [],
      page_no: 0,
      saixuan_index: 1,
      huanxiang_Detail: [],

      bi: true, // 1:是否币支付,
      yue: true, // 2:星钻支付
      prize_num: 1, // 抽奖次数即购买次数
      pay_news: {}, // 订单信息
      // 奖品
      jp_news: '', //用户头像
      jp_arr: [],
      news: '',

      // 支付失效
      pay_status: false,
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: false,
        page: {
          size: 10 // 每页数据的数量,默认10
        }
      },
      // 动画
      rollTimer: null, //动画定时器句柄
      moveCss: [], //奖励滚动组件的滑动的动画效果css
      luckyNums: 0, //中奖位置
      luckydata: [], //中奖位置数组
      lnStart: 50, //中奖位置区间开始
      lnEnd: 60, //中奖位置区间结束
      items: [], //滚动的卡片列表
      awardItem: [], //中奖道具
      left_px: '',
      tiaotype: 1,
      current_index: 0,
      // 中赏记录
      shang_cate: [],
      shang_id: 0,
      show: 1,
      tabList: [
        {
          id: 1,
          title: '包含以下赏品'
        },
        {
          id: 2,
          title: '中赏记录'
        }
      ],
      tabCur: 0,
      logTabCur: 0,
      couponData: ''
    }
  },

  onLoad(v) {
    this.goods_id = v.goods_id
    this.goods_num = v.goods_num ? v.goods_num : ''
    this.getDanye(3)
    this.getgoodslist_count()
    if (v.pid) {
      uni.setStorageSync('pid', v.pid)
    }
    this.loadData()

    uni.$on('chooseCoupon', data => {
      // console.log('data', data)

      this.couponData = data
      this.order_money()
    })
  },

  onUnload() {
    uni.$off('chooseCoupon')
  },

  onShareAppMessage() {
    let that = this
     
    return {
      title:
        this.$config.getAppSetting("app_name") +
        that.goods.title +
        '系列' +
        ' 第' +
        that.goods.num +
        '套',
      imageUrl: that.goods.imgurl,
      path:
        '/pages/shouye/detail?goods_id=' +
        that.goods_id +
        '&goods_num=' +
        that.goods.num +
        '&pid=' +
        uni.getStorageSync('userinfo').ID
    }
  },

  methods: {
    toCoupon() {
      uni.navigateTo({
        url: `/pages/user/coupon?type=2&total_price=${this.pay_news.order_total}`
      })
    },

    toBag() {
      uni.switchTab({ url: '/pages/sangdai/sangdai' })
    },

    logTabChange(i) {
      this.logTabCur = i
      this.jl_Arr = []

      this.mescroll.resetUpScroll()
      this.mescroll.scrollTo(0, 0)
    },

    change_time(e) {
      // console.log(e)
      if (e.s == 0) {
        this.lock_info.lock_is = 0
        this.lock_info.goods_lock_surplus_time = 0
      }
    },
    tokefu() {
      // #ifdef  MP-WEIXIN
      wx.openCustomerServiceChat({
        extInfo: {
          url: uni.getStorageSync('wx_link') //客服地址链接
        },
        corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
        success(res) {
          console.log(res, 1)
        },
        fail(res) {
          console.log(res, 2)
        }
      })
      // #endif
    },
    getlist(a) {
      this.goods_num = a
      this.loadData()
      // this.$refs.huanxiang.close()
    },
    after() {
      if (this.goods.num < this.goods.stock) {
        this.goods_num = this.goods.num + 1
        this.getlist(this.goods_num)
      } else {
        uni.showToast({
          title: '没有更多箱啦~',
          icon: 'error'
        })
      }
    },
    before() {
      if (this.goods.num > 1) {
        this.goods_num = this.goods.num - 1
        this.getlist(this.goods_num)
      } else {
        uni.showToast({
          title: '当前已是第一箱~',
          icon: 'error'
        })
      }
    },
    huanxiang_click(a, b) {
      let that = this
      this.saixuan_index = a
      this.page_no = b
      that.req({
        url: 'goodslist_content',
        data: {
          sort: that.saixuan_index,
          goods_id: that.goods_id,
          page_no: that.page_no
        },
        success(res) {
          if (res.status == 1) {
            that.huanxiang_Detail = res.data
          }
        }
      })
    },
    tohuanxiang() {
      //隐藏之前弹出窗换箱
      // this.huanxiang_click(this.saixuan_index, this.page_no)
      // this.$refs.huanxiang.open()
      console.log('点击')
      // uni.redirectTo({
      // 	url: '/pages/shouye/huanxiang?id=' + this.goods_id
      // })
    },
    // 换箱头部
    getgoodslist_count() {
      let that = this
      that.req({
        url: 'goodslist_count',
        data: {
          goods_id: that.goods_id
        },
        success(res) {
          if (res.status == 1) {
            that.huanxiang_arr = res.data
          }
        }
      })
    },
    getDanye(e) {
      let that = this
      that.req({
        url: 'danye',
        data: {
          type: e
        },
        success(res) {
          if (res.status == 1) {
            that.news = res.data
          }
        }
      })
    },
    // 中赏记录
    change_shang_id(e) {
      this.shang_id = e
      this.page_num = 1
      this.jl_Arr = []
      this.getjilv()
    },
    getjilv({ num, size }) {
      let that = this

      that.req({
        url: 'shang_log',
        Loading: true,
        data: {
          page: num,
          goods_id: that.goods_id,
          goods_num: that.goods.num,
          shang_id:
            that.shang_cate.length > 0
              ? that.shang_cate[that.logTabCur].shang_id
              : ''
        },
        success(res) {
          if (res.status == 1) {
            that.shang_cate = res.data.category

            if (num == 1) {
              that.jl_Arr = []
            }
            that.jl_Arr = that.jl_Arr.concat(res.data.data)
            that.mescroll.endByPage(res.data.data.length, res.data.last_page)
          }
        }
      })
    },
    back() {
      var pages = getCurrentPages()
      console.log(pages)

      if (pages.length == 1 && pages[0].route == 'pages/shouye/detail') {
        uni.redirectTo({
          url: '/pages/shouye/index'
        })
      } else {
        uni.navigateBack()
      }
    },

    openBox(v) {
      // #ifdef H5
      this.left_px = this.$refs.refDivName.$el.offsetWidth
      // #endif
      // #ifndef H5
      uni
        .createSelectorQuery()
        .in(this)
        .select('.zzz')
        .boundingClientRect(data => {
          this.left_px = data.width //表示元素宽度
        })
        .exec()
      // #endif
      //初始化数据
      this.tiaotype = 1
      this.InitPageModel(v)
      //500ms 之后开始奖励列表滑动
      setTimeout(() => {
        this.rollTimer = setTimeout(() => this.startScroll(v), 100)
      }, 150)
    },
    //随机数
    getRand(start, end) {
      return Math.floor(Math.random() * (end - start + 1) + start)
    },
    getItem() {
      let r = this.getRand(0, this.goodslist.length - 1)
      let item
      item = this.goodslist[r]
      return item
    },
    //初始化列表
    InitPageModel(v) {
      var that = this
      //随机一个总数
      that.items = []
      //中间号码的列队
      that.luckydata = []
      //中奖卡片的位置
      for (var a = 0; a < v; a++) {
        var jldata = []
        that.luckyNums = that.getRand(that.lnStart, that.lnEnd)
        that.luckydata.push(that.luckyNums)

        let loopNum =
          that.lnEnd - that.luckyNums < 4 ? that.luckyNums + 4 : that.lnEnd
        for (let i = 0; i < loopNum; i++) {
          let item = {}
          if (i == that.luckyNums) {
            item = that.goodslist.filter(
              item => item.id == that.jp_arr[a].goodslist_id
            )[0] //把奖励加到列表里
            that.awardItem.push(item) //拿到奖励的各个参数
          } else item = that.getItem()
          jldata.push(item)
        }
        that.items[a] = jldata
      }
      that.$nextTick(function () {
        that.$refs.popup.open()
      })
    },

    //滑动效果
    startScroll() {
      let that = this
      that.$nextTick(function () {
        setTimeout(() => {
          for (let a = 0; a < that.luckydata.length; a++) {
            let yanzi =
              'left:-' +
              (that.luckydata[a] - 1.95) * that.left_px +
              'px;transition:all 8s cubic-bezier(.1,.59,.1,.9)'
            that.moveCss.push(yanzi)
            //6s 动画结束后 开始弹出奖励图片，6500ms后执行
          }
        }, 500)
        that.rollTimer = setTimeout(() => {
          that.tiaofun()
        }, 9000)
      })
    },
    tiaofun() {
      let that = this
      that.moveCss = []
      // 清除CSS动画属性
      for (var a = 0; a < that.luckydata.length; a++) {
        let left = 'left:0;'
        that.moveCss.push(left)
      }
      clearTimeout(that.rollTimer)
      that.$refs.popup.close()
      setTimeout(() => {
        that.$refs.jp_show.open()
        that.moveCss = []
        that.items = []
        that.luckydata = []
      }, 500)
    },

    yulan(e, a) {
      this.current_index = a
      setTimeout(() => {
        this.$refs.yulanPop.open()
      }, 300)
    },
    tosangdai() {
      uni.setStorageSync('page', this.$mp.page.route)
      uni.switchTab({ url: '/pages/sangdai/sangdai' })
      // uni.redirectTo({
      //   url: '../sangdai/sangdai'
      // })
    },
    change_yuan_index(e) {
      if (e == 1) {
        this.bi = !this.bi
      }
      if (e == 2) {
        this.yue = !this.yue
      }
      this.order_money()
    },
    sc_collect() {
      let that = this
      that.req({
        url: 'addCollect',
        data: {
          goods_id: that.goods.id,
          goods_num: that.goods.num
        },
        success(res) {
          if (res.status == 1) {
            if (that.goods.collection_is == 1) {
              that.goods.collection_is = 0
            } else {
              that.goods.collection_is = 1
            }
          }
        }
      })
    },

    pay() {
      let that = this
      // that.$refs.jp_show.open()
      // return;
      let info = {
        prize_num: that.prize_num,
        goods_id: that.goods_id,
        goods_num: that.goods.num,
        use_money_is: that.yue ? 1 : 2,
        use_integral_is: that.bi ? 1 : 2,
        coupon_id: (that.couponData && that.couponData.id) || ''
      }
      if (that.pay_status) {
        return
      }
      if (info) {
        that.pay_status = true
        that.req({
          url: 'orderbuy',
          data: info,
          success(res) {
            if (res.status == 1) {
              that.jp_arr = []
              if (res.data.status == 1) {
                that.info = {}
                uni.requestPayment({
                  provider: 'wxpay',
                  timeStamp: res.data.res.timeStamp,
                  nonceStr: res.data.res.nonceStr,
                  package: res.data.res.package,
                  signType: 'MD5',
                  paySign: res.data.res.paySign,
                  complete(ress) {
                    if (ress.errMsg == 'requestPayment:fail cancel') {
                      uni.showToast({
                        title: '取消支付',
                        icon: 'loading',
                        duration: 1000
                      })
                    }
                    if (ress.errMsg == 'requestPayment:ok') {
                      uni.showToast({
                        title: '支付成功',
                        icon: 'success',
                        duration: 1000
                      })
                      setTimeout(() => {
                        that.$refs.dingdan.close()
                        that.req({
                          url: 'prizeorderlog',
                          data: {
                            order_num: res.data.order_num
                          },
                          success(aa) {
                            if (aa.status == 1) {
                              that.jp_news = aa.data.user_info
                              that.jp_arr = aa.data.data
                              that.$refs.jp_show.open()
                              // if (that.jp_arr.length ==
                              // 	1 || that.jp_arr
                              // 	.length == 3 || that
                              // 	.jp_arr.length == 5) {
                              // 	that.openBox(that
                              // 		.jp_arr
                              // 		.length)
                              // } else {
                              // 	that.$refs.jp_show
                              // 		.open()
                              // }
                              that.loadData()
                            }
                          }
                        })
                      }, 1500)
                    }
                  }
                })
              } else {
                that.info = {}
                uni.showToast({
                  title: '支付成功',
                  icon: 'success',
                  duration: 1000
                })
                that.$refs.dingdan.close()
                that.req({
                  url: 'prizeorderlog',
                  data: {
                    order_num: res.data.order_num
                  },
                  success(aa) {
                    if (aa.status == 1) {
                      that.jp_news = aa.data.user_info
                      that.jp_arr = aa.data.data
                      that.$refs.jp_show.open()
                      // if (that.jp_arr.length == 1 || that.jp_arr.length == 3 ||
                      // 	that.jp_arr.length == 5) {
                      // 	that.openBox(that.jp_arr.length)
                      // } else {
                      // 	that.$refs.jp_show.open()
                      // }
                      that.loadData()
                    }
                  }
                })
              }
            }
            if (res.status == 0) {
            }
          },
          complete() {
            that.pay_status = false
          }
        })
      }
    },
    choujiang(e) {
      this.prize_num = e
      this.couponData = ''
      this.order_money()
    },
    order_money() {
      let that = this
      console.log(234)
      for (var a = 0; a < that.luckydata.length; a++) {
        let yanzi = 'left:0;transition:all 8s cubic-bezier(.1,.59,.1,.9)'
        // that.$set(that.moveCss, a, yanzi)
        that.moveCss.push(yanzi)
        console.log('moveCss:', that.moveCss[a])
      }
      that.req({
        url: 'ordermoney',
        data: {
          prize_num: that.prize_num,
          goods_id: that.goods_id,
          goods_num: that.goods.num,
          use_money_is: that.yue ? 1 : 2,
          use_integral_is: that.bi ? 1 : 2,
          coupon_id: (that.couponData && that.couponData.id) || ''
        },
        success(res) {
          if (res.status == 1) {
            that.pay_news = res.data
            if (res.data.coupon_id) {
              that.couponData = {
                id: res.data.coupon_id,
                price: res.data.coupon_price
              }
            }

            that.$refs.dingdan.open()
          }
        }
      })
    },

    tabChange(i) {
      this.tabCur = i
      this.goodslist = []

      if (this.tabCur == 0) {
        this.loadData()
      }

      if (this.tabCur == 1) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.mescroll.resetUpScroll()
            this.mescroll.scrollTo(0, 0)
          }, 200)
        })
      }
    },

    loadData(showToast = false) {
      // 模拟接口
      let url = 'goodsdetail'

      let that = this
      that.req({
        url,
        data: {
          goods_id: that.goods_id,
          goods_num: that.goods_num
        },
        success(res) {
          if (res.status == 1) {
            if (showToast) {
              setTimeout(() => {
                uni.showToast({
                  title: '刷新成功',
                  icon: 'success'
                })
              }, 100)
            }

            if (res.status == 0) {
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }
            if (res.status == 1) {
              that.goods = res.data.goods
              // that.goods_num = res.data.goods.num
              that.join_count = res.data.join_count
              that.join_user = res.data.join_user
              that.$nextTick(() => {
                that.lock_info = res.data.lock_info
              })
              that.goodslist = res.data.goodslist
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.daoji .time {
  /* margin-left: 160rpx; */
  margin-top: 18rpx;
}
.daoji .time text {
  -webkit-text-stroke: 4rpx #0d0d0d;
}
.popGm {
  width: 607rpx;
  // height: 904rpx;
  padding-top: 70rpx;
  box-sizing: border-box;
  position: relative;

  .pop_title {
    font-size: 36rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
  }

  .pop_con {
    padding: 30rpx 40rpx 50rpx;
    box-sizing: border-box;

    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 42rpx;
  }

  .close {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 50rpx;
    height: 50rpx;
  }
}
.zzz {
  width: 140rpx;
  height: 1rpx;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.dhboxs {
  position: relative;
  width: 750rpx;
  /* height: 909rpx; */
  padding: 80rpx 25rpx;
  box-sizing: border-box;
}

.dhxian {
  width: 3rpx;
  height: calc(100% - 100rpx);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 52rpx;
  margin: auto;
  background: #ff7514;
  box-shadow: 0 2rpx 10rpx 4rpx #ff7514;
}

.tiaobox {
  width: 160rpx;
  height: 60rpx;
  border: 2rpx solid #ff7315;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff7315;
  border-radius: 10rpx;
  margin: 100rpx auto 0;
  position: relative;
  z-index: 20;
}

.choubox {
  width: 670rpx;
  height: 120rpx;
  position: relative;
  margin: 30rpx auto;
  overflow: hidden;
}

.choulist {
  position: absolute;
  display: flex;
  width: 670rpx;
}

.choulists {
  position: relative;
  left: 0;
  display: flex;
}

.cj_title > view {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 20rpx 0 12rpx;
  box-sizing: border-box;
  background: #ff7514;
  border-radius: 0 10rpx 0 0;
}

.cj_title > image {
  width: 120rpx;
  height: 120rpx;
}

.cj_title {
  width: 140rpx;
  height: 120rpx;
  font-size: 20rpx;
  color: #ffffff;
  text-align: left;
  position: relative;
}

/* 动画 */
.list_r text:nth-of-type(2) {
  /* color: #F96026; */
}

.list_r > view {
  width: 30%;
  display: flex;
  justify-content: space-between;
  line-height: 44rpx;
}

.list_r > view:nth-child(3n-1) {
  margin: 0 5%;
}

.list_r {
  margin-left: 40rpx;
  width: 500rpx;
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
}

.list_l {
  width: 97rpx;
  height: 100rpx;
  text-align: center;
}

.yuliang_list {
  display: flex;
  align-items: center;
  width: 690rpx;
  font-size: 24rpx;
  margin-top: 20rpx;
  border: 1px solid #fff;
  padding: 37rpx 20rpx 60rpx;
  box-sizing: border-box;
  position: relative;
  color: #ffffff;
}

.yuliang {
  width: 690rpx;
  max-height: 900rpx;
  border-radius: 20rpx;
  margin: 15rpx auto;
  box-sizing: border-box;
}

.goods_v_1 {
  width: 40rpx;
  height: 40rpx;
  /* margin-left: 10rpx; */
}

.goods_v {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #999999;
  margin: 10rpx;
}

.header_view_sel {
  background: rgba(255, 115, 21, 0.2);
  border: 1px solid #ff7514;
  color: #ff7514;
  border-radius: 10rpx;
}

.header_view {
  background: rgba(242, 19, 55, 0.08);
  border: 1px solid #999999;
  color: #999999;
}

.huanxiang_header > view {
  width: 180rpx;
  height: 58rpx;
  border-radius: 29rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.huanxiang_header {
  display: flex;
  width: 100%;
  overflow-x: scroll;
}

/* 换箱 */

.yulanStyle > .shang_img {
  width: 540rpx;
  height: 460rpx;
  position: absolute;
  top: 30rpx;
  left: 28rpx;
  margin: 0 auto;
}
.yulanStyle > .img_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.yulanStyle > view:nth-of-type(1) {
  position: absolute;
  top: 54rpx;
  left: 45rpx;
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  background: rgba(1, 14, 14, 0.83);
  opacity: 0.83;
  border-radius: 29rpx;
  padding: 10rpx 30rpx;
}

.yulanStyle {
  font-size: 47rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  position: relative;
  width: 600rpx;
  height: 794rpx;

  .detail-title {
    position: absolute;
    top: 500rpx;
    left: 130rpx;
    width: 346rpx;
    height: 84rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 30rpx;

    font-size: 28rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
  }

  .detail-type {
    position: absolute;
    top: 618rpx;
    left: 50%;
    transform: translateX(-50%);

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #cccccc;

    text {
      color: #fff;
    }
  }

  .detail-price {
    position: absolute;
    top: 674rpx;
    left: 50%;
    transform: translateX(-50%);

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #cccccc;

    text {
      color: #fff;
    }
  }

  .close {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 70%);
    width: 50rpx;
    height: 50rpx;
  }
}
/* .jp_btn>image{
		width: 292rpx;
		height: 70rpx;
	}
	.jp_btn>view:nth-of-type(2) {
		background: #FF7514;
		border-radius: 10rpx;
	}

	.jp_btn>view:nth-of-type(1) {
		border: 2rpx solid #FF7514;
		border-radius: 10rpx;
		color: #FF7514;
	} */

.jp_btn > view {
  width: 206rpx;
  height: 84rpx;
  font-size: 43rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #ffffff;
}

.jp_btn {
  margin-top: 40rpx;
  display: flex;
  justify-content: space-evenly;
}
.dhbtmbox {
  width: 750rpx;
  height: 32rpx;
}
.list_img > .type-num {
  height: 40rpx;
  box-sizing: border-box;
  padding: 0 8rpx;
  width: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .type {
    font-size: 22rpx;
    font-family: zihun147hao-xingyuanhei;
    font-weight: 400;
    color: #fff;
  }

  .num {
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}

.list_img > image {
  width: 100%;
  height: 184rpx;
  border-radius: 10rpx;
}

.list_img {
  width: 184rpx;
  height: 184rpx;
  margin: 0 auto;
  /* border-radius: 10rpx; */
  position: relative;

  // border: 1px solid #c5fadc;
  /* box-shadow: 0px 0px 10rpx 0px #FF7514; */
}

.jp_list {
  font-size: 24rpx;
  width: 210rpx;
  margin-top: 20rpx;
  position: relative;
  padding: 10rpx;
  box-sizing: border-box;
}

.pop_gongxi {
  width: 750rpx;
  height: 197rpx;
  display: block;
  margin-bottom: 30rpx;
  /* position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: -212rpx; */
}

// .jp_title_1 > view:nth-child(3n-1) {
//   margin: 20rpx 30rpx 0 30rpx;
// }

.jp_title_1 {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin: auto;
  color: #ffffff;
  // padding-bottom: 15rpx;
  // box-sizing: border-box;
}

.jp_title {
  box-sizing: border-box;
  padding: 0rpx 50rpx;
  box-sizing: border-box;
  height: 100%;
  /* margin-top: 200rpx; */
}

.jp_name {
  /* font-family: 'zcq'; */
  font-size: 28rpx;
  color: #ffffff;
  /* text-shadow: rgba(150, 255, 254, 0.7) 0px 0px 10rpx; */
  position: absolute;
  top: 104rpx;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 13;
}

.jp_headimg > image {
  width: 114rpx;
  height: 114rpx;
  border-radius: 50%;
}

.jp_headimg {
  width: 114rpx;
  height: 114rpx;
  border-radius: 50%;
  border: 1px solid #ff7514;
  position: absolute;
  top: -26rpx;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 12;
}

.pop_jp {
  /* width: 750rpx;
		height: 942rpx;
		margin: auto;
		text-align: center; */
  // height: 854rpx;

  .jp_bg {
    padding-top: 20rpx;
    margin-top: 20rpx;
    padding-bottom: 20rpx;
    width: 750rpx;
    height: 650rpx;
    // padding-top: 363rpx;
    box-sizing: border-box;
    // background-position: 0 90rpx;
    // background-size: 100% calc(100% - 90rpx);
  }

  .suc-pop-hd {
    width: 346rpx;
    height: 94rpx;
    margin: 0 auto;
  }

  .shang-title {
    padding: 10rpx;
    text-align: center;

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}

.fangshi text {
  // color: #70ede8;
}

.fangshi > view > image {
  margin-right: 20rpx;
}

.fangshi image {
  width: 40rpx;
  height: 40rpx;
}

.fangshi {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  line-height: 60rpx;
  align-items: center;

  .fangshi-right {
    display: flex;
    align-items: center;

    font-size: 28rpx;
    color: #999;

    .icon {
      width: 10rpx;
      height: 18rpx;
      margin-right: 0;
      margin-left: 10rpx;
    }
  }
}

.zhifu {
  width: 206rpx;
  height: 84rpx;
  /* background: #FF7514;
		border-radius: 7rpx; */
  font-size: 36rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.order_title_btn {
  width: 690rpx;
  height: 98rpx;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
  font-size: 24rpx;
  box-sizing: border-box;
  margin-top: 50rpx;

  .total-price {
    font-size: 28rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
  }
}

.order_num text {
  font-size: 32rpx;
  // color: #70ede8;
}

.order_num > view:nth-of-type(2) {
  font-size: 24rpx;
}

.order_num {
  display: flex;
  justify-content: space-between;
  border-top: 1rpx solid #333333;
  margin-top: 20rpx;
  padding: 20rpx 0;
}

.order_pic > view > view:nth-of-type(3) {
  display: flex;
  justify-content: space-between;
  width: 410rpx;
}

.order_pic > view:nth-of-type(2) {
  margin-left: 20rpx;
  font-size: 24rpx;
  color: #ffffff;
  padding-top: 14rpx;
  box-sizing: border-box;
}

.order_pic_img > image {
  width: 168rpx;
  height: 168rpx;
  border-radius: 10rpx;
}

.order_pic_img {
  width: 188rpx;
  height: 188rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.order_pic {
  display: flex;
}

.order_title_con1 {
  width: 690rpx;
  background: rgba(34, 34, 34, 0.5);
  // border: 1px solid #ffffff;
  // box-shadow: 0px 0px 13rpx 0px rgba(15, 195, 197, 0.69);
  margin-top: 28rpx;
  padding: 20rpx 30rpx 10rpx;
  box-sizing: border-box;
}

.order_title > image {
  width: 26rpx;
  height: 26rpx;
  position: absolute;
  right: 14rpx;
  top: 10rpx;
}

.order_title {
  font-size: 36rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #ffffff;
  position: relative;
  text-align: center;
}

.order {
  width: 750rpx;
  height: 994rpx;
  background: #000;
  /* background: rgba(0, 0, 0, 0.9); */
  /* border-radius: 30rpx 30rpx 0px 0px;
		border-top: 5rpx solid #35ED85; */
  position: absolute;
  bottom: 0;
  padding: 30rpx 21rpx 50rpx;
  box-sizing: border-box;
  color: #ffffff;

  border-radius: 20rpx 20rpx 0rpx 0rpx;

  border-top: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #000, #000),
    linear-gradient(20deg, #ffffff, #a11aff, #85dfff, #ba39ff);
  // border-bottom: none;
}

.jilv_list > view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #f7f7f7;
}

.jilv_list image:nth-of-type(2) {
  width: 55rpx;
  height: 55rpx;
  border-radius: 5rpx;
  margin-right: 20rpx;
}

.jilv_list image:nth-of-type(1) {
  width: 55rpx;
  height: 55rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.jilv_list {
  width: 710rpx;
  height: 180rpx;
  /* border: 2rpx solid #F7F7F7; */
  margin: 22rpx auto;
  padding: 30rpx 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.jilv_title > view {
  /* padding: 4rpx 20rpx;
		border: 3rpx solid;
		border-radius: 10rpx; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 24rpx;
  flex-shrink: 0;
  color: #f7f7f7;
  /* width: 97rpx; */
  height: 64rpx;
  line-height: 64rpx;
  padding: 0 30rpx;
}

.jilv_title {
  font-size: 26rpx;
  color: #f7f7f7;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  width: 100%;
  margin: 20rpx auto;
  overflow-x: scroll;
}

button::after {
  border: none;
}

button {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  line-height: inherit;
  border-radius: 0;
}

.xuanfu image {
  width: 104rpx;
  height: 104rpx;
  margin-top: 20rpx;
}

.xuanfu {
  position: fixed;
  bottom: 275rpx;
  right: 20rpx;
  width: 104rpx;
  z-index: 21;
}

.shop_con {
  padding: 10rpx;
  box-sizing: border-box;
  line-height: 40rpx;
  /* background: #000000; */
  border-radius: 0 0 10rpx 10rpx;
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.6);
}

.qiangguang > image {
  width: 118rpx;
  height: 45rpx;
}

.qiangguang {
  width: 100%;
  height: 230rpx;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0rpx;
  left: 0rpx;
}
.item_num {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0rpx;
  left: 0rpx;
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 39rpx;
  box-sizing: border-box;
  padding-right: 6rpx;
}
.item_num > view:nth-of-type(2) {
  font-size: 20rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  /* font-style: italic; */
  color: #ffffff;
}

.item_num > view:nth-of-type(1) {
  /* background: linear-gradient(0deg, #1AC762 0%, #35ED85 100%); */
  border-radius: 0px 10rpx 0px 0px;
  font-size: 22rpx;
  font-weight: 400;
  color: #ffffff;
  font-family: zihun147hao-xingyuanhei;
  background: linear-gradient(0deg, #85dfff 0%, #ba39ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 14rpx;
  box-sizing: border-box;
}

.item_head > image {
  width: 100%;
  height: 210rpx;
  border-radius: 10rpx;
}

.item_head {
  width: 100%;
  height: 210rpx;
  position: relative;
}
.shop > view:nth-child(3n + 3) {
  margin-right: 0rpx;
}
.shop_item {
  width: 236rpx;
  margin-top: 10rpx;
  position: relative;
  box-sizing: border-box;
  color: #ffffff;
  // margin-right: 15rpx;
  // border: 3rpx solid #c5fadc;
  border-radius: 10rpx;
  padding: 12rpx;
}

.shop {
  width: 710rpx;
  margin: 0rpx auto;
  display: flex;
  flex-wrap: wrap;
  font-size: 24rpx;
}
.header_news_b > view {
  width: 436rpx;
  height: 80rpx;
  padding-left: 49rpx;
  box-sizing: border-box;
  color: #ddd;
}
.header_news_b text {
  font-size: 32rpx;
  color: #fff;
}

.header_news_b > image {
  width: 164rpx;
  height: 66rpx;
}

.header_news_b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  font-style: italic;
}

.header_news_c {
  padding: 9rpx 30rpx 20rpx;
  box-sizing: border-box;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  // width: 691rpx;

  // height: 67rpx;
  color: #fff;
  margin: 10rpx auto 20rpx;
  position: relative;

  &::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1rpx;
    background: linear-gradient(
      90deg,
      #ffffff 0%,
      #a11aff 35%,
      #85dfff 64%,
      #ba39ff 100%
    );
  }
}

.redu {
  /* width: 250rpx; */
  height: 46rpx;
  display: flex;
  align-items: center;
}

.redu > image {
  width: 46rpx;
  height: 46rpx;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.header_news_t_price > view:nth-of-type(1) {
  font-size: 34rpx;
  margin-top: 10rpx;
  text-shadow: 0px 3px 8px rgba(48, 251, 253, 0.32);
  font-family: YouSheBiaoTiHei;
}

.header_news_t_price {
  width: 200rpx;
  height: 100rpx;
  /* border: 1rpx solid red; */
  font-weight: 400;
  color: #ffffff;
  opacity: 0.87;
  margin-right: 30rpx;
  text-align: center;
  font-size: 24rpx;
}

.riqi {
  width: 120rpx;
  /* height: 80rpx; */
  /* border: 1rpx solid darkblue; */
  font-size: 20rpx;
  /* -webkit-text-stroke: 2rpx #1A1A1A; */
  /* text-stroke: 2rpx #1A1A1A; */
  font-family: zihun143hao;
  font-weight: 800;
  text-align: center;
}

.header_news_t image:nth-of-type(2) {
  width: 192rpx;
  height: 54rpx;
}

.header_news_t image:nth-of-type(1) {
  width: 168rpx;
  height: 54rpx;
}

.header_news_t {
  display: flex;
  /* justify-content: flex-end; */
  align-items: center;
  margin-top: 24rpx;
  width: 750rpx;
  height: 118rpx;
}

.header_news {
  width: 750rpx;
  /* height: 273rpx; */
  position: absolute;
  bottom: -15rpx;
}

.header_center > image:nth-of-type(3) {
  width: 153rpx;
  height: 74rpx;
  position: absolute;
  bottom: 300rpx;
  right: 0;
}

.header_center > image:nth-of-type(2) {
  width: 146rpx;
  height: 50rpx;
  position: absolute;
  bottom: 75rpx;
  right: 20rpx;
  z-index: 9;
}

.header_center > image:nth-of-type(1) {
  width: 146rpx;
  height: 50rpx;
  position: absolute;
  bottom: 75rpx;
  right: 195rpx;
  z-index: 9;
}

.header_center {
  /* position: relative; */
  /* margin: 0rpx auto; */
}

.header_title > view:nth-of-type(2) {
  width: 520rpx;
  text-align: center;
  /* margin: auto; */
}

.header_title > view:nth-of-type(1) {
  display: flex;
  align-items: center;
}

.header_title image {
  width: 48rpx;
  height: 48rpx;
}

.header_title {
  height: 70rpx;
  line-height: 70rpx;
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  box-sizing: border-box;
}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.head {
  position: fixed;
  top: 0;
  z-index: 20;
}

.header {
  width: 750rpx;
  height: 530rpx;
  /* background: #ffffff; */
  font-size: 32rpx;
  color: #ffffff;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 15;

  .info-btn {
    position: fixed;
    left: 30rpx;
    display: flex;
    align-items: center;
    z-index: 1;

    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 0rpx;
      box-shadow: 0 0 20rpx 10rpx #000;
      z-index: -1;
    }

    image {
      width: 12rpx;
      height: 24rpx;
    }

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  .like-btn {
    position: fixed;
    right: 30rpx;
    display: flex;
    align-items: center;
    z-index: 1;

    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 0rpx;
      box-shadow: 0 0 20rpx 10rpx #000;
      z-index: -1;
    }

    image {
      width: 24rpx;
      height: 21rpx;
      margin-right: 10rpx;
    }

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  .pic-bt {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(50%);
    width: 100%;
    height: 122rpx;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;

    .pic-bt-hd {
      display: flex;
      justify-content: center;

      .left,
      .center,
      .right {
        width: 33%;
        box-sizing: border-box;
      }

      .left {
        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        padding-left: 20rpx;
      }

      .center {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        text-shadow: 0 0 10rpx #000;
        text-align: center;

        text {
          font-size: 26rpx;
        }
      }

      .right {
        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        padding-right: 20rpx;
        text-align: right;

        text {
          font-size: 26rpx;
        }
      }
    }

    .pic-bt-ft {
      display: flex;
      justify-content: center;
      align-items: center;

      .prev,
      .next {
        display: flex;
        align-items: center;

        image {
          width: 10rpx;
          height: 17rpx;
          margin: 0 10rpx;
        }

        font-size: 22rpx;
        font-family: zihun152hao-jijiachaojihei;
        font-weight: 400;
        color: #ffffff;
      }

      .change-box {
        width: 180rpx;
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 20rpx;
      }
    }
  }
}

.content {
  padding-bottom: 250rpx;
  /* background: #FAFAFA; */
  padding-top: 450rpx;
}

.bar_box {
  width: 750rpx;
  height: 260rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.bar_box_1 {
  width: 204rpx;
  height: 96rpx;
  position: absolute;
  top: 36rpx;
  left: 29rpx;
}

.bar_box_2 {
  width: 190rpx;
  height: 68rpx;
  position: absolute;
  top: 26rpx;
  left: 279rpx;
  color: #ffffff;
  font-size: 20rpx;
  text-align: center;
  -webkit-text-stroke: 2rpx #30fbfd;
  text-stroke: 2rpx #30fbfd;
}

.bar_box_3 {
  width: 204rpx;
  height: 96rpx;
  position: absolute;
  top: 36rpx;
  right: 31rpx;
  color: #ffffff;
  font-size: 20rpx;
  text-align: center;
  -webkit-text-stroke: 2rpx #30fbfd;
  text-stroke: 2rpx #30fbfd;
}

.bar_box_4 {
  width: 138rpx;
  height: 110rpx;
  position: absolute;
  bottom: 46rpx;
  left: 307rpx;
  font-size: 64rpx;
  text-align: center;
  font-weight: bold;
  color: #fff;
}

.bar_box_5 {
  width: 266rpx;
  height: 95rpx;
  position: absolute;
  bottom: 0;
  left: 0;
}

.bar_box_6 {
  width: 265rpx;
  height: 95rpx;
  position: absolute;
  bottom: 0;
  right: 0;
}
.bar_box_7 {
  width: 316rpx;
  height: 51rpx;
  position: absolute;
  bottom: 0;
  left: 217rpx;
  font-size: 24rpx;
  color: #fff;
  text-align: center;
  padding-top: 15rpx;
  box-sizing: border-box;
}
.btns {
  width: 690rpx;
  height: 129rpx;
  position: absolute;
  bottom: 20rpx;
  right: 0rpx;
  left: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 32rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #ffffff;
  -webkit-text-stroke: 1rpx #000000;
}

.tab-list {
  display: flex;
  justify-content: space-around;
  padding: 10rpx 0 30rpx;

  .tab-list-item {
    position: relative;

    font-size: 28rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #939393;

    .arrow {
      position: absolute;
      width: 27rpx;
      height: 17rpx;
      left: 50%;
      bottom: -20rpx;
      transform: translateX(-50%);
    }

    &.active {
      color: #fff;
    }
  }
}

.log-tab {
  white-space: nowrap;

  .log-tab-item {
    display: inline-flex;
    align-items: center;
    height: 58rpx;
    padding: 0 30rpx;
    margin-right: 10rpx;

    font-size: 22rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;

    &:first-child {
      margin-left: 30rpx;
    }

    &:last-child {
      margin-right: 30rpx;
    }
  }
}

.log-list {
  padding: 1rpx 20rpx 40rpx;

  .log-list-item {
    display: flex;
    align-items: center;
    padding: 34rpx;
    margin-top: 4rpx;

    .log-l {
      width: 50%;
      display: flex;

      .avatar {
        width: 62rpx;
        height: 62rpx;
        border-radius: 50%;
        overflow: hidden;
      }

      .log-l-info {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        width: calc(100% - 62rpx);
        box-sizing: border-box;
        padding-left: 10rpx;

        .info-name {
          font-size: 26rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }

        .info-time {
          font-size: 22rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #dddddd;
        }
      }
    }

    .log-r {
      width: 50%;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      align-items: flex-end;

      .log-r-hd {
        font-size: 26rpx;
        font-family: zihun147hao-xingyuanhei;
        font-weight: 400;
        color: #fff;
      }

      .log-r-ft {
        display: flex;
        align-items: center;

        .ft-pic {
          width: 40rpx;
          height: 40rpx;
        }

        .ft-title {
          max-width: 200rpx;
          margin-left: 10rpx;
        }

        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}

.ft-fixed {
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
  width: 100vw;

  .ft-fixed-hd {
    display: flex;
    justify-content: space-around;

    .btn {
      width: 210rpx;
      height: 86rpx;
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      padding-top: 12rpx;

      font-size: 36rpx;
      font-family: zihun147hao-xingyuanhei;
      font-weight: 400;
      color: #ffffff;

      &.center {
        height: 75rpx;
      }
    }
  }

  .ft-fixed-ft {
    position: relative;
    height: 150rpx;

    .change-box,
    .lock-btn,
    .all-btn {
      position: absolute;
      display: flex;
      justify-content: center;
      // align-items: center;
      box-sizing: border-box;
      padding-top: 34rpx;

      font-size: 36rpx;
      font-family: zihun152hao-jijiachaojihei;
      font-weight: 400;
      color: #eeeeee;
      -webkit-text-stroke: 1rpx #000000;
    }

    .change-box {
      left: 0;
      top: 30rpx;
      width: 305rpx;
      height: 118rpx;
      z-index: 1;
    }

    .lock-btn {
      width: 292rpx;
      height: 136rpx;
      left: 50%;
      top: 0;
      padding: 0;
      transform: translateX(-50%);
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      padding-bottom: 10rpx;
    }

    .all-btn {
      right: 0;
      top: 30rpx;
      width: 305rpx;
      height: 118rpx;
      z-index: 1;
    }
  }
}
</style>
