orchestra-app/src/views/attendance-rule/index.tsx

import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { useRect } from '@vant/use'

import { Collapse, CollapseItem, dividerProps } from 'vant'
import { defineComponent, onMounted, reactive, ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import clockIcon from './images/clock-icon.png'
import styles from './index.module.less'
const activeName = ref('student')
export default defineComponent({
  name: 'attendance-rule',
  setup() {
    const router = useRouter()
    const state = reactive({
      activeNames: ['1']
    })
    const stickyRef = ref()

    return () => (
      <>
        <OSticky position="top" background="#F8F8F8">
          <OHeader></OHeader>
        </OSticky>
        <div class={styles.attCollapseWrap}>
          <Collapse v-model={state.activeNames}>
            <CollapseItem
              name="1"
              border={false}
              v-slots={{
                title: () => (
                  <div class={styles.collapseTitle}>
                    <span class={styles.dot}></span>
                    签到规则
                  </div>
                )
              }}
            >
              <div>
                <div class={styles.mainMsg}>
                  <img src={clockIcon} alt="" class={styles.clockIcon} />
                  <p>以课程时间12:00:00 ~ 13:00:00为例</p>
                </div>
                <div class={styles.textWrap}>
                  <h4>可签到时间范围：</h4>
                  <p>
                    课程<span>开始前60分钟</span>至课程<span>结束前</span>
                  </p>
                  <p>时间段：11:00:00 ~ 13:00</p>
                </div>

                <div class={styles.textWrap}>
                  <h4>正常签到：</h4>
                  <p>
                    课程<span>开始前60分钟</span>至课程<span>开始前20分钟</span>
                    签到GPS定位点在教学点<span>1000米内</span>
                  </p>
                  <p>时间段：11:00:00 ~ 11:40:00</p>
                </div>

                <div class={styles.textWrap}>
                  <h4>异常签到：</h4>
                  <p>
                    课程<span>开始前20分钟</span>后至课程<span>开始前</span>
                    签到GPS定位点在教学点<span>1000米外</span>
                  </p>
                  <p>时间段：11:00:00 ~ 11:40:00</p>
                  <p>
                    扣除训练补助：<span>-50元</span>
                  </p>
                </div>

                <div class={styles.textWrap}>
                  <h4>迟到：</h4>
                  <p>
                    课程<span>开始后30分钟</span>内签到
                  </p>
                  <p>时间段：12:00:00 ~ 12:30:00</p>
                  <p>
                    扣除训练补助：<span>-100%</span>
                  </p>
                </div>

                <div class={styles.textWrap}>
                  <h4>旷课：</h4>
                  <p>
                    课程<span>开始后30分钟</span>至课程<span>结束前</span>签到
                  </p>
                  <p>时间段：11:30:00后签到（含11:30:00）</p>
                  <p>
                    扣除训练补助：<span>-100%</span>
                  </p>
                </div>

                <div class={styles.textWrap}>
                  <h4>未签到：</h4>
                  <p>未进行【签到】操作</p>
                  <p>
                    扣除训练补助：<span>-100%</span>
                  </p>
                </div>
              </div>
            </CollapseItem>
            <CollapseItem
              name="2"
              border={false}
              v-slots={{
                title: () => (
                  <div class={styles.collapseTitle}>
                    <span class={styles.dot}></span>
                    签退规则
                  </div>
                )
              }}
            >
              <div>
                <div class={styles.mainMsg}>
                  <img src={clockIcon} alt="" class={styles.clockIcon} />
                  <p>以课程时间12:00:00 ~ 13:00:00为例</p>
                </div>
                <div class={styles.textWrap}>
                  <h4>可签退时间范围：</h4>
                  <p>
                    课程<span>开始后</span>至课程当天24点前
                  </p>
                  <p>时间段：12:00:00 ~ 23:59:59</p>
                </div>

                <div class={styles.textWrap}>
                  <h4>正常签退：</h4>
                  <p>
                    课程<span>结束后</span>至课程<span>开始后360分钟</span>
                    签退GPS定位点在教学点<span>1000米内</span>
                  </p>
                  <p>时间段：13:00:00 ~ 19:00:00</p>
                </div>
                <div class={styles.textWrap}>
                  <h4>早退：</h4>
                  <p>
                    课程<span>开始后30分钟</span>内签到
                  </p>
                  <p>时间段：12:00:00 ~ 12:30:00</p>
                  <p>
                    扣除训练补助：<span>-100%</span>
                  </p>
                </div>

                <div class={styles.textWrap}>
                  <h4>异常签到：</h4>
                  <p>
                    课程<span>开始前20分钟</span>后至课程<span>开始前</span>
                    签到GPS定位点在教学点<span>1000米外</span>
                  </p>
                  <p>时间段：11:00:00 ~ 11:40:00</p>
                  <p>
                    扣除训练补助：<span>-50元</span>
                  </p>
                </div>

                <div class={styles.textWrap}>
                  <h4>旷课：</h4>
                  <p>
                    课程<span>开始后30分钟</span>至课程<span>结束前</span>签到
                  </p>
                  <p>时间段：11:30:00后签到（含11:30:00）</p>
                  <p>
                    扣除训练补助：<span>-100%</span>
                  </p>
                </div>

                <div class={styles.textWrap}>
                  <h4>未签到：</h4>
                  <p>未进行【签到】操作</p>
                  <p>
                    扣除训练补助：<span>-100%</span>
                  </p>
                </div>
              </div>
            </CollapseItem>
            <CollapseItem
              name="3"
              border={false}
              v-slots={{
                title: () => (
                  <div class={styles.collapseTitle}>
                    <span class={styles.dot}></span>
                    签到规则
                  </div>
                )
              }}
            ></CollapseItem>
          </Collapse>
        </div>
      </>
    )
  }
})