menduner/src/views/entrances/list/index.vue

<!-- 门墩儿入口管理列表 -->
<template>
  <div class="d-flex justify-center" style="margin-top: 80px;">
    <div style="text-align: center;">
      <div style="font-size: 40px; font-weight: bold;">
        <span v-for="(val, i) in bigTitle" :key="'bigTitle' + i" :class="{'ml-2': i}">{{ val }}</span>
      </div>
      <div style="font-size: 24px; color: #777" class="mt-5">
        <span v-for="(val, i) in smallTitle" :key="'smallTitle' + i" :class="{'ml-5': i}">{{ val }}</span>
      </div>
    </div>
  </div>
  <div class="mt-10">
    <div class="listBox" v-for="(val, index) in menuList" :key="'menuBox' + index">
      <div
        v-for="(item, index) in val" :key="'menu' + index"
        class="listItem mb-6 mx-3"
        @click="handleClick(item)"
      >
        <v-icon color="primary" size="50" class="mt-6" style="height: 100px; line-height: 100px;">{{ item.icon }}</v-icon>
        <div style="font-size: 18px;">{{ item.title }}</div>
        <div style="font-size: 14px;" class="defaultLink mt-3">立即体验 ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'entrances-list'})
import { ref } from 'vue'

const bigTitle = ['酒店管理与职业发展社交一体化 SaaS 平台']
const smallTitle = [
  '企业在线招聘专场',
  '更快找到合适人选',
  '尽享海量VIP特权',
]
const menuList = ref([
  { icon: 'mdi-account-group-outline', title: '门墩儿直聘', to: '/personal' },
  { icon: 'mdi-shopping-outline', title: '甄选商城', to: '/mall' },
  { icon: 'mdi-school-outline', title: '火苗儿校企', to: '' },
  { icon: 'mdi-account-search', title: '门墩儿猎寻服务', to: '/headhunting' },
  { icon: 'mdi-town-hall', title: '门墩儿产业与院校联合会', to: '' },
  { icon: 'mdi-database-outline', title: '数据服务', to: '' },
])

// 每行三个
const chunkArray = (arr, chunkSize) => {
  const newArr = []
  for (let i = 0; i < arr.length; i += chunkSize) {
    const chunk = arr.slice(i, i + chunkSize)
    newArr.push(chunk)
  }
  return newArr
}
menuList.value = chunkArray(menuList.value, 3) // 分割数据，每行chunkSize个

const handleClick = (item) => {
if (item.to) window.open(item.to)
}
</script>

<style lang="scss" scoped>
.listBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .listItem {
    width: 250px;
    height: 250px;
    background-color: #fff;
    cursor: pointer;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0px 0px 40px 0px var(--v-primary-lighten4);
    transition: transform 0.3s ease;
    &:hover {
      transform: translateY(-8px);
    }
  }
}
</style>