<template>
  <div class="daka" :style="isTouchingScoller?'overflow-y:hidden':'overflow-y:scroll'" @touchstart="stopDefault"
       @touchmove="stopDefault" @touchend="stopDefault">
    <img class="banner" src="../assets/daka_top_banner.jpg" alt="">
    <div class="daka_container">
      <div class="top_container">
        <NoticeBonus></NoticeBonus>
        <div class="time_tip">每日 <span>{{dakaStatus.daka_start}}-{{dakaStatus.daka_end}}</span> 打卡赢取奖金</div>
        <calendar ref="calendar" @clickDay="clickDay"></calendar>
        <div class="money_container"
             v-if="(!not_signup&&!userStatus.daka_signup)||(userStatus.days==7&&userStatus.daka_done)">
          <!--<div class="money_tip">今日激励金100元,成功报名人数2000人</div>-->
          <div class="money_content">
            <div class="money_content_left">
              <div class="money_left_title">
                赢取奖金
              </div>
              <div class="money_left_text">
                <span>{{dakaStatus.bet_bonus}}</span> 元
              </div>
            </div>
            <div class="money_content_right">
              <div class="money_right_title">
                收益率
              </div>
              <div class="money_right_text">
                <span>{{dakaStatus.bet_rate}}</span> %
              </div>
            </div>
          </div>
        </div>
        <div class="btn_container">
          <div class="rank_btn" @click="toggleRank" v-if="!pageStatus.largeBtnStatus">
            <img class="btn_icon" src="../assets/daka_ic_record.png" alt="">
            <div class="btn_text">我的记录</div>
          </div>
          <div class="rank_btn" @click="showFree" v-else>
            <img class="btn_icon" src="../assets/daka_ic_free.png" alt="">
            <div class="btn_text">免押金报名</div>
          </div>
          <div class="main_msg_container">
            <div class="main_msg" v-if="pageStatus.mainBtnStatus==1">
              <div class="main_msg_time" v-if="pageStatus.mainMsgTitleStatus==0">{{userStatus.daka_time|dakaFilter}}
                完成打卡
              </div>
              <div class="main_msg_title" v-else>{{pageStatus.mainMsgTitleStatus==1?'打卡失败':'本期未报名'}}</div>
              <div class="main_msg_tip">{{getMainMsgTipText()}}</div>
            </div>
            <div class="main_btn" @click="toggleShareFriendModel" v-else>
              立即打卡
            </div>
          </div>
          <div class="reborn_btn" @click="showReborn">
            <img class="btn_icon" src="../assets/daka_ic_heart.png" alt="">
            <div class="btn_text">复活卡</div>
          </div>
        </div>
        <div class="large_btn" @click="payToSign" v-if="pageStatus.largeBtnStatus">报名下一期</div>
        <div class="daka_num"><img src="../assets/people_num_ic.png" alt="">已有{{dakaStatus.daka_num}}人成功打卡</div>
        <!--<div class="large_btn" @click="dakaAction">立即打卡</div>-->
        <!--<div class="large_reborn_btn" @click="doReborn">立即复活</div>-->
      </div>
      <div class="line"></div>
      <div class="bottom_container">
        <div class="bottom_title">
          <div class="bottom_title_left"><img src="../assets/daka_ic_know.png" alt=""> 打卡须知</div>
          <div class="bottom_title_right" @click="toggleExample">打卡案例 <img src="../assets/daka_example.png" alt="">
          </div>
        </div>
        <div class="bottom_content">
          <div class="rule_item" v-for="(item,index) in ruleList">
            {{item}}
            <span class="link" v-if="index==ruleList.length-1" @click="jumpToRule">《每天读书打卡规则》</span>
          </div>
        </div>
      </div>
    </div>
    <div class="user_msg">
      <img class="ic_user_msg" @click="toUserCenter" src="../assets/daka_ic_my.png" alt="">
      我的
    </div>
    <Rank v-if="isShowRank" @rankTouching="rankTouching" @closeRank="toggleRank" :rankStatus="rankStatus"
          @doSign="payToSign" :isShowRank="isShowRank"></Rank>
    <div class="modal" v-if="showDakaSuccessModal">
      <DakaSuccess v-on:close="closeDakaSuccess" v-on:nextSign="payToSign"></DakaSuccess>
    </div>
    <div class="modal" v-if="showRebornModal">
      <Reborn
        v-on:close="closeReborn"
        v-bind:v_data="rebirth_data"
        v-on:rebirth="rebirthAction"
        v-on:showShareImg="showShareImg"
      ></Reborn>
    </div>
    <div class="shareImgDialog" v-if="isShowShareImg">
      <div class="shareImgMass"></div>
      <div class="shareImgContent" @click="showShareImg">
        <img class="shareImg" :src="shareImgUrl" @click="stopPop" @load="imgLoaded"/>
        <div class="shareTip" v-if="isImgLoaded">长按上方图片发送给好友</div>
        <div class="shareTip" style="margin-top: 0" v-if="isImgLoaded">注：关注公众号后报名才有效</div>
      </div>
    </div>
    <div class="modal" v-if="showFreeModal">
      <Free
        v-bind:page_type="1"
        v-on:close="closeFree"
        v-bind:v_data="contract_data"
        @showModal="showModal"
        @success="showSuccess"
        :days="userStatus.days||0"
      ></Free>
    </div>
    <PayFailModal v-if="isShowPayFail" @close="togglePayFail"></PayFailModal>
    <shareFriendModel v-if="isShowShareFriend" @close="toggleShareFriendModel"></shareFriendModel>
    <ExampleModal v-if="isShowExample" @close="toggleExample"></ExampleModal>
    <div class="modal" v-if="modalShown">
      <Modal v-on:close="closeModal"
             v-on:confirmModal="confirmModal"
             v-bind:title="modalTitle"
             v-bind:option="modalOption"
             v-bind:desc="modalDesc">
      </Modal>
    </div>
  </div>
</template>

<script>
  import NoticeBonus from "@/components/NoticeBonus.vue";
  import shareFriendModel from "@/components/shareFriendModel.vue";
  import DakaSuccess from "@/components/DakaSuccess.vue";
  import calendar from "@/components/calendar.vue";
  import Rank from "@/components/Rank.vue";
  import Modal from "@/components/Modal.vue";
  import Reborn from "@/components/Reborn.vue";
  import Free from "@/components/Free.vue";
  import PayFailModal from "@/components/PayFailModal.vue";
  import ExampleModal from "@/components/ExampleModal.vue";
  import {
    shareContent,
    dakaStatus,
    daka,
    userCards,
    track,
    dailyShare,
    dakaPay,
    liinShare
  } from "@/components/axios/api";

  export default {
    name: "Daka",
    components: {
      ExampleModal,
      shareFriendModel,
      NoticeBonus,
      Free,
      Rank,
      Modal,
      calendar,
      DakaSuccess,
      Reborn,
      PayFailModal
    },
    data() {
      return {
        isShowExample: false,
        isFollow: false,
        isShowPayFail: false,
        not_signup: true,
        next_signup: false,
        contract_data: {},
        showFreeModal: false,
        isShowShareFriend: false,
        ruleList: [],
        dakaStatus: {},
        userStatus: {},
        isShowRank: false,
        rankStatus: 0,
        isTouchingScoller: false,
        showDakaSuccessModal: false,
        showRebornModal: false,
        rebirth_data: null,
        modalTitle: "",
        modalDesc: "",
        modalOption: "",
        modalShown: false,
        isShowShareImg: false,
        isImgLoaded: false,
        shareImgUrl: "",
        current_date: "",
        pageStatus: {
          mainBtnStatus: 0,//主按钮状态 0：立即打卡 1：不显示按钮，显示主打卡信息
          mainMsgTitleStatus: 0,//主信息标题状态 0：显示打卡成功时间 1：显示打卡失败 2：显示本期未报名
          mainMsgTipStatus: 0,//主信息提示状态 0：显示预计到账时间  1.等待复活 2.已复活 3.报名下一期
          largeBtnStatus: 0//大按钮状态 0：不显示 1：报名下一期
        }
      }
    },
    methods: {
      toggleExample() {
        this.isShowExample = !this.isShowExample
      },
      jumpToRule() {
        this.$router.push({name: "Rule"})
      },
      queryPayImage() {
        liinShare().then(res => {
          if (res.code == 0) {
            localStorage.setItem("is_follow", res.data.is_follow);
            this.isFollow = res.data.is_follow
          }
        });
      },
      togglePayFail() {
        this.isShowPayFail = !this.isShowPayFail
      },
      showSuccess() {
        this.showModal("温馨提示", "报名成功", {
          scb: () => {
            if (this.isFollow == 1) {
              this.$router.push({name: "Read"})
            } else {
              this.$router.push({name: "Success"})
            }
          }
        });
      },
      showFree(e) {
        e.stopPropagation();
        track("free_contract_show");
        if (localStorage.getItem("first_show_free") == 1) {
          localStorage.setItem("first_show_free", 2);
          this.canShowFree = false;
        } else {
          this.canCheckShowFree = false;
          this.canShowFree = false;
        }

        userCards().then(res => {
          console.log("获取免契约金数据", res);
          let data = {
            card: res.data.contract_card,
            cnt: res.data.contract_cnt
          };
          this.current_date = new Date(res.date);
          // if (
          //   // 如果明天没报名，而且还有免契约金卡，则可以使用
          //   !this.date_status[1].user_status.daka_signup &&
          //   res.data.contract_card > 0
          // ) {
          //   data.can_get = true;
          //   // 其他情况，显示报名下期比赛
          // } else {
          // data.can_get = false;
          // }
          this.contract_data = JSON.parse(JSON.stringify(data));
          this.showFreeModal = true;
        });
      },
      closeFree() {
        this.showFreeModal = false;
      },
      showFriendTip() {
        this.showModal("恭喜你打卡成功", "需分享至朋友圈才能成功打卡",
          {
            showIcon: true,
            btnText: "我知道了",
            changeImportant: true
          })
      },
      toggleShareFriendModel(e) {
        this.isShowShareFriend = !this.isShowShareFriend
        if (e && !this.isShowShareFriend) {
          this.showFriendTip()
        }
      },
      clickDay(type, day) {
        console.log(type, day)
        if (type == 3) {
          this.showModal("太棒了！当日打卡已完成~", "查看当日学习课程", {
            btnText: "去查看",
            showCancel: true,
            changeImportant: true,
            scb: () => {
              this.$router.push({name: "Courses"})
            }
          })
        } else if (type == 2) {
          let today = new Date().getDate()
          if (today == day.day) {
            this.showModal("今天还没打卡！", "点击下方黄色按钮进入打卡噢！", {
              btnText: "我知道了",
            })
          } else {
            this.showModal("很遗憾，打卡失败！", "这一天你可能太忙忘记打卡了噢", {
              btnText: "继续努力",
            })
          }
        } else if (type == 4) {
          this.showModal("未开放课程", "别着急哦，每天开放一节课！", {
            btnText: "我知道了",
          })
        }
      },
      payToSign() {
        let days = this.userStatus.days || 0
        // dakaPay(days).then(response => {
        //   this.current_date = new Date(response.date);
        //   if (response.code == 1) {
        //     this.showModal("温馨提示", response.msg);
        //     return;
        //   }
        //   let result = response.data;
        //   console.log("请求打卡支付数据", result);
        //   if (result) {
        //     WeixinJSBridge.invoke(
        //       "getBrandWCPayRequest",
        //       {
        //         appId: result.appId, //公众号名称，由商户传入
        //         timeStamp: `${result.timeStamp}`, //时间戳，自1970年以来的秒数
        //         nonceStr: result.nonceStr, //随机串
        //         package: result.package,
        //         signType: result.signType, //微信签名方式：
        //         paySign: result.paySign //微信签名
        //       },
        //       // result,
        //       res => {
        //         console.log("支付调用结果", res);
        //         if (res.err_msg == "get_brand_wcpay_request:ok") {
        //           // 使用以上方式判断前端返回,微信团队郑重提示：
        //           //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        //           // 支付成功后的回调函数
        //           console.log("支付成功");
        //           this.showModal("温馨提示", "报名成功", {
        //             scb: () => {
        //               if (this.isFollow == 1) {
        //                 this.$router.push({name: "Read"})
        //               } else {
        //                 this.$router.push({name: "Success"})
        //               }
        //             }
        //           });
        //           // this.dateSelect(2);
        //           // localStorage.setItem("is_every", 0)
        //           // location.replace("#/Success");
        //         }
        //         if (res.err_msg == "get_brand_wcpay_request:fail") {
        //           this.togglePayFail()
        //           // this.showModal("温馨提示", "支付服务繁忙，请稍后重试");
        //         }
        //         if (res.err_msg == "get_brand_wcpay_request:cancel") {
        //           this.togglePayFail()
        //           console.log("支付取消");
        //         }
        //       }
        //     );
        //   }
        // });
      },
      stopPop(e) {
        e.stopPropagation()
      },
      imgLoaded() {
        console.log("图片加载完成")
        this.isLoading = false
        this.isImgLoaded = true
      },
      showReborn() {
        window.event.stopPropagation();
        // track("rebirth_show");

        if (localStorage.getItem("first_show_reborn") == 1) {
          localStorage.setItem("first_show_reborn", 2);
          this.canShowReborn = false;
        } else {
          this.canCheckShowReborn = false;
          this.canShowReborn = false;
        }

        userCards().then(res => {
          console.log("获取复活卡数据", res);
          let data = {
            card: res.data.rebirth_card,
            cnt: res.data.rebirth_cnt
          };
          this.current_date = new Date(res.date);
          let deadline = new Date()
          deadline.setHours(21)
          deadline.setMinutes(0)
          deadline.setSeconds(59)
          // console.log("复活测试", this.date_status[1].user_status.daka_signup, !this.date_status[1].user_status.daka_done, this.current_date.getHours(), this.current_date.getHours())
          if (
            // 如果今天报名了，在8点-12点之间，还没打卡，而且有复活卡，则可以用
          // this.date_status[0].user_status.daka_signup &&
          // !this.date_status[0].user_status.daka_done &&
            this.current_date.getHours() >= 21 &&
            this.current_date.getHours() < 24 &&
            this.userStatus.daka_signup && !this.userStatus.daka_done &&
            res.data.rebirth_card > 0
          ) {
            data.can_get = true;
          } else {
            data.can_get = false;
          }
          this.rebirth_data = JSON.parse(JSON.stringify(data));
          this.showRebornModal = true;
        });
      },
      showShareImg(type) {
        console.log("分享图点击", type)
        this.shareImgUrl = ""
        this.isShowShareImg = !this.isShowShareImg
        if (this.isShowShareImg) {
          this.isLoading = true
          dailyShare(type).then(res => {
            if (res.code === 0) {
              this.shareImgUrl = res.data.img_url
              console.log(this.shareImgUrl)
            } else {
              this.isLoading = false
            }
          }).catch(err => {
            this.isLoading = false
          })
        }
      },
      closeReborn() {
        this.showRebornModal = false;
      },
      dakaSuccessHandle() {
        this.refreshCalendar()
        this.getDakaStatus()
        this.showModal("恭喜你打卡成功", "坚持学习，向三日总奖金迈进", {
          btnText: "继续努力"
        })
      },
      dakaAction() {
        if (this.userStatus.daka_done) {
          return
        }
        daka(0)
          .then(res => {
            console.log("打卡数据", res);
            if (res.code == 1) {
              this.showModal("温馨提示", res.msg, {btnText: "我知道了"});
              return;
            }
            this.dakaSuccessHandle()
          })
          .catch(err => {
            console.log("打卡请求报错", err);
            this.showModal("温馨提示", "服务器繁忙，请稍后重试");
          });
      },
      rebirthAction() {
        daka(1)
          .then(res => {
            if (res.code == 1) {
              this.showModal("温馨提示", res.msg);
              return;
            }
            this.closeReborn();
            this.dakaSuccessHandle()
            // this.showDakaSuccess();
            // this.dateSelect(1)
            // this.dateSelect(1);
          })
          .catch(() => {
          });
      },
      showDakaSuccess() {
        this.showDakaSuccessModal = true;
      },
      closeDakaSuccess() {
        this.showDakaSuccessModal = false;
        this.button_state_num = 0
      },
      rankTouching(e) {
        this.isTouchingScoller = e
      },
      stopDefault(e) {
        if (!this.isTouchingScoller && this.isShowRank) {
          e.preventDefault()
        }
      },
      refreshCalendar() {
        let calendar = this.$refs.calendar
        calendar.getList()
      },
      showModal(title, desc, option) {
        this.modalTitle = title || "";
        this.modalDesc = desc || "";
        this.modalOption = option || {}
        this.modalShown = true;
      },
      closeModal() {
        this.modalShown = false;
      },
      confirmModal(scb) {
        scb && scb()
        this.modalShown = false;
      },
      doReborn() {

      },
      toggleRank() {
        this.$router.push({name: "Record"})
        // this.isShowRank = !this.isShowRank
      },
      toUserCenter() {
        this.$router.push({name: "UserCenter"})
      },
      getDakaStatus() {
        dakaStatus().then(res => {
          if (res.code === 0) {
            this.ruleList = res.data.daka_faq2
            this.not_signup = res.data.not_signup
            this.next_signup = res.data.next_signup
            this.dakaStatus = res.data.daka_info
            this.userStatus = res.data.daka_info.user_status
            this.statusHandle()
          }
        })
      },
      getMainMsgTipText() {
        switch (this.pageStatus.mainMsgTipStatus) {
          case 0:
            return '押金预计今日24点前返还'
          case 1:
            return '点击复活卡按钮立即复活'
          case 2:
            return '点击复活卡按钮立即复活'
          case 3:
            return '点击下方按钮报名下一期'
        }
      },
      statusHandle() {
        let tds = this.userStatus.daka_signup//今日报名状态
        let tdd = this.userStatus.daka_done//今日打卡状态
        let mainBtnStatus = 0//主按钮状态 0：立即打卡 1：不显示按钮，显示主打卡信息
        let mainMsgTitleStatus = 0//主信息标题状态 0：显示打卡成功时间 1：显示打卡失败 2：显示本期未报名
        let mainMsgTipStatus = 0//主信息提示状态 0：显示预计到账时间  1.等待复活 2.已复活 3.报名下一期
        let largeBtnStatus = 0//大按钮状态 0：不显示 1：报名下一期
        let now = new Date()
        let deadline = new Date()
        deadline.setHours(22)
        deadline.setMinutes(0)
        deadline.setSeconds(59)
        if (!tds) {
          //未报名，显示未报名页
          mainBtnStatus = 1
          mainMsgTitleStatus = 2
          mainMsgTipStatus = 3
          largeBtnStatus = 1
        } else {
          // 报了名
          if (tdd) {
            //今天已打卡
            mainBtnStatus = 1
          } else {
            //今天未打卡
            if (now <= deadline) {
              //打卡时间
            } else {
              //非打卡时间
              mainBtnStatus = 1
              mainMsgTitleStatus = 1
              mainMsgTipStatus = 1
            }
          }
        }

        //大按钮状态
        if ((this.userStatus.days == 7 && !this.next_signup && mainBtnStatus == 1) || !tds) {
          largeBtnStatus = 1
        }

        this.pageStatus = {
          mainBtnStatus: mainBtnStatus,//主按钮状态 0：立即打卡 1：不显示按钮，显示主打卡信息
          mainMsgTitleStatus: mainMsgTitleStatus,//主信息标题状态 0：显示打卡成功时间 1：显示打卡失败 2：显示本期未报名
          mainMsgTipStatus: mainMsgTipStatus,//主信息提示状态 0：显示预计到账时间  1.等待复活 2.已复活 3.报名下一期
          largeBtnStatus: largeBtnStatus//大按钮状态 0：不显示 1：报名下一期
        }
        console.log("this.pageStatus", this.pageStatus)
      },
      initFriendLine() {
        let url = location.href.split("#")[0]; //获取锚点之前的链接
        // url = url.split("?")[0];
        let links = url + "#/SignUp";
        shareContent("pyq").then(result => {
          console.log("pyq", result)
          wx.onMenuShareTimeline({
            title: result.data.title, // 分享标题
            link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: result.data.img_url, // 分享图标
            success: (res) => {
              setTimeout(() => {
                //回调要执行的代码
                // alert(3)
                if (this.$router.history.current.name != "Daka") {
                  return
                }
                console.log("pyq sc", res)
                // 用户点击了分享后执行的回调函数
                if (this.isShowShareFriend) {
                  this.toggleShareFriendModel()
                }
                this.dakaAction()
              }, 500);
              // console.log("分享朋友圈")
              // alert(123123)
            },
            cancel: (res) => {
              // alert(5)
            },
            fail: (res) => {
              // alert(4)
              console.log("pyq fail", res)
            }
          })
        })
      },
    },
    mounted() {
      setTimeout(() => {
        this.initFriendLine()
      }, 500)
    },
    created() {
      this.queryPayImage()
      // this.showDakaSuccess();
      this.getDakaStatus()
    },
    filters: {
      periodFillter(period) {
        if (period) {
          return period;
        } else {
          return "";
        }
      },
      dakaFilter(date) {
        if (date) {
          return date.substr(11, 10)
        } else {
          return ""
        }
      }
    }

  }
</script>

<style lang="stylus" scoped>
  .link {
    color #3399ea
  }

  .modal {
    position: fixed;
  }

  .shareImgDialog {
    text-align center
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .shareImgMass {
    background: #000;
    opacity: 0.7;
    width: 100%;
    height: 100%;
  }

  .shareImgContent {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .shareImgContent img {
    width: 6.4rem;
  }

  .shareTip {
    font-size: .36rem;
    color: #fff;
    margin-top: .3rem;
    font-weight: 700;
    width: 100%;
    padding: 0.13rem 0;
    background: #5ab640;
  }

  .daka {
    width 100%
    height 100%
    background #ffffff
    position relative
    /*-webkit-overflow-scrolling: touch*/
  }

  .daka_container {
    width 100%;
    height 100%
    position absolute
    left 0
    top 0
  }

  .banner {
    width 100%;
  }

  .user_msg {
    position absolute;
    top .7rem
    right .2rem
    text-align center
    font-size .28rem
    color #ffffff
  }

  .ic_user_msg {
    width 0.32rem
    margin: 0 auto .1rem;
    display block
  }

  .btn_icon {
    width .64rem
    margin-bottom .1rem
  }

  .time_tip {
    margin-top .8rem
    font-size .28rem
    color #ffffff
    text-align center
  }

  .time_tip span {
    border-bottom 0.01rem solid #ffe53d
    color #ffe53d
  }

  .money_container {
    margin .1rem auto 0
    width 6.9rem
    box-shadow 0px 2px 14px 0px rgba(180, 197, 200, 0.5);
  }

  .money_tip {
    font-size: 0.26rem;
    font-family: Microsoft YaHei;
    color: rgba(165, 165, 165, 1);
    text-align center
    padding .3rem 0
  }

  .money_content {
    display flex
    text-align center
    font-size .28rem
    justify-content center
    padding-bottom .2rem
    padding-top .3rem
  }

  .money_content_left, .money_content_right {
    margin: 0 0.6rem;
  }

  .money_left_text, .money_right_text {
    margin-top .2rem
    color #1AD3D3
    font-weight bold
  }

  .money_left_text span, .money_right_text span {
    font-size .6rem
  }

  .btn_container {
    display flex
    justify-content space-between
    font-size .24rem
    padding .3rem 0 0.2rem
  }

  .rank_btn, .reborn_btn {
    flex 1
    display flex
    flex-direction column
    align-items center
    font-size .24rem
    color rgba(90, 90, 90, 1)
  }

  .main_btn {
    width 4rem
    height .88rem
    display flex
    justify-content center
    align-items center
    background #FFC30F
    font-size .36rem
    font-weight bold
    color #ffffff
    border-radius .44rem
    margin: 0.15rem 0 .2rem;
  }

  .main_msg_container {
    text-align center
  }

  .main_msg_time {
    font-size .36rem
    color rgba(255, 195, 15, 1)
    font-weight bold
    margin-top .05rem
  }

  .main_msg_title {
    font-size .36rem
    color rgba(136, 136, 136, 1)
    font-weight bold
    margin-top .05rem
  }

  .main_msg_tip {
    font-size .24rem
    color rgba(165, 165, 165, 1)
    margin-top .2rem
  }

  .large_btn, .large_reborn_btn {
    width 6.9rem
    height .88rem
    display flex
    justify-content center
    align-items center
    background #FFC30F
    font-size .36rem
    font-weight bold
    color #ffffff
    border-radius .44rem
    margin: 0.1rem auto .4rem;
  }

  .daka_num {
    display flex
    justify-content center
    align-items center
    font-size .24rem
    color rgba(191, 191, 191, 1)
    margin .2rem 0 .3rem
  }

  .daka_num img {
    width .28rem
    display block
    margin-right .1rem
  }

  .large_reborn_btn {
    background #ff9186
  }

  .line {
    height .2rem
    background #F2F2F2
  }

  .bottom_container {
    padding 0 0.4rem
  }

  .bottom_title {
    padding .2rem 0
    color #1ad3d3
    font-size .28rem
    border-bottom .01rem solid rgba(240, 240, 240, 1)
    display flex
    justify-content space-between
    align-items center
  }

  .bottom_title_left {
    display flex
    justify-content center
    align-items center
  }

  .bottom_title_left img {
    width .28rem
    display block
    margin-right .1rem
  }

  .bottom_title_right {
    color #1AD3D3
    display flex
    justify-content center
    align-items center
  }

  .bottom_title_right img {
    width .32rem
    display block
    margin-left .1rem
  }

  .rule_item {
    font-size: .26rem;
    color: #5a5a5a;
    /* margin: .0rem 0; */
    line-height: 2;
    letter-spacing: .005rem;
  }
</style>
