feat: 优化小程序人生事件详情、表单页及人生剧本页面样式

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

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

@@ -1,26 +1,7 @@
 <template>
   <view class="record-page">
     <view class="space-bg"></view>
-    <view class="status-safe" :style="{ height: safeAreaTop + 'px' }"></view>
-
-    <view class="top-bar">
-      <text class="clock-text">{{ currentTime }}</text>
-      <view class="route-pill">
-        <view class="shield-icon"></view>
-        <text class="route-text">行程中</text>
-        <text class="score-text">18分</text>
-      </view>
-      <view class="signal-group">
-        <view class="signal-bars">
-          <view></view>
-          <view></view>
-          <view></view>
-          <view></view>
-        </view>
-        <text class="network-text">5GA</text>
-        <view class="battery-box"><text>41</text></view>
-      </view>
-    </view>
+    <view class="safe-top" :style="{ height: safeAreaTop + 10 + 'px' }"></view>
 
     <view class="header">
       <view class="back-hit" @click="goBack"><view class="back-icon"></view></view>
@@ -188,8 +169,7 @@ import { computed, onMounted, reactive, ref } from 'vue'
 import { useAppStore } from '../../stores/app.js'
 
 const store = useAppStore()
-const safeAreaTop = ref(16)
-const currentTime = ref('21:10')
+const safeAreaTop = ref(20)
 const saving = ref(false)
 const currentYear = new Date().getFullYear()
 
@@ -244,9 +224,7 @@ const seasonPickerValue = computed(() => {
 
 onMounted(() => {
   const info = uni.getWindowInfo()
-  safeAreaTop.value = info.safeAreaInsets?.top || info.statusBarHeight || 16
-  const now = new Date()
-  currentTime.value = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
+  safeAreaTop.value = info.safeAreaInsets?.top || info.statusBarHeight || 20
   const pages = getCurrentPages()
   const id = pages[pages.length - 1]?.options?.id || ''
   if (id) loadEvent(id)
@@ -438,139 +416,25 @@ const goBack = () => {
   background-position: 44rpx 44rpx, 10rpx 112rpx;
 }
 
-.status-safe,
-.top-bar,
+.safe-top,
 .header,
 .content {
   position: relative;
   z-index: 1;
 }
 
-.status-safe,
-.top-bar,
+.safe-top,
 .header {
   flex-shrink: 0;
 }
 
-.top-bar {
-  height: 74rpx;
-  display: grid;
-  grid-template-columns: 140rpx 1fr 178rpx;
-  align-items: center;
-  padding: 0 32rpx;
-  box-sizing: border-box;
-}
-
-.clock-text {
-  color: #fff;
-  font-size: 30rpx;
-  font-weight: 700;
-}
-
-.route-pill {
-  justify-self: center;
-  width: 356rpx;
-  height: 62rpx;
-  border-radius: 999rpx;
-  display: grid;
-  grid-template-columns: 30rpx 1fr auto;
-  align-items: center;
-  gap: 12rpx;
-  padding: 0 24rpx;
-  box-sizing: border-box;
-  background: rgba(0, 0, 0, 0.76);
-  border: 3rpx solid rgba(255, 255, 255, 0.22);
-  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.42);
-}
-
-.route-text,
-.score-text {
-  font-size: 23rpx;
-}
-
-.route-text {
-  font-weight: 800;
-}
-
-.score-text {
-  color: rgba(255, 255, 255, 0.82);
-}
-
-.shield-icon {
-  position: relative;
-  width: 25rpx;
-  height: 27rpx;
-  border: 4rpx solid #fff;
-  border-radius: 10rpx 10rpx 13rpx 13rpx;
-  box-sizing: border-box;
-}
-
-.shield-icon::after {
-  content: '';
-  position: absolute;
-  left: 6rpx;
-  top: 4rpx;
-  width: 7rpx;
-  height: 10rpx;
-  border-right: 3rpx solid #fff;
-  border-bottom: 3rpx solid #fff;
-  transform: rotate(42deg);
-}
-
-.signal-group {
-  justify-self: end;
-  display: flex;
-  align-items: center;
-  gap: 10rpx;
-}
-
-.signal-bars {
-  height: 31rpx;
-  display: flex;
-  align-items: flex-end;
-  gap: 5rpx;
-}
-
-.signal-bars view {
-  width: 8rpx;
-  border-radius: 6rpx;
-  background: #fff;
-}
-
-.signal-bars view:nth-child(1) { height: 12rpx; }
-.signal-bars view:nth-child(2) { height: 18rpx; }
-.signal-bars view:nth-child(3) { height: 24rpx; }
-.signal-bars view:nth-child(4) { height: 31rpx; }
-
-.network-text {
-  color: #fff;
-  font-size: 26rpx;
-  font-weight: 800;
-}
-
-.battery-box {
-  min-width: 52rpx;
-  height: 35rpx;
-  border-radius: 8rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #171327;
-  background: rgba(255, 255, 255, 0.78);
-}
-
-.battery-box text {
-  font-size: 24rpx;
-  font-weight: 900;
-}
-
 .header {
-  min-height: 178rpx;
+  min-height: 154rpx;
   display: grid;
   grid-template-columns: 90rpx 1fr 90rpx;
   grid-template-rows: auto auto;
   align-items: center;
-  padding: 20rpx 32rpx 28rpx;
+  padding: 4rpx 32rpx 24rpx;
   box-sizing: border-box;
 }