<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2023-01-13 15:13:51
-->
<template>
  <div>
    <div class="bian">
      <el-popover
        placement="left-start"
        v-if="
          (specialArea == 31 && userInfo.isMakerSpace == 0) || specialArea != 31
        "
        width="412"
        offset="33"
        popper-class="area_popper"
        :visible-arrow="false"
        @show="carShow"
        ref="popover"
        trigger="click"
      >
        <div class="pop_t">
          <div class="pop_tt">
            <!-- <div class="kong"></div> -->
            <div>{{ '购物车' }}</div>
            <!-- <img src="@/assets/images/x.png"
                   alt=""> -->
          </div>
          <div class="pop_tb">
            <div
              class="pop_i"
              v-for="(item, index) in shopCarList[0].shoppingCartList"
              :key="index"
            >
              <img :src="item.cover1" alt="" />
              <div class="pop_ill">
                <div class="tit1 pop_illd">{{ item.waresName }}</div>
                <div class="dis">
                  <span class="tit2"
                    >{{ userInfo.currencyIcon
                    }}{{ item.waresPrice | numberToCurrency }}</span
                  >
                  <span class="tit3"
                    >{{ '业绩' }}:{{
                      item.achieve | numberToCurrency
                    }}</span
                  >
                  <span
                    class="tit3"
                    v-show="shopCarList[0].specialArea == 13"
                    style="margin-left: 10px"
                    >BV:{{ item.assAchieve | numberToCurrency }}</span
                  >
                </div>
                <div class="pop_ilb">
                  <el-input-number
                    v-model="item.number"
                    size="mini"
                    @change="changeCar(item, index)"
                    :min="1"
                  ></el-input-number>

                  <el-popover
                    placement="bottom"
                    v-if="shopCarList[0].specialArea != 21"
                    trigger="click"
                  >
                    <div
                      v-for="(stem, sndex) in item.productParams"
                      :key="sndex"
                      class="tab_i2i"
                    >
                      <div class="tab_i2il">
                        {{ stem.productName
                        }}{{
                          stem.waresItemsParamsList.length > 0 &&
                          stem.waresItemsParamsList[0].specsName
                        }}
                      </div>
                      <div class="tab_i2ir">
                        *{{ stem.waresItemsParamsList[0].quantity }}
                      </div>
                    </div>
                    <div slot="reference">{{ '查看规格' }}</div>
                  </el-popover>
                  <el-popover placement="bottom" v-else trigger="click">
                    <div
                      v-for="(stem, sndex) in item.waresSkuList"
                      :key="sndex"
                      class="tab_i2i"
                    >
                      <div class="tab_i2il">{{ stem.specValueNames }}</div>
                    </div>
                    <div slot="reference">{{ '查看规格' }}</div>
                  </el-popover>
                </div>
              </div>

              <div class="delImg" @click="delData(item)">
                <img src="@/assets/images/delImg.png" alt="" />
              </div>
              <!-- <div class="tit4"
                     @click="delData(item)">删除</div> -->
            </div>
          </div>
        </div>
        <div class="pop_b">
          <div class="tit5">
            <div class="pop_bl">
              <div class="pop_bl">
                {{ '总价' }}:<span class="tit2"
                  >{{ userInfo.currencyIcon
                  }}{{ totalPrice | numberToCurrency }}</span
                >
              </div>
              <div class="pop_bl">
                {{ '业绩' }}:<span class="tit3"
                  >{{ userInfo.pkCountry == 1 ? "￥" : "$"
                  }}{{ totalAchive | numberToCurrency }}</span
                >
              </div>
              <div class="pop_bl" v-show="shopCarList[0].specialArea == 13">
                BV:<span class="tit3"
                  >{{ userInfo.currencyIcon
                  }}{{ totalBv | numberToCurrency }}</span
                >
              </div>
            </div>

            <!-- <div style="margin-top:10px">{{ howLevel }}</div> -->
          </div>
          <div class="pop_br" @click="toBuy">{{ '立即购买' }}</div>
        </div>
        <div class="bian_i" ref="shoppCar" slot="reference">
          <div class="dian_f">
            <img src="@/assets/images/car.jpg" alt="" />
            <div class="dian">{{ specialCarNum }}</div>
          </div>
          <div>{{ '购物车' }}</div>
        </div>
      </el-popover>
      <div class="bian_i" @click="openKf">
        <img src="@/assets/images/lxkf.jpg" alt="" />
        <div>{{ '联系客服' }}</div>
      </div>
      <!-- v-show="shareShow&&userInfo.pkSettleCountry==1" -->
      <div class="bian_i" @click="showShare">
        <img src="@/assets/images/fx.jpg" alt="" />
        <div>{{ '分享' }}</div>
      </div>
      <div class="bian_i" v-show="goTopShow" @click="toTop">
        <img src="@/assets/images/hddb.jpg" alt="" />
        <div>{{ '回到顶部' }}</div>
      </div>
    </div>
    <!-- 嗨粉分享 -->
    <div class="shareDig">
      <el-dialog
        title=""
        width="512px"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
      >
        <div
          class="shareClass"
          id="myImage1"
          style="height: 414px; text-align: center"
        >
          <img class="shareImg" :src="shareImg" alt="" />
          <div class="shareCode">{{ userInfo.memberCode }}</div>
        </div>
        <img
          class="shareImg3"
          @click="saveImg1"
          src="@/assets/images/btnShare.png"
          alt=""
        />
      </el-dialog>
    </div>
    <!-- 海粉分享 -->
    <div class="shareDig">
      <el-dialog
        title=""
        width="1400px"
        :visible.sync="dialogVisible1"
        :before-close="handleClose1"
      >
        <div
          class="shareClass1"
          id="myImage"
          style="height: 520px; text-align: center"
        >
          <img class="shareImg1" :src="shareImg" alt="" />
        </div>
        <img
          class="shareImg2"
          @click="saveImg"
          src="@/assets/images/btnShare.png"
          alt=""
        />
      </el-dialog>
    </div>
    <el-dialog
      title="赠品列表"
      :visible.sync="dialogVisible2"
      width="50%"
      :before-close="handleClose2"
    >
      <el-table
        :data="tableData"
        style="width: 100%"
        height="400px"
        :header-cell-style="{ background: '#EEEEEE' }"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column align="center" prop="cover1" label="商品图片">
          <template slot-scope="scope">
            <img class="bgImg" :src="scope.row.cover1" alt="" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="waresName" label="商品名称">
        </el-table-column>
        <el-table-column align="center" prop="waresCode" label="商品编号">
        </el-table-column>
        <el-table-column align="center" prop="waresPrice" label="商品价格">
        </el-table-column>
        <el-table-column align="center" prop="" label="数量">
          <template slot-scope="scope">
            <el-input-number
              size="mini"
              @change="calPrice"
              v-model="scope.row.quantity"
              :min="1"
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <div class="total">合计:{{ total | toThousandthAndKeepDecimal }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="tableTrue">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import html2canvas from "html2canvas";

import * as api from "@/api/goods.js";
import { memLevel } from "@/api/register.js";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      isCar: false,
      shopCarList: [
        {
          shoppingCartList: [],
        },
      ],
      goodsCheck: [],
      totalPrice: 0,
      totalAchive: 0,
      totalBv: 0,
      specialArea: "",
      howLevel: "",
      goTopShow: false,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      shareImg: "",
      tableData: [],
      selTable: [],
      total: "0.00",
    };
  },
  props: {
    showCar: false,
    shareShow: false,
  },
  computed: {
    ...mapGetters(["userInfo", "specialCarNum"]),
  },
  mounted() {
    window.addEventListener("scroll", this.showIcon);
  },
  methods: {
    getSpecial(specialArea) {
      this.specialArea = specialArea;
    },
    saveImg() {
      const options = {
        backgroundColor: null,
      };
      html2canvas(document.querySelector("#myImage"), options).then(
        (canvas) => {
          let url = canvas.toDataURL("image/png");
          let a = document.createElement("a");
          a.href = url;
          a.setAttribute("download", "sharePost");
          a.click();
        }
      );
    },
    saveImg1() {
      const options = {
        backgroundColor: null,
      };
      html2canvas(document.querySelector("#myImage1"), options).then(
        (canvas) => {
          let url = canvas.toDataURL("image/png");
          let a = document.createElement("a");
          a.href = url;
          a.setAttribute("download", "sharePost");
          a.click();
        }
      );
    },
    openKf() {
      let src =
        "https://im1c5366d.7x24cc.com/phone_webChat.html?accountId=N000000033467&chatId=302384fb-eda1-436e-a5e9-c03a2dbd6e97&visitorId=" +
        this.userInfo.memberCode +
        "&nickName=" +
        this.userInfo.memberCode;
      window.open(src, "_blank");
    },
    showIcon() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (this.scrollTop > document.body.clientHeight - 200) {
        //设置页面滑动多少显示按钮
        this.goTopShow = true;
      } else {
        this.goTopShow = false;
      }
    },
    closePopover() {
      this.$refs.popover.doClose();
    },
    carShow(e) {
      this.$emit("showCar");
    },
    showShare() {
      this.$emit("showShare");
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleClose1() {
      this.dialogVisible1 = false;
    },
    handleClose2() {
      this.dialogVisible2 = false;
    },
    tableTrue() {
      if (this.selTable.length > 0) {
        let a = {
          specialArea: this.goodsCheck[0].specialArea,
          orderItemsParams: [],
        };
        a.orderItemsParams = this.selTable.map((item) => {
          return {
            waresCode: item.waresCode,
            quantity: item.quantity,
            waresItemsParamList: item.productGroup,
            energySilo: 1,
          };
        });
        a.orderItemsParams.forEach((item) => {
          item.waresItemsParamList = item.waresItemsParamList.map((ctem) => {
            return {
              pkWaresSpecsSku: ctem.pkSkuId,
              quantity: ctem.quantity,
            };
          });
        });
        api.energyShopSilo(a).then((res) => {
          if (res.code == 200) {
            this.dialogVisible2 = false;
            if (this.goodsCheck[0].specialArea == 1) {
              this.$router.push({
                path: "register",
                query: {
                  specialArea: this.goodsCheck[0].specialArea,
                  selTable: JSON.stringify(this.selTable),
                },
              });
            } else if (this.goodsCheck[0].specialArea == 2) {
              this.$router.push({
                path: "upgrade",
                query: {
                  specialArea: this.goodsCheck[0].specialArea,
                  selTable: JSON.stringify(this.selTable),
                },
              });
            }
          }
        });
      } else {
        this.$message({
          message: "请选择赠品",
          type: "warning",
        });
      }
    },
    handleSelectionChange(val) {
      // waresPrice
      let total = 0;
      val.forEach((item) => {
        total += Number(item.waresPrice) * item.quantity;
      });
      this.total = total;
      this.selTable = val;
    },
    calPrice(e) {
      let total = 0;
      this.selTable.forEach((item) => {
        total += Number(item.waresPrice) * item.quantity;
      });
      this.total = total;
    },
    getShare(specialArea) {
      if (specialArea == 7) {
        this.dialogVisible = true;
        api.fansCode().then((res) => {
          this.shareImg = "data:image/png;base64," + res.data.dataStr;
        });
      } else {
        this.dialogVisible1 = true;
        api.shareCode().then((res) => {
          this.shareImg = "data:image/png;base64," + res.data.dataStr;
        });
      }
    },
    toBuy() {
      let shoppArr = this.goodsCheck[0].orderItemsParams.map((item) => {
        return item.shoppingId;
      });
      localStorage.setItem("allGoods", "");
      localStorage.setItem("allGoods", JSON.stringify(shoppArr));
      if (
        this.goodsCheck[0].specialArea == 3 ||
        this.goodsCheck[0].specialArea == 12 ||
        this.goodsCheck[0].specialArea == 14 ||
        this.goodsCheck[0].specialArea == 22 ||
        this.goodsCheck[0].specialArea == 26 ||
        this.goodsCheck[0].specialArea == 28
        
      ) {
        this.$router.push({
          path: "repurchase",
          query: {
            specialArea: this.goodsCheck[0].specialArea,
          },
        });
      }else if(this.goodsCheck[0].specialArea == 31){
        if (this.totalPrice < 1000) {
          this.$message({
            message: "购买商品总价格不能低于1000元",
            type: "warning",
          });
          return false;
        }else{
          this.$router.push({
          path: "repurchase",
          query: {
            specialArea: this.goodsCheck[0].specialArea,
          },
        });
        }
      } else if (this.goodsCheck[0].specialArea == 30) {
        if (this.goodsCheck[0].orderItemsParams.length > 1) {
          this.$message({
            message: "续约专区每次只能购买一件商品",
            type: "warning",
          });
          return false;
        } else {
          let num = this.goodsCheck[0].orderItemsParams.some(
            (item) => item.quantity > 1
          );
          if (num) {
            this.$message({
              message: "续约专区每次只能购买一件商品",
              type: "warning",
            });
            return false;
          } else {
            this.$router.push({
              path: "repurchase",
              query: {
                specialArea: this.goodsCheck[0].specialArea,
              },
            });
          }
        }
      } else if (this.goodsCheck[0].specialArea == 13) {
        this.$router.push({
          path: "welfare",
        });
      } else if (this.goodsCheck[0].specialArea == 14) {
        this.$router.push({
          path: "tvIng",
        });
      } else if (this.goodsCheck[0].specialArea == 11) {
        this.$router.push({
          path: "integral",
        });
      } else if (this.goodsCheck[0].specialArea == 10) {
        this.$router.push({
          path: "rescission",
        });
      } else if (
        this.goodsCheck[0].specialArea == 1 ||
        this.goodsCheck[0].specialArea == 24
      ) {
        let deleteList = [];
        shoppArr.forEach((item) => {
          deleteList.push({
            shoppingId: item,
          });
        });
        api
          .validShop({
            specialArea: this.goodsCheck[0].specialArea,
            deleteList: deleteList,
          })
          .then((res) => {
            api
              .energyShop({
                specialArea: this.goodsCheck[0].specialArea,
                deleteList: deleteList,
              })
              .then((response) => {
                if (response.data && response.data.length > 0) {
                  this.tableData = response.data;
                  this.tableData.forEach((item) => {
                    this.$set(item, "quantity", 1);
                  });
                  this.dialogVisible2 = true;
                } else {
                  this.$router.push({
                    path: "register",
                    query: {
                      specialArea: this.goodsCheck[0].specialArea,
                    },
                  });
                }
              });
          });
      } else if (
        this.goodsCheck[0].specialArea == 25 ||
        this.goodsCheck[0].specialArea == 27
      ) {
        this.$router.push({
          path: "upgrade",
          query: {
            specialArea: this.goodsCheck[0].specialArea,
          },
        });
      } else if (this.goodsCheck[0].specialArea == 2) {
        // let deleteList = []
        // shoppArr.forEach((item) => {
        //   deleteList.push({
        //     shoppingId: item,
        //   })
        // })
        // api
        //   .validShop({
        //     specialArea: this.goodsCheck[0].specialArea,
        //     deleteList: deleteList,
        //   })
        //   .then((res) => {
        //     if (res.code == 200) {
        //       this.$router.push({
        //         path: 'upgrade',
        //         query: {
        //           specialArea: this.goodsCheck[0].specialArea,
        //         },
        //       })
        //     } else {
        //       this.$message({
        //         type: 'warning',
        //         message: res.msg,
        //       })
        //     }
        //   })
        let deleteList = [];
        shoppArr.forEach((item) => {
          deleteList.push({
            shoppingId: item,
          });
        });
        api
          .validShop({
            specialArea: this.goodsCheck[0].specialArea,
            deleteList: deleteList,
          })
          .then((res) => {
            api
              .energyShop({
                specialArea: this.goodsCheck[0].specialArea,
                deleteList: deleteList,
              })
              .then((response) => {
                if (response.data && response.data.length > 0) {
                  this.tableData = response.data;
                  this.tableData.forEach((item) => {
                    this.$set(item, "quantity", 1);
                  });
                  this.dialogVisible2 = true;
                } else {
                  this.$router.push({
                    path: "upgrade",
                    query: {
                      specialArea: this.goodsCheck[0].specialArea,
                    },
                  });
                }
              });
          });
      } else if (
        this.goodsCheck[0].specialArea == 7 ||
        this.goodsCheck[0].specialArea == 101
      ) {
        this.$router.push({
          path: "hiFans",
          query: {
            specialArea: this.goodsCheck[0].specialArea,
          },
        });
      } else if (this.goodsCheck[0].specialArea == 18) {
        this.$router.push({
          path: "spaceRegister",
          query: {
            specialArea: 18,
          },
        });
      } else if (this.goodsCheck[0].specialArea == 19) {
        this.$router.push({
          path: "spaceRegister",
          query: {
            specialArea: 19,
          },
        });
      } else if (this.goodsCheck[0].specialArea == 21) {
        this.$router.push({
          path: "shareConfirm",
          query: {
            specialArea: 21,
            allData: JSON.stringify(this.goodsCheck[0].orderItemsParams),
          },
        });
      }
    },
    goPay() {
      let arr = [];
      this.shopCarList.forEach((item) => {
        item.shoppingCartList.forEach((ctem) => {
          arr.push({
            specialArea: item.specialArea,
            orderItemsParams: [
              {
                waresCode: ctem.waresCode,
                waresName: ctem.waresName,
                achieve: ctem.achieve,
                assAchieve: ctem.assAchieve,
                shoppingId: ctem.shoppingId,
                waresPrice: ctem.waresPrice,
                cover1: ctem.cover1,
                source: ctem.source,
                quantity: ctem.number,
                waresItemsParamList: ctem.waresItemsParamList,
                waresSkuList: ctem.waresSkuList || [],
              },
            ],
          });
        });
      });
      const arrayHashmap = arr.reduce((obj, item) => {
        obj[item.specialArea]
          ? obj[item.specialArea].orderItemsParams.push(
              ...item.orderItemsParams
            )
          : (obj[item.specialArea] = item);
        return obj;
      }, {});
      this.goodsCheck = Object.values(arrayHashmap);
      console.log(
        "%c [ this.goodsCheck ]-346",
        "font-size:13px; background:#56745d; color:#9ab8a1;",
        this.goodsCheck
      );
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 20);
    },
    // 修改数量
    changeCar(item) {
      api
        .plusReduceShopping({
          shoppingId: item.shoppingId,
          number: item.number,
          specialArea: this.shopCarList[0].specialArea,
          pkCountry: Number(localStorage.getItem("pkCountry")),
        })
        .then((res) => {
          this.dealData();
          this.$store.dispatch("SpecialQuantity", {
            specialArea: this.shopCarList[0].specialArea,
            pkCountry: Number(localStorage.getItem("pkCountry")),
          });
        })
        .catch((err) => {
          this.getCarList(this.specialArea);
        });
    },
    getCarList(specialArea) {
      this.specialArea = specialArea;
      this.howLevel = "";
      this.totalPrice = 0;
      this.totalAchive = 0;
      this.totalBv = 0;
      api
        .getShopping({
          specialArea: specialArea,
          pkCountry: Number(localStorage.getItem("pkCountry")),
        })
        .then((res) => {
          if (res.data.length == 0) {
            this.shopCarList = [{ shoppingCartList: [] }];
            return false;
          } else {
            res.data.forEach((item) => {
              item.shoppingCartList.forEach((ctem) => {
                ctem.waresItemsParamList = [];
                if (item.specialArea != 21) {
                  if (ctem.productParams) {
                    ctem.productParams.forEach((stem) => {
                      if (stem.waresItemsParamsList.length > 0) {
                        stem.waresItemsParamsList[0].pkWaresSpecsSku =
                          stem.waresItemsParamsList[0].pkSkuId;
                        stem.waresItemsParamsList[0].productName =
                          stem.productName;
                        ctem.waresItemsParamList.push(
                          stem.waresItemsParamsList[0]
                        );
                      }
                    });
                  }
                }
              });
            });
            this.shopCarList = res.data;
            console.log(
              "%c [ this.shopCarList ]-494",
              "font-size:13px; background:#6936bf; color:#ad7aff;",
              this.shopCarList
            );

            this.goPay();
            this.dealData();
          }
        });
    },
    // 计算价格
    checkPrice() {
      let totalPrice = 0;
      let totalAchive = 0;
      let totalBv = 0;
      this.goodsCheck.forEach((item) => {
        item.orderItemsParams.forEach((ctem) => {
          totalPrice += parseFloat(ctem.waresPrice * ctem.quantity);
          totalAchive += parseFloat(ctem.achieve * ctem.quantity);
          totalBv += parseFloat(ctem.assAchieve * ctem.quantity);
        });
      });
      this.totalPrice = totalPrice.toFixed(2);
      this.totalAchive = totalAchive.toFixed(2);
      this.totalBv = totalBv.toFixed(2);
    },
    // 处理数据
    dealData() {
      let arr = [
        {
          specialArea: this.shopCarList[0].specialArea,
          orderItemsParams: [],
        },
      ];
      this.shopCarList[0].shoppingCartList.forEach((ctem) => {
        arr[0].orderItemsParams.push({
          waresCode: ctem.waresCode,
          waresName: ctem.waresName,
          shoppingId: ctem.shoppingId,
          achieve: ctem.achieve,
          assAchieve: ctem.assAchieve,
          waresPrice: ctem.waresPrice,
          cover1: ctem.cover1,
          source: ctem.source,
          quantity: ctem.number,
          waresItemsParamList: ctem.waresItemsParamList,
          waresSkuList: ctem.waresSkuList || [],
        });
      });
      this.goodsCheck = arr;
      this.checkPrice();
    },
    // 多删
    delData(item) {
      let deleteList = [{ shoppingId: item.shoppingId }];
      api
        .batchDelShopping({
          deleteList: deleteList,
          pkCountry: Number(localStorage.getItem("pkCountry")),
        })
        .then((res) => {
          this.getCarList(this.specialArea);
          this.$store.dispatch(
            "SpecialQuantity",

            {
              specialArea: this.shopCarList[0].specialArea,
              pkCountry: Number(localStorage.getItem("pkCountry")),
            }
          );
          this.$message({
            type: "success",
            message: '删除成功' + "!",
          });
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>

<style lang="scss" scoped>
.bian {
  position: fixed;
  width: 86px; // height: 425px;
  background: #ffffff;
  box-shadow: -8px 1px 20px 0px rgba(165, 165, 165, 0.5);
  top: 60%;
  transform: translate(0, -50%);
  right: 0;
  padding: 40px 0 0 0;
  text-align: center;
  z-index: 100;
  border-radius: 20px;
}

.bian_i {
  margin-bottom: 40px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  cursor: pointer;
  img {
    width: 25px;
    height: 25px;
  }
}

.dian_f {
  position: relative;
  display: inline-block;
  .dian {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    color: #fff;
    background: #fe0000;
    top: -10px;
    right: -10px;
    border-radius: 50%;
  }
}

.pop_t {
  padding: 20px;
  .pop_tt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;
    font-weight: 600;
    color: #333333;
    div {
      margin: 0 auto;
    } // .kong {
    //   width: 22px;
    // }
    // img {
    //   width: 22px;
    //   height: 22px;
    // }
  }
  .pop_tb {
    padding: 34px 0px 0 0;
    max-height: 320px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
    .pop_i {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      position: relative;
      img {
        width: 81px;
        height: 92px;
        margin-right: 10px;
      }
      .pop_ill {
        flex: 1;
        .pop_illd {
          padding-right: 40px;
        }
        .pop_ilb {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 12px;
          font-weight: 400;
          color: #666666;
          div {
            cursor: pointer;
          }
        }
      }
      .delImg {
        position: absolute;
        right: 0;
        top: 0;
        img {
          width: 27px;
          height: 27px;
        }
      }
    }
  }
}

.pop_b {
  padding: 10px 10px;
  background: #ededed;
  border-radius: 0px 0px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .pop_bl {
    // display: flex;
    align-items: center;
    margin-left: 10px;
  }
  .pop_br {
    width: 117px;
    height: 38px;
    background: #d61820;
    border-radius: 8px 8px 8px 8px;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 38px;
    cursor: pointer;
  }
}

.tab_i2i {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tab_i2il {
  }
  .tab_i2ir {
    color: #d61820;
    margin-left: 10px;
  }
}

::v-deep .shareDig .el-dialog__header {
  padding: 0;
}

::v-deep .shareDig .el-dialog__body {
  padding: 0; // background-size: cover;
}

::v-deep .el-popover {
  padding: 0 !important;
  border-radius: 20px;
}

::v-deep .shareDig .el-dialog {
  border-radius: 10px;
}

.shareClass {
  border-radius: 10px 10px 10px 10px;
  background-image: url("../assets/images/sm.jpg");
  background-size: cover; // text-align: center;
  position: relative;
}

.saveHi {
  position: absolute;
  bottom: 0;
}

.shareClass1 {
  border-radius: 10px 10px 10px 10px;
  background-image: url("../assets/images/sm2.jpeg");
  background-size: cover; // text-align: center;
  position: relative;
}

.shareImg {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 10px;
  right: 0;
  margin: 0 auto;
  bottom: 12%;
}
.shareCode {
  position: absolute;
  left: 10px;
  right: 0;
  margin: 0 auto;
  bottom: 6%;
  font-size: 18px;
  font-weight: 600;
}
.shareImg1 {
  width: 180px;
  height: 180px;
  position: absolute;
  bottom: 30%;
  left: 18%;
  right: 0%;
  margin: auto;
}

.shareImg2 {
  width: 180px;
  height: 60px;
  position: absolute;
  bottom: 15%;
  left: 18%;
  right: 0%;
  margin: auto;
  animation: wiggle 1s ease-in-out infinite;
}

.shareImg3 {
  width: 180px;
  height: 60px;
  position: absolute;
  margin: 0 auto;
  animation: wiggle 1s ease-in-out infinite;
  left: 0;
  right: 0;
  bottom: -20%;
}

.tit1 {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
}

.tit2 {
  font-size: 21px;
  font-weight: 600;
  color: #f43c3a;
  margin-right: 10px;
}

.tit3 {
  font-size: 14px;
  color: #384a8a;
}

.tit4 {
  font-size: 12px;
  font-weight: 400;
  color: #d2171f;
  cursor: pointer;
}

.tit5 {
  font-size: 12px;
  font-weight: 400;
  color: #333333;
}

.dis {
  display: flex;
  align-items: center;
  margin: 5px 10px 5px 0;
}
.bgImg {
  width: 48px;
  height: 48px;
}
@keyframes wiggle {
  0% {
    transform: scale(1.1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.3);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.1);
  }
}
.total {
  text-align: right;
  font-size: 14px;
  padding: 5px 10px;
}
</style>

<style scoped></style>

<style>
.area_popper {
  border-radius: 30px !important;
  padding: 0 !important;
}
</style>
