解决方案

src/views/entrances/navBar/components/commonMenuStyle.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- open-on-hover  -->
   <v-menu
     :close-delay="1" 
     :open-delay="0" 
@@ -26,7 +27,7 @@ const defineProps = defineProps({
   },
   closeOnContentClick: {
     type: Boolean,
-    default: true
+    default: false
   }
 })
 </script>

src/views/entrances/navBar/components/defineListPage.vue

@@ -0,0 +1,54 @@
+<template>
+  <m-menu :btnTitle="title">
+    <v-card elevation="3" style="padding: 40px 60px;">
+      <div class="d-flex">
+        <div v-for="(item, i) in list" :key="'product'+i" :style="{'margin-left': i ? ml : 'auto'}">
+          <div style="font-size: 20px; color: var(--v-primary-lighten2)" class="mb-5">{{ item.title }}</div>
+          <v-divider class="mb-3" style="color: var(--v-primary-lighten2)"></v-divider>
+          <div v-for="(arr, j) in item.appList" :key="'productApp'+j" class="d-flex">
+            <div v-for="(val, k) in arr" :key="'productAppArr'+k" class="d-flex cursor-pointer" @click="emits('emitClick', val)">
+              <span class="mr-2" style="font-size: 30px;line-height: 48px;color: var(--v-primary-lighten2);">·</span>
+              <div
+                :style="{width: k ? 'auto' : width}"
+                style="font-size: 16px; line-height: 50px;"
+              >
+                {{ val.title }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </v-card>
+  </m-menu>
+</template>
+
+<script setup>
+import MMenu from './commonMenuStyle.vue'
+defineOptions({name: 'entrances-defineListPage'})
+const emits = defineEmits(['emitClick'])
+defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  },
+  title: {
+    type: String,
+    default: 'title'
+  },
+  width: {
+    type: String,
+    default: '160px'
+  },
+  ml: {
+    type: String,
+    default: '150px'
+  }
+})
+</script>
+<style lang="scss" scoped>
+.cursor-pointer {
+  &:hover {
+    color: var(--v-primary-base) !important;
+  }
+}
+</style>

src/views/entrances/navBar/components/defineListPage2.vue

@@ -0,0 +1,55 @@
+<template>
+  <m-menu :btnTitle="title">
+    <v-card elevation="3" style="padding: 40px 60px;">
+      <div class="d-flex">
+        <div v-for="(item, i) in list" :key="'product'+i" :style="{'margin-left': i ? ml : 'auto'}">
+          <div style="font-size: 20px; color: var(--v-primary-lighten2)" class="mb-5">{{ item.title }}</div>
+          <v-divider class="mb-6" style="color: var(--v-primary-lighten2)"></v-divider>
+          <div v-for="(arr, j) in item.appList" :key="'productApp'+j" class="d-flex">
+            <div v-for="(val, k) in arr" :key="'productAppArr'+k" class="d-flex cursor-pointer" @click="emits('emitClick', val)">
+              <span class="mr-2" style="font-size: 30px;line-height: 28px;color: var(--v-primary-lighten2);">·</span>
+              <div
+                :style="{width: k ? 'auto' : width}"
+                style="height: 60px;"
+              >
+                <div style="font-size: 16px;">{{ val.title }}</div>
+                <div style="font-size: 14px; color: #999;">{{ val.subTitle }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </v-card>
+  </m-menu>
+</template>
+
+<script setup>
+import MMenu from './commonMenuStyle.vue'
+defineOptions({name: 'entrances-defineListPage2'})
+const emits = defineEmits(['emitClick'])
+defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  },
+  title: {
+    type: String,
+    default: 'title'
+  },
+  width: {
+    type: String,
+    default: '160px'
+  },
+  ml: {
+    type: String,
+    default: '150px'
+  }
+})
+</script>
+<style lang="scss" scoped>
+.cursor-pointer {
+  &:hover {
+    color: var(--v-primary-base) !important;
+  }
+}
+</style>

src/views/entrances/navBar/components/product.vue

@@ -1,45 +1,15 @@
 <template>
-  <m-menu :btnTitle="title">
-    <v-card elevation="3" style="padding: 40px 60px;">
-      <div class="d-flex">
-        <div v-for="(item, i) in list" :key="'product'+i" :style="{'margin-left': i ? '150px' : 'auto'}">
-          <div style="font-size: 20px; color: var(--v-primary-lighten2)" class="mb-5">{{ item.title }}</div>
-          <v-divider class="mb-2" style="color: var(--v-primary-lighten2)"></v-divider>
-          <div v-for="(arr, j) in item.appList" :key="'productApp'+j" class="d-flex">
-            <div v-for="(val, k) in arr" :key="'productAppArr'+k">
-              <div
-                class=""
-                :style="{width: k ? 'auto' : width}"
-                style="font-size: 16px; line-height: 50px;"
-              >
-                {{ val.title }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </v-card>
-  </m-menu>
+  <defineListPage v-bind="$attrs" :list="list" @emitClick="val => emits('emitClick', val)"></defineListPage>
 </template>
 
 <script setup>
-import MMenu from './commonMenuStyle.vue'
+import defineListPage from './defineListPage.vue'
 defineOptions({name: 'navBar-product'})
-defineProps({
-  title: {
-    type: String,
-    default: 'title'
-  },
-  width: {
-    type: String,
-    default: '160px'
-  }
-})
+const emits = defineEmits(['emitClick'])
 
 const list = [
   {
     title: '酒店管理',
-    column: 2,
     appList: [
       [{ title: '招聘管理系统', path: '/' }, { title: '绩效管理系统', path: '/' }],
       [{ title: '组织人事系统', path: '/' }, { title: '盘点发展系统', path: '/' }],

src/views/entrances/navBar/components/solution.vue

@@ -1,24 +1,31 @@
 <template>
-  <m-menu :btnTitle="title">
-    <v-list>
-      <v-list-item
-        v-for="n in 1"
-        :key="n"
-        title=""
-      ></v-list-item>
-    </v-list>
-  </m-menu>
+  <defineListPage v-bind="$attrs" width="250px" ml="100px" :list="list" @emitClick="val => emits('emitClick', val)"></defineListPage>
 </template>
 
 <script setup>
-import MMenu from './commonMenuStyle.vue'
+import defineListPage from './defineListPage2.vue'
 defineOptions({name: 'navBar-solution'})
-defineProps({
-  title: {
-    type: String,
-    default: 'title'
-  }
-})
+const emits = defineEmits(['emitClick'])
+
+const list = [
+  {
+    title: '行业方案',
+    appList: [
+      [{ title: '互联网', subTitle: '智慧决策，极致体验', path: '/' }, { title: '央国企', subTitle: '推进人才强企，做好新时代人才工作', path: '/' }],
+      [{ title: '制造业', subTitle: '精细化管理，加速数字化转型', path: '/' }, { title: '盘点发展系统', subTitle: '银行', path: '/' }],
+      [{ title: '新能源', subTitle: '提升业务效能，创造人才价值', path: '/' }],
+    ],
+  },
+  {
+    title: '场景方案',
+    appList: [
+      [{ title: '校招', subTitle: '科技助力校招每一步，释放校招生产力', path: '/' }],
+      [{ title: '社招', subTitle: '高效人才招聘，提升企业人才竞争力', path: '/' }],
+      [{ title: '人才地图', subTitle: '发现高潜人才，保留关键人才', path: '/' }],
+      [{ title: '胜任力模型', subTitle: '提升人岗匹配，优化人才结构', path: '/' }]
+    ]
+  },
+]
 </script>
 <style lang="scss" scoped>
 </style>

src/views/entrances/navBar/index.vue

@@ -12,7 +12,7 @@
         <div class="menuList ml-10">
           <div v-for="val in menuList" :key="val.name">
             <template v-if="val.fileName">
-              <component :is="val.fileName" :title="val.title"></component>
+              <component :is="val.fileName" :title="val.title" @emitClick="eventVal => handleClick(eventVal)"></component>
             </template>
             <template v-else>
               <span class="cursor-pointer">{{ val.title }}</span>
@@ -42,6 +42,9 @@ const menuList = [
   { title: '资源中心', fileName: product },
   { title: '了解门墩儿', fileName: product },
 ]
+const handleClick = (val) => {
+  if (val.path) window.open(val.path)
+}
 </script>
 <style lang="scss" scoped>
 @import '@/styles/entrances/navBar.scss'