City-List half

src/pages/city/City.vue

@@ -2,17 +2,20 @@
   <div>
     <city-header></city-header>
     <city-search></city-search>
+    <city-list></city-list>
   </div>
 </template>
 
 <script>
 import CityHeader from "./components/header";
 import CitySearch from "./components/search";
+import CityList from "./components/list"
 export default {
   name: "City",
   components: {
     CityHeader: CityHeader,
-    CitySearch: CitySearch
+    CitySearch: CitySearch,
+    CityList: CityList
   }
 }
 </script>

src/pages/city/components/list.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="list" ref="wrapper">
+    <div>
+      <div class="area">
+        <div class="title border-topbottom">当前城市</div>
+        <div class="button-list">
+          <div class="button-wrapper">
+            <div class="button">北京</div>
+          </div>
+          <div class="button-wrapper">
+            <div class="button">北京</div>
+          </div>
+        </div>
+      </div>
+      <div class="area">
+        <div class="title border-topbottom">当前城市</div>
+        <div class="button-list">
+          <div class="button-wrapper">
+            <div class="button">北京</div>
+          </div>
+        </div>
+      </div>
+      <div class="area">
+        <div class="title border-topbottom">A</div>
+        <div class="item-list">
+          <div class="item border-topbottom">阿拉尔</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CityList"
+};
+</script>
+
+<style lang="stylus" scoped>
+@import '~styles/variable.styl'
+.border-topbottom
+  &:before
+    border-color: #ccc
+  &:after
+    border-color: #ccc
+.border-bottom
+  &:before
+    border-color: #ccc
+.list
+  overflow: hidden
+  position: absolute
+  top: 1.58rem
+  left: 0
+  right: 0
+  bottom: 0
+  .title
+    line-height: .54rem
+    background: #eee
+    padding-left: .2rem
+    color: #666
+    font-size: .26rem
+  .button-list
+    overflow: hidden
+    padding: .1rem .6rem .1rem .1rem
+    .button-wrapper
+      float: left
+      width: 33.33%
+      .button
+        margin: .1rem
+        padding: .1rem 0
+        text-align: center
+        border: .02rem solid #ccc
+        border-radius: .06rem
+  .item-list
+    .item
+      line-height: .76rem
+      padding-left: .2rem
+</style>