搜索栏样式

src/views/index.vue

@@ -91,9 +91,6 @@
       <section class="mt-3 grid gap-4 xl:grid-cols-[1.74fr_0.74fr] grid-cols-1">
         <div class="space-y-4">
           <div class="top-nav-bar">
-            <!-- 左侧标题 -->
-            <!-- <div class="nav-title">统一入口，快速直达</div> -->
-
             <!-- 中间搜索框 -->
             <div class="search-container hidden! md:flex!">
               <Icon icon="mdi:magnify" class="search-icon" />
@@ -2288,14 +2285,13 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 5px 24px;
-  background: var(--portal-nav-bg);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid var(--portal-line);
+  min-height: 52px;
+  padding: 8px 24px;
+  background: linear-gradient(90deg, #245edb 0%, #4fa2ff 100%);
+  border: 1px solid rgba(255, 255, 255, 0.34);
   border-radius: 8px;
   margin-bottom: 10px;
-  box-shadow: var(--portal-shadow);
+  box-shadow: 0 10px 26px rgba(36, 94, 219, 0.18);
 }
 
 .nav-title {
@@ -2310,25 +2306,25 @@ onUnmounted(() => {
   align-items: center;
   gap: 8px;
   position: relative;
-  width: 320px;
-  height: 36px;
-  border-radius: 20px;
-  background: var(--portal-input-bg);
-  border: 1px solid var(--portal-line);
+  width: min(380px, 45vw);
+  height: 34px;
+  border-radius: 999px;
+  background: rgba(239, 247, 255, 0.96);
+  border: 1px solid rgba(28, 92, 190, 0.16);
   overflow: hidden;
+  box-shadow:
+    inset 0 1px 2px rgba(36, 94, 219, 0.08),
+    0 1px 0 rgba(255, 255, 255, 0.45);
   transition: all 0.2s ease;
 }
 
 .search-container:hover {
-  background: var(--portal-input-hover);
-  border-color: rgba(109, 137, 213, 0.4);
+  background: #ffffff;
+  border-color: rgba(28, 92, 190, 0.26);
 }
 
 .search-icon {
-  flex-shrink: 0;
-  font-size: 18px;
-  color: var(--portal-text-soft);
-  margin-left: 12px;
+  display: none;
 }
 
 .search-input {
@@ -2337,36 +2333,48 @@ onUnmounted(() => {
   background: transparent;
   outline: none;
   font-size: 14px;
-  color: var(--portal-text);
-  padding: 0;
+  color: #1b4f8c;
+  padding: 0 18px 0 52px;
   margin: 0;
 }
 
+.search-input::placeholder {
+  color: #527194;
+  opacity: 1;
+}
+
 .shortcut-key {
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 12px;
-  color: var(--portal-text-soft);
-  font-family: "Courier New", monospace;
+  display: none;
 }
 
 .quick-access {
   display: flex;
-  gap: 16px;
+  align-items: center;
+  gap: 28px;
+  min-width: min(345px, 40vw);
+  height: 30px;
+  padding: 0 18px;
+  border-radius: 999px;
+  background: rgba(239, 247, 255, 0.96);
+  border: 1px solid rgba(28, 92, 190, 0.12);
+  box-shadow:
+    inset 0 1px 2px rgba(36, 94, 219, 0.08),
+    0 1px 0 rgba(255, 255, 255, 0.45);
 }
 
 .quick-btn {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
+  justify-content: center;
+  gap: 12px;
+  height: 28px;
+  padding: 0;
   /* border: 1px solid rgba(109, 137, 213, 0.16); */
   border-radius: 12px;
   /* background: rgba(17, 25, 48, 0.8); */
-  color: var(--portal-text);
+  color: #244d7a;
   font-size: 13px;
+  font-weight: 700;
   cursor: pointer;
   transition:
     background 0.2s ease,
@@ -2385,9 +2393,9 @@ onUnmounted(() => {
 }
 
 .quick-btn:hover {
-  background: var(--portal-nav-hover);
+  background: transparent;
   border-color: rgba(109, 137, 213, 0.4);
-  transform: translateY(-1px);
+  transform: none;
 }
 
 .btn-icon {
@@ -2405,7 +2413,7 @@ onUnmounted(() => {
 }
 
 .quick-btn__meta {
-  color: var(--portal-text-soft);
+  color: #244d7a;
 }
 
 .quick-btn__count {
@@ -2420,6 +2428,74 @@ onUnmounted(() => {
   color: var(--portal-number-done);
 }
 
+.top-nav-bar .quick-btn img,
+.top-nav-bar .btn-icon {
+  display: none;
+}
+
+:global([data-theme="dark"] .top-nav-bar) {
+  padding: 5px 24px;
+  background: var(--portal-nav-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--portal-line);
+  box-shadow: var(--portal-shadow);
+}
+
+:global([data-theme="dark"] .top-nav-bar .search-container) {
+  width: 320px;
+  height: 36px;
+  background: var(--portal-input-bg);
+  border: 1px solid var(--portal-line);
+  box-shadow: none;
+}
+
+:global([data-theme="dark"] .top-nav-bar .search-icon) {
+  display: block;
+}
+
+:global([data-theme="dark"] .top-nav-bar .search-input) {
+  color: var(--portal-text);
+  padding: 0;
+}
+
+:global([data-theme="dark"] .top-nav-bar .shortcut-key) {
+  display: block;
+}
+
+:global([data-theme="dark"] .top-nav-bar .quick-access) {
+  gap: 16px;
+  min-width: 0;
+  height: auto;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
+:global([data-theme="dark"] .top-nav-bar .quick-btn) {
+  justify-content: flex-start;
+  gap: 8px;
+  height: auto;
+  padding: 8px 12px;
+  color: var(--portal-text);
+  font-weight: 400;
+}
+
+:global([data-theme="dark"] .top-nav-bar .quick-btn:hover) {
+  background: var(--portal-nav-hover);
+  transform: translateY(-1px);
+}
+
+:global([data-theme="dark"] .top-nav-bar .quick-btn__meta) {
+  color: var(--portal-text-soft);
+}
+
+:global([data-theme="dark"] .top-nav-bar .quick-btn img),
+:global([data-theme="dark"] .top-nav-bar .btn-icon) {
+  display: inline-flex;
+}
+
 .aside-btn {
   color: var(--portal-text-soft);
 }