Procházet zdrojové kódy

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

- 更新了 cert、maritime、school、securityCheck、shipyard 和 takePhoto 页面的布局结构
- 优化了页面样式,包括标题、卡片、列表等元素的样式
- 添加了学校、船厂等页面的数据内容
- 调整了部分功能,如拨打电话、分享通知等
wzg před 9 měsíci
rodič
revize
2b7a150b3d

+ 1 - 1
miniprogram/pages/cert/cert.wxml

@@ -1,6 +1,6 @@
 <view class="container">
   <!-- 顶部标题 -->
-  <view class="header">内河干散货运输船东服务</view>
+
   <!-- 内容区域 -->
   <view class="content">
     <!-- 船舶基础信息 -->

+ 38 - 37
miniprogram/pages/maritime/maritime.wxml

@@ -1,43 +1,44 @@
 <view class="container">
-    <!-- 顶部标题 -->
-    <view class="header">内河干散货运输船东服务</view>
-    <!-- 内容区域 -->
-    <view class="content">
-        <!-- 海事公告列表 -->
-        <view class="card">
-            <view class="card-header">海事公告</view>
-            <view class="card-content">
-                <view class="notice-list">
-                    <view class="notice-item" wx:for="{{notices}}" wx:key="index">
-                        <view class="notice-title">{{item.title}}</view>
-                        <view class="notice-info">
-                            <text class="notice-date">{{item.date}}</text>
-                            <text class="notice-unit">{{item.unit}}</text>
-                        </view>
-                    </view>
-                </view>
+  <!-- 顶部标题 -->
+
+  <!-- 内容区域 -->
+  <view class="content">
+    <!-- 海事公告列表 -->
+    <view class="card">
+      <view class="card-header">海事公告</view>
+      <view class="card-content">
+        <view class="notice-list">
+          <view class="notice-item" wx:for="{{notices}}" wx:key="index">
+            <view class="notice-title">{{item.title}}</view>
+            <view class="notice-info">
+              <text class="notice-date">{{item.date}}</text>
+              <text class="notice-unit">{{item.unit}}</text>
             </view>
+          </view>
         </view>
-        <!-- 法律援助机构介绍 -->
-        <view class="card">
-            <view class="card-header">法律援助机构</view>
-            <view class="card-content">
-                <view class="org-info">
-                    <view class="org-name">{{legalOrg.name}}</view>
-                    <image class="org-photo" mode="aspectFit" src="{{legalOrg.photoUrl}}"></image>
-                    <view class="org-intro">{{legalOrg.introduction}}</view>
-                </view>
-            </view>
+      </view>
+    </view>
+    <!-- 法律援助机构介绍 -->
+    <view class="card">
+      <view class="card-header">法律援助机构</view>
+      <view class="card-content">
+        <view class="org-info">
+          <view class="org-name">{{legalOrg.name}}</view>
+          <image class="org-photo" mode="aspectFit" src="{{legalOrg.photoUrl}}"></image>
+          <view class="org-intro">{{legalOrg.introduction}}</view>
         </view>
-        <!-- 法律援助申请 -->
-        <view class="card">
-            <view class="card-header">申请法律援助</view>
-            <view class="card-content">
-                <view class="legal-aid-form">
-                    <textarea class="aid-input" placeholder="请描述您的法律援助需求..." bindinput="handleInputChange" value="{{aidRequest}}"></textarea>
-                    <button class="submit-btn" bindtap="submitAidRequest">提交申请</button>
-                </view>
-            </view>
+      </view>
+    </view>
+    <!-- 法律援助申请 -->
+    <view class="card">
+      <view class="card-header">申请法律援助</view>
+      <view class="card-content">
+        <view class="legal-aid-form">
+          <textarea class="aid-input" placeholder="请描述您的法律援助需求..." bindinput="handleInputChange" value="{{aidRequest}}"></textarea>
+          <view class="submit-btn" bindtap="submitAidRequest">提交申请</view>
         </view>
+      </view>
     </view>
-</view>
+  </view>
+</view>
+<view class="h200"></view>

+ 18 - 1
miniprogram/pages/school/school.js

@@ -3,7 +3,24 @@ Page({
   /**
    * 页面的初始数据
    */
-  data: {},
+  data: {
+    school: {
+      name: "新蔡海员培训学校",
+      photoUrl: "https://example.com/school.jpg",
+      introduction:
+        "新蔡海员培训学校成立于2000年,是一所专业从事海员培训的现代化职业培训机构。学校配备先进的船舶模拟器、专业的实训设备和经验丰富的教师团队。我们开设了船员适任证培训、特殊培训、船员继续教育等多个培训项目,致力于为航运业培养高素质的专业人才。多年来,我们已培养了数千名优秀船员,在业内享有良好声誉。学校坚持'安全第一、质量至上'的教学理念,不断提升教学质量和服务水平,为学员提供优质的学习环境和完善的就业服务。",
+      area: "2000平方米",
+      graduatesCount: "500人",
+    },
+    notice: {
+      title: "海员培训课程将在2025年3月10-15日期间在新蔡学员举办",
+      author: "汇很多",
+      date: "2024-02-01",
+      photoUrl: "https://example.com/training.jpg",
+      content:
+        "为提高海员专业素质,满足航运业发展需求,我校定于2025年3月10日至15日开展新一期海员培训课程。本次培训主要面向有志于从事航海事业的学员,课程内容包括船舶操作技能、航海英语、海事法规、安全管理等方面。培训采用理论与实践相结合的方式,配备经验丰富的教师团队,使用先进的模拟设备,确保学员能够掌握必要的专业知识和实操技能。完成培训并通过考核的学员,将获得相应的培训证书。此次培训名额有限,请有意向的学员提前报名。学校将为学员提供良好的学习环境和完善的后勤保障服务。",
+    },
+  },
 
   /**
    * 生命周期函数--监听页面加载

+ 54 - 2
miniprogram/pages/school/school.wxml

@@ -1,2 +1,54 @@
-<!--pages/school/school.wxml-->
-<text>pages/school/school.wxml</text>
+<view class="container">
+  <!-- 顶部标题 -->
+  <!-- <view class="header">学校服务</view> -->
+  <!-- 内容区域 -->
+  <view class="content">
+    <!-- 学校基本信息 -->
+    <view class="card">
+      <view class="card-header">{{school.name}}</view>
+      <view class="card-content">
+        <view class="school-info">
+          <image class="school-photo" mode="aspectFill" src="{{school.photoUrl}}"></image>
+          <view class="info-item">
+            <text class="intro-text">{{school.introduction}}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 运营数据 -->
+    <view class="card">
+      <view class="card-header">运营数据</view>
+      <view class="card-content">
+        <view class="operation-data">
+          <view class="data-item">
+            <text class="data-value">{{school.area}}</text>
+            <text class="data-label">场地规模</text>
+          </view>
+          <view class="data-item">
+            <text class="data-value">{{school.graduatesCount}}</text>
+            <text class="data-label">年结业人数</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 培训公告 -->
+    <view class="card">
+      <view class="card-header">培训公告</view>
+      <view class="card-content">
+        <view class="notice-info">
+          <view class="notice-title">{{notice.title}}</view>
+          <view class="notice-meta">
+            <text class="notice-author">{{notice.author}}</text>
+            <text class="notice-date">{{notice.date}}</text>
+          </view>
+          <image class="notice-photo" mode="aspectFill" src="{{notice.photoUrl}}"></image>
+          <view class="notice-content">
+            <text>{{notice.content}}</text>
+          </view>
+          <button class="share-btn" open-type="share">分享公告</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>
+<view class="h200"></view>

+ 139 - 1
miniprogram/pages/school/school.wxss

@@ -1 +1,139 @@
-/* pages/school/school.wxss */
+.container {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+}
+
+.header {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  padding: 20rpx 0;
+  text-align: center;
+}
+
+.content {
+  margin-top: 20rpx;
+}
+
+.card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.card-header {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  padding: 20rpx;
+  border-bottom: 2rpx solid #f0f0f0;
+}
+
+.card-content {
+  padding: 20rpx;
+}
+
+/* 学校信息样式 */
+.school-info {
+  margin-top: 10rpx;
+}
+
+.school-photo {
+  width: 100%;
+  height: 400rpx;
+  border-radius: 8rpx;
+  margin-bottom: 20rpx;
+}
+
+.info-item {
+  margin-bottom: 16rpx;
+}
+
+.intro-text {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+/* 运营数据样式 */
+.operation-data {
+  display: flex;
+  justify-content: space-around;
+  padding: 20rpx 0;
+}
+
+.data-item {
+  text-align: center;
+}
+
+.data-value {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.data-label {
+  font-size: 24rpx;
+  color: #999;
+}
+
+/* 公告样式 */
+.notice-info {
+  margin-top: 10rpx;
+}
+
+.notice-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+
+.notice-meta {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+
+.notice-author {
+  font-size: 24rpx;
+  color: #666;
+  margin-right: 20rpx;
+}
+
+.notice-date {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.notice-photo {
+  width: 100%;
+  height: 300rpx;
+  border-radius: 8rpx;
+  margin-bottom: 16rpx;
+}
+
+.notice-content {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 20rpx;
+}
+
+.share-btn {
+  background-color: #07c160;
+  color: #fff;
+  font-size: 28rpx;
+  padding: 16rpx 32rpx;
+  border-radius: 8rpx;
+  border: none;
+  margin-top: 20rpx;
+}
+
+.share-btn::after {
+  border: none;
+}

+ 7 - 1
miniprogram/pages/securityCheck/securityCheck.js

@@ -32,7 +32,13 @@ Page({
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow: function () {},
+  onShow: function () {
+    if (typeof this.getTabBar === "function" && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 3,
+      });
+    }
+  },
 
   /**
    * 生命周期函数--监听页面隐藏

+ 20 - 19
miniprogram/pages/securityCheck/securityCheck.wxml

@@ -1,21 +1,22 @@
 <view class="container">
-    <!-- 顶部标题 -->
-    <view class="header">海事年检通知</view>
-    <!-- 内容区域 -->
-    <view class="content">
-        <view class="card">
-            <view class="notice-title">{{notice.title}}</view>
-            <view class="notice-info">
-                <text class="notice-author">{{notice.author}}</text>
-                <text class="notice-date">{{notice.date}}</text>
-            </view>
-            <image class="dock-photo" mode="aspectFill" src="{{notice.photoUrl}}"></image>
-            <view class="notice-content">{{notice.content}}</view>
-            <view class="contact-section">
-                <text class="contact-info">{{notice.contactInfo}}</text>
-                <button class="contact-btn" bindtap="makePhoneCall">拨打电话</button>
-            </view>
-            <button class="share-btn" open-type="share">分享通知</button>
-        </view>
+  <!-- 顶部标题 -->
+  <!-- <view class="header">海事年检通知</view> -->
+  <!-- 内容区域 -->
+  <view class="content">
+    <view class="card">
+      <view class="notice-title">{{notice.title}}</view>
+      <view class="notice-info">
+        <text class="notice-author">{{notice.author}}</text>
+        <text class="notice-date">{{notice.date}}</text>
+      </view>
+      <image class="dock-photo" mode="aspectFill" src="{{notice.photoUrl}}"></image>
+      <view class="notice-content">{{notice.content}}</view>
+      <view class="contact-section">
+        <text class="contact-info">{{notice.contactInfo}}</text>
+        <button class="contact-btn" bindtap="makePhoneCall">拨打电话</button>
+      </view>
+      <button class="share-btn" open-type="share">分享通知</button>
     </view>
-</view>
+  </view>
+</view>
+<view class="h200"></view>

+ 30 - 2
miniprogram/pages/shipyard/shipyard.js

@@ -3,7 +3,18 @@ Page({
   /**
    * 页面的初始数据
    */
-  data: {},
+  data: {
+    shipyard: {
+      name: "江阴新时代船厂",
+      address: "江苏省江阴市长江路88号",
+      photoUrl: "https://example.com/shipyard.jpg",
+      introduction:
+        "江阴新时代船厂成立于1995年,是一家专业从事船舶建造、维修和拆解的现代化船厂。我们拥有先进的船坞设施和专业的技术团队,致力于为客户提供高质量的船舶服务。多年来,我们已成功建造和维修数百艘各类船舶,在业内享有良好声誉。",
+      dockCount: "5",
+      annualCapacity: "50艘",
+      contactPhone: "13912345678",
+    },
+  },
 
   /**
    * 生命周期函数--监听页面加载
@@ -49,5 +60,22 @@ Page({
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage() {},
+  onShareAppMessage() {
+    return {
+      title: this.data.shipyard.name,
+      path: "/pages/shipyard/shipyard",
+    };
+  },
+
+  makePhoneCall() {
+    wx.makePhoneCall({
+      phoneNumber: this.data.shipyard.contactPhone,
+      fail(err) {
+        wx.showToast({
+          title: "拨打电话失败",
+          icon: "none",
+        });
+      },
+    });
+  },
 });

+ 50 - 2
miniprogram/pages/shipyard/shipyard.wxml

@@ -1,2 +1,50 @@
-<!--pages/shipyard/shipyard.wxml-->
-<text>pages/shipyard/shipyard.wxml</text>
+<view class="container">
+  <!-- 顶部标题 -->
+  <!-- <view class="header">船厂服务</view> -->
+  <!-- 内容区域 -->
+  <view class="content">
+    <!-- 船厂基本信息 -->
+    <view class="card">
+      <view class="card-header">{{shipyard.name}}</view>
+      <view class="card-content">
+        <view class="shipyard-info">
+          <image class="shipyard-photo" mode="aspectFill" src="{{shipyard.photoUrl}}"></image>
+          <view class="info-item">
+            <text class="label">地址:</text>
+            <text class="value">{{shipyard.address}}</text>
+          </view>
+          <view class="info-item">
+            <text class="intro-text">{{shipyard.introduction}}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 运营数据 -->
+    <view class="card">
+      <view class="card-header">运营数据</view>
+      <view class="card-content">
+        <view class="operation-data">
+          <view class="data-item">
+            <text class="data-value">{{shipyard.dockCount}}</text>
+            <text class="data-label">船坞数量</text>
+          </view>
+          <view class="data-item">
+            <text class="data-value">{{shipyard.annualCapacity}}</text>
+            <text class="data-label">年产能</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 联系方式 -->
+    <view class="card">
+      <view class="card-header">联系方式</view>
+      <view class="card-content">
+        <view class="contact-info">
+          <text class="contact-text">拆船、造船、补贴申请请联系朱经理</text>
+          <button class="contact-btn" bindtap="makePhoneCall">拨打电话</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>
+<view class="h200"></view>

+ 119 - 1
miniprogram/pages/shipyard/shipyard.wxss

@@ -1 +1,119 @@
-/* pages/shipyard/shipyard.wxss */
+.container {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+}
+
+.header {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  padding: 20rpx 0;
+  text-align: center;
+}
+
+.content {
+  margin-top: 20rpx;
+}
+
+.card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.card-header {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  padding: 20rpx;
+  border-bottom: 2rpx solid #f0f0f0;
+}
+
+.card-content {
+  padding: 20rpx;
+}
+
+/* 船厂信息样式 */
+.shipyard-info {
+  margin-top: 10rpx;
+}
+
+.shipyard-photo {
+  width: 100%;
+  height: 400rpx;
+  border-radius: 8rpx;
+  margin-bottom: 20rpx;
+}
+
+.info-item {
+  margin-bottom: 16rpx;
+}
+
+.label {
+  color: #666;
+  font-size: 28rpx;
+  margin-right: 10rpx;
+}
+
+.value {
+  color: #333;
+  font-size: 28rpx;
+}
+
+.intro-text {
+  color: #333;
+  font-size: 28rpx;
+  line-height: 1.6;
+}
+
+/* 运营数据样式 */
+.operation-data {
+  display: flex;
+  justify-content: space-around;
+  padding: 20rpx 0;
+}
+
+.data-item {
+  text-align: center;
+}
+
+.data-value {
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #333;
+  display: block;
+  margin-bottom: 10rpx;
+}
+
+.data-label {
+  font-size: 24rpx;
+  color: #666;
+}
+
+/* 联系方式样式 */
+.contact-info {
+  text-align: center;
+}
+
+.contact-text {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 20rpx;
+  display: block;
+}
+
+.contact-btn {
+  background-color: #1aad19;
+  color: #fff;
+  font-size: 30rpx;
+  padding: 16rpx 32rpx;
+  border-radius: 8rpx;
+  border: none;
+  margin-top: 20rpx;
+}
+
+.contact-btn:active {
+  opacity: 0.8;
+}

+ 234 - 234
miniprogram/pages/takePhoto/takePhoto.wxml

@@ -1,247 +1,247 @@
 <!-- pages/takePhoto/takePhoto.wxml -->
 <view class="container">
-    <!-- 顶部标题 -->
-    <view class="header">内河干散货运输船东服务</view>
-    <!-- 内容区域 -->
-    <view class="content">
-        <!-- 签到、拍货物、拍单据按钮 -->
-        <view class="btn-group">
-            <view class="btn btn-green" bindtap="onSignIn">签到</view>
-            <view class="btn btn-blue" bindtap="onTakeCargoPhoto">拍货物</view>
-            <view class="btn btn-red" bindtap="onTakeDocPhoto">拍单据</view>
+  <!-- 顶部标题 -->
+
+  <!-- 内容区域 -->
+  <view class="content">
+    <!-- 签到、拍货物、拍单据按钮 -->
+    <view class="btn-group">
+      <view class="btn btn-green" bindtap="onSignIn">签到</view>
+      <view class="btn btn-blue" bindtap="onTakeCargoPhoto">拍货物</view>
+      <view class="btn btn-red" bindtap="onTakeDocPhoto">拍单据</view>
+    </view>
+    <!-- 码头服务查询 -->
+    <view class="card">
+      <view class="card-header">码头服务查询</view>
+      <view class="card-content">
+        <!-- 搜索栏 -->
+        <view class="search-box">
+          <input type="text" class="search-input" placeholder="输入关键词搜索" />
+          <view class="search-btn">搜索</view>
         </view>
-        <!-- 码头服务查询 -->
-        <view class="card">
-            <view class="card-header">码头服务查询</view>
-            <view class="card-content">
-                <!-- 搜索栏 -->
-                <view class="search-box">
-                    <input type="text" class="search-input" placeholder="输入关键词搜索" />
-                    <view class="search-btn">搜索</view>
-                </view>
-                <!-- 热门推荐 -->
-                <view class="section-title">热门推荐</view>
-                <view class="hot-services">
-                    <view class="service-item df">
-                        <view class="df aic">
-                            <view class="service-name">张师傅</view>
-                            <view class="service-type">机械维修</view>
-                        </view>
-                        <view class="btn btn-phone" data-phone="13800138001">
-                            <image class="tel" src="../../images/tel-f.png"></image>
-                            拨打电话
-                        </view>
-                    </view>
-                    <view class="service-item">
-                        <view class="df aic">
-                            <view class="service-name">李经理</view>
-                            <view class="service-type">船舶补给</view>
-                        </view>
-                        <view class="btn btn-phone" data-phone="13800138002">
-                            <image class="tel" src="../../images/tel-f.png"></image>
-                            拨打电话
-                        </view>
-                    </view>
-                    <view class="service-item">
-                        <view class="df aic">
-                            <view class="service-name">王工</view>
-                            <view class="service-type">电气维修</view>
-                        </view>
-                        <view class="btn btn-phone" data-phone="13800138003">
-                            <image class="tel" src="../../images/tel-f.png"></image>
-                            拨打电话
-                        </view>
-                    </view>
-                    <view class="service-item">
-                        <view class="df aic">
-                            <view class="service-name">赵队长</view>
-                            <view class="service-type">应急救援</view>
-                        </view>
-                        <view class="btn btn-phone" data-phone="13800138004">
-                            <image class="tel" src="../../images/tel-f.png"></image>
-                            拨打电话
-                        </view>
-                    </view>
-                </view>
-                <!-- 水位信息 -->
-                <view class="section-title">水位信息</view>
-                <view class="water-level-info">
-                    <view class="water-level-item">
-                        <view class="water-level-station">九江站</view>
-                        <view class="water-level-value">15.2米</view>
-                        <view class="water-level-trend rising">↑ 0.3米</view>
-                    </view>
-                    <view class="water-level-item">
-                        <view class="water-level-station">武汉站</view>
-                        <view class="water-level-value">18.5米</view>
-                        <view class="water-level-trend falling">↓ 0.2米</view>
-                    </view>
-                    <view class="water-level-item">
-                        <view class="water-level-station">南京站</view>
-                        <view class="water-level-value">10.1米</view>
-                        <view class="water-level-trend stable">→ 0.0米</view>
-                    </view>
-                </view>
+        <!-- 热门推荐 -->
+        <view class="section-title">热门推荐</view>
+        <view class="hot-services">
+          <view class="service-item df">
+            <view class="df aic">
+              <view class="service-name">张师傅</view>
+              <view class="service-type">机械维修</view>
+            </view>
+            <view class="btn btn-phone" data-phone="13800138001">
+              <image class="tel" src="../../images/tel-f.png"></image>
+              拨打电话
+            </view>
+          </view>
+          <view class="service-item">
+            <view class="df aic">
+              <view class="service-name">李经理</view>
+              <view class="service-type">船舶补给</view>
+            </view>
+            <view class="btn btn-phone" data-phone="13800138002">
+              <image class="tel" src="../../images/tel-f.png"></image>
+              拨打电话
+            </view>
+          </view>
+          <view class="service-item">
+            <view class="df aic">
+              <view class="service-name">王工</view>
+              <view class="service-type">电气维修</view>
+            </view>
+            <view class="btn btn-phone" data-phone="13800138003">
+              <image class="tel" src="../../images/tel-f.png"></image>
+              拨打电话
+            </view>
+          </view>
+          <view class="service-item">
+            <view class="df aic">
+              <view class="service-name">赵队长</view>
+              <view class="service-type">应急救援</view>
             </view>
+            <view class="btn btn-phone" data-phone="13800138004">
+              <image class="tel" src="../../images/tel-f.png"></image>
+              拨打电话
+            </view>
+          </view>
+        </view>
+        <!-- 水位信息 -->
+        <view class="section-title">水位信息</view>
+        <view class="water-level-info">
+          <view class="water-level-item">
+            <view class="water-level-station">九江站</view>
+            <view class="water-level-value">15.2米</view>
+            <view class="water-level-trend rising">↑ 0.3米</view>
+          </view>
+          <view class="water-level-item">
+            <view class="water-level-station">武汉站</view>
+            <view class="water-level-value">18.5米</view>
+            <view class="water-level-trend falling">↓ 0.2米</view>
+          </view>
+          <view class="water-level-item">
+            <view class="water-level-station">南京站</view>
+            <view class="water-level-value">10.1米</view>
+            <view class="water-level-trend stable">→ 0.0米</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 新能源船舶政策解读 -->
+    <view class="card">
+      <view class="card-header">新能源船舶政策解读</view>
+      <view class="card-content">
+        <!-- 拆船政策 -->
+        <view class="section-title mt0">拆船政策</view>
+        <view class="policy-table">
+          <view class="policy-header">
+            <view class="policy-cell">吨位</view>
+            <view class="policy-cell">补贴额度</view>
+          </view>
+          <view class="policy-row">
+            <view class="policy-cell">500</view>
+            <view class="policy-cell">30万元/艘</view>
+          </view>
+          <view class="policy-row">
+            <view class="policy-cell">1000</view>
+            <view class="policy-cell">50万元/艘</view>
+          </view>
+          <view class="policy-row">
+            <view class="policy-cell">2000</view>
+            <view class="policy-cell">80万元/艘</view>
+          </view>
+        </view>
+        <!-- 造船政策 -->
+        <view class="section-title">造船政策</view>
+        <view class="policy-table">
+          <view class="policy-header">
+            <view class="policy-cell">吨位</view>
+            <view class="policy-cell">新能源类型</view>
+            <view class="policy-cell">补贴额度</view>
+          </view>
+          <view class="policy-row">
+            <view class="policy-cell">500</view>
+            <view class="policy-cell">电力推进</view>
+            <view class="policy-cell">50万元/艘</view>
+          </view>
+          <view class="policy-row">
+            <view class="policy-cell">1000</view>
+            <view class="policy-cell">LNG动力</view>
+            <view class="policy-cell">80万元/艘</view>
+          </view>
+          <view class="policy-row">
+            <view class="policy-cell">2000</view>
+            <view class="policy-cell">混合动力</view>
+            <view class="policy-cell">100万元/艘</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 智能服务 -->
+    <view class="card">
+      <view class="card-header">智能服务</view>
+      <view class="card-content">
+        <view class="list-item">
+          <view class="tag tag-warning">提醒</view>
+          您的船舶年检即将到期,到期日期:2023年12月31日
         </view>
-        <!-- 新能源船舶政策解读 -->
-        <view class="card">
-            <view class="card-header">新能源船舶政策解读</view>
-            <view class="card-content">
-                <!-- 拆船政策 -->
-                <view class="section-title mt0">拆船政策</view>
-                <view class="policy-table">
-                    <view class="policy-header">
-                        <view class="policy-cell">吨位</view>
-                        <view class="policy-cell">补贴额度</view>
-                    </view>
-                    <view class="policy-row">
-                        <view class="policy-cell">500</view>
-                        <view class="policy-cell">30万元/艘</view>
-                    </view>
-                    <view class="policy-row">
-                        <view class="policy-cell">1000</view>
-                        <view class="policy-cell">50万元/艘</view>
-                    </view>
-                    <view class="policy-row">
-                        <view class="policy-cell">2000</view>
-                        <view class="policy-cell">80万元/艘</view>
-                    </view>
-                </view>
-                <!-- 造船政策 -->
-                <view class="section-title">造船政策</view>
-                <view class="policy-table">
-                    <view class="policy-header">
-                        <view class="policy-cell">吨位</view>
-                        <view class="policy-cell">新能源类型</view>
-                        <view class="policy-cell">补贴额度</view>
-                    </view>
-                    <view class="policy-row">
-                        <view class="policy-cell">500</view>
-                        <view class="policy-cell">电力推进</view>
-                        <view class="policy-cell">50万元/艘</view>
-                    </view>
-                    <view class="policy-row">
-                        <view class="policy-cell">1000</view>
-                        <view class="policy-cell">LNG动力</view>
-                        <view class="policy-cell">80万元/艘</view>
-                    </view>
-                    <view class="policy-row">
-                        <view class="policy-cell">2000</view>
-                        <view class="policy-cell">混合动力</view>
-                        <view class="policy-cell">100万元/艘</view>
-                    </view>
-                </view>
+        <view class="list-item">
+          <view class="tag tag-danger">提醒</view>
+          您有3本证书即将到期
+          <view style="margin-top: 10px">
+            <view class="cert-item">
+              <view>船舶检验证书</view>
+              <view class="expire-date">到期时间:2023年12月15日</view>
+            </view>
+            <view class="cert-item">
+              <view>船舶营运证</view>
+              <view class="expire-date">到期时间:2023年12月20日</view>
             </view>
+            <view class="cert-item">
+              <view>船员适任证书</view>
+              <view class="expire-date">到期时间:2023年12月25日</view>
+            </view>
+          </view>
         </view>
-        <!-- 智能服务 -->
-        <view class="card">
-            <view class="card-header">智能服务</view>
-            <view class="card-content">
-                <view class="list-item">
-                    <view class="tag tag-warning">提醒</view>
-                    您的船舶年检即将到期,到期日期:2023年12月31日
-                </view>
-                <view class="list-item">
-                    <view class="tag tag-danger">提醒</view>
-                    您有3本证书即将到期
-                    <view style="margin-top: 10px">
-                        <view class="cert-item">
-                            <view>船舶检验证书</view>
-                            <view class="expire-date">到期时间:2023年12月15日</view>
-                        </view>
-                        <view class="cert-item">
-                            <view>船舶营运证</view>
-                            <view class="expire-date">到期时间:2023年12月20日</view>
-                        </view>
-                        <view class="cert-item">
-                            <view>船员适任证书</view>
-                            <view class="expire-date">到期时间:2023年12月25日</view>
-                        </view>
-                    </view>
-                </view>
-                <view class="list-item">
-                    <view class="tag">提醒</view>
-                    您有2个船员资质可升级
-                    <view style="margin-top: 10px">
-                        <view class="cert-item">
-                            <view>三副</view>
-                            <view class="upgrade-info">可升级为:二副</view>
-                        </view>
-                        <view class="cert-item">
-                            <view>机工</view>
-                            <view class="upgrade-info">可升级为:三管轮</view>
-                        </view>
-                    </view>
-                </view>
-                <view class="list-item contact-info">
-                    <view class="mb20">船舶年检证书办理与资质请联系朱经理</view>
-                    <view class="btn btn-phone" data-phone="13800138000">拨打电话</view>
-                </view>
+        <view class="list-item">
+          <view class="tag">提醒</view>
+          您有2个船员资质可升级
+          <view style="margin-top: 10px">
+            <view class="cert-item">
+              <view>三副</view>
+              <view class="upgrade-info">可升级为:二副</view>
+            </view>
+            <view class="cert-item">
+              <view>机工</view>
+              <view class="upgrade-info">可升级为:三管轮</view>
             </view>
+          </view>
+        </view>
+        <view class="list-item contact-info">
+          <view class="mb20">船舶年检证书办理与资质请联系朱经理</view>
+          <view class="btn btn-phone" data-phone="13800138000">拨打电话</view>
+        </view>
+      </view>
+    </view>
+    <!-- 搜查附近货盘 -->
+    <view class="card">
+      <view class="card-header">搜查附近货盘</view>
+      <view class="card-content">
+        <view class="search-box">
+          <input type="text" class="search-input" placeholder="输入关键词搜索" />
+          <view class="search-btn">搜索</view>
         </view>
-        <!-- 搜查附近货盘 -->
-        <view class="card">
-            <view class="card-header">搜查附近货盘</view>
-            <view class="card-content">
-                <view class="search-box">
-                    <input type="text" class="search-input" placeholder="输入关键词搜索" />
-                    <view class="search-btn">搜索</view>
-                </view>
-                <view class="map-container">
-                    <view>地图区域 - 显示船舶与货盘</view>
-                    <!-- 这里可以使用微信小程序的map组件替换 -->
-                    <view class="map-marker ship"></view>
-                    <view class="map-marker cargo" style="top: 30%; left: 60%"></view>
-                    <view class="map-marker cargo" style="top: 50%; left: 30%"></view>
-                    <view class="map-marker cargo" style="top: 60%; left: 55%"></view>
-                </view>
-                <!-- 货盘列表 -->
-                <view class="cargo-list">
-                    <view class="cargo-item">
-                        <view class="cargo-info">
-                            <text class="cargo-type">煤炭</text>
-                            <view>| 南京港 → 芜湖港 |</view>
-                            <view>3000吨</view>
-                        </view>
-                        <view class="cargo-meta">
-                            <view class="cargo-distance">距离: 约50公里</view>
-                            <view class="btn btn-phone" data-phone="13900139001">
-                                <image class="tel" src="../../images/tel-f.png"></image>
-                                拨打电话
-                            </view>
-                        </view>
-                    </view>
-                    <view class="cargo-item">
-                        <view class="cargo-info">
-                            <text class="cargo-type">砂石</text>
-                            <view>| 马鞍山港 → 安庆港 |</view>
-                            <view>5000吨</view>
-                        </view>
-                        <view class="cargo-meta">
-                            <view class="cargo-distance">距离: 约80公里</view>
-                            <view class="btn btn-phone" data-phone="13900139002">
-                                <image class="tel" src="../../images/tel-f.png"></image>
-                                拨打电话
-                            </view>
-                        </view>
-                    </view>
-                    <view class="cargo-item">
-                        <view class="cargo-info">
-                            <text class="cargo-type">水泥</text>
-                            <view>| 芜湖港 → 九江港 |</view>
-                            <view>2000吨</view>
-                        </view>
-                        <view class="cargo-meta">
-                            <view class="cargo-distance">距离: 约120公里</view>
-                            <view class="btn btn-phone" data-phone="13900139003">
-                                <image class="tel" src="../../images/tel-f.png"></image>
-                                拨打电话
-                            </view>
-                        </view>
-                    </view>
-                </view>
+        <view class="map-container">
+          <view>地图区域 - 显示船舶与货盘</view>
+          <!-- 这里可以使用微信小程序的map组件替换 -->
+          <view class="map-marker ship"></view>
+          <view class="map-marker cargo" style="top: 30%; left: 60%"></view>
+          <view class="map-marker cargo" style="top: 50%; left: 30%"></view>
+          <view class="map-marker cargo" style="top: 60%; left: 55%"></view>
+        </view>
+        <!-- 货盘列表 -->
+        <view class="cargo-list">
+          <view class="cargo-item">
+            <view class="cargo-info">
+              <text class="cargo-type">煤炭</text>
+              <view>| 南京港 → 芜湖港 |</view>
+              <view>3000吨</view>
+            </view>
+            <view class="cargo-meta">
+              <view class="cargo-distance">距离: 约50公里</view>
+              <view class="btn btn-phone" data-phone="13900139001">
+                <image class="tel" src="../../images/tel-f.png"></image>
+                拨打电话
+              </view>
+            </view>
+          </view>
+          <view class="cargo-item">
+            <view class="cargo-info">
+              <text class="cargo-type">砂石</text>
+              <view>| 马鞍山港 → 安庆港 |</view>
+              <view>5000吨</view>
+            </view>
+            <view class="cargo-meta">
+              <view class="cargo-distance">距离: 约80公里</view>
+              <view class="btn btn-phone" data-phone="13900139002">
+                <image class="tel" src="../../images/tel-f.png"></image>
+                拨打电话
+              </view>
+            </view>
+          </view>
+          <view class="cargo-item">
+            <view class="cargo-info">
+              <text class="cargo-type">水泥</text>
+              <view>| 芜湖港 → 九江港 |</view>
+              <view>2000吨</view>
+            </view>
+            <view class="cargo-meta">
+              <view class="cargo-distance">距离: 约120公里</view>
+              <view class="btn btn-phone" data-phone="13900139003">
+                <image class="tel" src="../../images/tel-f.png"></image>
+                拨打电话
+              </view>
             </view>
+          </view>
         </view>
+      </view>
     </view>
+  </view>
 </view>