git add .

src/App.vue

@@ -6,22 +6,23 @@
 
 <script>
 export default {
-  name: 'App'
-}
+  name: "App"
+};
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  color: #333;
+  font-size: 16px;
 }
-.van-nav-bar{
-  background: linear-gradient(to right, #ac1a32, #e7352f, #f4f2bf);
+.van-nav-bar {
+  background: linear-gradient(to right, #ac1a32, #e7352f, #f2b28d);
 }
 .van-nav-bar__title,
-.van-nav-bar .van-icon{
-  color:#ffffff
+.van-nav-bar .van-icon {
+  color: #ffffff;
 }
-
 </style>

src/assets/css/ammeter.css

@@ -1,26 +1,165 @@
-*{
-    margin:0;
-    padding:0;
+* {
+    margin: 0;
+    padding: 0;
 }
-.color-red{
-    color:#ac1a32
+
+.color-red,
+.van-dropdown-menu__title--active,
+.van-dropdown-item__option--active, 
+.van-dropdown-item__option--active .van-dropdown-item__icon {
+    color: #ac1a32
 }
-.fyycontent{
-    padding:15px;
+
+.color-bigred {
+    color: #e7352f
 }
-.van-dropdown-menu__item{
-    width:100%;
+
+.van-button--primary {
+    background-color: #ac1a32;
+    border: 1px solid #ac1a32;
 }
-.van-dropdown-menu__title{
-    width:100%;
-    padding:0
+
+.van-button--bigred {
+    background-color: #e7352f;
+    border: 1px solid #e7352f;
 }
-.van-overlay{
-    background:0
+
+.fyy-h6 {
+    color: #999;
+    font-size: 14px
 }
-.van-dropdown-menu{
-    height:40px;
-    border:1px #999 solid;
-    padding:0 15px;
-    margin-top:10px;
+
+.fyy-h5 {
+    font-size: 16px;
+}
+
+.fyy-h3 {
+    font-size: 24px;
+}
+
+.fyycontent {
+    padding: 15px 4%;
+}
+
+.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: 10px 0 20px;
+    border-radius: 4px;
+}
+
+.fyy-icon {
+    margin-right: 10px;
+}
+
+.fyy-button {
+    text-align: center;
+}
+
+.fyy-button .van-button {
+    width: 40%;
+    border-radius: 4px;
+    margin: 20px 0 70px
+}
+
+.fyyfooter {
+    position: fixed;
+    bottom: 15px;
+    width: 92%;
+    left: 4%
+}
+
+.fyyfooter .van-button {
+    width: 100%;
+    color: #fff;
+    border-radius: 4px;
+}
+
+.van-button--gray {
+    background-color: #666;
+    border: 1px solid #666;
+}
+
+.van-nav-bar__right .iconfont {
+    color: #fff
+}
+
+.fyyinput {
+    border: 1px #999 solid;
+    border-radius: 4px;
+    margin: 20px 0 10px;
+    display: flex;
+}
+
+.fyyinput input {
+    flex: 0.9;
+    border: 0;
+    padding: 0 15px;
+    text-align: center;
+}
+
+.input-right {
+    line-height: 38px;
+    flex: 0.1
+}
+
+.fyyfooter p {
+    text-align: right;
+    margin-bottom: 15px;
+    font-size: 14px
+}
+
+.paylist-body {
+    width: 100%;
+    height: 100%;
+    background-color: #eee;
+    position: fixed;
+}
+
+.fyycontent-list .van-cell, .fyycontent-list p {
+    padding: 5px 15px;
+}
+
+.van-hairline--top-bottom::after, .van-cell:not(:last-child)::after {
+    border: 0
+}
+
+.fyycontent-list .van-cell-group {
+    margin-bottom: 10px;
+    padding: 10px 0;
+}
+
+.fyycontent-list .van-cell__value {
+    color: #333
+}
+
+.van-cell {
+    padding: 0
+}
+
+.van-dropdown-item__option {
+    padding: 10px 15px;
+    border-bottom: 1px #eee solid;
+}
+
+.van-popup--top {
+    left: 15px;
+    width: 92%;
+    border-left: 1px #999 solid;
+    border-bottom: 1px #999 solid;
+    border-right: 1px #999 solid;
 }

src/components/Home.vue

@@ -1,44 +1,73 @@
-<template>
+<template id="Home">
   <div>
-    <Header></Header>
+    <van-nav-bar title="电量查询" left-arrow>
+    </van-nav-bar>
     <div class="fyycontent">
       <van-cell-group>
         <van-cell>
-          <span class="iconfont color-red">&#xe63f;</span>
+          <span class="iconfont color-red fyy-icon">&#xe63f;</span>
           请选择园区
         </van-cell>
         <van-dropdown-menu>
           <van-dropdown-item v-model="value1" :options="option1" />
         </van-dropdown-menu>
       </van-cell-group>
-      
-      
-  </div>
+      <van-cell-group>
+        <van-cell>
+          <span class="iconfont color-red fyy-icon">&#xe642;</span>
+          请选择楼栋号
+        </van-cell>
+        <van-dropdown-menu>
+          <van-dropdown-item v-model="value1" :options="option2" />
+        </van-dropdown-menu>
+      </van-cell-group>
+      <van-cell-group>
+        <van-cell>
+          <span class="iconfont color-red fyy-icon">&#xe643;</span>
+          请选择房间号
+        </van-cell>
+        <van-dropdown-menu>
+          <van-dropdown-item v-model="value1" :options="option3" />
+        </van-dropdown-menu>
+      </van-cell-group>
+      <div class="fyy-button">
+        <van-button type="primary">查询</van-button>
+        <p>剩余电量：8</p>
+      </div>
+    </div>
+    <div class="fyyfooter">
+      <router-link to="/Pay">
+        <van-button type="bigred">充值</van-button>
+      </router-link>
+    </div>
   </div>
-  
 </template>
 
 <script>
-import Header from './page/Header'
 export default {
-    components:{
-        Header
-    },
-    data() {
+  data() {
     return {
       value1: 0,
-      value2: 'a',
+      value2: "a",
       option1: [
-        { text: '东校区东校区东校区东校区东校区', value: 0 },
-        { text: '西校区', value: 1 },
-        { text: '北校区', value: 2 }
+        { text: "东校区", value: 0 },
+        { text: "西校区", value: 1 },
+        { text: "北校区", value: 2 }
+      ],
+      option2: [
+        { text: "1号楼", value: 0 },
+        { text: "2号楼", value: 1 },
+        { text: "3号楼", value: 2 }
+      ],
+      option3: [
+        { text: "501", value: 0 },
+        { text: "502", value: 1 },
+        { text: "503", value: 2 }
       ]
-    }
+    };
   }
-}
+};
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 </style>

src/components/Pay.vue

@@ -0,0 +1,45 @@
+<template id='Pay'>
+  <div>
+    <van-nav-bar title="电量充值" left-arrow @click-left="back">
+      <span @click="go" class="iconfont" slot="right">&#xe646;</span>
+    </van-nav-bar>
+    <div class="fyycontent">
+      <van-cell-group>
+        <van-cell>
+          <span class="iconfont color-red fyy-icon">&#xe647;</span>
+          请选择园区
+        </van-cell>
+        <div class="fyyinput">
+          <input type="text" placeholder="请输入要充值的电量度数" />
+          <span class="input-right">度</span>
+        </div>
+        <p class="fyy-h6">价格标准：0.56元/度</p>
+      </van-cell-group>
+    </div>
+    <div class="fyyfooter">
+      <p class="fyy-h5">
+        核计：
+        <span class="fyy-h3 color-red">56.00</span>元
+      </p>
+      <router-link to="/Pay">
+        <van-button type="bigred">支付</van-button>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    go() {
+      this.$router.push("/Paylist")
+    },
+    back() {
+      this.$router.push("/")
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/Paylist.vue

@@ -0,0 +1,47 @@
+<template id='Paylist'>
+  <div class="paylist-body">
+    <van-nav-bar title="充值记录" left-arrow @click-left="back"></van-nav-bar>
+    <div class="fyycontent-list">
+      <van-cell-group>
+        <p>
+          2019年11月21日
+          <span>14:20</span>
+        </p>
+        <van-cell title="充值电量" value="100度" />
+        <van-cell title="核定金额" value="50.66元" />
+        <van-cell title="充值方式" value="线下支付" />
+      </van-cell-group>
+      <van-cell-group>
+        <p>
+          2019年11月21日
+          <span>14:20</span>
+        </p>
+        <van-cell title="充值电量" value="100度" />
+        <van-cell title="核定金额" value="50.66元" />
+        <van-cell title="充值方式" value="线下支付" />
+      </van-cell-group>
+      <van-cell-group>
+        <p>
+          2019年11月21日
+          <span>14:20</span>
+        </p>
+        <van-cell title="充值电量" value="100度" />
+        <van-cell title="核定金额" value="50.66元" />
+        <van-cell title="充值方式" value="线下支付" />
+      </van-cell-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    methods: {
+    back() {
+      this.$router.push("/Pay");
+    }
+  }
+};
+</script>
+
+<style scoped>
+</style>

src/components/page/Header.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="fyyheader">
-    <van-nav-bar title="电量查询" left-arrow>
-      <van-icon name="search" slot="right" />
-    </van-nav-bar>
-  </div>
-</template>
-
-<script>
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-
-</style>

src/main.js

@@ -5,6 +5,19 @@ import App from './App'
 import router from './router'
 import './assets/css/iconfont.css'
 import './assets/css/ammeter.css'
+import { NavBar } from 'vant'
+import { DropdownMenu, DropdownItem } from 'vant'
+import { Button } from 'vant'
+import { Collapse, CollapseItem } from 'vant'
+import { Field } from 'vant'
+import { Cell, CellGroup } from 'vant';
+
+Vue.use(Cell).use(CellGroup);
+Vue.use(Field)
+Vue.use(Collapse).use(CollapseItem)
+Vue.use(Button)
+Vue.use(NavBar)
+Vue.use(DropdownMenu).use(DropdownItem)
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -1,13 +1,11 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '@/components/Home'
-import { NavBar } from 'vant'
+import Pay from '@/components/Pay'
+import Paylist from '@/components/Paylist'
 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: [
@@ -15,6 +13,16 @@ export default new Router({
       path: '/',
       name: 'Home',
       component: Home
+    },
+    {
+      path: '/Pay',
+      name: 'Pay',
+      component: Pay
+    },
+    {
+      path: '/Paylist',
+      name: 'Paylist',
+      component: Paylist
     }
   ]
 })