sport_mobile/.svn/pristine/3f/3f9bd06dd3add179305e94e548af2b7d13287e73.svn-base

<template>
  <div class="gameResult">
    <div class="box">
      <div class="title">体育投注规则</div>
      <div class="select">
        <el-select v-model="physicaLType" size="small" placeholder="请选择体育类型" @change="getRuleInfoData">
          <el-option
            v-for="(item, index) of type"
            :key="index"
            :value="item.group_name"
            :label="item.group_name"
          ></el-option>
        </el-select>
      </div>
      <span class='go-home' @click="goHome">返回首页</span>
    </div>
    <div class="content" v-if="contentData" v-loading="loading">
        <div class="content-title">{{contentData.group_name}}</div>
        <div class="content-date">最后更新时间：{{contentData.utime}}</div>
        <div v-html="contentData.content" class="content-info"></div>
    </div>
    <div v-else class="no-content">暂无投注规则说明</div>
    </div>
</template>
<script>
export default {
    name: "gameResult",
    data() {
        return {
            physicaLType: '一般体育说明',
            type: [],
            contentData: {},
            loading: false,
            test: '1'
        }
    },
    created() {
        this.getRuleInfoData();
    },
    methods: {
        // 获取赛事规则
        getRuleInfoData() {
            let params = {
                modular: "体育", // 大类，默认为体育
                group: this.physicaLType // 体育类型
            }
            this.loading = true
            this.$http.get(this.$ports.home.getMatchRule, params)
            .then(res => {
                if(res.data) {
                    if(res.data.data) {
                        this.contentData = res.data.data.match_rule
                        if(res.data.data.rule_menu) {
                            for(let item of res.data.data.rule_menu) {
                                console.log('item',item)
                                this.type = item.group;
                            }
                        }
                    }
                }
                this.loading = false
            })
            .catch(err => {
                this.loading = false
                this.$message.error(err.message)
            })
        },
        goHome() {
            this.$router.push('/');
        }
    }
    };
</script>
<style>
    .el-select .el-input__inner:focus {
      border-color: #999999;
    }
    .el-select .el-input.is-focus .el-input__inner {
      border-color: #999999;
    }
</style>
<style scoped>
    .go-home {
        display: inline-block;
        color: #ffffff;
        margin-right: 20px;
    }
    .gameResult {
        height: 100%;
        width: 100%;
        overflow: auto;
    }
    .box {
    display: flex;
    height: 60px;
    align-items: center;
    background: linear-gradient(to bottom, #999999, #6a6a6b);
    }
    .title {
    flex: 1;
    font-size: 0.3rem;
    color: #ffffff;
    margin-left: 50px;
    }
    .select {
    flex: 0 1 300px;
    }
    .content {
        padding: 10px 10px;
    }
    .content-title {
        font-size: 20px;
        color: #ff9200;
        font-weight: bold;
        margin: 10px 40px;
    }
    .content-date {
        font-style: italic;
        font-size: 13px;
        margin-left: 40px;
    }
    .content-info {
        padding: 50px 50px;
    }
    .no-content {
        position: relative;
        font-style: italic;
        font-size: 15px;
        text-align: center;
        top: 50%;
        margin-top: -8px;
    }
</style>