feat: 重构核心租住流程页面与交互体验

统一注册、看房、申请与入住等核心页面的视觉和流程衔接，补齐支付、签约与状态流转闭环，提升移动端操作连贯性。

pkgService/submit_request/components/DateRangeSelector.vue

@@ -1,22 +1,34 @@
 <template>
-  <view class="date-range-selector">
-    <view class="date-item">
-      <view class="date-label">{{ resolvedStartLabel }}</view>
-      <picker mode="date" @change="onStartChange">
-        <view class="date-input" :class="{ 'is-empty': !start }">
-          {{ start || resolvedStartPlaceholder }}
+  <view class="date-range-selector tn-flex tn-flex-col-center">
+    <picker mode="date" @change="onStartChange" class="date-picker date-picker--start">
+      <view class="date-card" :class="{ 'is-empty': !start, 'is-active': start }">
+        <view class="date-card-header tn-flex tn-flex-row-between tn-flex-col-center">
+          <text class="date-label">{{ resolvedStartLabel }}</text>
+          <view class="date-icon-wrap">
+            <text class="tn-icon-calendar"></text>
+          </view>
         </view>
-      </picker>
+        <view class="date-value">{{ start || resolvedStartPlaceholder }}</view>
+      </view>
+    </picker>
+
+    <view class="range-connector">
+      <view class="connector-line"></view>
+      <text class="connector-text">{{ $tr('至') }}</text>
+      <view class="connector-line"></view>
     </view>
-    <view class="date-divider">{{ $tr('至') }}</view>
-    <view class="date-item">
-      <view class="date-label">{{ resolvedEndLabel }}</view>
-      <picker mode="date" @change="onEndChange">
-        <view class="date-input" :class="{ 'is-empty': !end }">
-          {{ end || resolvedEndPlaceholder }}
+
+    <picker mode="date" @change="onEndChange" class="date-picker date-picker--end">
+      <view class="date-card" :class="{ 'is-empty': !end, 'is-active': end }">
+        <view class="date-card-header tn-flex tn-flex-row-between tn-flex-col-center">
+          <text class="date-label">{{ resolvedEndLabel }}</text>
+          <view class="date-icon-wrap">
+            <text class="tn-icon-calendar"></text>
+          </view>
         </view>
-      </picker>
-    </view>
+        <view class="date-value">{{ end || resolvedEndPlaceholder }}</view>
+      </view>
+    </picker>
   </view>
 </template>
 
@@ -75,44 +87,92 @@ export default {
 </script>
 
 <style scoped lang="scss">
+$text-primary: #1A2233;
+$text-secondary: #6A7A99;
+$text-tertiary: #A1B0C4;
+
 .date-range-selector {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: rgba(255, 255, 255, 0.6);
-  border-radius: 24rpx;
-  padding: 24rpx 32rpx;
-  border: 2rpx solid rgba(226, 232, 240, 0.8);
-  backdrop-filter: blur(8px);
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
+  width: 100%;
 }
 
-.date-item {
+.date-picker {
   flex: 1;
-  text-align: center;
+  min-width: 0;
 }
 
-.date-divider {
-  margin: 0 24rpx;
-  color: #94A3B8;
-  font-size: 24rpx;
-  font-weight: 500;
+.date-card {
+  background: #F4F8FF;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  border: 2rpx solid transparent;
+  transition: all 0.25s ease;
+
+  &.is-active {
+    background: #FFFFFF;
+    border-color: rgba($brand-primary, 0.25);
+    box-shadow: 0 6rpx 20rpx rgba($brand-primary, 0.08);
+
+    .date-value {
+      color: $text-primary;
+      font-weight: 700;
+    }
+  }
+
+  &.is-empty .date-value {
+    color: $text-tertiary;
+    font-weight: normal;
+  }
+}
+
+.date-card-header {
+  margin-bottom: 16rpx;
 }
 
 .date-label {
   font-size: 22rpx;
-  color: #64748B;
-  margin-bottom: 12rpx;
+  color: $text-secondary;
 }
 
-.date-input {
-  font-size: 28rpx;
-  color: #1A2B4C;
-  font-weight: 600;
+.date-icon-wrap {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 12rpx;
+  background: rgba($brand-primary, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  &.is-empty {
-    color: #CBD5E1;
-    font-weight: normal;
+  text {
+    font-size: 22rpx;
+    color: $brand-primary;
   }
 }
+
+.date-value {
+  font-size: 28rpx;
+  color: $text-primary;
+  line-height: 1.4;
+}
+
+.range-connector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 18rpx;
+  flex-shrink: 0;
+}
+
+.connector-line {
+  width: 2rpx;
+  height: 24rpx;
+  background: rgba($brand-primary, 0.25);
+}
+
+.connector-text {
+  font-size: 22rpx;
+  color: $brand-primary;
+  font-weight: 700;
+  margin: 8rpx 0;
+}
 </style>