mteacher/src/views/rules/components/onLine.vue

<template>
    <div>
        <h2 style="font-size: 20px; text-align: center; padding: 10px 0;">乐团&VIP&网管线上课</h2>

        <table border="1" style="width: 100%">
            <tr>
                <th colspan="2">
                    <span style="font-size: 16px;">签到</span>
                    <br />
                    <span style="font-weight: 400;">以课程12:00:00-13:00:00为例</span>
                </th>
            </tr>
            <tr>
                <td rowspan="3">可签到时间范围</td>
                <td>课程<span class="r">开始前</span>{{ list.advance_sign_in_minutes }}分钟至课程<span class="r">结束前</span>进入教室</td>
            </tr>
            <tr><td>11:40:00-12:59:59</td></tr>
            <tr><td>扣费规则: --</td></tr>
            <!--  -->
            <tr>
                <td rowspan="3">正常签到</td>
                <td>课程<span class="r">开始前</span>{{ list.advance_sign_in_minutes }}分钟至课程<span class="r">开始前</span>1分钟进入教室</td>
            </tr>
            <tr>
                <td>11:40:00-11:58:59</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">迟到</td>
                <td>课程<span class="r">开始前</span>1分钟至课程<span class="r">开始后</span>3分钟进入教室</td>
            </tr>
            <tr>
                <td>11:58:59-12:02:59</td>
            </tr>
            <tr>
                <td>扣费规则: -50%</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">旷课</td>
                <td>课程开始后3分钟至课程<span class="r">结束前</span>进入教室</td>
            </tr>
            <tr>
                <td>12:03:00-12:59:59</td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">未签到</td>
                <td>未进入网络教室</td>
            </tr>
            <tr>
                <td>--</td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
        </table>

        <table border="1" style="width: 100%">
            <tr>
                <th colspan="2">
                    <span style="font-size: 16px;">签退</span>
                    <br />
                    <span style="font-weight: 400;">以课程12:00:00-13:00:00为例</span>
                </th>
            </tr>
            <tr>
                <td rowspan="3">可签退时间范围</td>
                <td>课程<span class="r">开始前</span>{{ list.advance_sign_in_minutes }}分钟至课程<span class="r">结束后</span>15分钟（课程结束后15分钟网络教室自动关闭）</td>
            </tr>
            <tr><td>11:40:00-13:15:00</td></tr>
            <tr><td>扣费规则: --</td></tr>
            <!--  -->
            <tr>
                <td rowspan="3">正常签退</td>
                <td>课程<span class="r">结束后</span>退出教室</td>
            </tr>
            <tr>
                <td>13:00:00-13:15:00</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">早退</td>
                <td>课程<span class="r">开始前</span>{{ list.advance_sign_in_minutes }}分钟至课程<span class="r">结束前</span>3分钟退出教室</td>
            </tr>
            <tr>
                <td>11:40:00-12:56:59</td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">异常签退</td>
                <td>课程<span class="r">结束前</span>3分钟至课程<span class="r">结束前</span>退出教室</td>
            </tr>
            <tr>
                <td>12:57:00-12:59:59</td>
            </tr>
            <tr>
                <td>扣费规则: -50%</td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    name: 'onLine',
    props: {
        dataList: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            list: {}
        }
    },
    mounted() {
        this.list = this.dataList
    },
    watch: {
        dataList(newValue) {
            this.list = newValue
        }
    }
}
</script>

<style lang="less" scoped>
table {
    border: 0;
    font-size: 12px;
    border-color: #cccccc;
    th {
        text-align: center;
    }
    th, td {
        padding: 5px;
    }
    tr:nth-child(even) {
        background-color: #f1f1f1;
    }
}
table + table {
    margin-top: .15rem;
}
.r {
    color: red;
}
</style>