Lexus-media/src/components/LoginInfo.vue

<template>
  <div class="login_info">
      <div class="user_info">
          <div class="user_icon">
              <img src="" alt="icon">
          </div>
          <div class="user_name">
              <p>欢迎您，</p>
              <p>dlrmkt</p>
          </div>
      </div>
      <div class="time_info">
          <div class="clock_icon">
              <img src="" alt="icon">
          </div>
          <div class="login_time">
              <p>登录时间</p>
              <p>2021年-3-(星期四)</p>
          </div>
      </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang="less">
.login_info {
    // background: rgb(212, 212, 212);
    width: 100%;
    .user_info{
        height: 48px;
        border-bottom: 1px solid #eee;
        display: flex;
        .user_icon{
            margin: 8px 0 0 10px;
            width: 30px;
            height: 30px;
            img{
                width: 30px;
                height: 30px;
            }
        }
        .user_name{
            margin: 4px 0 0 5px;
            p{
                line-height: 20px;
                height: 20px;
            }
        }
    }
    .time_info{
        height: 50px;
        display: flex;
        .clock_icon{
            margin: 8px 0 0 10px;
            width: 30px;
            height: 30px;
            img{
                width: 30px;
                height: 30px;
            }
        }
        .login_time{
            margin: 4px 0 0 5px;
            p{
                line-height: 20px;
                height: 20px;
            }
        }
    }
}
</style>