From 58e99467ae0355a4bd0f9a7ef6d8a9005aef8252 Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Wed, 10 Sep 2025 14:57:01 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4=E6=9D=90?=
 =?UTF-8?q?=E6=96=99=E5=9B=BE=E9=89=B4=E9=A1=B6=E9=83=A8=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=9D=E6=8C=81UI=E4=B8=80=E8=87=B4=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/WIKI/Material.vue | 76 ++++++++++++++++++++-----------------
 src/pages/WIKI/NameCard.vue |  2 +-
 2 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/src/pages/WIKI/Material.vue b/src/pages/WIKI/Material.vue
index 1f0dbd35..322851ab 100644
--- a/src/pages/WIKI/Material.vue
+++ b/src/pages/WIKI/Material.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-app-bar density="compact">
+  <v-app-bar>
     <template #prepend>
-      <div class="twm-title">
-        <div class="twm-title-left">
+      <div class="twm-top-prepend">
+        <div class="title">
           <img src="/source/UI/wikiGCG.webp" alt="icon" />
           <span>材料图鉴</span>
         </div>
@@ -14,6 +14,8 @@
           :clearable="true"
           width="250px"
           label="材料类别"
+          density="compact"
+          variant="outlined"
         >
           <template #item="{ props, item }">
             <v-list-item v-bind="props">
@@ -26,16 +28,19 @@
       </div>
     </template>
     <template #append>
-      <v-text-field
-        v-model="search"
-        width="200px"
-        append-icon="mdi-magnify"
-        label="搜索"
-        :single-line="true"
-        :hide-details="true"
-        @keydown.enter="searchMaterial()"
-        @click:append="searchMaterial()"
-      />
+      <div class="twm-top-append">
+        <v-text-field
+          v-model="search"
+          variant="outlined"
+          density="compact"
+          prepend-inner-icon="mdi-magnify"
+          label="搜索"
+          :single-line="true"
+          :hide-details="true"
+          @keydown.enter="searchMaterial()"
+          @click:prepend-inner="searchMaterial()"
+        />
+      </div>
     </template>
   </v-app-bar>
   <div class="twm-box">
@@ -158,33 +163,36 @@ function searchMaterial(): void {
 }
 </script>
 <style lang="css" scoped>
-.twm-title {
+.twm-top-prepend {
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 5px;
-  margin: 5px;
-  column-gap: 10px;
+  justify-content: flex-start;
+  margin-left: 16px;
+  column-gap: 16px;
+
+  .title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--common-text-title);
+    column-gap: 4px;
+    font-family: var(--font-title);
+    font-size: 20px;
+
+    img {
+      width: 32px;
+      height: 32px;
+      object-fit: cover;
+    }
+  }
 }
 
-.twm-title-left {
+.twm-top-append {
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  column-gap: 5px;
-
-  img {
-    width: 30px;
-    height: 30px;
-    object-fit: cover;
-  }
-
-  span {
-    font-family: var(--font-title);
-    font-size: 18px;
-  }
+  width: 600px;
+  margin-right: 16px;
 }
 
 .twm-box {
diff --git a/src/pages/WIKI/NameCard.vue b/src/pages/WIKI/NameCard.vue
index 87061db9..512e1d43 100644
--- a/src/pages/WIKI/NameCard.vue
+++ b/src/pages/WIKI/NameCard.vue
@@ -3,7 +3,7 @@
     <template #prepend>
       <div class="wnc-top-prepend">
         <div class="title">
-          <v-icon>mdi-credit-card-outline</v-icon>
+          <v-icon size="32">mdi-credit-card-outline</v-icon>
           <span>名片图鉴</span>
         </div>
         <v-select