H5
/
wenhua-poem
關注 4
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

feats

Yansen 2 年之前
父節點
d6921e2ce0
當前提交
bc7efad3ae
共有 4 個檔案被更改，包括 45 行新增 和 39 行删除
分割檢視 顯示文件統計
  1. 2
    2
      index.html
  2. 1
    1
      src/components/Image.vue
  3. 38
    34
      src/pages/makeSaving/index.vue
  4. 4
    2
      src/utils/page.js

+ 2
- 2
index.html 查看文件 

@@ -9,10 +9,10 @@
9 9 
     <script src="./qrcode.min.js"></script>
10 10 
     <script src="./config.js"></script>
11 11 
     <title>和“宁好”一起，跟着诗歌游南京</title>
12 
-    <!-- <script src="./vconsole.min.js"></script>
12 
+    <script src="./vconsole.min.js"></script>
13 13 
     <script>
14 14 
       const vConsole = new VConsole();
15 
-    </script> -->
15 
+    </script>
16 16 
   </head>
17 17 
   <body>
18 18 
     <div id="app"></div>

+ 1
- 1
src/components/Image.vue 查看文件 

@@ -20,7 +20,7 @@
20 20 
     src: String,
21 21 
     actions: Array,
22 22 
   });
23 
-  const emit = defineEmits('load');
23 
+  const emit = defineEmits(['load']);
24 24
25 25 
   const centers = ref([]);
26 26

+ 38
- 34
src/pages/makeSaving/index.vue 查看文件 

@@ -1,5 +1,5 @@
1 1 
 <template>
2 
-  <div class="page" :style="pgStyle">
2 
+  <div class="page making-page" :style="pgStyle">
3 3 
     <div class="image-saved" v-if="creation">
4 4 
       <img :src="creation" alt="">
5 5 
     </div>
 
@@ -9,7 +9,7 @@
9 9 
       <div class="poem-content" :style="ttStyle" v-html="pureHtml"></div>
10 10 
     </div>
11 11 
     <TGradient :style="gdStyle" color="#0f2c37" />
12 
-    <template v-if="creation">
12 
+    <template v-if="!creation">
13 13 
       <img class="next-img" :src="nextImg" alt="" @click="onNextClick">
14 14 
       <img class="press-img" :src="pressImg" alt="" :style="psStyle">
15 15 
     </template>
 
@@ -116,46 +116,50 @@
116 116 
 </script>
117 117
118 118 
 <style lang="less" scoped>
119 
-  .poem-wrapper {
120 
-    .poem-content {
119 
+  .making-page {
120 
+    .poem-wrapper {
121 
+      .poem-content {
122 
+        background: transparent;
123 
+        // background: rgba(255, 0,0, .5);
124 
+        position: absolute;
125 
+
126 
+        writing-mode: vertical-rl;
127 
+        font-size: 18px;
128 
+        color: #0F3341;
129 
+        line-break: anywhere;
130 
+      }
131 
+
132 
+      .qrcode {
133 
+        display: block;
134 
+        position: absolute;
135 
+      }
136 
+    }
137 
+
138 
+    .image-saved {
121 139 
       background: transparent;
122 
-      // background: rgba(255, 0,0, .5);
123 140 
       position: absolute;
124 
-
125 
-      writing-mode: vertical-rl;
126 
-      font-size: 18px;
127 
-      color: #0F3341;
128 
-      line-break: anywhere;
141 
+      z-index: 10;
142 
+      left: 0;
143 
+      top: 0;
144 
+
145 
+      & > img {
146 
+        display: block;
147 
+        width: 100%;
148 
+      }
129 149 
     }
130 150
131 
-    .qrcode {
132 
-      display: block;
151 
+    .next-img {
152 
+      top: 0;
153 
+      right: 60px;
154 
+      width: 30px;
133 155 
       position: absolute;
156 
+      z-index: 100;
134 157 
     }
135 
-  }
136 
-
137 
-  .image-saved {
138 
-    position: absolute;
139 
-    z-index: 10;
140 
-    left: 0;
141 
-    top: 0;
142 158
143 
-    & > img {
144 
-      display: block;
145 
-      width: 100%;
159 
+    .press-img {
160 
+      position: absolute;
161 
+      z-index: 100;
146 162 
     }
147 163 
   }
148 164
149 
-  .next-img {
150 
-    top: 0;
151 
-    right: 60px;
152 
-    width: 30px;
153 
-    position: absolute;
154 
-    z-index: 100;
155 
-  }
156 
-
157 
-  .press-img {
158 
-    position: absolute;
159 
-    z-index: 100;
160 
-  }
161 165 
 </style>

+ 4
- 2
src/utils/page.js 查看文件 

@@ -1,6 +1,8 @@
1 1
2 
-export function getPageStyle(fitHeight) {
3 
-  const height = document.documentElement.clientHeight || document.body.clientHeight;
2 
+// 这个值先取, 不能动态
3 
+// 因为移动端出现输入法的时候会变
4 
+const height = document.documentElement.clientHeight || document.body.clientHeight;
4 5
6 
+export function getPageStyle(fitHeight) {
5 7 
   return fitHeight > height ? { height: `${fitHeight}px`, overflow: 'hidden' } : { height: `${height}px`, overflow: 'hidden' }
6 8 
 }