sport_pc/.svn/pristine/1a/1acee2bf067f9a9ce1747be97615a39b52012ee6.svn-base

<template>
    <div>
        <div class="TheOdds-title">{{data.title}}</div>
        <div class="TheOdds-list" v-for="(i,index) in data.list" :key="i.id">
            <div class="TheOdds-list-left">
                <span>{{i.name}}</span>
            </div>
            <div class="TheOdds-list-right">
                <div :class="i.istrue==true?'TheOdds-list-right-num active':'TheOdds-list-right-num'" @click="myisclick(index)">
                    {{i.ratio}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"TheOdds",
        data() {
            return {
                data:{
                    title:'冠军',
                    list:[
                        {
                            name:"曼城",
                            ratio:"3.25"
                        },
                         {
                            name:"尤文图斯",
                            ratio:"3.25"
                        },
                         {
                            name:"巴塞罗那",
                            ratio:"3.25"
                        },
                        {
                            name:"利物浦",
                            ratio:"3.25"
                        }
                    ]
                }
            }
        },
            methods: {
                    myisclick(index){
                        this.$set(this.data.list[index],'istrue',this.data.list[index].istrue==true?false:true)
                    }
                },
    }
</script>

<style scoped>
    .TheOdds-title{
        height: .88rem;
        background: #e4e4e4;
        display: flex;
        padding:0 .32rem;
        align-items: center;
        font-size: .28rem;
        color: #333;
    }
    .TheOdds-list{
        height: .88rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e4e4e4;
        padding: 0 .32rem;
        background: #fff;
    }
    .TheOdds-list-left,.TheOdds-list-right{
        width: 50%;
        height: 100%;
    }
    .TheOdds-list-left{
        font-size: .32rem;
        color: #333;
        display: flex;
        align-items: center;
    }
    .TheOdds-list-right{
        font-size: .26rem;
        color: #333;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .TheOdds-list-right-num{
        width: 1.07rem;
        height: .76rem;
        border: 1px solid #e4e4e4;
        border-radius: .1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }
    .active{
        background: #e4e4e4;
    }
</style>