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">{{ cloudInfo.diskName }}</div>
      <div class="cloud-id-detail-wrap">
        <div class="cloud-id">ID {{ userCardId }}</div>
        <div class="cloud-id-active-group">当前分组：{{ activeGroupName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 头部云机id等信息
*/
export default {
  name: 'CloudMainPanel',
  props: {
    // 当前云机id
    userCardId: {
      type: [String, Number],
      default: ''
    },
    // 云机列表
    cloudList: {
      type: Array,
      default: () => ([])
    },
    // 分组栏目列表
    groupList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    // 当前选择的云机分组名称
    activeGroupName() {
      return this.cloudInfo?.groupName || '全部设备';
    },
    // 当前云机信息
    cloudInfo() {
      // 如果当前云机id为空, 那么就返回空对象
      if (!this.userCardId) {
        return {};
      }
      // 如果当前云机id不为空, 那么就返回当前云机的信息
      return this.cloudList.find(item => item.userCardId === +this.userCardId);
    }
  }
}
</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>