Jelajahi Sumber

移动端布局优化

Joe 4 tahun lalu
induk
melakukan
f0a1324ad7
4 mengubah file dengan 28 tambahan dan 12 penghapusan
  1. 4 0
      assets/css/common.css
  2. 4 0
      layouts/default.vue
  3. 4 1
      nuxt.config.js
  4. 16 11
      pages/point/detail.vue

+ 4 - 0
assets/css/common.css

@@ -0,0 +1,4 @@
+/* html{
+  font-size: 50vw;
+
+} */

+ 4 - 0
layouts/default.vue

@@ -16,5 +16,9 @@ html {
     'Helvetica Neue',
     Arial,
     sans-serif;
+    font-size: 13.698630136986301vw;
+}
+body {
+  font-size: 12px;	
 }
 </style>

+ 4 - 1
nuxt.config.js

@@ -55,5 +55,8 @@ export default {
         ]
       ]
     }
-  }
+  },
+  css:[
+    "~assets/css/common.css"
+  ]
 };

+ 16 - 11
pages/point/detail.vue

@@ -75,21 +75,26 @@ export default {
   box-sizing: border-box;
 }
 .outer .title .text {
-  height: 6.66vw;
-  font-size: 4.8vw;
+  height: 0.5rem;
+  width: 3.6rem;
+  font-size: 0.36rem;
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
   color: #111111;
-  line-height: 6.66vw;
+  line-height: 0.5rem;
 }
 
-.outer .title {
-width: 17px;
-height: 40px;
-font-size: 28px;
-font-family: PingFangSC-Medium, PingFang SC;
-font-weight: 500;
-color: #FE9700;
-line-height: 40px;
+.outer .title .price {
+  width: 1.34rem;
+  height: 0.7rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #fe9700;
+  line-height: 0.7rem;
+}
+.outer .title .price .amount{
+  font-size: 0.50rem;
 }
+
 </style>