sports_wap/.svn/pristine/70/708c2d33f795299c5cd26dffebe1fe18e3c01205.svn-base

<template>
  <div>
    <div v-if="noData">
      <NotOpend :title="this.info"/>
    </div>
    <!-- 让球&大小 -->
    <div class="match" v-if="isShow && wq_show">
      <div v-for="(items,$index) in letBallData" :key="items.id" class="mg">
        <!-- <div v-for="items in list[index]" :key="items.id"> -->
        <div class="row allAlignment haderBox center">
          <span>{{items.leagueName}}</span>
          <div class="row Match-title-num">
            <span>{{items.matchNum}}</span>
          </div>
        </div>
        <div class="Match-box">
          <div v-for="(itemList,index) in items.matchData" :key="index"  @click="matchInfo(itemList.match_id)">
            <div class="row allAlignment Match-box-top">
              <div class="Match-box-top-left">
                <span>{{itemList.match_process}}</span>
                <span class="texttop" v-if="activity == 'StRollBall'">{{itemList.a_time}}</span>
                <span class="texttop" v-if="activity == 'StSoon'">{{itemList.wait_time}}分钟</span>
              </div>
              <div class="Match-box-top-right row">
                <span style="margin-right: .1rem;" class="Match-box-top-num">{{itemList.tag}}</span>
                <span style="margin-right: .1rem;">让球</span>
                <span style="margin-right: .1rem;">大小</span>
              </div>
            </div>
            <div class="row allAlignment center listbox">
              <div class="column average name-box">
                <div class="box noBox row item-center main-box">
                  <span
                    v-if="itemList.home_score == '0' || itemList.home_score"
                    class="num-box"
                    style="color:#eb921e"
                  >{{itemList.home_score}}</span>
                  <span v-else style="color:#eb921e">{{itemList.home_score}}</span>

                  &nbsp;&nbsp;{{itemList.home_team}}
                </div>
                <div class="box noBox row item-center main-box">
                  <span
                    v-if="itemList.guest_score || itemList.guest_score == '0'" 
                    class="num-box"
                    style="color:#eb921e"
                  >{{itemList.guest_score}}</span>
                  <span v-else style="color:#eb921e">{{itemList.guest_score}}</span>
                  &nbsp;&nbsp;{{itemList.guest_team}}
                </div>
              </div>
              <div class="Match-list-box row item-center average">
                <!-- <div v-for="(odds,i) in itemList.oddsData[0]" :key="odds.id" class="match-list">
                    <div
                      @click.stop="isclick(index,i)"
                      class="column center"
                      :class="items.istrue == i ?'active':''"
                    >
                      <span style="color:#FD8F26">{{odds.condition}}</span>
                      <span>{{odds.odds}}</span>
                    </div>
                </div>-->
                <div class="Match-bottom-right">
                  <!-- 主队 -->
                  <div class="row">
                    <div
                      class="Match-list-left"
                      v-for="(items,indexs) in itemList.oddsData[0].homeOdds"
                      :key="indexs"
                      @click.stop="isBetting($index,itemList.match_id,items.id,itemList.home_team,itemList.guest_team,itemList.home_team,items.odds,items.condition,items.odds_only,items.odds_code,'homeOdds',items.p_code,items.status)"
                    >
                      <div :class="items.isTrue ? 'active' : ''" class="column center">
                        <span style="color:#f76649">{{items.condition}}</span>
                        <span>{{items.odds}}</span>
                      </div>
                    </div>
                  </div>
                  <!-- 客队 -->
                  <div class="row">
                    <div
                      class="Match-list-right row"
                      v-for="(items,indexs) in itemList.oddsData[0].guestOdds"
                      :key="indexs"
                      @click.stop="isBetting($index,itemList.match_id,items.id,itemList.home_team,itemList.guest_team,itemList.guest_team,items.odds,items.condition,items.odds_only,items.odds_code,'guestOdds',items.p_code,items.status)"
                    >
                      <div :class="items.isTrue ? 'active' : ''" class="column center">
                        <span>
                          <i style="color:#f76649">{{items.condition}}</i>
                        </span>
                        <span>{{items.odds}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 1x2 -->
    <div v-if="!isShow && !ishow && wq_show">
      <div v-for="(item,index) in letBallData" :key="item.id" @click="bettingChange()">
        <div class="row allAlignment haderBox center">
          <span>{{item.leagueName}}</span>
          <div class="Match-title-num">
            <span>{{item.matchNum}}</span>
          </div>
        </div>
        <div
          v-for="(itemList,$index) in item.matchData"
          :key="itemList.id"
          @click="matchInfo(itemList.match_id)"
        >
          <div class="box noPd">
            <div class="row allAlignment item-center top-box">
              <span>
                <i>{{itemList.match_process}}</i>
                 <span class="texttop" v-if="activity == 'StRollBall'">{{itemList.a_time}}</span>
                <span class="texttop" v-if="activity == 'StSoon'">{{itemList.wait_time}}分钟</span>
                <!-- <b style="color:#F76649;font-weight: normal;">{{itemList.a_time}}</b> -->
              </span>
              <span class="top-num">{{itemList.tag}}</span>
            </div>
          </div>
          <div class="box-bottom">
            <div class="box row item-center main-box">
              <span
                v-if="itemList.home_score == '0' || itemList.home_score"
                class="num-box"
                style="color:#eb921e"
              >{{itemList.home_score}}</span>
              <span v-else style="color:#eb921e">{{itemList.home_score}}</span>
              &nbsp;&nbsp;{{itemList.home_team}}
            </div>
            <div class="box row item-center main-box">
              <span
                v-if="itemList.guest_score || itemList.guest_score == '0'"
                class="num-box"
                style="color:#eb921e"
              >{{itemList.guest_score}}</span>
              <span v-else style="color:#eb921e">{{itemList.guest_score}}</span>
              &nbsp;&nbsp;{{itemList.guest_team}}
            </div>
            <div class="footBox">
              <div
                class="box row allAlignment bottom-box center"
                v-for="(odds,idx) in itemList.oddsData[1]"
                :key="odds.id"
              >
                <div
                  class="item-center bottom-num"
                  :class="item.istrueA==true?'active':''"
                  @click.stop="isClick(idx,1)"
                >
                  <p style="color:#eb921e">{{odds.condition}}</p>
                  <p>{{odds.odds}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 独赢盘 -->
    <div class="match" v-if="!isShow && ishow && wq_show">
      <div v-for="(items,index) in letBallData" :key="items.id" class="mg">
        <!-- <div v-for="items in list[index]" :key="items.id"> -->
        <div class="row allAlignment letBallBox center">
          <span>{{items.leagueName}}</span>
          <div class="row Match-title-num">
            <span>{{items.matchNum}}</span>
          </div>
        </div>
        <div class="Match-box">
          <div
            v-for="(itemList,index) in items.matchData"
            :key="itemList.id"
            class="Match-box"
            @click="matchInfo(itemList.match_id)"
          >
            <div class="row allAlignment Match-box-top">
              <div class="Match-box-top-left">
                <!-- <span>{{itemList.match_date}}</span>
                <span class="texttop">{{itemList.match_time}}</span> -->
                 <span class="texttop" v-if="activity == 'StRollBall'">{{itemList.a_time}}</span>
                <span class="texttop" v-if="activity == 'StSoon'">{{itemList.wait_time}}分钟</span>
              </div>
              <div class="Match-box-top-right row">
                <span style="margin-right: .1rem;" class="Match-box-top-num">{{itemList.tag}}</span>
                <!-- <span style="margin-right: .1rem;">让球</span> -->
                <span style="margin-right: .1rem;">独赢盘</span>
              </div>
            </div>
            <div class="row allAlignment center listbox">
              <div class="column average name-box">
                <div>{{itemList.home_team}}</div>
                <div>{{itemList.guest_team}}</div>
              </div>
              <div class="Match-list-box row item-center average">
                <div v-for="(odds,i) in itemList.oddsData[0]" :key="odds.id" class="match-list">
                  <div
                    @click.stop="isclick(index,i)"
                    class="column center"
                    :class="items.istrue==i?'active':''"
                  >
                    <span style="color:#FD8F26">{{odds.condition}}</span>
                    <span>{{odds.odds}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 如过是网球则显示 -->
    <div class="match" v-if="isShow && !wq_show">
      <div v-for="(items,index) in letBallData" :key="items.id" class="mg">
        <!-- <div v-for="items in list[index]" :key="items.id"> -->
        <div class="row allAlignment letBallBox center">
          <span>{{items.leagueName}}</span>
          <div class="row Match-title-num">
            <span>{{items.matchNum}}</span>
          </div>
        </div>
        <div class="Match-box">
          <div
            v-for="(itemList,index) in items.matchData"
            :key="itemList.id"
            class="Match-box"
            @click="matchInfo(itemList.match_id)"
          >
            <div class="row allAlignment Match-box-top">
              <div class="Match-box-top-left">
                <!-- <span>{{itemList.match_date}}</span> -->
                <!-- <span class="texttop">{{itemList.wait_time}}分钟</span> -->
                 <span class="texttop" v-if="activity == 'StRollBall'">{{itemList.a_time}}</span>
                <span class="texttop" v-if="activity == 'StSoon'">{{itemList.wait_time}}分钟</span>
              </div>
              <div class="Match-box-top-right row">
                <span style="margin-right: .1rem;" class="Match-box-top-num">{{itemList.tag}}</span>
                <span style="margin-right: .1rem;">独赢盘</span>
                <span style="margin-right: .1rem;">让盘</span>
              </div>
            </div>
            <div class="row allAlignment center listbox">
              <div class="column average name-box">
                <div>{{itemList.home_team}}</div>
                <div>{{itemList.guest_team}}</div>
              </div>
              <div class="Match-list-box row item-center average">
                <div v-for="(odds,i) in itemList.oddsData[0]" :key="odds.id" class="match-list">
                  <div
                    @click.stop="isclick(index,i)"
                    class="column center"
                    :class="items.istrue ? 'active':''"
                  >
                    <span style="color:#FD8F26">{{odds.condition}}</span>
                    <span>{{odds.odds}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isBettingWindow == '100'">
      <BettingWindow/>
    </div>
  </div>
</template>
<script>
import Bus from "../assets/bus.js";
import NotOpend from "@/components/StNotOpend";
import BettingWindow from "@/components/StBettingWindow";
export default {
  props: ["gameCode", "name", "ishow"],
  components: { NotOpend, BettingWindow },
  data() {
    return {
      show: false, //暂时状态
      isShow: true,
      noData: true, //显示暂无数据
      wq_show: true, //是否为棒球与网球，是则不显示
      info: "没有相关比赛信息",
      status: false,
      isBettingWindow: -1, //投注组件隐藏
      isAjax: false, //开关
      list: [],
      letBallData: [], //让球大小和1X2数据
      timers: true,
      activity:'',
      betting: 10000, //vuex里面玩法投注数据
      thisNum: 10000, //vuex里面
      index: '',//
      data:'',//玩法赔率数据源
    };
  },
  /**
   * 函数方法
   */
  methods: {
    matchInfo(id) {
      this.$router.push({
        path: "/StRollBallBettingPage",
        query: {
          gameCode: this.$store.getters.getBallId,
          number: 1,
          home: true,
          name:this.name
        }
      });
      this.$store.dispatch("MACTH_ID", id);
    },
    //打开联赛投注页面
    goMatchInfo: function() {
     // this.$store.dispatch("GETSHOW", true);
      Bus.$on("show", data => {
        this.isShow = data;
      });
    },

    getAjax: function(game_code, type_code) {
      this.$store.dispatch("GETSHOW", true);
      if (!game_code || !type_code) return false;
      this.$http .get(this.$ports.match.matchState, { game_code,type_code}).then(res => {
        //console.log('数据结构',res.data.data);
        this.isAjax = true;
        if ( res.data.status == 1 &&res.data.data.length > 0 &&res.data != null) {
          this.letBallData = res.data.data;
          this.noData = false;
          //让球大小组合
          for (var i = 0; i < res.data.data.length; i++) {
           this.dataGroup(res.data.data[i], i);
          }
          //console.log(this.letBallData);
          //滚球比赛时间倒计时
          if(this.activity == 'StRollBall'){
            let _this = this;
            _this.letBallData.forEach(val => {
              val.matchData.forEach(e =>{
                let [f, s] = e.a_time.split(":");
                if (e.a_time != "") {
                  let [f, s] = e.a_time.split(":");
                  this.$public.timer(f, s, function(f, s) {
                    e.a_time = f + ":" + s;
                  });
                }
              })
            });
          }
          //console.log('letBallData',this.letBallData)
        } else {
          //  是否显示组件
          this.noData = true;
          //console.log('data',this.noData)
          // 每次更新数据没有数据时则置空。
          this.letBallData = [];
        }
        // 状态值数据更改
        // let _this = this;
        // setTimeout(function(){
          this.$store.dispatch('GETSHOW',false);
        // },500)
      });

    },
    /*--------------------------------------------------------------------------------*/
    // 添加、删除vuex投注数据公共方法
    AddDelete: function(array,$index,type) {
      let bettingInfo = array;
      let isAdd = true;
      let matchList = this.$store.getters.getBetting;
      if (this.thisNum != 10000) {
        //删除vuex投注数据
        matchList[this.thisNum].data.forEach((res, index) => {
          if (res.id == array.id) {
            matchList[this.thisNum].data.splice(index, 1);
            // this.$store.dispatch("ISBETTING",false);
            this.$store.dispatch("SET_LIMIT", false);
            this.$store.dispatch("BETTING", []);
            this.$store.dispatch("BETTING", matchList);
            isAdd = false;
            //处理当前页面样式
            this.modifyStyle($index,array.id, type);
          }
        });
        //添加vuex投注数据
        if (isAdd) {
          if(this.$store.getters.getLimit * 1 >= 10)return false;
          //处理当前页面样式
          this.modifyStyle($index,array.id, type);
          matchList[this.thisNum].data.push(bettingInfo);
          this.$store.dispatch("BETTING", []);
          this.$store.dispatch("BETTING", matchList);
        }
      } else {
        //添加新的玩法赔率数据
        let obj = {
          title: "concede_size",
          data: [bettingInfo]
        };
        //判断vuex有误其它玩法数据
        if (matchList) {
          matchList.push(obj);
        } else {
          //处理当前页面样式
          this.$store.dispatch("BETTING", [obj]);
        }
          this.modifyStyle($index,array.id, type);
      }
      if (this.$store.getters.getIsBetting == '100') return false;
      this.$store.dispatch("ISBETTING", '100');
    },

    /*--------------------------------------------------------------------------------*/
    //修改当前页面样式公共方法
    modifyStyle: function($index,id, type) {
      this.letBallData[$index].matchData.every((e,i )=> {
        let ret = false;
        if (type == "homeOdds") {
          e.oddsData[0].homeOdds.every((res, index) => {
            if (res.id == id) {
              this.$forceUpdate();
              this.$set(res,"isTrue",res.isTrue ? false : true);
              ret = true;
              return false;
            }
            return true;
          });
        } else if (type == "guestOdds") {
          e.oddsData[0].guestOdds.every((res, index) => {
            if (res.id == id) {
              this.$forceUpdate();
              this.$set(
               this.letBallData[$index].matchData[i].oddsData[0].guestOdds[index],
                "isTrue",
                res.isTrue ? false : true
              );
              ret = true;
              return false;
            }
            return true;
          });
        }
        if (ret) {
          return false;
        } else {
          return true;
        }    
      });
    },

    /*--------------------------------------------------------------------------------*/
    // 修改投注样式
    isBetting($index,match_id,id, home, guest, name, odds, condition, odds_only,odds_code,type,p_code,status) {
      if(status == '-1') return false;
      let bettingInfo = {
        id,
        home_team: home,
        guest_team: guest,
        name,
        odds,
        match_id,
        condition,
        ballId:this.$store.getters.getBallId,
        odds_code: odds_code,
        p_code:p_code,
        play_name: odds_code =='concede_home' || odds_code =='concede_guest' ? '让球' : '大小',
        score: this.score,
        bettingTime: "",
        odds_only
      };
      this.AddDelete(bettingInfo,$index,type);
      if (this.$store.getters.getLimit * 1 >= 10) {
        this.$dialog.alert({ mes: "你的注单已达到上限啦!" });
      }
    },

    /*--------------------------------------------- */
    //让球大小数据组合
    dataGroup:function(data, i) {
      let homeOdds = [],
        guestOdds = [];
      let A, B, C, D;
      data.matchData.forEach((column, index) => {
        if (column.oddsData[0] == null || column.oddsData[0].length == 0) {
          column.oddsData[0] = {
            homeOdds: [{ status: -1 }, { status: -1 }],
            guestOdds: [{ status: -1 }, { status: -1 }]
          };
        } else {
          column.oddsData[0].forEach(val => {
            if (this.betting != 10000) {
              this.betting.forEach(e => {
                if (val.id == e.id) {
                  val.isTrue = true;
                  //this.$set(val,'isTrue',true);
                }
              });
            }
            //console.log('odds_code',val.odds_code)
            if (val.odds_code == "concede_home") {
              A = val;
            } else if (val.odds_code == "size_home") {
              B = val;
            } else if (val.odds_code == "concede_guest") {
              C = val;
            } else if (val.odds_code == "size_guest") {
              D = val;
            }
          });
          column.oddsData[0] = {};
          column.oddsData[0].homeOdds = [];
          column.oddsData[0].homeOdds.push(A);
          column.oddsData[0].homeOdds.push(B);
          column.oddsData[0].guestOdds = [];
          column.oddsData[0].guestOdds.push(C);
          column.oddsData[0].guestOdds.push(D);
        }
      });
    },


    /*---------------------------------------------*/
    //
    isClick() {
      if (this.$store.getters.getIsBetting == true) {
        return false;
      }
      this.$store.dispatch("ISBETTING", true);
      // this.$set(this.letBallData.matchData[1].oddsData[1][i], "istrue", (this.letBallData.list[i].istrue = num));
    },

    /*---------------------------------------------*/
    //
    bettingChange() {
      //this.isBettingWindow = '100';
    },
    
    /*---------------------------------------------*/
    // 点击事件确认选中
    isclick(index, num) {
      console.log(this.letBallData);
      if (this.$store.getters.getIsBetting == true) {
        return false;
      }
      this.$store.dispatch("ISBETTING", true);
    }
  },
  /**
   * 计算属性
   */
  computed: {
    // 监听vuex状态值的改变
    getInfo: function() {
      return {
        game_code: this.$store.getters.getBallId,
        type_code: this.$store.getters.getActivity
      };
    },

    getIsBetting: function() {
      return this.$store.getters.getIsBetting;
    },

    // // 获取滚动状态
    // getscorllcode() {
    //   return this.$public.getCache("box_size");
    // },
    getBetting() {
      return this.$store.getters.getBetting;
    },

    //获取投注框删除的投注信息
    getDeleteType() {
      return this.$store.getters.getDeleteType;
    },

    getActivity:function(){
      return  this.$store.getters.getActivity;
    }
  },
  watch: {
    getActivity(val){
      this.activity = val;  
    },

    /*--------------------------------- */
    getInfo(obj) {
      let getActivity = this.$store.getters.getActivity
      this.goMatchInfo();
      if ( getActivity == "StSoon" || getActivity == "StRollBall") {
        if (this.isAjax) {
          this.getAjax(obj.game_code, obj.type_code);
        }
      }
      if (obj.game_code == "wq") {
        //this.rShow = false;
        this.wq_show = false;

      } else {
        //this.rShow = true;
        this.wq_show = true;
      }
    },

    /*-------------------------------------*/
    // 监听投注框开关
    getIsBetting(val) {
      this.isBettingWindow = val;
    },

    // // 监听滚动状态变化赋值滚动
    // getscorllcode(val) {
    //   this.scorll = val;
    // },

    getDeleteType(val) {
      let flag = true;
      // 下标问题
      console.log('matchData',this.letBallData)
      this.letBallData.forEach((item,index) => {
        console.log('item',item)
        item.matchData.forEach(e =>{
         
          if (val == "all") {
            e.oddsData[0].guestOdds.forEach(data => {
              this.$set(data, "isTrue", false);
            });
            e.oddsData[0].homeOdds.forEach(data => {
              this.$set(data, "isTrue", false);
            });
          } else {
            let showData = true;
            e.oddsData[0].guestOdds.forEach(data => {
              if (data.id == val) {
                this.$set(data, "isTrue", false);
                showData = false;
              }
            });
            if (showData) {
              e.oddsData[0].homeOdds.forEach(data => {
                if (data.id == val) {
                  this.$set(data, "isTrue", false);
                }
              });
            }
          }
        })

      });
    },
    /*--------------------------------------------------------------------------------*/
    //获取已投注信息
    getBetting(val) {
      //获取vuex玩法已投注相对应的数据
      if (val) {
        val.forEach((e, index) => {
          if ("concede_size" == e.title) {
            this.thisNum = index;
            this.betting = e.data;
          }
        });
      }
    },

    /*--------------------------------------------------------------------------------*/
  },
  mounted() {
    // 调用bus传值
    this.goMatchInfo();
    console.log('ssa',123);
    this.activity =  this.$store.getters.getActivity;
    let _this = this;
    let getters = this.$store.getters;
      // 获取是否滑动信息
    if (this.$public.getCache("box_size") == 1) {
      this.isshrink = true;
    }
    //是否展示投注框
    if (getters.getIsBetting == '100') {
      this.isBettingWindow = 100;
    }
    //获取vuex玩法已投注相对应的数据
    let getBetting = getters.getBetting;
    if (getBetting) {
      getBetting.forEach((e, index) => {
        if ("concede_size" == e.title) {
          this.thisNum = index;
          this.betting = e.data;
        }
      });
    }
    this.$public.ajaxTimerFun(function(timing) {
      _this.getAjax(getters.getBallId,getters.getActivity);
      if (!_this.timers) {
        clearInterval(timing);
      }
    });
    this.getAjax(getters.getBallId,getters.getActivity);
  },
  beforeDestroy() {
    this.timers = false;
  }
};
</script>
<style scoped>
.yd-cell-box .yd-cell {
  z-index: 99;
  border-radius: 0.2rem;
}
.matchBox {
  background: #f9f9f9;
  padding: 0.27rem 0.34rem 0 0.32rem;
}
.match .tit {
  display: flex;
  justify-content: space-between;
  font-size: 0.32rem;
  margin-bottom: 0.3rem;
}
.match .list {
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0.6, 0.2, 1);
}
.match .list div {
  background: #dcdcdc;
  width: 100%;
  height: 0.88rem;
  padding: 0.26rem 0.56rem 0.3rem 0.3rem;
  display: flex;
  justify-content: space-between;
  border-radius: 0.08rem;
  margin-bottom: 0.12rem;
}
.match .list span {
  color: #333333;
  font-size: 0.28rem;
}
.match .list .num {
  width: 0.4rem;
  height: 0.4rem;
  display: inline-block;
  line-height: 0.4rem;
  text-align: center;
  color: #f5f5f5;
  border-radius: 50%;
  font-size: 0.2rem;
  background: #f76649;
}
.yd-accordion {
  background: transparent;
}
.match .list div:nth-last-child(1) {
  margin-bottom: 0.34rem;
}
div /deep/ .yd-accordion-head,
div /deep/ .yd-accordion-head-content,
div /deep/ .yd-accordion-title,
div /deep/ .yd-accordion-title-full {
  height: 0.3rem;
}
div /deep/ .yd-accordion-title {
  min-height: 0;
  font-size: 0.28rem;
}
div /deep/ .yd-accordion-head {
  margin-bottom: 0.3rem;
  border: none;
}
.list-box {
  border: 2px solid #cecece;
  border-radius: 0.2rem;
}
div /deep/ .yd-accordion-head:after {
  height: 0px;
}
div /deep/ .yd-accordion-head-arrow:after {
  border: none;
  width: 0.4rem;
  height: 0.4rem;
  background: url("../assets/st-imges/xiangxia.png") no-repeat;
  background-size: 0.4rem 0.4rem;
}
/* 1x2 */
.top-box {
  height: 0.45rem;
  /* font-size: 0.24rem;
  background: #fff; */
  border-bottom: 1px solid #e4e4e4;
  padding: 0 0.32rem;
  line-height: 0.44rem;
  background: #dcdcdc;
  font-size: 0.23rem;
}
.box-bottom {
  padding: .1rem .32rem;
  background: #fff;
}
.top-num {
  display: inline-block;
  width: 0.64rem;
  height: 0.44rem;
  line-height: 0.44rem;
  color: #000000;
  text-align: center;
  background: #ebebeb;
  font-size: 0.24rem;
}
.box {
  background: #fff;
}
.noPd {
  padding: 0;
}
.noBox {
  padding: 0;
  background: #f8f8f8;
}
.Match-title-num {
  width: 0.46rem;
  height: 0.46rem;
  line-height: 0.46rem;
  text-align: center;
  background: #f76649;
  font-size: 0.26rem;
  border-radius: 50%;
  color: #e4e4e4;
}
.haderBox {
  padding: 0 0.32rem;
  height: 0.88rem;
  font-size: 0.32rem;
  background: #f8f8f8;
}
.main-box {
  height: 0.9rem;
  /* background: #fff; */
  font-size: 0.28rem;
}
.bottom-box {
  height: 1.1rem;
  background: #fff;
  font-size: 0.24rem;
}
.bottom-box div {
  width: 1.07rem;
  height: 0.76rem;
  border: 2px solid #cecece;
  border-radius: 0.1rem;
  font-size: 0.24rem;
}
.bottom-num {
  padding: 0.1rem;
  text-align: center;
}
.active {
  background: #f76649;
  border: 2px solid #f76649 !important;
}
.active > p {
  color: #e4e4e4 !important;
}
.num-box {
  width: 0.66rem;
  height: 0.34rem;
  background: #f76649;
  border-radius: 0.17rem;
  color: #f5f5f5 !important;
  line-height: 0.34rem;
  text-align: center;
}
.footBox {
  height: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footBox .box {
  padding-left:.32rem;
  width: 33%;
  text-align: center;
}
/* 让球&大小 */
.letBallBox {
  padding: 0 0.32rem;
  height: 0.88rem;
  font-size: 0.32rem;
  background: #f4f4f4;
}

.mg {
  margin-bottom: 0.1rem;
}
.Match-title-num {
  width: 0.46rem;
  height: 0.46rem;
  align-items: center;
  justify-content: center;
  line-height: 0.46rem;
  text-align: center;
  background: #f76649;
  font-size: 0.2rem;
  border-radius: 50%;
  color: #f5f5f5;
}

.Match-box-top-right > span {
  width: 1.07rem;
  text-align: center;
}
.listbox {
  padding:0.1rem 0.32rem;
}
.name-box {
  height: 1.76rem;
  width: 3.8rem;
}
.Match-box-top {
  height: 0.44rem;
  padding: 0 0.32rem;
  line-height: 0.44rem;
  background: #dcdcdc;
  font-size: 0.23rem;
}
.Match-box-top-num {
  width: 0.64rem !important;

  height: 0.44rem;
  background: #ebebeb;
  font-size: 0.24rem;
}
.texttop {
  color: #f76649;
}
.Match-box {
  /* padding: 0 0 0.12rem; */
  background: #f8f8f8;
}
.Match-list-box {
  width: 35%;
  height: 1.76rem;
  flex-wrap: wrap;
}
.Match-list-box .match-list div {
  width: 1.07rem;
  height: 0.8rem;
  border: 1px solid #cecece;
  border-radius: 0.1rem;
  flex-wrap: wrap;
}
.active {
  background: #e4e4e4;
}

/* 后加 */
.Match-title-num {
  width: 0.46rem;
  height: 0.46rem;
  line-height: 0.46rem;
  text-align: center;
  background: #f76649;
  font-size: 0.26rem;
  border-radius: 50%;
  color: #f5f5f5;
}

.Match-box-top-right > span {
  width: 1.07rem;
  text-align: center;
}
.name-box {
  height: 1.76rem;
}
.Match-box-top {
  height: 0.45rem;
  line-height: 0.45rem;
  background: #dcdcdc;
  font-size: 0.23rem;
  padding: 0 0.32rem;
}
.Match-box-top-num {
  width: 0.64rem !important;
  height: 0.45rem;
  background: #ebebeb;
  font-size: 0.24rem;
}
.Match-box {
  background: #f8f8f8;
}
.Match-bottom-right {
  padding: 0 0.14rem;
}
.Match-list-left div {
  width: 1.07rem;
  height: 0.76rem;
  border: 1px solid #e4e4e4;
  border-radius: 0.1rem;
  padding: 0.1rem;
  margin: 0.06rem 0.08rem;
}
.Match-list-right div {
  width: 1.07rem;
  height: 0.76rem;
  border: 1px solid #e4e4e4;
  border-radius: 0.1rem;
  margin: 0.06rem 0.08rem;
}
.active {
  background: #f76649;
  border: none;
  color: #e1e1df !important;
}
.active span{
  color: #e1e1df !important;
}
.active i{
  color: #e1e1df !important;
}
</style>