酒店管理与职业发展社交一体化

src/views/entrances/list/index.vue

@@ -1,44 +1,49 @@
 <!-- 门墩儿入口管理列表 -->
 <template>
-  <div class="d-flex justify-center mt-15">
+  <div class="d-flex justify-center" style="margin-top: 150px;">
     <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;" class="mt-3">
+      <div style="font-size: 24px; color: #777" class="mt-3">
         <span v-for="(val, i) in smallTitle" :key="'smallTitle' + i" :class="{'ml-5': i}">{{ val }}</span>
       </div>
     </div>
   </div>
-  <div class="listBox">
-    <v-card
-      v-for="(val, i) in menuList" :key="'menu' + i"
-      class="listItem"
-      :class="{'elevation-5': val.active}"
-      @mouseover="val.active = true"
-      @mouseleave="val.active = false"
+  <div class="listBox mt-10">
+    <div
+      v-for="(item, index) in menuList" :key="'menu' + index"
+      class="listItem mb-2 mx-3"
+      :class="item.active ? 'elevation-0 mt-0' : 'elevation-0 mt-2'"
+      @mouseover="item.active = true"
+      @mouseleave="item.active = false"
     >
-      <!-- <span>{{ val.title }}</span> -->
-    </v-card>
+      <!-- <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 { ref } from 'vue'
+
 defineOptions({name: 'entrances-list'})
 
-const bigTitle = ['酒店一体化 SaaS 平台', '职业发展社交平台']
+const bigTitle = ['酒店管理与职业发展社交一体化 SaaS 平台']
 
 const smallTitle = [
   '企业在线招聘专场',
   '更快找到合适人选',
   '尽享海量VIP特权',
 ]
-const menuList = [
-  { icon: 'mdi-menu-up', title: '招聘管理系统', active: false },
-  { icon: 'mdi-menu-up', title: '考勤管理系统', active: false },
-  { icon: 'mdi-menu-up', title: '绩效管理系统', active: false },
-  { icon: 'mdi-menu-up', title: '审批管理系统', active: false },
-]
+const menuList = ref([
+  { icon: 'mdi-account-group', title: '招聘管理系统' },
+  { icon: 'mdi-ballot-outline', title: '考勤管理系统' },
+  { icon: 'mdi-chart-bar-stacked', title: '绩效管理系统' },
+  { icon: 'mdi-checkbox-marked-outline', title: '审批管理系统' },
+])
 </script>
 <style lang="scss" scoped>
 .listBox {
@@ -46,11 +51,12 @@ const menuList = [
   flex-wrap: wrap;
   justify-content: center;
   .listItem {
-    width: 280px;
-    height: 210px;
-    margin: 10px;
+    width: 250px;
+    height: 250px;
     background-color: #fff;
     cursor: pointer;
+    border-radius: 8px;
+    text-align: center;
   }
 }
 </style>