From d13cd91bd0ca8908a290c4803d87dc0e6c422293 Mon Sep 17 00:00:00 2001
From: Orion <orionc1226@gmail.com>
Date: Fri, 5 Jun 2026 14:13:13 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=9B=EF=B8=8F=20=E7=B2=BE=E5=87=86?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=97=A5=E6=9C=9F=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/NativeDateSelect.vue | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/common/NativeDateSelect.vue b/src/components/common/NativeDateSelect.vue
index 0c00b30..0574344 100644
--- a/src/components/common/NativeDateSelect.vue
+++ b/src/components/common/NativeDateSelect.vue
@@ -98,11 +98,13 @@ const updatePart = (part: DatePart, value: string) => {
 <style scoped>
 .native-date-strip {
   display: inline-flex;
-  width: 100%;
+  width: max-content;
+  max-width: 100%;
   min-height: 2.75rem;
   align-items: center;
   justify-content: center;
   gap: 0;
+  padding-inline: 0.65ch;
   border: 1px solid transparent;
   border-radius: 30px;
   background: rgba(237, 244, 245, 0.52);
@@ -137,6 +139,7 @@ const updatePart = (part: DatePart, value: string) => {
   background: transparent;
   color: inherit;
   cursor: pointer;
+  padding: 0;
   text-align: center;
   font-size: 0.95rem;
   font-weight: 600;
@@ -150,18 +153,19 @@ const updatePart = (part: DatePart, value: string) => {
 }
 
 .native-date-year {
-  width: 3.85rem;
+  width: 4.2ch;
 }
 
 .native-date-month,
 .native-date-day {
-  width: 2.05rem;
+  width: 2.2ch;
 }
 
 .native-date-separator {
-  margin-inline: -0.1rem;
+  margin-inline: 0.35ch;
   color: #789096;
   font-size: 0.95rem;
+  line-height: 1;
   opacity: 0.78;
   pointer-events: none;
 }
@@ -184,12 +188,4 @@ const updatePart = (part: DatePart, value: string) => {
 .dark .native-date-separator {
   color: #aabdc2;
 }
-
-@media (min-width: 640px) {
-  .native-date-strip {
-    width: max-content;
-    min-width: 9.75rem;
-    padding-inline: 0.55rem;
-  }
-}
 </style>