mine

www/vue/src/components/mine.vue

@@ -6,26 +6,12 @@
         <img :src="userInfo.avatar" alt="">
         <div>{{userInfo.user_name}}</div>
       </div>
-      <div class="mine-type">
-        <div class="order"><img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
-          <div>订单</div>
-        </div>
-        <div class="recharge"><img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
-          <div>订单</div>
-        </div>
-        <div class="address-list"><img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
-          <div>订单</div>
-        </div>
-        <div class="contact"><img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
-          <div>订单</div>
-        </div>
-        <div class="coupon"><img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
-          <div>订单</div>
-        </div>
-        <div class="about"><img src="http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png" alt="">
-          <div>订单</div>
-        </div>
-      </div>
+      <!--选择-->
+      <group>
+        <cell :title="(item.name)" is-link v-for="item in userI" value-align="left" :link="{path: item.link}">
+          <img slot="icon" width="20" style="display:block;margin-right:5px;" :src="item.icon">
+        </cell>
+      </group>
     </scroller>
     <navigation></navigation>
   </div>
@@ -33,15 +19,47 @@
 <script type="text/javascript">
   import {mapActions} from 'vuex'
   import config from '../config/config'
+  import {Cell, Group} from 'vux'
   export default({
     data () {
       return {
         userId: config.userId,
         userInfo: this.$store.state.user.userInfo,
         HeadBackground: 'http://odulvej8l.bkt.clouddn.com/mine-%E5%BA%95%E7%BA%B9.jpg',
-        products: this.$store.state.product.products
+        products: this.$store.state.product.products,
+        userI: [
+          {
+            name: '地址',
+            icon: 'http://odulvej8l.bkt.clouddn.com/mine-%E5%9C%B0%E5%9D%80icon-01-01.png',
+            link: '/addressList'
+          },
+          {
+            name: '订单',
+            icon: 'http://odulvej8l.bkt.clouddn.com/mine-%E8%AE%A2%E5%8D%95icon-01.png',
+            link: '/order'
+          },
+          {
+            name: '用户余额',
+            icon: 'http://odulvej8l.bkt.clouddn.com/mine-%E5%85%85%E5%80%BC%E5%8D%A1icon-01-01.png',
+            link: ''
+          },
+          {
+            name: '代金券',
+            icon: 'http://odulvej8l.bkt.clouddn.com/mine-%E4%BB%A3%E9%87%91%E5%88%B8icon-01-01-01.png',
+            link: ''
+          },
+          {
+            name: '关于',
+            icon: 'http://odulvej8l.bkt.clouddn.com/mine-%E5%85%B3%E4%BA%8Eicon-01-01-01.png',
+            link: ''
+          }
+        ]
       }
     },
+    components: {
+      Group,
+      Cell
+    },
     beforeCreate () {
       console.log(this.$store.state.user.userInfo)
     },
@@ -66,6 +84,7 @@
     background: url("http://odulvej8l.bkt.clouddn.com/mine-%E5%BA%95%E7%BA%B9.jpg") no-repeat center;
     background-size: 100%;
     padding: 5% 0;
+    margin-bottom: 1em;
     img:nth-child(1) {
       width: 25%;
       display: block;
@@ -79,34 +98,37 @@
   }
 
   .mine-type {
-    margin-top: 1em;
     width: 100%;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     & > div {
       float: left;
-      width: 33.33%;
-      border: 1px solid black;
-      padding-top: 5%;
-      padding-bottom: 5%;
+      width: 33.18%;
+      box-sizing: border-box;
       text-align: center;
       background: #ffffff;
-      &:nth-child(1){border-left: 0;}
-      &:nth-child(2){border-left: 0;border-right: 0;}
-      &:nth-child(3){border-left: 0;border-right: 0;}
-      & > img {
-        display: block;
-        width: 50%;
-        margin: 0 auto;
+      &:nth-child(1) {
+        div {
+          border-left: 0;
+        }
+      }
+      &:nth-child(3) {
+        div {
+          border-right: 0;
+        }
       }
       & > div {
-        display: block;
         width: 100%;
-        border: 0;
+        border: 1px solid black;
         padding: 0;
+        font-size: 18px;
+        line-height: 20px;
+      }
+      img {
+        display: block;
+        width: 50%;
+        margin: 15px auto;
       }
     }
   }

www/vue/src/components/order.vue

@@ -9,7 +9,7 @@
 					<button-tab-item  @on-item-click="consoleIndex(2)">已取消</button-tab-item>
 				</button-tab>
 			</div>
-			<div>
+			<div style="padding-bottom: 16%;">
 				<div class="order-block" v-for="order in orderList">
 					<div class="row_first order-line">
 						<span >订单时间</span>