sport_pc/.svn/pristine/20/20d923fcdbefcbf0908509e8aed4b9a37772a578.svn-base

<template>
    <div>
        <yd-accordion>
        <yd-accordion-item title="波胆-上半场" open >
        <div>
            <div class="rulesName row">
                <div>哈萨克斯坦</div>
                <div>和局</div>
                <div>马德里体育会</div>
            </div>
            <div class="row grids">
                <div  class="column center" >
                    <div class="gridsDiv row center" v-for="(item,index) in arr " :key="item.id" >
                         <!-- :class=" [item.isTrue ? 'trueSelected':''] " -->
                        <div v-if="item.odds !=-1 " >
                            <div class="column average  minGrid " :class=" [item.isTrue ?'trueSelected' :'']" @click="btnChoose('a',index,item.id)">
                                <span style="color:#FD8F26 ">{{item.score}}</span>
                                <span>{{item.odds}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div  class="column center middle"  >
                    <div class="gridsDiv row center" v-for="(item,index) in arr1 " :key="item.id" >
                        <div v-if="item.odds !=-1 " >
                            <div class="column average  minGrid " :class=" [item.isTrue ? 'trueSelected' :''] " @click="btnChoose('b',index,item.id)">
                                <span style="color:#FD8F26 ">{{item.score}}</span>
                                <span>{{item.odds}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div  class="column center" >
                    <div class="gridsDiv row center" v-for="(item,index) in arr2 " :key="item.id" >
                        <div v-if="item.odds !=-1 " >
                            <div class="column average  minGrid" :class=" [item.isTrue ? 'trueSelected' :''] " @click="btnChoose('c',index,item.id)">
                                <span style="color:#FD8F26 ">{{item.score}}</span>
                                <span>{{item.odds}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="background:#f8f8f8;">
                <div class="row rightAlignment center" style="height: 0.88rem;">
                    <span>其他比分:</span><div class="minGrid minGridAll">51</div>
                </div>
            </div>
        </div>
        </yd-accordion-item>
    </yd-accordion>
    </div>
</template>
<script>
import '../css/index.css';
import Vue from 'vue';
import {Accordion, AccordionItem} from 'vue-ydui/dist/lib.rem/accordion';
Vue.component(Accordion.name, Accordion);
Vue.component(AccordionItem.name, AccordionItem);
export default {
    // 波胆上半场
    name:'WaveBladder',
    data(){
        return{
            arr1:[{id:0,score:'3-1',odds:1.4},
            {id:1,score:'3-1',odds:1.4},
            {id:2,score:'2-1',odds:1.0},
            {id:3,score:'2-1',odds:0.75},
            {id:4,score:'1-1',odds:0.65},
            {id:5,score:'1-1',odds:0.65},
            {id:6,score:'1-0',odds:0.86},
            {odds:-1},
            {odds:-1},
            {odds:-1},
            {odds:-1},
            {odds:-1}],
            arr2:[{id:0,score:'3-1',odds:1.4},
            {id:1,score:'3-1',odds:1.4},
            {id:2,score:'2-1',odds:1.0},
            {id:3,score:'2-1',odds:0.75},
            {id:4,score:'1-1',odds:0.65},
            {id:5,score:'1-1',odds:0.65},
            {id:6,score:'1-0',odds:0.86},
            {id:7,score:'1-0',odds:0.86},
            {id:8,score:'1-0',odds:0.86},
            {id:9,score:'0-0',odds:0.54},
            {id:10,score:'0-0',odds:0.54},
            {id:11,score:'0-0',odds:0.54}],
            arr:[{id:0,score:'3-1',odds:1.4},
            {id:1,score:'3-1',odds:1.4},
            {id:2,score:'2-1',odds:1.0},
            {id:3,score:'2-1',odds:0.85},
            {id:4,score:'1-1',odds:0.85},
            {id:5,score:'1-1',odds:0.85},
            {id:6,score:'1-0',odds:0.76},
            {id:7,score:'1-0',odds:0.76},
            {id:8,score:'1-0',odds:0.76},
            {id:9,score:'0-0',odds:0.50},
            {odds:-1},{odds:-1}]
        }
    },
    methods:{
       btnChoose:function(e,index,id){
            let number = index;
            if(e=='a'){
                this.$set(this.arr[number],'isTrue',this.arr[number].isTrue == true? false: true);
            }else if(e =='b'){
                this.$set(this.arr1[number],'isTrue',this.arr1[number].isTrue == true? false: true);
            }else if(e =='c'){
                console.log(this.arr2);
                this.$set(this.arr2[number],'isTrue',this.arr2[number].isTrue == true? false: true);
            }
        }
    },
    watch:{
        arr1:function(e){
            console.log(e);
        }
    }
}
</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%;
    }
    .grids div {
         background:#f8f8f8 ;
    }
    .middle{
        border-left: 1px solid #E4E4E4;
        border-right: 1px solid #E4E4E4;
    }
    .rulesName{
        font-size: 0.28rem;
        background:#F8F8F8 ;
    }
    .gridsDiv,.rulesName div {
        border-bottom: 1px solid #E4E4E4;
        height: 0.88rem;
        line-height: 0.88rem;
        text-align: center;
        width: 2.49rem;
    }
    .minGrid{
        width:1.07rem ;
        height:0.76rem;
        border: 2px solid #cecece;
        border-radius: 0.1rem;
    }
    .minGrid span{
        font-size: 0.24rem;
        padding: 0.08rem 0;
        line-height: 0;
    }
    .minGridAll{
        margin-right: 0.69rem;
        line-height: 0.76rem;
        text-align: center;
    }
    .trueSelected{
        background: #F76649 !important;
        border: 2px solid #F76649
    }
     .trueSelected span{
         color: #f4f4f4 !important;
     }
</style>