search-Final

src/pages/city/City.vue

@@ -1,13 +1,18 @@
 <template>
-  <city-header></city-header>
+  <div>
+    <city-header></city-header>
+    <city-search></city-search>
+  </div>
 </template>
 
 <script>
-import CityHeader from "./components/header"
+import CityHeader from "./components/header";
+import CitySearch from "./components/search";
 export default {
   name: "City",
   components: {
-    CityHeader: CityHeader
+    CityHeader: CityHeader,
+    CitySearch: CitySearch
   }
 }
 </script>

src/pages/city/components/search.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="search">
+    <input class="search-input" type="text" placeholder="输入城市名或拼音" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CitySearch"
+};
+</script>
+
+<style lang="stylus" scoped>
+@import '~styles/variable.styl'
+.search
+  height .72rem
+  padding 0 .1rem
+  background : $bgColor
+  .search-input
+    box-sizing border-box
+    width 100%
+    height .62rem
+    padding 0 .1rem
+    line-height .62rem
+    text-align center
+    border-radius .06rem
+    color #666666
+</style>