vue 翻牌活动

说来惭愧，翻牌活动，思来想去，最终引入了jq，虽然vue里引用jq，实在是令人难以启齿，奈何周期短，压力大，工作急，于是就懒的做jq转vue的处理了。import $ from 'jquery'引入搞起。。。
主要还是有个现成的网上代码，俗话说，ctrl+c ctrl+v 是程序猿的基本功。我就拿来随便该该得了
先上效果图。

vue翻盘

翻盘活动，大概分3步，初始化代码

 init() {
      var self = this;
      //卡牌初始化归位
      for (var i = 0; i < this.length; i++) {
        (function(i) {

          var seat = setTimeout(() => {
            $(".box li").eq(i).css({
              left: self.initArr[i][0] + "rem",
              top: self.initArr[i][1] + "rem",
              backgroundImage:self.beganToDraw,
            });
            clearTimeout(seat);
          }, 300 * i);
        })(i);
      }
  
      //卡牌轮流选中动画特效
      setTimeout(() => {
        this.timer = setInterval(() => {
          this.bool = true; //卡牌归位，可以点击
          $(".box li").eq(this.index - 1).removeClass("active");
          this.index %= 6;
          $(".box li").eq(this.index).addClass("active");
          this.index++;
        }, 1000);
      }, 1000);
    }

然后是用户点击牌子，处理效果，

//点击方法
 showN(indexName) {

      if (this.isButton) {
        this.popupVisible = true;
        return
      }
      lotteryApi().then((res) => {
        if (res.httpCode == 200) {
          this.objectItem.forEach((item) => {
            if (item.goodsId == res.data.goodsId) {

              if (new Date() - this.clickTime > 2000 && this.bool) { //两次点击的间隔不能小于2秒
                var self = this

         
                $("#change").html(this.data);

                $("#mask-card").show();
                clearInterval(this.timer); //清除轮流选中动画
                $(".box li").removeClass("active"); //清除轮流滚动类名
                $(".box li").eq(indexName).addClass("open-card"); //添加翻牌
                //动画监听
                $(".box li").eq(indexName).on("animationend", () => {
                  $(".box li").eq(indexName).removeClass("open-card"); //移除翻牌动画
                  $(".box li").css({ //所有卡牌放到右下角
                    left: 512 / 75 + "rem",
                    top: 268 / 75 + "rem"
                  });
                  $("#mask-card").hide();
                  this.win(item);
                  $(".box li").eq(indexName).off("animationend"); //解绑动画监听
                });

              }

            }
          })
        } else {
          if (res.retCode == "10030001") {
            this.loginMenu();
          } else {
            this.$toast(res.retMsg)
          }
        }
      })

    },

这里其实是用到了css3属性通过添加class来实现特效。

/*卡牌翻开动画*/
.box li.open-card {
  left: 3.64rem !important;
  top: 0 !important;
  z-index: 10;
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -o-animation: openCard .5s .5s linear forwards;
  -ms-animation: openCard .5s .5s linear forwards;
  -moz-animation: openCard .5s .5s linear forwards;
  -webkit-animation: openCard .5s .5s linear forwards;
  animation: openCard .5s .5s linear forwards;
}
@keyframes openCard {
  10%,
  30%,
  50% {
    -o-transform: scale(1.5) translateX(-10px);
    -ms-transform: scale(1.5) translateX(-10px);
    -moz-transform: scale(1.5) translateX(-10px);
    -webkit-transform: scale(1.5) translateX-(10px);
    transform: scale(1.5) translateX(-10px);
  }
  20%,
  40%,
  60% {
    -o-transform: scale(1.5) translateX(10px);
    -ms-transform: scale(1.5) translateX(10px);
    -moz-transform: scale(1.5) translateX(10px);
    -webkit-transform: scale(1.5) translateX(10px);
    transform: scale(1.5) translateX(10px);
  }
  100% {
    -o-transform: scale(1.5) translateX(90deg);
    -ms-transform: scale(1.5) translateX(90deg);
    -moz-transform: scale(1.5) translateX(90deg);
    -webkit-transform: scale(1.5) translateX(90deg);
    transform: scale(1.5) rotateY(90deg);
  }
}

然后确定按钮重置效果

btnTrue() {
      this.clickTime = new Date(); //时间更新
      this.index = this.length; //卡牌选中重新从第一张开始
      this.init();
      $("#mask").hide();
      $(".winning").removeClass("reback");
      $("#card").removeClass("pull");
    },

感觉我说的貌似有点麻烦，直接全代码复制

<template>
<div id="wrap">
  <div id="mask-card"></div>
  <div class="left_logo">
    <img src="~img/logo.png" alt="logo" width="100%">
  </div>
  <div class="banner"><img src="~img/banner1.jpg" /></div>
  <!--游戏区域-->
  <div class="main">
    <!-- <h2>有 <span id="change">2</span> 次翻牌机会</h2> -->
    <ul class="box" ref="box">
      <li :class="'animate'+(index+1)" @click="showN(index)" v-for="(slot,index) in objectItem"> </li>
      <!-- <li class="animate1"> </li>
            <li class="animate2"></li>
            <li class="animate3"></li>
            <li class="animate4"> </li>
            <li class="animate5"> </li>
            <li></li> -->
    </ul>
    <div class="btn_group">
      <div class="add_btn">
        <div class="act_rule" @click="showdiv(1)">活动规则</div>
        <div class="luck_recond" @click="showdiv(2)">中奖记录</div>
      </div>
    </div>
    <!-- <a class="a-main a1">活动规则</a>
    <a class="a-main a2">我的奖品</a> -->
  </div>

  <ruleComponent :itemsListName="itemsListName" v-if="isShowRule"></ruleComponent>
  <codeComponent :itemsListCodeName="itemsListCodeName" v-if="isShowCode"></codeComponent>
  <mt-popup v-model="popupVisible" :closeOnClickModal=false :modal=false>
    <div class="pop_box" @touchmove.prevent>
      <div class="tell_tit">
        <h1 class="pop-idea">用户登录</h1>
      </div>
      <div class="info-set">
        <div class="writer"><span>手机号：</span> <input v-model.trim="ruleForm.phone" type="tel" placeholder="请输入您的入手机号" maxlength="11" class="tel_writer"></div>
        <div class="writer"><span>随机码：</span>
          <input v-model.trim="ruleForm.code" type="text" placeholder="请输入随机码" maxlength="5" class="tel_writer">
          <img :src="createCode" @click="imgClick" class="print-code">
        </div>
        <div class="writer"><span>验证码：</span> <input v-model.trim="ruleForm.createCode" type="tel" placeholder="请输入验证码" maxlength="4" class="tel_writer">
          <div :style="btnImg" @click="reginInto" id="btn">{{reginValue}}</div>
        </div>
      </div>
      <div class="sure_btn" @click="buttomRegin">立即登录</div>
      <div class="close-btn" @click="popupVisible=false"><img src="~img/close.png"></div>
    </div>
  </mt-popup>
  <transition name="fade">
    <div class="isVodel" v-show="popupVisible" @touchmove.prevent>
    </div>
  </transition>

  <div class="isVodel" v-if="isShowRule" @touchmove.prevent></div>

  <div class="isVodel" v-if="isShowCode" @touchmove.prevent></div>




  <!--中奖提示-->
  <div id="mask">
    <div class="blin"></div>
    <div class="caidai"></div>
    <div class="winning">
      <div class="red-body">
        <h1>恭喜！中奖了</h1>
        <p>300M流量包</p>
      </div>
      <a class="btn" @click="btnTrue()">确定</a>
    </div>
  </div>

  
</div>
</template>

<script>
import ruleComponent from "./rule.vue"
import codeComponent from "./code.vue"
import {
  initApi,
  loginApi,
  lotteryApi,
  awardApi,
  getCaptcha,
  sendCaptcha,
  registerApi,
  winning
} from "../api/api";
export default {
  data() {
    return {
      isButton: false,
      popupVisible: false,
      isShowRule: false,
      isShowCode: false,
      createCode: "",
      isImgTrue: false,
      ruleForm: {
        phone: '',
        code: '',
        createCode: "",
      },
      hasPrize: {},
      beganToDraw:"",
      reginValue: "获取验证码",
      isCode: true, //验证码开关
      toast_control: false,
      itemsList: "",
      itemsListName: "",
      btnImg: {},
      isLucky: true,
      interval: false,
      numone: 0,
      numtwo: 0,
      numthe: 0,
      textone: 24,
      texttwo: 27,
      textthe: 30,
      objectItem: [],
      opts: null,
      startedAt: null,
      indexChoice: 0,
      winnum: 0,
      itemsListCodeName: [],


      length: 0,
      index: 0, //轮流滚动的卡牌下标
      data: 2, //次数
      rem: 75,
      initArr: [
        [34 / 75, 0],
        [273 / 75, 0],
        [512 / 75, 0],
        [34 / 75, 268 / 75],
        [273 / 75, 268 / 75],
        [512 / 75, 268 / 75]
      ], //卡牌位置数组
      clickTime: 0,
      bool: false, //首次点击时不能在卡牌归位期间
      timer: "", //轮流提示定时器

    }
  },
  mounted() {
    this.loginMenu();
  },
  components: {
    ruleComponent,
    codeComponent
  },
  methods: {
    //弹出框
    winningMenu() {
      winning().then((res) => {
        if (res.httpCode = 200) {
          this.itemsListCodeName = res.data;
          this.isShowCode = true;
        }

      })
    },
    showdiv(index) {
      if (index == 1) {
        this.itemsListName = this.itemsList;
        this.isShowRule = true;

      } else {
        if (this.isButton) {
          this.popupVisible = true;
          return
        }
        this.winningMenu();

      }
    },
    loginMenu() {
      let paramsName = "";
      if (window.location.host.split(".")[0] != "192") {
        paramsName = window.location.host.split(".")[0];
      } else {
        paramsName = "fbqb53zz"
      }

      loginApi(paramsName).then((res) => {
        if (res.httpCode == 200) {
          window.localStorage.setItem("activity_lefeng", res.data.sign);
          this.initApiMenu();

        }
      })
    },
    initApiMenu() {
      initApi().then((res) => {
        this.ObjectAll = res.data;
        this.popupVisible = res.data.proRegister;
        this.isButton = res.data.proRegister;
        this.imgClick();

        res.data.marketingCampaign.terms.forEach((item, index) => {
          if (item.termType == 10) {
            this.itemsList = item.termVal;
          }
        })


        res.data.marketingCampaign.pictures.forEach((item) => {
            if (item.picType == "100301") {
            document.body.style.backgroundImage = "url(" + item.picUrl + ")"
          } else if (item.picType == "100102") {
              this.beganToDraw = "url(" + item.picUrl + ")"
              
          } else if (item.picType == "1200") {
            //this.beganToDrawImg = "url(" + item.picUrl + ")"
          }


        })

        res.data.marketingCampaign.prizes.forEach((item, index) => {
          this.objectItem.push({
            "prizeType": index + 1,
            "prizeName": item.prizeName,
            "goodsIconUrl": item.goodsInfo.goodsIconUrl,
            "goodsId": item.goodsId,
          })
        })
        $("#change").html(this.data);
        this.length = this.objectItem.length;
        this.index = this.length;
        this.init();


      })
    },

    buttomRegin() {

      if (this.ruleForm.phone != "" || this.ruleForm.phone) {
        if (/^1[34578]\d{9}$/.test(this.ruleForm.phone)) {
          console.log("手机号通过验证");
        } else {
          this.$toast("请输入正确的手机号")

          return false;
        }
      } else {
        this.$toast("请输入手机号")
        return false;
      }

      if (this.ruleForm.code == "") {
        this.$toast("请输入随机码")
        return false;
      }
      if (this.ruleForm.createCode == "") {
        this.$toast("请输入验证码")
        return false;
      }
      this.$indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      let params = {
        "phone": this.ruleForm.phone,
        "phoneCode": this.ruleForm.createCode,
      }

      registerApi(params).then((res) => {
        this.$indicator.close()
        if (res.httpCode == 200) {
          this.isButton = false;
          this.popupVisible = false;

        } else {
          this.$toast(res.retMsg)
        }
      }).catch((err) => {
        this.$indicator.close();
        this.$toast("接口异常");
      })
    },
    //验证码
    reginInto() {


      if (this.ruleForm.phone != "" || this.ruleForm.phone) {
        if (/^1[34578]\d{9}$/.test(this.ruleForm.phone)) {
          console.log("手机号通过验证");
        } else {
          this.$toast("请输入正确的手机号")

          return false;
        }
      } else {
        this.$toast("请输入手机号")
        return false;
      }

      if (this.ruleForm.code == "") {
        this.$toast("请输入随机码")
        return false;
      }

      if (!this.isCode) {
        return false;
      }
      this.sendCaptchaMenu(this.ruleForm.code);




    },
    //发送验证码
    sendCaptchaMenu(code) {
      let params = {
        "mobile": this.ruleForm.phone,
        "type": "sms_login",
        "captcha": code,
      }
      sendCaptcha(params).then((res) => {
        if (res.httpCode == 200) {
          this.btnImg = {
            "background": "#d3d4d6"
          }
          this.reginValue = "60秒"
          let isNum = 60
          this.isCode = false;
          var inteval = setInterval(() => {
            isNum--
            this.reginValue = isNum + "秒"
            if (isNum == 0) {
              clearInterval(inteval);
              this.isCode = true;
              this.reginValue = "获取验证码"
              this.btnImg = {
                "background": "#fc817e"
              }
            }

          }, 1000);
        } else {
          this.$toast(res.retMsg);
          this.isCode = true;
          this.reginValue = "获取验证码"
          this.btnImg = {
            "background": "#fc817e"
          }
          return false;
        }
      })
    },
    //随机码
    imgClick() {
      getCaptcha().then(res => {
        console.log(res);
        this.createCode = "data:image/png;base64," + res.data;
      });
      //$("#codeImg").attr("src","createCode?r="+Math.random())
    },
    //兑奖apo

    //end
    btnTrue() {
      this.clickTime = new Date(); //时间更新
      this.index = this.length; //卡牌选中重新从第一张开始
      this.init();
      $("#mask").hide();
      $(".winning").removeClass("reback");
      $("#card").removeClass("pull");
    },
    win(item) {
      $("#mask").show();
      $(".winning").addClass("reback");
      setTimeout(() => {
        $("#card").addClass("pull");
      }, 500);
      awardApi().then((res) => {
        if (res.httpCode == 200) {
          if (item.prizeName == "谢谢参与") {
            $(".red-body h1").html("谢谢参与")
            $(".red-body p").html("不要气馁!")
          } else {
            $(".red-body h1").html("恭喜您!中奖了")
            $(".red-body p").html(item.prizeName)
          }

        } else {
          $(".red-body h1").html("抱歉!")
          $(".red-body p").html("出现未知错误，请稍后再试")
        }
      })

    },
    showN(indexName) {

      if (this.isButton) {
        this.popupVisible = true;
        return
      }
      lotteryApi().then((res) => {
        if (res.httpCode == 200) {
          this.objectItem.forEach((item) => {
            if (item.goodsId == res.data.goodsId) {

              if (new Date() - this.clickTime > 2000 && this.bool) { //两次点击的间隔不能小于2秒
                var self = this

                /*console.log(222);*/

                $("#change").html(this.data);

                $("#mask-card").show();
                clearInterval(this.timer); //清除轮流选中动画
                $(".box li").removeClass("active"); //清除轮流滚动类名
                $(".box li").eq(indexName).addClass("open-card"); //添加翻牌
                //动画监听
                $(".box li").eq(indexName).on("animationend", () => {
                  $(".box li").eq(indexName).removeClass("open-card"); //移除翻牌动画
                  $(".box li").css({ //所有卡牌放到右下角
                    left: 512 / 75 + "rem",
                    top: 268 / 75 + "rem"
                  });
                  $("#mask-card").hide();
                  this.win(item);
                  $(".box li").eq(indexName).off("animationend"); //解绑动画监听
                });

              }

            }
          })
        } else {
          if (res.retCode == "10030001") {
            this.loginMenu();
          } else {
            this.$toast(res.retMsg)
          }
        }
      })

    },

    init() {
      var self = this;
      //卡牌归位动画

      for (var i = 0; i < this.length; i++) {
        (function(i) {

          var seat = setTimeout(() => {

            $(".box li").eq(i).css({
              left: self.initArr[i][0] + "rem",
              top: self.initArr[i][1] + "rem",
              backgroundImage:self.beganToDraw,
            });
            clearTimeout(seat);
          }, 300 * i);
        })(i);
      }

      //卡牌轮流选中动画
      setTimeout(() => {
        this.timer = setInterval(() => {
          this.bool = true; //卡牌归位，可以点击
          $(".box li").eq(this.index - 1).removeClass("active");
          this.index %= 6;
          $(".box li").eq(this.index).addClass("active");
          this.index++;
        }, 1000);
      }, 1000);
    }

  }
}
</script>
<style media="screen">
.fade-enter-active,
.fade-leave-active {
  transition: opacity .2s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */
  {
  opacity: 0;
}

.mint-indicator {
  position: relative;
  z-index: 2000;
}

.mint-popup {
  z-index: 200 !important;
}
</style>


<style scoped>
.photo-wrap {
  width: 170px;
  margin: 50px auto 0;
  position: relative;
  -webkit-transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  /*让其下一级子元素拥有3D效果，背面隐藏效果。如果没有该属性子元素-webkit-backface-visibility: hidden;无效*/
  transition: all 0.9s ease-in;
  transform-origin: 50% 50%;
}

.photo-wrap.wrap_back {
  -webkit-transform: rotateY(180deg);
}

.side-front {
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotateY(0deg);
}

.side-back {
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotateY(180deg);
}

.side {
  -webkit-backface-visibility: hidden;
}

.pop_box {
  border-radius: .08rem;
  position: relative;
  left: 0;
  width: 8rem;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  z-index: 400;
  padding-bottom: .5rem;
}

.isVodel {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000;
  z-index: 100;
}

.tell_tit {
  width: 100%;
  height: 1.80rem;

  background-size: 100% 100%;
}

.pop-idea {
  line-height: 1.80rem;
  font-size: .5rem;
  color: #fff;
  text-align: center;
  font-weight: 700;
  background-color: #00aca6;
  background-image: url(~img/clold.png);

}

.info-set {
  text-align: center;
}

.writer {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #989594;
  display: -ms-flexbox;
  display: flex;
  padding-top: .1rem;
  padding-bottom: .1rem;
}

input[type=text] {
  -webkit-appearance: none;
  background: none;
  outline: none;
}

.writer input {
  -ms-flex: 1;
  flex: 1;
  color: #5a5340;
  font-size: 14px;
  line-height: .387rem;
  border: none;
}

.print-code {
  position: absolute;
  width: 1.81rem;
  height: .65rem;
  right: .26rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  margin: 0;
  padding: 0;
  outline: none;
  font-family: Hiragino Sans GB, "sans-serif";
}

.writer span {
  text-align: center;
  width: 1.95rem;
  color: #4d3932;
  font-size: 14px;
  line-height: 1.04rem;
}

#btn {
  position: absolute;
  width: 1.937rem;
  height: .78rem;
  line-height: .8rem;
  right: .26rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: .585rem;
  text-align: center;
  color: #fff;
  background: #fc817e;
  font-size: 12px;
}

.sure_btn {
  margin-top: .39rem;
  line-height: .845rem;
  width: 5.46rem;
  background: #fc817e;
  color: #fff;
  font-size: 14px;
  margin-left: auto;
  margin-right: auto;
  border-radius: .585rem;
  border-bottom: 4px solid #dc625d;
  text-align: center;
}



.close-btn {
  font-size: 14px;
  margin: 0;
  padding: 0;
  outline: none;
  font-family: Hiragino Sans GB, "sans-serif";
  position: absolute;
  top: -.247rem;
  right: -.247rem;
}

.close-btn img {
  width: .546rem;
  height: .546rem;
}
</style>

css代码

@charset "utf-8";
* {
  font-family: 'Microsoft Yahei';
}
/* body {
    background:#ffe771;
} */
#wrap {
/* background:#ed392b; */
}
.left_logo {
    float: left;
    margin-top: 4%;
    margin-left: .4rem;
    width: 40%;
}
img{border:none; outline:none;}
.banner{ width: 70%;
    padding-top: 2rem;
    margin-left: auto;
    margin-right: auto;}
.banner img{ display:block;width:100%;}

/*主体*/
.main {
margin-top: .8rem

}
.main h2 {
  margin: 0rem auto 0.2rem auto;
  width: 4.4rem;
  height: 0.69333333rem;
  background-color: #ffe771;
  text-align: center;
  line-height: 0.69333333rem;
  font-size: 0.26666667rem;
  font-weight: normal;
  color: #bc5700;
  border-radius: 0.34666667rem;
}
.btn_group{
      overflow: hidden;
    margin-bottom: .5rem;
    width: 6.5rem;
    margin-top: .8rem;
    margin-left: auto;
    margin-right: auto;
 }
 .add_btn {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.act_rule {
  width: 2.99rem;
  height: 0.88rem;
  color: #ca7314;
  text-align: center;
  line-height: 0.78rem;
  background: url("~img/zct_rule.png") no-repeat;
  background-size: 100% 100%;
  font-size: 12px;
}

.luck_recond {
  width: 2.99rem;
  height: 0.88rem;
  color: #ca7314;
  text-align: center;
  line-height: 0.78rem;
  background: url("~img/luck_recond.png") no-repeat;
  background-size: 100% 100%;
  font-size: 12px;
}


a.a1{ background-color:#efc84d; margin:0.2rem auto 0.4rem auto;}
a.a2{ background-color:#ee7323}
/*游戏区域*/
.box {
  position: relative;
  width: 100%;
  height: 7.2rem;
}
.box li {
  position: absolute;
  left: 6.82666667rem;
  top: 3.57333333rem;
  width: 2.73333333rem;
  height: 3.57333333rem;
  background-image: url("../img/card1.png");
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
/*卡牌摆动动画*/
.box li.active {
  background-image: url("../img/card2.png");
  -o-animation: shaking 0.5s ease-in-out;
  -ms-animation: shaking 0.5s ease-in-out;
  -moz-animation: shaking 0.5s ease-in-out;
  -webkit-animation: shaking 0.5s ease-in-out;
  animation: shaking 0.5s ease-in-out;
}
@keyframes shaking {
  0%,
  100% {
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  33% {
    -o-transform: rotateY(-20deg);
    -ms-transform: rotateY(-20deg);
    -moz-transform: rotateY(-20deg);
    -webkit-transform: rotateY(-20deg);
    transform: rotateY(-20deg);
  }
  66% {
    -o-transform: rotateY(20deg);
    -ms-transform: rotateY(20deg);
    -moz-transform: rotateY(20deg);
    -webkit-transform: rotateY(20deg);
    transform: rotateY(20deg);
  }
}
/*卡牌翻开动画*/
.box li.open-card {
  left: 3.64rem !important;
  top: 0 !important;
  z-index: 10;
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -o-animation: openCard .5s .5s linear forwards;
  -ms-animation: openCard .5s .5s linear forwards;
  -moz-animation: openCard .5s .5s linear forwards;
  -webkit-animation: openCard .5s .5s linear forwards;
  animation: openCard .5s .5s linear forwards;
}
@keyframes openCard {
  10%,
  30%,
  50% {
    -o-transform: scale(1.5) translateX(-10px);
    -ms-transform: scale(1.5) translateX(-10px);
    -moz-transform: scale(1.5) translateX(-10px);
    -webkit-transform: scale(1.5) translateX-(10px);
    transform: scale(1.5) translateX(-10px);
  }
  20%,
  40%,
  60% {
    -o-transform: scale(1.5) translateX(10px);
    -ms-transform: scale(1.5) translateX(10px);
    -moz-transform: scale(1.5) translateX(10px);
    -webkit-transform: scale(1.5) translateX(10px);
    transform: scale(1.5) translateX(10px);
  }
  100% {
    -o-transform: scale(1.5) translateX(90deg);
    -ms-transform: scale(1.5) translateX(90deg);
    -moz-transform: scale(1.5) translateX(90deg);
    -webkit-transform: scale(1.5) translateX(90deg);
    transform: scale(1.5) rotateY(90deg);
  }
}
/*图案*/
.box li img {
  display: block;
  margin: 0.46666667rem auto;
  width: 1.73333333rem;
  height: 2.53333333rem;
}
/*翻牌遮罩*/
#mask-card {
  display: none;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}

/*规则弹窗背景色*/
#mask-rule .box-rule {
  background-color: #fe5c51;
}
#mask-rule .box-rule .star {

}

.activity,.activity2{ background-color:#ed392b; padding:0.3rem 0rem; }
.activity2{  padding:0.6rem 0rem; }
.activity-amin{width:85%; margin:0rem auto;}
.activity-amin h2{ margin: 0rem auto 0.4rem auto;
  width: 4.4rem;
  height: 0.8rem;
  background-color: #ffe771;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.4rem;
  color: #bc5700;
  border-radius: 0.34666667rem;
  letter-spacing:0.2rem
  }
 .activity-amin p{
  width: 100%;
  line-height: 0.6rem;
  font-size: 0.2rem;
  color: #fff;
  letter-spacing:0.1rem;
  margin-bottom:0.6rem;
  }

 .wt1{ width:94%;  display:block; border:none; background-color:#FFF; padding:5% 3%; border-radius:0.34666667rem; font-size: 0.4rem; margin-bottom:6%}
 .wt2{width:50%; float:left}
 .wt3{ width:40%; float:right; background-color:#efc84d; color:#FFF}
 .wt4{width:100%;background-color:#efc84d; color:#FFF; font-size:0.6rem;}
 .prompt1{clear:both; width:100%; text-align:center; font-size: 0.4rem; margin-bottom:6%; color:#ffe66f; display:none}
 .tb0{ width:100%; margin-bottom:6%; }
 .tb0 tr th{ width:20%; line-height:0.8rem; text-align:center; color:#efc84d}
 .tb0 tr th:nth-child(1){width:42%; }
 .tb0 tr th:nth-child(2){width:38%; }
 .tb0 tr td{ width:20%; line-height:0.6rem; text-align:center; color:#FFF}