fix: 图片转pdf 页面样式调整；修复手机端无法选择图片的问题

DESKTOP-6SQA27U\user · DESKTOP-6SQA27U\user · commit a32eb40b90fb · 2022-12-26T15:01:25.000+08:00
diff --git a/blog-user/index.html b/blog-user/index.html
@@ -1,4 +1,4 @@
 <!DOCTYPE html><html><head><meta charset=utf-8><title>孙权的博客</title><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name=keywords content="孙权的博客,sunq's blog,sunq,sunq's blog,个人博客,vue.js+node.js,vue.js,node.js,vue,jquery,css3,html5,前端博客,前端技术,css3学习,前端"><meta name=description content=孙权，前端程序猿，自己的技术博客，会一直更新。><link rel=icon href=favicon.jpg><meta name=google-site-verification content=Z4gA0x6X_RESh5-dFgNOtRjV9GFGqSrQCh3kXYgBTrQ><link href=https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.min.css rel=stylesheet><script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script><script>(adsbygoogle = window.adsbygoogle || []).push({
         google_ad_client: "ca-pub-8100230607365371",
         enable_page_level_ads: true
-      });</script><link href=css/app.c7b5a24e.css rel=preload as=style><link href=css/chunk-vendors.27724061.css rel=preload as=style><link href=js/app.0d4b435f.js rel=preload as=script><link href=js/chunk-vendors.2f54f223.js rel=preload as=script><link href=css/chunk-vendors.27724061.css rel=stylesheet><link href=css/app.c7b5a24e.css rel=stylesheet></head><body><noscript><strong>We're sorry but sunblog doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><div style="display: none;"><script src="https://s13.cnzz.com/z_stat.php?id=1275087148&web_id=1275087148" language=JavaScript></script></div><script src=js/chunk-vendors.2f54f223.js></script><script src=js/app.0d4b435f.js></script></body></html>
+      });</script><link href=js/chunk-2d216214.8358d10e.js rel=prefetch><link href=js/chunk-52fdfa29.e522834b.js rel=prefetch><link href=css/app.eac7b12c.css rel=preload as=style><link href=css/chunk-vendors.27724061.css rel=preload as=style><link href=js/app.92d12c2e.js rel=preload as=script><link href=js/chunk-vendors.6a813551.js rel=preload as=script><link href=css/chunk-vendors.27724061.css rel=stylesheet><link href=css/app.eac7b12c.css rel=stylesheet></head><body><noscript><strong>We're sorry but sunblog doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><div style="display: none;"><script src="https://s13.cnzz.com/z_stat.php?id=1275087148&web_id=1275087148" language=JavaScript></script></div><script src=js/chunk-vendors.6a813551.js></script><script src=js/app.92d12c2e.js></script></body></html>
diff --git a/src/components/ExperimentalField/imageToPdf.vue b/src/components/ExperimentalField/imageToPdf.vue
@@ -2,16 +2,18 @@
  * @Author: ke.xue
  * @Date: 2022-12-24 12:55:54
  * @LastEditors: ke.xue
- * @LastEditTime: 2022-12-24 15:05:25
+ * @LastEditTime: 2022-12-26 14:58:12
  * @FilePath: \SunQBlog-UserSide\src\components\experimentalField\imageToPdf.vue
  * @Description: 文件描述
 -->
 <template>
   <transition name="fade" mode="out-in">
     <div class="toPdf">
       <input v-if="showInput" type="file" accept="image/*" multiple="multiple" @change="inputChange">
-      <button class="button" @click="clearAll">清空</button>
-      <button class="button" @click="download">下载</button>
+      <div class="buttonBox">        
+        <button class="button" @click="clearAll">清空</button>
+        <button class="button" @click="download">下载</button>
+      </div>
       <div ref="imgs" class="imgsBox">
         <img v-for="(item, index) in imgs" :key="index" :src="item" alt="">
       </div>
@@ -129,6 +131,8 @@ export default {
 
 <style lang="less" scoped>
 .toPdf {
+  margin-top: 100px;
+  padding: 0 20px 20px;
   .imgsBox {
     margin: 10px auto;
     width: 600px;
@@ -137,6 +141,9 @@ export default {
       width: 600px;
     }
   }
+  .buttonBox {
+    margin-top: 30px;
+  }
   .button {
     min-width: 100px;
     border: 1px solid #2472c8;
