entrances

src/views/entrances/components/slider.vue

@@ -24,7 +24,7 @@ const list = [
   // { mdi: 'mdi-arrow-up-bold', tips: '返回顶部' },
   { mdi: 'mdi-qrcode', tips: '微信公众号', showImg: 'https://minio.citupro.com/dev/static/mendunerCode.jpg' },
   { mdi: 'mdi-face-agent', tips: '客服' },
-  // { mdi: 'mdi-list-box-outline', tips: '在线简历', path: '/recruit/personal/resume' }
+  { mdi: 'mdi-application-settings', tips: '预约演示', path: '/' }
 ]
 
 const handleClick = (item, index) => {

src/views/entrances/list/index.vue

@@ -1,22 +1,19 @@
 <!-- 门墩儿入口管理列表 -->
 <template>
-  <div class="d-flex justify-center" style="margin-top: 150px;">
+  <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-3">
+      <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-10">
+  <div class="listBox mt-15">
     <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"
       @click="handleClick(item)"
     >
       <!-- <span>{{ item.title }}</span> -->
@@ -63,6 +60,11 @@ const menuList = ref([
     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>

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

@@ -1,6 +1,5 @@
 <template>
   <v-menu
-    open-on-hover 
     :close-delay="1" 
     :open-delay="0" 
     v-bind="$attrs" 
@@ -9,10 +8,10 @@
     :close-on-content-click="closeOnContentClick"
   >
     <template v-slot:activator="{ isActive, props }">
-      <span v-bind="props" class="cursor-pointer">
-        <span>{{ defineProps.btnTitle }}</span>
-        <span class="ml-2" :class="isActive ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"></span>
-      </span>
+      <div v-bind="props" class="d-flex cursor-pointer menuText">
+        <div>{{ defineProps.btnTitle }}</div>
+        <div class="ml-2" :class="isActive ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"></div>
+      </div>
     </template>
     <slot></slot>
   </v-menu>
@@ -30,8 +29,12 @@ const defineProps = defineProps({
     default: true
   }
 })
-
 </script>
-
 <style lang="scss" scoped>
+.menuText {
+  div {
+    height: 50px;
+    line-height: 50px;
+  }
+}
 </style>

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

@@ -1,20 +1,67 @@
 <template>
   <m-menu :btnTitle="title">
-    <v-list>
-      <v-list-item
-        v-for="n in 1"
-        :key="n"
-        title=""
-      ></v-list-item>
-    </v-list>
+    <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>
 </template>
 
 <script setup>
 import MMenu from './commonMenuStyle.vue'
 defineOptions({name: 'navBar-product'})
+defineProps({
+  title: {
+    type: String,
+    default: 'title'
+  },
+  width: {
+    type: String,
+    default: '160px'
+  }
+})
 
-const title = '产品'
+const list = [
+  {
+    title: '酒店管理',
+    column: 2,
+    appList: [
+      [{ title: '招聘管理系统', path: '/' }, { title: '绩效管理系统', path: '/' }],
+      [{ title: '组织人事系统', path: '/' }, { title: '盘点发展系统', path: '/' }],
+      [{ title: '假勤管理系统', path: '/' }, { title: '数字人力分析', path: '/' }],
+      [{ title: '数字人才', path: '/' }, { title: '文化激励', path: '/' }],
+    ],
+  },
+  {
+    title: '人才测评',
+    appList: [
+      [{ title: '招聘测评', path: '/' }, { title: '在线考试系统', path: '/' }],
+      [{ title: '人才管理测评', path: '/' }, { title: '360度评估反馈系统', path: '/' }],
+      [{ title: '人才测评中心平台', path: '/' }, { title: '人才模型构建', path: '/' }],
+    ]
+  },
+  {
+    title: '人才库',
+    appList: [
+      [{ title: '人才库', path: '/' }]
+    ]
+  },
+]
 </script>
 <style lang="scss" scoped>
 </style>

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

@@ -13,8 +13,12 @@
 <script setup>
 import MMenu from './commonMenuStyle.vue'
 defineOptions({name: 'navBar-solution'})
-
-const title = '解决方案'
+defineProps({
+  title: {
+    type: String,
+    default: 'title'
+  }
+})
 </script>
 <style lang="scss" scoped>
 </style>

src/views/entrances/navBar/index.vue

@@ -5,34 +5,43 @@
     style="padding-left: 0px;height: 50px;font-size: 14px;"
   >
     <div class="innerBox d-flex justify-space-between">
-      <div class="d-flex">
+      <div class="d-flex align-center">
         <div class="nav-logo" style="cursor: pointer;" @click="handleLogoClick">
-          <v-img src="@/assets/logo.png"  aspect-ratio="16/9" cover :width="90" style="height: 40px"></v-img>
+          <v-img src="@/assets/logo.png"  aspect-ratio="16/9" cover :width="90" style="height: 40px;"></v-img>
         </div>
-        <!-- <div class="menuList ml-10">
+        <div class="menuList ml-10">
           <div v-for="val in menuList" :key="val.name">
-            <component :is="val.path"></component>
+            <template v-if="val.fileName">
+              <component :is="val.fileName" :title="val.title"></component>
+            </template>
+            <template v-else>
+              <span class="cursor-pointer">{{ val.title }}</span>
+            </template>
           </div>
-        </div> -->
+        </div>
       </div>
-      <!-- <div class="d-flex">
+      <div class="d-flex">
         <span>右侧</span>
-      </div> -->
+      </div>
     </div>
   </v-toolbar>
 </template>
 
 <script setup>
-// import product from './components/product.vue'
-// import solution from './components/solution.vue'
+import product from './components/product.vue'
+import solution from './components/solution.vue'
 import { useRouter } from 'vue-router'; const router = useRouter()
 defineOptions({name: 'entrances-navBar'})
 const handleLogoClick = () => { router.push({ path: '/'}) }
 
-// const menuList = [
-//   { name: 'product', path: product },
-//   { name: 'solution', path: solution },
-// ]
+const menuList = [
+  { title: '产品', fileName: product },
+  { title: '解决方案', fileName: solution },
+  { title: '客户案例', path: '/' },
+  { title: '服务支持', fileName: product },
+  { title: '资源中心', fileName: product },
+  { title: '了解门墩儿', fileName: product },
+]
 </script>
 <style lang="scss" scoped>
 @import '@/styles/entrances/navBar.scss'