menduner/src/views/entrances/navBar/components/defineListPage2.vue

<template>
  <m-menu :btnTitle="title">
    <v-card elevation="3" style="padding: 40px 60px; width: 100%; overflow-y: visible; overflow-x: auto;">
      <div class="d-flex">
        <div v-for="(item, i) in list" :key="'product'+i" :style="{'margin-left': i ? ml : 'auto'}">
          <div style="font-size: 20px; color: var(--v-primary-lighten2)" class="mb-5">{{ item.title }}</div>
          <v-divider class="mb-6" style="color: var(--v-primary-lighten2)"></v-divider>
          <div v-for="(arr, j) in item.appList" :key="'productApp'+j" class="d-flex">
            <div
              v-for="(val, k) in arr" :key="'productAppArr'+k"
              :class="{'ml-5': k}"
              :style="{width: val.width ? val.width : !k ? width : 'auto'}"
              class="d-flex cursor-pointer"
              @click="emits('emitClick', val)"
            >
              <span class="mr-2" style="font-size: 30px;line-height: 22px;color: var(--v-primary-lighten2);">·</span>
              <div>
                <div style="font-size: 16px; font-weight: 500;">{{ val.title }}</div>
                <div style="font-size: 14px;" class="subTitle mb-5">{{ val.subTitle }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </v-card>
  </m-menu>
</template>

<script setup>
import MMenu from './commonMenuStyle.vue'
defineOptions({name: 'entrances-defineListPage2'})
const emits = defineEmits(['emitClick'])
defineProps({
  list: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: 'title'
  },
  width: {
    type: String,
    default: '160px'
  },
  ml: {
    type: String,
    default: '150px'
  }
})
</script>
<style lang="scss" scoped>
.cursor-pointer {
  .subTitle { color: #999; }
  &:hover {
    color: var(--v-primary-base);
    .subTitle {
      color: #666;
    }
  }
}
</style>