feat:gengxin-menu

travel-platform-web/travel-web/src/crm/mobile/nav-mobile-menu/nav-mobile-menu.html

@@ -3,7 +3,7 @@
   <div class="web-nav-container">
     <!-- 品牌Logo/名称 -->
     <div class="web-nav-brand">
-      <a routerLink="/mobile/home">赣鄱文旅</a>
+      <a routerLink="/mobile/home" class="logo">赣鄱文旅</a>
     </div>
 
     <!-- 主菜单 -->
@@ -13,31 +13,26 @@
           <a routerLink="/mobile/home" 
              routerLinkActive="active" 
              [routerLinkActiveOptions]="{exact: true}">
-            <i class="icon-home"></i>
             <span>首页</span>
           </a>
         </li>
         <li class="web-nav-item">
           <a routerLink="/mobile/platform" routerLinkActive="active">
-            <i class="icon-platform"></i>
             <span>数智共创平台</span>
           </a>
         </li>
         <li class="web-nav-item">
           <a routerLink="/mobile/business" routerLinkActive="active">
-            <i class="icon-business"></i>
             <span>协会核心业务</span>
           </a>
         </li>
         <li class="web-nav-item">
           <a routerLink="/mobile/member" routerLinkActive="active">
-            <i class="icon-member"></i>
             <span>会员服务</span>
           </a>
         </li>
         <li class="web-nav-item">
           <a routerLink="/mobile/system" routerLinkActive="active">
-            <i class="icon-system"></i>
             <span>支撑系统</span>
           </a>
         </li>

travel-platform-web/travel-web/src/crm/mobile/nav-mobile-menu/nav-mobile-menu.scss

@@ -2,35 +2,46 @@
 
 /* 基础样式 */
 .web-nav {
-  background-color: #ffffff;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  position: sticky;
+  background: linear-gradient(90deg, #2F7DAD, #5B8C5A);
+  height: 80px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  position: relative;
+  overflow: hidden;
+}
+
+.web-nav::before {
+  content: "";
+  position: absolute;
   top: 0;
-  z-index: 1000;
+  left: 0;
+  right: 0;
+  height: 100%;
+  // background: url('mountain-silhouette.png') bottom center repeat-x;
+  opacity: 0.2;
+  z-index: 1;
 }
 
 .web-nav-container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 20px;
+  padding: 0 5%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 60px;
+  height: 100%;
+  position: relative;
+  z-index: 2;
 }
 
 /* 品牌样式 */
-.web-nav-brand a {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: #333;
+.web-nav-brand .logo {
+  font-family: "赣锋体", serif;
+  font-size: 2rem;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
   text-decoration: none;
 }
 
-.web-nav-brand a:hover {
-  color: #0066cc;
-}
-
 /* 菜单样式 */
 .web-nav-menu {
   flex-grow: 1;
@@ -38,76 +49,112 @@
 
 .web-nav-list {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   list-style: none;
   margin: 0;
   padding: 0;
+  gap: 2rem;
 }
 
 .web-nav-item {
-  margin: 0 15px;
   position: relative;
 }
 
 .web-nav-item a {
   display: flex;
   align-items: center;
-  color: #555;
+  color: white;
   text-decoration: none;
-  font-size: 1rem;
-  padding: 10px 0;
-  transition: color 0.3s;
+  font-size: 1.1rem;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  position: relative;
 }
 
 .web-nav-item a:hover {
-  color: #0066cc;
+  background-color: rgba(255,255,255,0.2);
 }
 
-.web-nav-item a i {
-  margin-right: 8px;
-  font-size: 1.1rem;
+.web-nav-item a::after {
+  content: "";
+  position: absolute;
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 2px;
+  background-color: #D4B16A;
+  transition: width 0.3s ease;
+}
+
+.web-nav-item a:hover::after {
+  width: 70%;
 }
 
 /* 活动菜单项样式 */
 .web-nav-item a.active {
-  color: #0066cc;
   font-weight: 500;
 }
 
-.web-nav-item a.active:after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background-color: #0066cc;
+.web-nav-item a.active::after {
+  width: 70%;
+  background-color: #D4B16A;
 }
 
 /* 用户操作区域样式 */
 .web-nav-actions {
   display: flex;
   align-items: center;
+  margin-left: 2rem;
 }
 
 .web-nav-action {
   background: none;
   border: none;
-  color: #555;
+  color: white;
   font-size: 1.2rem;
   cursor: pointer;
-  margin-left: 15px;
+  margin-left: 1rem;
   padding: 5px;
-  transition: color 0.3s;
+  transition: all 0.3s ease;
 }
 
 .web-nav-action:hover {
-  color: #0066cc;
+  transform: scale(1.1);
 }
 
 /* 内容区域样式 */
 .web-content {
   max-width: 1200px;
   margin: 20px auto;
-  padding: 0 20px;
+  padding: 0 5%;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .web-nav {
+    height: auto;
+    padding: 1rem;
+  }
+  
+  .web-nav-container {
+    flex-direction: column;
+  }
+  
+  .web-nav-menu {
+    width: 100%;
+    margin-top: 1rem;
+  }
+  
+  .web-nav-list {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+  }
+  
+  .web-nav-actions {
+    margin-left: 0;
+    margin-top: 1rem;
+  }
 }