sport_pc/.svn/pristine/3d/3d665138abba0f96d070b8887949382a210983da.svn-base

<template>
  <div class="goal">
    <yd-accordion :accordion="false">
      <yd-accordion-item :title=" '进球' + ':' + '单/双'">
        <div style="padding:0 0.32rem;" class="odds" v-for="(item,index) in list" :key="item.id" >
          <div class="large" @click="toggle(index)">
            <div>大</div>
            <div class="ratio" :class = "sel[index] == true ? 'col':''">
              <span class = "score">{{item.largeScore}}</span>
              <span :class = "item.largeScore || item.smallScore == '' ? '':'largeScore'">{{item.largeOdds}}</span>
            </div>
          </div>
          <div class="small" @click = smallToggle(index)>
            <div>小</div>
            <div class="ratio" :class = "smallStatus[index] == true ? 'col':''">
              <span  class = "score">{{item.smallScore}}</span>
              <span :class = "item.smallScore || item.smallScore == '' ? '':'smallScore'">{{item.smallOdds}}</span>
            </div>
          </div>
        </div>
      </yd-accordion-item>
    </yd-accordion>
  </div>
</template>
<script>
export default {
    // 进球大小单双数
  data() {
    return {
      status: -1,
      timer:0,
      smallStatus : [],
      sel : [],
      list:[{
        largeScore : '0.5/1',
        largeOdds:'0.94',
        smallScore : '0.5/1',
        smallOdds:'0.94'
      }]
    }
  },
  mounted() {
    for(var i = 0 ;i < this.list.length; i++){
      this.sel.push(false)
      this.smallStatus.push(false)
    }
  },
  methods: {
      toggle(index){
          this.sel[index] = !this.sel[index]
          this.$forceUpdate();
        },
          smallToggle(index){
          this.smallStatus[index] = !this.smallStatus[index]
          this.$forceUpdate();
        }
  },
};
</script>
<style scoped>
div /deep/ .yd-accordion-head {
  padding: 0 0.32rem;
  background: #F8F8F8;
}
div /deep/ .yd-accordion-title {
  color: #333333;
  font-size: 0.32rem;
}
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%;
}
.odds {
  display: flex;
  justify-content: space-between;
  background: #f8f8f8;
  text-align: left;

}
.odds .large,.odds .small {
  width: 50%;
  display: flex;
  justify-content: space-between;
  border-right: 1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
}
.odds .small{
  border-right: none;
  padding-left: 0.16rem;
}
.odds .large div,.odds .small div{
  height: 0.88rem;

  font-size: 0.24rem;
  color: #333333;
}
.odds .large div:nth-child(1),.odds .small div:nth-child(1) {
  line-height: 0.88rem;
}
.odds .large .ratio,.odds .small .ratio {
  width: 1.07rem;
  height: 0.76rem;
  border: 2px solid #cecece;
  border-radius: 0.1rem;
  margin-top: 0.06rem;
  text-align: center;
  margin-right: 0.14rem;
}
.odds .large .ratio span,.odds .small .ratio span{
  font-size: 0.24rem;

}
.odds .large .score,.odds .small .score{
  color: #FD8F26;
}
.odds:nth-last-child(1) .large,.odds:nth-last-child(1) .small{
  border-bottom: none;
}
.largeScore,.smallScore{
  line-height: 0.76rem;
}
.col{
  background: #F76649;
  border: 2px solid #F76649 !important;
}
.col span{
  color: #f4f4f4 !important;
}
.odds .score{
  display: block;
  margin-top:0.04rem;
}
</style>