<template>
  <div>
    <div class="gameDivClass">
      <div class="gameRecordDiv">
        <span class="gameRecordSpan">游戏记录</span>
      </div>
    </div>
    <div>
      <div class="draw-user-info">
        <div class="draw-user-name">
          <img
            src="https://storage.360buyimg.com/i.imageUpload/6a645f…13039313339643431363132343437353034393838_mid.jpg"
            alt=""
            class="userTouxiang"
          />
          <span class="">jd_178242tqp</span>
        </div>
        <div class="draw-user-jifen">
          <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAA…4/3T/5kb1/FujUat6/v8BLRBM0RBjKDEAAAAASUVORK5CYII="
            alt=""
          />
          <span class="">积分余额 ：</span>
          <span
            style="
              color: rgb(242, 60, 60);
              margin-left: 0.1rem;
              margin-right: 0.1rem;
            "
            >333</span
          >
          <span class="">积分</span>
        </div>
      </div>
      <div class="draw-guess-main">
        <div class="draw-guess-table">
          <img
            src="https://img10.360buyimg.com/imgzone/jfs/t22867/96/2659946120/26131/b142695e/5b87c1d6N6e469de1.png"
            alt=""
          />
          <div class="draw-guess-table-title">请选择积分筹码</div>
          <div class="draw-guess-big" :class="{ rock: hasError }">大</div>
          <div class="draw-guess-small" :class="{ rock: hasError }">小</div>
          <div class="draw-guess-big-select"></div>
          <div class="draw-guess-small-select"></div>
        </div>
        <div class="draw-guess-jifen">
          <div
            v-for="(item, index) in jfitems"
            :key="index"
            :class="{ active: currentSort == index }"
            @click="active(index)"
            class="draw-guess-jifen-item"
          >
            <img :src="item.url" alt="" />
          </div>
        </div>
      </div>
      <div class="draw-guess-today-chance">
        今天剩余
        <span style="color: rgb(242, 60, 60)">0</span>
        次开奖机会
      </div>
      <div class="dice-content ready"></div>
      <div class="draw-play-btn" style="display: none">关注店铺点击开始</div>
      <div class="draw-play-btn btndisable">下注开始</div>
      <div class="ibd-rule-ctn" style="margin: 0.5rem 0.4rem">
        <div class="name">
          <span class="name-left"></span>

          <span class="">游戏规则</span>
          <span class="name-right"> </span>
        </div>
        <div class="ctn">
          <div style="margin-top: 0.2rem">
            1、活动时间：2021-06-16 10:35 至 2021-07-16 10:32；
            <br />
            2、活动对象：全网用户可参与；
            <br />
            3、猜中大小后获得5倍积分；
            <br />
            4、每天最多参与1次；
            <br />
            5、关注店铺后方可参与活动；
            <br />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: [""],
  data() {
    return {
      // isActive: true,
      hasError: false,
      currentSort: -1,
      jfitems: [
        {
          url: "https://img10.360buyimg.com/imgzone/jfs/t22930/43/2552985313/4858/6e889304/5b875dbeNdb0e8bd3.png",
        },
        {
          url: "https://img10.360buyimg.com/imgzone/jfs/t23935/87/2597170037/4750/c377921a/5b875dbeN55cb945d.png",
        },
        {
          url: "https://img10.360buyimg.com/imgzone/jfs/t26917/87/158589208/4871/e1d7caf7/5b875dbeNf5270b5b.png",
        },
        {
          url: "https://img10.360buyimg.com/imgzone/jfs/t27148/82/158302604/4891/9ede71a8/5b875dbeNa6871047.png",
        },
      ],
    };
  },
  methods: {
    active(index) {
      this.hasError = true;
      this.currentSort = index;
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
.active {
  transform: scale(1.4);
  //  transition: all .5s ease;
}
.rock {
  animation: tada 1s infinite;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: tada;
}
.gameDivClass {
  border: 1px solid #5bd5f6;
  color: #5bd5f6;
  line-height: 0.48rem;
  width: 1.4rem;
  text-align: center;
  border-radius: 4px;
  font-size: 0.24rem;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 0.4rem;
  margin-right: 0.4rem;
}
.draw-user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.2rem;
  padding: 0 0.4rem;
  max-width: 750px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.2rem;
}
.draw-user-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
}
.userTouxiang {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  margin-right: 0.1rem;
}
.draw-user-jifen {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  line-height: 0.32rem;
}
.draw-guess-table {
  width: 100%;
  padding-top: 0.2rem;
  position: relative;
  img {
    border: 0;
    max-width: 100%;
  }
}
.draw-guess-table-title {
  position: absolute;
  font-size: 0.24rem;
  top: 0.24rem;
  color: #cfb88b;
  left: 50%;
  transform: translateX(-50%);
}
.draw-guess-big {
  color: #7f2241;
  font-size: 0.6rem;
  position: absolute;
  top: 0.96rem;
  left: 0.46rem;
  font-weight: bold;
}
.draw-guess-small {
  color: #766f6a;
  font-size: 0.6rem;
  position: absolute;
  top: 0.96rem;
  right: 0.4rem;
  font-weight: bold;
}
.draw-guess-big-select {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  top: 0;
}
.draw-guess-small-select {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
}
.draw-guess-main {
  padding: 0 0.4rem;
}
.draw-guess-jifen {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.3rem 0.3rem;
  .draw-guess-jifen-item {
    width: 0.97rem;
    height: 1.04rem;
  }
}
.draw-guess-today-chance {
  font-size: 0.24rem;
  line-height: 0.32rem;
  text-align: center;
  color: #fff;
}
.dice-content {
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  top: 3.5rem;
  left: 2.85rem;
  background-size: 100%;
}
#appC .dice-content.ready {
  animation: readyRotateIn 1s;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: readyRotateIn;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t14596/96/2188990943/17174/a3a45e0f/5a78668bN30c288f8.png) !important;
}
.draw-play-btn {
  width: 6.6rem;
  border-radius: 0.45rem;
  background: linear-gradient(#ff5853, #dd2546);
  color: #fff;
  font-size: 0.36rem;
  line-height: 0.9rem;
  text-align: center;
  margin: 0.2rem auto;
}
.ibd-rule-ctn .name {
  text-align: center;
  font-size: 0.3rem;
  position: relative;
}
.ibd-rule-ctn {
  position: relative;
  color: #fff;
}
.ibd-rule-ctn .name .name-left {
  position: absolute;
  left: 0;
  right: 50%;
  top: 8px;
  height: 1px;
  text-align: left;
}
.ibd-rule-ctn .name .name-right {
  position: absolute;
  left: 50%;
  right: 0;
  top: 8px;
  height: 1px;
  text-align: right;
}
.ibd-rule-ctn .name .name-left:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -50%;
  height: 1px;
  background: #fff;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.ibd-rule-ctn .name .name-left:after {
  content: "";
  position: absolute;
  top: -2px;
  right: 18.5%;
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 100%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.ibd-rule-ctn .name .name-right:before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  right: 0;
  height: 1px;
  background: #fff;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 100% 100%;
}
.ibd-rule-ctn .name .name-right:after {
  content: "";
  position: absolute;
  top: -2px;
  left: 21.5%;
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 100%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.ibd-rule-ctn .ctn {
  padding: 0.3rem 0;
  line-height: 0.5rem;
  font-size: 0.24rem;
  div {
    text-align: left;
  }
}
</style>
