H5
/
wenhua-poem
关注 4
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

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

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

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

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

1 
 <template>
 1 
 <template>
2 
-  <div class="page" :style="pgStyle">
2 
+  <div class="page making-page" :style="pgStyle">
3 
     <div class="image-saved" v-if="creation">
 3 
     <div class="image-saved" v-if="creation">
4 
       <img :src="creation" alt="">
 4 
       <img :src="creation" alt="">
5 
     </div>
 5 
     </div>
9 
       <div class="poem-content" :style="ttStyle" v-html="pureHtml"></div>
 9 
       <div class="poem-content" :style="ttStyle" v-html="pureHtml"></div>
10 
     </div>
 10 
     </div>
11 
     <TGradient :style="gdStyle" color="#0f2c37" />
 11 
     <TGradient :style="gdStyle" color="#0f2c37" />
12 
-    <template v-if="creation">
12 
+    <template v-if="!creation">
13 
       <img class="next-img" :src="nextImg" alt="" @click="onNextClick">
 13 
       <img class="next-img" :src="nextImg" alt="" @click="onNextClick">
14 
       <img class="press-img" :src="pressImg" alt="" :style="psStyle">
 14 
       <img class="press-img" :src="pressImg" alt="" :style="psStyle">
15 
     </template>
 15 
     </template>
116 
 </script>
 116 
 </script>
117
117
118 
 <style lang="less" scoped>
 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 
       background: transparent;
 139 
       background: transparent;
122 
-      // background: rgba(255, 0,0, .5);
123 
       position: absolute;
 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 
       position: absolute;
 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 
 </style>
 165 
 </style>

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

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 
   return fitHeight > height ? { height: `${fitHeight}px`, overflow: 'hidden' } : { height: `${height}px`, overflow: 'hidden' }
 7 
   return fitHeight > height ? { height: `${fitHeight}px`, overflow: 'hidden' } : { height: `${height}px`, overflow: 'hidden' }
6 
 }
 8 
 }