'修改首页'

environment.js

@@ -1,6 +1,6 @@
 const __request_base_url__ = {
-    develop: "http://192.168.11.11:9061/api",
-    // develop: "https://qmhhapi-test.t-aaron.com/api",
+    // develop: "http://192.168.11.11:9061/api",
+    develop: "https://qmhhapi-test.t-aaron.com/api",
     trial: "https://qmhhapi-test.t-aaron.com/api",
     release: "https://qmhh.t-aaron.com/api"
 }

pages/FirstPage/index.js

@@ -9,15 +9,10 @@ Page({
      * 页面的初始数据
      */
     data: {
+        areaName: '芦淞区', // 当前区域位置
         announcementList: [], // 公告列表
         // 快捷入口
         entersList: [
-            // {
-            //     title:'上报问题',
-            //     iconPath: '../../assets/first/upload.png',
-            //     path: '/pages/all/index',
-            //     type: 'tabbar'
-            // },
             {
                 title:'护河行动',
                 iconPath: '../../assets/first/new.png',
@@ -55,7 +50,6 @@ Page({
                 type: 'page'
             },
         ],
-        infoList: ['name', 'location', 'note'],
         liveNum: 0, // 在线人数
         list: [], // 河道展示
         current: '',
@@ -167,6 +161,13 @@ Page({
         }
     },
 
+    // 查看更多
+    showMoreRivers() {
+        wx.switchTab({
+          url: '/pages/all/index',
+        })
+    },
+
     // 上报问题
     uploadProblem(e) {
         let detail = e.currentTarget.dataset.detail

pages/FirstPage/index.wxml

@@ -2,12 +2,16 @@
 <view class="first_container">
     <!-- 切换位置 -->
     <view class="first_head">
-        <view class="select_location" bindtap="goSelectLocation">切换位置</view>
+        <view class="area_info">
+            <image class="area_icon" src="../../assets/first/area_icon.png"></image>
+            <view class="current_area">当前位置：<text style="font-weight: 600;">{{areaName}}</text></view>
+        </view>
+        <view class="select_location" bindtap="goSelectLocation">切换位置 <image style="width: 12rpx;" mode="widthFix" src="../../assets/first/go.png"></image></view>
     </view>
     <view class="main_container">
         <!-- 图片 -->
         <view class="banner">
-            <image class="banner_image" src="../../assets/first/home_banner.png" bindtap="redirectToAd"></image>
+            <image class="banner_image" mode="widthFix" src="../../assets/first/home_banner.png" bindtap="redirectToAd"></image>
         </view>
 
 
@@ -21,25 +25,30 @@
 
         <!-- 在线人数 -->
         <view class="live_box">
-            <image class="live_bg" src="../../assets/first/live_bg.png"></image>
+            <image class="live_bg" mode="widthFix" src="../../assets/first/live_bg.png"></image>
             <view class="live_message">
-                <text style="color: #fff;font-size: 26rpx">参与人数</text>
-                <text style="color: #FFE81AFF;;font-size: 34rpx;font-weight: bold;">{{liveNum}}人</text>
+                <text style="color: #fff;font-size: 26rpx">参与人次</text>
+                <text style="color: #ffffff;;font-size: 32rpx;font-weight: 400;font-family: Fontquan-XinYiGuanHeiTi;">{{liveNum}}人</text>
             </view>
         </view>
 
         <!-- 河道展示 -->
         <view class="rivers_box">
-            <view class="rivers_title">河道展示</view>
+            <view class="list_header">
+                <view class="list_title">河道展示</view>
+                <view class="more_btn" bindtap="showMoreRivers">查看更多</view>
+            </view>
             <list class="rivers_list" url="{{current}}" list="{{list}}" params="{{params}}" bind:update-list="updateList" bind:reset-list="resetList">
                 <view class="river_item" wx:for="{{list}}" wx:key="index" bindtap="showDetail" data-item="{{item}}">
                     <image class="river_image" src="{{item.image}}"></image>
                     <view class="river_info">
-                        <view class="text_box" wx:for="{{infoList}}" wx:for-item="m" wx:key="m">
-                            <text class="info_item">{{item[m] || ''}}</text>
+                        <view class="river_head">
+                            <view class="river_name">{{item.name}}</view>
+                            <view class="river_button" catchtap="uploadProblem" data-current="{{index}}" data-detail="{{item}}">上报问题</view>
                         </view>
+                        <view class="river_location">{{item.location}}</view>
+                        <view class="river_note">{{item.note || ''}}</view>
                     </view>
-                    <view class="river_button" catchtap="uploadProblem" data-current="{{index}}" data-detail="{{item}}">上报问题</view>
                 </view>
             </list>
         </view>

pages/FirstPage/index.wxss

@@ -2,34 +2,52 @@
 .first_container {
     width: 100%;
     min-height: calc(100vh - 112rpx);
+    padding: 0 25rpx;
     padding-bottom: 112rpx;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
     color: #333333;
-    background-color: rgba(240, 242, 245, 1);
+    background-color: rgba(242, 246, 249, 1);
 }
 .first_head {
     width: 100%;
-    padding: 10rpx 30rpx;
-    background-color: #ffffff;
+    padding: 15rpx 22rpx;
+    margin-bottom: 28rpx;
+    background-color: rgba(218, 232, 255, 1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1rpx solid rgba(160, 197, 248, 1);
+    border-radius: 10rpx;
+    box-shadow: 0rpx 1rpx 4rpx 0rpx rgba(204,201,201,0.27);
+}
+.area_info {
+    display: flex;
     justify-content: flex-start;
     align-items: center;
 }
+.area_icon {
+    width: 24rpx;
+    height: 34rpx;
+    margin-right: 30rpx;
+}
+.current_area {
+    color: rgba(31, 31, 31, 1);
+}
 .select_location {
-    width: 150rpx;
-    height: 60rpx;
-    line-height: 60rpx;
+    width: 152rpx;
+    height: 48rpx;
+    line-height: 48rpx;
     text-align: center;
     background-color: rgba(42, 130, 228, 1);
-    border-radius: 10rpx;
+    border-radius: 24rpx;
     color: #fff;
     font-size: 24rpx;
 }
 .main_container {
     width: 100%;
-    padding: 0 30rpx;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -40,7 +58,6 @@
 }
 .banner_image {
     width: 100%;
-    height: 380rpx;
     
 }
 /* 公告 */
@@ -105,26 +122,24 @@
 .fast_enters {
     width: 100%;
     margin-top: 20rpx;
-    padding: 20rpx 40rpx;
-    background-color: #ffffff;
     border-radius: 8rpx;
     display: flex;
-    align-items: center;
     flex-wrap: wrap;
-    flex: 0 0 25%;
+    justify-content: flex-start;
+    align-content: flex-start;
 }
 
 .enter_item {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
     padding: 10rpx;
+    margin-right: 65rpx;
     margin-bottom: 10rpx;
-    margin-right: 27rpx;
 }
-.enter_item:nth-child(4n+0) {
-    margin-right: 0;
+.fast_enters>.enter_item:nth-child(4n+0) {
+    margin-right: 0 !important;
 }
 .enter_icon {
    width: 110rpx;
@@ -144,15 +159,11 @@
 }
 .live_bg {
     width: 100%;
-    /* height: 180rpx; */
-    height: 140rpx;
 }
 .live_message {
     width: 100%;
-    /* height: 180rpx; */
-    height: 140rpx;
-    /* padding: 35rpx 60rpx; */
-    padding: 22rpx 60rpx;
+    height: 100%;
+    padding: 30rpx 0 48rpx 60rpx;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -172,12 +183,32 @@
     align-items: flex-start;
     border-radius: 8rpx;
 }
-.rivers_title {
+.list_header {
     width: 100%;
-    padding: 10rpx 20rpx;
-    background-color: #ffffff;
-    font-weight: 700;
-    font-size: 34rpx;
+    padding: 20rpx;
+    margin-bottom: 30rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 30rpx;
+}
+
+.list_title{
+    font-weight: 600;
+    margin-bottom: -10rpx;
+    position: relative;
+}
+.list_title::after {
+    content: '';
+    width: 120rpx;
+    height: 10rpx;
+    background-color: rgba(30, 121, 250, 0.5);
+    position: absolute;
+    bottom: 0rpx;
+    left: 0rpx;
+}
+.more_btn {
+    color: rgba(153, 153, 153, 1);
 }
 .rivers_list {
     width: 100%;
@@ -189,50 +220,70 @@
 .river_item {
     width: 100%;
     margin-bottom: 20rpx;
-    padding: 20rpx;
+    padding: 30rpx 22rpx 28rpx 27rpx;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
     background-color: #ffffff;
+    border-radius: 10rpx;
 }
 .river_image {
     width: 180rpx;
     height: 180rpx;
+    margin-right: 30rpx;
+    border-radius: 10rpx;
 }
 .river_info {
-    height: 180rpx;
+    flex: 1;
+    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
-    font-size: 28rpx;
 }
-.text_box {
-    margin: 10rpx;
+.river_head {
+    width: 100%;
+    margin-bottom: 10rpx;
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
 }
-.info_item {
-    width: 280rpx;
-    margin-left: 10rpx;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-.info_icon {
-    width: 24rpx;
-    height: 24rpx;
+.river_name {
+    font-weight: 600;
 }
 .river_button {
-    width: 140rpx;
-    height: 60rpx;
-    font-size: 28rpx;
+    width: 132rpx;
+    height: 50rpx;
+    font-size: 26rpx;
     color: #fff;
-    line-height: 60rpx;
+    line-height: 50rpx;
     text-align: center;
     background-color: #2a82e4;
     border-radius: 8rpx;
     align-self: flex-end;
 }
+.river_location {
+    max-width: 420rpx;
+    margin-bottom: 10rpx;
+    padding: 8rpx 14rpx;
+    background-color: rgba(40, 127, 251, 0.1);
+    color: rgba(40, 127, 251, 1);
+    border-radius: 10rpx;
+    font-size: 26rpx;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.river_note {
+    max-width: 420rpx;
+    font-size: 28rpx;
+    color: rgba(118, 120, 129, 1);
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+    white-space: normal !important;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
 

pages/all/index.wxml

@@ -9,12 +9,14 @@
     </view>
     <list id="list" class="river_list" url="{{current}}" bind:update-list="updateList" list="{{list}}" bind:reset-list="resetList" params="{{params}}">
         <view class="river_item" data-item="{{item}}" bindtap="showDetail" wx:for="{{list}}" wx:key="index">
+            <image class="river_image" src="{{item.image}}"></image>
             <view class="river_info">
-                <view class="massage_box">
-                    <image class="river_img" src="{{item.image}}"></image>
-                    <riverInfo dataSource="{{item}}"></riverInfo>
+                <view class="river_head">
+                    <view class="river_name">{{item.name}}</view>
+                    <view class="river_button" catchtap="uploadProblem" data-current="{{index}}" data-detail="{{item}}">上报问题</view>
                 </view>
-                <view class="execute_btn"  catchtap="uploadProblem" data-current="{{index}}" data-detail="{{item}}">上报问题</view>
+                <view class="river_location">{{item.location}}</view>
+                <view class="river_note">{{item.note || ''}}</view>
             </view>
         </view>
         

pages/all/index.wxss

@@ -7,6 +7,7 @@
     justify-content: flex-start;
     align-items: center;
     color: #333333;
+    background-color: rgba(242, 246, 249, 1);
 }
 .protect_head {
     width: 100%;
@@ -29,7 +30,8 @@
 .search_container {
     width: 100%;
     box-sizing: border-box;
-    padding: 10rpx 30rpx;
+    padding: 20rpx 30rpx;
+    margin-bottom: 20rpx;
     background: #fff;
     position: relative;
   }
@@ -62,37 +64,70 @@
   }
   .river_item {
     width: 100%;
-    padding: 0 30rpx;
-  }
-  .river_info {
-    width: 100%;
-    padding: 30rpx 0;
-    border-bottom: 1rpx solid #E6E6E6;
+    margin-bottom: 20rpx;
+    padding: 30rpx;
     display: flex;
     justify-content: space-between;
-    align-items: flex-end;
-  }
-  .massage_box {
-    box-sizing: border-box;
-    width: calc(100% - 150rpx);
+    align-items: flex-start;
+    background-color: #ffffff;
+    border-radius: 10rpx;
+}
+.river_image {
+    width: 180rpx;
+    height: 180rpx;
+    margin-right: 30rpx;
+    border-radius: 10rpx;
+}
+.river_info {
+    flex: 1;
+    height: 100%;
     display: flex;
+    flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
-  }
-  .river_img {
-      display: block;
-    width: 178rpx;
-    height: 144rpx;
-    margin-right: 20rpx;
-  }
-  .execute_btn {
-    width: 140rpx;
-    height: 60rpx;
-    font-size: 28rpx;
+}
+.river_head {
+    width: 100%;
+    margin-bottom: 10rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.river_name {
+    font-weight: 600;
+}
+.river_button {
+    width: 132rpx;
+    height: 50rpx;
+    font-size: 26rpx;
     color: #fff;
-    line-height: 60rpx;
+    line-height: 50rpx;
     text-align: center;
-    background-color: #2A82E4FF;
+    background-color: #2a82e4;
     border-radius: 8rpx;
     align-self: flex-end;
-  }
+}
+.river_location {
+    max-width: 420rpx;
+    margin-bottom: 10rpx;
+    padding: 8rpx 14rpx;
+    background-color: rgba(40, 127, 251, 0.1);
+    color: rgba(40, 127, 251, 1);
+    border-radius: 10rpx;
+    font-size: 26rpx;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.river_note {
+    max-width: 420rpx;
+    font-size: 28rpx;
+    color: rgba(118, 120, 129, 1);
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+    white-space: normal !important;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}