diff --git a/SupplierReview.html b/SupplierReview.html index 65f5891..b9ce908 100644 --- a/SupplierReview.html +++ b/SupplierReview.html @@ -1266,21 +1266,64 @@ /* 调整搜索栏 */ .search-bar { flex-direction: column; - gap: 10px; - padding: 16px; - border-radius: 8px; + gap: 12px; + padding: 20px; + border-radius: 12px; + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) inset; } .search-bar input { + width: 100%; min-width: auto; - padding: 12px 14px; - border-radius: 6px; + padding: 14px 16px; + border: 2px solid #e0e0e0; + border-radius: 8px; + font-size: 14px; + transition: all 0.3s ease; + background-color: #fff; + } + + .search-bar input:focus { + outline: none; + border-color: #1890ff; + box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1); } .search-bar button { width: 100%; - padding: 14px; - border-radius: 6px; + padding: 14px 24px; + background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%); + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + font-weight: 500; + transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3); + position: relative; + overflow: hidden; + } + + .search-bar button::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s; + } + + .search-bar button:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4); + } + + .search-bar button:hover::before { + left: 100%; } /* 调整供应商信息卡片 */