sports_wap/vue_sports/.svn/pristine/7c/7ce7f1f43ea49d3d50a5c5702b6416eaf8627ff5.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.getAjax();
    let _this = this;
    this.$public.ajaxTimerFun(function(timing) {
      _this.getAjax();
      if (!_this.timers) {
        clearInterval(timing);
      }
    });
  },
  methods: {
    getAjax() {
      this.$store.dispatch("GETSHOW", true);
      this.$http.get(this.$ports.home.wqrollingBall).then(res => {
        if (
          res.data.status == 1 &&
          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 {
          this.tennisShow = false;
          console.log(" this.tennisShow", this.tennisShow);
        }
        this.$store.dispatch("GETSHOW", false);
      });
    }
  }
};
</script>
<style scoped>
.tennis {
  margin-top: 0.13rem;
  width: 100%;
  border-radius: 0.08rem;
  /* height: 6.42rem; */
  background: #dcdcdc;
  /* padding: 0 0.3rem 0 0.35rem; */

  margin-bottom: 0.2rem;
  padding: 0.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>