sportCms/src/components/preview.vue

<template>
    <div class="previewContainer">
        <div class="mainTitle">
            <h5>
                {{BigTitle}}
            </h5>
            <span>{{smallTitle}}</span>
        </div>
        <div class="table">
            <div class="tableTitle">
                <span>时间</span>
                <span>星期一</span>
                <span>星期二</span>
                <span>星期三</span>
                <span>星期四</span>
                <span>星期五</span>
                <span>星期六</span>
                <span>星期日</span>
            </div>
            <div class="tableContext">
                <div class="times">
                    <span v-for="time in previewDate.sttplanpreviewtimelist">{{time.begin_str}}-{{time.end_str}}</span>
                    <span v-for="time in previewDate.SttPreviewTimeList">{{time.BeginStr}}-{{time.EndStr}}</span>
                </div>
                <!--                1-->
                <div class="rows" v-for="i in 7">
                    <em :style="{background:tab.class_color}" v-for="tab in previewDate.sttplanpreviewclasslist"
                        v-if="tab.week_day == i">
                        {{tab.class_name}}
                    </em>
                    <em :style="{background:tab.class_color}" v-for="tab in previewDate.sttreviewclasslist"
                        v-if="tab.week_day == i">
                        {{tab.class_name}}
                    </em>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        ClassListQuery,
        VipUserListQuery,
    } from "../api/getApiRes";
    import Global from '../Global.js'

    let qs = require('qs');
    export default {
        data() {
            return {}
        },
        props: ['previewDate','BigTitle','smallTitle'],
        mounted() {
        },
        watch: {
            // previewDate(val){
            //     val.SttPlanPreviewClassList.sort((a,b)=>a.ClassIndex-b.ClassIndex);//升序
            // }
        },
    }
</script>

<style scoped>
    .mainTitle h5 {
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 26px;
        text-align: center;
        color: #373737;
        margin: 0;
    }

    .context {
        margin: 0;
        padding: 0;
    }

    /deep/ .el-dialog__header,
    /deep/ .el-dialog__body {
        margin: 0;
        margin: 0;
        padding: 0;
    }

    .table {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .mainTitle span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 16px;
        text-align: center;
        color: #bdbdbd;
        padding: 3px 0;
        padding-bottom: 9px;
    }

    .tableContext {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .tableContext .times {
        width: 112px;
        text-align: center;
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 14px;
        line-height: 40px;
        color: #545454;
        float: left;
        border-right: 1px solid #fff;
    }

    .times span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height:39px;
        line-height: 39px;
        background: #82BFFF;
        border-bottom: 2px solid #fff;
    }

    .tableTitle {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .tableTitle span {
        width: 112px;
        height: 45px;
        line-height: 45px;
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 12px;
        text-align: center;
        color: #222;
        float: left;
        background: #F0F2F5;
        border-right: 1px solid #fff;
    }

    .rows {
        width: 112px;
        height: 100%;
        overflow: hidden;
        float: left;
        border-right: 1px solid #fff;
    }

    .rows em {
        width: 112px;
        height:39px;
        line-height:39px;
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 16px;
        text-align: center;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border-bottom: 2px solid #fff;
        background-color: #ccc;
        font-style: normal;
    }

    .previewContainer {
        width: 913px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
</style>