zc_saas_pc/src/pages/living-room/index.vue

<template>
  <div class="living-room">
    <Header></Header>

    <div class="container">
      <div class="clearfix top-line">
        <div class="title">{{ goodsName }}</div>
        <div class="bottoms">
          <el-button
            size="small"
            round
            @click="toShare()"
            >分享</el-button>
          <el-button
            class="float-right"
            type="primary"
            size="small"
            round
            @click="returnBack()"
            >返回</el-button
          >
        </div>
        
      </div>
    </div>
    <!-- pc端 -->
    <div class="plv-watch-pc">
      <div class="plv-watch-pc__top" id="plv-pc-top">
        <div class="plv-watch-pc__screen plv-watch-pc__screen-main">
          <div class="plv-watch-pc__screen__height">
            <div class="plv-watch-pc__screen__inner" id="plv-pc-main"></div>
          </div>
        </div>

        <div class="plv-watch-pc__screen plv-watch-pc__screen-sub">
          <div class="plv-watch-pc__screen__height">
            <div class="plv-watch-pc__screen__inner" id="plv-pc-side"></div>
          </div>
        </div>

        <div class="plv-watch-pc__side">
          <div class="plv-watch-pc__chat plv-skin--dark" id="plv-pc-chat"></div>
        </div>
      </div>

      <div id="plv-pc-channel-info" class="plv-watch-pc__info">
        <img
          class="plv-watch-pc__info__logo"
          src="https://live.polyv.cn/assets/wimages/pc_images/logo.png"
        />
        <div class="plv-watch-pc__info__desc">
          <p class="plv-watch-pc__info__desc__name"></p>
          <span class="plv-watch-pc__info__desc__publisher-ico"></span>
          <span class="plv-watch-pc__info__desc__publisher"></span>
          <span class="plv-watch-pc__info__desc__view"></span>
        </div>
      </div>
    </div>

    <!-- pc菜单栏 -->
    <!-- <div class="plv-pc-menu">
        <div class="plv-pc-menu__container">
          <ul id="plv-menu-tab" class="plv-pc-menu__tab"></ul>
          <div id="plv-menu-content" class="plv-pc-menu__content"></div>
        </div>
      </div> -->
    <!-- </div> -->
    <!-- <div class="container">
      <div ref="living" id="living" class="living">
        <div
          :style="
            changeState
              ? { left: 0, top: 0, width: 600 + 'px', height: 600 + 'px' }
              : {}
          "
          id="ppt"
          ref="ppt"
          class="ppt"
        ></div>
        <div
          :style="
            changeState
              ? {
                  left: 600 + 'px',
                  top: 0,
                  width: 300 + 'px',
                  height: 200 + 'px',
                }
              : {}
          "
          id="player"
          ref="player"
          class="player"
        ></div>
        <div ref="wrap" id="wrap"></div>
        <div class="controller" ref="controller"></div>
      </div>
    </div> -->
    <Footer></Footer>

    <el-dialog
      width="462px"
      class="sign-modal"
      :visible.sync="signModal"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="sign-modal__content">
        <img class="img" src="@/assets/sign.png" alt="" />
        <div class="box">
          <div class="title">直播已经开始啦，赶紧签到进入直播吧！</div>
          <el-button type="primary" class="btn" @click="close"
            >立即签到</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      width="400px"
      :visible.sync="signSuccess"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="sign-success__content">
        <img class="img" src="@/assets/appoinsuccess.png" alt="" />
        <div class="title">签到成功！</div>
      </div>
    </el-dialog>

    <!-- 您还没有开通直播课程，无法观看 -->
    <el-dialog
      title="提示"
      :visible.sync="showAuth"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="400px"
      >
      <div class="popCentent">
        <div class="tips">您还没有开通直播课程，无法观看</div>
        <div class="btns" @click="toAuth()">立即开通</div>
      </div>
    </el-dialog>

    <!-- 分享弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="shareShow"
      width="600px"
      >
      <div v-loading="shareLoading" class="popShare">
        <el-form ref="form" :model="formShare" label-width="130px">
          <el-form-item label="观看链接(pc端)：">
            <div>
              <span>{{ formShare.links }}</span>
              <span class="ccopy" @click="copy()">复制</span>
            </div>
          </el-form-item>
          <el-form-item label="观看二维码：">
            <img class="ercode_pic" :src="formShare.ercode" alt="" />
            <span class="ccopy" @click="download()">下载</span>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import { mapGetters, mapMutations } from "vuex";
import "@/assets/jquery.min.js";
import "@/assets/css/chatroom.css";
import "@/assets/css/pc.css";
import "@/assets/css/tool.css";
import "@/assets/css/public.css";
let Base64 = require('js-base64').Base64

export default {
  components: {
    Footer,
    Header,
    ToolBar,
  },
  data() {
    return {
      signSuccess: false,
      signModal: false,
      playerJs: "https://player.polyv.net/livesdk/polyv-live.min.js",
      chatroomJs: "https://player.polyv.net/jssdk/polyv-chatroom.min.js",
      uidzb: "egsxlptzdq",
      channelId: "",
      appId: "",
      sign: "",
      timestamp: "",
      timer: null,
      mediaChannelKey: "",
      changeState: false,
      liveSdk: null,
      token: "",
      plv: {
        liveSdk: null, // 保存直播 JS-SDK 实例
        socket: null, // 保存 WebSocket 实例
        scene: "", // 场景
        mainPosition: "player", // 用于记录当前主屏幕是文档还是播放器
      },
      sectionId: 0,
      goodsId: 0,
      courseId: 0,
      orderGoodsId: 0,
      gradeId: 0,
      chapterId: 0,
      moduleId: 0,
      playTime: 0,
      duraing: 0,
      timer: null,
      liveLast: null,
      isFirst: true,
      backNum: -1, //返回页面数
      buyCourse: 1, // 是否购买课程：1是 0否
      identification: '', // 标识
      goodsName: '', // 名称
      checkStatus: 0, // 0没有权限，1有权限
      goodsStatus: 0, // 0未上架，1上架
      showAuth: false, 
      shareShow: false,
      sectionType: 2, //sectionType: 2, // 节类型 1录播 2直播 3回放	
      vid: '', // 回放的id
      formShare: {
        links: '',
        ercode: '',
      },
      shareLoading: false
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path.includes("my-course-detail")) {
        vm.backNum = -2;
      } else if (from.path == '/login') {
        vm.backNum = 0;
      } else {
        vm.backNum = -1;
      }
    });
  },
  created() {
    console.log('是否登录了', this.$route.query)
    if (!this.$tools.isLogin()) {
      this.setCurrentRouter(this.$route);
      this.$router.push({
        path: "/login",
      });
      return;
    }
    const { a } = this.$route.query
    console.log('aaaaaaaaa', a, decodeURIComponent(location.search.slice(5)))    
    this.channelId = this.$route.params.channelId
    // 有a字段是标识是复制链接进来
    if (a ==1) {
      this.getParam()
      return
    }
    // 下面不是复制链接进来的
    const {sectionId, goodsId, courseId, orderGoodsId, gradeId, chapterId, moduleId, goodsName, sectionType, vid} = this.$route.query
    this.sectionId = sectionId
    this.goodsId = goodsId
    this.courseId = courseId
    this.orderGoodsId = orderGoodsId
    this.gradeId = +gradeId
    this.chapterId = chapterId
    this.moduleId = moduleId
    // this.channelId = this.$route.params.channelId;
    this.goodsName = goodsName
    this.sectionType = sectionType
    this.vid = vid
    this.identification = new Date().valueOf() + ""
    this.buyCourse = 0
    this.playVideo();
    if (this.sectionType !=3 ) {
      this.studyRecordGetLastLive();
    }
    
  },
  beforeDestroy() {
    if (!this.$tools.isLogin()) return
    this.plv.liveSdk.destroy();
    clearInterval(this.timer);
  },
  methods: {
    ...mapMutations(["setCurrentRouter", "getCartCount"]),
    returnBack() {
      console.log('backNum', this.backNum)
      if (this.backNum == 0) {
        this.$router.push({
          path: '/home'
        })
      } else {
        this.$router.go(this.backNum)
      }
    },
    toShare() {
      this.shareLoading = true
      this.shareShow = true
      this.$axios({
        url: '/course/watch/per',
        method: 'get',
        params: {
          courseId: this.courseId, //课程ID	
          goodsId: this.goodsId, // 商品id
          moduleId: this.moduleId || null,
          chapterId: this.chapterId || null,
          sectionId: this.sectionId, // 节id
          sectionType: this.sectionType, //节类型 1录播 2直播 3回放
        },
      }).then((res) => {
        this.shareLoading = false
        if (res.code == 200) {
          this.formShare.links = res.data.enCodePC
          this.formShare.ercode = res.data.enCode
        }
      }).catch((err) => {
        this.shareLoading = false
        this.$message.warning(err.msg)
      })
    },
    // 获取直播间跳转参数的接口
    getParam() {
      let decodeValue = decodeURIComponent(location.search.slice(5))
      let paramArr = Base64.decode(decodeValue).split('&')
      console.log('paramArr:',paramArr)
      let paramObj = {}
      for (let i = 0; i < paramArr.length; i++) {
          paramObj[paramArr[i].split('=')[0]] = paramArr[i].split('=')[1]
      }
      const { cid, gid, sid} = paramObj
      console.log('cid, gid, sid',  cid, gid, sid)
      this.$axios({
        url: '/course/check/watch/per',
        method: 'get',
        params: {
          courseId: cid, //课程ID	
          goodsId: gid, // 商品id
          sectionId: sid, // 节id
        },
      }).then((res) => {
        if (res.code == 200) {
          let item = res.data
          const {sectionId, goodsId, courseId, orderGoodsId, gradeId, chapterId, moduleId, buyCourse, sectionType, recordingUrl} = item
          this.goodsId = goodsId
          this.sectionId = sectionId
          this.courseId = courseId
          this.orderGoodsId = orderGoodsId
          this.gradeId = +gradeId || 0
          this.chapterId = chapterId
          this.moduleId = moduleId
          this.buyCourse = buyCourse
          this.goodsStatus = item.goodsStatus
          this.goodsName = item.goodsName
          this.sectionType = sectionType
          this.vid = recordingUrl || ''
          console.log('vid', this.vid, this.sectionType)
          if (item.checkStatus == 1) { // 有权限
            this.identification = new Date().valueOf() + ""
            this.playVideo();
            if (this.sectionType != 3) {
              this.studyRecordGetLastLive();
            }
          } else {
            this.showAuth = true
          }
        }
      }).catch((err) => {
        console.log('500:', err)
        this.$message({
          message: err.msg,
          type: "warning",
        })
        this.$router.push({
          path: '/home'
        })
      })

    },
    toAuth() {
      if (this.goodsStatus == 1) { //已上架
        this.$router.push({
          path: "/course-detail/" + this.goodsId,
        })
      } else {
        this.$router.push({
          path: '/home'
        })
      }
    },
    // 新增用户视频学习日志
    studyLog() {
      this.$axios({
        url: '/user/study/log',
        method: 'post',
        data: {
          goodsId: this.goodsId,
          courseId: this.courseId,
					moduleId: this.moduleId || 0,
					chapterId: this.chapterId || 0,
          sectionId: this.sectionId || 0,
          fromPlat: 2, //来源平台 1小程序 2PC网站
          goodsType: 6, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
          orderGoodsId: this.orderGoodsId,
        }
      }).then((res) => {
        console.log('直播的用户学习日志:', res)
      })
    },
    close() {
      this.signModal = false;
      this.signSuccess = true;
      setTimeout(() => {
        this.signSuccess = false;
      }, 1000);
    },
    polyvLivesign() {
      console.log(this.channelId);
      // /polyv/live/sign
      this.$request
        .polyvLivesign({
          channelId: this.channelId,
        })
        .then((res) => {
          if (res.code == 200) {
          this.sign = res.data.sign;
          this.token = res.data.token;
          this.mediaChannelKey = res.data.mediaChannelKey;
          this.timestamp = res.data.timestamp;
          this.appId = res.data.appId;

          this.loadPlayerzb();
          // 新增用户视频学习日志
          this.studyLog()
          } else {
            this.$message.warning(res.msg)
          }
        }).catch((err) => {
          this.$message.warning(err.msg)
        }) 
    },

    async playVideo() {
      // await this.jquery();
      await this.loadPlayerScriptzb();
      await this.loadChatroomScriptzb();
      console.log(this.userInfo);
      this.polyvLivesign();
    },

    /**
     * 获取上次观看的直播
     */
    studyRecordGetLastLive() {
      if (!this.gradeId && this.sectionId) {
        // /study/record/getLastLive
        this.$request
          .studyRecordGetLastLive({
            orderGoodsId: this.orderGoodsId,
            courseId: this.courseId,
          })
          .then((res) => {
            if (!res.data) {
              // this.signModal = true;
            }
          });
      }
    },

    jquery() {
      return new Promise((resolve) => {
        if (!window.polyvLivePlayer) {
          const myScript = document.createElement("script");
          myScript.setAttribute("src", "../../assets/jquery.min.js");
          document.body.appendChild(myScript);
          myScript.onload = resolve;
        } else {
          resolve();
        }
      });
    },

    loadPlayerzb() {
      var els = {
        playerEl: "", // 播放器容器选择器, 移动端和PC的el参数设置不
        pptEl: "", // 文档容器选择器, 普通直播不需要设置pptEl
        controllerEl: "", // 三分屏控制栏的容器选择器， pc三分屏的场景才需要设置controllerEl,
        chatContainer: "", // 聊天室的容器选择器
        pptEl: "#tab-ppt",
      };

      els.chatContainer = "#plv-pc-chat"; // DOM选择器，HTML元素，用于渲染聊天室
      els.pptEl = "#plv-pc-side"; // ppt文档元素选择器，非云课堂可不填
      els.playerEl = "#plv-pc-main"; // 讲师区域元素
      els.controllerEl = $("#plv-pc-top")[0]; // 控制栏父元素
      var chatroom = new PolyvChatRoom({
        //实例聊天室SDK
        roomId: this.channelId,
        userId: this.userInfo.userAccount,
        nick: this.userInfo.realname,
        accountId: this.userInfo.userAccount,
        pic:
          this.$tools.splitImgHost(this.userInfo.avatar, true) ||
          "http://livestatic.videocc.net/assets/wimages/missing_face.png",
        container: els.chatContainer,
        userType: "slice",
        version: "2.0",
        showUserList: false,
        width: "100%",
        height: "100%",
        token: this.token,
        mediaChannelKey: this.mediaChannelKey,
        roomMessage: (data) => {
          // data为聊天室socket消息，当有聊天室消息时会触发此方法
          console.log(data);
          if (this.plv.liveSdk && this.plv.liveSdk.player) {
            var event = data.EVENT;
            if (event === "sendMessage" || event === "SPEAK") {
              this.plv.liveSdk.player.sendBarrage(data.content);
            }
          }
        },
      });

      this.plv.socket = chatroom.chat.socket;

      this.plv.liveSdk = new PolyvLiveSdk({
        //实例直播SDK
        channelId: this.channelId,
        appId: this.appId,
        sign: this.sign,
        timestamp: this.timestamp,
        socket: chatroom.chat.socket, //传入聊天室的socket
        user: {
          userId: this.userInfo.userAccount,
          userName: this.userInfo.realname,
          pic:
            this.$tools.splitImgHost(this.userInfo.avatar, true) ||
            "http://livestatic.videocc.net/assets/wimages/missing_face.png",
        },
      });

      this.plv.liveSdk.on(
        PolyvLiveSdk.EVENTS.STREAM_UPDATE,
        (event, status) => {
          if (status == "end") {
            clearInterval(this.timer);
            let duraing = this.playTime - this.duraing;
            this.duraing = 0;
            this.studyRecord(1, duraing);
          }
        }
      ); // 监听流状态变化

      // 第四步：监听频道信息读取完成事件，初始化播放器
      let options = {
        el: els.playerEl,
        pptEl: els.pptEl,
        pptPlaceholder: true,
        switchPlayer: true,
        controllerPosition: "ppt",
        fixedController: true,
        controllerEl: els.controllerEl,
        pptNavBottom: "80px",
        barrage: true, // 是否开启弹幕
        defaultBarrageStatus: true,
        autoplay: true,
      }
      if (this.sectionType == 3) {
        // 回放模式需要fileId、url、sessionId
        // fileId: undefined, //ppt数据id，回放模式必填
        // url: undefined,  // 回放视频链接，回放模式必填
        // sessionId: undefined, // 回放场次id，回放模式必填
        // vid: undefined,  // 回放id，回放模式下传入该参数，可不传fileId、url、sessionId
        options.type = 'vod',
        options.vid = this.vid
      }
      console.log('options', options)
      this.plv.liveSdk.on(
        PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT,
        (event, data) => {
          this.plv.liveSdk.setupPlayer(options);

          this.plv.liveSdk.player.on(
            "fullscreenChange",
            this.handleFullscreenChange
          );
          this.plv.liveSdk.player.on("switchPlayer", this.handleSwitchPlayer); // 点击控制栏切换按钮触发
          this.plv.liveSdk.player.on("switchMainScreen", this.switchPlayer);

          // this.plv.liveSdk.player.on("switchPlayer", () => {
          //   var switchPosition = plv.mainPosition === 'ppt' ? 'player' : 'ppt';
          //   switchPlayer(switchPosition);
          // });

          // this.plv.liveSdk.player.on("switchMainScreen", (main) => {
          //   console.log("切换主讲位置，当前主屏为", main); // 'player'|'ppt'
          // });

          // this.plv.liveSdk.player.on("ended", () => {
          //   this.duraing += this.playTime;
          //   clearInterval(this.timer);
          //   this.studyRecord(1);
          // });

          this.plv.liveSdk.player.on("pause", (state) => {
            let duraing = this.playTime - this.duraing;
            this.duraing = 0;
            this.studyRecord(0, duraing);
            clearInterval(this.timer);
          });

          this.plv.liveSdk.player.on("loadedmetadata", (state) => {
            if (this.isFirst) {
              this.studyRecord(0);
              this.isFirst = false;
            }

            clearInterval(this.timer);
            this.timer = setInterval(() => {
              this.studyRecord(0, 20);
              this.duraing += 20;
            }, 20000);
          });

          this.plv.liveSdk.player.on("timeupdate", (time) => {
            this.playTime = time;
          });
        }
      );
    },

    studyRecord(status, duraing) {
      if (!this.sectionId) {
        return;
      }
      let self = this;
      this.$request.studyRecord({
        fromPlat: 2, //来源平台 1小程序 2网站	
        buyCourse: this.buyCourse,
        identification: this.identification,
        sectionId: parseInt(this.sectionId),
        goodsId: parseInt(self.goodsId),
        courseId: parseInt(self.courseId),
        orderGoodsId: this.orderGoodsId,
        studyDuration: parseInt(duraing) || 0,
        gradeId: parseInt(self.gradeId),
        chapterId: parseInt(self.chapterId),
        moduleId: parseInt(self.moduleId),
        videoCurrentTime: 2,
        status: status,
      });
    },
    /**
     * @param {String} 直播js加载
     */
    loadChatroomScriptzb() {
      return new Promise((resolve) => {
        if (!window.polyvLivePlayer) {
          const myScript = document.createElement("script");
          myScript.setAttribute("src", this.chatroomJs);
          document.body.appendChild(myScript);
          myScript.onload = resolve;
        } else {
          resolve();
        }
      });
    },
    /**
     * @param {String} 聊天室js加载
     */
    loadPlayerScriptzb() {
      return new Promise((resolve) => {
        if (!window.polyvLivePlayer) {
          const myScript = document.createElement("script");
          myScript.setAttribute("src", this.playerJs);
          document.body.appendChild(myScript);
          myScript.onload = resolve;
        } else {
          resolve();
        }
      });
    },

    handleSwitchPlayer() {
      var switchPosition = this.plv.mainPosition === "ppt" ? "player" : "ppt";
      this.switchPlayer(switchPosition);
    },

    // 控制栏切换按钮的点击处理函数，仅适用PC端
    handleSwitchPlayer() {
      var switchPosition = this.plv.mainPosition === "ppt" ? "player" : "ppt";
      this.switchPlayer(switchPosition);
    },

    // 点击到文档tab时调用播放器的resize方法，原因：
    // ppt父容器样式改变会导致ppt显示异常，需要调用resize刷新ppt尺寸，该函数用于移动端三分屏场景
    handlePptTabClick() {
      $("[data-type=ppt]").click(function () {
        setTimeout(function () {
          this.plv.liveSdk.player.resize();
        }, 0);
      });
    },

    // 全屏/退出全屏回调
    handleFullscreenChange(isFullScreen, fullScreenElement) {
      if (isFullScreen) {
        $(fullScreenElement).addClass("plv-watch-pc__top--fullscreen");
      } else {
        $(fullScreenElement).removeClass("plv-watch-pc__top--fullscreen");
      }
    },

    // 切换主副屏，如需兼容ie，建议通过css的方式去切换位置，dom操作可能导致播放器异常
    switchPlayer(nextMainPosition) {
      var pcScreens = $(".plv-watch-pc__screen").removeClass(
        "plv-watch-pc__screen-main plv-watch-pc__screen-sub"
      );

      switch (nextMainPosition) {
        case "player":
          pcScreens.eq(0).addClass("plv-watch-pc__screen-sub");
          pcScreens.eq(1).addClass("plv-watch-pc__screen-main");
          break;

        case "ppt":
          pcScreens.eq(0).addClass("plv-watch-pc__screen-main");
          pcScreens.eq(1).addClass("plv-watch-pc__screen-sub");
          break;
      }

      this.plv.mainPosition = nextMainPosition;
      this.plv.liveSdk.player.resize(); // ppt容器宽高修改，调用resize刷新ppt尺寸
      this.plv.liveSdk.player.resizeBarrage(); // 刷新弹幕显示区域尺寸
    },
    download() {
      var url = this.formShare.ercode
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      a.download = "二维码";
      a.href = url;
      a.dispatchEvent(event);
    },

    copy() {
      var copyInput = document.createElement("input");
      //val是要复制的内容
      copyInput.setAttribute("value", this.formShare.links);
      document.body.appendChild(copyInput);
      copyInput.select();
      try {
        var copyed = document.execCommand("copy");
        if (copyed) {
          document.body.removeChild(copyInput);
          this.$message.success("复制成功");
        }
      } catch (err) {
        this.$message.error("复制失败，请检查浏览器兼容");
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.living-room {
  background: #eee;
  .top-line {
    margin: 10px 0;
    overflow: hidden;
    // padding: 0px 45px;
    .title {
      font-size: 18px;
      float: left;
    }
    .bottoms {
      float: right;
    }
    .float-right {
      width: 100px;
    }
  }

  .living {
    position: relative;
    width: 900px;
    height: 600px;
    margin: 0 auto;

    #wrap {
      position: absolute;
      width: 300px;
      height: 400px;
      left: 600px;
      top: 200px;

      /deep/ .polyv-cr-head {
        background: #ccc;
      }
    }

    #ppt {
      position: absolute;
      left: 600px;
      top: 0;
      width: 300px;
      height: 200px;
    }

    #player {
      position: absolute;
      width: 600px;
      height: 600px;
      left: 0;
      top: 0;
    }

    .controller {
      position: absolute;
      width: 600px;
      height: 48px;
      left: 0;
      bottom: 0;
    }
  }

  .sign-modal {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__content {
      .img {
        width: 462px;
        display: block;
      }

      .box {
        padding: 24px 0;
        background: #ffffff;

        .title {
          font-size: 16px;
          font-weight: bold;
          color: #333333;
          line-height: 24px;
          text-align: center;
        }

        .btn {
          display: block;
          margin: 40px auto 0;
          width: 200px;
          height: 40px;
          padding: 0;
          text-align: center;
          line-height: 40px;
          border-radius: 8px;
        }
      }
    }
  }

  .sign-success {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__content {
      width: 400px;
      height: 200px;
      position: relative;
      background: #ffffff;
      border-radius: 8px;
      .img {
        position: absolute;
        left: 50%;
        top: -54px;
        width: 196px;
        margin-left: -98px;
        display: block;
      }
      .title {
        padding-top: 120px;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        line-height: 24px;
        text-align: center;
      }
    }
  }

  .popCentent {
      display: flex;
      flex-direction: column;
      align-items: center;
    .btns {
      width: 300px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #3577E8;
      color: #fff;
      font-size: 16px;
      border-radius: 20px;
      margin-top: 20px;
      cursor: pointer;
    }
  }
  .popShare {
    .ccopy {
      color: #1890ff;
      font-size: 14px;
      margin-left: 10px;
      cursor: pointer;
    }
    .ercode_pic {
      width: 150px;
      height: 150px;
      // &.bg {
      //   background: url();
      // }
    }
  }
}
</style>