<template>
  <home-container>
    <div class="title">
      <user-info name="刘阳" sub-title="欢迎使用安检，移动业务更轻松~"></user-info>
    </div>

    <div class="user-detail">
      <div class="avatar">
        <img alt="" src="@/static/images/profile.jpg">
      </div>
      <div class="item">
        <div class="name">刘阳</div>
        <div class="level">安检员：<span class="address">T3航站楼</span></div>
        <div class="more">查看或者编辑个人资料</div>
      </div>
      <div class="right">
        <img alt="" src="@/static/images/right.png">
      </div>
    </div>

    <div class="common-functions">
      <head-title title="常用功能"></head-title>

      <div class="list">
        <div class="list-item">
          <div class="icon"><img alt="" src="@/static/images/tongji.png"></div>
          个人统计
        </div>
        <div class="list-item">
          <div class="icon"><img alt="" src="@/static/images/tiaokuan.png"></div>
          隐私条款
        </div>
      </div>
    </div>
  </home-container>
</template>
<script>
import HomeContainer from "@/components/HomeContainer.vue";
import UserInfo from "@/components/UserInfo.vue";
import HeadTitle from "@/components/HeadTitle.vue";

export default {
  components: {HeadTitle, UserInfo, HomeContainer},
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
img {
  display: inline-flex;
  width: 100%;
  height: 100%;
}

.title {
  padding: 40rpx 20rpx 20rpx;
}

.user-detail {
  display: flex;
  align-items: center;
  padding: 40rpx 48rpx;
  background: #FFFFFF;
  box-shadow: 0 8rpx 32rpx 0 rgba(0, 0, 0, 0.06);
  border-radius: 32rpx;
  margin-bottom: 32rpx;

  .avatar {
    margin-right: 48rpx;

    img {
      width: 152rpx;
      height: 152rpx;
      border-radius: 28rpx;
    }
  }

  .item {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }

  .name {
    font-weight: bold;
    font-size: 36rpx;
    color: #3D3D3D;
    line-height: 40rpx;
  }

  .level {
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    margin: 12rpx 0;

    .address {
      color: #999999;
    }
  }

  .more {
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
  }

  .right {
    width: 24rpx;
    height: 24rpx;
    margin-left: auto;
  }
}

.common-functions {
  padding: 40rpx 48rpx;
  background: #FFFFFF;
  box-shadow: 0 8rpx 32rpx 0 rgba(0, 0, 0, 0.06);
  border-radius: 32rpx;
  font-weight: 400;
  font-size: 20rpx;
  color: #3D3D3D;

  .list {
    display: flex;
  }

  .list-item {
    margin: 32rpx 108rpx 0 0;

    .icon {
      width: 64rpx;
      height: 64rpx;
      margin-bottom: 12rpx;
    }
  }
}
</style>