From aacb2b71fdc653499abb7ffb2c3159d2a30d3b93 Mon Sep 17 00:00:00 2001
From: Jesse-Ma <24167796@qq.com>
Date: Wed, 12 Apr 2023 17:01:48 +0800
Subject: [PATCH] affix

---
 src/App.vue            |  4 +--
 src/views/EditNote.vue | 50 +++++++++++++++++---------------------
 src/views/ViewNote.vue | 55 ++++++++++++++++++++----------------------
 3 files changed, 49 insertions(+), 60 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f2b1a4f..96b73ae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,5 @@
 <template>
-  <div id="app">
     <router-view></router-view>
-  </div>
 </template>
 
 <script>
@@ -54,7 +52,7 @@ body {
 }
 
 .noteHeaderShade {
-  background: linear-gradient(to top,rgba(255,255,255,0.7),rgba(255,255,255,1));
+  background-color: white;
   width:100%;
   height:40px;
   border-bottom: dashed #ed4014 1px;
diff --git a/src/views/EditNote.vue b/src/views/EditNote.vue
index 1e23cc3..ce28816 100644
--- a/src/views/EditNote.vue
+++ b/src/views/EditNote.vue
@@ -75,12 +75,11 @@
 
     <Layout>
 
-      <Header class="header">
-        <Row>
-          <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
-            :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
-
-          <Affix :offset-top="0">
+      <div style="position:fixed;z-index:10;width:100%">
+        <Header class="header">
+          <Row>
+            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+              :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
             <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">
 
               <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
@@ -124,13 +123,22 @@
 
 
             </div>
-          </Affix>
 
+            </Col>
+          </Row>
+        </Header>
+      </div>
 
-
-          </Col>
-        </Row>
-      </Header>
+      <Content class="content">
+        <div>
+          <Row>
+            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+              :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
+            <div class="noteHeader" style="height:40px;"></div>
+            </Col>
+          </Row>
+        </div>
+      </Content>
 
       <Content class="content">
         <div style="min-height: 650px;">
@@ -143,7 +151,7 @@
                   <Input element-id="noteText" type="textarea" :border="false" v-model="noteForm.text" autofocus
                     :autosize="{ minRows: 35, maxRows: 100000 }" :placeholder="$t('content.noteTip')" @input="recordText"
                     @on-keydown="recordEventKdown" />
-                  
+
                 </div>
               </Form>
             </Card>
@@ -195,6 +203,7 @@ import { isWeixin } from "@/libs/utils";
 import NoteConstant from "@/libs/constants";
 import html2canvas from "html2canvas";
 
+
 export default {
   name: 'EditNote',
   props: {},
@@ -301,21 +310,6 @@ export default {
     window.wasm_bindgen(window.wasm_flate_bg_path);
   },
   mounted() {
-    const myObserver = new ResizeObserver(entries => {
-      // iterate over the entries, do something.
-      entries.forEach(entry => {
-        let affix = document.querySelector('.ivu-affix');
-        if (affix) {
-          affix.setAttribute("style", "top: 0px; width: " + (entry.contentRect.width + 2) + "px;");
-        }
-
-      });
-    });
-
-    const someOtherEl = document.querySelector('#wrapper');
-
-    myObserver.observe(someOtherEl);
-
     window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
   },
   updated() {
@@ -602,7 +596,7 @@ export default {
       });
     },
     beforeunloadHandler() {
-      if(this.state.deleted==0){
+      if (this.state.deleted == 0) {
         setStoreText(this.noteForm, this.state, this.secret);
       }
     },
diff --git a/src/views/ViewNote.vue b/src/views/ViewNote.vue
index b775a25..f6ff95d 100644
--- a/src/views/ViewNote.vue
+++ b/src/views/ViewNote.vue
@@ -162,12 +162,12 @@
 <template>
   <div class="layout">
     <Layout>
+      <div style="position:fixed;z-index:10;width:100%">
+        <Header class="header">
+          <Row>
+            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+              :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
 
-      <Header class="header">
-        <Row>
-          <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
-            :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
-          <Affix :offset-top="0">
             <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">
               <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
                 v-on:click="refreshPage()">
@@ -219,9 +219,9 @@
 
                 <!--
 
-                                <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
-                                @click="refreshPage()"></Button>
-                              -->
+                                  <Button type="error" icon="md-refresh" style="border-radius: 0px;font-size: 24px;"
+                                  @click="refreshPage()"></Button>
+                                -->
                 <Button aria-label="crop" v-show="model.showDownloadText" type="error" icon="md-crop"
                   style="border-radius: 0px;font-size: 24px;" @click="saveImage(); switchMenu();"></Button>
 
@@ -235,13 +235,25 @@
 
             </div>
 
-          </Affix>
 
 
 
-          </Col>
-        </Row>
-      </Header>
+
+            </Col>
+          </Row>
+        </Header>
+      </div>
+
+      <Content class="content">
+        <div>
+          <Row>
+            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+              :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
+            <div class="noteHeader" style="height:40px;"></div>
+            </Col>
+          </Row>
+        </div>
+      </Content>
 
       <Content class="content">
         <div style="min-height: 650px;">
@@ -252,7 +264,7 @@
               <div ref="html2canvas" id="wrapper" style="border-left: 2px solid white;">
                 <Skeleton :loading="showSkeleton">
                   <template #template>
-                    <div style="  padding: 10px;  width: 100%;  height: 800px;text-align: left;" >
+                    <div style="  padding: 10px;  width: 100%;  height: 800px;text-align: left;">
                       <SkeletonItem />
                       <SkeletonItem block width="80%" height="16px" />
                       <SkeletonItem width="80%" height="16px" class="ivu-mr" />
@@ -452,21 +464,6 @@ export default {
 
   },
   mounted() {
-
-    const myObserver = new ResizeObserver(entries => {
-      // iterate over the entries, do something.
-      entries.forEach(entry => {
-        let affix = document.querySelector('.ivu-affix');
-        if (affix) {
-          affix.setAttribute("style", "top: 0px; width: " + (entry.contentRect.width + 2) + "px;");
-        }
-
-      });
-    });
-
-    const someOtherEl = document.querySelector('#wrapper');
-    myObserver.observe(someOtherEl);
-
     let qrimg = document.getElementById("qrImg");
     let qrurl = "https://flagnote.com/" + this.noteForm.key;
     var opts = {
@@ -484,7 +481,7 @@ export default {
       storage.session.setText(this.secret.storeKey + "_share", '0');
       setTimeout(() => {
         this.showShareModel();
-      }, 100); 
+      }, 100);
     }
   },
   updated() {