refactor(miniprogram): 重构小程序页面样式和布局

- 更新了多个页面的背景颜色、字体样式等基础样式
- 优化了证书、法律援助、加油服务等页面的布局结构
- 统一了卡片样式，增加了序号显示
- 调整了部分组件的尺寸和样式

miniprogram/app.wxss

@@ -3,10 +3,11 @@
 page {
   width: 100%;
   height: 100%;
+  background: #f4f5f9;
 }
 
 view {
-  box-sizing: border-box
+  box-sizing: border-box;
 }
 
 .df {
@@ -14,7 +15,7 @@ view {
 }
 
 .mt100 {
-  margin-top: 100rpx
+  margin-top: 100rpx;
 }
 
 .mb30 {
@@ -166,15 +167,40 @@ view {
 .ml50 {
   margin-left: 50rpx !important;
 }
+.i-img {
+  width: 45vw;
+  height: 45vw;
+}
+
+.i-text {
+  width: 43vw;
+  height: 45vw;
+  margin-left: 2vw;
+  border: 1rpx solid #eee;
+  box-sizing: border-box;
+  padding: 10rpx;
+  overflow: scroll;
+}
+
+.tel {
+  width: 40rpx;
+  height: 40rpx;
+}
+.index-item {
+  width: 80rpx;
+}
 
+.end-time {
+  width: 200rpx;
+}
 
-.title {
-  font-size: 32rpx;
+.card-title {
+  font-size: 28rpx;
   font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #0094fe;
-  margin: 20rpx 0 20rpx 0;
-  padding-left: 30rpx;
+  color: #555;
+  padding-bottom: 16rpx;
+  border-bottom: 6rpx solid #f9f9f9;
+  margin-bottom: 24rpx;
 }
 
 .th {
@@ -186,4 +212,12 @@ view {
   border-bottom: 1rpx solid #eee;
   padding-top: 15rpx;
   padding-bottom: 15rpx;
-}
+}
+
+.card {
+  padding: 20rpx 28rpx 20rpx 28rpx;
+  box-shadow: 0px 0px 1px 1px #f5f5f5;
+  background: #fff;
+  margin: 28rpx;
+  border-radius: 20rpx;
+}

miniprogram/custom-tab-bar/index.wxss

@@ -15,7 +15,7 @@
   left: 0;
   top: 0;
   width: 100%;
-  height: 1px;
+  height: 2px;
   transform: scaleY(0.5);
 }
 
@@ -29,8 +29,9 @@
 }
 
 .tab-bar-item image {
-  width: 27px;
-  height: 27px;
+  width: 18px;
+  height: 18px;
+  margin-bottom: 16rpx;
 }
 
 .tab-bar-item view {

miniprogram/pages/cert/cert.js

@@ -11,6 +11,10 @@ Page({
       userId: wx.getStorageSync("userId"),
     });
     if (data.status === 0) {
+      data.result.forEach((cert) => {
+        cert.endValidTime = cert.endValidTime.split(" ")[0];
+      });
+
       this.setData({
         certs: data.result,
       });

miniprogram/pages/cert/cert.wxml

@@ -1,37 +1,45 @@
-<!--pages/cert/cert.wxml-->
-<view class="title">我的证书</view>
-<view class="pl30 pr30">
-  <view class="df aic fs28 th">
-    <view class="w20p tac">序号</view>
-    <view class="w40p tac">证书名称</view>
-    <view class="w40p tac">到期时间</view>
-  </view>
-  <view class="df aic jcsb fs28 mt10 tr" wx:for="{{certs}}" wx:key="index">
-    <view class="w20p tac">{{index+1}}</view>
-    <view class="w40p tac">{{item.certTypeName}}</view>
-    <view class="w40p tac">{{item.endValidTime}}</view>
+<!-- pages/cert/cert.wxml -->
+<view class="card">
+  <view class="card-title">我的证书</view>
+  <view class="">
+    <view class="df aic fs28 th mb20">
+      <view class="index-item tac">序号</view>
+      <view class="fg1 tac">证书名称</view>
+      <view class="end-time tac">到期时间</view>
+    </view>
+    <view class="df aic jcsb fs28 tr mb10" style="{{certs.length===(index+1)?'border:none;margin-bottom:0!important;':''}}" wx:for="{{certs}}" wx:key="index">
+      <view class="index-item tac">{{index+1}}</view>
+      <view class="fg1 tac">{{item.certTypeName}}</view>
+      <view class="end-time tac">{{item.endValidTime}}</view>
+    </view>
   </view>
 </view>
-<view class="title mt50">证书办理服务</view>
-<view class="pl30 pr30">
-  <view class="df aic">
-    <image class="i-img" mode="aspectFit" bind:tap="preview" data-url="{{introduce.imageUrl}}" src="{{introduce.imageUrl}}" mode="" />
-    <view class="i-text">{{introduce.textContent||'暂无'}}</view>
+<view class="card">
+  <view class="card-title">证书办理服务</view>
+  <view class="">
+    <view class="df aic">
+      <image class="i-img" mode="aspectFit" bind:tap="preview" data-url="{{introduce.imageUrl}}" src="{{introduce.imageUrl}}" mode="" />
+      <view class="i-text">{{introduce.textContent||'暂无'}}</view>
+    </view>
   </view>
 </view>
-<view class="title mt50">办证联系人</view>
-<view class="pl30 pr30">
-  <view class="df aic jcsb fs28 th">
-    <view class="w40p tac">办事处</view>
-    <view class="w20p tac">姓名</view>
-    <view class="w40p tac">电话</view>
-  </view>
-  <view class="df aic jcsb fs28 mt10 tr" wx:for="{{contacts}}" wx:key="index">
-    <view class="w40p tac">{{item.officeName}}</view>
-    <view class="w20p tac">{{item.contactPerson}}</view>
-    <view class="w40p tac df aic jcc" bind:tap="makePhoneCall" data-phone="{{item.contactPhone}}">
-      <image class="tel ml10" data-phone="{{item.contactPhone}}" src="../../images/tel.png" mode="aspectFit" />
+<view class="card">
+  <view class="card-title">办证联系人</view>
+  <view class="">
+    <view class="df aic jcsb fs28 th">
+      <view class="index-item tac">序号</view>
+      <view class="w50p tac">办事处</view>
+      <view class="w30p tac">姓名</view>
+      <view class="w20p tac">电话</view>
+    </view>
+    <view class="df aic jcsb fs28 mt10 tr" style="{{contacts.length===(index+1)?'border:none;margin-bottom:0!important;':''}}" wx:for="{{contacts}}" wx:key="index">
+      <view class="index-item tac">{{index+1}}</view>
+      <view class="w50p tac">{{item.officeName}}</view>
+      <view class="w30p tac">{{item.contactPerson}}</view>
+      <view class="w20p tac df aic jcc" bind:tap="makePhoneCall" data-phone="{{item.contactPhone}}">
+        <image class="tel ml10" data-phone="{{item.contactPhone}}" src="../../images/tel.png" mode="aspectFit" />
+      </view>
     </view>
   </view>
 </view>
-<view class="primary w500 m0a mt100">一键分享</view>
+<view class="primary w500 m0a mt50">一键分享</view>

miniprogram/pages/cert/cert.wxss

@@ -1,21 +1 @@
 /* pages/cert/cert.wxss */
-
-.i-img {
-  width: 45vw;
-  height: 45vw;
-}
-
-.i-text {
-  width: 43vw;
-  height: 45vw;
-  margin-left: 2vw;
-  border: 1rpx solid #eee;
-  box-sizing: border-box;
-  padding: 10rpx;
-  overflow: scroll;
-}
-
-.tel {
-  width: 60rpx;
-  height: 60rpx;
-}

miniprogram/pages/index/index.wxss

@@ -1,4 +1,8 @@
 /* pages/index/index.wxss */
+page {
+  background: #fff;
+}
+
 .main {
   display: block;
   width: 80vw;

miniprogram/pages/legal/legal.wxml

@@ -1,13 +1,17 @@
-<!--pages/legal/legal.wxml-->
-<view class="title mt30">援助机构介绍</view>
-<view class="pl30 pr30">
-  {{legalAidIntroduce.textContent||'暂无'}}
+<!-- pages/legal/legal.wxml -->
+<view class="card">
+  <view class="card-title">援助机构介绍</view>
+  <view class="mb10 fs28">{{legalAidIntroduce.textContent||'暂无'}}</view>
 </view>
-<view class="title mt50">律师（团队）介绍</view>
-<view class="pl30 pr30">
-  <view class="df aic">
-    <image class="i-img" mode="aspectFit" bind:tap="preview" data-url="{{lawyerIntroduce.imageUrl}}" src="{{lawyerIntroduce.imageUrl}}" mode="" />
-    <view class="i-text">{{lawyerIntroduce.textContent||'暂无'}}</view>
+<view class="card">
+  <view class="card-title">律师（团队）介绍</view>
+  <view class="">
+    <view class="df aic">
+      <image class="i-img" mode="aspectFit" bind:tap="preview" data-url="{{lawyerIntroduce.imageUrl}}" src="{{lawyerIntroduce.imageUrl}}" mode="" />
+      <view class="i-text fs28">{{lawyerIntroduce.textContent||'暂无'}}</view>
+    </view>
   </view>
 </view>
-<view class="primary w500 m0a mt100" bind:tap="goTo" data-path="/pages/legal/submitLegal/submitLegal">申请法律援助</view>
+<view class="primary w500 m0a mt100" bind:tap="goTo" data-path="/pages/legal/submitLegal/submitLegal">
+  申请法律援助
+</view>

miniprogram/pages/legal/legal.wxss

@@ -1,15 +1 @@
 /* pages/legal/legal.wxss */
-.i-img {
-  width: 45vw;
-  height: 45vw;
-}
-
-.i-text {
-  width: 43vw;
-  height: 45vw;
-  margin-left: 2vw;
-  border: 1rpx solid #eee;
-  box-sizing: border-box;
-  padding: 10rpx;
-  overflow: scroll;
-}

miniprogram/pages/oilPrice/oilPrice.wxml

@@ -1,13 +1,16 @@
 <map style="width: 100vw;height: 60vw;" markers="{{oilPriceList}}" longitude="121" latitude="31" />
-
-<view class="title">加油服务</view>
-<view class="pl30 pr30">
-  <view class="df aic fs28 th">
-    <view class="w50p tac">加油服务商</view>
-    <view class="w50p tac">油价(元/吨)</view>
-  </view>
-  <view class="df aic jcsb fs28 mt10 tr" wx:for="{{oilPriceList}}" wx:key="index">
-    <view class="w50p tac">{{item.vendorName}}</view>
-    <view class="w50p tac">{{item.price}}</view>
+<view class="card">
+  <view class="card-title">加油服务</view>
+  <view class="">
+    <view class="df aic fs28 th">
+      <view class="index-item tac">序号</view>
+      <view class="w60p tac">加油服务商</view>
+      <view class="w40p tac">油价(元/吨)</view>
+    </view>
+    <view class="df aic jcsb fs28 mt10 tr" style="{{oilPriceList.length===(index+1)?'border:none;margin-bottom:0!important;':''}}" wx:for="{{oilPriceList}}" wx:key="index">
+      <view class="index-item tac">{{index+1}}</view>
+      <view class="w60p tac">{{item.vendorName}}</view>
+      <view class="w40p tac">{{item.price}}</view>
+    </view>
   </view>
 </view>

miniprogram/pages/takePhoto/takePhoto.js

@@ -27,6 +27,10 @@ Page({
       userId: wx.getStorageSync("userId"),
     });
     if (data.status === 0) {
+      data.result.forEach((cert) => {
+        cert.endValidTime = cert.endValidTime.split(" ")[0];
+      });
+
       this.setData({
         certs: data.result,
       });

miniprogram/pages/takePhoto/takePhoto.wxml

@@ -4,7 +4,11 @@
 </view>
 <view class="top-container exp" wx:else="">
   <image class="avatar-icon" src="{{avater_exp}}"></image>
-  <view class="text" style="text-align: center;">{{userName?"":"体验用户"}}<text wx:if="{{userName}}" class="user-name">{{userName}}</text><text wx:if="{{phone}}" class="phone">{{phone}}</text></view>
+  <view class="text" style="text-align: center;">
+    {{userName?"":"体验用户"}}
+    <text wx:if="{{userName}}" class="user-name">{{userName}}</text>
+    <text wx:if="{{phone}}" class="phone">{{phone}}</text>
+  </view>
 </view>
 <view wx:if="{{userId&&shipId}}">
   <view class="new-camera camera-cargo">
@@ -13,22 +17,22 @@
   </view>
   <view class="new-camera camera-bill">
     <image class="icon" data-mediatype="{{0}}" bindtap="takeBill" src="{{newCameraIcon}}"></image>
-    <view data-mediatype="{{0}}" bindtap="takeBill"> 拍单据
-    </view>
+    <view data-mediatype="{{0}}" bindtap="takeBill">拍单据</view>
   </view>
 </view>
 <view wx:else>
   <image wx:if="{{!userId&&!shipId||!userId}}" class="camera-icon" bindtap="takePhoto" data-mediatype="{{3}}" src="{{cameraIcon}}"></image>
   <view wx:else style="margin-top: 20%;">
     <view class="line mb30">
-      <view class="ship-name">船舶名称 : </view><input class="ship-name-ipt" model:value="{{shipName}}" type="text" placeholder="请输入船舶名称" />
+      <view class="ship-name">船舶名称 :</view>
+      <input class="ship-name-ipt" model:value="{{shipName}}" type="text" placeholder="请输入船舶名称" />
     </view>
     <view class="line">
-      <view class="ship-mmsi">MMSI : </view><input class="ship-mmsi-ipt" model:value="{{shipMmsi}}" type="number" placeholder="请输入MMSI" />
+      <view class="ship-mmsi">MMSI :</view>
+      <input class="ship-mmsi-ipt" model:value="{{shipMmsi}}" type="number" placeholder="请输入MMSI" />
     </view>
     <view bindtap="registerShip" class="submit">绑定船舶</view>
   </view>
-
 </view>
 <view class="auth-modal" wx:if="{{authModal}}">
   <view class="modal">
@@ -36,43 +40,53 @@
     <view class="auth-btn" bindtap="openSetting">请授权{{modalText}}</view>
   </view>
 </view>
-
-<view class="title">我的证书</view>
-<view class="pl30 pr30">
-  <view class="df aic fs28 th">
-    <view class="w20p tac">序号</view>
-    <view class="w40p tac">证书名称</view>
-    <view class="w40p tac">到期时间</view>
-  </view>
-  <view class="df aic jcsb fs28 mt10 tr" wx:for="{{certs}}" wx:key="index">
-    <view class="w20p tac">{{index+1}}</view>
-    <view class="w40p tac">{{item.certTypeName}}</view>
-    <view class="w40p tac">{{item.endValidTime}}</view>
+<view class="card">
+  <view class="card-title">我的证书</view>
+  <view class="">
+    <view class="df aic fs28 th mb20">
+      <view class="index-item tac">序号</view>
+      <view class="fg1 tac">证书名称</view>
+      <view class="end-time tac">到期时间</view>
+    </view>
+    <view class="df aic jcsb fs28 tr mb10" style="{{certs.length===(index+1)?'border:none;margin-bottom:0!important;':''}}" wx:for="{{certs}}" wx:key="index">
+      <view class="index-item tac">{{index+1}}</view>
+      <view class="fg1 tac">{{item.certTypeName}}</view>
+      <view class="end-time tac">{{item.endValidTime}}</view>
+    </view>
   </view>
 </view>
-<view class="title">办证联系人</view>
-<view class="pl30 pr30">
-  <view class="df aic jcsb fs28 th">
-    <view class="w40p tac">办事处</view>
-    <view class="w20p tac">姓名</view>
-    <view class="w40p tac">电话</view>
-  </view>
-  <view class="df aic jcsb fs28 mt10 tr" wx:for="{{contacts}}" wx:key="index">
-    <view class="w40p tac">{{item.officeName}}</view>
-    <view class="w20p tac">{{item.contactPerson}}</view>
-    <view class="w40p tac df aic jcc" bind:tap="makePhoneCall" data-phone="{{item.contactPhone}}">
-      <image class="tel ml10" data-phone="{{item.contactPhone}}" src="../../images/tel.png" mode="aspectFit" />
+<view class="card">
+  <view class="card-title">办证联系人</view>
+  <view class="">
+    <view class="df aic jcsb fs28 th">
+      <view class="index-item tac">序号</view>
+      <view class="w50p tac">办事处</view>
+      <view class="w30p tac">姓名</view>
+      <view class="w20p tac">电话</view>
+    </view>
+    <view class="df aic jcsb fs28 mt10 tr" style="{{contacts.length===(index+1)?'border:none;margin-bottom:0!important;':''}}" wx:for="{{contacts}}" wx:key="index">
+      <view class="index-item tac">{{index+1}}</view>
+      <view class="w50p tac">{{item.officeName}}</view>
+      <view class="w30p tac">{{item.contactPerson}}</view>
+      <view class="w20p tac df aic jcc" bind:tap="makePhoneCall" data-phone="{{item.contactPhone}}">
+        <image class="tel ml10" data-phone="{{item.contactPhone}}" src="../../images/tel.png" mode="aspectFit" />
+      </view>
     </view>
   </view>
 </view>
-<view class="title">油价走势</view>
-<view class="pl30 pr30" style="padding-bottom: 200rpx;">
-  <view class="df aic fs28 th">
-    <view class="w50p tac">加油服务商</view>
-    <view class="w50p tac">油价(元/吨)</view>
-  </view>
-  <view class="df aic jcsb fs28 mt10 tr" wx:for="{{oilPriceList}}" wx:key="index">
-    <view class="w50p tac">{{item.vendorName}}</view>
-    <view class="w50p tac">{{item.price}}</view>
+<view class="card ">
+  <view class="card-title">油价走势</view>
+  <view class="">
+    <view class="df aic fs28 th">
+      <view class="index-item tac">序号</view>
+      <view class="w60p tac">加油服务商</view>
+      <view class="w40p tac">油价(元/吨)</view>
+    </view>
+    <view class="df aic jcsb fs28 mt10 tr" style="{{oilPriceList.length===(index+1)?'border:none;margin-bottom:0!important;':''}}" wx:for="{{oilPriceList}}" wx:key="index">
+      <view class="index-item tac">{{index+1}}</view>
+      <view class="w60p tac">{{item.vendorName}}</view>
+      <view class="w40p tac">{{item.price}}</view>
+    </view>
   </view>
-</view>
+</view>
+<view class="h200"></view>

miniprogram/pages/takePhoto/takePhoto.wxss

@@ -171,22 +171,3 @@
   line-height: 80rpx;
   border-radius: 40rpx;
 }
-
-.i-img {
-  width: 45vw;
-  height: 45vw;
-}
-
-.i-text {
-  width: 43vw;
-  height: 45vw;
-  margin-left: 2vw;
-  border: 1rpx solid #eee;
-  box-sizing: border-box;
-  padding: 10rpx;
-}
-
-.tel {
-  width: 60rpx;
-  height: 60rpx;
-}