1

1

src/school/school-detail/index.tsx

@@ -1,7 +1,8 @@
 import OHeader from '@/components/o-header'
 import OSticky from '@/components/o-sticky'
 import { Tabs, Tab, showToast, Icon } from 'vant'
-import { defineComponent, reactive, ref, onMounted } from 'vue'
+import { defineComponent, reactive, ref, onMounted, onDeactivated } from 'vue'
+import eidtIcon from './images/eidt-icon.png'
 import styles from './index.module.less'
 import schoolBg from './images/school-bg.png'
 import logoIcon from './images/logo.png'
@@ -17,7 +18,9 @@ export default defineComponent({
     const router = useRouter()
     const state = reactive({
       list: [],
-      info: {} as any
+      info: {} as any,
+      heightV: 0 as number,
+      scrollTop: 0 as number
     })
     const getSchoolDetail = async () => {
       const schoolId = (globalState.user.data.schoolInfos || [])
@@ -56,14 +59,37 @@ export default defineComponent({
       }
     }
     onMounted(() => {
+      window.addEventListener('scroll', handleScroll)
       getSchoolDetail()
       getTeacherList()
     })
+    onDeactivated(() => {
+      window.removeEventListener('scroll', handleScroll)
+    })
+    const getHeight = (dataHeight: number) => {
+      state.heightV = dataHeight
+      console.log(dataHeight, 'dataHeight')
+    }
+    const handleScroll = () => {
+      const scrollTop =
+        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+      state.scrollTop = scrollTop
+    }
     return () => (
       <>
         <div class={styles.schoolWrap}>
           <img src={schoolBg} class={styles.schoolBg} alt="" />
-          <OHeader border={false} background={'transparent'}></OHeader>
+
+          <OSticky onGetHeight={getHeight}>
+            <OHeader
+              border={false}
+              background={state.heightV > state.scrollTop ? 'transparent' : '#fff'}
+            >
+              {{
+                right: () => <Icon style={{ fontSize: '24px' }} name={eidtIcon}></Icon>
+              }}
+            </OHeader>
+          </OSticky>
           <div class={styles.absWrap}>
             <div class={styles.schoolMainTitle}>
               <div class={styles.schoolMainLeft}>
@@ -78,9 +104,7 @@ export default defineComponent({
               </div>
             </div>
             <div class={styles.detailInfo}>
-              <p onClick={gotoEidt}>
-                地址：{state.info.address} <Icon class={styles.eidtIcon} name="edit"></Icon>
-              </p>
+              <p>地址：{state.info.address}</p>
               <p>学年制：{schoolSystem[state.info.schoolSystem]} </p>
               <p>邮箱：{state.info.email}</p>
               <p>管理老师：{state.info.educationalAdministrationUsername}</p>

src/school/school-detail/modals/teacher-item.module.less

@@ -57,7 +57,7 @@
   .bottomWrap {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: top;
     padding: 15px 12px;
     font-size: 14px;
     font-family: PingFangSC-Medium, PingFang SC;
@@ -65,9 +65,11 @@
     color: #333333;
     line-height: 20px;
     p {
+      width: 42px;
       margin-bottom: 6px;
     }
     .statusTagWrap {
+      flex: 1;
       display: flex;
       flex-direction: row;
       align-items: top;

src/views/exercise-record/exercis-detail.tsx

@@ -14,7 +14,7 @@ import {
   Dialog
 } from 'vant'
 import DetailItem from './modals/detail-item'
-import { defineComponent, onMounted, reactive, ref } from 'vue'
+import { defineComponent, onMounted, reactive, ref, onDeactivated } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import styles from './exercis-detail.module.less'
 import request from '@/helpers/request'
@@ -113,6 +113,9 @@ export default defineComponent({
       getDetail()
       window.addEventListener('scroll', handleScroll)
     })
+    onDeactivated(() => {
+      window.removeEventListener('scroll', handleScroll)
+    })
     const handleScroll = () => {
       const scrollTop =
         window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0