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

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

pkgExplore/store_detail/components/RoomList.vue

@@ -1,7 +1,10 @@
 <template>
   <view class="section-panel room-section">
     <view class="section-header tn-flex tn-flex-row-between tn-flex-col-center">
-      <text class="section-title">{{ $tr('在租房型（{count}）', { count: roomTypes.length }) }}</text>
+      <view class="title-wrap tn-flex tn-flex-col-center">
+        <view class="title-bar"></view>
+        <text class="section-title">{{ $tr('在租房型（{count}）', { count: roomTypes.length }) }}</text>
+      </view>
     </view>
     <view class="room-list-vertical">
       <view
@@ -99,25 +102,43 @@ export default {
 </script>
 
 <style scoped lang="scss">
+$navy-deep: #1E3A5F;
+$navy-light: #2E4A73;
+$gold: #C9A96E;
+$gold-light: #D4BC8C;
+$text-primary: #0F172A;
+$text-secondary: #64748B;
+$text-tertiary: #94A3B8;
+
 .section-panel {
-  background: rgba(255, 255, 255, 0.08);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1rpx solid rgba(255, 255, 255, 0.15);
-  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
+  background: #FFFFFF;
+  border: 1rpx solid rgba($navy-deep, 0.08);
+  box-shadow: 0 8rpx 28rpx rgba(30, 58, 95, 0.06);
   margin: 24rpx 32rpx 0;
   padding: 32rpx;
-  border-radius: 24rpx;
+  border-radius: 28rpx;
 }
 
 .section-header {
-  margin-bottom: 24rpx;
+  margin-bottom: 28rpx;
+}
+
+.title-wrap {
+  flex: 1;
+}
+
+.title-bar {
+  width: 6rpx;
+  height: 32rpx;
+  background: linear-gradient(180deg, $gold 0%, $gold-light 100%);
+  border-radius: 999rpx;
+  margin-right: 16rpx;
 }
 
 .section-title {
   font-size: 32rpx;
-  font-weight: bold;
-  color: #fff;
+  font-weight: 800;
+  color: $navy-deep;
 }
 
 .room-list-vertical {
@@ -129,11 +150,17 @@ export default {
 .room-card-v {
   width: 100%;
   display: flex;
-  border-radius: 16rpx;
+  border-radius: 24rpx;
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1rpx solid rgba(255, 255, 255, 0.1);
-  box-shadow: none;
+  background: #FFFFFF;
+  border: 1rpx solid rgba($navy-deep, 0.08);
+  box-shadow: 0 8rpx 24rpx rgba(30, 58, 95, 0.05);
+  transition: all 0.2s;
+}
+
+.room-card-v:active {
+  transform: translateY(-4rpx);
+  box-shadow: 0 16rpx 40rpx rgba(30, 58, 95, 0.1);
 }
 
 .room-img-v {
@@ -146,38 +173,38 @@ export default {
 .img {
   width: 100%;
   height: 100%;
-  background: rgba(255, 255, 255, 0.1);
+  background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 100%);
 }
 
 .pay-method-tag {
   position: absolute;
   top: 12rpx;
   left: 12rpx;
-  background: rgba(0, 0, 0, 0.6);
+  background: rgba($navy-deep, 0.85);
   backdrop-filter: blur(8rpx);
-  color: #fff;
+  color: $gold-light;
   font-size: 18rpx;
-  padding: 4rpx 10rpx;
-  border-radius: 6rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 8rpx;
   font-weight: 500;
 }
 
 .room-info-v {
   flex: 1;
-  padding: 16rpx 20rpx;
+  padding: 20rpx 24rpx;
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
 
 .room-header-v {
-  margin-bottom: 8rpx;
+  margin-bottom: 10rpx;
 }
 
 .room-name-v {
   font-size: 30rpx;
-  font-weight: bold;
-  color: #fff;
+  font-weight: 800;
+  color: $navy-deep;
   flex: 1;
 }
 
@@ -188,16 +215,18 @@ export default {
 
 .tag-v {
   font-size: 20rpx;
-  color: rgba(255, 255, 255, 0.85);
-  background: rgba(255, 255, 255, 0.15);
+  color: $navy-deep;
+  background: rgba($navy-deep, 0.06);
   padding: 4rpx 12rpx;
-  border-radius: 6rpx;
+  border-radius: 8rpx;
+  font-weight: 500;
 }
 
 .room-desc-v {
   font-size: 22rpx;
-  color: rgba(255, 255, 255, 0.6);
-  margin-bottom: auto; /* 将底部价格推下去 */
+  color: $text-tertiary;
+  margin-bottom: auto;
+  line-height: 1.5;
 }
 
 .room-bottom-v {
@@ -205,41 +234,45 @@ export default {
 }
 
 .room-price-v {
-  color: #ffb8b8;
+  color: $navy-deep;
   display: flex;
   align-items: baseline;
 }
 
 .price-symbol {
   font-size: 20rpx;
-  font-weight: bold;
+  font-weight: 800;
   margin-right: 2rpx;
+  color: $gold;
 }
 
 .price-val {
   font-size: 36rpx;
   font-weight: 800;
   line-height: 1;
+  color: $navy-deep;
 }
 
 .price-unit {
   font-size: 20rpx;
-  color: rgba(255, 255, 255, 0.6);
+  color: $text-tertiary;
   margin-left: 4rpx;
   font-weight: 500;
 }
 
 .go-btn-v {
-  background: rgba(255, 255, 255, 0.15);
-  color: #fff;
+  background: linear-gradient(135deg, $navy-light 0%, $navy-deep 100%);
+  color: #FFFFFF;
   font-size: 22rpx;
-  padding: 8rpx 20rpx;
+  padding: 10rpx 22rpx;
   border-radius: 30rpx;
-  border: 1rpx solid rgba(255, 255, 255, 0.2);
+  font-weight: 600;
+  box-shadow: 0 6rpx 16rpx rgba($navy-deep, 0.2);
 }
 
 .go-btn-v .tn-icon-right {
   font-size: 20rpx;
   margin-left: 4rpx;
+  color: $gold-light;
 }
 </style>