LoongPanel-Asp/web/components/UserPage/UserPageIndicator.vue

<script lang="ts" setup>

</script>

<template>
  <div class="Indicator-layout">
    <div class="Indicator-item">
      <h4>名称</h4>
      <p>- 邮箱</p>
    </div>
    <div class="Indicator-item">
      <h4>姓名</h4>
      <p>- 职务</p>
    </div>
    <div class="Indicator-item">
      <h4>手机号</h4>
      <p>- 地址</p>
    </div>
    <div class="Indicator-item">
      <h4>上次登陆时间</h4>
      <p>- 登录IP</p>
    </div>
    <div class="Indicator-item">
      <h4>修改日期</h4>
      <p>-创建日期</p>
    </div>
    <div class="Indicator-item">
      <h4>状态</h4>
      <p>-锁定</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import 'base';

.Indicator-layout {
  background-color: $light-bg-color;
  display: flex;
  align-items: center;
  padding: $padding*1.5 $padding*10 $padding*1.5 $padding*8;
  gap: $gap*4;
  border-radius: $radius;
  *{
    @include SC_Font;
  }
  .dark-mode &{
    background-color: $dark-bg-color;
  }
}

.Indicator-item {
  display: flex;
  flex-direction: column;
  gap: $gap*.25;
  flex: 1;
  h4 {
    color: $light-text-color;
  }
  .dark-mode &{
    h4 {
      color: $dark-text-color;
    }
  }
  p {
    color: $light-unfocused-color;
  }
}

.Indicator-item:last-of-type {
  flex: unset;
}
</style>