<template name="know">
  <div :style="styleData.waitop" ref="know" @click="styleClick('click', 'know')"
    @mousemove="styleClick('mousemove', 'know')" @mouseout="styleClick('mouseout')">
    <div class="f-tac">
      <!-- 奖品 -->
      <div class="draw-detail-sku" :style="styleData.prizeBack" v-for="(item, i) in prizeList" :key="i">
        <div :style="styleData.prizeDetail">
          <div class="drawShowYhq">
            <img class="drawShowYhq1" :src="item.showImg" />
            <div class="back" v-if="item.prizeType == '1'">京豆</div>
            <div class="back" v-if="item.prizeType == '2'">优惠券</div>
            <div class="back" v-if="item.prizeType == '3'">实物</div>
            <div class="back" v-if="item.prizeType == '4'">积分</div>
            <div class="back" v-if="item.prizeType == '5'">专享价</div>
            <div class="back" v-if="item.prizeType == '6'">红包</div>
            <div class="back" v-if="item.prizeType == '7'">礼品卡</div>
            <div class="back" v-if="item.prizeType == '8'">京东E卡</div>
            <div class="back" v-if="item.prizeType == '9'">plus会员卡</div>
            <div class="back" v-if="item.prizeType == '10'">爱奇艺会员卡</div>
          </div>
          <div style="width: 66%">
            <div class="addShopNewContent">
              <div class="addShopNewJifen">
                <div :style="styleData.fib2">
                  {{ item.prizeName }}
                </div>
              </div>
                
            </div>
            <div class="remain" :style="styleData.remain">奖品剩余：{{item.leftNum}}份</div>
          </div>
        </div>
      </div>
      <!-- 账号信息,复活卡 -->
      <div :style="styleData.lifeInfo">
        <div class="lifeInfoBack">
          <div class="user-info">
            <div class="userName">
              <div class="userImg" style="position: relative">
                <img :src="dataList.userImg" alt class="avatar" />
              </div>
              <div class="pin" :style="styleData.pin">
                {{ dataList.nickName }}
              </div>
            </div>
            <div class="userName">
              <img style="width: 1.11rem; height: 0.36rem; margin-right: 0.17rem"
                src="//img10.360buyimg.com/imgzone/jfs/t1/155589/7/21788/4824/61a9fd14Eeaa27f01/593d615c5fe78b3f.png" />
              <div class="anCount">{{ dataList.anCount }}</div>
            </div>
          </div>
          <div v-if="dataList.taskShareWaresVO" class="sharemiao">
            分享<span class="shareColor">{{
              dataList.taskShareWaresVO.finishNum
            }}</span>次获得<span class="shareColor">{{
              dataList.taskShareWaresVO.sendNum
            }}</span>次答题次数，每日最多分享<span class="shareColor">{{
              dataList.taskShareWaresVO.maxNum
            }}</span>次
          </div>
          <div :style="styleData.startAnswerQuestion" @click="boom(dataList.involvementFlag)"></div>
          <div class="wenzimiaoshu">注：答题前请先阅读活动规则</div>
          <!-- <div class="life-card">
            <div class="f-fl f-f1">
              <img
                :style="styleData.lifeCardImg"
                :src="styleData.lifeCardImg.imageUrl"
              />
            </div>
            <div class="f-fl f-f2">
              <div :style="styleData.card">
                复活卡：
                <span :style="styleData.card1">
                  {{ fuhuka }}
                </span>
              </div>
              <div :style="styleData.wrong">答题出错,可以重新答题</div>
            </div>
            <div class="f-fl f-f3">
              <div :style="styleData.img" @click="handlefuhuo()">
                {{
                  dataList.shareStatus == 0
                    ? "分享考考TA"
                    : "分享好友获得复活卡"
                }}
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>

    <!-- <div :style="styleData.img1" v-if="
        dataList.taskShareWaresVO &&
        dataList.taskShareWaresVO.completeCount >=
          dataList.taskShareWaresVO.maxNum * dataList.taskShareWaresVO.finishNum
      ">
      分享好友获得答题次数
    </div>
    <div :style="styleData.img" @click="handlefuhuo()" v-else>
      {{ dataList.shareStatus == 0 ? "分享考考TA" : "分享好友获得答题次数" }}
    </div> -->
  </div>
</template>
<script>
import store from "../../../store/store";
import { allShare } from "../../../js/share.js";
import dateUtil from "../../../util/dateUtil.js";
import apis1 from "../../../util/apis1.js";
let { shareTask, followShopTask, followShop, startAnswer } = apis1;
import {
  PrizeResultPopComService,
  FollowShopFirstPopComService,
  MyPrizePopComService,
  qajoinPopComService,
  qasharePopComService,
} from "../../../util/comCreate.js";
import { Toast } from "vant";
import bus from "../../../util/bus.js";
let { drawPrize, addSkuTask, addSkuTaskTodo, fissionTask, getKnowData } = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      prizeList: [], //奖品列表
      oneClickPurchase: 1, // 一键加购
      dataList: {},
      status: 0,
      shopName: "",
      fuhuka: 0,
      winPrize: "0",
      followStatus: "0", //是否参与过
      newUser: "1", //是否需要新用户
      shopName: "",
      allFuhu: 0,
      numLife: 2, //当前剩余答题次数
      prizeListData: [],
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      myPrizePopComData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeType: "prizeType",
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeDate: "dayTime",
          prizeStatus: "activityType",
          realName: "realName",
          recevierPhone: "mobile",
          logisticsJson: "logisticsJson",
          nickName: "nickName",
        },
      },
      styleDataOld: {},
    };
  },
  computed: {
    contractFile() {
      return store.state.fenxiang;
    },
  },
  watch: {
    contractFile: {
      immediate: true,
      handler: function (newval) {
        if (newval) {
          // if (this.dataList.shareStatus != 0) {
          //   shareTask(this.dataList.taskShareWaresVO.taskId, "", (data) => {
          //     bus.$emit("fuhuka", this.fuhuka);
          //     store.commit("setFenXiang", false);
          //     this.initData();
          //   });
          // }
        }
      },
    },
  },
  created() {
    bus.$on("shareTask", (content) => {
      console.log(1234567890,content)
      shareTask(this.dataList.taskShareWaresVO.taskId, "", (data) => {
              bus.$emit("fuhuka", this.fuhuka);
              this.initData();
            });
    });
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
    // this.publicData.$on('datifenx', res => {
    //   if(res) {
    //     this.initData();
    //   }
    // });
  },
  updated() {
    bus.$on("fuhuka", (content) => {
      this.fuhuka = content;
    });
  },
  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          styleDataOld: this.styleDataOld,
          c_this: this,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      document.body.parentNode.style.overflowX = "hidden";
      if (this.isTemplate) {
        var datasAll = this.templateData;
        console.log(datasAll);
        if (datasAll) {
          // 关注店铺FLag
          var inFlag = 0;
          // 分享任务
          var shareTask = 0;
          this.prizeList = datasAll.draw.prizeList;
          this.prizeList.forEach(item =>{
            item.leftNum = item.totalPrizeNum
          })
          console.log(datasAll.draw.prizeList,'datasAll.draw.prizeList')
          // this.taskList = datasAll.basicTask.taskList
          if (datasAll.activeConditions) {
            if (datasAll.activeConditions.involvementFlag == 1) {
              inFlag = 1;
            }
          }
          if (datasAll.basicTask.taskList.length > 1) {
            shareTask = 1;
          }
          let taskList = datasAll.basicTask.taskList[0].taskType == '12' ? datasAll.basicTask.taskList[0].rule.shareActiveRule : null
          if (taskList) {
            this.dataList = {
              involvementFlag: inFlag,
              nickName: "预览",
              reviveCount: 0,
              shareStatus: shareTask,
              anCount: datasAll.basicTask.taskList[datasAll.basicTask.taskList.length - 1].rule.freeChargeRule.sendNum,
              taskShareWaresVO:{
                finishNum:taskList.finishNum,
                sendNum:taskList.sendNum,
                maxNum:taskList.dayLimit.limitNum
              },
              userImg:
                "https://img10.360buyimg.com/imgzone/jfs/t1/9529/39/3166/1273/5bd67241E2d74c9d5/19440fb8b44dd788.png",
            };
          } else {
            this.dataList = {
              involvementFlag: inFlag,
              nickName: "预览",
              reviveCount: 0,
              shareStatus: shareTask,
              anCount: datasAll.basicTask.taskList[datasAll.basicTask.taskList.length - 1].rule.freeChargeRule.sendNum,
              userImg:
                "https://img10.360buyimg.com/imgzone/jfs/t1/9529/39/3166/1273/5bd67241E2d74c9d5/19440fb8b44dd788.png",
            };
          }
          bus.$emit("data", this.dataList);
        } else {
          this.prizeList = [
            {
              showImg:
                "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
              prizeName: "1京豆",
              prizeType: '1',
               leftNum:'1'
            },
          ];
          this.dataList = {
            involvementFlag: 1,
            nickName: "预览",
            reviveCount: 0,
            shareStatus: 1,
            anCount: '1',
            userImg:
              "https://img10.360buyimg.com/imgzone/jfs/t1/9529/39/3166/1273/5bd67241E2d74c9d5/19440fb8b44dd788.png",
          };
        }
        return;
      } else {
        if (this.isTemplate) {
          // this.$toast("活动预览，仅供查看");
          this.prizeList = [
            {
              showImg:
                "https://img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
              prizeName: "1京豆",
              prizeType: '1',
               leftNum:'1'
            },
          ];
          this.dataList = {
            involvementFlag: 1,
            nickName: "预览",
            reviveCount: 0,
            shareStatus: 1,
            anCount: '1',
            userImg:
              "https://img10.360buyimg.com/imgzone/jfs/t1/9529/39/3166/1273/5bd67241E2d74c9d5/19440fb8b44dd788.png",
          };
          return;
        }
        getKnowData((data) => {
          bus.$emit("data", data.data);
          console.log(data, "data");
          this.dataList = data.data;
          this.fuhuka = data.data.reviveCount;
          if (data.data.taskShareWaresVO) {
            console.log(this.allFuhu);
            this.allFuhu = data.data.taskShareWaresVO.completeCount;
          }
          this.numLife = data.data.anCount - data.data.reviveCount;
          bus.$emit("fuhuka", this.fuhuka);
        });
        drawPrize((data) => {
          this.prizeList = data.data.prizeInfo;
          bus.$emit("prizeList", data.data.prizeInfo);
        });
      }
    },
    handlejiangpin() {
      if (this.isTemplate) {
        // this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      MyPrizePopComService.create(
        this.myPrizePopComData,
        this.isTemplate,
        (prizeRecordDetilClick) => {
          MyPrizePopComService.close();
        }
      );
    },
    handlefuhuo() {
      // 复活卡次数
      if (this.isTemplate) {
        // this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      console.log(this.dataList);
      if (this.dataList.shareStatus == 0) {
        var url = "";
        url = location.href;
        console.log(url + "url");
        allShare(this.isTemplate, this, (callBackData) => {
          console.log(callBackData, "callBackData" + url);
        });
      } else {
        var url = "";
        url = location.href;
        console.log(url + "url");
        allShare(this.isTemplate, this, (callBackData) => {
          console.log(callBackData, "callBackData" + url);
        });
        // shareTask(this.dataList.taskShareWaresVO.taskId, "", (data) => {
        //   console.log(data);
        //   if (this.allFuhu >= this.dataList.taskShareWaresVO.maxNum) {
        //   } else {
        //     if (data.resp_code == 0) {
        //       this.fuhuka++;
        //       this.allFuhu++;
        //     }
        //   }
        //   console.log(this.allFuhu);
        //   bus.$emit("fuhuka", this.fuhuka);
        // });
      }
      this.$store.commit("setResurrection", this.fuhuka);
    },
    boom(flag) {
      if (this.isTemplate) {
        // this.$toast("活动预览，仅供查看");
        return;
      }
      const self = this;
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      console.log(this.$store.state.Resurrection, "sssss");
      startAnswer((data) => {
        var follow = false;
        this.initData();
        console.log(data, "dataStartAnser");
        if (flag == 1) {
          if (data.data == 1) {
            follow = true;
            setTimeout(() => {
              Toast("没有答题次数了，获得答题次数可以继续答题，赶快去分享好友获得答题次数吧！");
            }, 500);
            return;
          } else if (data.data == 2) {
            follow = true;
            setTimeout(() => {
              Toast("答题已通关");
            }, 500);

            return;
          }
          followShop((item) => { });
          if (follow) {
            return;
          }
        } else {
          if (data.data == 1) {
            setTimeout(() => {
              Toast("没有答题次数了，获得答题次数可以继续答题，赶快去分享好友获得答题次数吧！");
            }, 500);
            return;
          } else if (data.data == 2) {
            setTimeout(() => {
              Toast("答题已通关");
            }, 500);
            return;
          }
        }
        if (this.numLife == 0 && this.fuhuka != 0) {
          this.fuhuka--;
          bus.$emit("fuhuka", this.fuhuka);
        } else {
          this.numLife--;
        }
        console.log(this.dataList, this.prizeList, data.data);
        qajoinPopComService.create(
          this.shopName,
          0,
          this.dataList,
          this.prizeList,
          data.data,
          this.fuhuka,
          (submit) => {
            if (submit == 1) {
              if (flag == 1) {
                followShop((data) => { });
              }
              qajoinPopComService.close();
            } else if (submit == 2) {
              if (flag == 1) {
                followShop((data) => { });
              }
              var url = "";
              url = location.href;
              console.log(url + "url");
              allShare(this.isTemplate, this, (callBackData) => {
                console.log(callBackData, "callBackData" + url);
              });
              shareTask(this.dataList.taskShareWaresVO.taskId, "", (data) => {
                if (this.allFuhu >= this.dataList.taskShareWaresVO.maxNum) {
                } else {
                  this.fuhuka++;
                  this.allFuhu++;
                }
                bus.$emit("fuhuka", this.fuhuka);
              });
            } else if (submit == 3) {
              var url = "";
              if (flag == 1) {
                followShop((data) => { });
              }
              url = location.href;
              console.log(url + "url");
              allShare(this.isTemplate, this, (callBackData) => {
                console.log(callBackData, "callBackData" + url);
              });
            }
          }
        );
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.sharemiao {
  font-size: 0.24rem;
  color: #262626;
  margin-top: 0.2rem;
}
.shareColor {
  color: #f2270c;
}
.mainStyle {
  width: 4rem;
  height: 0.9rem;
  background: linear-gradient(90deg, #f2270c 0%, #ff6420 100%);
  border-radius: 0.45rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.3rem;
  color: #fff;
  margin: 0.47rem auto 0;
}
.wenzimiaoshu {
  font-size: 0.2rem;
  color: #8c8c8c;
  width: 100%;
  text-align: center;
  margin-top: 0.46rem;
}
.lifeInfoBack {
  width: 6.4rem;
  height: 4.3rem;
  background: #fff;
  border-radius: 0.1rem;
}
.life-info {
  width: 5.9rem;
  height: 2.7rem;
  margin-top: 0.3rem;
  display: inline-block;
  border-radius: 0.1rem;
  background: #fff;
  position: relative;
  overflow: hidden;
  padding: 0.2rem;
}
.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0.3rem 0 0.25rem;
  padding-top: 0.25rem;
}
.userName {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.anCount {
  font-size: 0.36rem;
  color: #f2270c;
  font-weight: bold;
}
.userImg {
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/219242/2/6564/7744/61a9fd19E3571c659/743ed2fefe11cc67.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 1rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.25rem;
  position: relative;
}
.avatar {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  display: block;
}
.f-tac {
  text-align: center;
  margin-top: 0.5rem;
}
.fuhuo {
  margin-top: -0.3rem;
}
// -------------------------------------------以上样式
.draw-banner-name span {
  color: #f23c3c !important;
}
.banner-name {
  font-weight: bold;
  color: #fff500;
}
.collect-fd {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.9rem;
  background: #9f19f6;
}
.collect-fd .item {
  width: 50%;
  line-height: 0.9rem;
  color: #fff;
  text-align: center;
  font-size: 0.3rem;
}
.f-fl {
  float: left;
}
.f-f1 {
  width: 0.7rem;
  height: 1.5rem;
  margin-top: 0.4rem;
}
.f-f2 {
  width: 2.3rem;
  height: 1.5rem;
  text-align: left;
  padding-top: 0.3rem;
  padding-left: 0.1rem;
}
.f-f3 {
  width: 2.5rem;
  height: 1.5rem;
  padding-top: 0.5rem;
}
.collect-fd .item-share {
  background: #f56264;
}
.collect-fd .item {
  width: 50%;
  line-height: 0.9rem;
  color: #fff;
  text-align: center;
  font-size: 0.3rem;
}
.draw-collect-list {
  padding: 0.3rem;
  margin-bottom: 0.9rem;
  display: flex;
  flex-wrap: wrap;
}
.draw-collect-list li {
  float: left;
  width: 49%;
  margin-bottom: 4%;
  background: #fff;
}
.draw-collect-list li .title {
  height: 0.7rem;
  line-height: 0.35rem;
  padding: 0 0.1rem;
  margin-top: 0.1rem;
  font-size: 0.26rem;
  overflow: hidden;
  text-align: left;
}
.draw-collect-list li .detail {
  padding: 0.1rem;
  font-size: 0.28rem;
  float: left;
}
.draw-collect-list li .attention {
  width: 0.88rem;
  height: 0.4rem;
  background-color: #fff;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/11403/13/5506/2722/5c359368E1a0e1c04/6244da2a540b1e2a.png);
  background-size: 100%;
  background-repeat: no-repeat;
  float: right;
  margin: 0.1rem;
}
.draw-collect-list li .attention1 {
  width: 0.88rem;
  height: 0.4rem;
  background-color: #fff;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/11403/13/5506/2722/5c359368E1a0e1c04/6244da2a540b1e2a.png);
  background-size: 100%;
  background-repeat: no-repeat;
  float: right;
  margin: 0.1rem;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
.draw-collect-list li .detail .price {
  color: #f23c3c;
}
.draw-collect-list li:nth-child(even) {
  margin-left: 2%;
}

.f-tac {
  margin-top: 0.2rem;
  color: #262626;
  text-align: center;
  font-size: 0.3rem;
  font-weight: bold;
}
.fac {
  text-align: center;
  margin-top: 0.5rem;
}
.fib {
  color: #fff;
  font-size: 0.3rem;
  margin-left: 3.7rem;
  margin-top: -0.56rem;
}
.facFont {
  font-size: 0.6rem;
  color: #ffe36a;
  margin-left: 2.1rem;
  margin-top: -1.4rem;
}
.draw-detail-sku {
  width: 6.7rem;
  height: 2.4rem;
  background-size: 100%;
  padding: 0.2rem;
  display: inline-block;
  border-radius: 0.1rem;
  position: relative;
  overflow: hidden;
}
.draw-detail-sku .draw-tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.95rem;
  height: 0.95rem;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t16000/116/2077686384/721/713bed7b/5a7157c2N44e0002b.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.draw-detail-sku .draw-show-yhq {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100%;
}
.f-tal {
  text-align: left;
}
.f-ib {
  display: inline-block;
  vertical-align: middle;
}
.f-ib1 {
  font-size: 0.6rem;
  position: relative;
  top: -0.2rem;
}
.f-ib2 {
  color: rgb(51, 51, 51);
  font-size: 0.3rem;
}
.f-font {
  width: 3.1rem;
  margin-left: 0.1rem;
}
.f-font-color {
  color: rgb(242, 60, 60);
}
.onebtndotask {
  width: 4rem;
  position: fixed;
  bottom: 1.1rem;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.3rem;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: red;
  z-index: 2;
  cursor: pointer;
  border-radius: 0.3rem;
}
.onebtndotask.alreadydo {
  color: #fff;
  background: #aaaaaa;
}
.f-tac {
  text-align: center;
  margin-top: 0.3rem;
}

.f-ib {
  display: inline-block;
  vertical-align: middle;
}
.noinvolvementFlag {
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t17302/86/657407485/17153/60812915/5a9eb4d8N00cd8cde.png);
}
.involvementFlag {
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t18475/241/1281840392/24354/348f8d17/5ac18e2bN7811e006.png);
}
.drawShowYhq {
  width: 2rem;
  height: 2rem;
  display: block;
  border: 2px solid #f2270c;
  border-radius: 0.1rem;
  position: relative;
}
.drawShowYhq1 {
  width: 100%;
}
.addShopNewContent {
  margin-top: 0.41rem;
  margin-left: 0.43rem;
  .addShopNewJifen {
    text-align: left;
  }
}
.back {
  width: 2rem;
  height: 0.7rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/138524/9/21064/8976/619cdd47E1819f3a9/140f4a58e373a32d.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -2px;
  left: -2px;
  text-align: center;
  padding-top: 0.32rem;
  font-size: 0.24rem;
  color: #fff;
  box-sizing: border-box;
}
.remain{
    font-size: 0.2rem;
    color: rgb(140, 140, 140);
    font-weight: 500;
    text-align: right;
    margin-top: 0.5rem;
    margin-right: 0.1rem;
}
</style>
