【样式】个人中心

html

  <view class="container">
    <view class="user acea-row row-middle" @click="$utils.redirectTo('/pagesA/pages/mine/personalPage/personalPage?myid='+userId)">
      <image :src="user.photo" mode="" class="userImg"></image>
      <view class="info" >
        <view class="userName">{{user.nickName}}</view>
        <view class="time">注册时间：{{user.createTime}}</view>
        <view class="acea-row">
          <image src="../../static/wei2.png" mode="" class="weiImg" ></image>
          <image :src="user.email==null?'../../static/email1.png':'../../static/email2.png'" mode="" class="weiImg" ></image>
        </view>
      </view>
      <image src="../../static/right4.png" mode="" class="rightImg"></image>
    </view>
    
    <view class="qing acea-row">
      <view class="qingItem" @click="$utils.redirectTo('/pagesA/pages/mine/inSale/inSale?name='+'my')">
        <view class="qing_name">{{user.saleNums}}</view>
        <view class="qing_tip">在售 </view>
        <text class="qing_line"></text>
      </view>
      <view class="qingItem"  @click="$utils.redirectTo('/pagesA/pages/mine/hasSales/hasSales')">
        <view class="qing_name">{{user.yisaleNums}}</view>
        <view class="qing_tip">已售 </view>
        <text class="qing_line"></text>
      </view>
      <view class="qingItem"  @click="$utils.redirectTo('/pagesA/pages/mine/hasFocus/hasFocus')">
        <view class="qing_name">{{user.likeNums}}</view>
        <view class="qing_tip">已关注 </view>
        <text class="qing_line"></text>
      </view>
      <view class="qingItem"  @click="$utils.redirectTo('/pagesA/pages/mine/fans/fans')">
        <view class="qing_name">{{user.funsNums}}</view>
        <view class="qing_tip">粉丝</view>
      </view>
    </view>
    
    <view class="jian"></view>
    
    <view class="menu">
      <view class="list" v-for="(item,index) in menu" :key="index" @click="openMenu(item,index)">
        <view class="picture"><image :src="item.img" ></image></view>
        <view class="shuoming">{{item.name}}</view>
        <image src="../../static/jt.png" class="jintou_right"></image>
      </view>
    </view>
    
    <view class="" style="height: 100rpx;"></view>

  </view>

js

data() {
      return {
        show: false,
        user: '',
        userId: '',
        menu: [
          {img: '../../static/mine_1.png',name: '编辑信息',url: '/pagesA/pages/mine/info/info'},
          {img: '../../static/mine_2.png',name: '我的收藏',url:'/pages/like/like'},
          {img: '../../static/mine_3.png',name: '浏览记录',url:'/pagesA/pages/mine/history/history'},
          {img: '../../static/mine_4.png',name: '销售数据',url:'/pagesA/pages/mine/salesData/salesData'},
          {img: '../../static/mine_5.png',name: '个人权益',url: ''},
          {img: '../../static/mine_6.png',name: '关于我们',url: '/pagesA/pages/mine/aboutUs/aboutUs'},
          {img: '../../static/mine_7.png',name: '客服中心',url:''},
       ],
       list: [{name:'在线交流',id: '2'},{name:'意见反馈',id: '3'}],
			 route:''
      }
    },

css

.acea-row {
    display: flex;
    flex-wrap: wrap;
}
.acea-row.row-middle {
    align-items: center;
}
.container {
  .user {
    margin: 32rpx;
    .userImg {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 26rpx;
    }
    .info {
      .userName {
        font-size: 36rpx;
        font-weight: bold;
      }
      .time {
        font-size: 26rpx;
        color: #666666;
        margin:10rpx 0 16rpx
      }
    }
    .rightImg {
      width: 48rpx;
      height: 48rpx;
      margin-left: auto;
    }
    .weiImg {
      width: 52rpx;
      height: 48rpx;
      margin-right: 16rpx;
    }
  }
  .qing {
    height: 134rpx;
    margin: 0 32rpx 32rpx;
    border-radius: 12rpx;
    background: #F8F8F8;
    .qingItem {
      position: relative;
      width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .qing_name {
        font-weight: bold;
      }
      .qing_tip {
        position: relative;
        font-size: 24rpx;
        color: #666666;
        margin-top: 8rpx;
      }
      .qing_line {
        position: absolute;
        display: inline-block;
        right: 0;
        top: 46rpx;
        width: 2rpx;
        height: 54rpx;
        background: #000000;
        opacity: 0.08;
      }
      .huImg {
        position: absolute;
        right: -10rpx;
        bottom: -4rpx;
        width: 14rpx;
        height: 14rpx;
        z-index: 2;
      }
    }
  }
  .jian {
    width: 100%;
    height: 20rpx;
    background: #F8F8F8;
  }
  .menu {
    margin-top: 30rpx;
    .list {
      display: flex;
      align-items: center;
      height: 88rpx;
      line-height: 88rpx;
      padding: 0 40rpx 0 50rpx;   
      .picture {
        width: 36rpx;
        height: 36rpx;
        margin-right: 32rpx;
        image {
          width: 100%;
          height: 100%;
          margin: 0 auto;
          vertical-align: top;
        }
      }
      .shuoming {
        width: 86%;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
      }
      .jintou_right {
        width: 12rpx;
        height: 24rpx;
      }
    }
  }
}