sport_mobile/.svn/pristine/49/49eed9e589f98acba5286c716e24c67b28956896.svn-base

<template>
    <div class="basketball">
        <div v-if="basketball.length == 0" class="no-message">暂无数据</div>
        <div v-for="(item, index) of basketball" :key="index">
            <el-table  :data="item.match_data">
                <el-table-column type="expand" style="border: none">
                    <template slot-scope="props">
                        <div v-if="props.row.play_data.length == 4">
                        <el-table style="width:600px;margin:0 auto" 
                        :data="[].concat(props.row.play_data[2]).concat(props.row.play_data[3])">
                            <el-table-column label="球队" prop="team_name" width="200"></el-table-column>
                            <el-table-column label="第一节" prop="sc_1th"></el-table-column>
                            <el-table-column label="第二节" prop="sc_2th"></el-table-column>
                            <el-table-column label="第三节" prop="sc_3th"></el-table-column>
                            <el-table-column label="第四节" prop="sc_4th"></el-table-column>
                            <el-table-column label="加时" prop="sc_other"></el-table-column>
                        </el-table>
                        <div style="padding: 8px 8px;margin: 0 auto">
                            <span style="font-weight:bold;">猜分：</span>
                            <span style="display:inline-block;margin-right: 20px;">{{props.row.play_data[0].play_name}}：{{props.row.play_data[0].play_result}}</span>
                            <span>{{props.row.play_data[1].play_name}}：{{props.row.play_data[1].play_result}}</span>
                        </div>
                        </div>
                        <div v-else style="text-align:center">暂无数据</div>
                    </template>
                </el-table-column>
                <el-table-column :label="item.league_name" width="400" align="center" style="border-left:none">
                    <template slot-scope="scope">
                        {{scope.row.match_time}}
                        <span style="width: 400px;font-weight:bold">
                            {{scope.row.home_team}}
                            <span style="color: #ff9200">VS</span>
                            {{scope.row.guest_team}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="上半场" align="center" prop="score_half"></el-table-column>
                <el-table-column label="下半场" align="center" prop="score_below"></el-table-column>
                <el-table-column label="赛果" align="center" prop="score_result"></el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'basketball',
        props: {
            basketballData: {
                type: Array,
                default: ()=>[]
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                basketball: [],
                BtLoading: false,
                show: true,
                test: '1'
            }
        },
        watch: {
            basketballData: {
                handler(val) {
                    if(val) {
                        this.basketball = JSON.parse(JSON.stringify(val))
                    }
                },
                deep: true
            },
            loading(val) {
                this.BtLoading = val
            }
        },
        methods: {
            // 默认展开
            initShow() {
                for(let item of this.basketball) {
                    item.show = !item.show;
                }
            },
            setShow(val, index) {
                val.show = !val.show
            },
        }
    }
</script>
<style>
    .basketball .el-table {
        border-top: none;
    }
    .basketball .el-table th {
        padding: 8px 0;
        background-color: #373737;
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
    }
    .basketball .sec-table .el-table th {
        padding: 4px 0;
        background-color: #e3e3e3;
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
    }
    
    .basketball .el-table td {
        padding: 6px 0;
    }
    .basketball .el-table--border th {
        border: none;
    }
</style>
<style scoped>
    /* /deep/ .el-table td, .el-table th {
        padding: 6px 0;
    } */
    .game-grid {
        box-sizing: border-box;
        width: 800px;
        border: solid 1px #e3e3e3;
        border-top: none;
        border-collapse: collapse;
    }
   .game-grid-head {
       position: relative;
       width: 100%;
       height: 40px;
       line-height: 40px;
       background-color: #373737;
       color: #ffffff;
       font-size: 14px;
       font-weight: 700;
       text-align: center;
   }
   .img-size {
       position: absolute;
       height: 10px;
       width: 10px;
       top: 15px;
       left: 10px;
   }
   .game-grid-one {
       display:table-cell;
       vertical-align: middle;
       text-align: center;
       font-size: 13px;
       border-collapse: collapse;
   }
    .game-grid-cell {
        display:table-cell;
        vertical-align: middle;
        text-align: center;
        font-size: 13px;
        border-collapse: collapse;
        padding: 6px 0;
        /* border-right: 1px solid #d7d7d7; */
        border: 1px solid #d7d7d7;
        border-top: none;
    }
    .no-message {
        text-align: center;
        margin-top: 50px;
        padding-right: 100px;
        font-size: 16px;
        font-weight: 700;
    }
</style>
<style scoped>
    .no-message {
        text-align: center;
        margin-top: 50px;
        padding-right: 100px;
        font-size: 16px;
        font-weight: 700;
    }
</style>