|
|
@@ -1,25 +1,31 @@
|
|
|
<!-- 门墩儿入口管理列表 -->
|
|
|
<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 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>
|
|
|
- <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 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>
|
|
|
@@ -36,12 +42,12 @@ 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: '' },
|
|
|
+ { 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' },
|
|
|
])
|
|
|
|
|
|
// 每行三个
|
|
|
@@ -66,17 +72,22 @@ if (item.to) window.open(item.to)
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
.listItem {
|
|
|
- width: 250px;
|
|
|
- height: 250px;
|
|
|
- background-color: #fff;
|
|
|
- cursor: pointer;
|
|
|
+ width: 315px;
|
|
|
+ height: 160px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700;
|
|
|
border-radius: 8px;
|
|
|
text-align: center;
|
|
|
- box-shadow: 0px 0px 40px 0px var(--v-primary-lighten4);
|
|
|
+ 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>
|
Xiao_123