header和iconfont

src/App.vue

@@ -15,8 +15,13 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
+.van-nav-bar{
+  background: linear-gradient(to right, #ac1a32, #e7352f, #f4f2bf);
+}
+.van-nav-bar__title,
+.van-nav-bar .van-icon{
+  color:#ffffff
+}
+
 </style>

src/assets/css/ammeter.css

@@ -0,0 +1,26 @@
+*{
+    margin:0;
+    padding:0;
+}
+.color-red{
+    color:#ac1a32
+}
+.fyycontent{
+    padding:15px;
+}
+.van-dropdown-menu__item{
+    width:100%;
+}
+.van-dropdown-menu__title{
+    width:100%;
+    padding:0
+}
+.van-overlay{
+    background:0
+}
+.van-dropdown-menu{
+    height:40px;
+    border:1px #999 solid;
+    padding:0 15px;
+    margin-top:10px;
+}

src/components/Home.vue

@@ -1,7 +1,21 @@
 <template>
   <div>
     <Header></Header>
+    <div class="fyycontent">
+      <van-cell-group>
+        <van-cell>
+          <span class="iconfont color-red">&#xe63f;</span>
+          请选择园区
+        </van-cell>
+        <van-dropdown-menu>
+          <van-dropdown-item v-model="value1" :options="option1" />
+        </van-dropdown-menu>
+      </van-cell-group>
+      
+      
   </div>
+  </div>
+  
 </template>
 
 <script>
@@ -9,7 +23,18 @@ import Header from './page/Header'
 export default {
     components:{
         Header
+    },
+    data() {
+    return {
+      value1: 0,
+      value2: 'a',
+      option1: [
+        { text: '东校区东校区东校区东校区东校区', value: 0 },
+        { text: '西校区', value: 1 },
+        { text: '北校区', value: 2 }
+      ]
     }
+  }
 }
 </script>
 

src/components/page/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="fyyheader">
-    <van-nav-bar title="电量查询" left-text="返回" left-arrow>
+    <van-nav-bar title="电量查询" left-arrow>
       <van-icon name="search" slot="right" />
     </van-nav-bar>
   </div>

src/main.js

@@ -3,6 +3,8 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import './assets/css/iconfont.css'
+import './assets/css/ammeter.css'
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -3,9 +3,11 @@ import Router from 'vue-router'
 import Home from '@/components/Home'
 import { NavBar } from 'vant'
 import 'vant/lib/index.css'
+import { DropdownMenu, DropdownItem } from 'vant'
 
 Vue.use(NavBar)
 Vue.use(Router)
+Vue.use(DropdownMenu).use(DropdownItem)
 
 export default new Router({
   routes: [