Browse Source

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

任一存 3 năm trước cách đây
mục cha
commit
402ab1ec31
3 tập tin đã thay đổi với 18 bổ sung14 xóa
  1. BIN
      src/assets/image/bg-text.png
  2. 9 7
      src/views/AppCover.vue
  3. 9 7
      src/views/Home.vue

BIN
src/assets/image/bg-text.png


+ 9 - 7
src/views/AppCover.vue

@@ -21,7 +21,7 @@
       alt=""
     >
     <img
-      class="background-image-text"
+      class="background-image"
       src="@/assets/image/bg-text.png"
       alt="background"
     >
@@ -71,13 +71,15 @@ export default {
   bottom: 6.547vh;
   height: 3.438vh;
 }
-.background-image-text {
+.background-image {
   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;
 }
 </style>

+ 9 - 7
src/views/Home.vue

@@ -36,7 +36,7 @@
       alt=""
     >
     <img
-      class="background-image-text"
+      class="background-image"
       src="@/assets/image/bg-text.png"
       alt="background"
     >
@@ -124,13 +124,15 @@ export default {
     bottom: 6.547vh;
     height: 3.438vh;
   }
-  .background-image-text {
+  .background-image {
     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;
   }
 }