android-cloud-H5/pages/rtcEngine/components/CloudMainPanel.vue

<template>
  <!-- 头部云机id等信息 -->
  <div class="cloud-id-info-wrap">
    <!-- 云机套餐头像 -->
    <div class="cloud-id-avatar-wrap">
      <van-image
        width="24"
        height="24"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
    </div>
    <!-- 云机名称和ID -->
    <div class="cloud-id-desc-wrap">
      <div class="cloud-id-name mb-1">云手机名称最多显示12位</div>
      <div class="cloud-id-detail-wrap">
        <div class="cloud-id">ID 333434343434</div>
        <div class="cloud-id-active-group">当前分组：最多显示6个字符</div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 头部云机id等信息
*/
export default {
  name: 'CloudMainPanel',
}
</script>

<style lang="scss" scoped>
// 文字高亮颜色
$active-color: #FEAE4D;

.cloud-id-info-wrap{
  display: flex;
  color: #f9f9f9;
  font-size: 10px;
  line-height: 10px;
  background-color: #565656;
  padding: 12px 16px;

  .cloud-id-avatar-wrap{
    padding-right: 8px;
  }
  .cloud-id-desc-wrap{
    flex: 1;

    .cloud-id-name{
      text-align: left;
    }
    .cloud-id-detail-wrap{
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;

      .cloud-id{
        color: $active-color;
      }
    }
  }
}
</style>