uni-app 10.2个人设置页开发（二）

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar showBack :showRight="true" bgColor="bg-white">
      <free-icon-button slot="right"><text class="iconfont font-md" @click="openChat">&#xe6fd;</text></free-icon-button>
    </free-nav-bar>
    <view class="px-3 py-4 flex align-center bg-white border-bottom">
      <free-avatar src="/static/images/demo/demo6.jpg" size="120"></free-avatar>
      
      <view class="flex flex-column ml-3">
        <text class="font-lg font-weight-bold mb-2">昵称</text>
        <text class="font-md text-light-muted mb-1">账号：VmzhbjzhV</text>
        <text class="font-md text-light-muted">地区：广东广州</text>
      </view>
    </view>
    
    <free-list-item showRight :showLeftIcon="false">
      <view class="flex align-center">
        <text class="font-md text-dark mr-3">标签</text>
        <text class="font-md text-light-muted">哈哈</text>
      </view>
    </free-list-item>
    <free-divider></free-divider>
    <free-list-item showRight :showLeftIcon="false">
      <view class="flex align-center">
        <text class="font-md text-dark mr-3">朋友圈</text>
        <image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
        <image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
        <image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
      </view>
    </free-list-item>
    <free-list-item title="更多信息" showRight :showLeftIcon="false"></free-list-item>
    <free-divider></free-divider>
    <view class="py-3 flex align-center justify-center bg-white" hover-class="bg-light">
      <text class="iconfont text-primary mr-1">&#xe64e;</text>
      <text class="font-md text-primary">发信息</text>
    </view>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeIconButton from '@/components/free-ui/free-icon-button.vue';
  import freeChatItem from '@/components/free-ui/free-chat-item.vue';
  import freePopup from '@/components/free-ui/free-popup.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import freeDivider from '@/components/free-ui/free-divider.vue';
  import freeAvatar from '@/components/free-ui/free-avatar.vue';
  
  export default {
    components: {
      freeNavBar,
      freeIconButton,
      freeChatItem,
      freePopup,
      freeListItem,
      freeDivider,
      freeAvatar
    },
    data() {
      return {
        
      }
    },
    methods: {
      
    }
  }
</script>
<style>
</style>