sport_pc/.svn/pristine/cc/ccb40438df5466da8b5e9155833aac8a1afed68f.svn-base

<template>
  <div>
    <div v-if="noData">
      <NotOpend :title="this.info"/>
    </div>
    <!-- 足球 -->
    <!-- 让球&大小 -->
    <div class="match" v-if="isShow && wq_show && zlBallShow">
      <div v-for="(item,$index) in letBallData" :key="$index" class="mg">
        <div class="row allAlignment haderBox center">
          <span>{{item.leagueName}}</span>
          <div class="row Match-title-num">
            <span>{{item.matchNum}}</span>
          </div>
        </div>
        <div class="Match-box">
          <div
            v-for="(itemList,index) in item.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 > 0">{{itemList.wait_time}}分钟</span>
                <span class="texttop" v-else-if="activity == 'StSoon' && itemList.wait_time < 0">--分钟</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 class="Match-bottom-right">
                  <!-- 主队 -->
                  <div class v-for="(items,indexs) in itemList.oddsData[0]" :key="indexs" :class="items.odds == 0?'locking':''" >
                    <div v-if="items.odds ">
                      <div class v-if="items.odds_code.startsWith('concede')">
                        <div>
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="letballHome"
                          v-if="items.odds_code.endsWith('home')"
                          @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,item.lg_id,'让球')"
                        >
                          <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;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"><img>
                        </div>
                      </div>
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="letballGuest"
                          v-if="items.odds_code.endsWith('guest')"
                          @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,item.lg_id,'让球')"
                        >
                          <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;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"><img>
                        </div>
                      </div>
                      <div
                        v-if="items.odds_code.startsWith('goal')"
                        class="row bigSmall"
                        @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,item.lg_id,'大小')"
                      >
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="bigHome"
                          v-if="items.odds_code.endsWith('big')"
                        >
                          <div style="color: rgb(247, 102, 73);" class="stardBig" v-if="items.odds > 0"> 
                            <span class="bigSmall">大</span> 
                            <span v-if="items.condition !='大'">{{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;margin-top:0.1rem;" 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('small')"
                          @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,item.lg_id,'大小')"
                        >
                          <div style="color: rgb(247, 102, 73); "  class="stardBig" v-if="items.odds > 0">
                            <span class="bigSmall">小</span>
                            <span v-if="items.condition !='小'">{{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;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"><img>
                        </div>
                      </div>
                                            <div
                        v-if="items.odds_code.startsWith('total')"
                        class="row bigSmall"
                        @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,item.lg_id,'大小')"
                      >
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="bigHome"
                          v-if="items.odds_code.endsWith('big')"
                        >
                          <div style="color: rgb(247, 102, 73);" class="stardBig"> 
                            <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;margin-top:0.1rem;" 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('small')"
                          @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,item.lg_id,'大小')"
                        >
                          <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;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"><img>
                        </div>
                      </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,idx) in item.matchData"
          :key="idx"
          @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 > 0">{{itemList.wait_time}}分钟</span>
                <span class="texttop" v-else-if="activity == 'StSoon' && itemList.wait_time < 0">--分钟</span>
              </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" style="position:relative">
              <div
                class="box row allAlignment bottom-box center"

                v-for="(items,i) in itemList.oddsData[1]"
                :key="i"
                v-if="items != null"
              >
                <div
                v-if="items.condition == 1"
                  class="item-center bottom-num stardLeft"
                  :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                  @click.stop="isClick($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,'capot',items.p_code,item.lg_id,'1X2')"
                >
                  <p style="color:#eb921e">{{items.condition}}</p>
                  <p>{{items.odds}}</p>
                </div>
                                <div
                v-if="items.condition == 'x'"
                  class="item-center bottom-num stardCenter"
                  :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                  @click.stop="isClick($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,'capot',items.p_code,item.lg_id,'1X2')"
                >
                  <p style="color:#eb921e">{{items.condition}}</p>
                  <p>{{items.odds}}</p>
                </div>
                                <div
                v-if="items.condition == 2"
                  class="item-center bottom-num stardRight"
                  :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                  @click.stop="isClick($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,'capot',items.p_code,item.lg_id,'1X2')"
                >
                  <p style="color:#eb921e">{{items.condition}}</p>
                  <p>{{items.odds}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 篮球 -->
    <div class="match" v-if="isShow && wq_show && !zlBallShow">
      <div v-for="(item,$index) in letBallData" :key="$index" class="mg">
        <div class="row allAlignment haderBox center">
          <span>{{item.leagueName}}</span>
          <div class="row Match-title-num">
            <span>{{item.matchNum}}</span>
          </div>
        </div>
        <div class="Match-box">
          <div
            v-for="(itemList,index) in item.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 > 0">{{itemList.wait_time}}分钟</span>
                <span class="texttop" v-else-if="activity == 'StSoon' && itemList.wait_time < 0">--分钟</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 class="Match-bottom-right">
                  <!-- 主队 -->
                  <div class  v-for="(items,idx) in itemList.oddsData[0]" :key="idx">
                    <div v-if="items != null">
                      <div class v-if="items.odds_code.startsWith('concede')">
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="letballHome"
                          v-if="items.odds_code.endsWith('home')"
                          @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,'concede',items.p_code,items.status,item.lg_id,'让球')"
                        >
                         <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('guest')"
                          @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,'concede',items.p_code,items.status,item.lg_id,'让球')"
                        >
                         <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 class="row bigSmall" v-if="items.odds_code.startsWith('total')">
                      <div
                        :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                        class="bigHome"
                        v-if="items.odds_code.endsWith('big')"
                        @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,'total_size',items.p_code,items.status,item.lg_id,'大小')"
                      >
                        <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.endsWith('small')"
                        @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,'total_size',items.p_code,items.status,item.lg_id,'大小')"
                      >
                        <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>
          </div>
        </div>
      </div>
    </div>

    <!-- 独赢盘 -->
    <div class="match" v-if="!isShow && ishow && wq_show">
      <div v-for="(item,$index) in letBallData" :key="$index" class="mg">
        <div class="row allAlignment letBallBox center">
          <span>{{item.leagueName}}</span>
          <div class="row Match-title-num">
            <span>{{item.matchNum}}</span>
          </div>
        </div>
        <div class="Match-box">
          <div
            v-for="(itemList,index) in item.matchData"
            :key="index"
            class="Match-box"
            @click="matchInfo(itemList.match_id)"
          >
            <div class="row allAlignment Match-box-top">
              <div class="Match-box-top-left">
                <span class="texttop" v-if="activity == 'StRollBall'">{{itemList.a_time}}</span>
                 <span class="texttop" v-if="activity == 'StSoon' && itemList.wait_time > 0">{{itemList.wait_time}}分钟</span>
                <span class="texttop" v-else-if="activity == 'StSoon' && itemList.wait_time < 0">--分钟</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>
              </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 class="Match-bottom-right" style="width:1.3rem;">
                  <!-- 主队 -->
                  <div class="capotBox">
                    <div
                      class="Match-list-left"
                      v-for="(items,indexs) in itemList.oddsData[1]"
                      :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,'capot',items.p_code,items.status,item.lg_id,'独赢盘')"
                    >
                      <div :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}" class="column center">
                        <span style="color:#f76649">{{items.condition}}</span>
                        <span>{{items.odds}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 如过是网球则显示 -->
    <div class="match" v-if="isShow && !wq_show">
      <div v-for="(item,$index) in letBallData" :key="$index" class="mg">
        <!-- <div v-for="items in list[index]" :key="items.id"> -->
        <div class="row allAlignment letBallBox center">
          <span>{{item.leagueName}}</span>
          <div class="row Match-title-num">
            <span>{{item.matchNum}}</span>
          </div>
        </div>
        <div class="Match-box">
          <div
            v-for="(itemList,index) in item.matchData"
            :key="index"
            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 > 0">{{itemList.wait_time}}分钟</span>
                <span class="texttop" v-else-if="activity == 'StSoon' && itemList.wait_time < 0">--分钟</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 class="Match-bottom-right">
                  <!-- 主队 -->
                  <div class v-for="(items,indexs) in itemList.oddsData" :key="indexs">
                    <div v-if="items.odds">
                      <div class v-if="items.odds_code.startsWith('kemp')">
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="letballHome"
                          v-if="items.odds_code.endsWith('home')"
                          @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,'kemp',items.p_code,items.status,item.lg_id,'独赢盘')"
                        >
                          <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;margin-top:0.1rem;" 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('guest')"
                          @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,'kemp',items.p_code,items.status,item.lg_id,'独赢盘')"
                        >
                          <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;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"><img>
                        </div>
                      </div>
                      <div
                        v-if="items.odds_code.startsWith('dishes')"
                        class="row bigSmall"
                        @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,'dishes_home',items.p_code,items.status,item.lg_id,'让盘')"
                      >
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="bigHome"
                          v-if="items.odds_code.endsWith('guest')"
                        >
                          <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;margin-top:0.1rem;" 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('home')"
                          @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,'dishes_home',items.p_code,items.status,item.lg_id,'让盘')"
                        >
                          <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;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"><img>
                        </div>
                      </div>
                    </div>
                  </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: [], //vuex里面玩法投注数据
      thisNum: 10000, //vuex里面
      index: "", //
      data: "", //玩法赔率数据源
      getIsShow: true,
      score: "0", //比分
      actydy: "", // 切换独赢状态BUG
      ball: this.$store.getters.getBallId, // 球类bm
      zlBallShow: true, //显示足球还是篮球
      previousStorage:[],
      wqPreviousStorage :[]
    };
  },
  /**
   * 函数方法
   */
  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() {
      let ball = this.$store.getters.getBallId;
      // this.$store.dispatch("GETSHOW", true);
      Bus.$on("show", data => {
        this.isShow = data;
        if (this.isShow == false && this.ishow == true) {
          this.actydy = true;
        } else {
          this.actydy = false;
        }
        // 暂时注释，有BUG
        if (ball == "wq" || ball == "zq") {
        
        } else {
          
          // for(var i = 0; i < this.letBallData.length; i++){
          //   this.letBallData[i].matchData.forEach(val =>{
          //     // console.log('val',val)
          //     if(val.oddsData[0].homeOdds || val.oddsData[0].guestOdds){
          //       val.oddsData = [];
          //     }
          //   })
          //   this.dataGroup(this.letBallData[i],i)
          // }
        }
      });
    },
    getAjax: function(game_code, type_code) {
      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(this.letBallData);
            // }
            //滚球比赛时间倒计时
            if (this.activity == "StRollBall" && this.ball == 'zq') {
              let _this = this;
              _this.letBallData.forEach(val => {
                val.matchData.forEach(e => {
                  if(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;
                      });
                    }
                  }
                });
              });
            }
          } else {
            //  是否显示组件
            this.noData = true;
            //console.log('data',this.noData)
            // 每次更新数据没有数据时则置空。
            this.letBallData = [];
          }
        });
      let _this = this;
      setTimeout(() => {
        _this.$store.dispatch("GETSHOW", false);
      }, 1000);
    },
    /*--------------------------------------------------------------------------------*/
    // 添加、删除vuex投注数据公共方法
    AddDelete: function(array, $index, type) {
      //console.log('22233',array,type);
      let bettingInfo = array;
      let isAdd = true,isNew=true;
      let matchList = this.$store.getters.getBetting;
      let ball = this.$store.getters.getBallId;
            //添加新的玩法赔率数据
      let obj = {
        title:bettingInfo.p_code,
        data: [bettingInfo]
      };
      if(matchList != null){
        for(let i = 0; i < matchList.length;i++){
          if(matchList[i].title == bettingInfo.p_code){
            //删除vuex投注数据
            // console.log(matchList[i].data)
            matchList[i].data.forEach((res, index) => {
              
              // console.log(res.id,id)
              if (res.id == array.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, array.id,type);
              }
            });
            //添加vuex投注数据
            if (isAdd){ 
              isNew = false;
              if (this.$store.getters.getLimit * 1 >= 10) return false;
              //处理当前页面样式
              this.modifyStyle($index, array.id, type);
              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, array.id, type);
          if (this.$store.getters.getIsBetting == "100") return false;
          this.$store.dispatch("ISBETTING", "100");
        }
      }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) {
      let ball = this.$store.getters.getBallId;
      this.letBallData[$index].matchData.every((e, i) => {
        let ret = false;
              if(ball == 'lq'){
               if(type == 'concede'){
                 e.oddsData[0].forEach((res,index) =>{
                   if(res != null){
                     if(res.id == id){
                         this.$forceUpdate();
                         this.$set(res,'isTrue',res.isTrue ? false : true)
                     }
                   }
                 })

               }else if(type =='total_size'){
                 e.oddsData[0].forEach((res,index) =>{
                  if(res.id == id){
                   // console.log('id',res.id,id)
                      this.$forceUpdate();
                      this.$set(res,'isTrue',res.isTrue ? false : true)
                  }
                 })
               }else if(type == 'capot'){
                 e.oddsData[1].forEach((res,index) =>{
                   if(res.id == id){
                      this.$forceUpdate();
                     this.$set(res,'isTrue',res.isTrue ? false : true)
                   }
                 })
               }
               
      }else{
        if (type == "homeOdds") {
          e.oddsData[0].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].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 == "capot") {
          e.oddsData[1].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 == 'kemp'){
          e.oddsData.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 == 'dishes_home'){
          e.oddsData.forEach((res,index) =>{
            if(res.id == id){
              this.$forceUpdate();
              this.$set(res,'isTrue',res.isTrue ? false : 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,
      lg_id,
      play_name
    ) {

       let ball = this.$store.getters.getBallId;
       let bettingInfo = {};
       if(odds > 0){  
        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,
        score: this.score,
        bettingTime: "",
        odds_only,
        lg_id
      };
      
      this.AddDelete(bettingInfo, $index, type);
        if (this.$store.getters.getLimit * 1 >= 10) {
        this.$dialog.alert({ mes: "你的注单已达到上限啦!" });
      }
       }


    },

    /*--------------------------------------------- */
    //让球大小数据组合
    dataGroup: function(data) {
      let ball = this.$store.getters.getBallId;
      data.forEach(item =>{
        item.matchData.forEach((column, index) => {
            if (this.$store.getters.getBallId == "wq") {
              column.oddsData.forEach(val =>{
                if(this.betting.length > 0){
                    this.betting.forEach(e => {
                      e.forEach(item =>{
                      if (val.id == item.id) {
                        this.$set(val, "isTrue", true);
                      }
                      })
                    });
                }
              })
            }
             else {
                if(Array.isArray(column.oddsData[1]) == true){
                  column.oddsData[1].forEach(val => {
                    if (this.betting.length >0) {
                      this.betting.forEach(e => {
                        e.forEach(item =>{
                          if (val.id == item.id) {
                          this.$forceUpdate();
                          this.$set(val, "isTrue", true);
                        }
                        })
                      });
                    }
                  });
                }
                if(Array.isArray(column.oddsData[0]) == true){
                  column.oddsData[0].forEach(val => {
                    if(val != null){
                      if (this.betting.length >0) {
                        this.betting.forEach(e => {
                          e.forEach(item =>{
                          if (val.id == item.id) {
                             this.$forceUpdate();
                            this.$set(val, "isTrue", true);
                          }
                          })
                        });
                      }
                    }
                  });
            }
          }
        });

      })
      // 数据更新切换样式
      let  storage = this.previousStorage;
      let  wqStorage = this.wqPreviousStorage;
      // console.log('a',storage)
      // console.log('222',storage)
      if(storage && storage != null && storage != '' && storage.length > 0 ){
        if(ball == 'zq' || ball == 'lq' || ball == 'bq'){
          // let dataa = data;
          data.forEach(itemList =>{
            itemList.matchData.forEach((e,idx) =>{
              e.oddsData.forEach(item =>{
                if(item.length > 0){
                  item.forEach(list =>{
                    if(list != null){
                      storage.forEach((a,i) =>{
                        a.forEach(b =>{ 
                          b.forEach(k =>{
                            if(k != null){
                              if(list.id == k.id){
                                if(list.odds > k.odds){
                                  // console.log("1")
                                  list.change = 'add'
                                }else if(list.odds < k.odds){
                                  // console.log("2")
                                  list.change = 'red';
                                }
                                else if(list.odds == k.odds){  
                                  // console.log("3")
                                  list.change = '';
                                }
                                // b.splice(i,1)
                              }
                            }
                          })
                        })
                        // a.splice(i,1)
                      })
                    }
                  })
                }
              // item.splice(idx,1)
              })
            })
          })
        }
      }else if(wqStorage && wqStorage != null && wqStorage != '' && wqStorage.length > 0 ){
        if(ball == 'wq'){
          data.forEach(list =>{
            list.matchData.forEach(e =>{
              e.oddsData.forEach(item =>{
                wqStorage.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.wqPreviousStorage = [];

      if(ball =='lq' || ball =='zq' || ball =='bq'){
        data.forEach(list =>{
          list.matchData.forEach(k =>{
            this.previousStorage.push(k.oddsData)
          })

        })
      }else{
          data.forEach(res =>{
            res.matchData.forEach(k =>{
                this.wqPreviousStorage.push(k.oddsData)
            })
          })
      }
      this.$store.dispatch('GETGAMERATIO',data)
      // console.log("处理数据", this.letBallData); 
    },

    /*---------------------------------------------*/
    //
    isClick(
      $index,
      match_id,
      id,
      home,
      guest,
      name,
      odds,
      condition,
      odds_only,
      odds_code,
      type,
      p_code
    ) {
      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: "1X2",
        score: this.score,
        bettingTime: "",
        odds_only
      };
      this.AddDelete(bettingInfo, $index, type);
      if (this.$store.getters.getLimit * 1 >= 10) {
        this.$dialog.alert({ mes: "你的注单已达到上限啦!" });
      }
    },

    /*---------------------------------------------*/
    //
    bettingChange() {
      // this.isBettingWindow = '100';
    }
    /*---------------------------------------------*/
  },
  /**
   * 计算属性
   */
  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 getBetting = this.$store.getters.getBetting;
    // console.log('111',getBetting)
    this.betting = [];
    if(getBetting){
      if(obj.game_code == 'zq'){
        getBetting.forEach((e,index) =>{
          if('concede' == e.title || 'goal_size' == e.title || 'capot' == e.title){
            this.betting.push(e.data);
          }
        })
        // console.log('zq',this.betting)
      }else if(obj.game_code == 'lq'){
        getBetting.forEach((e,index) =>{
          if('concede' == e.title || 'total_size' == e.title){
            this.betting.push(e.data);
          }
        })
      }else if(obj.game_code == 'bq'){
        getBetting.forEach((e,index) =>{
          if('capot' == e.title || 'concede' == e.title || 'total_size' == e.title){
            this.betting.push(e.data);
          }          
        })
      }else if(obj.game_code == 'wq'){
        getBetting.forEach((e,index) =>{
          if('dishes' == e.title || 'kemp' == e.title){
            this.betting.push(e.data);
          }
        })
      }
    }        



      //console.log("obj.game_code", obj.game_code);
      let getActivity = this.$store.getters.getActivity;
      this.goMatchInfo();
      // if (getActivity == "StSoon" || getActivity == "StRollBall") {
      // if (this.isAjax) {
      this.$store.dispatch("GETSHOW", true);
      this.letBallData = [];
      this.getAjax(obj.game_code, obj.type_code);
      // }
      // }
      if (obj.game_code == "zq") {
        this.zlBallShow = true;
      } else if (obj.game_code == "lq") {
        this.zlBallShow = false;
      }
      if (obj.game_code == "lq" || obj.game_code == "bq") {
        this.ishow = true;
      }
      if (obj.game_code == "wq") {
        //this.rShow = false;
        this.isShow = true;
        this.wq_show = false;
      } else {
        //this.rShow = true;
        this.wq_show = true;
      }
    },

    /*-------------------------------------*/
    // 监听投注框开关
    getIsBetting(val) {
      this.isBettingWindow = val;
    },
    getDeleteType(val) {
      let flag = true;
      // 下标问题
      let ball = this.$store.getters.getBallId;
      //("matchData", this.letBallData);
      this.letBallData.forEach((item, index) => {
        //console.log("item", item);
        item.matchData.forEach(e => {
          if (val == "all") {
              if(ball == 'lq'){
                e.oddsData[0].forEach(data =>{
                  this.$set(data, "isTrue", false);
                })
                // e.oddsData[0].total_size.forEach(data =>{
                //   this.$set(data, "isTrue", false);
                // })
              }else if(ball == 'wq'){
                e.oddsData.forEach(data =>{
                  this.$set(data,'isTrue',false);
                })
              }
              else{
            e.oddsData[0].forEach(data => {
              this.$set(data, "isTrue", false);
            });
            e.oddsData[0].forEach(data => {
              this.$set(data, "isTrue", false);
            });
            e.oddsData[1].forEach(data => {
              this.$set(data, "isTrue", false);
            });
              }

          } else {
            let showData = true;
            if(ball == 'lq'){
            e.oddsData[0].forEach(data => {
              if (data.id == val) {
                this.$set(data, "isTrue", false);
                showData = false;
              }
            });
            // e.oddsData[0].total_size.forEach(data => {
            //   if (data.id == val) {
            //     this.$set(data, "isTrue", false);
            //     showData = false;
            //   }
            // });
                 if (showData) {
              e.oddsData[0].forEach(data => {
                if (data.id == val) {
                  this.$set(data, "isTrue", false);
                }
              });
              //  e.oddsData[0].total_size.forEach(data => {
              //   if (data.id == val) {
              //     this.$set(data, "isTrue", false);
              //   }
              // });
            }
            }else if(ball == 'wq'){
                e.oddsData.forEach(data =>{
                  this.$set(data,'isTrue',false);
                })
              }
            else{
             e.oddsData[0].forEach(data => {
                if (data.id == val) {
                  this.$set(data, "isTrue", false);
                  showData = false;
                }
              });
              if (this.isShow == false && this.$store.getters.getBallId == "zq" || ball == 'bq') {
                e.oddsData[1].forEach(data => {
                  if (data.id == val) {
                    this.$set(data, "isTrue", false);
                    showData = false;
                  }
                });
              }
                  if (showData) {
                e.oddsData[0].forEach(data => {
                  if (data.id == val) {
                    this.$set(data, "isTrue", false);
                  }
                });
              }
            }
          }
        });
      });
    },
    /*--------------------------------------------------------------------------------*/  
    /*--------------------------------------------------------------------------------*/
  },
  mounted() {
    // 调用bus传值
    this.goMatchInfo();
    //console.log("ssa", 123);
    this.activity = this.$store.getters.getActivity;
    let _this = this;
    let getters = this.$store.getters;
    if(getters.getBallId == 'wq'){
      this.wq_show = false;
    }
    // 获取是否滑动信息
    if (this.$public.getCache("box_size") == 1) {
      this.isshrink = true;
    }
    //是否展示投注框
    if (getters.getIsBetting == "100") {
      this.isBettingWindow = 100;
    }
    //获取vuex玩法已投注相对应的数据
    let getBetting = this.$store.getters.getBetting;
    let ball = this.$store.getters.getBallId;
    if(getBetting){
      if(ball == 'zq'){
        getBetting.forEach((e,index) =>{
          if('concede' == e.title || 'goal_size' == e.title || 'capot' == e.title){
            this.betting.push(e.data);
          }
        })
      }else if(ball == 'lq'){
        getBetting.forEach((e,index) =>{
          if('concede' == e.title || 'total_size' == e.title){
            this.betting.push(e.data);
          }
        })
      }else if(ball == 'bq'){
        getBetting.forEach((e,index) =>{
          if('capot' == e.title || 'concede' == e.title || 'total_size' == e.title){
            this.betting.push(e.data);
          }          
        })
      }else if(ball == 'wq'){
        getBetting.forEach((e,index) =>{
          if('dishes' == e.title || 'kemp' == e.title){
            this.betting.push(e.data);
          }
        })
      }
    }
    if (this.getIsShow) {
      this.$store.dispatch("GETSHOW", true);
      this.getIsShow = false;
    }
    this.getAjax(ball,this.activity);
    this.$public.ajaxTimerFun(function(timing) {
      if (_this.timers) {
        _this.getAjax(getters.getBallId, getters.getActivity);
      } else {
        clearInterval(timing);
      }
    }, 1000 * 10);

  },
  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: 0.1rem 0.32rem;
  background: #f8f8f8;
}
.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;
}
.noPd {
  padding: 0;
}
.noBox {
  padding: 0;
  background: #f4f4f4;
}
.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 {
  margin-top: .05rem;
  padding: 0 0.32rem;
  height: 0.88rem;
  font-size: 0.32rem;
  background: #f8f8f8;
}
.main-box {
  height: 0.9rem;
  font-size: 0.24rem;
}
.bottom-box {
  height: 1.1rem;
  background: #f8f8f8;
  font-size: 0.24rem;
}
.bottom-box div {
  width: 1.07rem;
  height: 0.76rem;
  border: 1px solid #cecece;
  border-radius: 0.1rem;
  font-size: 0.24rem;
}
.bottom-num {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.bottom-num p{
  width: 100%;
  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;
  justify-content: space-around;
  align-items: center;
}
.footBox .box {
  display: flex;
  align-items: 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;
  position: relative;
}
.rbigMall{
  position: absolute;
  right: 0;
  top: 0.1rem;
}
.rbigMall .letballGuest{
  position: absolute;
  top: 0.81rem;
  right: 0;
}
.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: #f4f4f4;
}
.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;
}
/* 赔率 */
.Match-bottom-right {
  height: 2rem;
  width: 2.5rem;
  padding: 0.1rem 0.1rem 0 0.14rem;
  position: relative;
}
.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;
}
.capotBox{
  display: flex;
  flex-direction: column;
}
.ratio {
  width: 1rem;
  height: 0.76rem;
  border: 1px solid #cecece;
  margin-right: 0.14rem;
  border-radius: 0.1rem;
  margin: 0.06rem;
}
.locking{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.stardLeft{
  position: absolute;
  left: 0.2rem;
}
.stardCenter{
  position: absolute;
  left: 2.9rem;
}
.stardRight{
  position: absolute;
  right: 0.2rem;
}
.stardBig{
  display: flex;
  align-items: center;
  justify-content: center;

}
.stardBig .bigSmall{
  color: #9b9999;
}
.mg{
  margin-top: 0.2rem;
}
</style>