php/www/vue/src/components/mine.vue

<template>
  <div class="mine">
    <scroller>
      <div class="user">
        <!--<img class="head-background" :src="HeadBackground" alt="">-->
        <img :src="userInfo.avatar" alt="">
        <div>{{userInfo.user_name}}</div>
      </div>
      <!--选择-->
      <group>
        <cell :title="(item.name)" is-link v-for="item in userList" 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>
</template>
<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,
        userList: [
          {
            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: '/balanceLog'
          },
          {
            name: '代金券',
            icon: 'http://odulvej8l.bkt.clouddn.com/mine-%E4%BB%A3%E9%87%91%E5%88%B8icon-01-01-01.png',
            link: '/userCoupon'
          },
          {
            name: '关于',
            icon: 'http://odulvej8l.bkt.clouddn.com/mine-%E5%85%B3%E4%BA%8Eicon-01-01-01.png',
            link: '/about'
          }
        ]
      }
    },
    components: {
      Group,
      Cell
    },
    beforeCreate () {
      console.log(this.$store.state.user.userInfo)
    },
    created () {
    },
    methods: {
      ...mapActions([]),
      btn: function (a) {
      }
    }
  })
</script>
<style type="text/css" lang="less" scoped>
  button {
    font-size: 2rem;
    border: 1px solid darkseagreen;
  }

  .user {
    width: 100%;
    position: relative;
    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;
      margin: 0 auto;
      border-radius: 50%;
    }
    & > div {
      color: white;
      margin-top: 1em;
    }
  }

  .mine-type {
    width: 100%;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    & > div {
      float: left;
      width: 33.18%;
      box-sizing: border-box;
      text-align: center;
      background: #ffffff;
      &:nth-child(1) {
        div {
          border-left: 0;
        }
      }
      &:nth-child(3) {
        div {
          border-right: 0;
        }
      }
      & > div {
        width: 100%;
        border: 1px solid black;
        padding: 0;
        font-size: 18px;
        line-height: 20px;
      }
      img {
        display: block;
        width: 50%;
        margin: 15px auto;
      }
    }
  }

  @media (max-width: 320px) {
    .user {
      img:nth-child(2) {
        /*margin-top: 1em;*/
      }
      & > div {
        font-size: 15px;
      }
    }
  }
</style>