浏览代码

背景图换成能适应各种屏幕尺寸的

任一存 3 年之前
父节点
当前提交
402ab1ec31
共有 3 个文件被更改,包括 18 次插入14 次删除
  1. 二进制
      src/assets/image/bg-text.png
  2. 9 7
      src/views/AppCover.vue
  3. 9 7
      src/views/Home.vue

二进制
src/assets/image/bg-text.png


+ 9 - 7
src/views/AppCover.vue

@@ -21,7 +21,7 @@
       alt=""
       alt=""
     >
     >
     <img
     <img
-      class="background-image-text"
+      class="background-image"
       src="@/assets/image/bg-text.png"
       src="@/assets/image/bg-text.png"
       alt="background"
       alt="background"
     >
     >
@@ -71,13 +71,15 @@ export default {
   bottom: 6.547vh;
   bottom: 6.547vh;
   height: 3.438vh;
   height: 3.438vh;
 }
 }
-.background-image-text {
+.background-image {
   position: fixed;
   position: fixed;
-  left: 10%;
-  top: 10%;
-  object-fit: contain;
-  width: 80vw;
-  height: 80vh;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  object-fit: cover;
+  width: 100vw;
+  height: 100vh;
   z-index: -1;
   z-index: -1;
 }
 }
 </style>
 </style>

+ 9 - 7
src/views/Home.vue

@@ -36,7 +36,7 @@
       alt=""
       alt=""
     >
     >
     <img
     <img
-      class="background-image-text"
+      class="background-image"
       src="@/assets/image/bg-text.png"
       src="@/assets/image/bg-text.png"
       alt="background"
       alt="background"
     >
     >
@@ -124,13 +124,15 @@ export default {
     bottom: 6.547vh;
     bottom: 6.547vh;
     height: 3.438vh;
     height: 3.438vh;
   }
   }
-  .background-image-text {
+  .background-image {
     position: absolute;
     position: absolute;
-    left: 10%;
-    top: 10%;
-    object-fit: contain;
-    width: 80vw;
-    height: 80vh;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    object-fit: cover;
+    width: 100vw;
+    height: 100vh;
     z-index: -1;
     z-index: -1;
   }
   }
 }
 }