优化响应式代码配置

src/components/ePreviewPdf/index.vue

@@ -107,8 +107,8 @@ export default {
             if (canvas) {
               canvas.width = width * ratio;
               canvas.height = height * ratio;
-              canvas.style.width = width/10 + "em";
+              canvas.style.width = width / 10 + "em";
-              canvas.style.height = height/10 + "em";
+              canvas.style.height = height / 10 + "em";
               ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
 
               let renderTask = page.render({

src/layout/eFooter/eCopy.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="copy">
     <div class="container">
-      <div v-for="(el, i) in copys" :key="i">
+      <span v-for="(el, i) in copys" :key="i">
         <b-link v-if="el.href" :href="el.href">
           {{ el.name }}
         </b-link>
-        <span  v-else> {{ el.name }} </span>
+        <span v-else> {{ el.name }} </span>
-      </div>
+      </span>
-      <div class="line" />
+      <span class="line" />
-      <div v-for="(el, i) in links" :key="copys.length+i">
+      <span v-for="(el, i) in links" :key="copys.length + i">
         <b-link :href="el.href"> {{ el.name }}</b-link>
-      </div>
+      </span>
     </div>
   </div>
 </template>
@@ -59,12 +59,10 @@ a {
   background-color: #e6e6e6;
   text-align: center;
   color: #666;
+  padding: 1em 0;
 
   .container {
     width: 100%;
-    height: 5em;
-    display: flex;
-    justify-content: center;
     align-items: center;
   }
 

src/views/Home/main/eRecommend.vue

@@ -141,35 +141,35 @@ export default {
 @media (min-width: 320px) {
   .frame {
     width: 220px;
-    height: 180px;
+    height: 120px;
   }
 }
 
 @media (min-width: 480px) {
   .frame {
     width: 300px;
-    height: 200px;
+    height: 180px;
   }
 }
 
 @media (min-width: 760px) {
   .frame {
-    width: 560px;
+    width: 600px;
-    height: 220px;
+    height: 180px;
   }
 }
 
 @media (min-width: 960px) {
   .frame {
     width: 1000px;
-    height: 260px;
+    height: 220px;
   }
 }
 
 @media (min-width: 1200px) {
   .frame {
     width: 1100px;
-    height: 300px;
+    height: 280px;
   }
 }
 </style>

src/views/PreviewPdf/index.vue

@@ -49,14 +49,31 @@ export default {
 <style lang="scss" scoped>
 .pdf {
   background: #f7f7f9;
-  padding: 10px 0;
+  padding: 1em 0;
   min-height: 100vh;
 
   .page {
-    width: 55%;
     margin: auto;
     background: #fff;
-    margin-bottom: 10px;
+    margin-bottom: 1em;
+  }
+
+  @media (min-width: 320px) {
+    .page {
+      width: 100%;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .page {
+      width: 80%;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    .page {
+      width: 60%;
+    }
   }
 }
 </style>

src/views/Relation.vue

@@ -31,6 +31,7 @@ export default {
   background: #f7f7f9;
   padding: 1em;
   width: 100%;
+  min-height: 100vh;
 
   .container {
     margin: auto;