wallet/src/pages/trade/index.vue

<template>
  <view class="home">
    <view class="content">
      <Header @update:address="handleAddressUpdate"></Header>
      <view class="home-img">
        <image src="@/static/image/trade/jinsai-icon.png" mode="widthFix" />
      </view>
      <view class="home-btn-box">
        <view class="trade-num">奖池数量</view>
        <view class="image-num">
          <image src="@/static/image/trade/title-bg.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="home-code">
        <view class="trade-border-box"> STT{{ (Number(gameList[2]?.prev_bonus) || 0).toFixed(6) }}</view>
        <view class="trade-border-num"
          >≈￥{{ ((Number(gameList[2]?.prev_bonus) || 0) * 7.2).toFixed(2) }}</view
        >
      </view>
      <view class="trade-img-box">
        <image src="@/static/image/trade/money-box.png" mode="aspectFit" />
      </view>
      <view class="card-item" style="width: 100%;">
        <view class="trade-process" :class="bgClass">
          <view
            :class="
              gameCheck == index
                ? 'trde-process-item-active'
                : 'trde-process-item'
            "
            v-for="(item, index) in gameList"
            :key="index"
            @click="selectGame(index, item)"
          >
            <view class="trade-game-name">{{ item?.title || '暂无赛程'}}</view>
            <view class="trade-game-time" v-if="item"
              >{{ dayjs(item?.date).format("MM/DD") }}-{{
                dayjs(item?.end_date).format("MM/DD")
              }}</view
            >
          </view>
        </view>
        <view class="trade-time-box" v-if="gameDetail">
          <view class="time-title">
            距离 <text>{{ gameDetail.title }}赛程 竞赛结束 </text>还有
          </view>
          <up-count-down
            :time="
              dayjs(gameDetail.end_date).valueOf() - dayjs(new Date()).valueOf()
            "
            format="DD:HH:mm:ss"
            autoStart
            millisecond
            @change="onChange"
          >
            <view class="time-box-index">
              <view class="time__item"
                ><view class="time-box">{{ timeData.days }}</view> 天</view
              >
              <view class="time__item">
                <view class="time-box">{{
                  timeData.hours > 10 ? timeData.hours : "0" + timeData.hours
                }}</view>
                时</view
              >
              <view class="time__item"
                ><view class="time-box">
                  {{ timeData.minutes }}
                </view>
                分</view
              >
              <view class="time__item"
                ><view class="time-box">{{ timeData.seconds }}</view
                >秒</view
              >
            </view>
          </up-count-down>
          <view
            class="start-btn"
            @click="changeSign"
            :style="{ color: gameCheck == 2 || gameDetail.is_enroll? '#fff' : '' }">{{ gameCheck == 2 && !gameDetail.is_enroll ? "报名" : (gameDetail.is_enroll ? "已报名" : "未报名") }}</view
          >
          <view class="num-txt" v-if="gameCheck != 2"
            >奖池数量：<text>STT{{ (Number(gameDetail.bonus) || 0).toFixed(6) }}</text>
          </view>
          <view class="num-txt-small" v-if="gameCheck != 2"
            >≈￥{{ ((Number(gameDetail.bonus) || 0) * 7.2).toFixed(2) }}</view
          >
        </view>
      </view>
      <view class="game-play-name">赛程名次</view>
      <view class="game-list">
        <view class="game-list-item" v-for="(item, index) in gameRankList" :key="index">
          <view class="game-item-left">
            <view class="game-order-index">
              <image
                src="@/static/image/trade/one.png"
                v-if="index == 0"
                mode="scaleToFill"
              />
              <image
                src="@/static/image/trade/two.png"
                v-if="index == 1"
                mode="scaleToFill"
              />
              <image
                src="@/static/image/trade/three.png"
                v-if="index == 2"
                mode="scaleToFill"
              />
              <text v-if="index != 0 && index != 1 && index != 2">{{
                index + 1
              }}</text>
            </view>
            <view class="game-order-num">
              <view class="game-num-txt">
                <view>{{`${item.address.slice(0, 4)}...${item.address.slice(-4)}` }}</view>
                <view class="game-num-num">{{ gameDetail?.title }}</view>
              </view>
              <view class="game-num-txt" v-if="item.is_self && item.is_prize && gameCheck == 0">
                <view class="game-item-btn" @click="awardFun(item)">{{item.is_receive?'已领取':'领取'}}</view>
              </view>
              <view class="game-num-txt" v-else>
                <view>排名赢局</view>
                <view class="game-num-num">{{ item.score }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="fix-box">
      <view class="fix-item" @click="openGamePopup(1)">赛程规则</view>
      <view class="fix-item"  @click="openGamePopup(2)">赛程名次</view>
    </view>
    <!-- 规则和名次 -->
    <up-popup
      :show="showGameMsg"
      :round="10"
      mode="center"
      :closeOnClickOverlay="true"
      @close="showGameMsg = false"
    >
      <view class="show-game-msg">
        <image
          class="close-img"
          src="@/static/image/home/alert-pay-close.png"
          mode="scaleToFill"
          @click="showGameMsg = false"
        />
        <view class="show-game-title" v-if="showType==2">
          <text>{{ gameDetail.title }}赛程</text>竞赛消息
        </view>
        <view class="show-game-title" v-if="showType==1">
          竞赛规则
        </view>
        <!-- 名次 -->
        <view class="show-game-content" v-if="showType==2">
          <view class="game-msg">1:赛程开始时间：{{ gameDetail.date }} 00:00:00</view>
          <view class="game-msg"
            >2:赛程结束时间：{{ gameDetail.end_date }} 23:59:59</view
          >
          <view class="game-msg"
            >3:参与场次：<text>0场；</text>输：<text>0局；</text>赢：<text
              >0局；</text
            ></view
          >
          <view class="game-msg">4:排名赢局：<text>0局</text></view>
          <view class="desc-title">注意：</view>
          <view class="dest-item">①: 当期赛程信息可能存在延迟,仅供参考;</view>
          <view class="dest-item"
            >②：如当期赛程奖励未在有效期内领取,将视为放弃；</view
          >
          <view class="dest-item"
            >③：赢局次数小于等于0的地址参与排名，但没有奖励分配；</view
          >
          <view class="dest-item" style="color: red"
            >④：每场赛程中相同地址频繁对战,场次将不作为有效局数；
          </view>
          <view class="dest-item" style="color: red"
            >⑤：对于恶意刷单地址,平台将永久封禁账号；</view
          >
        </view>
        <!-- 规则 -->
        <view class="show-game-content" v-if="showType==1">
          <view class="game-msg">1: 赛程报名截止时间:每期赛程开始前</view>
          <view class="game-msg"
            >2: 赛程奖励结算时间:每期赛程结束后(约需要1-30分钟)</view
          >
          <view class="game-msg"
            >3: 赛程奖励领取时间:每期赛程结束结算完成后</view
          >
          <view class="game-msg"
            >4:赛程奖励失效时间:当期赛程结束后,下期赛程结束前</view
          >
          <view class="game-msg"
            >5:赛程奖励规则: 当期奖池金额</view
          >
          <view class="dest-item" style="color: red;font-size: 24rpx;" v-for="(item,i) in gameDetail?.rules" :key="i">
            <text>{{ i == 0?'①':i == 1?'②':'③' }}</text>:{{item.rule}}
          </view>
          <view class="desc-title">注意：</view>
          <view class="dest-item">①: 如当期赛程奖励未在有效期内领取，将视为放弃；</view>
          <view class="dest-item" 
            >②：赢局次数小于等于0的地址参与排名，但没有奖励分配；</view
          >
          <view class="dest-item" style="color:red;"
            >③：每场赛程中相同地址频繁对战,场次将不作为有效局数;</view
          >
          <view class="dest-item" style="color:red;"
            >④：对于恶意刷单地址,平台将永久封禁账号；</view
          >
        </view>
        <view class="show-game-bottom">
          <view class="show-game-btn" @click="showGameMsg = false">关闭</view>
        </view>
      </view>
    </up-popup>
    <!-- 报名 -->
    <up-popup
      :show="showGameBm"
      :round="10"
      mode="center"
      :closeOnClickOverlay="true"
      @close="showGameBm = false"
    >
      <view class="show-game-msg" style="height: 40vh">
        <image
          class="close-img"
          src="@/static/image/home/alert-pay-close.png"
          mode="scaleToFill"
          @click="showGameBm = false"
        />
        <view class="show-game-title"> <text>赛程</text>报名 </view>
        <view class="show-game-content">
          <view class="desc-title" style="color: red">报名方式①：</view>
          <view class="game-msg" style="font-weight: 400"
            >消耗 <text style="color: #d4ac27">{{entry_fee}} STT</text> 等值 WGT：</view
          >
          <view class="game-msg"
            >≈<text>{{wgt_price}}</text>WGT<text
              style="color: #d4ac27; font-size: 20rpx"
              >(钱包扣除)</text
            ></view
          >
          <view class="dest-item" style="color: #aaa">(WGT钱包余额{{ (Number(WGTbalance) || 0).toFixed(6) }})</view>
          <view class="desc-title" style="color: red">报名方式②：</view>
          <view class="game-msg"
            >消耗{{entry_fee}} STT
            <text style="color: #d4ac27; font-size: 20rpx"
              >(钱包扣除)</text
            ></view
          >
          <view class="dest-item" style="color: #aaa">(STT钱包余额{{ (Number(STTbalance) || 0).toFixed(6) }})</view>
        </view>
        <view class="show-game-bottom">
          <view class="show-game-btn-wgt" @click="changeWGT">WGT报名</view>
          <view class="show-game-btn-stt" @click="changeSTT">STT报名</view>
        </view>
      </view>
    </up-popup>
  </view>
</template>
  
  <script setup>
import { ref, onMounted,computed, reactive } from "vue";
import Header from "@/components/Header";
import { sendSingleReward,WGTForToken,STTForToken,getBalance } from "@/utils/web.js";
import { matchList, matchRank, matchInfo,verifyEnroll,matchEnroll,userPrize,claimPrize } from "@/api/game";
import dayjs from "dayjs";
const timeData = ref({});
const onChange = (e) => {
  timeData.value = e;
};
const walletAddress = ref('');
const gameList = ref([]);
const gameRankList = ref([]);
const gameDetail = ref({});
const gameCheck = ref(1);//选中tab
const showGameBm = ref(false);
const WGTbalance = ref(0);
const STTbalance = ref(0);
const entry_fee = ref(0);
const wgt_price = ref(0);
const privateKey = ref('');
// const privateKey = "0x4553077da5d773773dad0511c6e5d33142ae2c1bd05a3a8a4a7becbc0d23d9b5";//H5

const bgClass = computed(() => {
  if (gameCheck.value === 0) return 'bg1';
  if (gameCheck.value === 1) return 'bg2';
  return 'bg3';
});
const handleAddressUpdate = (addr) => {
  privateKey.value = window.android.getPrivateKey();//app
  walletAddress.value = addr;
  getGameMatchList();
  getnum(privateKey.value);
};
// 获取游戏赛事列表(三个tab)
const getGameMatchList = async (type = true) => {
  let params = {
    dapp_id: 15,
    address:walletAddress.value
  };
  let res = await matchList(params);
  if (res.status == 200) {
    gameList.value = res.data;
    if(type){
      gameDetail.value = res.data[1];
      getGameRank();
    }else{
      gameDetail.value = res.data[2];
    }
  }
};
// 查询游戏赛事排名
const getGameRank = async () => {
  let params = {
    dapp_id: 15,
    address:walletAddress.value
  };
  let res = await matchRank(params);
  if (res.status == 200) {
    gameRankList.value = res.data;
  }
};
// 切换tab
const selectGame = (value, item) => {
  gameCheck.value = value;
  gameDetail.value = item;
  getGameRank();
};
// 游戏规则弹出框
const showGameMsg = ref(false);
const showType=ref(0);
const openGamePopup = (value) => {
  showGameMsg.value = true;
  showType.value=value;
};
// 获取余额
const getnum = async (privateKey) =>{
  try {
    WGTbalance.value = await getBalance(privateKey,'wgt');
    STTbalance.value = await getBalance(privateKey,'stt');
  }catch(error){
    console.log(error)
  }
}
//校验报名
const changeSign = async () =>{
  if (gameCheck.value != 2 || gameDetail.value?.is_enroll) return;
  let res = await verifyEnroll({dapp_id:15,match_id:gameDetail.value?.id,address:walletAddress.value});
  if (res.status == 200) {
    entry_fee.value = Number(res.data.entry_fee).toFixed(2);
    wgt_price.value = Number(res.data.format?.wgt_price).toFixed(4);
    showGameBm.value = true;
  }
}
// 报名
const getMatchEnroll = async () =>{
  let res = await matchEnroll({dapp_id:15,match_id:gameList.value[gameCheck.value]?.id,address:walletAddress.value});
  if (res.status == 200) {
    uni.hideLoading()
    uni.showToast({
      title: '报名成功',
      icon: 'none',
      duration: 1000
    })
    getGameMatchList(false);
  }else{
    uni.hideLoading()
  }
}

const changeWGT = async () => {
  await handleTokenSignUp(WGTForToken, wgt_price.value);
};

const changeSTT = async () => {
  await handleTokenSignUp(STTForToken, entry_fee.value);
};

const handleTokenSignUp = async (signUpFn, price) => {
  showGameBm.value = false;
  uni.showLoading({
    title: '报名中...',
    mask: true
  });
  try {
    const result = await signUpFn(privateKey.value, price);
    if (result.status === "success") {
      await getMatchEnroll();
    } else {
      uni.hideLoading();
      uni.showToast({
        title: result.message || "报名失败",
        icon: 'none',
        duration: 5000
      });
    }
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: error.message || "报名失败",
      icon: 'none',
      duration: 5000
    });
  }
};

//查询用户奖金信息
const awardFun = async (item) => {
  if(item.is_receive) return;
  let res = await userPrize({dapp_id:15,match_id:gameDetail.value?.id,address:walletAddress.value});
  if (res.status == 200) {
    if(!res.data.prize_money){
      uni.showToast({
        title: '正在结算中！',
        icon: 'none',
        duration: 1000
      })
      return;
    };
    getsendSingleReward(res.data.prize_money)
  }
};
// 领取用户奖金
const getClaimPrize = async () =>{
  let res = await claimPrize({dapp_id:15,match_id:gameDetail.value?.id,address:walletAddress.value});
  if (res.status == 200) {
    uni.hideLoading();
    uni.showToast({
      title: '领取成功',
      icon: 'none',
      duration: 1000
    })
    getGameRank()
  }
}

const getsendSingleReward = async (prize_money) =>{
  uni.showLoading({
    title: '领取中...',
    mask: true
  });
  try {
    const result = await sendSingleReward(privateKey.value,prize_money);
    if (result.status === "success") {
      await getClaimPrize();
    }else{
      uni.hideLoading();
      uni.showToast({
        title: result.message || "领取失败",
        icon: 'none',
        duration: 5000
      });
    }
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: error.message || "领取失败",
      icon: 'none',
      duration: 5000
    });
  }
}

// onMounted(async () => {
  
// });
</script>
  
  <style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow-y: auto;
  .fix-box {
    position: fixed;
    right: 0;
    z-index: 99;
    top: 258rpx;
    .fix-item {
      border-radius: 40rpx 0 0 40rpx;
      background-color: #734210;
      color: #fff;
      text-align: center;
      padding: 6rpx 24rpx;
      box-sizing: border-box;
      font-size: 26rpx;
      margin-bottom: 12rpx;
    }
  }
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100%;
  padding: 32rpx;
  // padding-top: 116rpx;
  padding-top: 168rpx;
  box-sizing: border-box;
  background-image: url("@/static/image/home/page-bg.jpg");
  // background: url('../../static/image/home/page-bg.jpg');
  background-size: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  .home-img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 154rpx;
      height: 154rpx;
    }
  }
  .home-btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    .trade-num {
      font-size: 32rpx;
      text-align: center;
      color: #d4ac27;
      background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fffbe1),
        to(#d4ac27)
      );
      background: linear-gradient(180deg, #fffbe1 0, #d4ac27);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 700;
    }
    .image-num {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 208rpx;
        height: 40rpx;
      }
    }
  }
  .home-code {
    margin: 24rpx 0;
    width: 100%;
    .trade-border-box {
      width: 520rpx;
      height: 100rpx;
      margin: auto;
      background-image: url("@/static/image/trade/border-jinsai.png");
      background-size: 100% 100%;
      background-position: center center;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36rpx;
      color: #fff;
    }
    .trade-border-num {
      text-align: center;
      color: #fff;
      font-size: 32rpx;
    }
  }
  .trade-img-box {
    width: 100%;
    height: 384rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .bg1{
    background-image: url("@/static/image/trade/bg1.png");
  }
  .bg2{
    background-image: url("@/static/image/trade/bg2.png");
  }
  .bg3{
    background-image: url("@/static/image/trade/bg3.png");
  }
  .trade-process {
    height: 131rpx;
    width: 100%;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;

    // .trde-process-item {
    //   width: 100%;
    //   height: 100%;
    //   color: #4C3F2E;
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: center;
    //   align-items: center;
    //   text-align: center;
    //   .trade-game-name {
    //     font-size: 28rpx;
    //     font-weight: 600;
    //   }
    //   .trade-game-time {
    //     font-size: 24rpx;
    //     margin-top: 12rpx;
    //   }
    // }
    .trde-process-item {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      align-items: center;
      color: #9c9c9c;
      overflow: hidden;
      padding-left: 36rpx;
      box-sizing: border-box;
      .trade-game-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        font-size: 28rpx;
        font-weight: 600;
      }
      .trade-game-time {
        font-size: 24rpx;
        margin-top: 12rpx;
      }
    }
    .trde-process-item-active {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      align-items: center;
      color: #493D2A;
      overflow: hidden;
      padding-left: 36rpx;
      box-sizing: border-box;
      .trade-game-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        font-size: 28rpx;
        font-weight: 600;
      }
      .trade-game-time {
        font-size: 24rpx;
        margin-top: 12rpx;
      }
    }
  }
  .trade-time-box {
    margin: 24rpx 0;
    font-size: 28rpx;
    color: #a29481;
    background: #53473a;
    // background: #6E573A;
    border-radius: 30rpx;
    width: 100%;
    padding: 24rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .time-title {
      text {
        color: rgb(255, 214, 0);
        font-weight: 600;
      }
    }
    .time-box-index {
      margin-top: 13rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .time__item {
        display: flex;
        justify-content: center;
        align-items: center;
        .time-box {
          width: 70rpx;
          border-radius: 4rpx;
          height: 56rpx;
          background-color: #6b5d4b;
          color: #f3cf9b;
          margin: 0 10rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .start-btn {
      height: 84rpx;
      width: 190rpx;
      background-image: url("@/static/image/trade/weibaoming-bg.png");
      background-position: center center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 12rpx 0;
    }
    .num-txt {
      text {
        color: rgb(255, 214, 0);
        font-weight: 600;
      }
    }
    .num-txt-small {
      color: #fff;
      font-size: 22rpx;
    }
  }
  .game-play-name {
    width: 342rpx;
    height: 64rpx;
    margin-top: 24rpx;
    background-image: url("@/static/image/trade/trade-title-bg.png");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f5b65f;
    font-size: 26rpx;
    font-weight: 700;
  }
  .game-list {
    width: 100%;
    .game-list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 0;
      box-sizing: border-box;
      border-bottom: 2rpx solid #3b3630;
      .game-item-left {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        .game-order-index {
          flex-shrink: 0;
          width: 64rpx;
          height: 64rpx;
          margin-right: 24rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 36rpx;
          color: #f2ce9a;
          font-weight: 700;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .game-order-num {
          flex: 1;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .game-num-txt {
            font-size: 28rpx;
            color: #f2ce9a;
            font-weight: 700;
          }
          .game-num-num {
            margin-top: 10rpx;
            font-size: 28rpx;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
      .game-item-btn {
        width: 178rpx;
        height: 54rpx;
        background: url("@/static/image/trade/lingqu-btn-bg.png") 50% no-repeat;
        background-size: 100% 100%;
        display: block;
        color: #f7dbb1;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.show-game-msg {
  background: #000;
  border-radius: 25rpx;
  padding: 30rpx;
  box-sizing: border-box;
  width: 80vw;
  height: 60vh;
  display: flex;
  flex-direction: column;
  position: relative;
  .close-img {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: 0;
    top: 0;
  }
  .show-game-title {
    flex-shrink: 0;
    font-size: 32rpx;
    font-weight: 700;
    margin-bottom: 35rpx;
    text-align: center;
    color: #fff;
    text {
      color: rgb(255, 214, 0);
      margin-right: 10rpx;
    }
  }
  .show-game-content {
    padding-bottom: 24rpx;
    box-sizing: border-box;
    overflow-y: auto;
    flex: 1;
    font-size: 28rpx;
    font-weight: 700;
    color: #fff;
    .game-msg {
      color: #f1dc00;
      font-size: 26rpx;
      margin-bottom: 6rpx;
      text {
        color: #fff;
        font-weight: 600;
      }
    }
    .desc-title {
      padding: 12rpx 0;
      box-sizing: border-box;
    }
    .dest-item {
      font-weight: 400;
      margin-bottom: 6rpx;
    }
  }
  .show-game-bottom {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24rpx;
    .show-game-btn {
      width: 100%;
      background: linear-gradient(90deg, rgba(0, 179, 170, 0.7) 0, #00b3aa);
      color: #fff;
      height: 80rpx;
      border-radius: 8rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .show-game-btn-wgt {
      width: 100%;
      background: linear-gradient(90deg, #ef602c83 0, #ef612c);
      color: #fff;
      height: 80rpx;
      border-radius: 8rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .show-game-btn-stt {
      width: 100%;
      background: linear-gradient(90deg, #0190c470 0, #0191c4);
      color: #fff;
      height: 80rpx;
      border-radius: 8rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      // EF612C
    }
  }
}
::v-deep .u-popup__content {
  background: none !important;
}
</style>