2756

package_A/pages/riverDetail/index.wxml

@@ -1,14 +1,40 @@
 <!--package_A/pages/riverDetail/index.wxml-->
 <view class="detail_container">
-    <image class="river_img" data-path="{{dataSource.image}}" bindtap="showPreviewImage" src="{{dataSource.image}}"></image>
-    <view class="river_message">
-        <view class="message_item" wx:for="{{messageList}}" wx:key="index">
-            <text class="item_label">{{item.label}}:</text>
-            <view class="item_value">{{dataSource[item.value] || ''}}{{item.unit}}</view>
+    <!-- 头部 -->
+    <view class="river_head">
+        <image class="head_img" mode="widthFix" src="../../img/river_bg.png"></image>
+        <view class="river_info">
+            <view class="river_name">{{dataSource.name}}</view>
+            <view class="info_item">
+                <text style="color: #7A8AA2;">河道长度：</text>
+                <text>{{dataSource.length}}公里</text>
+            </view>
+            <view class="info_item">
+                <text style="color: #7A8AA2;">起讫位置：</text>
+                <text>{{dataSource.location}}</text>
+            </view>
         </view>
-        <view class="note_box">
-            <text class="item_label">河道简介:</text>
-            <view class="note">{{dataSource.note || ''}}</view>
+    </view>
+    <!-- 详细信息 -->
+    <view class="message_detail">
+        <view class="detail_title">详细信息</view>
+        <view class="message_box">
+            <view class="user_info detail_item">
+                <text style="margin-bottom: 10rpx;">{{dataSource.streamAdminName || ''}}</text>
+                <text style="color: #7D8BA1;">责任河长</text>
+            </view>
+            <view class="user_info detail_item">
+                <text style="margin-bottom: 10rpx;">{{dataSource.mobile || ''}}</text>
+                <text style="color: #7D8BA1;">联系电话</text>
+            </view>
+            <view class="area_info detail_item">
+                <text style="margin-bottom: 10rpx;">{{dataSource.cityArea}}</text>
+                <text style="color: #7D8BA1;">河道区域</text>
+            </view>
+        </view>
+        <view class="river_note">
+            {{dataSource.note || ''}}
         </view>
+        <image class="river_img" mode="widthFix" src="{{dataSource.image}}"></image>
     </view>
 </view>

package_A/pages/riverDetail/index.wxss

@@ -6,50 +6,90 @@
    justify-content: flex-start;
    align-items: flex-start; 
 }
-.river_img {
+.river_head {
+    width: 100%;
+    color: #000000;
+}
+.head_img {
     width: 100%;
-    height: 300rpx;
 }
-.river_message {
+.river_info {
     width: 100%;
-    padding: 20rpx 0;
+    padding: 78rpx 50rpx;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.river_name {
+    margin-bottom: 50rpx;
+    font-size: 40rpx;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
 }
-.message_item {
+.info_item {
     width: 100%;
-    padding: 20rpx 30rpx;
     display: flex;
-    justify-content: space-between;
-}
-.item_label {
-    width: 170rpx;
-    flex-shrink: 0;
-    font-size: 30rpx;
-    color: #666666;
-}
-.item_value {
-    flex: 1;
-    text-align: end;
-    word-wrap: break-word;
-    word-break: break-all;
+    justify-content: flex-start;
+    align-items: center;
     font-size: 26rpx;
-    color: #333333;
+    margin-bottom: 36rpx;
 }
-.note_box {
+
+.message_detail {
     width: 100%;
-    padding: 20rpx 30rpx;
+    margin-top: -70rpx;
+    padding: 30rpx;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
+    background-color: #ffffff;
+    border-top-left-radius: 30rpx;
+    border-top-right-radius: 30rpx;
+}
+.detail_title {
+    margin-bottom: 50rpx;
+    padding-left: 20rpx;
+    border-left: 8rpx solid #0089FF;
+    font-size: 30rpx;
+    font-weight: bold;
+    line-height: 30rpx;
 }
-.note {
+.message_box {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
     font-size: 26rpx;
-    color: #333333;
-    margin-top: 20rpx;
-    text-align: start;
-    word-break: break-all;
+    color: #1A253E;
+}
+.detail_item {
+    padding: 30rpx 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1rpx solid #0089FF;
+    border-radius: 10rpx;
+    background-color: #F1F9FF;
+    margin-bottom: 20rpx;
+}
+.user_info {
+    width: 48%;
+}
+.area_info {
+    width: 100%;
+}
+.river_note {
+    font-size: 28rpx;
+    color: #1A253E;
+}
+.river_img {
+    width: 100%;
+    border-radius: 10rpx;
 }