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

<template>
    <div>
        <h2 style="font-size: 20px; text-align: center; padding: 10px 0;">乐团线下课</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>1小时至课程<span class="r">结束前</span></td>
            </tr>
            <tr>
                <td>时间段：11:00:00-13:00:00</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">正常签到</td>
                <td>课程<span class="r">开始前</span>1小时至课程<span class="r">开始前</span>20分钟签到，GPS定位点在教学点{{ list.attendance_range }}米<span class="r">内</span></td>
            </tr>
            <tr>
                <td>时间段：10:00:00-11:39:59</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="6">异常签到</td>
                <td>课程<span class="r">开始前</span>1小时至课程<span class="r">开始前</span>20分钟签到，GPS定位点在教学点{{ list.attendance_range }}米<span class="r">外</span></td>
            </tr>
            <tr>
                <td>时间段：--</td>
            </tr>
            <tr>
                <td>扣费规则: -50</td>
            </tr>
            <tr style="width: 100%"><td>课程<span class="r">开始前</span>20分钟后至课程<span class="r">开始前</span>签到</td></tr>
            <tr style="width: 100%">
                <td>时间段：11:40:00-11:59:59</td>
            </tr>
            <tr style="width: 100%">
                <td>扣费规则: -50</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">迟到</td>
                <td>课程<span class="r">开始后</span>30分钟内签到</td>
            </tr>
            <tr>
                <td>时间段：12:00:00-12:29:59</td>
            </tr>
            <tr>
                <td>扣费规则: -50%</td>
            </tr>
             <!--  -->
            <tr>
                <td rowspan="3">旷课</td>
                <td>课程<span class="r">开始后</span>30分钟至课程<span class="r">结束前</span>签到</td>
            </tr>
            <tr>
                <td>时间段：12:30:00-12:59:59</td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
             <!--  -->
            <tr>
                <td rowspan="3">未签到</td>
                <td>未进行【签到】操作</td>
            </tr>
            <tr>
                <td>时间段：12:30:00-12:59:59</td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>

            <tr>
                <td rowspan="2"></td>
                <td>
                    <span class="r">签到签退时间都在正常范围内，但同时GPS定位在教学点{{ list.attendance_range }}米外</span></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>1小时至课程<span class="r">当天24点前</span></td>
            </tr>
            <tr>
                <td>时间段：11:00:00-23:59:59</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">正常点名</td>
                <td>进行了【点名】操作，完成<span class="r">【点名】后才可签退</span></td>
            </tr>
            <tr>
                <td>时间段：--</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">未点名</td>
                <td>未进行【点名】操作</td>
            </tr>
            <tr>
                <td>时间段：--</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="2"></td>
                <td>
                    <span class="r">签到签退时间都在正常范围内，但同时GPS定位在教学点{{ list.attendance_range }}米外</span></td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
        </table>

        <table border="1" style="width: 100%">
            <tr>
                <th colspan="3">
                    <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>到课程<span class="r">当天24点前</span></td>
            </tr>
            <tr>
                <td>时间段：13:00:00-23:59:59</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">正常签退</td>
                <td>课程<span class="r">结束后</span>至课程<span class="r">结束后</span>6小时，且GPS定位在教学点{{ list.attendance_range }}米<span class="r">内</span></td>
            </tr>
            <tr>
                <td>时间段：13:00:00-18:59:59</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">早退</td>
                <td>课程<span class="r">结束前</span>3分钟签退至课程<span class="r">结束前</span>签退</td>
            </tr>
            <tr>
                <td>时间段：13:00:00-12:56:59</td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">异常签退</td>
                <td>
                    课程<span class="r">结束前3分钟</span>至<span class="r">课程结束前</span><br/>
                    或<span class="r">结束6小时后</span>至课程<span class="r">当天</span>24点前<br/>
                    或GPS定位点在教学点范围之外</td>
            </tr>
            <tr>
                <td>时间段：12:56:59-12:59:59 &nbsp;&nbsp; 19:00:00-23:59:59</td>
            </tr>
            <tr>
                <td>扣费规则: -50</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定位在教学点{{ list.attendance_range }}米外</span></td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    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>