通知公告/看房预约/合同签约/退租申请页面样式改版

pages/detail/contractDetail.vue

@@ -45,14 +45,9 @@
 
     <!-- 底部操作栏 -->
     <view v-if="contract.status === '待签署'" class="bottom-bar">
-        <u-button
-            type="primary"
-            shape="circle"
-            class="sign-btn"
-            @click="goSign"
-            >
-            去签署
-        </u-button>
+      <u-button class="sign-btn" @click="goSign">
+        去签署
+      </u-button>
     </view>
   </view>
 </template>
@@ -141,8 +136,10 @@ export default {
 .contract-detail-page {
   background: #f7f8fa;
   min-height: 100vh;
-  padding-top: 175rpx; /* 给导航栏留空间 */
-  padding-bottom: 120rpx; /* 预留底部操作栏空间 */
+  /* 给导航栏留空间 */
+  padding-top: 120rpx;
+  /* 预留底部操作栏空间 */
+  padding-bottom: 150rpx;
 }
 
 /* 顶部封面信息 */
@@ -154,9 +151,9 @@ export default {
   margin: 20rpx;
 
   .cover {
-    width: 180rpx;
-    height: 180rpx;
-    border-radius: 12rpx;
+    width: 194rpx;
+    height: 156rpx;
+    border-radius: 10rpx;
     margin-right: 20rpx;
   }
 
@@ -164,12 +161,12 @@ export default {
     flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: center;
 
     .name {
       font-size: 30rpx;
       font-weight: bold;
       color: #333;
+      margin-top: 10rpx;
       margin-bottom: 12rpx;
     }
 
@@ -188,17 +185,17 @@ export default {
   padding: 20rpx 24rpx;
 
   .section-title {
-    font-weight: bold;
-    font-size: 28rpx;
+    font-weight: 500;
+    font-size: 40rpx;
     margin-bottom: 12rpx;
-    color: #333;
+    color: #212121;
   }
 
   .info-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 20rpx 0;
+    padding: 40rpx 0;
     border-bottom: 1rpx solid #f0f0f0;
 
     &:last-child {
@@ -206,8 +203,8 @@ export default {
     }
 
     .label {
-      font-size: 26rpx;
-      color: #666;
+      font-size: 30rpx;
+      color: #86868C;
     }
 
     .value-box {
@@ -215,8 +212,8 @@ export default {
       align-items: center;
 
       .value {
-        font-size: 26rpx;
-        color: #333;
+        font-size: 30rpx;
+        color: #222222;
       }
 
       u-icon {
@@ -241,5 +238,13 @@ export default {
     width: 100%;
     height: 88rpx;
   }
+
+  /* 使用样式穿透让u-btn样式生效 */
+  &::v-deep .u-btn {
+    font-size: 30rpx;
+    color: #fff;
+    background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
+    border-radius: 10rpx;
+  }
 }
 </style>