#

whycq

2022-12-14 289e204f67b8ae0144772707e028a4aa82f2002a

 pages/user/user.vue

@@ -1,8 +1,67 @@
<template>
   <view>
      <view class="user">
         <!-- 头像 -->
         <view class="user-avatar">
            <img src="" alt="">
            <!-- <image src="" mode="aspectFit"></image> -->
         </view>
         <!-- 信息 -->
         <view class="user-info">
            <view class="user-name">陈鹏</view>
            <view class="user-company">中扬立库技术有限公司</view>
         </view>
         <!-- 更多 -->
         <view class="user-icons">
            <uni-icons type="right"></uni-icons>
         </view>
      </view>
   </view>
</template>

<script>
</script>

<style>
   .user {
      width: 100%;
      height: 200rpx;
      background-color: #f8f8f8;
      display: grid;
      grid-template-columns: 1fr 4fr 1fr;
   }
   .user-avatar {
      height: 200rpx;
      width: 200rpx;
      /* background-color: aquamarine; */
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .user-avatar img {
      height: 100rpx;
      border-radius: 20rpx;
   }
   .user-info {
      height: 200rpx;
      display: grid;
      grid-template-rows: 2fr 2fr;
      /* background-color: aqua; */
   }
   .user-name {
      height: 100rpx;
      width: 100%;
      display: flex;
      align-items: flex-end;
      font-size: 30rpx;
      font-weight: 700;
   }
   .user-company {
      height: 100rpx;
   }
   .user-icons {
      display: flex;
      align-items: center;
      justify-content: center;
   }
</style>