- [新增] 开始编写Header组件

montage-f · Sep 25, 2019 · 3ca9575 · 3ca9575
1 parent bcf8295
commit 3ca9575
Show file tree

Hide file tree

Showing 3 changed files with 8,409 additions and 6 deletions.
diff --git a/src/views/Home/components/Header.vue b/src/views/Home/components/Header.vue
@@ -2,13 +2,13 @@
 <template>
     <div class="Header">
         <div class="header-left">
-            hello world
+            返回
         </div>
         <div class="header-input">
-
+            1
         </div>
         <div class="header-right">
-
+            城市
         </div>
     </div>
 </template>
@@ -32,7 +32,25 @@
     // 我们将html的字体大小设置为75px
     // 那么 1rem = html font-size 75px
     .Header {
-        color: red;
-        font-size:35px;
+        color: #fff;
+        height: 86px;
+        align-items: center;
+        display: flex;
+        background: #00bcd4;
+
+        .header-left {
+            width: 64px;
+        }
+
+        .header-input {
+            flex: 1;
+            background: #ffffff;
+            border-radius: 5px;
+        }
+
+
+        .header-right {
+            width: 124px;
+        }
     }
 </style>
diff --git a/vue.config.js b/vue.config.js
@@ -10,7 +10,7 @@ module.exports = {
                 plugins: [
                     autoprefixer(),
                     pxtorem({
-                        rootValue: 75,
+                        rootValue: 37.5,
                         propList: ['*'],
                     }),
                 ],