更新

src/views/rules/components/offLine.vue

@@ -1,224 +1,110 @@
 <template>
-    <div>
-        <h2 style="font-size: 20px; text-align: center; padding: 10px 0;">乐团线下课</h2>
+    <div style="padding-bottom: 20px;">
+        <h2 class="title">乐团线下课</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.offline_sign_in_early_forward_time }}分钟至课程<span class="r">结束前</span></td>
-            </tr>
-            <tr>
-                <td>时间段：{{ reduceFormMinute('12:00:00', list.offline_sign_in_early_forward_time) }}-13:00:00</td>
-            </tr>
-            <tr>
-                <td>扣费规则: --</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">正常签到</td>
-                <td>课程<span class="r">开始前</span>{{ list.offline_sign_in_early_forward_time }}分钟至课程<span class="r">开始前</span>{{ list.offline_advance_sign_in_minutes }}分钟签到，GPS定位点在教学点{{ list.attendance_range }}米<span class="r">内</span></td>
-            </tr>
-            <tr>
-                <td>时间段：{{ reduceFormMinute('12:00:00', list.offline_sign_in_early_forward_time) }}-{{ reduceFormMinute('12:00:00', list.offline_advance_sign_in_minutes) }}</td>
-            </tr>
-            <tr>
-                <td>扣费规则: --</td>
-            </tr>
-            <!--  -->
-            <!-- <tr>
-                <td rowspan="3">异常签到</td>
-                <td>课程<span class="r">开始前</span>{{ list.offline_error_sign_in_cut_salary }}分钟至课程<span class="r">开始前</span>20分钟签到，GPS定位点在教学点{{ list.attendance_range }}米<span class="r">外</span></td>
-            </tr> -->
-            <!-- <tr>
-                <td>时间段：--</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.offline_error_sign_in_cut_salary }}{{ list.offline_error_sign_in_cut_salary_unit | formatUnit }}</td>
-            </tr> -->
-            <tr style="width: 100%"><td rowspan="3">异常签到</td><td>课程<span class="r">开始前</span>{{ list.offline_advance_sign_in_minutes }}分钟后至课程<span class="r">开始前</span>签到，GPS定位点在教学点{{ list.attendance_range }}米<span class="r">外</span></td></tr>
-            <tr style="width: 100%">
-                <td>时间段：{{ reduceFormMinute('12:00:00', list.offline_advance_sign_in_minutes) }}-12:00:00</td>
-            </tr>
-            <tr style="width: 100%">
-                <td>扣费规则: -{{ list.offline_error_sign_in_cut_salary }}{{ list.offline_error_sign_in_cut_salary_unit | formatUnit }}</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">迟到</td>
-                <td>课程<span class="r">开始后</span>{{ list.offline_advance_sign_in_late_minutes }}分钟内签到</td>
-            </tr>
-            <tr>
-                <td>时间段：12:00:00-{{ addFormMinute('12:00:00', list.offline_advance_sign_in_late_minutes) }}</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.offline_late_cut_salary }}{{ list.offline_late_cut_salary_unit | formatUnit }}</td>
-            </tr>
-             <!--  -->
-            <tr>
-                <td rowspan="3">旷课</td>
-                <td>课程<span class="r">开始后</span>{{ list.offline_advance_sign_in_late_minutes }}分钟至课程<span class="r">结束前</span>签到</td>
-            </tr>
-            <tr>
-                <td>时间段：{{ reduceFormMinute('12:00:00', list.offline_advance_sign_in_late_minutes) }}后签到（包括{{ reduceFormMinute('12:00:00', list.offline_advance_sign_in_late_minutes) }}）</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.offline_level_sign_in_cut_salary }}{{ list.offline_level_sign_in_cut_salary_unit | formatUnit }}</td>
-            </tr>
-             <!--  -->
-            <tr>
-                <td rowspan="3">未签到</td>
-                <td>未进行【签到】操作</td>
-            </tr>
-            <tr>
-                <td>时间段：12:30:00-12:59:59</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.offline_no_sign_in_cut_salary }}{{ list.offline_no_sign_in_cut_salary_unit | formatUnit }}</td>
-            </tr>
+        <div class="sample">
+            <i class="line"></i>签到
+            <span>（以课程12:00:00-13:00:00为例）</span>
+        </div>
 
-            <tr>
-                <td rowspan="2"></td>
-                <td>
-                    <span class="r">签到签退时间都在正常范围内，但同时GPS定位在教学点{{ list.attendance_range }}米外</span></td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.offline_sign_in_gps_error_cut_salary }}{{ list.offline_sign_in_gps_error_cut_salary_unit | formatUnit }}</td>
-            </tr>
-        </table>
+        <van-collapse v-model="activeNames" accordion>
+            <van-collapse-item title="可签到时间范围" name="1">
+                课程<span class="r">开始前</span>{{ list.offline_sign_in_early_forward_time }}分钟至课程<span class="r">结束前</span> <br />
+                时间段：{{ reduceFormMinute('12:00:00', list.offline_sign_in_early_forward_time) }}-13:00:00 <br />
+                扣费规则: --
+            </van-collapse-item>
+            <van-collapse-item title="正常签到" name="2">
+                课程<span class="r">开始前</span>{{ list.offline_sign_in_early_forward_time }}分钟至课程<span class="r">开始前</span>{{ list.offline_advance_sign_in_minutes }}分钟签到，GPS定位点在教学点{{ list.attendance_range }}米<span class="r">内</span> <br />
+                时间段：{{ reduceFormMinute('12:00:00', list.offline_sign_in_early_forward_time) }}-{{ reduceFormMinute('12:00:00', list.offline_advance_sign_in_minutes) }} <br />
+                扣费规则: --
+            </van-collapse-item>
+            <van-collapse-item title="异常签到" name="3">
+                课程<span class="r">开始前</span>{{ list.offline_advance_sign_in_minutes }}分钟后至课程<span class="r">开始前</span>签到，GPS定位点在教学点{{ list.attendance_range }}米<span class="r">外</span> <br />
+                时间段：{{ reduceFormMinute('12:00:00', list.offline_advance_sign_in_minutes) }}-12:00:00 <br />
+                扣费规则: -{{ list.offline_error_sign_in_cut_salary }}{{ list.offline_error_sign_in_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+            <van-collapse-item title="迟到" name="4">
+                课程<span class="r">开始后</span>{{ list.offline_advance_sign_in_late_minutes }}分钟内签到 <br />
+                时间段：12:00:00-{{ addFormMinute('12:00:00', list.offline_advance_sign_in_late_minutes) }} <br />
+                扣费规则: -{{ list.offline_late_cut_salary }}{{ list.offline_late_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+            <van-collapse-item title="旷课" name="5">
+                课程<span class="r">开始后</span>{{ list.offline_advance_sign_in_late_minutes }}分钟至课程<span class="r">结束前</span>签到 <br />
+                时间段：{{ reduceFormMinute('12:00:00', list.offline_advance_sign_in_late_minutes) }}后签到（包括{{ reduceFormMinute('12:00:00', list.offline_advance_sign_in_late_minutes) }}） <br />
+                扣费规则: -{{ list.offline_level_sign_in_cut_salary }}{{ list.offline_level_sign_in_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+            <van-collapse-item title="未签到" name="6">
+                未进行【签到】操作 <br />
+                时间段：12:30:00-12:59:59 <br />
+                扣费规则: -{{ list.offline_no_sign_in_cut_salary }}{{ list.offline_no_sign_in_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+            <van-collapse-item title="GPS定位" name="7">
+                <span class="r">签到签退时间都在正常范围内，但同时GPS定位在教学点{{ list.attendance_range }}米外</span> <br />
+                扣费规则: -{{ list.offline_sign_in_gps_error_cut_salary }}{{ list.offline_sign_in_gps_error_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+        </van-collapse>
 
 
-        <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.offline_sign_in_early_forward_time }}分钟至课程<span class="r">结束后</span>{{ list.advance_sign_out_minutes }}</td>
-            </tr>
-            <tr>
-                <td>时间段：{{ reduceFormMinute('12:00:00', list.offline_sign_in_early_forward_time) }}-{{ addFormMinute("13:00:00", list.advance_sign_out_minutes) }}</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>扣费规则: -{{ list.offline_sign_out_gps_error_cut_salary }}{{ offline_sign_out_gps_error_cut_salary_unit | formatUnit }}</td>
-            </tr> -->
-        </table>
+        <div class="sample">
+            <i class="line"></i>点名
+            <span>（以课程12:00:00-13:00:00为例）</span>
+        </div>
 
-        <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>{{ list.advance_sign_out_minutes }}分钟，且GPS定位在教学点{{ list.attendance_range }}米<span class="r">内</span></td>
-            </tr>
-            <tr>
-                <td>时间段：13:00:00-{{ addFormMinute('13:00:00', list.advance_sign_out_minutes) }}</td>
-            </tr>
-            <tr>
-                <td>扣费规则: --</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">早退</td>
-                <td>课程<span class="r">结束前</span>{{ list.offline_advance_sign_out_minutes }}分钟签退至课程<span class="r">结束前</span>签退</td>
-            </tr>
-            <tr>
-                <td>时间段：{{ reduceFormMinute('13:00:00', list.offline_advance_sign_out_minutes) }}前签退（包括{{ reduceFormMinute('13:00:00', list.offline_advance_sign_out_minutes) }}）</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.offline_early_sign_out_cut_salary }}{{ list.offline_early_sign_out_cut_salary_unit | formatUnit }}</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">异常签退</td>
-                <td>
-                    课程<span class="r">结束前{{ list.offline_advance_sign_out_minutes }}分钟</span>至<span class="r">课程结束前</span><br/>
-                    或GPS定位点在教学点范围之外</td>
-            </tr>
-            <tr>
-                <td>时间段：{{ reduceFormMinute('12:00:00', list.offline_advance_sign_out_minutes) }}-12:59:59</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.offline_error_sign_out_cut_salary }}{{ list.offline_error_sign_out_cut_salary_unit | formatUnit }}</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">未签退</td>
-                <td>未进行【签退】操作</td>
-            </tr>
-            <tr>
-                <td>时间段：--</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.offline_no_sign_out_cut_salary }}{{ list.offline_no_sign_out_cut_salary_unit | formatUnit }}</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="2"></td>
-                <td>
-                    <span class="r">签到签退时间都在正常范围内，但同时GPS定位在教学点{{ list.attendance_range }}米外</span></td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.offline_sign_out_gps_error_cut_salary }}{{ list.offline_sign_out_gps_error_cut_salary_unit | formatUnit }}</td>
-            </tr>
-        </table>
+        <van-collapse v-model="activeNames1" accordion>
+            <van-collapse-item title="可点名时间范围" name="1">
+                课程<span class="r">开始前</span>{{ list.offline_sign_in_early_forward_time }}分钟至课程<span class="r">结束后</span>{{ list.advance_sign_out_minutes }}分钟<br />
+                时间段：{{ reduceFormMinute('12:00:00', list.offline_sign_in_early_forward_time) }}-{{ addFormMinute("13:00:00", list.advance_sign_out_minutes) }}<br />
+                扣费规则: --
+            </van-collapse-item>
+            <van-collapse-item title="正常点名" name="2">
+                进行了【点名】操作，完成<span class="r">【点名】后才可签退</span><br />
+                时间段：--<br />
+                扣费规则: --
+            </van-collapse-item>
+            <van-collapse-item title="未点名" name="3">
+                未进行【点名】操作<br />
+                时间段：--<br />
+                扣费规则: --
+            </van-collapse-item>
+        </van-collapse>
+
+
+        <div class="sample">
+            <i class="line"></i>签退
+            <span>（以课程12:00:00-13:00:00为例）</span>
+        </div>
+
+        <van-collapse v-model="activeNames2" accordion>
+            <van-collapse-item title="可签退时间范围" name="1">
+                课程<span class="r">结束后</span>到课程<span class="r">当天24点前</span><br />
+                时间段：13:00:00-23:59:59<br />
+                扣费规则: --
+            </van-collapse-item>
+            <van-collapse-item title="正常签退" name="2">
+                课程<span class="r">结束后</span>至课程<span class="r">结束后</span>{{ list.advance_sign_out_minutes }}分钟，且GPS定位在教学点{{ list.attendance_range }}米<span class="r">内</span><br />
+                时间段：13:00:00-{{ addFormMinute('13:00:00', list.advance_sign_out_minutes) }}<br />
+                扣费规则: --
+            </van-collapse-item>
+            <van-collapse-item title="早退" name="3">
+                课程<span class="r">结束前</span>{{ list.offline_advance_sign_out_minutes }}分钟签退至课程<span class="r">结束前</span>签退<br />
+                时间段：{{ reduceFormMinute('13:00:00', list.offline_advance_sign_out_minutes) }}前签退（包括{{ reduceFormMinute('13:00:00', list.offline_advance_sign_out_minutes) }}）<br />
+                扣费规则: -{{ list.offline_early_sign_out_cut_salary }}{{ list.offline_early_sign_out_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+            <van-collapse-item title="异常签退" name="4">
+                课程<span class="r">结束前{{ list.offline_advance_sign_out_minutes }}分钟</span>至<span class="r">课程结束前</span> 或GPS定位点在教学点范围之外<br />
+                时间段：{{ reduceFormMinute('12:00:00', list.offline_advance_sign_out_minutes) }}-12:59:59
+                扣费规则: -{{ list.offline_error_sign_out_cut_salary }}{{ list.offline_error_sign_out_cut_salary_unit | formatUnit }}<br />
+            </van-collapse-item>
+            <van-collapse-item title="未签退" name="5">
+                未进行【签退】操作<br />
+                时间段：--<br />
+                扣费规则: -{{ list.offline_no_sign_out_cut_salary }}{{ list.offline_no_sign_out_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+            <van-collapse-item title="GPS定位" name="6">
+                <span class="r">签到签退时间都在正常范围内，但同时GPS定位在教学点{{ list.attendance_range }}米外</span><br />
+                扣费规则: -{{ list.offline_sign_out_gps_error_cut_salary }}{{ list.offline_sign_out_gps_error_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+        </van-collapse>
     </div>
 </template>
 
@@ -242,7 +128,10 @@ export default {
     },
     data() {
         return {
-            list: {}
+            list: {},
+            activeNames: 1,
+            activeNames1: 1,
+            activeNames2: 1,
         }
     },
     mounted() {
@@ -277,22 +166,28 @@ export default {
 </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;
-    }
+.title {
+    background-color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    text-align: center;
+    padding: 10px 0;
 }
-table + table {
-    margin-top: .15rem;
+.sample {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    padding: 10px 16px;
+    background-color: #F8F9FC;
+    .line {
+        display: inline-block;
+        margin-right: .06rem;
+        height: .16rem;
+        width: .04rem;
+        border-radius: .04rem;
+        background-color: #01C1B5;
+    }
 }
 .r {
     color: red;

src/views/rules/components/onLine.vue

@@ -1,115 +1,66 @@
 <template>
-    <div>
-        <h2 style="font-size: 20px; text-align: center; padding: 10px 0;">乐团&VIP&网管线上课</h2>
+    <div style="padding-bottom: 20px;">
+        <h2 class="title">乐团&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.course_before_buffer_time }}分钟至课程<span class="r">结束前</span>进入教室</td>
-            </tr>
-            <tr><td>时间段：{{ reduceFormMinute('12:00:00', list.course_before_buffer_time) }}-12:59:59</td></tr>
-            <tr><td>扣费规则: --</td></tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">正常签到</td>
-                <td>课程<span class="r">开始前</span>{{ list.course_before_buffer_time }}分钟至课程<span class="r">开始前</span>{{ list.course_before_buffer_time - list.online_advance_sign_in_minutes }}分钟进入教室</td>
-            </tr>
-            <tr>
-                <td>时间段：{{ reduceFormMinute('12:00:00', list.course_before_buffer_time) }}-{{ reduceFormMinute('12:00:00', (list.course_before_buffer_time - list.online_advance_sign_in_minutes)) }}</td>
-            </tr>
-            <tr>
-                <td>扣费规则: --</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">迟到</td>
-                <td>课程<span class="r">开始前</span>{{ list.online_advance_sign_in_minutes }}分钟至课程<span class="r">开始后</span>{{ list.online_advance_sign_in_late_minutes }}分钟进入教室</td>
-            </tr>
-            <tr>
-                <td>时间段：{{ reduceFormMinute('12:00:00', list.online_advance_sign_in_minutes) }}-{{ addFormMinute('12:00:00', list.online_advance_sign_in_late_minutes) }}</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.online_late_cut_salary }}{{ list.online_late_cut_salary_unit | formatUnit }}</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">旷课</td>
-                <td>课程<span class="r">开始后</span>{{ list.online_advance_sign_in_late_minutes }}分钟至课程<span class="r">结束前</span>进入教室</td>
-            </tr>
-            <tr>
-                <td>时间段：{{ addFormMinuteAddS('12:00:00', list.online_advance_sign_in_late_minutes) }}后签到（包括{{ addFormMinuteAddS('12:00:00', list.online_advance_sign_in_late_minutes) }}）</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.online_level_sign_in_cut_salary }}{{ list.online_level_sign_in_cut_salary_unit | formatUnit }}</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">未签到</td>
-                <td>未进入网络教室</td>
-            </tr>
-            <tr>
-                <td>时间段：--</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.online_no_sign_in_cut_salary }}{{ list.online_no_sign_in_cut_salary_unit | formatUnit }}</td>
-            </tr>
-        </table>
+        <div class="sample">
+            <i class="line"></i>签到
+            <span>（以课程12:00:00-13:00:00为例）</span>
+        </div>
 
-        <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.course_before_buffer_time }}分钟至课程<span class="r">结束后</span>{{ list.course_after_buffer_time }}分钟（课程结束后{{ list.course_after_buffer_time }}分钟网络教室自动关闭）</td>
-            </tr>
-            <tr><td>时间段：{{ reduceFormMinute('12:00:00', list.course_before_buffer_time) }}-{{ addFormMinute('12:00:00', list.course_after_buffer_time) }}</td></tr>
-            <tr><td>扣费规则: --</td></tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">正常签退</td>
-                <td>课程<span class="r">结束后</span>退出教室</td>
-            </tr>
-            <tr>
-                <td>时间段：13:00:00-{{ addFormMinute('12:00:00', list.course_after_buffer_time) }}</td>
-            </tr>
-            <tr>
-                <td>扣费规则: --</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">早退</td>
-                <td>早于课程<span class="r">结束前</span>{{ list.online_early_sign_out_minutes }}分钟前退出云教室</td>
-            </tr>
-            <tr>
-                <td>时间段：12:00:00-{{ reduceFormMinuteMS("13:00:00", list.online_early_sign_out_minutes) }}</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.online_early_sign_out_cut_salary }}{{ list.online_early_sign_out_cut_salary_unit | formatUnit }}</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">异常签退</td>
-                <td>课程<span class="r">结束前</span>{{ list.online_early_sign_out_minutes }}分钟至课程<span class="r">结束前</span>退出教室</td>
-            </tr>
-            <tr>
-                <td>时间段：{{ reduceFormMinute("13:00:00", list.online_early_sign_out_minutes) }}-12:59:59</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.online_error_sign_out_cut_salary }}{{ list.online_error_sign_out_cut_salary_unit | formatUnit }}</td>
-            </tr>
-        </table>
+        <van-collapse v-model="activeNames" accordion>
+            <van-collapse-item title="可签到时间范围" name="1">
+                课程<span class="r">开始前</span>{{ list.course_before_buffer_time }}分钟至课程<span class="r">结束前</span>进入教室 <br />
+                时间段：{{ reduceFormMinute('12:00:00', list.course_before_buffer_time) }}-12:59:59 <br />
+                扣费规则: --
+            </van-collapse-item>
+            <van-collapse-item title="正常签到" name="2">
+                课程<span class="r">开始前</span>{{ list.course_before_buffer_time }}分钟至课程<span class="r">开始前</span>{{ list.course_before_buffer_time - list.online_advance_sign_in_minutes }}分钟进入教室<br />
+                时间段：{{ reduceFormMinute('12:00:00', list.course_before_buffer_time) }}-{{ reduceFormMinute('12:00:00', (list.course_before_buffer_time - list.online_advance_sign_in_minutes)) }}<br />
+                扣费规则: --
+            </van-collapse-item>
+            <van-collapse-item title="迟到" name="3">
+                课程<span class="r">开始前</span>{{ list.online_advance_sign_in_minutes }}分钟至课程<span class="r">开始后</span>{{ list.online_advance_sign_in_late_minutes }}分钟进入教室<br />
+                时间段：{{ reduceFormMinute('12:00:00', list.online_advance_sign_in_minutes) }}-{{ addFormMinute('12:00:00', list.online_advance_sign_in_late_minutes) }}<br />
+                扣费规则: -{{ list.online_late_cut_salary }}{{ list.online_late_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+            <van-collapse-item title="旷课" name="4">
+                课程<span class="r">开始后</span>{{ list.online_advance_sign_in_late_minutes }}分钟至课程<span class="r">结束前</span>进入教室<br />
+                时间段：{{ addFormMinuteAddS('12:00:00', list.online_advance_sign_in_late_minutes) }}后签到（包括{{ addFormMinuteAddS('12:00:00', list.online_advance_sign_in_late_minutes) }}）<br />
+                扣费规则: -{{ list.online_level_sign_in_cut_salary }}{{ list.online_level_sign_in_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+            <van-collapse-item title="未签到" name="5">
+                未进入网络教室<br />
+                时间段：--<br />
+                扣费规则: -{{ list.online_no_sign_in_cut_salary }}{{ list.online_no_sign_in_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+        </van-collapse>
+
+        <div class="sample">
+            <i class="line"></i>签退
+            <span>（以课程12:00:00-13:00:00为例）</span>
+        </div>
+        <van-collapse v-model="activeNames1" accordion>
+            <van-collapse-item title="可签退时间范围" name="1">
+                课程<span class="r">开始前</span>{{ list.course_before_buffer_time }}分钟至课程<span class="r">结束后</span>{{ list.course_after_buffer_time }}分钟（课程结束后{{ list.course_after_buffer_time }}分钟网络教室自动关闭）<br />
+                时间段：{{ reduceFormMinute('12:00:00', list.course_before_buffer_time) }}-{{ addFormMinute('12:00:00', list.course_after_buffer_time) }}<br />
+                扣费规则: --
+            </van-collapse-item>
+            <van-collapse-item title="正常签退" name="2">
+                课程<span class="r">结束后</span>退出教室<br />
+                时间段：13:00:00-{{ addFormMinute('12:00:00', list.course_after_buffer_time) }}<br />
+                扣费规则: --
+            </van-collapse-item>
+            <van-collapse-item title="早退" name="3">
+                早于课程<span class="r">结束前</span>{{ list.online_early_sign_out_minutes }}分钟前退出云教室<br />
+                时间段：12:00:00-{{ reduceFormMinuteMS("13:00:00", list.online_early_sign_out_minutes) }}<br />
+                扣费规则: -{{ list.online_early_sign_out_cut_salary }}{{ list.online_early_sign_out_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+            <van-collapse-item title="异常签退" name="4">
+                课程<span class="r">结束前</span>{{ list.online_early_sign_out_minutes }}分钟至课程<span class="r">结束前</span>退出教室<br />
+                时间段：{{ reduceFormMinute("13:00:00", list.online_early_sign_out_minutes) }}-12:59:59<br />
+                扣费规则: -{{ list.online_error_sign_out_cut_salary }}{{ list.online_error_sign_out_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+        </van-collapse>
     </div>
 </template>
 
@@ -134,12 +85,13 @@ export default {
     },
     data() {
         return {
-            list: {}
+            list: {},
+            activeNames: 1,
+            activeNames1: 1
         }
     },
     mounted() {
         this.list = this.dataList
-        console.log(this.list)
     },
     methods: {
         addFormMinute(timerStr, time) {
@@ -170,22 +122,28 @@ export default {
 </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;
-    }
+.title {
+    background-color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    text-align: center;
+    padding: 10px 0;
 }
-table + table {
-    margin-top: .15rem;
+.sample {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    padding: 10px 16px;
+    background-color: #F8F9FC;
+    .line {
+        display: inline-block;
+        margin-right: .06rem;
+        height: .16rem;
+        width: .04rem;
+        border-radius: .04rem;
+        background-color: #01C1B5;
+    }
 }
 .r {
     color: red;

src/views/rules/components/vipOffLine.vue

@@ -1,68 +1,34 @@
 <template>
-    <div>
-        <h2 style="font-size: 20px; text-align: center; padding: 10px 0;">VIP线下课</h2>
+    <div style="padding-bottom: 20px;">
+        <h2 class="title">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>课程开始前{{ list.enable_student_attendance_time_range_vip }}分钟至课程结束后{{ list.enable_student_attendance_time_range_vip }}分钟</td>
-            </tr>
-            <tr>
-                <td>时间段：{{ reduceFormMinute('12:00:00', list.enable_student_attendance_time_range_vip) }}-{{ addFormMinute('13:00:00', list.enable_student_attendance_time_range_vip) }}</td>
-            </tr>
-            <tr>
-                <td>扣费规则: --</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">正常签到签退</td>
-                <td>操作了【点名】，GPS定位在教学点{{ list.attendance_range }}米<span class="r">内</span></td>
-            </tr>
-            <tr>
-                <td>时间段：--</td>
-            </tr>
-            <tr>
-                <td>扣费规则: --</td>
-            </tr>
-            <!--  -->
-            <tr>
-                <td rowspan="3">异常签到签退</td>
-                <td>操作了【点名】，GPS定位在教学点{{ list.attendance_range }}米<span class="r">外</span></td>
-            </tr>
-            <tr>
-                <td>时间段：--</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.vip_offline_gps_error_cut_salary }}{{ list.vip_offline_gps_error_cut_salary_unit | formatUnit }}</td>
-            </tr>
-             <!--  -->
-            <tr>
-                <td rowspan="3">未签到签退</td>
-                <td>未进行【点名】</td>
-            </tr>
-            <tr>
-                <td>时间段：--</td>
-            </tr>
-            <tr>
-                <td>扣费规则: -{{ list.vip_offline_no_gps_error_cut_salary }}{{ list.vip_offline_no_gps_error_cut_salary_unit | formatUnit }}</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 class="sample">
+            <i class="line"></i>签到&签退
+            <span>（以课程12:00:00-13:00:00为例）</span>
+        </div>
+
+        <van-collapse v-model="activeNames" accordion>
+            <van-collapse-item title="可签到时间范围" name="1">
+                课程开始前{{ list.enable_student_attendance_time_range_vip }}分钟至课程结束后{{ list.enable_student_attendance_time_range_vip }}分钟 <br />
+                时间段：{{ reduceFormMinute('12:00:00', list.enable_student_attendance_time_range_vip) }}-{{ addFormMinute('13:00:00', list.enable_student_attendance_time_range_vip) }} <br />
+                扣费规则: --
+            </van-collapse-item>
+            <van-collapse-item title="正常签到签退" name="2">
+                操作了【点名】，GPS定位在教学点{{ list.attendance_range }}米<span class="r">内</span> <br />
+                时间段：-- <br />
+                扣费规则: --
+            </van-collapse-item>
+            <van-collapse-item title="异常签到签退" name="3">
+                操作了【点名】，GPS定位在教学点{{ list.attendance_range }}米<span class="r">外</span> <br />
+                时间段：-- <br />
+                扣费规则: -{{ list.vip_offline_gps_error_cut_salary }}{{ list.vip_offline_gps_error_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+            <van-collapse-item title="未签到签退" name="4">
+                未进行【点名】 <br />
+                时间段：-- <br />
+                扣费规则: -{{ list.vip_offline_no_gps_error_cut_salary }}{{ list.vip_offline_no_gps_error_cut_salary_unit | formatUnit }}
+            </van-collapse-item>
+        </van-collapse>
     </div>
 </template>
 
@@ -87,7 +53,8 @@ export default {
     },
     data() {
         return {
-            list: {}
+            list: {},
+            activeNames: 1
         }
     },
     mounted() {
@@ -122,22 +89,28 @@ export default {
 </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;
-    }
+.title {
+    background-color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    text-align: center;
+    padding: 10px 0;
 }
-table + table {
-    margin-top: .15rem;
+.sample {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    padding: 10px 16px;
+    background-color: #F8F9FC;
+    .line {
+        display: inline-block;
+        margin-right: .06rem;
+        height: .16rem;
+        width: .04rem;
+        border-radius: .04rem;
+        background-color: #01C1B5;
+    }
 }
 .r {
     color: red;

src/views/rules/index.vue

@@ -8,7 +8,6 @@
 
 <script>
 import { sysTenantConfig } from './api'
-import setLoading from '@/utils/loading'
 import OnLine from './components/onLine'
 import OffLine from './components/offLine'
 import vipOffLine from './components/vipOffLine'
@@ -56,30 +55,4 @@ export default {
         }
     }
 }
-</script>
-
-<style lang="less" scoped>
-.rules {
-    background: #ffffff;
-}
-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>
+</script>