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

<!-- 门墩儿入口管理列表 -->
<template>
  <div class="box">
    <div class="d-flex justify-center" style="padding-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 style="margin-top: 100px;">
      <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 cursor-pointer"
          :style="{ 'background-image': `url(${item.bg})`}"
          @click="handleClick(item)"
        >
          <v-icon color="fff" size="50" class="mt-6">{{ item.icon }}</v-icon>
          <div style="font-size: 18px;">{{ item.title }}</div>
          <div style="font-size: 14px; color: #fff; font-weight: 300;" class="mt-3">
            立即体验
            <v-icon color="#fff" size="20">mdi-menu-right</v-icon>
          </div>
        </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', bg: 'https://minio.citupro.com/dev/menduner/home/1.png' },
  { icon: 'mdi-shopping-outline', title: '甄选商城', to: '/mall', bg: 'https://minio.citupro.com/dev/menduner/home/2.png' },
  { icon: 'mdi-school-outline', title: '火苗儿校企', to: '', bg: 'https://minio.citupro.com/dev/menduner/home/3.png' },
  { icon: 'mdi-account-search', title: '门墩儿猎寻服务', to: '/headhunting', bg: 'https://minio.citupro.com/dev/menduner/home/4.png' },
  { icon: 'mdi-town-hall', title: '门墩儿产业与院校联合会', to: '', bg: 'https://minio.citupro.com/dev/menduner/home/5.png' },
  { icon: 'mdi-database-outline', title: '数据服务', to: '', bg: 'https://minio.citupro.com/dev/menduner/home/6.png' },
])

// 每行三个
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: 315px;
    height: 160px;
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    text-align: center;
    background-size: cover;
    transition: transform 0.3s ease;
    &:hover {
      transform: translateY(-8px);
    }
  }
}
.box {
  height: calc(100vh - 50px);
  background: url('https://minio.citupro.com/dev/menduner/home/bg.png');
  background-size: cover;
}
</style>