考勤规则

1

src/views/attendance-rule/index.module.less

@@ -16,8 +16,8 @@
       background-color: #fff;
     }
     .van-collapse-item__content {
-      padding: 0 15px 18px;
-      padding-top: 18px;
+      padding: 18px 15px;
+
       border-top: 1px solid #f2f2f2;
       // margin-top: 18px;
     }
@@ -97,3 +97,10 @@
     }
   }
 }
+.sticky {
+  position: sticky;
+}
+
+.collapseWrap {
+  overflow: auto;
+}

src/views/attendance-rule/index.tsx

@@ -1,17 +1,21 @@
 import OHeader from '@/components/o-header'
 import OSticky from '@/components/o-sticky'
 import { Collapse, CollapseItem } from 'vant'
-import { defineComponent, reactive, onMounted } from 'vue'
+import { defineComponent, reactive, onMounted, nextTick, ref } from 'vue'
 import clockIcon from './images/clock-icon.png'
 import styles from './index.module.less'
 import request from '@/helpers/request'
 import { addFormMinute, reduceFormMinute } from '@/helpers/date'
+import { useRect } from '@vant/use'
+import { Html5Event } from 'plyr'
 export default defineComponent({
   name: 'attendance-rule',
   setup() {
     const state = reactive({
-      activeNames: []
+      activeNames: '',
+      wrapHeight: 0
     })
+    const divRef = ref()
     const forms = reactive({} as any)
     const getRules = async () => {
       try {
@@ -34,14 +38,21 @@ export default defineComponent({
     }
     onMounted(() => {
       getRules()
+      nextTick(() => {
+        setTimeout(() => {
+          console.log(divRef.value)
+          const { height, top } = useRect(divRef.value as Element)
+          state.wrapHeight = height + top + 45
+        }, 100)
+      })
     })
     return () => (
       <>
-        <OSticky position="top" background="#F8F8F8">
-          {/* <OHeader></OHeader> */}
-        </OSticky>
-        <div class={styles.attCollapseWrap}>
-          <Collapse v-model={state.activeNames}>
+        {/* <OSticky position="top" background="#F8F8F8">
+          <OHeader></OHeader>
+        </OSticky> */}
+        <div class={styles.attCollapseWrap} ref={divRef}>
+          <Collapse v-model={state.activeNames} accordion>
             <CollapseItem
               name="1"
               border={false}
@@ -54,7 +65,11 @@ export default defineComponent({
                 )
               }}
             >
-              <div>
+              <div
+                class={styles.collapseWrap}
+                style={{ height: `calc(100vh - ${state.wrapHeight}px)` }}
+              >
+                {state.wrapHeight}
                 <div class={styles.mainMsg}>
                   <img src={clockIcon} alt="" class={styles.clockIcon} />
                   <p>以课程时间12:00:00 ~ 13:00:00为例</p>
@@ -149,6 +164,7 @@ export default defineComponent({
             <CollapseItem
               name="2"
               border={false}
+              class={styles.sticky}
               v-slots={{
                 title: () => (
                   <div class={styles.collapseTitle}>
@@ -158,7 +174,10 @@ export default defineComponent({
                 )
               }}
             >
-              <div>
+              <div
+                class={styles.collapseWrap}
+                style={{ height: `calc(100vh - ${state.wrapHeight}px)` }}
+              >
                 <div class={styles.mainMsg}>
                   <img src={clockIcon} alt="" class={styles.clockIcon} />
                   <p>以课程时间12:00:00 ~ 13:00:00为例</p>
@@ -238,7 +257,10 @@ export default defineComponent({
                 )
               }}
             >
-              <div>
+              <div
+                class={styles.collapseWrap}
+                style={{ maxHeight: `calc(100vh - ${state.wrapHeight}px)` }}
+              >
                 <div class={styles.textWrap}>
                   <p>
                     <span>