sport_pc/.svn/pristine/8b/8bd33d9d64fd5abb27a094628354b08b1ef51edb.svn-base

<template>
  <div>
    <div>
      <div class="Serch row item-center">
        <div class="Soccer-game row item-center">
          <div
            style=" display:flex;align-items:center;justify-content:center;"
            class="Soccer-game-title"
            @click="isreturn()"
          >
            <img class="box-img" src="../assets/st-imges/returnbox.png" />
            {{this.title}}
          </div>
        </div>

        <div class="Serch-box row item-center">
          <div class="Serch-box-home row item-center">
            <img class="Serch-box-img" src="../assets/st-imges/sousuo.png" />
            <input
              v-model="SerchValue"
              @keydown="serchchange(SerchValue)"
              @input="searchTeam(SerchValue)"
              class="Serch-box-input"
              type="text"
              placeholder="请输入球队名称"
            />
            <img
              class="Serch-box-del"
              @click="delinputvalue()"
              v-if="Serchchange==true"
              src="../assets/st-imges/del.png"
            />
          </div>
        </div>
      </div>
    </div>
    <div>
      <div v-for="(ite,$index) in data" :key="ite.id">
        <div class="row allAlignment box center">
          <span>{{ite.name_chinese}}</span>
          <div class="Match-title-num">
            <span>{{ite.count}}</span>
          </div>
        </div>
        <!-- 足球与篮球 -->
        <div
          v-if="ballSelt == 10"
          v-for=" (item,index) in ite.match_info"
          :key="index"
          class="Match-box"
        >
          <div class="row allAlignment Match-box-top">
            <div class="Match-box-top-left">
              <span>{{item.match_date}}</span>
              <span>{{item.match_time}}</span>
            </div>
            <div class="Match-box-top-right row">
              <span style="margin-right: .15rem;" class="Match-box-top-num">{{item.tag}}</span>
              <span style="margin-right: .15rem;">{{ ballType =='zq' ?'让球':'让分'}} </span>
              <span style="margin-right: .15rem;">大小</span>
            </div>
          </div>
          <div
            class="row allAlignment center"
            @click="matchInfo(item.match_id);"
            style="padding:0 .32rem"
          >
            <div class="column average name-box">
              <div>{{item.home_team}}</div>
              <div>{{item.guest_team}}</div>
            </div>
            <div class="Match-bottom-right">
              <!-- 主队 -->
              <div v-for="(items,indexs) in item.oddsData" :key="indexs">
                <!-- 让球 -->
                <div class v-if="items.odds_code.startsWith('co')">
                  <div
                    :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                    class="letballHome" v-if="items.odds_code.endsWith('h')"
                    @click.stop="isBetting($index,item,items,item.home_team,'让球')" >
                    <span style="color: rgb(247, 102, 73); " v-if="items.odds > 0" >{{items.condition}}</span>
                    <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''" >{{items.odds}}</span>
                    <img v-if="items.odds <= 0" style="width: 0.7rem;height: 0.5rem;" src="@/assets/st-imges/mima.png"/>
                    <img />
                  </div>
                  <div
                    :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                    class="letballGuest" v-if="items.odds_code.endsWith('g')"
                    @click.stop="isBetting($index,item,items,item.guest_team,'让球')">
                    <span style="color: rgb(247, 102, 73); " v-if="items.odds > 0">{{items.condition}}</span>
                    <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''" >{{items.odds}}</span>
                    <img
                      v-if="items.odds <= 0"
                      style="width: 0.7rem;height: 0.5rem;"
                      src="@/assets/st-imges/mima.png"
                    />
                    <img />
                  </div>
                </div>
                <!-- 足球 大小-->
                <div v-if="items.odds_code.startsWith('gs')" class="row bigSmall">
                  <div
                    :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                    class="bigHome"
                    v-if="items.odds_code.endsWith('b')"
                    @click.stop="isBetting($index,item,items,'大','大小')"
                  >
                    <div style="color: rgb(247, 102, 73); " class="stardBig" v-if="items.odds > 0">
                      <span class="bigSmall">大</span>
                      <span>{{items.condition}}</span>
                    </div>
                    <span
                      v-if="items.odds >0"
                      :class="items.condition == '' ? 'mg':''"
                    >{{items.odds}}</span>
                    <img
                      v-if="items.odds <= 0"
                      style="width: 0.7rem;height: 0.5rem;"
                      src="@/assets/st-imges/mima.png"
                    />
                    <img />
                  </div>
                  <div
                    :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                    class="bigGuest"
                    v-if="items.odds_code.endsWith('s')"
                    @click.stop="isBetting($index,item,items,'小','大小')"
                  >
                    <div style="color: rgb(247, 102, 73); " class="stardBig" v-if="items.odds > 0">
                      <span class="bigSmall">小</span>
                      <span>{{items.condition}}</span>
                    </div>
                    <span
                      v-if="items.odds >0"
                      :class="items.condition == '' ? 'mg':''"
                    >{{items.odds}}</span>
                    <img
                      v-if="items.odds <= 0"
                      style="width: 0.7rem;height: 0.5rem;"
                      src="@/assets/st-imges/mima.png"
                    />
                    <img />
                  </div>
                </div>

                <div v-if="items.odds_code.startsWith('tn')" class="row bigSmall">
                  <div
                    :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                    class="bigHome" v-if="items.odds_code == 'tnb'"
                    @click.stop="isBetting($index,item,items,'大','大小')" >
                    <div style="color: rgb(247, 102, 73); " class="stardBig" v-if="items.odds > 0">
                      <span class="bigSmall">大</span>
                      <span>{{items.condition}}</span>
                    </div>
                    <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''" >{{items.odds}}</span>
                    <img v-if="items.odds <= 0"style="width: 0.7rem;height: 0.5rem;" src="@/assets/st-imges/mima.png" />
                  </div>
                  <div
                    :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                    class="bigGuest" v-if="items.odds_code == 'tns'"
                    @click.stop="isBetting($index,item,items,'小','大小')">
                    <div style="color: rgb(247, 102, 73); " class="stardBig" v-if="items.odds > 0">
                      <span class="bigSmall">小</span>
                      <span>{{items.condition}}</span>
                    </div>
                    <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''" >{{items.odds}}</span>
                    <img v-if="items.odds <= 0" style="width: 0.7rem;height: 0.5rem;" src="@/assets/st-imges/mima.png"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 网球 -->
        <div
          v-if="ballSelt == 100"
          v-for=" (item,index) in ite.match_info"
          :key="index"
          class="Match-box"
        >
          <div class="row allAlignment Match-box-top wqMatch-box">
            <div class="Match-box-top-left">
              <span>{{item.match_date}}</span>
              <span style="color: rgb(253, 143, 38);">{{item.match_time}}</span>
              <!-- <div>三盘两胜</div> -->
            </div>
            <div class="Match-box-top-right row">
              <span
                style="margin-right: .15rem;height:100%;line-height:0.6rem;"
                class="Match-box-top-num"
              >{{item.tag}}</span>
              <span style="margin-right: .15rem;">独赢盘</span>
              <span style="margin-right: .15rem;">让盘</span>
            </div>
          </div>
          <div
            class="row allAlignment center"
            @click="matchInfo(item.match_id);"
            style="padding:0 .32rem"
          >
            <div class="column average name-box">
              <div>{{item.home_team}}</div>
              <div>{{item.guest_team}}</div>
            </div>
            <div class="Match-bottom-right">
              <!-- 主队 -->
              <div class v-for="(items,indexs) in item.oddsData" :key="indexs">
                <div class v-if="items.odds_code.startsWith('c')">
                  <div
                    :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                    class="letballHome"
                    v-if="items.odds_code == 'ch'"
                    @click.stop="isBetting($index,item,items,item.home_team,'独赢盘')"
                  >
                    <span
                      style="color: rgb(247, 102, 73); "
                      v-if="items.odds > 0"
                    >{{items.condition}}</span>
                    <span
                      v-if="items.odds >0"
                      :class="items.condition == '' ? 'mg':''"
                    >{{items.odds}}</span>
                    <img
                      v-if="items.odds <= 0"
                      style="width: 0.7rem;height: 0.5rem;"
                      src="@/assets/st-imges/mima.png"
                    />
                  </div>
                  <div
                    :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                    class="letballGuest"
                    v-if="items.odds_code == 'cg'"
                    @click.stop="isBetting($index,item,items,item.guest_team,'独赢盘')"
                  >
                    <span
                      style="color: rgb(247, 102, 73); "
                      v-if="items.odds > 0"
                    >{{items.condition}}</span>
                    <span
                      v-if="items.odds >0"
                      :class="items.condition == '' ? 'mg':''"
                    >{{items.odds}}</span>
                    <img
                      v-if="items.odds <= 0"
                      style="width: 0.7rem;height: 0.5rem;"
                      src="@/assets/st-imges/mima.png"
                    />
                  </div>
                </div>

                <!-- 让盘 -->
                <div
                  v-if="items.odds_code.startsWith('ld')"
                  class="row bigSmall"
                  @click.stop="isBetting($index,item,items,item.home_team,'让盘')"
                >
                  <div
                    :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                    class="bigHome"
                    v-if="items.odds_code == 'ldh'"
                  >
                    <span
                      style="color: rgb(247, 102, 73); "
                      v-if="items.odds > 0"
                    >{{items.condition}}</span>
                    <span
                      v-if="items.odds >0"
                      :class="items.condition == '' ? 'mg':''"
                    >{{items.odds}}</span>
                    <img
                      v-if="items.odds <= 0"
                      style="width: 0.7rem;height: 0.5rem;"
                      src="@/assets/st-imges/mima.png"
                    />
                    <img />
                  </div>
                  <div
                    :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                    class="bigGuest"
                    v-if="items.odds_code == 'ldg'"
                    @click.stop="isBetting($index,item,items,item.guest_team,'让盘')"
                  >
                    <span
                      style="color: rgb(247, 102, 73); "
                      v-if="items.odds > 0"
                    >{{items.condition}}</span>
                    <span
                      v-if="items.odds >0"
                      :class="items.condition == '' ? 'mg':''"
                    >{{items.odds}}</span>
                    <img
                      v-if="items.odds <= 0"
                      style="width: 0.7rem;height: 0.5rem;"
                      src="@/assets/st-imges/mima.png"
                    />
                    <img />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 棒球 -->
        <div
          v-if="ballSelt == 1000"
          v-for=" (item,index) in ite.match_info"
          :key="index"
          class="Match-box"
        >
          <div class="row allAlignment Match-box-top">
            <div class="Match-box-top-left">
              <span>{{item.match_date}}</span>
              <span>{{item.match_time}}</span>
            </div>
            <div class="Match-box-top-right row">
              <span style="margin-right: .15rem;" class="Match-box-top-num">{{item.tag}}</span>
              <span style="margin-right: .15rem;">独赢盘</span>
            </div>
          </div>
          <div
            class="row allAlignment center"
            @click="matchInfo(item.match_id);"
            style="padding:0 .32rem"
          >
            <div class="column average name-box">
              <div>{{item.home_team}}</div>
              <div>{{item.guest_team}}</div>
            </div>
            <div class="Match-bottom-right">
              <!-- 主队 -->
              <div class="row">
                <div class v-for="(items,indexs) in item.oddsData" :key="indexs">
                  <div v-if="items.odds_code.startsWith('c')" class="row bigSmall">
                    <div :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                      class="bigHome" v-if="items.odds_code == 'ch'"  @click.stop="isBetting($index,item,items,item.home_team,'独赢盘')">
                      <span style="color: rgb(247, 102, 73); " v-if="items.odds > 0" >{{items.condition}}</span>
                      <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''">{{items.odds}}</span>
                      <img v-if="items.odds <= 0" style="width: 0.7rem;height: 0.5rem;"  src="@/assets/st-imges/mima.png"/>
                    </div>
                    <div :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                      class="bigGuest" v-if="items.odds_code == 'cg'"
                      @click.stop="isBetting($index,item,items,item.guest_team,'独赢盘')">
                      <span style="color: rgb(247, 102, 73); " v-if="items.odds > 0">{{items.condition}}</span>
                      <span v-if="items.odds >0" :class="items.condition == '' ? 'mg':''" >{{items.odds}}</span>
                      <img v-if="items.odds <= 0" style="width: 0.7rem;height: 0.5rem;" src="@/assets/st-imges/mima.png" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <BettingWindow v-show="isBettingWindow == '100'" />
  </div>
</template>
<script>
import BettingWindow from "@/components/StBettingWindow";
import NotOpend from "@/components/StNotOpend";
import Loading from "@/components/StLoading";
export default {
  name: "entryForm",
  data() {
    return {
      SerchValue: "",
      Serchchange: false,
      title: this.$route.query.name, //标题
      data: "",
      game_code: this.$route.query.game_code, //球的类型别名
      lg_id: this.$route.query.lg_id, //获取联赛id
      isBettingWindow: "-1",
      thisNum: 10000,
      info: "没有相关联赛信息",
      noData: false, //没有数据为true
      betting: [], //vuex里面玩法投注数据
      timers: true,
      index: "",
      getIsShow: true,
      ballSelt: 0, // 当为10的时候为篮球，足球，100的时候为网球，1000的时候为棒球
      // 存储变色数据
      previousStorage: [],//
      ballType:'',//球类别 
    };
  },
  components: {
    BettingWindow,
    NotOpend,
    Loading
  },
  methods: {
    // 返回上一页
    isreturn() {
      history.go(-1);
    },

    /******************查询数据*******************/
    getmatchInfo(search) {
      this.$http
        .get(this.$ports.match.participateDtl, {
          game_code: this.game_code,
          code: this.$route.query.code,
          lg_id: this.lg_id,
          search
        })
        .then(res => {
          this.codeShow = false;

          if (res.data.status == 1) {
            // console.log(res.data.data)
            this.dataGroup(res.data.data);
            // console.log("参赛表单", res.data.data);
            // this.data = res.data.data;
          }
        });
      let _this = this;
      setTimeout(() => {
        _this.$store.dispatch("GETSHOW", false);
      }, 1000);
    },

    /*****************是否显示删除按钮***************/
    serchchange(val) {
      if (val.length >= 1) {
        this.Serchchange = true;
      } else {
        this.Serchchange = false;
      }
    },

    /********************查询球队*********************/
    searchTeam(val) {
      let getActivity = this.$store.getters.getActivity;
      let matchDate = this.$route.query.matchDate;
      if (val.length >= 1) {
        this.Serchchange = true;
      } else {
        this.Serchchange = false;
      }
      this.getmatchInfo(val);
    },
    //清空输入
    delinputvalue() {
      this.SerchValue = "";
      this.Serchchange = false;
      this.getmatchInfo("");
    },

    /****************添加、删除vuex投注数据公共方法*******************/
    AddDelete: function($index, item, items, name, play_name) {
      let match_odds = JSON.stringify(items);
      let isAdd = true,
        isNew = true;
      let matchList = this.$store.getters.getBetting;
      let bettingInfo = JSON.parse(match_odds);
      bettingInfo.home_team = item.home_team;
      bettingInfo.guest_team = item.guest_team;
      bettingInfo.lg_id = item.lg_id;
      bettingInfo.odds_id = items.id;
      bettingInfo.ballId = this.$store.getters.getBallId;
      bettingInfo.name = name;
      bettingInfo.play_name = play_name;
      //添加新的玩法赔率数据
      let obj = {
        title: bettingInfo.p_code,
        data: [bettingInfo]
      };

      //投注数据处理
      if (matchList != null) {
        let id = bettingInfo.id;
        for (let i = 0; i < matchList.length; i++) {
          if (matchList[i].title == bettingInfo.p_code) {
            //删除vuex投注数据
            matchList[i].data.forEach((res, index) => {
              // console.log(res.id,id)
              if (res.id == id) {
                matchList[i].data.splice(index, 1);
                this.$store.dispatch("SET_LIMIT", false);
                this.$store.dispatch("BETTING", []);
                this.$store.dispatch("BETTING", matchList);
                isAdd = false;
                isNew = false;
                //处理当前页面样式
                this.modifyStyle($index, id);
              }
            });
            //添加vuex投注数据
            if (isAdd) {
              isNew = false;
              if (this.$store.getters.getLimit * 1 >= 10) return false;
              //处理当前页面样式
              this.modifyStyle($index, id);
              matchList[i].data.push(bettingInfo);
              this.$store.dispatch("BETTING", []);
              this.$store.dispatch("BETTING", matchList);
              if (this.$store.getters.getIsBetting == "100") return false;
              this.$store.dispatch("ISBETTING", 100);
            }
            break;
          }
        }
        if (isNew) {
          matchList.push(obj);
          this.$store.dispatch("BETTING", []);
          this.$store.dispatch("BETTING", matchList);
          this.modifyStyle($index, id);
          if (this.$store.getters.getIsBetting == "100") return false;
          this.$store.dispatch("ISBETTING", "100");
        }
      } else {
        this.$store.dispatch("BETTING", [obj]);
        this.modifyStyle($index, id);
        if (this.$store.getters.getIsBetting == "100") return false;
        this.$store.dispatch("ISBETTING", "100");
      }
    },

    /*******************修改当前页面样式公共方法********************/
    modifyStyle: function($index, id, type = "") {
      // console.log($index,id, type)
      this.data[$index].match_info.every(e => {
        let ret = false;
        e.oddsData.every((res, index) => {
          if (res.id == id) {
            this.$set(res, "isTrue", res.isTrue ? false : true);
            ret = true;
            return false;
          }
          return true;
        });
      });
    },

    /******************修改投注样式******************/
    isBetting($index, item, items, name, play_name) {
      if (items.odds <= 0) return false;
      this.index = $index;
      if (this.data) {
        //处理vuex里面数据
        this.AddDelete($index, item, items, name, play_name);
        //处理当前页面样式
        // this.modifyStyle($index,id, type);
      }
    },

    /*******************跳转到赛事详情******************/
    matchInfo: function(id) {
      this.$router.push({
        path: "/StRollBallBettingPage",
        query: { gameCode: this.game_code, home: 1, name: this.title }
      });
      this.$store.dispatch("MACTH_ID", id);
    },
    /*--------------------------------------------------------------------------------*/
    /**
     * 赛事赔率玩法数据组合方法
     */
    dataGroup: function(data) {
      //console.log('数据',this.data)
      // let homeOdds = [],
      // guestOdds = [];
      let A, B, C, D;
      // console.log('daa',data)
      let ball = this.$store.getters.getBallId;
      data.forEach(i => {
        i.match_info.forEach((column, index) => {
          if (column.oddsData == null || column.oddsData.length == 0) {
          } else {
            column.oddsData.forEach(val => {
              if (this.betting.length > 0) {
                this.betting.forEach(e => {
                  e.forEach(item => {
                    if (val.id == item.id) {
                      val.isTrue = true;
                    }
                  });
                });
              }
            });
          }
        });
      });
      // console.log('ddddd',data)
      this.data = data;
      // console.log('data',this.data)
      //更新数据和上一次的数据匹配
      let storage = this.previousStorage;
      // console.log('storege',storage)
      if (storage && storage != null && storage.length > 0) {
        this.data.forEach(e => {
          e.match_info.forEach(k => {
            k.oddsData.forEach(item => {
              storage.forEach(a => {
                a.forEach(b => {
                  if (item.id == b.id) {
                    if (item.odds > b.odds) {
                      item.change = "add";
                    } else if (item.odds < b.odds) {
                      item.change = "red";
                    } else {
                      item.change = "";
                    }
                  }
                });
              });
            });
          });
        });
      }
      this.previousStorage = [];
      this.data.forEach(e => {
        e.match_info.forEach(k => {
          this.previousStorage.push(k.oddsData);
        });
      });
      this.$store.dispatch("GETGAMERATIO", this.data);
    }
  },
  /**
   * 计算属性
   */
  computed: {
    //获取投注框删除的投注信息
    getDeleteType() {
      return this.$store.getters.getDeleteType;
    },
    getIsBetting() {
      return this.$store.getters.getIsBetting;
    }
  },
  /**
   * 监听器
   */
  watch: {
    getIsBetting(val) {
      this.isBettingWindow = val;
    },
    // 监听删除投注
    getDeleteType(val) {
      let flag = true;
      this.data.forEach(e => {
        if (val == "all") {
          e.match_info.forEach(data => {
            data.oddsData.forEach((k, i) => {
              this.$set(k, "isTrue", false);
            });
            data.oddsData.forEach((k, i) => {
              this.$set(k, "isTrue", false);
            });
          });
        } else {
          let showData = true;
          e.match_info.forEach((res, index) => {
            res.oddsData.forEach((k, i) => {
              if (k.id == val) {
                this.$set(k, "isTrue", false);
                showData = true;
              }
            });
          });
          if (showData) {
            e.match_info.forEach(data => {
              data.oddsData.forEach(item => {
                if (item.id == val) {
                  this.$set(item, "isTrue", false);
                }
              });
            });
          }
        }
      });
    }
  },
  mounted() {
    this.$store.dispatch("GETSHOW", true);
    // 获取球类，判定状态
    let ball = this.$route.query.game_code;
    this.ballType = ball;
    // 是否展示投注框
    if (this.$store.getters.getIsBetting == "100") {
      this.isBettingWindow = "100";
    }
    //获取vuex玩法已投注相对应的数据
    let getBetting = this.$store.getters.getBetting;
    // if(getBetting){
    if (ball == "zq") {
      this.ballSelt = 10;
      if (getBetting) {
        getBetting.forEach((e, index) => {
          if ("concede" == e.title || "goal_size" == e.title) {
            this.betting.push(e.data);
          }
        });
      }
    } else if (ball == "lq") {
      this.ballSelt = 10;
      if (getBetting) {
        getBetting.forEach((e, index) => {
          if ("concede" == e.title || "total_size" == e.title) {
            this.betting.push(e.data);
          }
        });
      }
    } else if (ball == "bq") {
      this.ballSelt = 1000;
      if (getBetting) {
        getBetting.forEach((e, index) => {
          if ("capot" == e.title) {
            this.betting.push(e.data);
          }
        });
      }
    } else if (ball == "wq") {
      this.ballSelt = 100;
      if (getBetting) {
        getBetting.forEach((e, index) => {
          if ("dishes" == e.title || "kemp" == e.title) {
            this.betting.push(e.data);
          }
        });
      }
    }
    // }
    let _this = this;
    this.$public.ajaxTimerFun(function(timing) {
      if (_this.timers) {
        _this.getmatchInfo("");
      } else {
        clearInterval(timing);
      }
    }, 1000 * 10);
    // console.log("data", this.data);
    /*-----------------------*/
    this.getmatchInfo("");
  },
  beforeDestroy() {
    this.timers = false;
  }
};
</script>
<style scoped>
.Serch {
  height: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #363636;
  color: #fd8f26;
  font-family: "PingFang-SC-Regular";
  padding: 0 0.32rem;
}
.lock {
  background: #f4f4f4;
}
.Serch-box-input {
  width: 2rem;
  border: none;
  position: absolute;
  left: 0.5rem;
  top: 0.06rem;
}
/* .BettingWindow{
  z-index: 10000;
  position:fixed;
  top:0;
  width: 100%;
} */

.Serch-box-img {
  width: 0.3rem;
  height: 0.3rem;
  position: absolute;
  left: 0.1rem;
  top: 0.06rem;
}
.Serch-box-del {
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  right: 0.2rem;
}
.Serch-box-home {
  height: 0.44rem;
  width: 4.73rem;
  background: #e4e4e4;
  border-radius: 0.2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  position: relative;
}
.box-img {
  width: 0.37rem;
  height: 0.3rem;
  margin-right: 0.18rem;
}
.Soccer-game-title {
  display: flex;
  color: #f76649;
  align-items: center;
  width: 1.3rem;
  font-size: 0.3rem;
}
.Soccer-game-box {
  display: flex;
  left: -0.3rem;
  top: 0.2rem;
  background: #fff;
  background: #626262;
  color: #a6a6a6;
  height: 0.7rem;
  align-items: center;
}
.Soccer-game-src {
  width: 0.25rem;
  height: 0.25rem;
}
.box {
  padding: 0 0.32rem;
  color: #e1e1df;
  height: 0.88rem;
  font-size: 0.32rem;
  background: linear-gradient(to bottom, #999999, #6a6a6b);
}
.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;
}
.Match-box {
  /* height: 2.45rem; */
}
.name-box {
  width: 4rem;
  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;
  width: 2.5rem;
  padding: 0.1rem 0.1rem 0 0.14rem;
  position: relative;
}
.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,
.active i {
  color: #e1e1df !important;
}
.wqavg {
  width: 4.3rem;
}
div .wqMatch-box {
  /* height: 0.65rem;
  line-height: 0.3rem; */
}
/* 赔率 */

.letballHome,
.letballGuest,
.bigHome,
.bigGuest {
  width: 1.07rem;
  height: 0.76rem;
  border: 1px solid #e4e4e4;
  border-radius: 0.1rem;
  margin: 0.06rem 0.08rem;
  /* padding: 0.1rem 0; */
  /* margin: 0.06rem 0.6rem 0.06rem 0; */
  text-align: center;
}
.letballGuest {
  position: absolute;
  bottom: 0.19rem;
}
.bigHome span,
.bigGuest span,
.letballHome span,
.letballGuest span {
  display: block;
}
.bigHome {
  position: absolute;
  right: 0;
  top: 0.1rem;
}
.bigGuest {
  position: absolute;
  right: 0;
  top: 0.93rem;
}
.active span {
  color: #e1e1df !important;
}
.stardBig {
  display: flex;
  align-items: center;
  justify-content: center;
}
.stardBig .bigSmall {
  color: #9b9999;
}
.mg {
  margin-top: 0.2rem;
}
</style>