<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-26 10:58:22
 * @LastEditTime: 2019-08-27 18:43:34
 * @LastEditors: Please set LastEditors
 -->
<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
                    v-for="(items,indexs) in itemList.oddsData[0]"
                    :key="indexs" v-if="itemList.oddsData[0].length > 0"
                    :class="items.odds == 0?'locking':''"
                  >
                  <!-- <div v-if="items.odds "> -->
                      <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 column center"
                          v-if="items.odds_code.startsWith('coh') && items.odds > 0"
                          @click.stop="isBetting($index,itemList.home_team,itemList,'homeOdds',item.lg_id,'让球',items)"
                        > 
                          <span style="color: rgb(247, 102, 73); "
                          >{{items.condition}}</span>
                          <span >{{items.odds}}</span>
                        </div>
                        <div @click.stop="noBetting()" class="letballHome column center" v-if="items.odds_code.startsWith('coh') && items.odds <= 0">
                          <img
                            style="width: 0.7rem;height: 0.5rem;margin-top:0.1rem;"
                            src="@/assets/st-imges/mima.png"
                          />
                        </div>
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="letballGuest column center"
                          v-if="items.odds_code.startsWith('cog') && items.odds > 0"
                          @click.stop="isBetting($index,itemList.guest_team,itemList,'guestOdds',item.lg_id,'让球',items)"
                        >
                          <span style="color: rgb(247, 102, 73); ">{{items.condition}}</span>
                          <span >{{items.odds}}</span>
                        </div>
                        <div @click.stop="noBetting()"  class="letballHome column center" v-if="items.odds_code.startsWith('cog') && items.odds <= 0">
                          <img
                            style="width: 0.7rem;height: 0.5rem;margin-top:0.1rem;"
                            src="@/assets/st-imges/mima.png"
                          />
                        </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 column center" v-if="items.odds_code.startsWith('gsb') && items.odds > 0"
                          @click.stop="isBetting($index,'大',itemList,'homeOdds',item.lg_id,'大小',items)">
                          <div style="color: rgb(247, 102, 73);" class="stardBig" >
                            <span class="bigSmall">大</span>
                            <span v-if="items.condition !='大'">{{items.condition}}</span>
                          </div>
                          <span >{{items.odds}}</span>
                        </div>
                        <div @click.stop="noBetting()"  class="bigHome column center" v-if="items.odds_code.startsWith('gsb') && items.odds <= 0">
                          <img style="width: 0.7rem;height: 0.5rem;margin-top:0.1rem;"  src="@/assets/st-imges/mima.png"/>
                        </div>

                        <div :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="bigGuest column center" v-if="items.odds_code.startsWith('gss') && items.odds > 0"
                          @click.stop="isBetting($index,'小',itemList,'guestOdds',item.lg_id,'大小',items)"
                        >
                          <div  style="color: rgb(247, 102, 73); " class="stardBig">
                            <span class="bigSmall">小</span>
                            <span v-if="items.condition !='小'">{{items.condition}}</span>
                          </div>
                          <span >{{items.odds}}</span>
                        </div>
                        <div  v-if="items.odds_code.startsWith('gss') && items.odds <= 0 " class="bigGuest column center">
                          <img style="width: 0.7rem;height: 0.5rem;margin-top:0.1rem;"  src="@/assets/st-imges/mima.png"/>
                        </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" >
        <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>
                <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>
              </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 && items.odds > 0"
                  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.home_team,itemList,'capot',item.lg_id,'独赢',items)"
                >
                  <p style="color:#eb921e">{{items.condition}}</p>
                  <p>{{items.odds}}</p>
                  
                </div>
                <div @click.stop="noBetting()" v-if="items.condition == 1 && items.odds <= 0" class="bottom-num stardLeft">
                  <img style="width: 0.7rem;height: 0.5rem;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"/>
                </div>
                <div
                  v-if="items.condition == 'X' && items.odds > 0"guest_team
                  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,'capot',item.lg_id,'独赢',items)"
                >
                  <p style="color:#eb921e">{{items.condition}}</p>
                  <p>{{items.odds}}</p>
                </div>
                <div @click.stop="noBetting()"  v-if="items.condition == 'X' && items.odds <= 0" class="bottom-num stardCenter">
                  <img style="width: 0.7rem;height: 0.5rem;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"/>
                </div>
                <div
                  v-if="items.condition == 2 && items.odds > 0"
                  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.guest_team,itemList,'capot',item.lg_id,'独赢',items)"
                >
                  <p style="color:#eb921e">{{items.condition}}</p>
                  <p>{{items.odds}}</p>
                </div>
                <div @click.stop="noBetting()" v-if="items.condition == 2 && items.odds <= 0" class="bottom-num stardRight">
                  <img style="width: 0.7rem;height: 0.5rem;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"/>
                </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.wait_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;">{{ ballType == 'bq'?'让球':'让分'}}</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('co')">
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="letballHome column center"
                          v-if="items.odds_code.endsWith('coh') && items.odds > 0"
                          @click.stop="isBetting($index,itemList.home_team,itemList,'concede',item.lg_id,'让球',items)"
                        >
                          <span style="color: rgb(247, 102, 73); " >{{items.condition}}</span>
                          <span v-if="items.odds >0">{{items.odds}}</span>
                        </div>
                        <div @click.stop="noBetting()" v-if="items.odds_code.endsWith('coh') && items.odds <= 0" class="letballHome column center">
                          <img style="width: 0.7rem;height: 0.5rem;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"/>
                        </div>
                      
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="letballGuest column center"
                          v-if="items.odds_code.endsWith('cog') && items.odds > 0"
                          @click.stop="isBetting($index,itemList.guest_team,itemList,'concede',item.lg_id,'让球',items)"
                        >
                          <span style="color: rgb(247, 102, 73); ">{{items.condition}}</span>
                          <span >{{items.odds}}</span>
                        </div>
                        <div @click.stop="noBetting()" v-if="items.odds_code.endsWith('cog') && items.odds <= 0" class="letballGuest column center">
                          <img style="width: 0.7rem;height: 0.5rem;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"/>
                        </div>
                      </div>

                      <div class="row bigSmall" v-if="items.odds_code.startsWith('tn')">
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="bigHome column center" v-if="items.odds_code == 'tnb' && items.odds > 0"
                          @click.stop="isBetting($index,'大',itemList,'total_size',item.lg_id,'大小',items)"
                        >
                          <span v-if="items.odds > 0" style="color: rgb(247, 102, 73); ">{{items.condition}}</span>
                          <span v-if="items.odds > 0" >{{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"/>
                        </div>
                        <!-- <div @click.stop="noBetting()" v-if="items.odds_code == 'tnb' && items.odds <= 0" class="bigHome column center">
                          <img style="width: 0.7rem;height: 0.5rem;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"/>
                        </div> -->

                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="bigGuest column center" v-if="items.odds_code == 'tns'  && items.odds > 0"
                          @click.stop="isBetting($index,'小',itemList,'total_size',item.lg_id,'大小',items)"
                        >
                          <span style="color: rgb(247, 102, 73); "  >{{items.condition}}</span>
                          <span>{{items.odds}}</span>
                        </div>
                        <div @click.stop="noBetting()" v-if="items.odds_code == 'tns' && items.odds <= 0" class="bigGuest column center">
                          <img style="width: 0.7rem;height: 0.5rem;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"/>
                        </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,items.odds_code =='ch'?itemList.home_team :itemList.guest_team ,itemList,'concede',item.lg_id,'独赢盘',items)"
                    >
                      <div v-if="items.odds > 0"  class="column center"
                        :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                      >
                        <span style="color:#f76649">{{items.condition}}</span>
                        <span>{{items.odds}}</span>
                      </div>
                      <div @click.stop="noBetting()" v-else class="column center">
                        <img style="width: 0.7rem;height: 0.5rem;margin-top:0.1rem;" src="@/assets/st-imges/mima.png"/>
                      </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> -->
                <div v-if="activity == 'StRollBall' && itemList.result_mark">
                  <span v-if="itemList.result_mark.best == 3" class="texttop">三局两胜</span>
                  <span v-if="itemList.result_mark.best == 5" class="texttop">五局三胜</span>
                </div>
                <div v-if="activity == 'StSoon' && itemList.wait_time > 0">
                  <span class="texttop">{{itemList.match_process}}</span>
                  <span class="texttop">{{itemList.wait_time}}分钟</span>
                </div>
                <div v-else-if="activity == 'StSoon' && itemList.wait_time < 0">
                  <span class="texttop">{{itemList.match_process}}</span>
                  <span class="texttop">--分钟</span>
                </div>
              </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>
                  <span
                    class="texttop"
                    v-if="itemList.result_mark"
                  >{{itemList.result_mark.spot_C}}</span>
                  {{itemList.home_team}}
                </div>
                <div>
                  <span
                    v-if="itemList.result_mark"
                    class="texttop"
                  >{{itemList.result_mark.spot_H}}</span>
                  {{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('c')">
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="letballHome column center"
                          v-if="items.odds_code.endsWith('ch')"
                          @click.stop="isBetting($index,itemList.home_team,itemList,'kemp',item.lg_id,'独赢盘',items)"
                        >
                          <span
                            style="color: rgb(247, 102, 73); "
                            v-if="items.odds > 0"
                          >{{items.condition}}</span>
                          <span v-if="items.odds >0">{{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 column center"
                          v-if="items.odds_code.endsWith('cg')"
                          @click.stop="isBetting($index,itemList.guest_team,itemList,'kemp',item.lg_id,'独赢盘',items)"
                        >
                          <span
                            style="color: rgb(247, 102, 73); "
                            v-if="items.odds > 0"
                          >{{items.condition}}</span>
                          <span v-if="items.odds >0">{{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('ld')"
                        class="row bigSmall"
                        @click.stop="isBetting($index,itemList.home_team,itemList,'dishes_home',item.lg_id,'独盘',items)"
                      >
                        <div
                          :class="{active:items.isTrue,increased_color:items.change == 'add',reduce_color:items.change == 'red'}"
                          class="bigHome column center"
                          v-if="items.odds_code.endsWith('ldh')"
                        >
                          <span
                            style="color: rgb(247, 102, 73); "
                            v-if="items.odds > 0"
                          >{{items.condition}}</span>
                          <span v-if="items.odds >0">{{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 column center"
                          v-if="items.odds_code.endsWith('ldg')"
                          @click.stop="isBetting($index,itemList.guest_team,itemList,'dishes_guest',item.lg_id,'独盘',items)"
                        >
                          <span
                            style="color: rgb(247, 102, 73); "
                            v-if="items.odds > 0"
                          >{{items.condition}}</span>
                          <span v-if="items.odds >0">{{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 style="padding: 0 0.32rem;" class="row" v-if="itemList.result_mark">
              <div style="margin-right: 0.2rem;" v-if="itemList.result_mark.qs >=1 ">
                <span :class="{'texttop':itemList.result_mark.qs == 1}"
                >{{itemList.result_mark.sc_1th_C}} - {{itemList.result_mark.sc_1th_H}}</span>
              </div>
              <div style="margin-right: 0.2rem;" v-if="itemList.result_mark.qs >= 2">
                <span :class="{'texttop':itemList.result_mark.qs == 2}"
                >{{itemList.result_mark.sc_2th_C}} - {{itemList.result_mark.sc_2th_H}}</span>
              </div>
              <div style="margin-right: 0.2rem;" v-if="itemList.result_mark.qs >= 3">
                <span :class="{'texttop':itemList.result_mark.qs == 3}"
                >{{itemList.result_mark.sc_3th_C}} - {{itemList.result_mark.sc_3th_H}}</span>
              </div>
              <div style="margin-right: 0.2rem;" v-if="itemList.result_mark.qs >= 4">
                <span :class="{'texttop':itemList.result_mark.qs == 4}"
                >{{itemList.result_mark.sc_4th_C}} - {{itemList.result_mark.sc_4th_H}}</span>
              </div>
              <div style="margin-right: 0.2rem;" v-if="itemList.result_mark.qs >= 5">
                <span :class="{'texttop':itemList.result_mark.qs == 5}"
                >{{itemList.result_mark.sc_5th_C}} - {{itemList.result_mark.sc_5th_H}}</span>
              </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: [],
      ballType: "zq" //球类别
    };
  },
  /**
   * 函数方法
   */
  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;
      Bus.$on("show", data => {
        this.isShow = data;
        if (this.isShow == false && this.ishow == true) {
          this.actydy = true;
        } else {
          this.actydy = false;
        }
      });
    },
    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.letBallData.forEach(e => {
            e.matchData.forEach(i => {
              if(type_code == 'StRollBall'){
                if(typeof i.result_mark == 'string' && i.result_mark != '[]'){
                  i.result_mark = JSON.parse(i.result_mark);
                  if(i.result_mark != null ){
                    this.$set(i.result_mark,'qs',i.result_mark.schedule.charAt(i.result_mark.schedule.length-1));
                  }
                }
              }
            });
          });
         
          this.noData = false;
          //让球大小组合
          this.dataGroup(this.letBallData);
        } else {
          //  是否显示组件
          this.noData = true;
          // 每次更新数据没有数据时则置空。
          this.letBallData = [];
        }
      });
      let _this = this;
      setTimeout(() => {
        _this.$store.dispatch("GETSHOW", false);
      }, 1000);
    },

    /************添加、删除vuex投注数据公共方法*************/
    AddDelete: function(array, $index, 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投注数据
            matchList[i].data.forEach((res, index) => {
              if (res.mark == array.mark) {
                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.mark,type);
              }
            });
            //添加vuex投注数据
            if (isAdd) {
              isNew = false;
              if (this.$store.getters.getLimit * 1 >= 10) return false;
              //处理当前页面样式
              this.modifyStyle($index, array.mark, 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.mark, type);
          if (this.$store.getters.getIsBetting == "100") return false;
          this.$store.dispatch("ISBETTING", "100");
        }
      } else {
        this.$store.dispatch("BETTING", [obj]);
        this.modifyStyle($index, array.mark, type);
        if (this.$store.getters.getIsBetting == "100") return false;
        this.$store.dispatch("ISBETTING", "100");
      }
    },

    /************修改当前页面样式公共方法*************/
    modifyStyle: function($index, mark, type) {
      let ball = this.$store.getters.getBallId;
      this.letBallData[$index].matchData.every((e, i) => {
        let ret = false;

        if (type == "capot") {
          e.oddsData[1].every((res, index) => {
            if (res.mark == mark) {
              this.$set(res, "isTrue", res.isTrue ? false : true);
              ret = true;
              return false;
            }
            return true;
          });
        }else if(this.$store.getters.getBallId == 'wq'){
          e.oddsData.every((res, index) => {
            if (res.mark == mark) {
              // this.$forceUpdate();
              this.$set(res, "isTrue", res.isTrue ? false : true);
              ret = true;
              return false;
            }
            return true;
          });
          
        }else {
          //console.log(e.oddsData[0]);
          e.oddsData[0].every((res, index) => {
            if (res.mark == mark) {
              // this.$forceUpdate();
              this.$set(res, "isTrue", res.isTrue ? false : true);
              ret = true;
              return false;
            }
            return true;
          });
        } 
        if (ret) {
          return false;
        } else {
          return true;
        }
      });
    },
    noBetting(){

    },
    /************修改投注样式************/
   isBetting($index,name,itemList,type,lg_id,play_name,items) {
      let ball = this.$store.getters.getBallId;
      let bettingInfo = {};
      if (items.odds > 0) {
        let bettingInfo = items;
        bettingInfo.home_team = itemList.home_team;
        bettingInfo.guest_team = itemList.guest_team;
        bettingInfo.name = name;
        bettingInfo.ballId = ball;
        bettingInfo.match_id = itemList.match_id;
        bettingInfo.play_name = play_name;
        bettingInfo.lg_id = lg_id;
        bettingInfo.oddsType = this.$store.getters.getActivity;
        if(this.$store.getters.getActivity == 'StRollBall'){
          bettingInfo.roll_time = `${itemList.match_process}-${itemList.a_time}`;
          bettingInfo.home_score = itemList.home_score;
          bettingInfo.guest_score = itemList.guest_score;
        }
        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;
      this.ballType = ball;
      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 => {
                    //console.log(val.mark,item.mark);
                    if (val.mark == item.mark) {
                      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.mark == item.mark) {
                        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.mark == item.mark) {
                          this.$forceUpdate();
                          this.$set(val, "isTrue", true);
                        }
                      });
                    });
                  }
                }
              });
            }
          }
        });
      });
      // 数据更新切换样式
      let storage = typeof this.previousStorage  =='string' ? JSON.parse(this.previousStorage) : this.previousStorage;
      let wqStorage =typeof this.wqPreviousStorage  =='string' ? JSON.parse(this.wqPreviousStorage) :this.wqPreviousStorage;
      if (storage.length > 0) {
        if (ball == "zq" || ball == "lq" || ball == "bq") {
          data.forEach(itemList => {
            itemList.matchData.forEach((e, idx) => {
              e.oddsData.forEach(item => {
                if (item.length > 0) {
                  item.forEach((list, index) => {
                    if (list != null) {
                      storage.forEach((a, i) => {
                        if (a != null) {
                          if (list.mark == a.mark) {
                            if (list.odds > a.odds) {
                              list.change = "add";
                            } 
                            if (list.odds < a.odds) {
                              list.change = "red";
                            } 
                            if (list.odds == a.odds) {
                              list.change = "";
                            }
                          }
                        }
                      });
                    }
                  });
                }
              });
            });
          });
        }
      } else if ( wqStorage.length > 0 ) {
        if (ball == "wq") {
          data.forEach(list => {
            list.matchData.forEach(e => {
              e.oddsData.forEach(item => {
                wqStorage.forEach(a => {
                  //console.log(item.odds,a.odds)
                  if (item.odds_code == a.odds_code && item.sort == a.sort) {
                    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 => {
            k.oddsData.forEach(e=>{
              if(e.length > 0){
                e.forEach(res =>{
                  this.previousStorage.push({
                    mark:res.mark,
                    odds:res.odds
                  });
                })
              }
            })
          });
        });
        this.previousStorage = JSON.stringify(this.previousStorage);
      } else {
        data.forEach(res => {
          res.matchData.forEach(res => {
            this.wqPreviousStorage.push({
                  mark:res.mark,
                  odds:res.odds
                });
          });
        });
      }
      this.$store.dispatch("GETGAMERATIO", data);
    },

    /************投注框数据组合数据*************/
    combiningData(getBetting,ball){
      this.betting = [];
      if (getBetting) {
        if (ball == "zq") {
          getBetting.forEach((e, index) => {
            if ( "CO" == e.title || "GS" == e.title || "C" == e.title) {
              this.betting.push(e.data);
            }
          });
        } else if (ball == "lq") {
          getBetting.forEach((e, index) => {
            if ("CO" == e.title || "TN" == e.title) {
              this.betting.push(e.data);
            }
          });
        } else if (ball == "bq") {
          getBetting.forEach((e, index) => {
            if ( "C" == e.title ||  "CO" == e.title ||"TN" == e.title ) {
              this.betting.push(e.data);
            }
          });
        } else if (ball == "wq") {
          getBetting.forEach((e, index) => {
            if ("LD" == e.title || "C" == e.title) {
              this.betting.push(e.data);
            }
          });
        }
      }
    },

    /***************足球独赢投注**************/
    isClick($index,name,itemList,type,lg_id,play_name,items) {
      let bettingInfo = items;
      bettingInfo.home_team = itemList.home_team;
      bettingInfo.guest_team = itemList.guest_team;
      bettingInfo.name = name;
      bettingInfo.ballId = ball;
      bettingInfo.match_id = itemList.match_id;
      bettingInfo.play_name = play_name;
      bettingInfo.lg_id = lg_id;
      bettingInfo.oddsType = this.$store.getters.getActivity;
      if(this.$store.getters.getActivity == 'StRollBall'){

        bettingInfo.roll_time = `${itemList.match_process}-${itemList.a_time}`;
        bettingInfo.home_score = itemList.home_score;
        bettingInfo.guest_score = itemList.guest_score;
      }
      this.AddDelete(bettingInfo, $index, type);
      if (this.$store.getters.getLimit * 1 >= 10) {
        this.$dialog.alert({ mes: "你的注单已达到上限啦!" });
      }
    },

  },
  /**
   * 计算属性
   */
  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");
    // },
    getBettingData() {
      return this.$store.getters.getBetting;
    },

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

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

    /***************监听vuex数据变动***************/
    getBettingData(val){
      this.combiningData(val,this.$store.getters.getBallId);
    },

    /***************切换球类遍历组合投注框数据***************/
    getInfo(obj) {
      let getBetting = this.$store.getters.getBetting;
      this.combiningData(getBetting,obj.game_code);
      let getActivity = this.$store.getters.getActivity;
      this.goMatchInfo();
      this.$store.dispatch("GETSHOW", true);
      this.letBallData = [];
      this.getAjax(obj.game_code, obj.type_code);
      if (obj.game_code == "zq") {
        this.zlBallShow = true;
        this.isShow = true;
        this.wq_show = true;
      } else if (obj.game_code == "lq") {
        this.zlBallShow = false;
        this.isShow = true;
        this.wq_show = true;
      }
      if (obj.game_code == "lq" || obj.game_code == "bq") {
        this.ishow = true;
      }
      if (obj.game_code == "wq") {
        this.isShow = true;
        this.wq_show = false;
      } else {
        this.wq_show = true;
      }
    },

    /*-------------------------------------*/
    // 监听投注框开关
    getIsBetting(val) {
      this.isBettingWindow = val;
    },
    /***********监听删除投注框数据************/
    getDeleteType(val) {
      if(val == undefined) return
      let flag = true;
      // 当前玩法球类
      let ball = this.$store.getters.getBallId;
      this.letBallData.forEach((item, index) => {
        item.matchData.forEach(e => {
          if (val == "all") {
            if (ball == "lq") {
              e.oddsData[0].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[1].forEach(data => {
                this.$set(data, "isTrue", false);
              });
            }
          } else {
            let showData = true;
            if (ball == "lq") {
              e.oddsData[0].forEach(data => {
                if (data.mark == val) {
                  this.$set(data, "isTrue", false);
                  showData = false;
                }
              });
              if (showData) {
                e.oddsData[0].forEach(data => {
                  if (data.mark == val) {
                    this.$set(data, "isTrue", false);
                  }
                });
              }
            } else if (ball == "wq") {

              e.oddsData.forEach(data => {
                if (data.mark == val) {
                  this.$set(data, "isTrue", false);
                }
              });
            } else {
              e.oddsData[0].forEach(data => {
                if (data.mark == val) {
                  this.$set(data, "isTrue", false);
                  showData = false;
                }
              });
              if ((this.isShow == false && ball == "zq") || ball == "bq") {
                e.oddsData[1].forEach(data => {
                  if (data.mark == val) {
                    this.$set(data, "isTrue", false);
                    showData = false;
                  }
                });
              }
              if (showData) {
                e.oddsData[0].forEach(data => {
                  if (data.mark == 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 (getters.getIsBetting == "100") {
      this.isBettingWindow = 100;
    }
    //获取vuex玩法已投注相对应的数据
    let getBetting = this.$store.getters.getBetting;
    let ball = this.$store.getters.getBallId;
    this.combiningData(getBetting,ball);
    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{
  margin-bottom: 1rem;
}
.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: 0.05rem;
  padding: 0 0.32rem;
  height: 0.88rem;
  font-size: 0.32rem;
  color:#e4e4e4;
  background: #797777;
}
.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;
  /* line-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>