mteacher/src/views/rules/components/vipOffLine.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>课程开始前20分钟至课程结束后20分钟</td>
            </tr>
            <tr>
                <td>11:40:00-13:19:59</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">正常签到签退</td>
                <td>操作了【点名】，GPS定位在教学点1000米<span class="r">内</span></td>
            </tr>
            <tr>
                <td>--</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">异常签到签退</td>
                <td>操作了【点名】，GPS定位在教学点1000米<span class="r">外</span></td>
            </tr>
            <tr>
                <td>--</td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
             <!--  -->
            <tr>
                <td rowspan="3">未签到签退</td>
                <td>未进行【点名】</td>
            </tr>
            <tr>
                <td>--</td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
             <!--  -->
            <tr>
                <td rowspan="2"></td>
                <td>
                    <span class="r">签到签退时间都在正常范围内，但同时GPS定位在教学点1000米外</span></td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
        </table>
    </div>
</template>

<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>