sport_pc/.svn/pristine/33/33cda26e95b1b84d217a174a3c8b0bac7339377c.svn-base

<template>
  <div>
    <yd-accordion>
      <!-- 组件标题 -->
      <yd-accordion-item class="Match-game" :title="title" open>
        <!-- 组件计数单元 -->
        <div slot="txt" class="Match-game-stat" v-if="table.census">当前总数:{{ table.census }}</div>
        <div style="background: #F0F0F0;">
          <p
            v-for="(i, index) in data"
            class="list-row"
            :style="i.condition ? '' : 'background:#F8F8F8'"
       
            :key="i.id"
          >
            <span class="The-club">{{ i.team }}</span>
            <span
              :class="i.istrue== true ? 'active The-club-box' : 'The-club-box'"
              @click="Theclubboxclick(index)"
              :style="i.condition ? '' : 'display:none'"
            >
              <i style="color: #FD8F26;display:block" v-if="i.condition">{{ i.condition }}</i>
              <i v-if="i.condition">{{ i.odds }}</i>
            </span>
          </p>
        </div>
      </yd-accordion-item>
    </yd-accordion>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 组件内部测试状态
      title: "主队全场让球",
      data: [],
      table: {
        title: "角球:让球",
        list: [
          {
            id: 1,
            Theclub: "哈萨克斯坦",
            num: {
              num1: "0.5/1",
              num2: "0.94"
            }
          },
          {
            id: 2,
            Theclub: "马德里体育会",
            num: {
              num1: "",
              num2: "0.94"
            }
          },
          {
            id: 3,
            Theclub: "哈萨克斯坦",
            num: {
              num1: "0.5/1",
              num2: "0.94"
            }
          },
          {
            id: 4,
            Theclub: "马德里体育会",
            num: {
              num1: "",
              num2: "0.94"
            }
          }
        ]
      }
    };
  },
  methods: {
    // 点击更改组件选中状态
    Theclubboxclick(num) {
      // 更改组件是否选中
      this.$set(
        this.data[num],
        "istrue",
        this.data[num].istrue == true ? false : true
      );
    }
  },
  computed: {
    getUserIcons() {
      return this.$store.getters.getGameRatio;
    }
  },
  watch: {
    getUserIcons(val) {
		console.log('val',val)
      for (var i = 0; i < val.length; i++) {
        if (this.title == val[i].key) {
          this.data = val[i].data;
		  console.log("data", this.data);
		//   this.title = val.data[i].p_code
        }
      }
    }
  }
};
</script>

<style scoped>
div /deep/ .yd-accordion-head-arrow:after {
  border: none;
  width: 0.5rem;
  height: 0.5rem;
  background: url(../assets/st-imges/xiangxia.png) no-repeat;
  background-size: 100% 100%;
}
div /deep/ .yd-accordion-head,
div /deep/ .yd-accordion-head-content,
div /deep/ .yd-accordion-title {
  height: 0.88rem;
  font-size: 0.28rem;
  color: #333;
  background: #f8f8f8;
}
div /deep/ .yd-accordion-head {
  padding: 0 0.32rem;
}
.Match-game {
  position: relative;
}
.Match-game-stat {
  position: absolute;
  right: 1.35rem;
  color: #fd8f26;
  font-size: 0.26rem;
}
.list-row {
  display: flex;
  justify-content: space-between;
  height: 0.87rem;
  background: #f8f8f8;
  border-bottom: 1px solid #e4e4e4;
  align-items: center;
  padding: 0 0.32rem;
}
.The-club {
  font-size: 0.28rem;
}
.The-club-box {
  display: inline-block;
  /* display: flex; */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 1.07rem;
  height: 0.76rem;
  font-size: 0.24rem;
  padding: 0.1rem;
  border: 2px solid #cecece;
  border-radius: 0.1rem;
  margin-right: 0.1rem;
  text-align: center;
}
.active {
  background: #f76649;
  padding: 0.1rem;
  border: 2px solid #f76649;
}
.active i {
  color: #f4f4f4 !important;
}
</style>