修改样式

src/student/music-group/pre-apply/qrcode-payment/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, reactive } from 'vue'
 import { Icon, Image } from 'vant'
 import styles from './index.module.less'
 import orchestraTopBg from '@/school/save-share-image/images/orchestra-top_bg.png'
@@ -6,6 +6,8 @@ import OQrcode from '@/components/o-qrcode'
 import { browser } from '@/helpers/utils'
 import { useRouter } from 'vue-router'
 import OHeader from '@/components/o-header'
+import OSticky from '@/components/o-sticky'
+import { postMessage } from '@/helpers/native-message'
 
 export default defineComponent({
   name: 'qrcode-payment',
@@ -25,6 +27,9 @@ export default defineComponent({
   },
   setup(props) {
     const router = useRouter()
+    const state = reactive({
+      height: 0
+    })
     const onBack = () => {
       if (browser().isApp) {
         postMessage({ api: 'goBack' })
@@ -35,18 +40,18 @@ export default defineComponent({
     return () => (
       <div class={[styles.saveShareImage]}>
         {browser().isApp && (
-          <OHeader background="transparent">
-            {{
-              content: () => (
-                <div class={styles.btnHeader} onClick={onBack}>
-                  <Icon name="arrow-left" class={styles.iconBack} />
-                </div>
-              )
+          <OSticky
+            position="top"
+            onGetHeight={(height: any) => {
+              state.height = height
+              console.log(height, 'height')
             }}
-          </OHeader>
+          >
+            <OHeader title={props.orderType === 'VIP' ? '会员购买' : '报名缴费'} />
+          </OSticky>
         )}
 
-        <Image src={orchestraTopBg} class={styles.topImage} />
+        <Image src={orchestraTopBg} class={styles.topImage} style={{ top: state.height + 'px' }} />
         <div class={[styles.shareContaienr, styles.orchestraContainer]}>
           <div class={styles.schoolName}>{props.orderType === 'VIP' ? '会员购买' : '报名缴费'}</div>
           <div class={styles.shareType}>