feat: 优化小程序人生事件详情页、表单页和记录视图页样式

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

mini-program/src/pages/life-event/form.vue

@@ -94,13 +94,13 @@
             <picker mode="date" :value="form.time" @change="e => setRangeStart(e.detail.value)">
               <view class="picker-field compact">
                 <view class="calendar-icon"></view>
-                <text>{{ formatDate(form.time) }}</text>
+                <text class="range-date-text">{{ formatShortDate(form.time) }}</text>
               </view>
             </picker>
             <text class="range-line">至</text>
             <picker mode="date" :value="form.endTime" @change="e => setRangeEnd(e.detail.value)">
               <view class="picker-field compact">
-                <text>{{ formatDate(form.endTime) }}</text>
+                <text class="range-date-text">{{ formatShortDate(form.endTime) }}</text>
                 <text class="chevron">›</text>
               </view>
             </picker>
@@ -301,6 +301,11 @@ const formatDate = (value) => {
   return `${year}年${month}月${day}日`
 }
 
+const formatShortDate = (value) => {
+  if (!value) return '选择日期'
+  return String(value).replaceAll('-', '.')
+}
+
 const formatMonth = (value) => {
   const [year, month] = (value || form.time.slice(0, 7)).split('-')
   return `${year}年${month}月`
@@ -617,7 +622,7 @@ const goBack = () => {
   flex: 1;
   height: 0;
   min-height: 0;
-  padding: 0 32rpx 28rpx;
+  padding: 0 28rpx 28rpx;
   box-sizing: border-box;
 }
 
@@ -625,7 +630,7 @@ const goBack = () => {
   position: relative;
   overflow: hidden;
   border-radius: 30rpx;
-  padding: 38rpx 30rpx 88rpx;
+  padding: 36rpx 26rpx 84rpx;
   border: 2rpx solid rgba(145, 70, 255, 0.76);
   background:
     radial-gradient(circle at 52% 8%, rgba(126, 72, 255, 0.13), transparent 35%),
@@ -648,9 +653,9 @@ const goBack = () => {
 }
 
 .group-title {
-  gap: 16rpx;
+  gap: 14rpx;
   color: #d7bdff;
-  font-size: 31rpx;
+  font-size: 29rpx;
   font-weight: 900;
 }
 
@@ -766,7 +771,7 @@ const goBack = () => {
   align-items: center;
   justify-content: center;
   color: rgba(224, 214, 243, 0.78);
-  font-size: 24rpx;
+  font-size: 22rpx;
   font-weight: 600;
 }
 
@@ -785,25 +790,31 @@ const goBack = () => {
   border: 1rpx solid rgba(151, 111, 255, 0.28);
   background: rgba(12, 15, 46, 0.74);
   color: #fff;
-  font-size: 27rpx;
+  font-size: 25rpx;
 }
 
 .picker-field {
   height: 78rpx;
   margin-top: 26rpx;
-  padding: 0 24rpx;
+  padding: 0 22rpx;
   display: flex;
   align-items: center;
-  gap: 18rpx;
+  gap: 14rpx;
 }
 
 .picker-field text:nth-child(2) {
   flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .picker-field.compact {
   margin-top: 0;
-  min-width: 284rpx;
+  min-width: 0;
+  height: 72rpx;
+  padding: 0 16rpx;
 }
 
 .calendar-icon {
@@ -827,20 +838,34 @@ const goBack = () => {
 .chevron {
   flex: none !important;
   color: rgba(224, 214, 243, 0.7);
-  font-size: 50rpx;
+  font-size: 42rpx;
   line-height: 1;
 }
 
 .range-fields {
   margin-top: 26rpx;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
-  gap: 12rpx;
+  gap: 10rpx;
+}
+
+.range-fields picker {
+  min-width: 0;
 }
 
 .range-line {
   color: rgba(224, 214, 243, 0.7);
-  font-size: 24rpx;
+  font-size: 22rpx;
+  font-weight: 700;
+}
+
+.range-date-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .divider {
@@ -853,7 +878,7 @@ const goBack = () => {
 .optional,
 .custom-tag {
   color: #b58bff;
-  font-size: 23rpx;
+  font-size: 22rpx;
   font-weight: 600;
 }
 
@@ -927,7 +952,7 @@ const goBack = () => {
   align-items: center;
   justify-content: center;
   color: rgba(224, 214, 243, 0.74);
-  font-size: 24rpx;
+  font-size: 22rpx;
   border: 1rpx solid rgba(151, 111, 255, 0.2);
   background: rgba(20, 22, 58, 0.58);
 }