onecric_h5/pages/Live/live-detail.vue

<!-- 直播间 -->
<template>
  <view class="detail live-detail">
    <div class="body">
      <detailHeader :roomInfo="roomInfo" v-if="roomInfo.title"></detailHeader>
      
      <div v-html="inputHtml"></div>
      <div class="no-live" v-if="!liveSign">
        <detailFollow :matchDetail="matchDetail" :roomInfo="roomInfo" @success="getLiveDetail1" :userInfo="userInfo"></detailFollow>
        <div class="down-box" v-if="roomInfo.down > 0 && roomInfo.islive == 0">
          <div>
            <div>
              <!-- Match starts in -->
              {{ $t("match.lab76") }}
            </div>
            <div class="down">
              {{ countdownFun(roomInfo.down / 1000) }}
            </div>
          </div>
        </div>
        <img :src="roomInfo.thumb" width="100%" style="display:block" />
				<!-- <image class="home_logo" v-if="roomInfo.home_logo && roomInfo.away_logo" :src="roomInfo.home_logo" mode="aspectFill" alt=""></image> -->
				<!-- <image class="away_logo" v-if="roomInfo.home_logo && roomInfo.away_logo" :src="roomInfo.away_logo" mode="aspectFill" alt=""></image> -->
      </div>
      <view v-else class="video" @click="play(1)">
        <view class="" style="z-index: 9997">
          <lff-barrage
            ref="lffBarrage"
            :maxTop="240"
            type="leftToRight"
          ></lff-barrage>
          <lff-barrage ref="lffBarrage2"></lff-barrage>
        </view>
        <view class="thumb video-js" ref="video" id="player-con">
          <detailDownload @cancel="downloadTimerFun" v-if="downloadShow"></detailDownload>
          <view class="video-mask" v-if="videoMask">
            <detailFollow v-if="!isFullScreen" :matchDetail="matchDetail" :roomInfo="roomInfo" @success="getLiveDetail1" :userInfo="userInfo"></detailFollow>
            <!-- <view class="top font24" @click="setting(5)">
              {{ qualityIndex[qualityIndex] || "quality" }}
            </view> -->
            <div class="ranking-box" @click="screenMatchShow = true" v-if="isFullScreen && roomInfo.match_id">
              <img class="ranking" src="/static/image/live/ranking.png" alt="">
            </div>
            <view class="foot flex-end" :class="{'full': isFullScreen}">
              <image
                src="/static/image/live/reset.png"
                mode=""
                @click="setting(1)"
              ></image>
              <screenChat :messageList="messageList" v-if="isFullScreen" :giftList="giftList" @addMesg="addMesg" :roomInfo="roomInfo" ref="detail1" :userInfo="userInfo"></screenChat>
              <image
                style="width: 78rpx"
                :src="
                  danmu
                    ? '/static/image/live/danmu.png'
                    : '/static/image/live/danm-false.png'
                "
                @click="setting(2)"
                mode=""
              ></image>
              <u-icon v-if="isVolume" @click="play(2)" name="volume" color="#fff" size="36rpx"></u-icon>
              <u-icon v-else @click="play(2)" name="volume-off" color="#fff" size="36rpx"></u-icon>
              <!-- <image src="/static/image/live/danmu.png" mode=""></image> -->
              <!-- <image src="/static/image/live/set.png" mode=""  @click="setting(3)"></image> -->
              <image
                src="/static/image/live/quanping.png"
                mode=""
                @click="setting(4)"
              ></image>
            </view>
          </view>
          <div class="screen-match" v-if="screenMatchShow && isFullScreen">
            <screenMatch @cancel="screenMatchShow = false" :list="competition_list" :matchDetail="matchDetail" :livePath="matchDetail.live_path"></screenMatch>
          </div>
          <!-- 设置画质 -->
          <view class="quality-mask" v-if="isQuality">
            <view class="quality-nav">
              <view class="quality-del flex-end" @click="isQuality = false">
                <image src="/static/image/live/del.png" mode=""></image>
              </view>
              <view class="quality-title font32">
                {{ $t("live.definition") }}
              </view>
              <view class="quality-list flex">
                <view
                  class=""
                  v-for="(item, index) in qualityArr"
                  :key="index"
                  @click="setting(6, index)"
                >
                  {{ item.name }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <image
          class="thumb"
          v-if="roomInfo && !videoPlay"
          :src="roomInfo.thumb"
          mode="aspectFill"
        ></image>
      </view>
      <div class="adver-box">
        <img class="ad" v-if="roomInfo.adver_img_one" @click="adClick(roomInfo)" :src="roomInfo.adver_img_one" alt="">
        <img class="qr_img" v-if="roomInfo.qr_img" @click.stop="adClick1(roomInfo)" :src="roomInfo.qr_img" alt="">
      </div>
      <view class="tabs" v-if="liveType != 'game'">
        <u-tabs
          :list="tabList"
          lineHeight="3px"
          lineWidth="35px"
          lineColor="#DC3C23"
          :scrollable="true"
          :activeStyle="{
            color: '#DC3C23',
            fontSize: '15px',
            fontWeight: '700',
          }"
          :itemStyle="{height: '40px'}"
          :inactiveStyle="{ color: '#000', fontSize: '15px' }"
          :current="current"
          @change="change"
        >
        </u-tabs>
      </view>
    </div>
    <detailList v-if="current == 0" :liveList="liveList"/>
    <detailChat :liveType="liveType" @uodateMsg="uodateMsg" v-show="current == 1" :giftList="giftList" @addMesg="addMesg" :roomInfo="roomInfo" ref="detail1" :userInfo="userInfo"/>
    <!-- <detailAnimation v-if="current == 2" :livePath="matchDetail.live_path" /> -->
    <detailLive v-if="current == 2" :matchDetail="matchDetail" />
    <detailInfo v-if="current == 3" :matchDetail="matchDetail" />
    <detailScorecard v-if="current == 4" :list="competition_list" :matchDetail="matchDetail" />
    <detailSquad v-if="current == 5" :matchDetail="matchDetail" />
  </view>
</template>

<script>
import detailInfo from './compontent/detail-info.vue'
import detailChat from './compontent/detail-chat.vue'
import detailAnimation from './compontent/detail-animation.vue'
import detailList from './compontent/detail-list.vue'
import detailLive from './compontent/detail-live.vue'
import detailScorecard from './compontent/detail-scorecard.vue'
import detailSquad from './compontent/detail-squad.vue'
import screenChat from './compontent/screen-chat.vue'
import screenMatch from './compontent/screen-match.vue'
import bus from '@/utils/bus'
import detailHeader from './compontent/detail-header.vue'
import detailFollow from './compontent/detail-follow.vue'
import detailDownload from './compontent/detail-download.vue'
export default {
  components: {
    detailHeader,
    detailFollow,
    detailInfo,
    detailChat,
    detailList,
    detailLive,
    detailScorecard,
    detailSquad,
    detailAnimation,
    screenChat,
    screenMatch,
    detailDownload
  },
  data() {
    return {
      nativeShare: null,
      videoMask: false,
      timer: null, //定时器
      i: 0, //计数
      show: false,
      quality: ["540", "720", "1080"],
      bg: {
        backgroundColor: "transparent",
      },
      tabList: [
        {
          name: this.$t("live.detailTab1"),
        },
        {
          name: this.$t("live.detailTab2"),
        },
        // {
        //   name: this.$t('live.lab39'),
        // },
        {
          name: this.$t("live.detailTab3"),
        },
        {
          name: this.$t("live.detailTab4"),
        },
        {
          name: this.$t("live.detailTab5"),
        },
        {
          name: this.$t("live.detailTab6"),
        },
      ],
      groupID: "",
      id: '',
      roomInfo: {},
      matchDetail: {},
			competition_list: [],
      player: null,
      current: 1,
      userInfo: {},
      giftList: [],
      isPlay: false,
      isVolume: true, //是否播放声音
      videoBar: false,
      videoPlay: true,
      isQuality: false,
      isFullScreen: false,
      screenMatchShow: false,
      qualityIndex: 0,
      qualityArr: [], //画质数组
      quality: [], //画质
      setType: 0,
      liveList: [],
      liveType: '',
      danmu: true,
      time1: null,
      downTimer: null,
      liveSign: true,
      userClick: false,
      downloadShow: false,
      downloadTimer: null,
      messageList: [],
      inputHtml: '<input type="text" id="copy-input" style="opacity: 0;position: fixed;top: 0;z-index: -1;" readonly="readonly">'
    };
  },

  onLoad(option) {
    this.id = option.ID;
    // this.getUserGiftList()
    this.liveType = option.type
    if (this.liveType != 'game') {
      this.getList();
    }
    this.$store.state.timMessage = [];
    // let watchingOutSign = localStorage.getItem('watchingOutSign')
    // if (watchingOutSign && this.isLogin != 1) {
    //   this.$r.loginBox();
    //   this.$store.state.loginShowSign = true;
    //   this.$store.state.loginShowCloseSign = false;
    // } else {
      this.getIsLogin();
    // }
  },
  deactivated() {
    this.isFullScreen = false
  },
  onUnload() {
    bus.$off('chatLogin')
    // this.player = null
    this.time1 && clearInterval(this.time1);
    this.downTimer && clearInterval(this.downTimer);
    this.downloadTimer && clearTimeout(this.downloadTimer);
    window.removeEventListener('touchstart', this.owerPlay1)
    this.player && this.player.dispose();
    /* 退出群组 */
    this.time1 = null;
    this.downTimer = null;
    // this.$store.dispatch('quitGroup',{groupID:this.groupID})
    uni.$TUIKit
      .quitGroup(this.groupID)
      .then((imResponse) => {})
      .catch((imError) => {
        console.warn("joinGroup error:", imError); // 申请加群失败的相关信息
      });
  },
  onShow() {
  },
  onHide() {
    // this.player = null
    // this.player.dispose();
  },
  mounted() {
    this.downloadTimerFun()
		this.getLiveDetail();
    window.addEventListener('touchstart', this.owerPlay1)
    document.getElementById('palyevent').addEventListener('click',this.owerPlay)
  },
  computed: {
    infos() {
      return this.$store.state.info;
    },
    isLogin() {
      return this.$store.state.isLogin;
    },
    system() {
      return this.$store.state.system;
    },
  },
  methods: {
    videoInit(data) {
      var $this = this
      this.player = new Aliplayer(
        {
          id: "player-con",
          source: data.pull || 'https://ss247.life/demoapi/Nstreamapi.php?chid=1029&ip=113.89.8.22',
          // source: 'https://crm.wisex.io/video/5.mp4',
          width: "100%",
          height: "100%",
          autoplay: true,
          isLive: true,
          rePlay: true,
          showBarTime: '3000',
          // cover: data.thumb,
          videoHeight: "100%",
          keyShortCuts: true,
          playsinline: true,
          "language": "en-us",
          preload: true,
          controlBarVisibility: "hover",
          videoWidth: "100%",
          useH5Prism: true,
          skinLayout: [
            // {
            //   name: "bigPlayButton",
            //   align: "blabs",
            //   x: 30,
            //   y: 80,
            // },
            {
              name: "H5Loading",
              align: "cc",
            },
            {
              name: "errorDisplay",
              align: "tlabs",
              x: 0,
              y: 0,
            },
            {
              name: "infoDisplay",
            },
            {
              name: "tooltip",
              align: "blabs",
              x: 0,
              y: 56,
            },
            {
              name: "thumbnail",
            },
          ],
        },
        function (player) {
          setTimeout(() => {
            $this.clickPlay()
          }, 1000)
        }
      );
      this.player.on('requestFullScreen', () => {
        this.isFullScreen = true
      })
      this.player.on('cancelFullScreen', () => {
        this.isFullScreen = false
      })
    },
    getLiveDetail1() {
      uni.$u.http.post("/api/Live_streaming/getRoomInfo", {
          id: this.id,
      }).then(res => {
        this.roomInfo = res.info || {};
        if (this.roomInfo.islive == 0) {
          this.getDown()
        }
        this.userInfo = res.userData;
      })
    },
    /* 获取详情 */
    cricket_match_detail() {
      let time = new Date();
      let timeZone = time.toLocaleTimeString('en-us',{timeZoneName:'short'});  //'1:12:38 PM GMT+8'
      let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
      uni.$u.http.post('/api/Cricket/cricket_match_detail',{
        match_id: this.roomInfo.match_id,
        // match_id: 39497509,
        timezone:timeZoneId
      }).then(res=>{
        this.matchDetail = res;
        this.competition_list = res.competition_list || []
      }).catch(res=>{})
    },
    /* 发布弹幕 */
    addMesg(e) {
      if (!this.$refs.lffBarrage) {
        return
      }
      this.$refs.lffBarrage.add({
        item: e,
      });
      this.$refs.lffBarrage2.add({
        item: e,
      });
    },
    /* 获取直播 */
    getList() {
      // 全部赛事
      // uni.$u.http.post('/api/hot_match/all_match', {}).then(res => {
      // 	this.bannerList = res.data
      // })

      // 正在直播
      uni.$u.http.get("/api/live_streaming/getLiveList", {}).then((res) => {
        this.liveList = res;
      });
    },
    getHistoryMsg(msg) {
      uni.$u.http.get("/api/LivePlayBack/getSimple", {
        params: {
          id: this.groupID
        }
      }).then((res) => {
        let RspMsgList = res.RspMsgList || [];
        let msgList = []
        RspMsgList.forEach(item => {
          let MsgBody = item.MsgBody || []
          if (Array.isArray(MsgBody)) {
            MsgBody.forEach(item1 => {
              msgList.unshift({
                conversationType: 'GROUP',
                conversationID: 'GROUP' + this.groupID,
                from: item.From_Account,
                nick: item.From_Account,
                payload: {
                  data: item1.MsgContent.Data
                }
              })
            })
          }
        })
        if (msg) {
          msgList.push(msg)
        }
        let arr = {
          data: msgList,
        };
        this.$refs.detail1.$onMessageReceived(arr);
      });
    },
    /* 设置 */
    setting(type, i) {
      if (type == 1) {
        this.player.replay()
      } else if (type == 2) {
        //关闭显示弹幕
        this.danmu = !this.danmu;
      } else if (type == 3) {
        //设置
      } else if (type == 4) {
        if (this.isFullScreen) {
          this.player.fullscreenService.cancelFullScreen()
        } else {
          this.player.fullscreenService.requestFullScreen()
        }
      } else if (type == 5) {
        //切换画质
        if (this.$store.state.isLogin != 1) {
          // this.$toUrl('/pages/login/login')
          return
        }
        this.isQuality = true;
        this.videoMask = false;
      } else if (type == 6) {
        this.isQuality = false;
        if (this.qualityIndex == i) return;
        this.player.dispose();
        this.qualityIndex = i;
        this.videoInit({pull: this.qualityArr[this.qualityIndex]})
      }
      if (type == 7) {


      }
    },

    // 显示隐藏
    play(type) {
      //视频进度
      if (type == 1) {
        this.videoMask = !this.videoMask;
        // if (this.videoMask) {
        //   this.setInter();
        // } else {
        //   clearTimeout(this.timer);
        // }
      } else if (type == 2) {
        //解除声音（100%
				if (this.isVolume) {
					this.player.setVolume(0);
				} else {
					this.player.setVolume(1);
				}
        this.isVolume = !this.isVolume;
      } else if (type == 3) {
        //播放/暂停
        if (this.isPlay) {
          this.userClick = true;
          this.player.pause();
        } else {
          this.player.play();
        }
      } else if (type == 4) {
        //刷新重置
        this.player.pause();
        this.player.loadByUrl(this.qualityArr[this.qualityIndex]);
        this.player.play();
      }
    },
    setInter() {
      //s后自动关闭 自定义进度条
      this.timer = setTimeout((res) => {
        this.videoMask = false
      }, 5000);
    },
    timerStart() {
      if (!this.downTimer) {
        this.downTimer = setInterval(() => {
          this.$set(this.roomInfo, 'down', this.roomInfo.down - 1000)
          if (this.roomInfo.down < 0) {
            clearInterval(this.downTimer)
            this.downTimer = null
          }
        }, 1000);
      }
    },
    // 获取直播详情
    getLiveDetail(id) {
      let _this = this;
      uni.showLoading({
        title: this.$t('common.lab'),
      });
      uni.$u.http
        .post("/api/Live_streaming/getRoomInfo", {
          id: this.id,
        })
        .then((res) => {
          this.userInfo = res.userData || {};
          // 编辑主播公告
          // res.userData.announcement1 = []
          // res.userData.announcement1.push(res.userData.announcement)
          this.roomInfo = res.info || {};
          if (this.roomInfo.islive == 0) {
            this.getDown()
            this.timerStart()
          }
          this.groupID = this.roomInfo.id + '';
          // this.$store.dispatch('joinGroup',{id:id})
          if (this.roomInfo.match_id && this.roomInfo.islive == 1) {
            if (this.liveType != 'game') {
              this.cricket_match_detail()
            }
          } else {
            this.tabList = [
            {
              name: this.$t("live.detailTab1"),
            },
            {
              name: this.$t("live.detailTab2"),
            }
            ]
          }
		  localStorage.liveId =this.id;
          if (JSON.stringify(res.info.clarity) == "{}") {
            this.quality = ["原画"];
          } else {
            this.quality = ["流畅", "标清", "高清"];
            // 重组清晰画质连接
            let qualityArr = [];
            for (let var1 in res.info.clarity) {
              let name = var1;
              // if(var1 == 'smooth') {
              // 	name = '540'
              // }else if(var1 == 'sd') {
              // 	name = '720'
              // }else if(var1 == 'hd') {
              // 	name = '1080'
              // }
              qualityArr.push({
                name,
                src: res.info.clarity[var1],
              });
            }
            qualityArr.unshift({
              src: res.info.pull,
              name: this.$t("live.standard"),
            });
            this.qualityArr = qualityArr;
          }
          this.loginTim()
          if (this.roomInfo.islive == 1) {
            this.liveSign = true
            this.$nextTick(() => {
              this.videoInit(res.info)
            })
          } else {
            this.liveSign = false
          }
        }).finally(() => {
          uni.hideLoading();
        });
    },
    getDown() {
      let starttime = new Date(this.$common.parseTime(this.roomInfo.starttime * 1000, '{y}/{m}/{d} {h}:{i}:{s}') + ' UTC+5:30')
      let nowTime = new Date().getTime()
      if (starttime.getTime() - nowTime < 0) {
        starttime.setDate(new Date().getDate())
        starttime.setMonth(new Date().getMonth())
      }
      var down = starttime.getTime() - nowTime;
      this.$set(this.roomInfo, 'down', down)
    },
    loginTim() {
      if (this.isLogin == 1) {
          this.$store.dispatch('loginTim', this.infos).then(() => {
            this.joinGroup(this.infos)
          })
        } else {
          bus.$on('chatLogin', this.joinGroup)
          let youkeInfo = JSON.parse(sessionStorage.getItem('youkeInfo'))
          if (youkeInfo) {
            this.$store.dispatch('loginTim', {
              ...youkeInfo,
              types: 'youke'
            }).then(() => {
            this.joinGroup(youkeInfo)
            })
          } else {
            uni.$u.http.post("/api/Universal/imTouristAccount").then(res => {
              sessionStorage.setItem('youkeInfo', JSON.stringify(res))
              this.$store.dispatch('loginTim', {
                ...res,
                types: 'youke'
              }).then(() => {
                this.joinGroup(res)
              })
            })
          }
        }
    },
    joinGroup(info, sign) {
      this.$refs.detail1.messageList = [];
      uni.$TUIKit.joinGroup({
        groupID: this.groupID,
        type: "TIM.TYPES.GRP_AVCHATROOM",
      }).then((imResponse) => {
        switch (imResponse.data.status) {
          case uni.$TUIKitTIM.TYPES.JOIN_STATUS_WAIT_APPROVAL:
            // 等待管理员同意
            break;

          case uni.$TUIKitTIM.TYPES.JOIN_STATUS_SUCCESS:
            // 加群成功
            this.$nextTick(() => {
              this.login(info)
            });
            break;
          case "AlreadyInGroup":
            // 加群成功
            this.$nextTick(() => {
              if (sign) {
                this.login(info)
              } else {
                this.getHistoryMsg()
              }
            });
          break;
          case uni.$TUIKitTIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP:
            // 已经在群中
            break;
          default:
            break;
        }
      });
    },
    login(infos) {
      let data = {
        type: 102,
        nobel: {
          level: 1,
          // 贵族图标guard_icon || 等级图标exp_icon || 房主图标
          exp_icon: infos.exp_icon,
          is_guard: infos.is_guard,
          guard_swf: infos.is_guard == 1 ? infos.guard.swf : "",
          guard_name: infos.is_guard == 1 ? infos.guard.swf_name : "",
          is_room: infos.id == this.groupID ? 1 : 0,
          guard_icon: infos.is_guard == 1 ? infos.guard.icon : "",
        },
      };
      let to = this.groupID;
      const message = uni.$TUIKit.createCustomMessage({
        to,
        conversationType: "GROUP",
        payload: {
          data: JSON.stringify(data),
        },
      });
      uni.$TUIKit
        .sendMessage(message)
        .then((res) => {
          this.getHistoryMsg()
        })
        .catch((error) => {});
    },
		back() {
			uni.switchTab({
				url: '/pages/Live/Live'
			})
		},
     /* 判断是否登录 未登录情况下只能停留3分钟 180秒 */
     getIsLogin() {
      let that = this;
      if (this.isLogin == 1) return;
      uni.$u.http.get('/api/universal/getHot', {}).then(res => {
        this.$store.state.system = res;
        if (!this.system.login_remind || Number(this.system.login_remind) > 5000) return;
        this.time1 = setTimeout((res) => {
          if (this.isLogin == 1) {
            return
          }
          localStorage.setItem('watchingOutSign', true)
          this.$toast("Please log in to continue watching the live broadcast");
          setTimeout((res1) => {
            // this.$toUrl('/pages/login/login')
          }, 1500);
        }, this.system.login_remind * 60000);
      })
    },
    change(e) {
      this.current = e.index;
      if (e == 2) {
        setTimeout((res) => {
          this.$refs.detail3.getList({
            uid: this.userInfo.uid,
            type: 0,
          });
        }, 100);
      }
    },
    clickPlay() {
      try {
        var evt = document.createEvent('HTMLEvents')
        evt.initEvent('click', true, true)
        document.getElementById('palyevent').dispatchEvent(evt)
      } catch (error) {
      }
    },
    owerPlay() {
      this.isPlay = true
      this.player && this.player.play();
    },
    owerPlay1() {
      if (this.userClick) {
        return
      }
      this.owerPlay()
    },
    uodateMsg(list) {
      this.messageList = list
    },
    countdownFun(value) {
      if (!value) {
        return "";
      }
      var h = parseInt(value / 3600);
      var m = parseInt((value % 3600) / 60);
      var str = "";
      if (h > 0) {
        str += h + "hrs";
        if (m < 10) {
          m = "0" + m;
        }
        str += " " + m + "min";
        return str;
      } else {
        if (m > 0) {
          if (m < 10) {
            m = "0" + m;
          }
          str += m + "min";
        }
      }

      var s = parseInt((value % 3600) % 60);
      if (s < 10) {
        s = "0" + s;
      }
      str += " " + s + "s";
      return str;
    },
    downloadTimerFun() {
      this.downloadShow = false
      this.downloadTimer = setTimeout(() => {
        this.downloadShow = true
      }, 60000 * 2)
    },
    adClick(info) {
      if (info.adver_url_one) {
        uni.$u.http
        .post("/api/live_streaming/click_adv", {
          type: this.liveType == 'game' ? 6 : 3,
          id: info.id,
          url: info.adver_url_one
        })
        .then((res) => {
        }).finally(() => {
        });
        window.open(info.adver_url_one)
      }
    },
    adClick1(info) {
      if (info.qr_url) {
        window.open(info.qr_url)
      }
    }
  },
};
</script>

<style lang="scss">
page {
  background-color: #f3f3f7;
}
.body {
  position: sticky;
	top: 0;
  z-index: 20;
  background-color: #f3f3f7;
}
@media screen and (orientation: landscape) {
  .body {
    position: relative;
  }
}
.quality-mask {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9997;
  background-color: rgba(0, 0, 0, 0.4);

  .quality-nav {
    padding: 40rpx;
  }

  .quality-title {
    padding: 0 98rpx;
    margin-top: 50rpx;
  }

  image {
    width: 24rpx;
    height: 24rpx;
  }

  .quality-list {
    padding: 0 98rpx;
    flex-wrap: wrap;

    view {
      font-size: 24rpx;
      margin-top: 28rpx;
      border-radius: 6rpx;
      padding: 8rpx 20rpx;
      border: 2rpx solid #fff;
    }

    .active {
      color: $color2;
      border: 2rpx solid $color2;
    }
  }
}

.video-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9997;
  box-shadow: 0px 12px 20px -12px #000 inset, 0px -12px 20px -12px #000 inset;

  .top {
    color: #fff;
    position: absolute;
    top: 24rpx;
    right: 24rpx;
    padding: 4rpx 20rpx;
    border-radius: 40rpx;
    border: 2rpx solid #fff;
  }

  .foot {
    position: absolute;
    bottom: 24rpx;
    right: 0;
    left: 0;
    padding-right: 24rpx;
    &.full {
      position: fixed;
      bottom: 0;
    }
    .u-icon {
      margin-left: 26rpx;
    }
    image {
      width: 32rpx;
      height: 32rpx;
      margin-left: 26rpx;
    }
  }
}
.ranking-box {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  .ranking {
    width: 45px;
  }
}
.volume-box {
  position: absolute;
  right: 20rpx;
  bottom: 16rpx;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #000;
}
.detail {
  position: relative;
  background: #f3f3f7;
}
#palyevent {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.no-live {
  position: relative;
  background: rgba(0, 0, 0, 1);
  .down-box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    background-color: rgba(27, 24, 67, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    font-weight: 400;
    color: #d5d4e4;
    line-height: 1;
    text-align: center;
    .down {
      margin-top: 24rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }
  .time {
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20rpx;
    z-index: 10;
  }
  .home_logo, .away_logo {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}
	.home_logo {
		left: 100rpx;
	}
	.away_logo {
		right: 100rpx;
	}
}
.video {
  height: 420rpx;
  position: relative;

  .thumb {
    width: 100%;
    height: 100%;
    z-index: 100;
    position: relative;
    background-color: #000;
  }

  .video-bar {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9997;
    color: #fff;
    height: 60rpx;
    background: rgba(0, 0, 0, 0.4);

    image {
      width: 30rpx;
      height: 30rpx;
      margin-left: 20rpx;
    }

    text {
      margin-right: 60rpx;
    }
  }

  .video-bar-right {
    position: relative;

    .quality {
      width: 80rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      position: absolute;
      left: -40rpx;
      color: #fff;
      bottom: 50rpx;
      padding: 20rpx 22rpx;
      border-radius: 20rpx;
      background-color: rgba(0, 0, 0, 0.7);

      text {
        display: block;
        width: 100%;
        margin-right: 0;
        text-align: center;
        padding-bottom: 20rpx;
      }
    }
  }

  .voice {
    position: absolute;
    bottom: 50px;
    left: 50%;
    z-index: 4;
    margin: -33rpx 0 0 -134rpx;
    width: 268rpx;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 8rpx;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #ff5d23;
    font-size: 30rpx;
    text-align: center;
    color: #fff;
    background-size: 100% 100%;
  }

  .play {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50rpx;
    width: 100rpx;
    height: 100rpx;
    z-index: 9;
  }

  .myVideo {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50rpx;
    width: 100rpx;
    height: 100rpx;
    z-index: 9;
  }
}
.row {
  display: flex;
  align-items: center;
  text-align: center;
  background-color: rgb(18, 20, 21);
  color: #fff;
  font-size: 14px;
  .col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
  }
  .u-icon {
    margin: 0 5px;
  }
}

.tabs {
  position: relative;
}
.u-tabs {
  background-color: #fff;
}
.active {
  background: #ccc;
}
.adver-box {
  position: relative;
  .qr_img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
  }
}
.ad {
  display: block;
  width: 100%;
}
</style>