<template>
  <view>
    <view class="person">
      <view class="image-box">
        <Image src="https://cdn.uviewui.com/uview/album/1.jpg" />
      </view>

      <!-- 个人信息中心 -->
      <view class="info-box">
        <view class="info-avatar">
          <Image src="https://cdn.uviewui.com/uview/album/1.jpg" />
          <view class="edit" @tap="$Router.push('/pages/user/editData/index')">
            <u-icon name="edit-pen" color="#4688b6" />
            <view> 编辑资料</view>
          </view>
        </view>
        <view class="nickname">yizhiyang</view>
        <view class="follow">
          <view>关注<text>3</text></view>
          <view>粉丝<text>3</text></view>
          <view>好友<text>331</text></view>
        </view>
      </view>

      <!-- 个人动态 -->
      <u-tabs
        :list="list2"
        lineWidth="70"
        lineColor="#347caf"
        :scrollable="false"
        :activeStyle="{
          color: '#347caf',
          fontWeight: 'bold',
        }"
        :inactiveStyle="{
          color: '#333',
        }"
        itemStyle="padding-left: 90rpx; padding-right: 80rpx; height: 120rpx;"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list2: [
        {
          name: '主页',
        },
        {
          name: '动态',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.person {
  height: 100vh;
  background-color: #efefef;
  .image-box {
    width: 100%;
    height: 340rpx;
    > Image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  /* 个人信息中心 */
  .info-box {
    height: 280rpx;
    padding: 20rpx;
    margin: -140rpx 30rpx 30rpx 30rpx;
    border-radius: 40rpx;
    box-sizing: border-box;
    background-color: #fff;
    .info-avatar {
      display: flex;
      justify-content: space-between;
      > Image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 90rpx;
        display: block;
        margin-top: -90rpx;
        margin-left: 80rpx;
      }
      .edit {
        display: flex;
        width: 160rpx;
        height: 80rpx;
        border-radius: 80rpx;
        line-height: 80rpx;
        padding-left: 20rpx;
        margin: 15rpx 15rpx 0 0;
        color: #4688b6;
        border: 1px solid #4688b6;
      }
    }
    .nickname {
      font-size: 40rpx;
      margin: 20rpx;
    }
    .follow {
      display: flex;
      font-size: 26rpx;
      color: #565656;
      > view {
        margin-right: 20rpx;
        > text {
          font-size: 36rpx;
          color: #333;
          margin-left: 5rpx;
        }
      }
    }
  }
}
</style>
