<template>
  <view class="container">
    <meet-navbar title="我的" :isFixed="false" :iconType="0"></meet-navbar>
    <view>
      <!-- touxiang -->
      <view class="flex items-center mb-40">
        <view class="avatar-box">
          <image src="/static/image/bg.png" mode="scaleToFill" class="avatar" />
        </view>
        <view>
          <view class="nickname">用户名</view>
          <view class="status">未登录</view>
        </view>
      </view>
      <!-- 分享 -->
      <view>
        <image
          src="/static/image/user/shear.png"
          mode="scaleToFill"
          class="shear"
        />
      </view>
      <!-- menu -->
      <view class="menu">
        <view class="flex items-center menu-item" v-for="item in menuList" :key="item">
          <image :src="item.icon" mode="scaleToFill" class="icon" />
          <view class="name">{{ item.n }}</view>
          <image
            src="/static/image/user/right.png"
            mode="scaleToFill"
            class="right"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          icon: "/static/image/user/flie.png",
          n: "我的附件",
          url: "",
        },
        {
          icon: "/static/image/user/edit.png",
          n: "意见反馈",
          url: "",
        },
        {
          icon: "/static/image/user/doc.png",
          n: "帮助文档",
          url: "",
        },
        {
          icon: "/static/image/user/alert-circle.png",
          n: "帮助文档",
          url: "",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../common.scss";
.menu {
    background-color: #EEF7FE;
    border: 4rpx solid #fff;
    border-radius: 24rpx;
    padding: 0 24rpx;
    padding-top: 48rpx;
  .right {
    width: 36rpx;
    height: 36rpx;
  }
  .name {
    font-weight: 400;
    font-size: 30rpx;
    color: #23262b;
    flex: 1;
  }
  .icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 24rpx;
  }
  .menu-item{
    margin-bottom: 48rpx;

  }
}
.shear {
  width: 100%;
  height: 160rpx;
  margin-bottom: 24rpx;
}
.status {
  font-weight: 400;
  font-size: 28rpx;
  color: #93999f;
}
.nickname {
  font-weight: 700;
  font-size: 36rpx;
  color: #23262b;
  line-height: 1.8;
}
.avatar {
  width: 144rpx;
  height: 144rpx;
  border-radius: 26rpx;
}
.avatar-box {
  width: 176rpx;
  height: 176rpx;
  padding: 16rpx;
  border-radius: 26rpx;
  background-color: #fff;
  box-sizing: border-box;
  margin-right: 24rpx;
}
.container {
  min-height: 100vh;
  background-color: #d1dcfe;
  padding: 20rpx 24rpx;
  box-sizing: border-box;
}
</style>