欢迎卡片样式

pages/homepage/homepage.wxml

@@ -11,6 +11,7 @@
     <view class="card-content">
       <view class="title">欢迎使用智慧水务</view>
       <view class="subtitle">润/泽/千/家/万/户</view>
+      <view class="divider"></view>
       <button class="bind-button" bindtap="bindAccount">户号绑定</button>
     </view>
   </view>

pages/homepage/homepage.wxss

@@ -16,7 +16,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
+  width: 101%;
   height: 100%;
 }
 
@@ -26,31 +26,41 @@
   left: 32rpx;
   bottom: 80rpx;
   width: 280rpx;
-  height: 90rpx;
+  height: 100rpx;
   z-index: 2;
 }
 
 .welcome-card {
   position: absolute;
-  left: 2%; /* 使用百分比替代固定像素 */
-  top: 128px; /* 顶部距离可以保持固定，或根据需要调整 */
-  width: 96%; /* 宽度占父容器的 96%，留出左右 2% 的边距 */
-  height: 188px; /* 高度可以根据需要调整 */
+  left: 4%;
+  /* 使用百分比替代固定像素 */
+  top: 128px;
+  /* 顶部距离可以保持固定，或根据需要调整 */
+  width: 92%;
+  /* 宽度占父容器的 96%，留出左右 2% 的边距 */
+  height: 188px;
+  /* 高度可以根据需要调整 */
   opacity: 1;
-  background-color: #fff; 
-  border-radius: 8px; /* 圆角 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
-  overflow: hidden; 
+  background-color: #fff;
+  border-radius: 8px;
+  /* 圆角 */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
 }
 
 .card-bg {
   position: absolute;
-  width: 105%; /* 宽度超出 .welcome-card 的 5%，实现覆盖效果 */
-  left: -2.5%; /* 向左偏移 2.5%，使背景居中 */
-  height: 100%; /* 高度与 .welcome-card 一致 */
+  width: 105%;
+  /* 宽度超出 .welcome-card 的 5%，实现覆盖效果 */
+  left: -2.5%;
+  /* 向左偏移 2.5%，使背景居中 */
+  height: 100%;
+  /* 高度与 .welcome-card 一致 */
   opacity: 1;
-  background-color: #f0f0f0; /* 背景色 */
-  border-radius: 8px; /* 圆角 */
+  background-color: #f0f0f0;
+  /* 背景色 */
+  border-radius: 8px;
+  /* 圆角 */
 }
 
 .card-content {
@@ -62,8 +72,13 @@
 .title {
   font-size: 36rpx;
   font-weight: 500;
-  color: #333;
   margin-bottom: 12rpx;
+  letter-spacing: 0px;
+  line-height: 24px;
+  color: rgba(46, 48, 56, 1);
+  text-align: left;
+  vertical-align: top;
+  font-family: 'PingFang SC', sans-serif;
 }
 
 .subtitle {
@@ -75,13 +90,17 @@
 
 .bind-button {
   width: 200rpx !important;
-  height: 80rpx;
-  line-height: 80rpx;
+  height: 70rpx;
+  line-height: 70rpx;
   background: #4080FF;
   color: #fff;
+  font-family: 'PingFang SC', sans-serif;
   font-size: 30rpx;
   border-radius: 40rpx;
-  padding: 0;
+  margin-left: 0rpx;
+  /* 向左50rpx */
+  top: 40rpx;
+  /* 向下50rpx */
 }
 
 .bind-button::after {
@@ -98,6 +117,9 @@
   line-height: 1.8;
   margin-bottom: 16rpx;
   color: #999;
+  position: relative;
+  top: 100rpx;
+  /* 向下移动 10rpx */
 }
 
 .tab-bar {
@@ -123,4 +145,13 @@
 
 .tab-item.active {
   color: #4080FF;
+}
+
+.divider {
+  left: 36px;
+  top: 201px;
+  width: 15px;
+  height: 0px;
+  opacity: 1;
+  border: 1px solid rgba(232, 232, 232, 1);
 }