Explorar o código

完成真正的启动页

任一存 hai 1 ano
pai
achega
eec90e1788
Modificáronse 2 ficheiros con 30 adicións e 6 borrados
  1. BIN=BIN
      src/assets/images/cover-bg.jpg
  2. 30 6
      src/views/HomeView.vue

BIN=BIN
src/assets/images/cover-bg.jpg


+ 30 - 6
src/views/HomeView.vue

@@ -23,7 +23,7 @@ import { useRoute, useRouter } from "vue-router"
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+} = useSizeAdapt(724, 375)
 
 const route = useRoute()
 const router = useRouter()
@@ -51,16 +51,40 @@ function onClickCopy() {
   top: 0;
   width: 100%;
   height: 100%;
+  background-image: url(@/assets/images/cover-bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
   >.btn-group{
     position: absolute;
-    left: 50%;
-    bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    transform: translateX(-50%);
+    bottom: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     >button{
-
+      flex: 0 0 auto;
+      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
+      font-weight: bold;
+      color: #484238;
+      line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
     }
     >button:first-of-type{
-      margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background-image: url(@/assets/images/btn-long-bright.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(186 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >button:last-of-type{
+      background-image: url(@/assets/images/btn-short-dark.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(144 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
     }
   }
 }