sports_wap/vue_sports/.svn/pristine/ca/cac8122214ae67bb989204d115885500293e7a77.svn-base

<template>
  <div>
    <div v-if="tennisShow">
    <h3 style="color:#F76649;">{{title}}</h3>
    <div class="tennis">

    <div class="tennis-dtl" v-for="(item,index) in dat" :key="item.id">
      <div class="teamName">
        <span>{{item.host_player_name}}</span>
        <div>vs</div>
        <span>{{item.guest_player_name}}</span>
      </div>
      <div class="frequency">
        <div :class = "item.match_process == 1? 'status':''">
          <span>第一盘</span>
          <span>{{item.first_inning_score}}</span>
        </div>
        <div  :class = "item.match_process == 2? 'status':''">
          <span>第二盘</span>
          <span>{{item.second_inning_score}}</span>
        </div>
        <div :class = "item.match_process == 3? 'status':''">
          <span>第三盘</span>
          <span>{{item.third_inning_score}}</span>
        </div>
      </div>
    </div>
    
  </div>
  <div class="ballBtn">
      <rollingBall :name="name" :index="ball.index" :id="ball.id" :ballName = "ball.name" :gameCode = "gameCode"></rollingBall>
    </div>
  </div>
  </div>
</template>
<script>
import rollingBall from "@/components/StRollingBall";
export default {
  data() {
    return {
      title: "网球",
      tennisShow:true,
      selection: true,
      ballName:'',
      name:'',//球类名称传值
      ball: {
        name: "所有网球滚球",
        index: "8",
        id: 1003
      },
       gameCode:'',//球类别名
      dat: []
    };
  },
  components: { rollingBall },
  mounted() {
    this.$http.get(this.$ports.home.wqrollingBall).then(res => {
      console.log(res.data.data.matchData.length)
      if (res.status == 200 && res.data != [] && res.data.data.matchData.length != 0) {
        console.log('网球',res)
        this.dat = res.data.data.matchData;
        this.title = res.data.data.gameName;
        this.ball.index = this.dat.length;
       this.name = this.title;
          this.ball.name = "所有" + this.title + "滚球";
            this.gameCode = res.data.data.game_code;
      }else{
        console.log("!23")
        this.tennisShow = false
        console.log(' this.tennisShow', this.tennisShow)
      }
    });
  }
};
</script>
<style scoped>
.tennis {
  margin-top: 0.13rem;
  width: 100%;
   border-radius: .08rem;
  /* height: 6.42rem; */
  background: #dcdcdc;
  /* padding: 0 0.3rem 0 0.35rem; */

  margin-bottom: 0.2rem;
  padding: .3rem;
}
 h3 {
  text-align: left;
  font-size: 0.3rem;
  color: #000000;
  padding: 0.25rem 0 0.05rem;
  font-weight: 500;
}
.tennis-dtl {
  width: 100%;
  background: #dcdcdc;
  border-bottom: 1px solid #E4E4E4;
  margin-top: 0.2rem;
  /* height: 1.89rem; */
  height: auto;
  padding: 0.24rem 0.89rem 0.25rem 0.31rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

.teamName {
  color: #333333;
  font-size: 0.28rem;
  width: 2.7rem;
  text-align: left;
}
.frequency {
  width: 1.57rem;
  vertical-align: middle;
  /* 垂直对齐 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.frequency div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.24rem;
  color: #333333;
}
.frequency div:nth-last-child(1) {
  margin-bottom: 0;
}
.frequency .status {
  color: #F76649;
}
.tennis-dtl .icon {
  width: 0.08rem;
  height: 0.08rem;
  position: absolute;
  top: 0.8rem;
  right: 0.33rem;
}
.tennis-dtl .icon i {
  display: inline-block;
  background: #000000;
  width: 0.08rem;
  height: 0.08rem;
}
.ballBtn {
  padding-top: 0.41rem;
  padding-bottom: 0.46rem;
}
</style>