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>
      <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>
    </scroller>
    <navigation></navigation>
  </div>
</template>
<script type="text/javascript">
  import {mapActions} from 'vuex'
  import config from '../config/config'
  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
      }
    },
    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;
    img:nth-child(1) {
      width: 25%;
      display: block;
      margin: 0 auto;
      border-radius: 50%;
    }
    & > div {
      color: white;
      margin-top: 1em;
    }
  }

  .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%;
      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;
      }
      & > div {
        display: block;
        width: 100%;
        border: 0;
        padding: 0;
      }
    }
  }

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