修改样式

src/components/o-header/index.tsx

@@ -77,6 +77,11 @@ export default defineComponent({
       this.onHeaderBack && this.onHeaderBack()
     })
   },
+  watch: {
+    title() {
+      this.headerTitle = this.title || this.$route.meta.title
+    }
+  },
   unmounted() {
     if (this.desotry) {
       // 设置是否显示导航栏 0 不显示 1 显示

src/school/save-share-image/index.tsx

@@ -24,6 +24,7 @@ import orchestraTopBg from './images/orchestra-top_bg.png'
 import defaultLogo from '@/common/images/logo@2x.png'
 import OHeader from '@/components/o-header'
 import { browser } from '@/helpers/utils'
+import OSticky from '@/components/o-sticky'
 
 export default defineComponent({
   name: 'save-share-image',
@@ -32,12 +33,14 @@ export default defineComponent({
     const router = useRouter()
     const state = reactive({
       type: route.query.type as any,
+      height: 0,
       paramValue: 2,
       schoolName: '',
       schoolId: '',
       url: null as any,
       schoolLogo: '',
-      loading: false
+      loading: false,
+      name: ''
     })
 
     const imgs = reactive({
@@ -200,12 +203,13 @@ export default defineComponent({
 
     onMounted(async () => {
       if (state.type === 'teacher') {
-        document.title = '乐团伴学指导注册'
+        state.name = '乐团伴学指导注册'
       } else if (state.type === 'manage') {
-        document.title = '乐团管理老师注册'
+        state.name = '乐团管理老师注册'
       } else if (state.type === 'orchestra') {
-        document.title = '乐团报名'
+        state.name = '乐团报名'
       }
+      document.title = state.name
       try {
         const { data } = await request.get('/api-school/open/paramConfig/queryByParamName', {
           requestType: 'form',
@@ -234,18 +238,27 @@ export default defineComponent({
     }
     return () => (
       <div class={[styles.saveShareImage]}>
-        <OHeader background="transparent" style="position: fixed; width: 100%;z-index: 999">
-          {{
-            content: () => (
-              <div class={styles.btnHeader} onClick={onBack}>
-                <Icon name="arrow-left" class={styles.iconBack} />
-              </div>
-            )
+        <OSticky
+          position="top"
+          onGetHeight={(height: any) => {
+            state.height = height
           }}
-        </OHeader>
-        {state.type === 'teacher' && <Image src={teacherTopBg} class={styles.topImage} />}
-        {state.type === 'manage' && <Image src={manageTopBg} class={styles.topImage} />}
-        {state.type === 'orchestra' && <Image src={orchestraTopBg} class={styles.topImage} />}
+        >
+          <OHeader title={state.name} />
+        </OSticky>
+        {state.type === 'teacher' && (
+          <Image src={teacherTopBg} class={styles.topImage} style={{ top: state.height + 'px' }} />
+        )}
+        {state.type === 'manage' && (
+          <Image src={manageTopBg} class={styles.topImage} style={{ top: state.height + 'px' }} />
+        )}
+        {state.type === 'orchestra' && (
+          <Image
+            src={orchestraTopBg}
+            class={styles.topImage}
+            style={{ top: state.height + 'px' }}
+          />
+        )}
         <div
           class={[styles.shareContaienr, state.type === 'orchestra' && styles.orchestraContainer]}
         >
@@ -299,7 +312,11 @@ export default defineComponent({
         </div>
 
         {!state.loading && (
-          <div class={[styles.saveShareImage, styles.previewSection]} id="preview-container">
+          <div
+            class={[styles.saveShareImage, styles.previewSection]}
+            style={{ top: state.height + 'px' }}
+            id="preview-container"
+          >
             {state.type === 'teacher' && <Image src={teacherTopBg} class={styles.topImage} />}
             {state.type === 'manage' && <Image src={manageTopBg} class={styles.topImage} />}
             {state.type === 'orchestra' && <Image src={orchestraTopBg} class={styles.topImage} />}