From 2712d966bb9f269f018f7b138893a8f97f387856 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Sun, 23 Nov 2025 23:55:28 +0800
Subject: [PATCH] uigu

---
 common/common.css | 414 +++++++++++++++++++++++++++-------------------
 css/index.css     |   8 +-
 2 files changed, 251 insertions(+), 171 deletions(-)

diff --git a/common/common.css b/common/common.css
index 0d0e53d..30d6ddd 100644
--- a/common/common.css
+++ b/common/common.css
@@ -58,24 +58,24 @@
   max-width: unset;
 }
 
-#header {
-  position: sticky;
-  top: 0;
-  background: #fff;
-  z-index: 888;
-}
-
-.nav-shadow {
-  top: 0;
-  box-shadow: 0px 0px 8px rgba(52, 52, 52, 0.08);
-  /* 默认 header 背景保持浅色，首页会在 css/index.css 中做单独科技风覆盖 */
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0.98) 0%,
-    rgba(245, 247, 255, 0.98) 40%,
-    rgba(227, 237, 255, 0.98) 100%
-  );
-}
+#header {
+  position: sticky;
+  top: 0;
+  background: #fff;
+  z-index: 888;
+}
+
+.nav-shadow {
+  top: 0;
+  box-shadow: 0px 0px 8px rgba(52, 52, 52, 0.08);
+  /* 默认 header 背景保持浅色，首页会在 css/index.css 中做单独科技风覆盖 */
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.98) 0%,
+    rgba(245, 247, 255, 0.98) 40%,
+    rgba(227, 237, 255, 0.98) 100%
+  );
+}
 
 .nav-header {
   display: flex;
@@ -101,20 +101,20 @@
   display: flex;
 }
 
-.nav-menu .nav-item {
-  color: #333;
-  display: flex;
+.nav-menu .nav-item {
+  color: #333;
+  display: flex;
   align-items: center;
   height: 72px;
   padding: 0 20px;
-  font-size: 16px;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-}
-
-.nav-menu .nav-item:hover {
-  border-bottom: 2px solid #38BDF8;
-}
+  font-size: 16px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+
+.nav-menu .nav-item:hover {
+  border-bottom: 2px solid #38BDF8;
+}
 
 
 .nav-right {
@@ -175,20 +175,20 @@
   display: none !important;
 }
 
-.nav-item-box {
-  min-width: 335px;
-  height: 96px;
-  padding: 24px 20px;
-  border-radius: 3px;
+.nav-item-box {
+  min-width: 335px;
+  height: 96px;
+  padding: 24px 20px;
+  border-radius: 3px;
   background: #fff;
   display: flex;
-  cursor: pointer;
-  box-shadow: 0px 0px 8px rgba(52, 52, 52, 0.08);
-}
-
-.nav-item-box:hover .title {
-  color: rgba(56, 189, 248, 1);
-}
+  cursor: pointer;
+  box-shadow: 0px 0px 8px rgba(52, 52, 52, 0.08);
+}
+
+.nav-item-box:hover .title {
+  color: rgba(56, 189, 248, 1);
+}
 
 .nav-item-box img {
   width: 48px;
@@ -268,32 +268,32 @@
   border-radius: 3px;
 }
 
-.nav-header .login-in .login-menu .login-menu-item {
-  cursor: pointer;
-  height: 40px;
-  padding: 10px 12px;
-}
-
-.nav-header .login-in .login-menu .login-menu-item:hover {
-  background: rgba(56, 189, 248, 0.08);
-  color: rgba(56, 189, 248, 1);
-}
-
-.nav-header .login-in .login-menu .login-menu-item .real-name {
-  display: inline-block;
-  text-align: center;
-  border: 1px solid #38BDF8;
-  color: rgba(56, 189, 248, 1);
+.nav-header .login-in .login-menu .login-menu-item {
+  cursor: pointer;
+  height: 40px;
+  padding: 10px 12px;
+}
+
+.nav-header .login-in .login-menu .login-menu-item:hover {
+  background: rgba(56, 189, 248, 0.08);
+  color: rgba(56, 189, 248, 1);
+}
+
+.nav-header .login-in .login-menu .login-menu-item .real-name {
+  display: inline-block;
+  text-align: center;
+  border: 1px solid #38BDF8;
+  color: rgba(56, 189, 248, 1);
   font-size: 12px;
   width: 44px;
   height: 18px;
   border-radius: 3px;
 }
 
-.nav-header .login-in .login-menu .login-menu-item .no-real-name {
-  border: 1px solid #E34D59;
-  color: rgba(227, 77, 89, 1);
-}
+.nav-header .login-in .login-menu .login-menu-item .no-real-name {
+  border: 1px solid #E34D59;
+  color: rgba(227, 77, 89, 1);
+}
 
 /* 底部导航栏 */
 
@@ -409,23 +409,23 @@
 
 }
 
-.footer .link-hover {
-  color: rgba(255, 255, 255, 0.50);
-}
-
-.footer .link-hover:hover {
-  color: rgba(56, 189, 248, 1);
-}
+.footer .link-hover {
+  color: rgba(255, 255, 255, 0.50);
+}
 
-.footer .footer-link a {
-  margin-right: 10px;
-  color: rgba(255, 255, 255, 0.50);
-}
-
-.footer .footer-link a:hover {
-  margin-right: 10px;
-  color: rgba(56, 189, 248, 1);
-}
+.footer .link-hover:hover {
+  color: rgba(56, 189, 248, 1);
+}
+
+.footer .footer-link a {
+  margin-right: 10px;
+  color: rgba(255, 255, 255, 0.50);
+}
+
+.footer .footer-link a:hover {
+  margin-right: 10px;
+  color: rgba(56, 189, 248, 1);
+}
 
 .footer .footer-record {
   display: flex;
@@ -449,23 +449,23 @@
   margin-left: 20px;
 }
 
-.jr-tabs .title {
-  color: #666;
-  font-size: 18px;
-  width: auto !important;
-  padding: 10px 40px;
-  cursor: pointer;
-  margin-right: 0 !important;
-}
-
-.jr-tabs .title.swiper-slide-thumb-active {
-  color: rgba(56, 189, 248, 1);
-  border-bottom: 2px solid #38BDF8;
-}
-
-.jr-tabs .title:hover {
-  color: rgba(56, 189, 248, 1);
-  border-bottom: 2px solid #38BDF8;
+.jr-tabs .title {
+  color: #666;
+  font-size: 18px;
+  width: auto !important;
+  padding: 10px 40px;
+  cursor: pointer;
+  margin-right: 0 !important;
+}
+
+.jr-tabs .title.swiper-slide-thumb-active {
+  color: rgba(56, 189, 248, 1);
+  border-bottom: 2px solid #38BDF8;
+}
+
+.jr-tabs .title:hover {
+  color: rgba(56, 189, 248, 1);
+  border-bottom: 2px solid #38BDF8;
 }
 
 
@@ -582,15 +582,15 @@
   position: relative;
 }
 
-.input-search input {
-  padding-left: 15px;
-  font-size: 20px;
+.input-search input {
+  padding-left: 15px;
+  font-size: 20px;
   margin-top: 30px;
-  margin-bottom: 20px;
-  width: 30%;
-  height: 56px;
-  background: #FFFFFF;
-  border: 1px solid #38BDF8;
+  margin-bottom: 20px;
+  width: 30%;
+  height: 56px;
+  background: #FFFFFF;
+  border: 1px solid #38BDF8;
 }
 
 .trademark-box .input-search input {
@@ -601,34 +601,34 @@
   border-right: none;
 }
 
-.input-search .search-btn {
-  cursor: pointer;
-  color: #fff;
-  margin-top: 30px;
-  margin-bottom: 20px;
-  padding: 18px 32px;
-  background: rgba(56, 189, 248, 1);
+.input-search .search-btn {
+  cursor: pointer;
+  color: #fff;
+  margin-top: 30px;
+  margin-bottom: 20px;
+  padding: 18px 32px;
+  background: rgba(56, 189, 248, 1);
 }
 
 
 
 
-.input-search .input-search-select {
-  cursor: pointer;
+.input-search .input-search-select {
+  cursor: pointer;
   text-align: center;
   line-height: 56px;
   width: 124px;
   height: 56px;
   margin-top: 30px;
-  margin-bottom: 20px;
-  background: #fff;
-  border: 1px solid #38BDF8;
-  border-left: none;
-}
-
-.input-search .input-search-left-select {
-  border: 1px solid #38BDF8;
-  border-right: none;
+  margin-bottom: 20px;
+  background: #fff;
+  border: 1px solid #38BDF8;
+  border-left: none;
+}
+
+.input-search .input-search-left-select {
+  border: 1px solid #38BDF8;
+  border-right: none;
 }
 
 .input-search .input-search-s {
@@ -692,9 +692,9 @@
   border: 1px solid #E6EAED;
 }
 
-.input-search .input-search-select .select-box-item:hover {
-  border: 1px solid #38BDF8;
-  color: #38BDF8;
+.input-search .input-search-select .select-box-item:hover {
+  border: 1px solid #38BDF8;
+  color: #38BDF8;
 }
 
 .input-search .input-search-select .iconfont {
@@ -718,20 +718,20 @@
   border: none;
 }
 
-.link-search-group .price {
-  margin-left: 5px;
-  color: rgba(56, 189, 248, 1);
-}
+.link-search-group .price {
+  margin-left: 5px;
+  color: rgba(56, 189, 248, 1);
+}
 
 /* 分页 */
-.jr-page .pagination .page-number.active {
-  color: #fff;
-  border: 1px solid rgba(56, 189, 248, 1);
-  background: rgba(56, 189, 248, 1);
-}
-
-.jr-page .pagination .page-number:hover {
-  background: rgba(56, 189, 248, 1);
+.jr-page .pagination .page-number.active {
+  color: #fff;
+  border: 1px solid rgba(56, 189, 248, 1);
+  background: rgba(56, 189, 248, 1);
+}
+
+.jr-page .pagination .page-number:hover {
+  background: rgba(56, 189, 248, 1);
   color: #fff !important;
 }
 
@@ -794,92 +794,174 @@
 
 
 
-/* 侧边 */
+/* 侧边工具栏 - 深色科技风格 */
 .aside-tools {
   position: fixed;
   top: 45%;
   right: 0;
   z-index: 3;
+  transform: translateY(-50%);
 }
 
 .aside-tools .tools-list {
-  width: 40px;
-  background: #FFFFFF;
-  box-shadow: 0px 0px 10px rgba(19, 55, 83, 0.08);
-  opacity: 1;
-  border-radius: 3px 0 0 3px;
+  width: 50px;
+  background: rgba(15, 23, 42, 0.9);
+  backdrop-filter: blur(20px);
+  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  border-right: none;
+  border-radius: 8px 0 0 8px;
+  overflow: hidden;
 }
 
 .aside-tools .tools-list .tools-item {
   position: relative;
+  transition: all 0.3s ease;
+}
+
+.aside-tools .tools-list .tools-item:hover {
+  background: rgba(56, 189, 248, 0.1);
 }
 
 .aside-tools .tools-list .tools-item img {
-  margin: 10px;
+  margin: 13px;
   height: 24px;
   width: 24px;
   cursor: pointer;
+  filter: brightness(0.9);
+  transition: all 0.3s ease;
+}
+
+.aside-tools .tools-list .tools-item:hover img {
+  filter: brightness(1.2);
+  transform: scale(1.1);
 }
 
 .aside-tools .tools-list .tools-item::before {
   content: '';
   position: absolute;
-  background: rgba(230, 234, 237, 1);
+  background: rgba(148, 163, 184, 0.15);
   bottom: 0;
+  left: 10px;
   right: 10px;
-  width: 16px;
   height: 1px;
 }
 
 .aside-tools .tools-list .tools-item:last-child:before {
   content: none;
-
 }
 
 .aside-tools .tools-list .tools-item:hover .tools-box {
   display: block;
+  animation: slideInRight 0.3s ease;
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 .aside-tools .tools-list .tools-item .tools-box {
   display: none;
   position: absolute;
-  left: -220px;
+  left: -240px;
   top: 0;
-  padding-right: 30px;
+  padding-right: 15px;
 }
 
 .aside-tools .tools-list .tools-item .tools-box-s {
-  padding: 20px;
-  width: 190px;
-  background: #FFFFFF;
-  box-shadow: 0px 0px 10px rgba(19, 55, 83, 0.08);
-  opacity: 1;
-  border-radius: 3px;
+  padding: 24px;
+  width: 210px;
+  background: rgba(15, 23, 42, 0.95);
+  backdrop-filter: blur(20px);
+  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 弹窗卡片光晕效果 */
+.aside-tools .tools-list .tools-item .tools-box-s::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(
+    circle at center,
+    rgba(56, 189, 248, 0.1) 0%,
+    transparent 50%
+  );
+  pointer-events: none;
 }
 
 .aside-tools .tools-list .tools-item .tools-box h5 {
-  font-size: 14px;
-  font-weight: bold;
-  margin-bottom: 5px;
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #F9FAFB;
+  position: relative;
 }
 
 .aside-tools .tools-list .tools-item .tools-box p {
   font-size: 13px;
+  color: rgba(203, 213, 225, 0.8);
+  line-height: 1.6;
+  position: relative;
+}
+
+.aside-tools .tools-list .tools-item .tools-box .com-contact-tel {
+  color: #38BDF8;
+  font-weight: 500;
+  font-size: 14px;
+  margin-top: 8px;
 }
 
 .aside-tools .tools-list .tools-item .tools-box .button {
-  font-size: 12px;
+  font-size: 13px;
   display: inline-block;
-  margin-top: 20px;
-  padding: 4px 7px;
-  border: 1px solid #E6EAED;
-  opacity: 1;
-  border-radius: 3px;
+  margin-top: 16px;
+  padding: 8px 20px;
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
+  border: 1px solid rgba(56, 189, 248, 0.3);
+  border-radius: 6px;
+  color: #38BDF8;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }
 
-.aside-tools .tools-list .tools-item .tools-box .button:hover {
-  border: 1px solid #38BDF8;
-}
+.aside-tools .tools-list .tools-item .tools-box .button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.3), transparent);
+  transition: left 0.5s ease;
+}
+
+.aside-tools .tools-list .tools-item .tools-box .button:hover {
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3) 0%, rgba(99, 102, 241, 0.3) 100%);
+  border-color: rgba(56, 189, 248, 0.5);
+  color: #FFFFFF;
+  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
+  transform: translateY(-2px);
+}
+
+.aside-tools .tools-list .tools-item .tools-box .button:hover::before {
+  left: 100%;
+}
 
 
 .flex-none {
@@ -905,4 +987,4 @@
   .nav-content a {
     width: calc(33.33% - 14px);
   }
-}
+}
diff --git a/css/index.css b/css/index.css
index 5c60d2c..27676e8 100644
--- a/css/index.css
+++ b/css/index.css
@@ -129,11 +129,9 @@
   user-select: none;
 }
 
-/* 登录注册容器 - 修复为 inline flex */
+/* 登录注册容器 - 与其他导航项平级 */
 #index .no-login {
-  display: inline-flex;
-  align-items: stretch;
-  height: 100%;
+  display: contents; /* 让子元素直接参与父级 flex 布局 */
 }
 
 /* 注册文字链接 */
@@ -143,7 +141,7 @@
   align-items: center;
 }
 
-/* 登录按钮包装器 - 与 header 等高 */
+/* 登录按钮 - 与 header 等高，直接参与 nav-right 的 flex 布局 */
 #index .login-btn-wrapper {
   display: flex;
   align-items: stretch;