sport_pc/.svn/pristine/4e/4ee70af74b72af9375f9bc1e1b02c3bab9eef14f.svn-base

<template>
  <div :class="getBettingIsShow?'noscoll':''">
    <div class="lod">
      <Loading></Loading>
    </div>
    <div>
      <SportsHead></SportsHead>
      <div class="Serch">
        <div class="Soccer-game row center">
          <div class="Soccer-game-title row center" @click="isreturn()">
            <img class="returnimg" :src="searchreturn">
            {{name}}
          </div>
        </div>
      </div>
      <!-- 足球头部 -->
      <div class="bqHead zqHead" v-if="headStatus == 1">
        <div class="pd-10">
          <div class="match">
            <div class="tit">
              <span>非洲国家杯2019(在埃及)</span>
              <div>
                <span class="scene">2019-06-22 </span>
                &nbsp;
                <span class="time">04:00:00</span>
              </div>
            </div>
            <div class="info">
              <span>埃及</span>
              <span class="live-score">0 - 0</span>
              <span>辛巴威</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 篮球头部 -->
            <!-- 篮球头部 -->
        <div class="header" v-if="headStatus == 2">
          <div class=" match">
            <div class="live">
              <!-- <div class="tit">{{data.leagueName}}</div> -->
                <div class="info">
                <div class="infoBody flex">
                  <div class="matchTime" style="width:20%;">
                    <span class="scene">第四节</span>
                    <span class="time">00:00</span>
                  </div> 
                  <div class="flex" style="width:80%;">
                    <div class="right_info_row_qt">第一节</div>
                    <div class="right_info_row_qt">第二节</div>
                    <div class="right_info_row_qt">第三节</div>
                    <div class="right_info_row_qt">第四节</div>
                    <div class="right_info_row_qt">加时赛</div>
                    <div class="right_info_row_qt scence">上半场</div>
                    <div class="right_info_row_qt scence">下半场</div>
                    <div class="right_info_row_qt scence">总计</div>
                  </div>
                </div>
                <div class="infoRow">
                  <div class="infoItem flex">
                    <div style="width:20%;">
                      <span class="team">埃及</span>
                    </div>
                    <div class="infoBox" style="width:80%">
                      <div class="infoNum">22</div>
                      <div class="infoNum">8</div>
                      <div class="infoNum">13</div>
                      <div class="infoNum col">13</div>
                      <div class="infoNum"></div>
                      <div class="infoNum scenceNum">30</div>
                      <div class="infoNum col scenceNum">26</div>
                      <div class="infoNum ycol scenceNum">54</div>
                    </div>
                  </div>
                  <div class="infoItem flex">
                    <div style="width:20%;">
                      <span class="team">辛巴威</span>
                    </div>
                    <div class="infoBox" style="width:80%">
                      <div class="infoNum">22</div>
                      <div class="infoNum">8</div>
                      <div class="infoNum">13</div>
                      <div class="infoNum col">13</div>
                      <div class="infoNum"></div>
                      <div class="infoNum scenceNum">30</div>
                      <div class="infoNum col scenceNum">26</div>
                      <div class="infoNum ycol scenceNum">54</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      <!-- 棒球头部 -->
      <div class="tennisHead" v-if="headStatus == 3">
        <div style="padding:0.1rem;">
          <div class="match">
            <!-- <div class="tit">
              <span>ATP意大利电信杯</span>
            </div> -->
            <div class="ballTable">
              <div class="listHead row allAlignment">
                <div class="txt-c-0">
                  <div class="section">1
                    <!-- <span v-if="scoreDetails.triangle == 'sh'">▼</span> -->
                    <!-- <span v-else>▲</span></div> -->
                    <span>▲</span></div>
                </div>
                <div class="row ">
                  <span class="session row center" v-for="(tiem,i) in 9" :key="tiem.id">
                    {{i+1}}
                  </span>
                  <!-- <span class="mg-5">盘</span> -->
                  <span class="mg-session row center">加时</span>
                  <span class="mg-session row center">当前</span>
                  <span class="mg-session row center" style="width:0.8rem;">总局数</span>
                </div>
              </div>

              <div class="row allAlignment scoreInfo">
                <div class="row">
                  <div class="ballhold attack">•</div>
                  <div class="team" style="text-align:left;">NC恐龙</div>
                </div>
                <div class="row">
                 <span class="session row center">2</span>
                 <span class="session row center">2</span>
                 <span class="session row center current">2</span>
                 <span class="session row center">0</span>
                 <span class="session row center">0</span>
                 <span class="session row center">0</span>
                 <span class="session row center">0</span>
                 <span class="session row center">0</span>
                 <span class="session row center">0</span>
                  <span class=" mg-session row center " style="background: rgba(255, 165, 0, 0.49);">0</span>
                  <span class=" mg-session row center mark">2</span>
                  <span class="mg-session row center mark " style="width:0.8rem">6</span>
                </div>
              </div>
              
              <div class="row allAlignment scoreInfo">
                <div class="row">
                  <div class="ballhold">•</div>
                  <div class="team" style="text-align:left;">Kiwoom英雄</div>
                </div>
                <div class="row">
                  <span class="session row center">0</span>
                  <span class="session row center">2</span>
                  <span class="session row center current">0</span>
                  <span class="session row center">0</span>
                  <span class="session row center">0</span>
                  <span class="session row center">0</span>
                  <span class="session row center">0</span>
                  <span class="session row center">0</span>
                  <span class="session row center">0</span>
                  <span class="mg-session row center " style="  background:rgba(255, 165, 0, 0.49);">0</span>
                  <span class="mg-session row center mark">0</span>
                  <span class="mg-session row center mark" style="width:0.8rem">2</span>
                </div>
              </div>
               <div class="listHead row allAlignment"> 
                  <div class="row center">
                    <div  class="eliminate ">
                      <span class="" style="margin-left:.11rem;"></span>
                      <div style="width:.31rem;" class="row allAlignment">
                        <span class="spanBox"></span>
                        <span class="spanBox"></span>
                      </div>
                    </div>
                  </div>
                 <div>
                   <span>出局:</span>
                   <span>2</span>
                 </div>
               </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 网球头部 -->
      <div class="tennisHead" style="padding:0.1rem;" v-if="headStatus == 4">
        <div class="ballTable">
          <div class="listHead row allAlignment">
            <div class="txt">
              <!-- <div class="spanCol">第{{scoreDetails.cp == 1?'一' : scoreDetails.cp ==2 ? "二": scoreDetails.cp ==3 ? "三":scoreDetails.cp== 4 ? "四":"五" }}节</div> -->
              <div class="spanCol">第一节</div>
              <!-- <div class="delay">天气原因延期</div> -->
            </div>
            <div class="headerTop row rightAlignment">
              <span  v-for="(item,i) in 5" :key="item.id">{{i+1}}</span>
              <span class="mg-5">分数</span>
              <span class="mg-5">盘</span>
              <span class="mg-5" style="width:0.8rem;">总局数</span>
            </div>
          </div>
          <div class="row allAlignment list">
            <div class="row">
              <!-- <div class="ballhold" style="color: rgb(197, 210, 60);">•</div> -->
              <div class="team" style="text-align:left;">马顿.富斯索维奇(匈牙利)</div>
            </div>
            <div class="score row rightAlignment">
              <span class="spanCol">6</span>
              <span class="spanCol">3</span>
              <span class="spanCol">0</span>
              <span class="spanCol">0</span>
              <span class="spanCol">0</span>
              <span class="mg-5 mark cl" style="background: rgba(255, 165, 0, 0.49);">40</span>
              <span class="mg-5 mark">0</span>
              <span class="mg-5 mark sumCl" style="width:0.8rem">4</span>
            </div>
          </div>
          <div class="row allAlignment list">
            <div class="row">
              <!-- <span class="ballhold" style="color:#fff;">•</span> -->
              <span class="team" style="text-align:left;">佐米.穆纳尔(西班牙)</span>
            </div>
            <div class="score row rightAlignment">
              <span class="spanCol">2</span>
              <span class="spanCol">2</span>
              <span class="spanCol">0</span>
              <span class="spanCol">0</span>
              <span class="spanCol">0</span>
              <span class="mg-5 mark cl" style="background: rgba(255, 165, 0, 0.49);">40</span>
              <span class="mg-5 mark">0</span>
              <span class="mg-5 mark sumCl" style="width:0.8rem;">2</span>
            </div>
          </div>
          <div></div>
        </div>
        <!-- </div>
        </div>-->
      </div>
      <!-- 普通头部 -->
      <!-- <div class="ordinaryHead" v-if="headStatus == 0">
        <div class="match">
          <div class="info">
            <div>
              <span>克洛伊.帕凯特(法国)</span>
              <span class="pk">v</span>
              <span>叶芙戈尼亚.罗迪娜(俄罗斯)</span>
            </div>
            <div class="timer">
              <div>
                <span>2019-06-29 20:00:00</span>
              </div>
            </div>
          </div>
        </div>
      </div> -->
    <!-- 原始头部 -->
      <div class="gambling" v-show="this.list" v-if="headStatus == 0">
        <div class="leagueMatch row average">
          <yd-button size="large" @click.native="show = true"></yd-button>
          <div class="leagueName">
            <span>{{list.leagueName}}</span>
          </div>
          <div class="teamName">
            <span>{{list.home_team}}</span>
            <div class="vs">vs</div>
            <span>{{list.guest_team}}</span>
          </div>
          <div class="time" :style="status == true?'':'width:2rem;'">
            <span>{{list.match_ptime? list.match_ptime :list.match_time }}</span>
          </div>
          <div v-if="satatus" class="icon" :class="status == true ? 'rotate':'backRotate'">
            <i></i>
          </div>
        </div>
       <div class="box">
          <div id="NavSlide">
            <nav>
              <p v-for="(item,$index) in key" @click="toggleNav($index)" :key="$index">
                <span :class="{active:$index==active}">{{item}}</span>
              </p>
            </nav>
          </div>
        </div>
        <!-- 模态框 -->
        <yd-popup v-if="satatus" v-model="show" position="center" width="90%">
          <div class="modality">
            <div
              class="list"
              v-for="(item,index) in list.league"
              :key="index"
              @click="check(index,item.match_id)"
            >
              <span :class="match_id == item.match_id?'col':''">{{item.home_team}}</span>
              <span :class="match_id == item.match_id?'col':''">v</span>
              <span :class="match_id == item.match_id?'col':''">{{item.guest_team}}</span>
            </div>
          </div>
        </yd-popup>
      </div>
      <div v-show="isShow">
        <!--让球大小-->
        <div v-show="Single =='进球:大/小' || isAll  ">
          <goal></goal>
        </div>
        <!--让球-->
        <div v-show="Single =='让球' || isAll  ">
          <LetBall></LetBall>
        </div>
        <!--最先/最后进球-->
        <div v-show="Single =='首粒入球/最后一粒入球' || isAll  ">
          <StartEnd></StartEnd>
        </div>
        <!-- 总进球数 -->
        <div v-show="Single =='总进球数' || isAll  ">
          <GoalSize></GoalSize>
        </div>
        <!--独赢-->
        <div v-show="Single =='独赢'|| Single =='独赢盘'|| isAll  ">
          <OnlyWin></OnlyWin>
        </div>
        <!-- 波胆 -->
        <div v-show="Single =='波胆' || isAll  ">
          <div v-if="name == '网球'">
            <TennisWaveBravery/>
          </div>
          <div v-else>
             <WaveBladder></WaveBladder>
          </div>
        </div>
        <!--入球数单双-->
        <div v-show="Single =='进球:单/双'||  Single =='总分:单/双' || isAll  ">
          <div v-if="name =='篮球' || name =='棒球'">
           <TotalScoreSingleDouble/>
          </div>
          <div v-else>
            <GoalSingleAndDouble></GoalSingleAndDouble>
          </div>
        </div>
        <!--半场/全场-->
        <div v-show="Single =='半场/全场'|| isAll  ">
          <FullHalf></FullHalf>
        </div>
        <!-- 角球 -->
        <div v-show="Single =='角球' || isAll ">
          <Corner></Corner>
        </div>
        <!-- 球队进球大小 -->
        <div v-show="Single =='球队进球数:大/小' || isAll ">
          <TeamGoalSize></TeamGoalSize>
        </div>
        <!-- 总得分:大/小 -->
        <div v-show="Single =='总得分:大/小' || isAll ">
          <TotalScoreSize></TotalScoreSize>
        </div>
        <!-- 总得分:大/小 -->
        <div v-show="Single =='总得分:大/小' || isAll ">
          <TotalScoreSizeFive></TotalScoreSizeFive>
        </div>
        <!-- 总得分:大/小 上半场 -->
        <div v-show="Single =='总得分:大/小' || isAll ">
          <TotalScoreHalfSize></TotalScoreHalfSize>
        </div>
        <!-- 总得分:大/小  节数-->
        <div v-show="Single =='总得分:大/小' || isAll ">
          <TotalScoreSectionSize></TotalScoreSectionSize>
        </div>
        <!-- 球队得分最后一位数 -->
        <div v-show="Single =='球队得分最后一位数' || isAll ">
          <TeamScoreLast></TeamScoreLast>
        </div>
        <!-- 总局数:大/小 -->
        <div v-show="Single =='总局数:大/小' || isAll ">
             
          <InningsSize></InningsSize>
        </div>
        <!-- 总局数:单/双 -->
        <div v-show="Single =='总局数单双' || isAll ">
              
          <InningsSingleDouble></InningsSingleDouble>
        </div>
        <!-- 冠军 -->
        <div v-show="Single =='冠军' || isAll ">
          <MatchChampion></MatchChampion>
        </div>
         <!-- 让盘 -->
        <div v-show="Single =='让盘' || isAll ">
          <LetPlate></LetPlate>
        </div>

        <!-- 让局 -->
        <div v-show="Single =='让局' || isAll ">
          <LetBureau></LetBureau>
        </div>
       
      </div>
      <div v-if="!isShow">
        <NotOpend :title="tipsTitle"></NotOpend>
      </div>
      <StLinkFooter></StLinkFooter>
      <BettingWindow v-if="isBettingWindow== '100'"/>
    </div>
  </div>
</template>

<script>
import Goal from "@/components/StGoal";
import LetBall from "@/components/StLetBall";
import NotOpend from "@/components/StNotOpend";
import Loading from "@/components/StLoading";
import WaveBladder from "@/components/StWaveBladder";
import StLinkFooter from "@/components/StLinkFooter";
import SportsHead from "@/components/StSportsHead";
import OnlyWin from "@/components/StOnlyWin";
import GoalSize from "@/components/StGoalSize";
import StartEnd from "@/components/StStartEnd";
import FullHalf from "@/components/StFullHalf";
import TeamGoalSize from "@/components/StTeamGoalSize";
import TotalScoreSize from "@/components/StTotalScoreSize";
import TotalScoreSizeFive from "@/components/StTotalScoreSizeFive";
import TotalScoreHalfSize from "@/components/StTotalScoreHalfSize";
import TotalScoreSectionSize from "@/components/StTotalScoreSectionSize";
import TeamScoreLast from "@/components/StTeamScoreLast";
import GoalSingleAndDouble from "@/components/StGoalSingleAndDouble";
import Corner from "@/components/StCorner";
import TotalScoreSingleDouble from "@/components/StTotalScoreSingleDouble";
import BettingWindow from "@/components/StBettingWindow";
import MatchChampion from "@/components/StMatchChampion";
import InningsSingleDouble from "@/components/StInningsSingleDouble";
import InningsSize from "@/components/StInningsSize";
import LetPlate from "@/components/StLetPlate";
import LetBureau from "@/components/StLetBureau";
import TennisWaveBravery from "@/components/StTennisWaveBravery";
export default {
  data() {
    return {
      name:this.$route.query.name, // 球名
      searchreturn: require("@/assets/st-imges/returnbox.png"),
      gameCode: this.$route.query.gameCode, //别名
      match_id: "",
      list:'', //数据
      previousStorage:'',//前一次list储存数据
      key: [], //存储key值进行判定
      isShow: "", //更具数据是否显示
      getBettingIsShow:false,// 判断投注框背景可否滚动
      status: false,
      tipsTitle: "暂无相关数据信息",
      active: 0,// 投注页是否打开
      isBettingWindow: '-1',
      // isIphone: false,//是否ios
      // isAndroid: false,//是否Android
      show: false, //是否显示模态框
      satatus: true,
      isAll: true,
      Single: "",
      timers : true,//是否开启轮询
      headStatus : 0 // 头部显示滚球（1为足球，2为篮球，3为棒球，4为网球），0为普通
    };
  },
  methods: {
    // 返回上一页
    isreturn() {
      history.go(-1);
    },

    //页面初始化接口请求
    getAjax: function(game_code, matchID,oddsType) {
      this.$http.get(this.$ports.gambling.matchOdds, {
          oddsType,
          game_code,
          matchID
        }).then(res => {
          if (res.data.status == 1 && res.data.data) {
            this.key = [];
            if ( res.data.data.oddsData == [] ||res.data.data.oddsData.length == 0 ||res.data.data.oddsData == null) {
              this.$store.dispatch("GETSHOW", false);
              this.isShow = false;
              return false;
            }
            this.list = res.data.data;
            this.satatus  = this.list.league.length >1 ? true :false;
            let arrayData = [];
            let key =res.data.data.p_code_array ;//Object.keys(res.data.data.p_code_array);
            let values = this.$store.getters.getPlayAlias;
            //this.$store.getters.getPlayAlias;

            this.isShow = true;
            this.key = ["所有盘口"];
            key.forEach((e, index) => {
              //console.log('e',e);
              values.forEach(val=>{
                if(e == val.odds_code && this.$store.getters.getBallId == val.game_code){
                  if((this.name == '篮球' && val.odds_name =='入球数单双') || (this.name == '棒球' && val.odds_name =='入球数单双')){
                    val.odds_name ='总分:单双'
                  }
                  this.key.push(val.odds_name);
                }
              })
              let stripData = [];
              this.list.oddsData.forEach(data => {
                if (data.p_code == e) {
                  stripData.push(data);
                }
                arrayData[index] = stripData;
              });
            });
            //更新数据和上一次的数据匹配
            let storage =this.previousStorage;
            console.log('storage',arrayData)
            if(storage && storage.match_id == this.list.match_id  && storage.oddsData.length > 0){
              arrayData.forEach(e=>{
                storage.oddsData.forEach((res,index)=>{
                  if(e[0].p_code == res[0].p_code){
                    e.forEach(dat=>{
                      res.forEach((val,i)=>{
                        if(dat.id == val.id){
                          if(dat.odds > val.odds){
                            dat.change ='add';
                          }else if(dat.odds  < val.odds){
                            dat.change = 'red';
                          }else{
                            dat.change ='';
                          }
                          res.splice(i,1)
                        }
                      })
                    })
                    storage.oddsData.splice(index,1)
                  }
                })
              })
            }
            // console.log(this.previousStorage);
            this.list.oddsData = arrayData;
            this.previousStorage =this.list;
            this.$store.dispatch("GETGAMERATIO", this.list);
            //console.log("数据源", arrayData);
          }
          let _this=this;
          setTimeout(()=>{
            this.$store.dispatch("GETSHOW", false);
          },1000)
        });
      },

    /**
     * 切换赛事
     */
    check(index, match_id) {
      let oddsType = localStorage.getItem('activity');
      this.show = false;
      if (this.list.match_id == match_id) return false;
      this.match_id = match_id;
      this.$store.dispatch("MACTH_ID", match_id);
      this.$store.dispatch("GETSHOW", true);
      this.getAjax(this.gameCode, match_id,oddsType);
    },

    /**
     * 切换玩法类型
     */
    toggleNav: function(index) {
      this.active = index;
      if (this.key[index] == "所有盘口") {
        this.isAll = true;
      } else {
        this.isAll = false;
        this.Single = this.key[index];
      }
    }
  },

  /**
   * 计算属性
   */
  computed: {
    getIsBettingType() {
      return this.$store.getters.getIsBetting;
    },
    // 获取投注框展示状态
    getBettingCase(){
        //console.log(this.$store.getters.getNoRoll,'aaaaa')
        return this.$store.getters.getNoRoll
    },
  },

  /**
   * 监听器
   */
  watch: {
    // 监听投注框开关
    getIsBettingType(val) {
      if(val=='-1'){
        this.$store.dispatch('SET_NOROLL',false)
      }
      this.isBettingWindow = val;
    },
    getBettingCase(val){
       this.getBettingIsShow=val
    },
  },

  /**
   * 
   */
  mounted() {
    let ballId = this.$store.getters.getBallId;
    let acty = this.$store.getters.getActivity;
    if(acty == 'StRollBall'){
      if(ballId == 'zq'){
        this.headStatus = 1;
      }else if(ballId == 'lq'){
        this.headStatus = 2;
      }else if(ballId == 'bq'){
        this.headStatus = 3;
      }else if(ballId == 'wq'){
        this.headStatus = 4
      }
    }else{
      this.headStatus = 0;
    }
    let _this = this;
    this.match_id = this.$store.getters.getMatchId;
    let oddsType = localStorage.getItem('activity');
    this.$store.dispatch("GETSHOW", true);
    this.getAjax(this.gameCode, this.match_id,oddsType);
    //this.timers  =true;
    this.$public.ajaxTimerFun(function(timing) {
      if (_this.timers) {
        _this.getAjax(_this.gameCode, _this.match_id,oddsType);
       // _this.updateAjax(_this.gameCode, _this.match_id);
      }else{
        clearInterval(timing);
      }
    },(1000*15));
    if (this.$store.getters.getIsBetting == '100') {
      this.isBettingWindow = 100;
    }
  },

  /**
   * 关闭当前页面钩子函数
   */
  beforeDestroy() {
    this.timers = false;
  },
  components: {
    Corner,
    LetBall,
    Goal,
    WaveBladder,
    StLinkFooter,
    SportsHead,
    OnlyWin,
    StartEnd,
    GoalSize,
    FullHalf,
    GoalSingleAndDouble,
    TeamGoalSize,
    Loading,
    NotOpend,
    BettingWindow,
    TotalScoreSize,
    TotalScoreSizeFive,
    TotalScoreHalfSize,
    TotalScoreSectionSize,
    TeamScoreLast,
    TotalScoreSingleDouble,
    MatchChampion,
    InningsSingleDouble,
    InningsSize,
    LetPlate,
    LetBureau,
    TennisWaveBravery
  }
};
</script>

<style scoped>
/* 禁止滚动 */
.noscoll{
  position: fixed;
   width: 100%;
  top: 0;
  left: 0;
}
/* 头部 */
.Serch {
  height: 0.88rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, #6a6a6a, #565656);
  color: #f76649;
  font-family: "PingFang-SC-Regular";
  padding: 0 0.33rem;
}
.returnimg {
  width: 0.37rem;
  height: 0.3rem;
  margin-right: 0.1rem;
}
.Soccer-game-title {
  height: 0.88rem;
  font-size: 0.3rem;
}
.Soccer-game-box {
  height: 0.88rem;
  /* padding: 0 0.32rem; */
  background-color: #626262;
}
.gambling {
  background: #f8f8f8;
}
.leagueMatch {
  position: relative;
  padding: 0.3rem 0.32rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  border-bottom: 1px solid #e4e4e4;
  background: linear-gradient(to top, #ffe9c9, #fff3e2);
}
.leagueMatch div {
  font-size: 0.28rem;
  text-align: left;
  color: #333333;
}
.leagueName {
  width: 2.26rem;
}
.leagueMatch .teamName {
  text-align: center;
}
.teamName .vs {
  text-align: center;
  font-size: 0.24rem;
  color: #fd8f26;
}
.leagueMatch .time {
  width: 1.3rem;
  color: #333333;
  font-size: 0.24rem;
  text-align: center;
}
.leagueMatch .icon i {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background: url("../../../assets/st-imges/xiangxia.png") no-repeat;
  background-size: 100% 100%;
  transform: rotate(180deg);
}
.leagueMatch .rotate {
  transform: rotate(180deg);
  transition: 0.2s;
}
.leagueMatch .backRotate {
  transform: rotate(0deg);
  transition: 0.2s;
}

.box {
  padding: 0 0.14rem;
  background: #f8f8f8;
}
#NavSlide {
  width: 100%;
  overflow: hidden;
  height: 0.88rem;
}
#NavSlide nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: middle;
  -ms-flex-align: middle;
  align-items: middle;
  overflow: auto;
}
#NavSlide p {
  text-align: center;
  font-size: 0.28rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0 0.2rem 0 0;
  margin: 0 0.1rem 0 0;
  color: #b8b8b8;
  height: 0.88rem;
  line-height: 0.88rem;
}
/* #NavSlide p a{
	color: #E5E5E5;
	text-decoration: none;
} */
#NavSlide p span.active {
  color: #363636;
}
#NavSlide .fixadd {
  position: absolute;
  right: -4px;
  background-color: #31c17b;
}
button.yd-btn-block {
  background: #f8f8f8;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* z-index: -1; */
  margin: 0;
  opacity: 0;
}
.modality {
  text-align: center;
  background: #fbfbfb;
  padding: 0.2rem 0;
  height: 5rem;
  /* overflow: hidden; */
}
.modality span {
  color: #000000;
  font-size: 0.28rem;
}
.modality div {
  /* margin: 0.06rem 0; */
  padding: 0.2rem 0;
  background: #fbfbfb;
  border-bottom: 1px solid #e4e4e4;
}
.modality div .col {
  color: #fd8f26;
}
.lod{
    z-index: 999;
    position: fixed;
    width: 100%;
}
/* 滚球足球头部 */
/* 棒球头部 */
.bqHead {
  background: url("../../../assets/st-imges/1baseball.png") no-repeat;
  background-size: 100% 100%;
  font-size: 0.18rem;
}
.zqHead {
  color: #fff;
  background: url("../../../assets/st-imges/1football.png") no-repeat;
  background-size: 100% 100%;
  font-size: 0.18rem;
}
.eliminate span {
  display: block;
  width: 0.1rem;
  height: 0.1rem;
  background: #ccc;
  transform: rotate(45deg);
}
.spanBox {
  background: orange !important;
}
.ballhold{
  /* color:#fff; */
  font-size: 0.2rem;
}
.current{
  color: orange;
}
.session{
  width:0.3rem;
}
.mark{
  background: hsla(0, 0%, 100%, 0.25);
}
.scoreInfo{
  line-height: 0.5rem;
  padding: 0 0.1rem ;
}
.mg-session{
  width:0.7rem;
  
}
.bqHead .pd-10 {
  padding: 0.1rem;
}
.bqHead .tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.match .info {
  background: rgba(0, 0, 0, 0.5);
  height: 0.52rem;
  line-height: 0.52rem;
  font-size: 15px;
  text-align: center;
  font-size: 0.28rem;
}
.match .info .pk,
.match .tit .scene {
  font-weight: bold;
  color: rgb(254, 146, 0);
}
.tit .time {
  color: #bd4700;
}
.tit span{
  font-size: 0.26rem;
}
.welcome {
  height: 0.36rem;
  line-height: 0.36rem;
  font-size: 0.16rem;
  padding: 0 0.1rem;
  background: #4e4e4e;
  color: black;
}
/* 篮球头部 */
.header .match{
    background: #c28d47;
    background-image: url("../../../assets/st-imges/1basketball.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
}
.flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header .match .live{
    padding: 0.06rem;
}
/* .live .tit{
    height: 30px;
    line-height: 30px;
    font-size: 0.14rem;
} */
.match .info{
    margin-top: 0.1rem;
    position: relative;
    height: auto;
    background: rgba(0,0,0,.5);
    line-height: 52px;
    font-size: 15px;
    text-align: center;
}
.infoBody{
    background: #000;
    opacity: .85;
    height: 0.52rem;
    padding-left: 0.1rem;
    font-size: 0.14rem;
}
.matchTime span{
    display: inline-block;
}
.matchTime .scene{
    color: #ff9200;
    margin-right: 0.06rem;
}
.matchTime .time{
    color: #b4b4b4;

}
.right_info_row_qt{
    width: 0.75rem;
    font-size: 0.12rem;
    text-align: center;
    padding: 0.04rem;
    color: #787878;
    box-sizing: border-box;
    font-weight: 700;
    font-family: serif;
}
.infoRow{
    padding-left: 0.1rem;
}
.scence{
    width: 0.75rem;
    padding: 0;
    /* padding-top: 0.19rem; */
}
.infoItem{
    height: 0.5rem;
    line-height: 0.24rem;
    width: auto
}
.infoBox{
    width: 2.73rem;
    height:0.5rem;
        display: flex;
    align-items: center;
    justify-content: space-between;
    /* right: 0; */
    /* position: absolute; */
}
.infoBox > div{
    width: .75rem;
}
.infoNum{
    width: 0.25rem;
    font-size: 0.13rem;
    line-height: 0.28rem;
    padding: 0;
    height: 100%;
    line-height: 0.5rem;
    color: #fff;
    font-weight: 400;
    text-align: center;
    font-family: sans-serif;

}
.scenceNum{
    background: hsla(0,0%,100%,.16);
    width: 0.52rem;
    margin-left: 1px;
}
.infoItem .team{
    font-size: 0.16rem;
}
.col{
    color: #ff9200;
}
.ycol{
    color:#dcbc4c;
}
/* 网球头部 */
.tennisHead {
  background: url("../../../assets/st-imges/tennisball.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: auto;
}
.ordinaryHead .match .info{
  display: flex;
}
.match {
  color: #fff;
  height: auto;
}
.match .tit {
  height: 0.32rem;
  line-height: 0.32rem;
  /* margin-top: -4px; */
}
.ballTable{
   background: rgba(0, 0, 0, 0.2);
}
.listHead {
  padding: 0 0.1rem;
  line-height: 0.5rem;
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
}
.listHead .txt-c-0 {
  color: orange;
}
.listHead .spanCol{
  color: orange;
}
.headerTop {
  width: 50%;
}
.score {
  width: 50%;
}
.score span {
  display: inline-block;
  width: 0.3rem;
  text-align: center;
}
.score span.mg-5 {
  width: 0.7rem;
}
.headerTop span {
  display: inline-block;
  width: 0.3rem;
  text-align: center;
}
.headerTop span.mg-5 {
  width: 0.7rem;
}
.mark {
  background: hsla(0, 0%, 100%, 0.25);
}
.list {
  background: hsla(0, 0%, 100%, 0.2);
  line-height: 0.4rem;
  padding: 0 0.1rem;
  color: #fff;
}

.cl {
  color: orange;
}
.sumCl {
  color: #ff0;
}
.welcome{
  height: .5rem;
  line-height: 0.5rem;
  font-size: 0.16rem;
  padding: 0 0.1rem;
  background: #898989;
  color: #fff;
}
.ordinaryHead {
  background: url("../../../assets/st-imges/1football.png") no-repeat;
  background-size: 100% 100%;

  /* padding: 0.04rem; */
  /* height: 1.2rem; */
  /* line-height: 1.2rem; */
}
.ordinaryHead .match {
  color: #fff;
}
.ordinaryHead .match .info {
  padding: 0 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ordinaryHead .match .info div span{
  font-size: 0.22rem;
}
.match .time {
  font-weight: 400;
  color: #bd4700;
  margin-left: 0.05rem;
}
.live-score {
  padding: 0 8%;
}
.attack{
  color: rgb(197, 210, 60);
}
</style>