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

<!-- 门墩儿入口管理列表 -->
<template>
  <div class="d-flex justify-center" style="margin-top: 130px;">
    <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="listBox mt-15">
    <div
      v-for="(item, index) in menuList" :key="'menu' + index"
      class="listItem mb-2 mx-3"
      @click="handleClick(item)"
    >
      <!-- <span>{{ item.title }}</span> -->
      <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>
</template>

<script setup>
// import { useRouter } from 'vue-router'; const router = useRouter()
import { ref } from 'vue'

defineOptions({name: 'entrances-list'})

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-chart-bar-stacked', title: '数据服务', to: '' },
  { icon: 'mdi-school-outline', title: '火苗儿校企', to: '' },
])
 const handleClick = (item) => {
  // router.push(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: all 0.2s;
    &:hover {
      transform: translateY(-8px);
    }
  }
}
</style>