<template>
  <div>
    <!-- <swiper></swiper> -->
    <div class="home">
      <div class="header_top">
        <handleback class="back left"></handleback>
        <div>{{ boxDetial.boxName || "" }}</div>
        <div class="speak space_between">
          <div
            class="drawV2 center btn_click"
            :class="animate ? '' : 'active_dV2'"
            @click="
              handledraw();
              playAudio();
            "
          >
            <svg
              t="1708582734439"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3632"
            >
              <path
                d="M395.765333 586.570667h-171.733333c-22.421333 0-37.888-22.442667-29.909333-43.381334L364.768 95.274667A32 32 0 0 1 394.666667 74.666667h287.957333c22.72 0 38.208 23.018667 29.632 44.064l-99.36 243.882666h187.050667c27.509333 0 42.186667 32.426667 24.042666 53.098667l-458.602666 522.56c-22.293333 25.408-63.626667 3.392-54.976-29.28l85.354666-322.421333zM416.714667 138.666667L270.453333 522.581333h166.869334a32 32 0 0 1 30.933333 40.181334l-61.130667 230.954666 322.176-367.114666H565.312c-22.72 0-38.208-23.018667-29.632-44.064l99.36-243.882667H416.714667z"
                fill="#727477"
                p-id="3633"
              />
            </svg>
          </div>
          <!-- <audio src="" id="audio" ref="audio"></audio> -->

          <div
            class="voiceV2 center btn_click"
            :class="voice ? '' : 'active_dV2'"
            @click="
              handlevoice();
              playAudio();
            "
          >
            <svg
              t="1708582870392"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3952"
            >
              <path
                d="M703.932266 193.305017l226.648416-107.435829a43.357257 43.357257 0 0 0-37.136528-78.347957l-251.430184 119.183687a43.350032 43.350032 0 0 0-24.781768 39.173978v324.229338a199.821971 199.821971 0 0 0-114.285134-35.792676c-110.824356 0-200.992422 90.160841-200.992422 200.992422 0 110.824356 90.160841 200.985197 200.992422 200.985197 110.824356 0 200.985197-90.160841 200.985198-200.985197V193.305017z m-200.992423 576.295322c-63.023721 0-114.292359-51.268638-114.292358-114.285134s51.268638-114.285134 114.292358-114.285134S617.232202 592.291484 617.232202 655.30798s-51.268638 114.292359-114.292359 114.292359zM319.590884 479.480251c16.473012-7.138305 24.037593-26.284569 16.892062-42.757581s-26.284569-24.044818-42.757581-16.892063c-44.657758 19.363014-79.106583 54.95339-96.988471 100.232499-17.889113 45.279108-17.072688 94.806519 2.297552 139.464277a32.526974 32.526974 0 0 0 42.764806 16.899287 32.512524 32.512524 0 0 0 16.892062-42.764806 116.467085 116.467085 0 0 1-1.473901-89.705666 116.365935 116.365935 0 0 1 62.373471-64.475947zM214.192507 374.544274a32.512524 32.512524 0 0 0-25.872744-59.656868C50.416087 374.703224-13.127835 535.560742 46.673534 673.471643a32.526974 32.526974 0 0 0 42.764807 16.899288 32.512524 32.512524 0 0 0 16.892062-42.764807c-45.539208-105.015452 2.846652-227.508192 107.862104-273.06185zM832.46511 663.739561a32.512524 32.512524 0 0 0-61.441445 21.313766c21.183716 61.065745-11.263783 127.976519-72.322303 149.167459a32.512524 32.512524 0 1 0 21.313765 61.426995c94.929345-32.938799 145.374331-136.97165 112.449983-231.90822zM981.032894 670.357666a32.526974 32.526974 0 0 0-61.441445 21.313766c18.178113 52.381288 14.861836 108.714655-9.334707 158.610541s-66.368899 87.386439-118.757412 105.550102a32.512524 32.512524 0 1 0 21.313765 61.441445c68.7965-23.864192 124.183391-73.095379 155.95174-138.633401 31.768348-65.516348 36.125026-139.485952 12.268059-208.282453z"
                fill="#727477"
                p-id="3953"
              />
            </svg>
          </div>
        </div>
      </div>
      <div class="box_top">
        <div class="box_list">
          <div class="box_list_i">
            <boxicon
              class="box_list_i_i animate__animated animate__flipInX"
              v-if="data.num <= 0"
            ></boxicon>
            <div class="cartoon animate__animated animate__flipInX" v-else>
              <!-- <img src="@/assets/moba.png" alt width="100%" height="100%" /> -->
            </div>
          </div>
          <div class="box_list_i">
            <boxicon
              class="box_list_i_i animate__animated animate__flipInX"
              v-if="data.num <= 1"
            ></boxicon>
            <div class="cartoon animate__animated animate__flipInX" v-else>
              <!-- <img src="@/assets/moba.png" alt width="100%" height="100%" /> -->
            </div>
          </div>
          <div class="box_list_i">
            <boxicon
              class="box_list_i_i animate__animated animate__flipInX"
              v-if="data.num <= 2"
            ></boxicon>
            <div class="cartoon animate__animated animate__flipInX" v-else>
              <!-- <img src="@/assets/moba.png" alt width="100%" height="100%" /> -->
            </div>
          </div>
          <div class="box_list_i">
            <boxicon
              class="box_list_i_i animate__animated animate__flipInX"
              v-if="data.num <= 3"
            ></boxicon>
            <div class="cartoon animate__animated animate__flipInX" v-else>
              <!-- <img src="@/assets/moba.png" alt width="100%" height="100%" /> -->
            </div>
          </div>
          <div class="box_list_i">
            <boxicon
              class="box_list_i_i animate__animated animate__flipInX"
              v-if="data.num <= 4"
            ></boxicon>
            <div class="cartoon animate__animated animate__flipInX" v-else>
              <!-- <img src="@/assets/moba.png" alt width="100%" height="100%" /> -->
            </div>
          </div>
        </div>
        <!-- <div class="box_switch">
          <div>
            音乐
            <el-switch v-model="voice" class="yy"></el-switch>
          </div>
          <div>
            动画
            <el-switch v-model="animate" class="dh"></el-switch>
          </div>
        </div>-->
        <div class="box_number">
          <div
            class="btn_click btn"
            v-for="item in 5"
            :key="item"
            :class="data.num == item ? 'active_n' : ''"
            @click="
              handleChange(item);
              playAudio();
            "
          >
            <img :src="getNum(item)" alt="" />
          </div>
          <!-- <div ref="slider" class="slider" :style="{ left: left + 'px' }"></div> -->
        </div>
        <div class="box_const">
          <money class="money"></money>
          {{ total }}
        </div>
        <div
          class="btn_click box_open"
          @click="
            handleOpen();
            playAudio();
          "
        >
          <div></div>
        </div>
      </div>
      <!-- <div class="cartoon_bg" v-if="isopen"> -->
      <div :class="isopen ? 'cartoon_bg' : 'cartoon_bg close'">
        <!-- <div class="cartoon_colum"> -->
        <div :class="isopen ? 'cartoon_colum active' : 'cartoon_colum'">
          <div class="cartoon_list">
            <div
              v-if="data.num >= 1"
              :class="isanimate == true ? 'cartoon_list_animate' : ''"
            >
              <div
                class="cartoon_list_w"
                v-for="(item, index) in weaponList1"
                :key="index"
                :style="{ 'background-image': `url(${item.levelImg})` }"
              >
                <div style class="cartoon_list_w_d">
                  <img
                    class="cartoon_d"
                    :src="item.imageUrl | fullPath"
                    width="100%"
                    height="100%"
                  />
                </div>
              </div>
            </div>
            <div
              v-if="data.num >= 2"
              :class="isanimate == true ? 'cartoon_list_animate1' : ''"
            >
              <div
                class="cartoon_list_w"
                v-for="(item, index) in weaponList2"
                :key="index"
                :style="{ 'background-image': `url(${item.levelImg})` }"
              >
                <div class="cartoon_list_w_d">
                  <img
                    class="cartoon_d"
                    :src="item.imageUrl | fullPath"
                    width="100%"
                    height="100%"
                  />
                </div>
              </div>
            </div>
            <div
              v-if="data.num >= 3"
              :class="isanimate == true ? 'cartoon_list_animate2' : ''"
            >
              <div
                class="cartoon_list_w"
                v-for="(item, index) in weaponList3"
                :key="index"
                :style="{ 'background-image': `url(${item.levelImg})` }"
              >
                <div class="cartoon_list_w_d">
                  <img
                    class="cartoon_d"
                    :src="item.imageUrl | fullPath"
                    width="100%"
                    height="100%"
                  />
                </div>
              </div>
            </div>
            <div
              v-if="data.num >= 4"
              :class="isanimate == true ? 'cartoon_list_animate3' : ''"
            >
              <div
                class="cartoon_list_w"
                v-for="(item, index) in weaponList4"
                :key="index"
                :style="{ 'background-image': `url(${item.levelImg})` }"
              >
                <div class="cartoon_list_w_d">
                  <img
                    class="cartoon_d"
                    :src="item.imageUrl | fullPath"
                    width="100%"
                    height="100%"
                  />
                </div>
              </div>
            </div>
            <div
              v-if="data.num >= 5"
              :class="isanimate == true ? 'cartoon_list_animate4' : ''"
            >
              <div
                class="cartoon_list_w"
                v-for="(item, index) in weaponList5"
                :key="index"
                :style="{ 'background-image': `url(${item.levelImg})` }"
              >
                <div class="cartoon_list_w_d">
                  <img
                    class="cartoon_d"
                    :src="item.imageUrl | fullPath"
                    width="100%"
                    height="100%"
                  />
                </div>
              </div>
            </div>
          </div>
          <!-- 横行 -->
          <div class="hengxianl"></div>

          <div class="heng_xian"></div>
          <div class="hengxianr"></div>
        </div>
      </div>
      <!-- 掉落 -->
      <div class="result animate__animated animate__fadeInDown" v-if="isResult">
        <div class="lvbu"></div>
        <div class="result_title">恭喜获得</div>
        <div class="result_center" :class="data.num == 4 ? 'p20' : ''">
          <div
            v-for="(item, index) in resultList"
            :key="index"
            class="resut_gun"
            :style="{ 'background-image': `url(${item.levelImg})` }"
          >
            <div class="gun_title">
              <div>{{ item.name }}</div>
            </div>
            <div class="gun_img">
              <img
                :src="item.imageUrl | fullPath"
                alt
                width="100%"
                height="100%"
              />
            </div>
            <div class="gun_name textover-f" style="margin-top: 7px">
              {{ item.itemName }}
            </div>
            <div class="gun_money money-money" style="margin-top: 8px">
              <money class="money" style="width: 13px; height: 13px"></money>
              {{ item.usePrice }}
            </div>
            <div class="button">
              <div
                style="color: #3a97e4; text-align: center; width: 100%"
                @click="
                  handleD(item.id, index);
                  playAudio();
                "
              >
                分解物品
              </div>
            </div>
          </div>
        </div>
        <div class="result_money">
          <money class="money"></money>
          {{ moneyAll }}
        </div>
        <div class="result_btn">
          <div
            class="result_btn_A btn_click"
            @click="
              handleBag();
              playAudio();
            "
          >
            放入背包
          </div>
          <div
            class="result_btn_B btn_click"
            @click="
              handleDecompose();
              playAudio();
            "
          >
            全部分解
          </div>
        </div>
      </div>

      <div class="box_center">
        <div
          class="btn_click"
          :class="type == 'hydl' ? 'active_d' : ''"
          @click="
            handletype('hydl');
            playAudio();
          "
        >
        <div class="active" v-if="type == 'hydl'"></div>
          会员掉落
        </div>
        <div
          class="btn_click"
          :class="type == 'hzbh' ? 'active_d' : ''"
          @click="
            handletype('hzbh');
            playAudio();
          "
        >
        <div class="active" v-if="type == 'hzbh'"></div>
          盒子包含
        </div>
      </div>
      <div class="box_bottom grade2" v-if="type == 'hzbh'">
        <div
          class="box_bottom_hzbh"
          :style="{ 'background-image': `url(${item.levelImg})` }"
          v-for="(item, index) in boxDetial.boxOrnamentsList"
          :key="index"
        >
          <div class="hzbh_bl">{{ item.oddsResult }}%</div>
          <div class="hzbh_img">
            <img :src="item.imageUrl | fullPath" width="100%" height="100%" />
          </div>
          <div class="hzbh_name textover-f">{{ item.name }}</div>
          <div class="hzbh_money">
            <money class="money"></money>
            {{ item.usePrice }}
          </div>
        </div>
        <div  class="box_bottom_hzbh" v-for="(index) in 3" :key="index" style="opacity: 0"></div>
      </div>
      <div class="box_bottom grade3" v-if="type == 'hydl'">
        <div
          class="box_bottom_hydl animate__animated animate__bounceIn"
          v-for="(item, index) in boxHistory"
          :key="index"
          :style="{ 'background-image': `url(${item.ornamentLevelImg})` }"
        >
          <div class="hydl_img">
            <img :src="item.imageUrl | fullPath" width="100%" height="100%" />
          </div>
          <div class="textover-f">{{ item.ornamentName }}</div>
          <div class="hydl_money">
            <money class="moneys"></money>
            {{ item.ornamentsPrice }}
          </div>
        </div>
        <div class="isOver"></div>
        <div  class="box_bottom_hydl animate__animated animate__bounceIn" v-for="(index) in 3" :key="index" style="opacity: 0!important"></div>
      </div>
    </div>
  </div>
</template>

<script>
// import swiper from "@/components/swiperUser.vue";
import {
  getUserInfo,
  // getBoxhistory,
  getDetail,
  openBox,
  decompose,
} from "@/api/index.js";
import bsurl from "@/api/basurl.js";
export default {
  data() {
    return {
      isopen: false,
      isanimate: null,
      isResult: false,
      voice: false,
      animate: false,
      data: {
        id: this.$route.query.id,
        num: 1,
      },
      history: {
        boxId: this.$route.query.id,
        page: 1,
        size: 9,
        orderByFie: 0,
        status: [0, 2, 3, 5],
        source: [1],
      },
      weaponList1: [],
      weaponList2: [],
      weaponList4: [],
      weaponList3: [],
      weaponList5: [],
      boxDetial: [],
      boxHistory: [],
      resultList: [],
      total: 0,
      type: "hydl",
      left: 14,
      voicefile: new Audio(),
      openAudio: new Audio(),
      totalNum: 9,
    };
  },
  components: {
    // swiper,
  },
  mounted() {
    console.log("箱子id", this.$route.query.id);

    this.connectWs();
    // this.gethistory();
    this.getdetial();
    this.voicefile.src = require("../../../assets/2.mp3");
    this.openAudio.src = require("../../../assets/01.mp3");
    // this.voicefile.load();
  },
  computed: {
    // 统计金币
    moneyAll() {
      let bean = 0;
      this.resultList.forEach((item) => {
        bean += item.usePrice * 1;
        console.log("bean", item);
      });
      return bean.toFixed(2);
    },
  },
  methods: {
    getNum(num) {
      return require(`../../../assets/num${num}.png`);
    },
    playAudio() {
      this.$store.commit("playAudio");
    },
    connectWs() {
      getUserInfo().then((res) => {
        console.log("用户", res.data.data.userId);
        let bid = this.$route.query.id;
        let uid = res.data.data.userId;
        // console.log(fid, uid);

        this.$sockets = new WebSocket(
          bsurl.BASE_API + "/ws/bindBox/" + bid + "/" + uid
        );

        this.$sockets.onopen = () => {
          //console.log("fightRoom ==> onopen");
        };

        this.$sockets.onmessage = (event) => {
          //console.log("fightRoom ==> onmessage", event);

          let msg = JSON.parse(event.data);
          console.log("盲盒ws消息", msg);
          if (msg.code == 200) {
            if (this.boxHistory.length == 0) {
              this.boxHistory.unshift(...msg.data);
              return false;
            }
            setTimeout(() => {
              if (this.boxHistory.length < 10) {
                // console.log(123);
                this.boxHistory.unshift(...msg.data);
              } else {
                this.boxHistory.unshift(...msg.data);
                console.log(
                  "末尾删除",
                  this.boxHistory.length,
                  msg.data.length,
                  msg.data.length
                );
                this.boxHistory.splice(
                  this.boxHistory.length - msg.data.length,
                  msg.data.length
                );
              }
            }, 5500);
          }
          // 判断消息类型
        };

        this.$sockets.onclose = () => {
          console.log("fightRoom ==> onclose");
          this.roomList = [];
        };
      });
      //console.log("页面跳转参数=" + JSON.stringify(this.$route.query));
    },
    // scrollEventFn(e) {
    //   // console.log(e);
    //   if (this.type == "hydl") {
    //     this.event = e;
    //     if (
    //       e.srcElement.scrollTop + e.srcElement.clientHeight >=
    //       e.srcElement.scrollHeight
    //     ) {
    //       if (this.isOver == "加载中") {
    //         this.history.page++;
    //         setTimeout(() => {
    //           // this.gethistory();
    //         }, 5);
    //       }
    //     }
    //   }
    // },
    handlevoice() {
      this.voice = !this.voice;
    },
    handledraw() {
      this.animate = !this.animate;
    },
    reset() {
      this.isanimate = null;
      this.isopen = false;
    },
    handleD(res, index) {
      this.resultList.splice(index, 1);

      decompose({ isAll: false, packSackIds: [res] }).then((res) => {
        getUserInfo().then((res) => {
          this.user = res.data.data;
          this.$store.commit("USER_INFO", res.data.data);
        });
        this.$message({
          message: res.data.data,
          type: "success",
          customClass: "log_success",
        });
      });
      if (this.resultList.length == 0) {
        this.isResult = false;
        this.reset();
      }
    },
    handleDecompose() {
      let arr = [];
      this.resultList.forEach((i) => {
        console.log(i);
        arr.push(i.id);
      });
      console.log("arr", arr);
      decompose({ isAll: false, packSackIds: arr }).then((res) => {
        this.isResult = false;
        this.$message({
          message: res.data.data,
          type: "success",
          customClass: "log_success",
        });
        getUserInfo().then((res) => {
          this.user = res.data.data;
          this.$store.commit("USER_INFO", res.data.data);
        });
        this.reset();
      });
      // this.boxHistory = [];
      // this.history.page = 1;
      // this.gethistory();
    },
    handleBag() {
      this.isResult = false;
      this.resultList = [];
      // this.boxHistory = [];
      // this.history.page = 1;
      // this.gethistory();
      this.reset();
    },
    handleOpen() {
      this.$store.commit("stopGlobalMusic");
      if (
        this.$store.state.USER_INFO.accountAmount +
          this.$store.state.USER_INFO.accountCredits <
        this.total
      ) {
        this.$message({
          message: "余额不足，请充值",
          type: "warning",
          customClass: "log_warning",
        });
        return false;
      }
      this.getweapon();

      let obj = {};
      obj.boxId = this.data.id;
      obj.num = this.data.num;
      setTimeout(() => {
        openBox(obj).then((res) => {
          if (res.data.code == 200) {
            this.resultList = res.data.data;
            // console.log('res.data.data',res.data.data);
            this.weaponList1.push(res.data.data[0]);
            this.weaponList2.push(res.data.data[1]);
            this.weaponList3.push(res.data.data[2]);
            this.weaponList4.push(res.data.data[3]);
            this.weaponList5.push(res.data.data[4]);

            if (this.animate == false) {
              setTimeout(() => {
                this.isResult = true;
                if (!this.voice) {
                  this.openAudio.play();
                }
              }, 6000);
            } else {
              this.isResult = true;
            }
            if (this.animate == false) {
              if (!this.voice) {
                this.voicefile.play().then(() => {
                  this.isopen = true;
                  setTimeout(() => {
                    this.isanimate = true;
                  }, 5);
                });
              } else {
                this.isopen = true;
                setTimeout(() => {
                  this.isanimate = true;
                }, 5);
              }
            } else {
              this.isanimate = false;
            }
            getUserInfo().then((res) => {
              this.user = res.data.data;
              this.$store.commit("USER_INFO", res.data.data);
            });
          } else if (res.data.code == 500) {
            this.isopen = false;

            this.$message({
              type: "warning",
              message: res.data.msg,
              customClass: "log_warning",
            });
          }
          // console.log("1111", res.data.data);
        });
      }, 200);
    },
    handletype(res) {
      this.type = res;
      if (res == "hydl") {
        // this.boxHistory = [];
        // this.history.page = 1;
        // this.gethistory();
      }
    },
    handleChange(res) {
      this.getweapon();
      this.data.num = res;
      var numall = parseFloat(this.boxDetial.price * res);

      this.total = Math.round(numall * 100) / 100;

      const width = this.$refs.slider.offsetWidth;
      console.log("width", width);
      this.left = (res - 1) * width + 4 * res;
    },
    handleback() {
      this.$router.back(0);
    },
    arraySort(arr) {
      arr = arr.sort((a, b) => {
        return b.usePrice - a.usePrice;
      });
      return arr;
    },
    //历史掉落
    // gethistory() {
    //   getBoxhistory(this.history).then((res) => {
    //     console.log("getBoxhistory", res);
    //     // this.boxHistory = res.data.data

    //     if (res.data.data.length < this.history.size) {
    //       this.isOver = "暂无更多";
    //     }
    //     this.boxHistory.push(...res.data.data);
    //   });
    // },
    //箱子包含
    getweapon() {
      this.weaponList1 = [];
      this.weaponList2 = [];
      this.weaponList3 = [];
      this.weaponList4 = [];
      this.weaponList5 = [];
      for (let i = 0; i < 60; i++) {
        this.weaponList1.push(
          this.weaponList[Math.floor(Math.random() * this.weaponList.length)]
        );
        this.weaponList2.push(
          this.weaponList[Math.floor(Math.random() * this.weaponList.length)]
        );
        this.weaponList3.push(
          this.weaponList[Math.floor(Math.random() * this.weaponList.length)]
        );
        this.weaponList4.push(
          this.weaponList[Math.floor(Math.random() * this.weaponList.length)]
        );
        this.weaponList5.push(
          this.weaponList[Math.floor(Math.random() * this.weaponList.length)]
        );
      }
    },
    //生成武器列表
    getdetial() {
      getDetail(this.data.id).then((res) => {
        this.boxDetial = res.data.data;
        this.total = this.boxDetial.price;
        this.weaponList = this.arraySort(res.data.data.boxOrnamentsList);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@media (max-width: 550px) {
  .cartoon_bg {
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    opacity: 1;
    transform: translateX(0);
    // position: relative;
    // z-index: -1;
  }
}
.button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 10px;
}
.close {
  opacity: 0 !important;
  transform: translateX(1000px) !important;
}

.op0 {
  opacity: 0;
}
.p20 {
  padding: 0 20px;
}
.cartoon_bg {
  width: 525px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  opacity: 1;
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 20;
  margin-left: -262.5px;
  .active {
    animation: hengxian 0.5s linear;
  }
  .cartoon_colum {
    width: 95%;
    margin: 0 auto;
    height: 112px;
    background-color: #101115;
    border-radius: 14px;
    margin-top: 62%;
    overflow: hidden;
    padding: 5px;
    position: relative;
    // animation: hengxian 0.5s linear;
    @media (max-width: 550px) {
      width: 355px;
      height: 80px;
      // background: #101115;
    }
  }
  @keyframes hengxian {
    0% {
      width: 0%;
    }
    52% {
      width: 50%;
    }
    100% {
      width: 95%;
    }
  }
  .heng_xian {
    position: absolute;
    z-index: 9999;
    top: 50%;
    margin-top: -1.5px;
    width: 100%;
    height: 3px;
    background-color: #3a97e4;
    left: 0;
    opacity: 0.87;
    margin: 0 auto;
  }

  .heng_xian:before {
    position: absolute;
    top: -50%;
    margin-top: -6px;
    left: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    border-width: 9px;
    border-left-color: #3a97e4;
  }
  .heng_xian:after {
    position: absolute;
    top: -50%;
    margin-top: -6px;
    right: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    border-width: 9px;
    border-right-color: #3a97e4;
  }
  .cartoon_list {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .cartoon_list_animate {
    transition: all 5.5s cubic-bezier(0, 0.2, 0, 1) 0s;
    transform: translateY(-5932px);
    @media (max-width: 550px) {
      transform: translateY(-4259px);
    }
  }
  .cartoon_list_animate1 {
    transition: all 5.5s cubic-bezier(0, 0.3, 0, 1) 0s;
    transform: translateY(-5932px);
    @media (max-width: 550px) {
      transform: translateY(-4259px);
    }
  }
  .cartoon_list_animate2 {
    transition: all 5.5s cubic-bezier(0, 0.2, 0, 1) 0s;
    transform: translateY(-5932px);
    @media (max-width: 550px) {
      transform: translateY(-4259px);
    }
  }
  .cartoon_list_animate3 {
    transition: all 5.5s cubic-bezier(0, 0.3, 0, 1) 0s;
    transform: translateY(-5932px);
    @media (max-width: 550px) {
      transform: translateY(-4259px);
    }
  }
  .cartoon_list_animate4 {
    transition: all 5.5s cubic-bezier(0, 0.2, 0, 1) 0s;
    transform: translateY(-5932px);
    @media (max-width: 550px) {
      transform: translateY(-4259px);
    }
  }
  .cartoon_list_w {
    background-size: 100% 100%;
    width: 92px;
    height: 98px;
    margin: 1px;
    @media (max-width: 550px) {
      width: 66px;
      height: 70px;
    }
  }
  .cartoon_list_w_d {
    width: 92px;
    height: 98px;
    @media (max-width: 550px) {
      width: 66px;
      height: 70px;
    }
  }
}
.result_bac {
  // position: absolute;
  // left: 0;
  // top: 0;
}
.result {
  margin: 0 auto;
  width: 476px;
  padding: 32px 0;
  background: #101115;
  border-radius: 23px 23px 23px 23px;
  opacity: 1;
  position: fixed;
  top: 16%;
  left: 50%;
  margin-left: -238px;
  z-index: 31;
  @media (max-width: 550px) {
    width: 340px;
    margin-left: -170px;
    padding: 25px 0;
  }
  .lvbu {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 23px 23px 23px 23px;
    height: 278px;
    background: linear-gradient(
      -218deg,
      #1f3a58 0%,
      rgba(32, 29, 48, 0) 38%,
      rgba(248, 125, 81, 0) 100%
    );
  }
  .result_title {
    width: 100%;
    text-align: center;
    font-size: 28px;
    color: #ffff;
    @media (max-width: 550px) {
      font-size: 20px;
    }
  }
  .result_center {
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .resut_gun {
      width: 151px;
      height: 161px;
      margin: 4px 0 0 0;
      border-radius: 13px 13px 13px 13px;
      background: rgba(50, 52, 54, 0.25) 66%;
      background-size: 100% 100%;
      opacity: 1;
      position: relative;
      padding: 7px;
      margin: 2px;
      @media (max-width: 550px) {
        width: 108px;
        height: 115px;
        padding: 4px;
      }
      .gun_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 11px;
        width: 90%;
        margin: 0 auto;
        font-weight: bold;
        @media (max-width: 550px) {
          font-size: 8px;
        }
      }
      .gun_img {
        width: 68%;
        margin: 0 auto;
      }
      .gun_name {
        font-size: 15px;
        @media (max-width: 550px) {
          font-size: 9px;
        }
      }
      .gun_money {
        font-size: 15px;
        @media (max-width: 550px) {
          font-size: 9px;
        }
      }
    }
  }
  .result_money {
    width: 90%;
    height: 56px;
    background: #323436;
    border-radius: 35px 35px 35px 35px;
    opacity: 1;
    margin: 0 auto;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #3fa2c7;
    @media (max-width: 550px) {
      height: 40px;
    }
  }
  .result_btn {
    width: 100%;
    margin: 14px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 21px;
    .result_btn_A {
      width: 196px;
      height: 56px;
      background: linear-gradient(
        360deg,
        rgba(114, 116, 119, 0.5) 0%,
        rgba(114, 116, 119, 0.25) 100%
      );
      opacity: 1;
      border: 2px solid #727477;
      display: flex;
      align-items: center;
      justify-content: center;
      @media (max-width: 550px) {
        width: 140px;
        height: 30px;
        font-size: 15px;
      }
    }
    .result_btn_B {
      width: 196px;
      height: 56px;
      background: #1f3a58;

      opacity: 1;
      border: 2px solid #3fa2c7;
      display: flex;
      align-items: center;
      justify-content: center;
      @media (max-width: 550px) {
        width: 140px;
        height: 30px;
        font-size: 15px;
      }
    }
  }
}
.box_bottom {
  &::-webkit-scrollbar {
    width: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #3fa2c7;
    border-radius: 5px;
  }

  @media (max-width: 550px) {
    &::-webkit-scrollbar {
      width: 2px;
    }
  }
  width: 100%;
  // display: flex;
  height: 25rem;
  overflow-y: auto;
  // overflow: hidden;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .box_bottom_hzbh {
    position: relative;
    margin-top: 4px;
    background-size: 100% 100%;
    width: 98%;
    height: 262px;
    background-color: #1f2023;
    border-radius: 14px 14px 14px 14px;
    transition: all 0.2s ease-in-out;

    opacity: 1;
    margin: 1%;
    &:hover {
      .hzbh_img {
        transition: all 0.2s ease-in-out;
        transform: translateY(-10px);
      }
    }
    @media (max-width: 550px) {
      height: 187px;
    }

    .hzbh_img {
      transition: all 0.2s ease-in-out;

      // height: 168px;
      width: 168px;
      margin: 0 auto;
      margin-top: 30px;
      @media (max-width: 550px) {
        margin-top: 28px;

        width: 120px;
        // height: 120px;
      }
    }
    .hzbh_name {
      font-size: 19px;
      @media (max-width: 550px) {
        font-size: 13px;
      }
    }
    .hzbh_bl {
      position: absolute;
      right: 7px;
      top: 14px;
      font-weight: bold;
      @media (max-width: 550px) {
        font-size: 13px;
      }
    }
    .hzbh_money {
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      color: #3fa2c7;
      margin-top: 12px;
      font-size: 21px;
      @media (max-width: 550px) {
        font-size: 15px;
      }
    }
  }
  .box_bottom_hydl {
    position: relative;
    margin-top: 4px;
    background-size: 100% 100%;
    width: 100%;
    height: 175px;
    background-color: #1f2023;
    border-radius: 14px 14px 14px 14px;
    transition: all 0.2s ease-in-out;
    opacity: 1;
    font-size: 13px;

    &:hover {
      .hydl_img {
        transition: all 0.2s ease-in-out;
        transform: translateY(-10px);
      }
      // background-color: red;
    }

    @media (max-width: 550px) {
      height: 125px;
      font-size: 9px;
    }
    .hydl_img {
      width: 80%;
      transition: all 0.2s ease-in-out;
      img {
        width: 128px;
        height: 96px;
        @media (max-width: 550px) {
          width: 80px;
          height: 80px;
        }
      }
      // height: 112px;
      margin: 0 auto;
      margin-top: 5%;
      @media (max-width: 550px) {
        width: 80px;
        height: 80px;
      }
    }
    .hydl_money {
      margin-top: 5%;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      color: #3fa2c7;
      // font-size: 14px;
      .moneys {
        margin-right: 2px;
        width: 14px;
        height: 14px;
      }
    }
  }
}
.box_center {
  width: 98%;
  height: 60px;
  background: url('../../../assets/pinxiangBottom_top.png') no-repeat center center;
  background-size: 100% 100%;
  opacity: 1;
  margin: 0 auto;
  margin-top: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #727477;
  font-size: 14px;
  margin-bottom: 10px;
  position:relative;
  .active{
    position: absolute;
    bottom:0;
    width: 50%;
    height: 60%;
    color: #12d7ff;
    background-size: 100% 100%;
    background-image: url('../../../assets/tab-select-bg-DCl8rbkb.png');
    background-repeat: no-repeat;
  }
  @media (max-width: 550px) {
    // width: 145px;
    height: 50px;
    margin-top: 25px;
    font-size: 10px;
  }

  div {
    width: 49%;
    height: 80%;
    border-radius: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .active_d {
    // background: url('../../../assets/pinxiangBottom_text_bg.png') no-repeat center center;
    //   background-size: cover;
    color: #12d7ff;
  }
}

.box_open {
  margin: 0 auto;
  margin-top: 14px;
  width: 50%;
  height: 56px;
  background: url("../../../assets/box_open.png") no-repeat center center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  @media (max-width: 550px) {
    height: 40px;
    font-size: 18px;
  }
}
.box_const {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0 auto;
  color: #3fa2c7;
  margin-top: 14px;
}
.box_number {
  width: 427px;
  height: 42px;
  // background: #323436;
  // border-radius: 70px 70px 70px 70px;
  opacity: 1;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #727477;
  transition: all 0.2s ease-in-out;

  font-weight: bold;
  position: relative;
  @media (max-width: 550px) {
    margin-top: 20px;
    width: 100%;
    height: 30px;
    font-size: 13px;
  }
  .btn {
    width: 50px;
    height: 50px;
    opacity: 1;
    color: #fff;
    background: url("../../../assets/main-btn-bg.png") no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    img {
      width: 20px;
      aspect-ratio: 12 / 15;
    }
  }
  .active_n {
    color: #fff;
    transition: all 0.2s ease-in-out;
    background: url("../../../assets/main-btn-bg-active.png") no-repeat center;
    background-size: cover;
  }
  .slider {
    position: absolute;
    width: 50px;
    height: 50px;
    transition: left 0.2s ease-in-out;
    // border-radius: 70px 70px 70px 70px;
    transition: all 0.2s ease-in-out;

    background: url("../../../assets/main-btn-bg-active.png") no-repeat center;
    background-size: cover;
    @media (max-width: 550px) {
      // width: 60px;
      // height: 25px;
      // border-radius: 50px 50px 50px 50px;
    }
  }
}
.box_list {
  width: 100%;
  height: 112px;
  background: #101115;
  border-radius: 14px 14px 14px 14px;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  @media (max-width: 550px) {
    height: 80px;
  }
}
.box_list_i {
  width: 80px;
  height: 85px;
  // background-image: url("../../../assets/moba.png");
  // background-size: 100% 100%;
  // border-radius: 7px 7px 7px 7px;
  // background-position: center;
  // border: 1px solid #3a97e4;
  @media (max-width: 550px) {
    width: 57px;
    height: 61px;
  }
}
.cartoon {
  width: 80px;
  height: 85px;
  background-image: url("../../../assets/moba.png");
  background-size: 123% 123%;
  border-radius: 7px 7px 7px 7px;
  background-position: center;
  border: 1px solid #3a97e4;
  overflow: hidden;
  @media (max-width: 550px) {
    width: 57px;
    height: 61px;
  }
}
.cartoon_d {
  width: 80px;
  height: 85px;
  border-radius: 7px 7px 7px 7px;
  overflow: hidden;
  @media (max-width: 550px) {
    width: 57px;
    height: 61px;
  }
}
.box_list_i_i {
  width: 80px;
  height: 80px;
  @media (max-width: 550px) {
    width: 57px;
    height: 57px;
  }
}
.box_switch {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: right;
  display: flex;
  align-items: center;
  div {
    color: #727477;
    margin-right: 5px;
  }
}
.box_top {
  margin-top: 32px;
  @media (max-width: 550px) {
    margin-top: 23px;
  }
}
.header_top {
  width: 100%;
  height: 56px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .back {
    width: 90px;
    @media (max-width: 550px) {
      width: 60px;
    }
  }
  .speak {
    width: 90px;
    @media (max-width: 550px) {
      width: 60px;
    }
  }
}
.home {
  margin: 0 auto;
  width: 95%;
}
::v-deep .yy {
  .el-switch__core {
    border: 3px solid #727477;
    background: none;
  }
  .el-switch__core:after {
    width: 12px;
    height: 12px;
    background-color: #3a97e4;
  }
  &.el-switch.is-checked .el-switch__core::after {
    background-color: #727477;
    margin-left: -14px;
  }
}
::v-deep .dh {
  .el-switch__core {
    background: none;
  }
  .el-switch__core {
    border: 3px solid #727477;
    background: none;
  }
  .el-switch__core:after {
    width: 12px;
    height: 12px;
    background-color: #3fa2c7;
  }
  &.el-switch.is-checked .el-switch__core::after {
    background-color: #727477;
    margin-left: -14px;
  }
}
.drawV2,
.voiceV2 {
  width: 35px;
  height: 35px;
  @media (max-width: 550px) {
    width: 25px;
    height: 25px;
  }
  border-radius: 7px 7px 7px 7px;
  opacity: 1;
  border: 1px solid #727477;
  .icon {
    width: 20px;
    height: 21px;
    @media (max-width: 550px) {
      width: 14px;
      height: 15px;
    }
  }
}
.active_dV2,
.active_vV2 {
  border: 1px solid #3fa2c7;
  transition: all 0.3s ease-in-out;
  svg {
    path {
      fill: #3fa2c7;
      transition: all 0.3s ease-in-out;
    }
  }
}
.empty{
  width: 100%;
  height: 4rem;
}
</style>
