sports_wap/vue_sports/.svn/pristine/f3/f3258ab4ec5a62f0e802c91815ff41f6eae7514b.svn-base

<template>
  <div>
    <div v-if="noData">
      <NotOpend :title="this.info"/>
    </div>
    <!-- 让球&大小 -->
    <div class="match" v-if="isShow && rShow">
      <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="itemList.id"
            @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"
                    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,items.id,itemList.home_team,itemList.guest_team,itemList.home_team,items.odds,items.condition,items.odds_only,'homeOdds')"
                    >
                      <div :class="{ 'active' : items.isTrue == true}" class="column center">
                        <span style="color:#FD8F26">{{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,items.id,itemList.home_team,itemList.guest_team,itemList.guest_team,items.odds,items.condition,items.odds_only,'guestOdds')"
                    >
                      <div :class="{'active':items.isTrue==true}" class="column center">
                        <span>
                          <i style="color:#FD8F26">{{items.condition}}</i>
                        </span>
                        <span>{{items.odds}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 1x2 -->
    <div v-if="!isShow && !ishow && rShow">
      <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"
                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 && rShow">
      <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 && !rShow">
      <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 class="BettingWindow" v-if="isWindow">
      <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, //显示暂无数据
      rShow: true, //是否为棒球与网球，是则不显示
      info: "没有相关比赛信息",
      status: false,
      isWindow: false, //投注组件隐藏
      isAjax: false, //开关
      list: [],
      letBallData: [], //让球大小和1X2数据
      timers: true,
      activity:'',
      betting: 10000, //vuex里面玩法投注数据
      thisNum: 10000, //vuex里面
      index: '',
    };
  },
  /**
   * 函数方法
   */
  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(leagueId, sessionId) {
      //console.log(leagueId, sessionId);
      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 => {
          this.isAjax = true;
          if (
            res.data.status == 1 &&
            res.data.data.length > 0 &&
            res.data != null
          ) {
            this.letBallData = res.data.data;
            // console.log('  this.letBallData', res)
            this.noData = false;
            for (var i = 0; i < res.data.data.length; i++) {
      

              if (
                res.data.data[i].matchData &&
                res.data.data[i].matchData.length < 1
              ) {
              } else if (
                res.data.data[i].matchData &&
                res.data.data[i].matchData.length > 0
              ) {
                this.dataGroup(res.data.data[i], i);
              }
              //
            }
          } else {
            //  是否显示组件
            this.noData = true;
            //console.log('data',this.noData)
            // 每次更新数据没有数据时则置空。
            this.letBallData = [];
          }
          // 状态值数据更改
          this.$store.dispatch("GETSHOW", false);
        
        });
        if(this.activity == 'StRollBall'){
          let _this = this;
           console.log('111',this.letBallData)
          _this.letBallData.forEach(val => {
            console.log('val',val)
            val.matchData.forEach(e =>{
            console.log('110', e.a_time)
                 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;
              });
            }
            })
            
          });
     
        }
    },
    /*--------------------------------------------------------------------------------*/
    // 添加、删除vuex投注数据公共方法
    AddDelete: function(id, home, guest, name, odds, condition, odds_only) {
      let isAdd = true;
      let bettingInfo = {
        id,
        home_team: home,
        guest_team: guest,
        name,
        odds,
        condition,
        ganame: "concede_size",
        score: this.score,
        bettingTime: "",
        odds_only
      };
      let matchList = this.$store.getters.getBetting;
      if (this.thisNum != 10000) {
        //删除vuex投注数据
        matchList[this.thisNum].data.forEach((res, index) => {
          if (res.id == id) {
            matchList[this.thisNum].data.splice(index, 1);
            this.$store.dispatch("BETTING", matchList);
            isAdd = false;
          }
        });
        //添加vuex投注数据
        if (isAdd) {
          matchList[this.thisNum].data.push(bettingInfo);
          this.$store.dispatch("BETTING", []);
          this.$store.dispatch("BETTING", matchList);
          if (this.$store.getters.getIsBetting) return false;
          this.$store.dispatch("ISBETTING", true);
        }
      } else {
        //添加新的玩法赔率数据
        let obj = {
          title: "concede_size",
          data: [bettingInfo]
        };
        //判断vuex有误其它玩法数据
        if (matchList) {
          matchList.push(obj);
        } else {
          this.$store.dispatch("BETTING", [obj]);
        }
      }
      // console.log(this.$store.getters.getIsBetting);
      if (this.$store.getters.getIsBetting) return false;
      this.$store.dispatch("ISBETTING", true);
    },

    /*--------------------------------------------------------------------------------*/
    //修改当前页面样式公共方法
    modifyStyle: function($index,id, type) {
      // console.log(id, type);
      this.letBallData[$index].matchData.every(e => {
        let ret = false;
        if (type == "homeOdds") {
          e.oddsData[0].homeOdds.every((res, index) => {
            if (res.id == id) {
              this.$set(
                e.oddsData.homeOdds[index],
                "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.$set(
                e.oddsData[0].guestOdds[index],
                "isTrue",
                res.isTrue ? false : true
              );
              ret = true;
              return false;
            }
            return true;
          });
        }
        if (ret) {
          return false;
        } else {
          return true;
        }
      });
    },
    /*--------------------------------------------------------------------------------*/
    // 修改投注样式
    isBetting($index,id, home, guest, name, odds, condition, odds_only, type) {
      this.index = $index;
      console.log(this.letBallData);
      if (this.letBallData) {
        //处理vuex里面数据
        this.AddDelete(id, home, guest, name, odds, condition, odds_only);
        //处理当前页面样式
        this.modifyStyle($index,id, type);
      }
    },

    dataGroup: function(data, i) {
      let homeOdds = [],
        guestOdds = [];
      let A, B, C, D;
      // console.log('aaaaaa',data)
      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);
                }
              });
            }
            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);
        }
      });

      this.letBallData[i] = data;
      // console.log("data", this.letBallData);
    },
    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.isWindow = true;
    },
    // 点击事件确认选中
    isclick(index, num) {
      console.log(this.letBallData);
      if (this.$store.getters.getIsBetting == true) {
        return false;
      }

      this.$store.dispatch("ISBETTING", true);
    }
  },
  /**
   * 计算属性
   */
  computed: {
    getInfo: function() {
      // 监听vuex状态值的改变
      this.goMatchInfo();

      return {
        game_code: this.$store.getters.getBallId,
        type_code: this.$store.getters.getActivity
      };
    },
    IsWindow: 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) {
      if (
        this.$store.getters.getActivity == "StSoon" ||
        this.$store.getters.getActivity == "StRollBall"
      ) {
        if (this.isAjax) {
          this.getAjax(obj.game_code, obj.type_code);
        }
      }
      if (obj.game_code == "wq") {
        this.rShow = false;
      } else {
        this.rShow = true;
      }
    },
    /*--------------------------------------------------------------------------------*/
    // 监听投注框开关
    IsWindow(val) {
      console.log(val);
      this.isWindow = val;
    },
    // 监听滚动状态变化赋值滚动
    getscorllcode(val) {
      this.scorll = val;
    },
    getDeleteType(val) {
      let flag = true;
      // 下标问题
      this.letBallData.matchData.forEach(e => {
        if (val == "all") {
          e.oddsData.guestOdds.forEach(data => {
            this.$set(data, "isTrue", false);
          });
          e.oddsData.homeOdds.forEach(data => {
            this.$set(data, "isTrue", false);
          });
        } else {
          let showData = true;
          e.oddsData.guestOdds.forEach(data => {
            if (data.id == val) {
              this.$set(data, "isTrue", false);
              showData = false;
            }
          });
          if (showData) {
            e.oddsData.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() {
    this.activity =  this.$store.getters.getActivity;
    let _this = this;
      // 获取是否滑动信息
    if (this.$public.getCache("box_size") == 1) {
      this.isshrink = true;
    }
    //是否展示投注框
    if (this.$store.getters.getIsBetting) {
      this.isWindow = true;
    }
    //获取vuex玩法已投注相对应的数据
    let getBetting = this.$store.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(
        _this.$store.getters.getBallId,
        _this.$store.getters.getActivity
      );
      if (!_this.timers) {
        clearInterval(timing);
      }
    });
    this.getAjax(
      this.$store.getters.getBallId,
      this.$store.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.44rem;
  /* 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 {
  /* height: 2.9rem;  */
}
.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 {
  padding: 0 0.32rem;
  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 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footBox .box {
  width: 33%;
  text-align: center;
}
/* 让球&大小 */
.letBallBox {
  padding: 0 0.32rem;
  height: 0.88rem;
  font-size: 0.28rem;
  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 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-top: 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: 2px solid #cecece;
  border-radius: 0.1rem;
  flex-wrap: wrap;
}
.active {
  background: #e4e4e4;
}
/* 模态框样式 */
.BettingWindow {
  z-index: 10000;
  position: fixed;
  top: 0;
  width: 100%;
}
/* 后加 */
.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 {
  height: 2rem;
  padding: 0.1rem 0.1rem 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;
}
</style>