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

<template>
  <!-- 云机列表 -->
  <div class="cloud-list-wrap" >
    <van-list :style="listStyle" :finished="false">
      <div v-for="item in list" :key="item" class="cloud-list-item-wrap flex" :class="{'cloud-list-item-active': activeId === item}" @click="activeId = item">
        <!-- 云机套餐头像 -->
        <div class="cloud-id-avatar-wrap items-center pr-2">
          <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">ID 333434343434</div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  name: 'CloudList',
  props: {
    // 云机列表高度
    height: {
      type: String,
      default: '50px'
    }
  },
  data() {
    return {
      activeId: '云机1',
      list: [
        '云机1',
        '云机2',
        '云机3',
        '云机4',
        '云机5',
        '云机6',
        '云机7',
        '云机8',
        '云机9',
        '云机10'
      ]
    }
  },
  computed: {
    // 云机列表高度
    listStyle() {
      return {height: this.height, overflowY: 'auto'}
    }
  },
}
</script>

<style lang="scss" scoped>
.cloud-list-item-wrap{
  padding: 8px 16px;
  border: 1px solid transparent;

  &.cloud-list-item-active{
    background-color: rgba(254,174,77,0.1);
    border: 1px solid #FEAE4D;
  }
}
.cloud-id-avatar-wrap{
  display: flex;
}
.cloud-id-desc-wrap{
  text-align: left;
  flex: 1;
  color: #F9F9F9;
  font-size: 10px;
}
</style>