<template name="followProduct">
  <div
    ref="followProduct"
    @click="styleClick('click', 'followProduct')"
    @mousemove="styleClick('mousemove', 'followProduct')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData.mainStyle">
      <img
        v-if="!focusOn"
        src="//img10.360buyimg.com/imgzone/jfs/t1/169341/40/25795/16344/61a1d8e8Ebe89b59d/750f753677c18306.png"
        class="gift"
      />
      <img
        v-if="showPrizeObjLength == 1 && focusOn"
        class="gift2"
        :src="showPrizeObj.showImg"
      />
      <img
        v-if="showPrizeObjLength == 0 && focusOn"
        class="gift3"
        src="//img10.360buyimg.com/imgzone/jfs/t1/168757/2/25782/15232/61a1feeeE7b368485/8159eb771a65ed74.png"
      />
      <!-- <span v-if="finishType == 0"> 关注全部商品就可领取奖品 </span>
        <span v-else>
          关注
          <span v-if="!isTemplate" :style="styleData.bannerName">
            {{ finishNum }}
          </span>
          <span v-else :style="styleData.bannerName">x</span>
          件商品就可领取奖品
        </span> -->
      <!-- 没有中奖奖品 -->
      <div v-if="!focusOn">
        <div class="priceLeft" v-if="oneClickPurchase == 0">
          <span class="span1">关注全部商品</span>
          <span class="span2">有机会领取神秘奖品</span>
        </div>
        <div class="priceLeft" v-else>
          <span class="span1">关注{{ finishNum }}件商品</span>
          <span class="span2">有机会领取神秘奖品</span>
        </div>
      </div>

      <div v-if="focusOn && showPrizeObjLength != 0">
        <div class="priceLeft">
          <span class="span3">恭喜获得</span>
          <span class="span4">{{ showPrizeObj.prizeName }}</span>
        </div>
      </div>

      <div v-if="showPrizeObjLength == 0 && focusOn">
        <div class="priceLeft">
          <span class="span5">领取失败</span>
          <span class="span6">抱歉，奖品被领完了</span>
        </div>
      </div>

      <div
        v-if="oneClickPurchase == 0 && iseClickPurchase == false"
        :class="isWebClick ? 'onebtndotask1' : 'onebtndotask'"
        :style="styleData.onebtndotask"
        @click="follow(oneClickPurchase)"
        style="z-index: 12"
      ></div>
      <div
        class="onebtndotask alreadydo"
        :style="styleData.onebtndotask"
        v-if="oneClickPurchase == 0 && iseClickPurchase == true"
      ></div>
    </div>
    <div class="f-tac" v-if="showPrize == '1'">
      <div class="draw-detail-sku" :style="styleData.prizeDetail">
        <div class="draw-tag"></div>
        <div class="f-ib">
          <img class="draw-show-yhq" :src="prizeImg" />
        </div>
        <div class="f-ib f-tal f-font">
          <div class="f-tac f-font-color">
            <div class="f-ib f-ib1">{{ prizeNum }}</div>
            <div class="f-ib f-ib2">
              {{ prizeName }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <ul class="draw-collect-list">
        <li v-for="(item, index) in skuList" :key="index" style="z-index: 2">
          <div
            @click="clickFollowDetail(item.skuId)"
            v-lz-click="'5'"
            style="position: relative"
          >
            <div class="pic" style="height: 3.38rem">
              <a href="javascript:;" style="display: flex; height: 100%"
                ><img
                  alt=""
                  :src="item.skuImg ? item.skuImg : item.imagePath"
                  style="
                    max-width: 100%;
                    max-height: 100%;
                    border-radius: 0.2rem;
                  "
                />
              </a>
            </div>
            <div class="sukback">
              <div class="title">
                <span class="titleSpan">{{
                  item.skuName ? item.skuName : item.name
                }}</span>
              </div>
              <div class="detail">
                <div class="price">
                  ￥{{ item.skuPrice ? item.skuPrice : item.price | toFixed}}
                </div>
              </div>
            </div>
          </div>

          <div
            v-if="item.status == 0 && oneClickPurchase != 0"
            class="attention"
            @click="follow(item)"
          ></div>
          <div
            v-if="item.status == 1 && oneClickPurchase != 0"
            class="attention1"
            @click="goToast"
          ></div>
        </li>
      </ul>
    </div>
    <!-- <div
      v-if="oneClickPurchase == 0 && iseClickPurchase == false"
      :class="isWebClick ? 'onebtndotask1' : 'onebtndotask'"
      :style="styleData.onebtndotask"
      @click="follow(oneClickPurchase)"
      style="z-index: 12"
    >
      一键关注
    </div>
    <div
      class="onebtndotask alreadydo"
      :style="styleData.onebtndotask"
      v-if="oneClickPurchase == 0 && iseClickPurchase == true"
    >
      已关注
    </div> -->
    <div
      :class="isWebClick ? 'collect-fd1' : 'collect-fd'"
      style="z-index: 100"
    >
      <div
        class="item f-fl"
        :style="styleData.collectFd"
        @click="enterstore"
        v-lz-click="'4'"
      >
        进店逛逛
      </div>
      <div
        :style="styleData.itemShare"
        class="item item-share f-fl"
        @click="shareButton"
      >
        分享好友
      </div>
    </div>
  </div>
</template>
<script>
import store from "../../../store/store";
import { goToShopPage, goToSkuPage } from "../../../util/tools.js";
import { allShare } from "../../../js/share.js";
import apis from "../../../util/apis1.js";
import {
  PrizeResultPopComService,
  NoPrizeFinishedPopComService,
  ClickFollowShopService,
} from "../../../util/comCreate.js";
let { getFollowGoods, followProTask, myprize } = apis;
export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      skuList: [], //关注商品列表
      finishNum: 0, // 关注几个机会获得奖品
      taskId: "",
      prizeImg: "", //奖品图片
      prizeName: "", //奖品名字
      prizeNum: "", //奖品数量
      showPrize: "0", //是否显示奖品
      oneClickPurchase: 1, // 一键关注
      iseClickPurchase: false, // 是否一键关注
      finishType: 0, //完成关注 0:关注全部商品 1：关注指定件数
      status: 0,
      shopName: "",
      prizeListData: [],
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      styleDataOld: {},
      showPrizeObj: {},
      showPrizeObjLength: 0,
      focusOn: false, //是否关注过
      focusnum: 0, //关注数量
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.publicData.$on("activityLoaded", this.activityLoaded);
  },
  mounted() {
    // this.initMethod()
    // console.log(this.isTemplate);
    // this.getFollowGoodsApi();
  },
  filters: {
    toFixed: function (value) {
      console.log(32,value)
      if (!value) {
        return "";
      } else {
        return Number(value).toFixed(2);
      }
    },
  },
  methods: {
    initMethod() {
      myprize((prizedata) => {
        console.log(prizedata.data, 89898989);
        this.showPrizeObj = prizedata.data[0];
        this.showPrizeObjLength = prizedata.data.length;
      });
    },
    goToast() {
      this.$toast("您已关注该商品");
    },
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          isCustomSwitching: this.isCustomSwitching, //有tab切换时
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    //关注商品数据
    getFollowGoodsApi() {
      if (this.isTemplate) {
        if (!this.isWebClick) {
          this.$toast("活动预览，仅供查看");
        }
        this.setPreviewData(this.datas.previewData);
        console.log("121212", this.datas.previewData);
        return;
      }

      let actStatus = sessionStorage.getItem("actStatus");
      // if (actStatus == 2) {
      //   this.$toast("活动已结束");
      //   return;
      // }
      // if (actStatus == 1) {
      //   this.$toast("活动未开始");
      //   return;
      // }
      getFollowGoods().then((res) => {
        let newList = [];
        this.focusnum = 0
        console.log("*****关注商品数据", res);
        if (res.resp_code == 0) {
          this.initMethod();

          res.data[0].skuInfoVO.forEach((item, index) => {
            
            if (item.status == 0) {
              newList.push({ item });
            } else {
              this.focusnum++;
              return;
            }
          });
          console.log(this.focusnum,"lplpl")
          console.log(
            "newList",
            newList,
            newList.length,
            res.data[0].skuInfoVO.length
          );
          if (newList.length == res.data[0].skuInfoVO.length) {
            this.iseClickPurchase = false;
          } else {
            this.iseClickPurchase = true;
          }
          this.skuList = res.data[0].skuInfoVO;
          this.finishNum = res.data[0].finishNum;
          this.finishType = res.data[0].finishType;
          this.oneClickPurchase = res.data[0].oneClickFollowPurchase;
          if (this.oneClickPurchase == 0) {
            // 一键关注
            if (res.data[0].status == 0) {
              // 没有完成关注任务
              this.focusOn = false;
            } else {
              this.focusOn = true;
            }
          } else {
            // 逐个关注
            if (this.focusnum < this.finishNum) {
              this.focusOn = false;
            } else {
              this.focusOn = true;
            }
          }
          console.log(this.focusOn, "this.focusOn");
        } else if (res.resp_code == 50034) {
          ClickFollowShopService.create("obj", "", (submit) => {
            this.initData("");
            ClickFollowShopService.close();
            // location.reload();
            // this.getFollowGoodsApi();
          });
        }
      });
    },
    //数据加载
    initData(selectFlag) {},
    //点击关注
    follow(item) {
      console.log("*****点击关注", item);
      if (this.isTemplate) {
        if (!this.isWebClick) {
          this.$toast("活动预览，仅供查看");
        }
        return;
      }
      if (item == "0" || item == 0) {
        const data = {
          skuId: "",
        };
        console.log("*****data", data);
        followProTask(data).then((res) => {
          console.log("*****followProTask", res);
          if (res.resp_code == 0) {
            console.log("*****res.data.result", res.data.result);
            if (res.data.result == undefined || res.data.result == "undefined") {
              this.getFollowGoodsApi();
            } else {
              if (res.data.result == true) {
                var obj = {
                  datas: {},
                  keyData: {
                    prizeUrl: "showImg",
                    prizeName: "prizeName",
                    prizeType: "prizeType",
                    priceInfo: "priceInfo",
                    discountType: "discountType",
                    couponType: "couponType",
                  },
                };
                obj.datas = res.data;
                console.log(obj, "78787878");
                PrizeResultPopComService.create(obj, res.data, (submit) => {
                  this.initData("");
                  PrizeResultPopComService.close();
                  // location.reload();
                });
              } else {
                this.$toast(res.resp_msg);
                // NoPrizeFinishedPopComService.create(
                //     '奖品已领光啦~',
                //     '//img10.360buyimg.com/imgzone/jfs/t1/152859/24/15591/14697/6008f58fE1744005f/765fe66b5a48aefc.png',
                //     submit => {
                //         this.initData("");
                //         NoPrizeFinishedPopComService.close();
                //         // location.reload();
                //     }
                // );
              }
              this.getFollowGoodsApi();
            }
          } else if (res.resp_code == 50029) {
            // this.$toast({
            //   duration: 2000,
            //   message: res.resp_msg,
            // });
            this.$toast({
              duration: 1500, // 持续展示 toast
              forbidClick: true,
              message: res.resp_msg,
            }); //3秒后消失
            var x = setTimeout(() => {
              // this.publicData.$emit("follow", true);
              clearTimeout(x);
              this.$toast.clear();
              this.getFollowGoodsApi();
            }, 1500);
          } else if (res.resp_code == 60010) {
            // this.$toast({
            //   duration: 2000,
            //   message: "很抱歉，你来晚了，奖品已发完！",
            // });
            //未达到领取条件
            this.$toast({
              duration: 1500, // 持续展示 toast
              forbidClick: true,
              message: "很抱歉，你来晚了，奖品已发完！",
            }); //3秒后消失
            var x = setTimeout(() => {
              // this.publicData.$emit("follow", true);
              clearTimeout(x);
              this.$toast.clear();
              this.getFollowGoodsApi();
            }, 1500);
            // NoPrizeFinishedPopComService.create(
            //     '很抱歉，你来晚了，奖品已发完！',
            //     '//img10.360buyimg.com/imgzone/jfs/t1/152859/24/15591/14697/6008f58fE1744005f/765fe66b5a48aefc.png',
            //     submit => {
            //         this.initData("");
            //         NoPrizeFinishedPopComService.close();
            //         // location.reload();
            //     }
            // );
          } else {
            this.$toast(res.resp_msg);
          }
        });
      } else {
        const data = {
          skuId: item.skuId,
        };
        console.log("*****data", data);
        followProTask(data).then((res) => {
          console.log("*****followProTask", res);
          if (res.resp_code == 0) {
            console.log("*****res.data.result", res.data.result);
            if (
              res.data.result == undefined ||
              res.data.result == "undefined"
            ) {
              this.getFollowGoodsApi();
            } else {
              if (res.data.result == true) {
                var obj = {
                  datas: {},
                  keyData: {
                    prizeUrl: "showImg",
                    prizeName: "prizeName",
                    prizeType: "prizeType",
                    priceInfo: "priceInfo",
                    discountType: "discountType",
                    couponType: "couponType",
                  },
                };
                obj.datas = res.data;
                PrizeResultPopComService.create(obj, res.data, (submit) => {
                  this.initData("");
                  PrizeResultPopComService.close();
                  // location.reload();
                });
              } else {
                this.$toast(res.resp_msg);
                // NoPrizeFinishedPopComService.create(
                //     '奖品已领光啦~',
                //     '//img10.360buyimg.com/imgzone/jfs/t1/152859/24/15591/14697/6008f58fE1744005f/765fe66b5a48aefc.png',
                //     submit => {
                //         this.initData("");
                //         NoPrizeFinishedPopComService.close();
                //         // location.reload();
                //     }
                // );
              }
              this.getFollowGoodsApi();
            }
          } else if (res.resp_code == 50029) {
            this.$toast({
              duration: 1500, // 持续展示 toast
              forbidClick: true,
              message: res.resp_msg,
            }); //3秒后消失
            var x = setTimeout(() => {
              // this.publicData.$emit("follow", true);
              clearTimeout(x);
              this.$toast.clear();
              this.getFollowGoodsApi();
            }, 1500);
          } else if (res.resp_code == 60010) {
            this.$toast({
              duration: 1500, // 持续展示 toast
              forbidClick: true,
              message: "很抱歉，你来晚了，奖品已发完！",
            }); //3秒后消失
            var x = setTimeout(() => {
              // this.publicData.$emit("follow", true);
              clearTimeout(x);
              this.$toast.clear();
              this.getFollowGoodsApi();
            }, 1500);
            // NoPrizeFinishedPopComService.create(
            //     '很抱歉，你来晚了，奖品已发完！',
            //     '//img10.360buyimg.com/imgzone/jfs/t1/152859/24/15591/14697/6008f58fE1744005f/765fe66b5a48aefc.png',
            //     submit => {
            //         this.initData("");
            //         NoPrizeFinishedPopComService.close();
            //         // location.reload();
            //     }
            // );
          } else {
            this.$toast(res.resp_msg);
          }
        });
      }
    },
    //点击商品进入详情页面
    clickFollowDetail(sku) {
      console.log("点击商品进入详情页面", sku);
      if (!this.isWebClick) {
        if (this.isTemplate) {
          this.$toast("活动预览，仅供查看");
          return;
        }
        goToSkuPage(sku);
      }
    },
    //进店逛逛
    enterstore() {
      if (!this.isWebClick) {
        if (this.isTemplate) {
          this.$toast("活动预览，仅供查看");
          return;
        }
        document.querySelector("body").removeAttribute("style");
        console.log("进入商店");
        let shopId = store.state.shopId;
        goToShopPage(shopId);
      }
    },
    //分享
    shareButton() {
      if (!this.isWebClick) {
        if (this.isTemplate) {
          this.$toast("活动预览，仅供查看");
          return;
        }
        let actStatus = sessionStorage.getItem("actStatus");

        if (!this.isTemplate) {
          if (actStatus == 2) {
            // Toast
            this.$toast("活动已结束");
            return;
          }
          if (actStatus == 1) {
            this.$toast("活动尚未开始");
            // Toast('活动尚未开始');
            return;
          }
          if (actStatus == 3) {
            // Toast('活动正在惊醒中');
            // this.share = 1
            allShare(this.isTemplate, this, (callBackData) => {
              console.log(callBackData, "callBackData");
            });
          }
        } else {
          this.$toast("活动预览，仅供查看");
        }
      }
    },
    // 活动加载完成
    activityLoaded(data) {
      if (this.isTemplate) {
        var datasAll = this.templateData;
        console.log("*********datasAll", datasAll);
        console.log("*********data", data);
        if (datasAll) {
          if (datasAll.basicTask.taskList[0].skuInfoVO) {
            let newData = {};
            let newDatalist = [];
            for (
              let i = 0;
              i < datasAll.basicTask.taskList[0].skuInfoVO.length;
              i++
            ) {
              let obj = {
                taskType: datasAll.basicTask.taskList[0].skuInfoVO[i].taskType,
                skuId: datasAll.basicTask.taskList[0].skuInfoVO[i].skuId,
                skuImg: datasAll.basicTask.taskList[0].skuInfoVO[i].imagePath,
                skuName: datasAll.basicTask.taskList[0].skuInfoVO[i].name,
                skuPrice: datasAll.basicTask.taskList[0].skuInfoVO[i].price,
                status: 0,
              };
              newDatalist.push(obj);
            }
            newData.skuList = newDatalist;
            newData.finishNum =
              datasAll.basicTask.taskList[0].rule.followSkuRule.finishNum;
            newData.finishType =
              datasAll.basicTask.taskList[0].rule.followSkuRule.finishType;
            newData.oneClickPurchase =
              datasAll.basicTask.taskList[0].rule.followSkuRule.oneClickFollowPurchase;
            this.setPreviewData(newData);
          }
        } else {
          //TOOD: 预览的假数据
          this.setPreviewData(this.datas.previewData);
        }
      } else {
        console.log("activityLoaded");
        this.setGate();
      }
    },
    // 设置入口
    setGate() {
      this.actStatus = sessionStorage.getItem("actStatus");
      console.log("actStatus", this.actStatus);
      // if (this.actStatus === '3') {
      this.getFollowGoodsApi();
      // }
    },
    // 设置预览数据
    setPreviewData(data) {
      console.log("setPreviewData", data);
      this.status = "initial";
      //手机预览的情况
      let letBrowser = this.getBrowser();
      if (letBrowser.plat === "android" || letBrowser.plat === "iphone") {
      } else {
      }
      this.skuList = data.skuList;
      this.finishNum = data.finishNum;
      if (this.isWebClick) {
        this.finishNum = 1;
      }
      this.finishType = data.finishType;
      this.oneClickPurchase = data.oneClickPurchase;
      if (this.isWebClick) {
        this.oneClickPurchase = 0;
        this.iseClickPurchase = false;
      }
    },
    //判断是否手机端浏览
    getBrowser() {
      var ua = navigator.userAgent.toLowerCase();
      var btypeInfo = (ua.match(/firefox|chrome|safari|opera/g) || "other")[0];
      if ((ua.match(/msie|trident/g) || [])[0]) {
        btypeInfo = "msie";
      }
      var pc = "";
      var prefix = "";
      var plat = "";
      //如果没有触摸事件 判定为PC
      var isTocuh =
        "ontouchstart" in window ||
        ua.indexOf("touch") !== -1 ||
        ua.indexOf("mobile") !== -1;
      if (isTocuh) {
        if (ua.indexOf("ipad") !== -1) {
          pc = "pad";
        } else if (ua.indexOf("mobile") !== -1) {
          pc = "mobile";
        } else if (ua.indexOf("android") !== -1) {
          pc = "androidPad";
        } else {
          pc = "pc";
        }
      } else {
        pc = "pc";
      }
      switch (btypeInfo) {
        case "chrome":
        case "safari":
        case "mobile":
          prefix = "webkit";
          break;
        case "msie":
          prefix = "ms";
          break;
        case "firefox":
          prefix = "Moz";
          break;
        case "opera":
          prefix = "O";
          break;
        default:
          prefix = "webkit";
          break;
      }
      plat =
        ua.indexOf("android") > 0
          ? "android"
          : navigator.platform.toLowerCase();
      return {
        version: (ua.match(/[\s\S]+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1], //版本
        plat: plat, //系统
        type: btypeInfo, //浏览器
        pc: pc,
        prefix: prefix, //前缀
        isMobile: pc == "pc" ? false : true, //是否是移动端
      };
    },
    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      this.prizeResultData.datas = prizeData;
      console.log(this.prizeResultData.datas + "this.prizeResultData.datas");
      PrizeResultPopComService.create(
        this.prizeResultData,
        initDatas,
        (submit) => {
          PrizeResultPopComService.close();
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.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;
}
.collect-fd .item-share {
  background: #f56264;
}
.collect-fd1 {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.9rem;
  background: #9f19f6;
}
.collect-fd1 .item {
  width: 50%;
  line-height: 0.9rem;
  color: #fff;
  text-align: center;
  font-size: 0.3rem;
}
.collect-fd1 .item-share {
  background: #f56264;
}
.f-fl {
  float: left;
}
.draw-collect-list {
  padding: 0.3rem;
  display: flex;
  flex-wrap: wrap;
}
.draw-collect-list li {
  float: left;
  margin-bottom: 4%;
  background: #fff;
  border-radius: 10px;
  height: 5.38rem;
  width: 3.38rem;
  position: relative;
}
.draw-collect-list li .sukback .title {
  height: 0.7rem;
  line-height: 0.35rem;
  padding: 0 0.1rem;
  margin-top: 0.6rem;
  font-size: 0.26rem;
  overflow: hidden;
  text-align: left;
  color: #fff;
}
.titleSpan {
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.draw-collect-list li .detail {
  padding: 0.1rem;
  font-size: 0.28rem;
  text-align: left;
}
.draw-collect-list li .detail .price {
  color: #fff;
}
.draw-collect-list li .attention {
  width: 1.5rem;
  height: 0.5rem;
  position: absolute;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/117079/2/22323/2122/61a21142Eee617652/a55f007c38f611b2.png);
  background-size: 100%;
  bottom: 0;
  right: 0.1rem;
}
.draw-collect-list li .attention1 {
  width: 1.5rem;
  height: 0.5rem;
  position: absolute;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/203152/26/12634/1592/61a2136aE33ce9d7e/a668b6ced476b3e5.png);
  background-size: 100%;
  bottom: 0;
  right: 0.1rem;
}
.draw-collect-list li:nth-child(even) {
  margin-left: 2%;
}

.f-tac {
  margin-top: 0.2rem;
  color: #ffe36a;
  text-align: center;
}
.fac {
  text-align: center;
  margin-top: 0.5rem;
}
.img {
  width: 2rem;
  height: 2rem;
  margin-left: -3.2rem;
}
.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;
  margin-top: 0.5rem;
}
.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;
}
.f-ib2 {
  color: rgb(51, 51, 51);
  font-size: 0.3rem;
}
.f-tac {
  margin-top: 0.2rem !important;
  color: #ffe36a !important;
  text-align: center;
}
.draw-detail-sku .f-tal .f-tac div:last-of-type {
  color: #fff !important;
}
.f-font {
  width: 3.1rem;
  margin-left: 0.1rem;
}
.f-font-color {
  color: rgb(242, 60, 60);
}
.onebtndotask {
  width: 1.9rem;
  height: 0.69rem;
  background-size: 100%;
  position: absolute;
  right: 0.3rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/206829/34/10957/12766/61a1cf72E767b64a0/5b3791976dba2cd4.png);
}
.onebtndotask1 {
  width: 1.9rem;
  height: 0.69rem;
  background-size: 100%;
  position: absolute;
  right: 0.6rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/206770/19/10804/6258/61a1d052Eb28ff342/beb709787b570c98.png);
}
.onebtndotask.alreadydo {
  // color: #fff;
  // background: #aaaaaa;
  width: 1.9rem;
  height: 0.69rem;
  background-size: 100%;
  position: absolute;
  right: 0.3rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/206770/19/10804/6258/61a1d052Eb28ff342/beb709787b570c98.png);
}
.sukback {
  width: 3.4rem;
  height: 2.19rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/213491/17/5876/55015/61a1c90aE3f24163e/9d701f534aba4d52.png);
  background-size: 100%;
  position: absolute;
  top: 3.35rem;
}
.gift {
  width: 1rem;
  height: 1rem;
  background-size: 100%;
  position: absolute;
  left: 0.3rem;
  top: 0.2rem;
}
.gift2 {
  width: 1rem;
  height: 1rem;
  background-size: 100%;
  position: absolute;
  left: 0.3rem;
  top: 0.2rem;
}
.gift3 {
  width: 1.36rem;
  height: 0.9rem;
  background-size: 100%;
  position: absolute;
  left: 0.1rem;
  top: 0.2rem;
}
.priceLeft {
  width: 2.5rem;
  height: 0.7rem;
  left: 1.55rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: absolute;
  top: 0.35rem;
  span {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
  }
  .span1 {
    color: #f2270c;
    font-size: 0.3rem;
    font-weight: bold;
  }
  .span2 {
    font-size: 0.2rem;
  }
  .span3 {
    font-size: 0.2rem;
  }
  .span4 {
    color: #f2270c;
    font-size: 0.3rem;
    font-weight: bold;
  }
  .span3 {
    color: #f2270c;
    font-size: 0.3rem;
    font-weight: bold;
  }
  .span4 {
    font-size: 0.2rem;
  }
}
</style>