mky-vent-base/src/views/vent/home/configurable/components/detail/GalleryList.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
  <div class="flex w-full p-10px" :class="`complex-list__${type}`">
    <CustomGallery :class="`complex-list__gallery_${type}`" :type="complexTypeMap[type][0]" :gallery-config="galleryConfig" />
    <CustomList :class="`complex-list__list_${type}`" :type="complexTypeMap[type][1]" :list-config="listConfig" />
  </div>
</template>
<script lang="ts" setup>
  import CustomList from './CustomList.vue';
  import CustomGallery from './CustomGallery.vue';

  withDefaults(
    defineProps<{
      listConfig: {
        value: string;
        color: string;
        label: string;
        prop: string;
        info: string;
      }[];
      galleryConfig: {
        value: string;
        color: string;
        label: string;
        prop: string;
      }[];
      /** A B */
      type: string;
    }>(),
    {
      listConfig: () => [],
      galleryConfig: () => [],
      type: 'A',
    }
  );

  const complexTypeMap = {
    A: ['B', 'A'],
    B: ['C', 'A'],
  };

  //   defineEmits(['click']);
</script>
<style lang="less" scoped>
  @import '@/design/theme.less';

  .complex-list__gallery_A {
    // width: 200px;
    flex-basis: 35%;
    height: 240px;
    // transform: scale(0.8);
    // might not work in Firefox
    zoom: 0.6;
  }
  .complex-list__list_A {
    flex-basis: 65%;
  }

  .complex-list__B {
    align-items: center;
  }
  .complex-list__gallery_B {
    height: 150px;
    // width: 200px;
    flex-basis: 35%;
    // transform: scale(0.8);
    // might not work in Firefox
  }
  .complex-list__list_B {
    flex-basis: 65%;
  }
</style>