sport_pc/.svn/pristine/30/3065b165607dd9db9dce18068b4cf6de04b815d7.svn-base

<template>
  <div>
    <div v-for="(item,index) in data" :key="item.id">
      <div class="row allAlignment haderBox center">
        <span>123</span>
        <div class="Match-title-num">
          <span>123</span>
        </div>
      </div>
      <div class="box">
        <div class="row allAlignment item-center top-box">
          <span>
            <i>{{item.session}}</i>
            <b style="color:#F76649;font-weight: normal;">{{item.time}}</b>
          </span>
          <span class="top-num">{{item.num}}</span>
        </div>
      </div>
      <div class="box-bottom">
        <div class="box row item-center main-box">
          <span class="num-box" style="color:#eb921e">{{item.home}}</span>
          &nbsp;&nbsp;{{item.nameA}}
        </div>
        <div class="box row item-center main-box">
          <span class="num-box" style="color:#eb921e">{{item.host}}</span>
          &nbsp;&nbsp;{{item.nameB}}
        </div>
        <div class="box row allAlignment bottom-box center">
          <div
            class="item-center bottom-num"
            :class="item.istrueA==true?'active':''"
            @click="isclick(index,1)"
          >
            <p style="color:#eb921e">1</p>
            <p>{{item.odd1}}</p>
          </div>
          <div
            class="item-center bottom-num"
            :class="item.istrueB==true?'active':''"
            @click="isclick(index,2)"
          >
            <p style="color:#eb921e">x</p>
            <p>{{item.odd2}}</p>
          </div>
          <div
            class="item-center bottom-num"
            :class="item.istrueC==true?'active':''"
            @click="isclick(index,3)"
          >
            <p style="color:#eb921e">2</p>
            <p>{{item.odd3}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../css/index.css";
export default {
  data() {
    return {
      data: [
        {
          nameA: "圣特克拉",
          nameB: "智利U17",
          home: "0",
          host: "0",
          session: "上半场",
          time: "13:30",
          num: "10",
          odd1: "2.50",
          odd2: "2.85",
          odd3: "2.70"
        }
      ]
    };
  },
  methods: {
    // 点击事件确认选中
    isclick(index, num) {
      if (num == 1) {
        this.$set(
          this.data[index],
          "istrueA",
          this.data[index].istrueA == true ? false : true
        );
      } else if (num == 2) {
        this.$set(
          this.data[index],
          "istrueB",
          this.data[index].istrueB == true ? false : true
        );
      } else if (num == 3) {
        this.$set(
          this.data[index],
          "istrueC",
          this.data[index].istrueC == true ? false : true
        );
      }
    }
  },
  mounted() {}
};
</script>
<style scoped>
.top-box {
  height: 0.44rem;
  font-size: 0.24rem;
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
}
.box-bottom{
  height: 2.9rem; 
}
.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;
}
.box {
  padding: 0 0.32rem;
  background: #fff;
}
.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 {
  padding: 0 0.32rem;
  height: 0.88rem;
  font-size: 0.32rem;
  background: #f8f8f8;
}
.main-box {
  height: 0.9rem;
  background: #fff;
  font-size: 0.28rem;
}
.bottom-box {
  height: 1.1rem;
  background: #fff;
  font-size: 0.24rem;
}
.bottom-box div {
  width: 1.07rem;
  height: 0.76rem;
  border: 2px solid #cecece;
  border-radius: 0.1rem;
  font-size: .24rem
}
.bottom-num {
  padding: 0.1rem;
  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;
}
</style>