sport_mobile/.svn/pristine/cd/cd5dd7b2145391f2846f295e7dd89976109ec8d7.svn-base

<template>
  <div>
    <div class="serch row item-center allAlignment">
      <div class="row item-center">
        <div class="row item-center">
          <input
            class="fz14"
            type="text"
            placeholder="请输入球队名称"
            v-model="serchTxt"
            onkeyup="this.value=this.value.replace(/\s+/g,'')"
            color="#AAA"
          >
          <div class="row center serch-img pointer hover" @click="Serch()">
            <img src="@/assets/st-imges/serch.png" alt>
          </div>
        </div>
        <div class="row item-center"  v-if="noShow">
          <div class="row center clear pointer hover br05 fz14" @click="clearSerchTxt()">清除</div>

        </div>
      </div>
          <div class="row center redraw pointer hover br05" @click="red()">
            <img src="@/assets/st-imges/redraw.png" alt>
          </div>      
    </div>

    <div class="tennisRollBall" v-for="(item,index) in data" :key="item.id">
      <!-- 联赛名 -->
      <div class="tennisRollBall-title row item-center pdg20">{{item.leagueName}}</div>
      <div class="tennisRollBall-title-list" v-for="(items,i) in item.matchData" :key="items.id">
        <div class="tennisRollBall-title-list-title pdg20 row">
          <div style="width:24%;height:100%" class="row allAlignment item-center">
            <div>
              <span class="tennisRollBall-list-num" v-if="items.match_process">{{items.match_process}}</span>
              <span class="tennisRollBall-list-num" v-else>0</span>
              <b :style="!up?'':'display:none'">▼</b>
              <b :style="up?'':'display:none'">▲</b>
            </div>
            <div
              class="row center triangle tennisRollBall-title-list-title-num"
              style="background:#BBB;width:.6rem;height:.5rem;color:#fff;"
              @click="getTournamentPlay(items.match_id)"
            >{{items.tag}} ></div>
          </div>
          <div
            style="color:#666;width:70%;padding-left:.15rem"
            class="row average item-center list-title"
          >
            <p style="width:.6rem;">独赢盘</p>
            <p>让分</p>
            <p>大/小</p>
            <p>单/双</p>
          </div>
        </div>
        <div class="row list-box" style="border-bottom:.01rem solid #EDEDED">
          <div class="list-box-name row item-center" style="line-height:.4rem;">
            <div>
              <p style="color:#f76649">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
            </div>
            <div>
              <p>{{items.home_team}}</p>
              <p>{{items.guest_team}}</p>
            </div>
          </div>
          <div class="row average" style="width:70%;padding:0 .1rem;position: relative;">
            <div v-for="(itemList,idx) in items.full_oddsData" :key="itemList.id">
              <!-- 独赢盘无数据，暂时模拟，做样式 -->
              <div v-if="itemList.odds_code == 'ch' || itemList.odds_code == 'cg' ">
                <div style="padding:.01rem 0;" class="home capot" v-if="itemList.odds_code == 'ch'">
                  <p  class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,items.home_team,'滚球','all')">{{itemList.odds}}</p>
                </div>
                <div class="guest capot" v-if="itemList.odds_code == 'cg'">
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,items.guest_team,'滚球','all')">{{itemList.odds}}</p>
                </div>
              </div>
              <div v-if="itemList.odds_code == 'coh' || itemList.odds_code == 'cog'">
                <div style="padding:.01rem 0 ;" class="home concede" v-if="itemList.odds_code == 'coh'">
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,items.home_team,'滚球','all')">{{itemList.odds}}</p>
                </div>
                <div v-if="itemList.odds_code == 'cog'" class="guest concede">
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,items.guest_team,'滚球','all')">{{itemList.odds}}</p>
                </div>
              </div>

              <div>
                <div class="row item-center total home"
                  v-if="itemList.odds_code == 'tnb'" >
                  <span style="color:#f76649;margin-right:.1rem;">大{{itemList.condition}}</span>
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,'大','滚球','all')">{{itemList.odds}}</p>
                </div>
                <div class="row item-center total guest"
                  v-if="itemList.odds_code == 'tns'"
                >
                  <span style="color:#f76649;margin-right:.1rem;">小{{itemList.condition}}</span>
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,'小','滚球','all')">{{itemList.odds}}</p>
                </div>
              </div>
              <div v-if="itemList.odds_code.startsWith('ts')">
                <div class="row item-center two_sides guest" v-if="itemList.odds_code == 'tsd'">
                  <span style="color:#f76649;margin-right:.1rem;">{{itemList.condition}}</span>
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,items.home_team,'滚球','all')">{{itemList.odds}}</p>
                </div>
                <div class="row item-center two_sides home" v-if="itemList.odds_code == 'tss'">
                  <span style="color:#f76649;margin-right:.1rem;">{{itemList.condition}}</span>
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,items.guest_team,'滚球','all')">{{itemList.odds}}</p>
                </div>
              </div>
            </div>
            <div class="right-img">
              <img style="margin-bottom:.1rem" src="@/assets/st-imges/TheGame.png">
              <br>
              <img src="@/assets/st-imges/TheScore.png">
            </div>
          </div>
        </div>
        <div class="row list-box" style="border-bottom:.01rem solid #EDEDED" v-if ="items.match_process == '' || items.match_process < 6">
          <div class="list-box-name row item-center" style="line-height:.4rem;">
            <div>
              <p style="color:#f76649;writing-mode:tb-rl">前五局</p>
            </div>
            <div>
              <p>{{items.home_team}}</p>
              <p>{{items.guest_team}}</p>
            </div>
          </div>
          <div class="row average" style="width:70%;padding:0 .1rem;position: relative;">
              <div v-for="(itemList,idx) in items.full_oddsData" :key="itemList.id">
              <!-- 独赢盘无数据，暂时模拟，做样式 -->
              <div v-if="itemList.odds_code == 'ch' || itemList.odds_code == 'cg' ">
                <div style="padding:.01rem 0;" class="home capot" v-if="itemList.odds_code == 'ch'">
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,items.home_team,'滚球','all')">{{itemList.odds}}</p>
                </div>
                <div class="guest capot" v-if="itemList.odds_code == 'cg'">
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,items.guest_team,'滚球','all')">{{itemList.odds}}</p>
                </div>
              </div>
              <div v-if="itemList.odds_code == 'coh' || itemList.odds_code == 'cog'">
                <div style="padding:.01rem 0 ;" class="home concede" v-if="itemList.odds_code == 'coh'">
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,items.home_team,'滚球','all')">{{itemList.odds}}</p>
                </div>
                <div v-if="itemList.odds_code == 'cog'" class="guest concede">
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,items.guest_team,'滚球','all')">{{itemList.odds}}</p>
                </div>
              </div>

              <div>
                <div class="row item-center total home"
                  v-if="itemList.odds_code == 'tnb'" >
                  <span style="color:#f76649;margin-right:.1rem;">大{{itemList.condition}}</span>
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,'大','滚球','all')">{{itemList.odds}}</p>
                </div>
                <div class="row item-center total guest"
                  v-if="itemList.odds_code == 'tns'"
                >
                  <span style="color:#f76649;margin-right:.1rem;">小{{itemList.condition}}</span>
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,'小','滚球','all')">{{itemList.odds}}</p>
                </div>
              </div>
              <div v-if="itemList.odds_code.startsWith('ts')">
                <div class="row item-center two_sides guest" v-if="itemList.odds_code == 'tsd'">
                  <span style="color:#f76649;margin-right:.1rem;">{{itemList.condition}}</span>
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,items.home_team,'滚球','all')">{{itemList.odds}}</p>
                </div>
                <div class="row item-center two_sides home" v-if="itemList.odds_code == 'tss'">
                  <span style="color:#f76649;margin-right:.1rem;">{{itemList.condition}}</span>
                  <p class="singleAndDouble-list-btn hover" :class="{col:itemList.isTrue,rising:itemList.change == 'rising',falling:itemList.change == 'falling'}" @click="selection(index,i,idx,itemList.id,itemList.p_code,items.match_id,items.home_team,items.guest_team,items.guest_team,'滚球','all')">{{itemList.odds}}</p>
                </div>
              </div>
            </div>
            <div @click="promptInfo()" class="right-img">
              <img style="margin-bottom:.1rem" src="@/assets/st-imges/TheGame.png">
              <br>
              <img src="@/assets/st-imges/TheScore.png">
            </div>
          </div>
        </div>        
        <div style="height:.5rem" class="row item-center">
          <div style="width:20%;" class="row center">
            <div class="eliminate">
              <span style="margin-left:.085rem;" :class="items.sb ? 'spanBox':''"></span>
              <div style="width:.27rem;" class="row allAlignment">
                <span :class="items.tb ? 'spanBox':''"></span>
                <span :class="items.fb ? 'spanBox':''"></span>
              </div>
            </div>
          </div>
          <div style="width:70%" class="row average item-center">
            <div>
              出局：
              <span style="color:#f76649">{{items.ot}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="noData">
      <noData/>
    </div>     
  </div>
</template>

<script>
import noData from '@/components/noData';
export default {
  name: "baseballRollBall",
  components:{
    noData
  },
  data() {
    return {
      serchTxt: "",
      up: true,
      data: [],
      pCode: this.$store.getters.getPaly_code, //传入接口的值
      activity: this.$store.getters.getActivity, //传入接口的值
      ballCode: this.$store.getters.getBallCode,
      noData : false, //暂无数据显示         
      noShow : true   ,
      lg_id:'',//联赛 
      timers:true,
      limit : '', //投注长度
    };
  },
  /**
   * 组件内函数方法
   */
  methods: {
    getTournamentPlay(match_id) {
      this.$store.dispatch("MACTH_ID", match_id);      
      this.$store.dispatch("SET_CONTROLROUTING", 10013);
    },
    // 获取数据
    getAjax(lg_id,search){
      this.$http.get(this.$ports.home.gameList,{
        type: this.activity,
        game_code: this.ballCode,
        lg_id,                                        //需要拷贝
        search        
      }).then(res =>{
        // console.log('res',res)
        if(res.data.data.length >0){
          this.noData = false;
          this.data = res.data.data[0]
          // console.log(this.data,'棒球');
          // this.dataGroup(this.data)
          this.data.forEach(res =>{
            res.matchData.forEach(item =>{
              if(item.result_mark){
                item.ot = JSON.parse(item.result_mark).ot
              }
              item.sb = true;
              item.tb = false;
              item.fb = true;
            })
          })
        }else{
          this.noData = true;
          this.noShow = false;
        }
        this.$store.dispatch("GETLOADING", false);        
      })
    },

    /*******************直播比赛数据提示*******************/
    promptInfo(){
      this.$dialog.alert({mes: '此功能占未开放'});
    },

    // 刷新之后投注有数据添加选中效果
    dataGroup(data){
      let betting = this.$store.getters.getBetting;
      if(betting != null && betting.length >0){
         data.forEach(e =>{
           e.matchData.forEach(k =>{
             if( k.five_oddsData &&  k.five_oddsData.length > 0){
              k.five_oddsData.forEach(item =>{
                betting.forEach(i =>{
                  i.data.forEach(j =>{
                    if(j.id == item.id){
                      item.isTrue = true;
                    }
                  })
                })
              })
             }
            if( k.full_oddsData &&  k.full_oddsData.length > 0){
              k.full_oddsData.forEach(item =>{
                betting.forEach(i =>{
                 i.data.forEach(j =>{
                   if(j.id == item.id){
                     item.isTrue = true;
                   }
                 })
               })
             })
            }
           })
         })
      }
    },
    // 选中添加数据
    selection(idx,i,index,id,p_code,match_id,homeName,guestName,name,playName,status){
      // console.log('id',id)
    //调用投注公共方法
    let _this = this;
    let isAre = true;
    let isAdd = true,isAlert =false;    
    let ballId = this.$store.getters.getBallCode;
    let teamName = {
      home : homeName,
      guest : guestName
    }
    let acty = this.$store.getters.getActivity;
    let betting = this.$store.getters.getBetting;  
    let obj = {
      title:p_code,
      data:''
    }         
  if(status == 'all'){
    this.data[idx].matchData[i].full_oddsData[index].home_team = homeName;
     this.data[idx].matchData[i].full_oddsData[index].guest_team = guestName;
     this.data[idx].matchData[i].full_oddsData[index].playName = playName;
     this.data[idx].matchData[i].full_oddsData[index].name = name;
     this.data[idx].matchData[i].full_oddsData[index].ballId = ballId;

    obj.data = [this.data[idx].matchData[i].full_oddsData[index]];   
  }else if(status == 'five'){
     this.data[idx].matchData[i].five_oddsData[index].home_team = homeName;
     this.data[idx].matchData[i].five_oddsData[index].guest_team = guestName;
     this.data[idx].matchData[i].five_oddsData[index].playName = playName;
     this.data[idx].matchData[i].five_oddsData[index].name = name;
     this.data[idx].matchData[i].five_oddsData[index].ballId = ballId;   
     obj.data =  [this.data[idx].matchData[i].five_oddsData[index]];  
  }
    if(betting.length >0){
      betting.forEach(e=>{
        if(e.title == p_code){
            e.data.forEach((res,num) =>{
              if(res.id ==id){
                e.data.splice(num, 1);
                isAdd =false;
              }
            })
          if(isAdd){
            if(this.limit >= 10 ) {
              this.$dialog.toast({ mes: "亲，超出表格上限啦。", timeout: 2000 }); 
            }else{
              if(status == 'all'){
                e.data.push( this.data[idx].matchData[i].full_oddsData[index]);
              }else if(status == 'five'){
                 e.data.push( this.data[idx].matchData[i].five_oddsData[index]);
              }

            }
          }
          isAre =false;
        }
      })
      if(isAre){
        if(this.limit >= 10 ) {
          this.$dialog.toast({ mes: "亲，超出表格上限啦。", timeout: 2000 }); 
        }else{
          betting.push(obj);
        }
      }
    }else{
      betting.push(obj);
    }         
      this.$store.dispatch("SET_BETTING",[]);
      this.$store.dispatch("SET_BETTING",betting);      
      this.selChange(idx,i,id,status)
    },
    selChange(idx,i,id,status){
      if(this.limit < 10){
        if(status == 'all'){
          this.data[idx].matchData[i].full_oddsData.forEach(item =>{
            if(item.id == id){
              this.$forceUpdate();
              this.$set(item, "isTrue", item.isTrue ? false : true);
            }
          })
        }else if(status == 'five'){
          this.data[idx].matchData[i].five_oddsData.forEach(item =>{
            if(item.id == id){
              this.$forceUpdate();
              this.$set(item, "isTrue", item.isTrue ? false : true);
            }
          })
        }
      }else{
        if(status == 'all'){
          this.data[idx].matchData[i].full_oddsData.forEach(item =>{
            if(item.id == id){
              this.$forceUpdate();
              this.$set(item,'isTrue',false)
            }
          })
        }else if(status == 'five'){
          this.data[idx].matchData[i].five_oddsData.forEach(item =>{
            if(item.id == id){
              this.$forceUpdate();
              this.$set(item,'isTrue',false)
            }
          })
        }        
      }
    },
    //搜索按钮被点击
    Serch() {
      if (this.serchTxt === "") {
        this.$dialog.toast({ mes: "请输入您想要搜索的内容。", timeout: 2000 });
        return false;
      } else {
       this.data = [];
        this.$store.dispatch("SET_LEAGUEDATA",[]);     //需要拷贝
        this.getAjax('',this.serchTxt)                 //需要拷贝
      }
    },
    // 删除搜索框内容
    clearSerchTxt() {
      if (this.serchTxt != "") {
        this.data = [];
        this.serchTxt = "";
        this.$store.dispatch("SET_LEAGUEDATA",[]);  //需要拷贝
        this.getAjax();
      }
    },
    // 刷新
    red() {
       this.$store.dispatch("SET_LEAGUEDATA",[]);  //需要拷贝
      if (this.serchTxt.length > 0) {
        this.Serch();
      } else {
        this.data = '';
        this.getAjax();
      }
    },
    //跳转到联赛选择页
    elasticFrame() {
      this.$store.dispatch("SET_CONTROLROUTING", 10013);
    }
  },
  mounted() {
    
    //获取选择的联赛id
    if(this.$store.getters.getLeagueData.length >0 ){
      if(this.$store.getters.getLeagueData.length == 1){
        this.lg_id = this.$store.getters.getLeagueData[0]
      }else{
        this.lg_id = this.$store.getters.getLeagueData.join(',');
      }
    }this.$store.dispatch("GETLOADING", true);    
    this.getAjax(this.lg_id);
    this.$store.dispatch("SET_BETTING",[]);
    let _this = this
    this.$public.ajaxTimerFun((timing)=>{
      if(_this.timers){
        this.getAjax(_this.lg_id,_this.serchTxt);             //需要拷贝
      }else{
        clearInterval(timing)
      }
    })
  },
  computed:{
    getActy() {
      return this.$store.getters.getActivity;
    },
    //获取投注框删除的投注信息
    getDeleteType() {
      return this.$store.getters.getDeleteType;
    },    
    // 获取投注数量
    getLimit() {
      return this.$store.getters.getLimit;
    },    
  },
  watch:{
    getActy(val) {
      this.activity = val;
      this.getAJAX();
      this.$store.dispatch("SET_BETTING",[]);      
    },
    getLimit(val){
      this.limit = val;
        if(val == 0){
          this.data.forEach(e =>{
            e.matchData.forEach(k =>{
              k.five_oddsData.forEach(item =>{
                if(item.isTrue){
                  this.$forceUpdate();
                  item.isTrue = false;
                }
              })
              k.full_oddsData.forEach(item =>{
                if(item.isTrue){
                  this.$forceUpdate();
                  item.isTrue = false;
                }
              })              
            })
          })
        }      
    },
    getDeleteType(val){
      let jumpOut = false;
      for(var i = 0; i < this.data.length; i++){
        for(var k = 0; k < this.data[i].matchData.length; k++){
          for(var j = 0; j < this.data[i].matchData[k].five_oddsData.length;j++){
              if(this.data[i].matchData[k].five_oddsData[j].id == val){
                this.$forceUpdate();
                this.data[i].matchData[k].five_oddsData[j].isTrue = false;
                jumpOut = true;
                break;
              }
          }
          for(var j = 0; j < this.data[i].matchData[k].full_oddsData.length;j++){
              if(this.data[i].matchData[k].full_oddsData[j].id == val){
                this.$forceUpdate();
                this.data[i].matchData[k].full_oddsData[j].isTrue = false;
                jumpOut = true;
                break;
              }
          }
          if(jumpOut == true){
            break;
          }
        }
          if(jumpOut == true){
            break;
          }        
      }
    },      
  },
  beforeDestroy() {
    this.timers = false;
  },
};
</script>

<style scoped>
.pdg20 {
  padding: 0 0.2rem;
}
.tennisRollBall-title {
  height: 0.5rem;
  color: #fff;
  background: #898989;
}
.tennisRollBall-title-list {
  background: #fff;
  font-size: 0.14rem;
}
.tennisRollBall-title-list-title {
  height: 0.5rem;
  background: #e5e5e5;
  color: #666;
  cursor: pointer;
}
.tennisRollBall-title-list-title-num::after {
  border-width: 0.05rem;
  border-left-color: #e5e5e5;
  border-top-color: #e5e5e5;
  left: 42%;
  bottom: -0.05rem;
  transform: rotate(45deg);
}

.serch {
  width: 100%;
  height: 0.5rem;
  background: #aaa;
  padding: 0 0.2rem;
}
input {
  border: none;
  background: #efefef;
  padding-left: 0.2rem;
  width: 4.6rem;
  height: 0.3rem;
  border-radius: 0.05rem 0 0 0.05rem;
}
.serch-img {
  width: 0.5rem;
  height: 0.3rem;
  background: #666;
  border-radius: 0 0.05rem 0.05rem 0;
  margin-right: 0.3rem;
}
.all {
  width: rem;
  height: 0.3rem;
  background: #ddd;
  color: #333;
}
.clear {
  width: 0.6rem;
  height: 0.3rem;
  background: #666;
  color: #ccc;
  margin-right: 0.1rem;
}
.redraw {
  width: 0.3rem;
  height: 0.3rem;
  background: #666;
}
img {
  width: 0.2rem;
  height: 0.2rem;
}
.br05 {
  border-radius: 0.05rem;
}
.fz14 {
  font-size: 0.14rem;
}
.hover:hover {
  background: #bbb;
  color: #fff;
}
.pointer {
  cursor: pointer;
}
.tennisRollBall-list-name p {
  width: 100%;
}
.tennisRollBall-list-name p span {
  display: inline-block;
  width: 0.08rem;
  height: 0.08rem;
  border-radius: 50%;
}
.right-img {
  width: 0.15rem;
  position: absolute;
  right: -0.3rem;
  bottom: 0.1rem;
}
.right-img img {
  width: 0.22rem;
  height: 0.2rem;
}
.singleAndDouble-list-btn {
  width: 0.48rem;
  height: 0.3rem;
  border: 0.01rem solid #ccc;
  line-height: 0.3rem;
  text-align: center;
  border-radius: 0.05rem;
  cursor: pointer;
  margin: 0.05rem;
}
.tennisRollBall-list-footer-num span {
  margin-right: 0.1rem;
}
.list-box-name {
  width: 24%;
}
.eliminate span {
  display: block;
  width: 0.1rem;
  height: 0.1rem;
  background: #ccc;
  transform: rotate(45deg);
}
.eliminate {
  width: 0.25rem;
}
.hover:hover {
  background: #bbb;
  color: #fff;
}
.list-title p {
  width: 0.9rem;
  text-align: center;
}
.concede,.total,.two_sides,.capot{
  position: absolute;
}
.home{
  top: 0%;
}
.guest{
  bottom: 0%;;
}
.concede{
  left: 30%;
}
.total{
  left: 50%;
}
.two_sides{
  left: 80%;
}
.capot{
  left: 9%;
}
.col {
  border-radius: 2px;
  background: #f76649;
  color: #fff;
}
.spanBox{
background: orange !important;  
}
</style>