<template>
  <div class="jiugonggeDrawContentC" ref="scratchableLatex" @click.stop="styleClick('click', 'scratchableLatex')"
    @mousemove.stop="styleClick('mousemove', 'scratchableLatex')" @mouseout.stop="styleClick('mouseout')">
    <div class="notice-bar" v-if="showBar">
      <vue-seamless-scroll v-if="winRcordListData.length>=1" :data="winRcordListData" class="seamless-warp"
        :class-option="defaultOption">
        <div v-for="(item, index) in winRcordListData" :key="index">
          <span>恭喜{{item.nickName}}获得了{{item.prizeName}}</span>
        </div>
      </vue-seamless-scroll>
      <div v-else>暂无相关获奖信息哦~</div>
    </div>
    <div :style="styleData.drawPlateBg" :class="[isWebClick?'':'animated zoomInDown']">
      <div v-show="isShowRotary" :style="styleData.turnMaskBox" class="turnMaskBox">
        <div id="turnBox" :style="styleData.turnBox">
          <div class="turnBox1">
            <ul id="turnUl" :style="styleData.turnUl" ref="turnUl">
              <li class="itemLi" v-for="(item, index) in prizeListData" :key="index"
                :style="{ webkitTransform: 'rotate(' + item.angle + 'deg)' }">
                <div :style="styleData.prizeName" v-if="item.prizeType">
                  <div>
                    <div style="
                      width: 1.4rem;
                      margin: 0 auto;
                      overflow: hidden;
                      white-space: nowrap;
                      -o-text-overflow: ellipsis;
                      text-overflow: ellipsis;
                    ">
                      {{ item.prizeName }}
                    </div>
                    <div class=""><img :style="styleData.img" :src="item[keyData.showImg]" /></div>
                  </div>
                </div>
                <div class="prizeName1 prizeName2" :style="styleData.prizeName" v-else>{{ item.prizeName }}</div>
              </li>
            </ul>
            <img v-if="!isStartPlay && !isWebClick" :src="styleData.turnBtn.imageUrl" alt="" v-lz-click="'12'"
              @click="startPlay" :style="styleData.turnBtn" class="turnBtn" />
            <img v-else :src="styleData.turnBtn.imageUrl" :style="styleData.turnBtn" alt="" class="turnBtn" />
          </div>
        </div>
      </div>
    </div>
    <div class="drawInfoNei">
      <div class="drawInfoRight">
        当前抽奖机会：
        <div class="drawInfoDrawTime">{{ restDrawCount }}</div>次
      </div>
    </div>
  </div>
</template>
<script>
import buttonCom from '../../basisComponent/button/buttonCom.vue';
import dialogMore from '../../basisComponent/button/dialogMore.vue';
import { TaskPopComService, SharePopComService, ShopPopComService, FollowSkuPopComService, PingJiaPopComService } from '../../../util/comCreate.js';
import { PrizeResultPopComService10015FlyDBP, NoPrizeResultPopComService10015FlyDBP,notimesPopComService10015FlyDBP } from '../../../util/hdzxtcomCreate.js';
import apis1 from '../../../util/apis1.js';
import { noDrawPosition } from '../../../js/luckyDraw';
import vueSeamlessScroll from "vue-seamless-scroll";
let { drawPrize, startDraw, evaluationMainRequest, getWinnerData, followShop } = apis1;

export default {
  props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData', 'isWebClick', 'modifyContent'],
  components: {
    buttonCom,
    dialogMore,
    vueSeamlessScroll
  },
  data() {
    return {
      isStartPlay: false,
      count: 0, // 总共有多少个位置
      cycle: 10, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      speed: 500, // 初始转动速度
      lampShow: false, //开始抽奖，灯光闪烁
      followShow: false, //关注店铺
      moreShow: false, //更多任务按钮
      showShare: false, //
      showFoll: false,
      showBuy: false,
      noPrizeList: [],
      pointFoll: 1, // pop页显示分享任务
      pointShare: 3, // pop页显示关注任务
      pointBuy: 2, // pop页显示购买商品任务
      timer: 0, // 转动定时器
      prize: 0, // 中奖位置，接口返回
      restDrawCount: 0,
      time: 10000, // 旋转时间
      pIndex: 0, // 中奖物品的下标
      rotNum: 0, // 旋转圈数基数
      endTime: '',
      startDisabled: false,
      task: {}, //任务列表
      showImg: '',
      styleDataOld: {},
      prizeListData: [],
      backgroundDiv: {
        backgroundImage: ''
      },
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: 'showImg',
          prizeName: 'prizeName',
          prizeType: 'prizeType',
          priceInfo: 'priceInfo',
          discountType: 'discountType',
          couponType: 'couponType'
        }
      },
      isShowRotary: false,
      isDisabled: true,
      winRcordListData: [],
      showBar: true
    };
  },
  computed: {
    defaultOption() {
      return {
        step: 0.35,
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
      }
    }
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.isShowRotary = this.datas.isShowRotary == true ? true : false;
    for (var i = 0; i < 8; i++) {
      var prizeObj = {
        [this.keyData.position]: 0,
        [this.keyData.prizeName]: '谢谢参与',
        [this.keyData.showImg]: '',
        angle: 0
      };
      prizeObj.position = i + 1;
      this.prizeListData = this.prizeListData.concat(prizeObj);
      this.prizeListData = this.autoRotate(this.prizeListData);
    }
    if (this.isWebClick) {
      this.isStartPlay = true;
    }
    this.initData();
  },

  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          styleDataOld: this.styleDataOld,
          c_this: this,
          isCustomSwitching: this.isCustomSwitching
        };
        this.$emit('opertaionCom', type, byValue);
      }
    },

    async initData() {
      if (!this.isTemplate) {
        await evaluationMainRequest(mainDatas => {
          this.count = mainDatas.data.count;

          if (this.count > 0) {
            this.contnet = '真棒！';
          }
          if (mainDatas.data.followShop == 1) {
            this.followShop = true;
          }
          console.log(this.count);
        });
      }
      var datasAll = this.templateData;
      if (this.isTemplate) {
        if (datasAll) {
          var prizeList = datasAll.draw.prizeList;
          if (prizeList.length > 0) {
            for (var i = 0; i < this.prizeListData.length; i++) {
              for (var j = 0; j < prizeList.length; j++) {
                if (prizeList[j].position == this.prizeListData[i].position) {
                  this.prizeListData[i] = prizeList[j];
                }
              }
            }
          }
          console.log(datasAll.evaluation);
          if (datasAll.evaluation) {
            if (datasAll.evaluation.followGoodsFlag == '1') {
              this.followShop = true;
            }
          }
        } else {
          this.prizeListData = [
            {
              position: 1,
              showImg: '//img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png',
              angle: 0,
              prizeName: '1'
            },
            {
              position: 2,
              showImg: '',
              angle: 0,
              prizeName: '谢谢参与'
            },
            {
              position: 3,
              showImg: '',
              angle: 0,
              prizeName: '谢谢参与'
            },
            {
              position: 4,
              showImg: '',
              angle: 0,
              prizeName: '谢谢参与'
            },
            {
              position: 5,
              showImg: '',
              angle: 0,
              prizeName: '谢谢参与'
            },
            {
              position: 6,
              showImg: '',
              angle: 0,
              prizeName: '谢谢参与'
            },
            {
              position: 7,
              showImg: '',
              angle: 0,
              prizeName: '谢谢参与'
            },
            {
              position: 8,
              showImg: '',
              angle: 0,
              prizeName: '谢谢参与'
            }
          ];
        }
        this.winRcordListData = [
          {
            userImg:
              "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
            nickName: "z***撒",
            prizeName: "100京豆",
          },
          {
            userImg:
              "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
            nickName: "a***3",
            prizeName: "满100减5优惠券",
          },
          {
            userImg:
              "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
            nickName: "李***云",
            prizeName: "充电宝",
          },
          {
            userImg:
              "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png",
            nickName: "j***3",
            prizeName: "充电宝",
          },
        ]; //获奖名单
        for (var i = 0; i < this.prizeListData.length; i++) {
          this.prizeListData[i].angle = 0;
        }
        this.prizeListData = this.autoRotate(this.prizeListData);
        this.oTurntable = document.querySelector('#turnUl');
        // 过度中属性用时5s
        this.oTurntable.style.webkitTransition = 'transform ' + this.time / 1000 + 's ease';
      } else {
        //请求接口
        drawPrize(initdatas => {
          console.log(initdatas);
          let prizeList = initdatas.data.prizeInfo;
          this.restDrawCount = initdatas.data.drawNumber;

          if (prizeList.length > 0) {
            for (var i = 0; i < this.prizeListData.length; i++) {
              for (var j = 0; j < prizeList.length; j++) {
                if (prizeList[j].position == this.prizeListData[i].position) {
                  this.prizeListData[i] = prizeList[j];
                }
              }
            }
          }
          this.$set(this.prizeListData);
          this.prizeListData = this.autoRotate(this.prizeListData);
          this.$forceUpdate();

          this.oTurntable = document.querySelector('#turnUl');
          // 过度中属性用时5s
          this.oTurntable.style.webkitTransition = 'transform ' + this.time / 1000 + 's ease';
        });
        this.getWinnerDatas()
      }
    },
    getWinnerDatas() {
      getWinnerData((initDtasAll) => {
        this.winRcordListData = initDtasAll.data;
        for (var i = 0; i < this.winRcordListData.length; i++) {
          this.winRcordListData[i].nickName =
            this.winRcordListData[i].nickName.substr(0, 1) +
            "***" +
            this.winRcordListData[i].nickName.substr(-1, 1);
        }
        this.showBar = false
        this.$nextTick(()=>{
          this.showBar = true
        })
      });
    },
    //自动生成角度添加到数组上
    autoRotate(arr) {
      if (arr.length) {
        let len = arr.length;
        let base = 360 / len;
        // console.log('每个扇形的角度', base);
        arr.forEach((item, index) => {
          // 指的是某个奖品区域的中间 : base/2
          item.angle = parseInt(index * base) + 20;
        });
      }
      return arr;
    },
    // 点击开始,请求接口抽奖
    async startPlay() {
      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;
      }
      if (this.restDrawCount == 0 && !this.isStartPlay) {
        notimesPopComService10015FlyDBP.create(this.styleData, submit => {
          notimesPopComService10015FlyDBP.close();
        });
        return;
      }
      // console.log('1231237')
      this.isStartPlay = true;

      if (this.isTemplate == true) {
        // 拿到相应的角度调旋转接口
        //未中奖
        self.startrotate(self.prizeListData[7].angle, () => {
          self.fulfillHandle('未中奖');
        });
        return;
      }
      startDraw(initDatas => {
        console.log('中奖信息', initDatas);
        if (initDatas.resp_code == 50009) {
          this.$toast('活动已结束');
          this.isStartPlay = false;
          return;
        }

        if (initDatas.resp_code != 0) {
          this.isStartPlay = false;
        }

        if (initDatas.data) {
          for (var i = 0; i < this.prizeListData.length; i++) {
            if (this.prizeListData[i].id == initDatas.data.prizeInfoId) {
              self.pIndex = i;
              console.log('中奖id', self.pIndex);
              // 拿到相应的角度调旋转接口
              self.startrotate(self.prizeListData[self.pIndex].angle, () => {
                self.fulfillHandle(self.prizeListData[self.pIndex], initDatas.data);
                console.log('奖品id', self.pIndex);
                this.isStartPlay = false;
                this.getWinnerDatas()
              });
              break;
            }
          }
        } else {
          //未中奖
          for (var i = 0; i < self.prizeListData.length; i++) {
            if (!self.prizeListData[i].prizeType) {
              self.startrotate(self.prizeListData[i].angle, () => {
                self.fulfillHandle('未中奖');
                this.isStartPlay = false;
              });
            }
          }
        }
        this.restDrawCount = this.restDrawCount - 1;
        if (this.restDrawCount == 0) {
          this.publicData.$emit('upDataCalendar');
          // this.isStartPlay = false;
          return;
        }
      });
    },

    //开始旋转 angle角度  complete回调成功函数
    startrotate(angle, complete) {
      console.log(angle, 'angle');
      // 相应的角度 + 满圈 只是在原角度多转了几圈 360 * 6
      // let rotate = 360 - (2160 * (this.rotNum + 1) + angle);
      let rotate = 2160 * (this.rotNum + 1) + 360 - angle;
      this.oTurntable.style.webkitTransform = 'rotate(' + rotate + 'deg)';
      clearTimeout(this.timer);
      // 设置5秒后停止旋转,处理接口返回的数据
      this.timer = setTimeout(() => {
        complete();
        this.rotNum++;
      }, this.time);
    },
    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      this.isStartPlay = false;
      var activityType = sessionStorage.getItem('activityType');
      this.isShowRotary = this.datas.isShowRotary == true ? true : false;
      console.log('self');
      if (prizeData == '未中奖') {
        NoPrizeResultPopComService10015FlyDBP.create(this.styleData, submit => {
          NoPrizeResultPopComService10015FlyDBP.close();
          clearTimeout(this.timer); // 清除转动定时器
          this.getWinnerDatas()
        });
      } else {
        //中奖
        this.prizeResultData.datas = prizeData;
        PrizeResultPopComService10015FlyDBP.create(this.prizeResultData, initDatas, this.styleData, submit => {
          PrizeResultPopComService10015FlyDBP.close();
          clearTimeout(this.timer); // 清除转动定时器
          this.getWinnerDatas()
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.jiugonggeDrawContentC {
  text-align: center;
  margin-top: 0.1rem;
  .draw-start span {
    color: #fff;
    font-size: 0.2rem;
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    margin-left: -0.45rem;
  }
  .drawInfoNei {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0 0.25rem 0 0.32rem;
    margin-top: 1rem;
    margin-bottom: 0.3rem;
  }
  .drawInfoRight {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-bottom: 0.1rem;
    color: #574029;
    font-size: 0.3rem;
  }
  .drawInfoDrawTime {
    min-width: 0.4rem;
    height: 0.4rem;
    background-color:#bd9971;
    border-radius: 0.04rem;
    line-height: 0.4rem;
    text-align: center;
    color: #574029;
    margin-right: 0.05rem;
  }
  .active {
    .mask {
      width: 1.99rem;
      height: 2.07rem;
      position: absolute;
      left: 0;
      bottom: 0;
      border-radius: 0.09rem;
      background-color: black;
      opacity: 0.2;
    }
  }

  // .draw-plate-bg {
  //   width: 7.3rem;
  //   height: 7.5rem;
  //   margin: 0 auto;
  //   background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/189192/18/19329/105400/611fa4bcEadb99c34/941d16c18c949bde.png);
  //   background-size: 100%;
  //   position: relative;
  //   top: -1rem;
  //   z-index: 1;
  // }
  .draw-plate {
    width: 6.3rem;
    height: 6.2rem;
    display: inline-block;
    // background-image: url(https://img10.360buyimg.com/imgzone/jfs/t15637/321/1962178342/2198/25ad4f94/5a7126dcNd107479f.png);
    // background-repeat: no-repeat;
    // background-size: 100%;
    position: relative;
    top: 1.3rem;
    z-index: 2;
  }
  .animated {
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  .zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
  }

  .draw-item.active {
    z-index: 8;
  }

  .draw-item-01 {
    top: 0.38rem;
    left: 0.39rem;
  }
  .draw-item-02 {
    top: 0.38rem;
    left: 2.45rem;
    background: #ffe792;
  }
  .draw-item-03 {
    top: 0.38rem;
    left: 4.51rem;
  }
  .draw-item-04 {
    top: 2.46rem;
    left: 4.51rem;
    background: #ffe792;
  }
  .draw-item-05 {
    top: 4.52rem;
    left: 4.51rem;
  }
  .draw-item-06 {
    top: 4.52rem;
    left: 2.45rem;
    background: #ffe792;
  }
  .draw-item-07 {
    top: 4.52rem;
    left: 0.39rem;
  }
  .draw-item-08 {
    top: 2.46rem;
    left: 0.39rem;
    background: #ffe792;
  }
  // .draw-start {
  //   position: absolute;
  //   top: 2.26rem;
  //   left: 2.34rem;
  //   width: 1.64rem;
  //   height: 1.69rem;
  //   background: url(https://img10.360buyimg.com/imgzone/jfs/t27337/183/2617377802/1907/52f64fef/5c05f07cNb3d7c12b.png)
  //     no-repeat;
  //   background-size: 100%;
  // }
  .draw-isdraw-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.35rem;
  }
  .draw-item-mtext {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 1.69rem;
    font-size: 0.24rem;
    color: #333;
  }
  // .draw-item {
  //   position: absolute;
  //   z-index: 2;
  //   width: 1.64rem;
  //   height: 1.69rem;
  //   background: url(https://img10.360buyimg.com/imgzone/jfs/t17275/289/374056995/546/c3d782c8/5a7126dcNb5a90721.png)
  //     no-repeat;
  //   background-size: 100%;
  // }
  .prizeIcon {
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1rem;
  }

  img {
    border: 0;
    max-width: 100%;
  }
  .icon-jifen {
    background: url(//img10.360buyimg.com/imgzone/jfs/t1/82425/7/320/5494/5ce7a2dbE0cf643aa/d798e181a8e294af.png)
      no-repeat;
    background-size: 100%;
  }
  .icon-common {
    display: block;
    width: 0.94rem;
    height: 0.94rem;
    margin: 0.2rem auto 0;
    margin-top: 0.1em;
  }
  .iconImg {
  }
  // .draw-info {
  //   color: #424d58;
  //   text-align: center;
  //   font-size: 0.3rem;
  //   margin-top: -0.8rem;
  // }
  .draw-item-name {
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.2rem;
    color: #e65596;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .draw-item-name1 {
    position: absolute;
    width: 90%;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.2rem;
  }
  .draw-info-drawTime {
    width: 1.16rem;
    height: 1.16rem;
    margin-left: 0.2rem;
    border-radius: 50%;
    background: #fc3c2c;
    font-size: 0.6rem;
    color: #fff;
    text-align: center;
    line-height: 1.16rem;
    margin-top: 0.1rem;
  }
  .lookDrawCondition {
    color: #fff;
    font-size: 0.24rem;
    z-index: 2;
    margin: -0.6rem auto 0;
    text-align: center;
  }
  .seeShiwuPrizes {
    color: #000 !important;
    line-height: 0.3rem;
  }
  // .draw-chance .drow-chance-btn {
  //   position: relative;
  //   overflow: hidden;
  //   width: 3.5rem;
  //   height: 1rem;
  //   line-height: 0.72rem;
  //   background-image: url(https://img10.360buyimg.com/imgzone/jfs/t20218/109/472562343/14078/12e90d2b/5b0e256eNfd19da8f.png);
  //   background-size: 100%;
  //   background-repeat: no-repeat;
  // }
  .f-tac {
    text-align: center;
  }
  .f-ib {
    display: inline-block;
    vertical-align: middle;
  }
}
.turnMaskBox {
  // position: absolute;
  position: fixed;
  width: 7.5rem;
  height: 100%;
  top: 0;
  z-index: 120;
  background: rgba($color: #000000, $alpha: 0.7);
}
#turnBox {
  width: 100%;
  height: 8.2rem;
  position: relative;
  overflow: hidden;
  margin-top: 35%;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  .itemDiv {
    background: #2c3e50;
    z-index: 12;
  }
  .turnBox1 {
    position: relative;
  }
  .turnBox2 {
    background-size: 100% 100%;
    width: 6.24rem;
    height: 6.24rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
  }
  .turnBtn {
    position: absolute;
    width: 1.3rem;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-59%);
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 3;
  }
  ul {
    li {
      position: absolute;
      box-sizing: border-box;
      color: #000;
      width: 100%;
      height: 100%;
      line-height: 20px;
      transform-origin: 50% 50%;
      text-align: center;

      img {
        // margin-top: 12%;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
      }
      .cicyleImg {
        position: absolute;
        top: 0;
        width: 0.4rem;
        height: 0.4rem;
        text-align: left;

        transform: translateX(1.05rem);
        // transform:rotate(45deg);
      }

      .prizeName {
        font-size: 0.2rem;
        margin-top: 0.5rem;
        color: #ffffff;
        word-break: break-all;
        word-wrap: break-word;
      }
      .prizeNameD {
        font-size: 0.2rem;
        margin-top: 0.8rem;
        color: #ffffff;
        word-break: break-all;
        word-wrap: break-word;
      }
      .prizeName1 {
        font-size: 0.2rem;
        margin-top: 0.28rem;
        color: #ec1341;
        word-break: break-all;
        word-wrap: break-word;
        margin: 0.83rem auto 0 !important;
      }
      .prizeName2 {
        font-size: 0.2rem;
        margin-top: 1rem;
        word-break: break-all;
        word-wrap: break-word;
      }
      .prizeName3 {
        font-size: 0.2rem;
        margin-top: 1rem;
        color: #ffffff;

        word-break: break-all;
        word-wrap: break-word;
      }
    }
  }
}
.notice-bar {
  width: 5.37rem;
  height: 0.39rem;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/95154/8/28943/2363/652f51fbF2d263f95/0e90d2353cff8d83.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0.2rem auto 0.1rem auto;
  font-size: 0.24rem;
  line-height:0.39rem;
  color: #513c28;
}
.seamless-warp {
  height: 0.39rem;
  overflow: hidden;
}
</style>
