From 846cac5f9a6ca505c7b8f10517d094c8e392e0a3 Mon Sep 17 00:00:00 2001
From: 396316021 <396316021@qq.com>
Date: Fri, 18 Aug 2023 11:03:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E7=BA=BF=E7=B4=A2=20?=
 =?UTF-8?q?=E7=BA=BF=E7=B4=A2=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  10 +
 pages/Index/components/HomePage/index.vue     |   2 +-
 pages/Index/components/UserPage/index.vue     |   3 +-
 .../components/ListPage/components/index.scss | 171 +++++-----
 pages/Line/components/ListPage/index.vue      | 291 ++++++++++--------
 pages/Line/index.vue                          |   9 +-
 pages/Line/user.vue                           | 191 ++++++++++++
 pages/Street/components/index.scss            |  46 +++
 pages/Street/index.vue                        | 186 +++++++++++
 9 files changed, 680 insertions(+), 229 deletions(-)
 create mode 100644 pages/Line/user.vue
 create mode 100644 pages/Street/components/index.scss
 create mode 100644 pages/Street/index.vue

diff --git a/pages.json b/pages.json
index d9da0ca..bcaaf5f 100644
--- a/pages.json
+++ b/pages.json
@@ -76,6 +76,16 @@
             "style" : {
                 "navigationBarTitleText" : "线索上传"
             }
+        },{
+            "path" : "pages/Line/user",
+            "style" : {
+                "navigationBarTitleText" : "我的线索"
+            }
+        },{
+            "path" : "pages/Street/index",
+            "style" : {
+                "navigationBarTitleText" : "街道联系方式"
+            }
         }
     ],
     "globalStyle" : {
diff --git a/pages/Index/components/HomePage/index.vue b/pages/Index/components/HomePage/index.vue
index 35bcd04..fea507b 100644
--- a/pages/Index/components/HomePage/index.vue
+++ b/pages/Index/components/HomePage/index.vue
@@ -266,7 +266,7 @@ export default {
           title:'顾问认证'
         },{
           image: imghost + '/static/image/index-five-3.png',
-          url: '/pages/Index/index',
+          url: '/pages/Line/index',
           title:'线索上传'
         },{
           image: imghost + '/static/image/index-five-4.png',
diff --git a/pages/Index/components/UserPage/index.vue b/pages/Index/components/UserPage/index.vue
index 51d33b5..655092d 100644
--- a/pages/Index/components/UserPage/index.vue
+++ b/pages/Index/components/UserPage/index.vue
@@ -109,7 +109,7 @@
           :rightIconStyle="{fontSize:'28rpx'}"
           :isLink="true"
           title="我的线索"
-          @click="navTo('/pages/Line/index')"
+          @click="navTo('/pages/Line/user')"
       >
         <template #icon>
           <view class="cell-icon" :style="{marginRight:'56rpx'}">
@@ -179,6 +179,7 @@
           :rightIconStyle="{fontSize:'28rpx'}"
           :isLink="true"
           title="街道联系方式"
+          @click="navTo('/pages/Street/index')"
       >
         <template #icon>
           <view class="cell-icon" :style="{marginRight:'56rpx'}">
diff --git a/pages/Line/components/ListPage/components/index.scss b/pages/Line/components/ListPage/components/index.scss
index 5f1fb08..0e05cd6 100644
--- a/pages/Line/components/ListPage/components/index.scss
+++ b/pages/Line/components/ListPage/components/index.scss
@@ -1,113 +1,90 @@
-.wrap {
-  padding: 12px;
+.card-container{
+  padding:0 26rpx;
 }
-.index-five-button{
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  padding:35rpx 0;
-  border:1px solid #dedede;
-  border-radius: 20rpx;
-}
-.index-five-col{
-  flex:0 0 20%;
-  .button-title{
-    font-size: 24rpx;
-    font-weight: 400;
-    color: #666666;
-    text-align: center;
-  }
-  .button-img{
-    text-align: center;
-    .img{
-      height:75rpx;
+.card-item{
+  margin-bottom:20rpx;
+  width:100%;
+  padding:24rpx 40rpx;
+  background: {
+    color:#FFFFFF;
+  };
+  overflow: hidden;
+  position: relative;
+  border-radius: 10rpx;
+  .card-main{
+    position: relative;
+    .main-hr{
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      height: 2rpx;
+      background: #EEEEEE;
+      border-radius: 0rpx 0rpx 0rpx 0rpx;
+      opacity: 1;
     }
+
   }
-}
-  .cell-container{
-    align-items: center;
-    line-height:1;
-    .cell-title {
-      font-size: 32rpx;
-      font-weight: 400;
-      color: #FF9545;
-    }
-    .cell-border{
-      height:32rpx;
-      width: 2rpx;
-      margin:{
-        left:16rpx;
-        right:16rpx;
-      }
-      background:{
-        color:#999999;
-      }
-    }
-    .cell-title-desc{
-      font-size: 28rpx;
-      font-weight: 400;
-      color: #333333;
-    }
+  .card-ext{
+    margin-top:20rpx;
   }
-  .index-ad-img{
-    margin-top:15rpx;
-    padding:0 26rpx;
-    .img{
-      border-radius: 20rpx;
-      height:160rpx;
-      width:100%;
+  .background-view{
+    width: 50%;
+    height: 50%;
+    opacity: 1;
+    position: absolute;
+    top:-45%;
+    left:-45%;
+    z-index: 2;
+    filter: blur(122px);
+    &.blue{
+      background-color: #178AF2;
     }
-    .index-ad-desc{
-      font-size: 24rpx;
-      font-weight: 400;
-      color: #AFB5BE;
-      line-height:1;
-      margin-bottom:20rpx;
+    &.green{
+      background-color: #0EAF4E;
     }
   }
-.cell-two-container{
-  align-items: center;
-  line-height:1;
-  .cell-title {
-    font-size: 32rpx;
+  .label{
+    width:180rpx;
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #020B18;
+    line-height: 40rpx;
+  }
+  .content{
+    font-size: 28rpx;
     font-weight: 400;
     color: #020B18;
-    line-height: 1;
+    line-height: 40rpx;
   }
-  .cell-border{
-    height:40rpx;
-    width: 8rpx;
-    margin:{
-      right:12rpx;
+  .status{
+    font-size: 28rpx;
+    font-weight: 400;
+    line-height: 40rpx;
+    margin-left:auto;
+    &.blue{
+      color: #178AF2;
     }
-    background:{
-      color:#FF9545;
+    &.green{
+      color: #0EAF4E;
     }
   }
-}
-.about-us-content{
-  font-size: 30rpx;
-  font-weight: 400;
-  color: #999999;
-  line-height: 48rpx;
-}
-
-.image-container{
-  border-radius: 10rpx;
-  overflow: hidden;
-  position: relative;
-  .img-title{
-    width:100%;
-    height: 64rpx;
-    background: linear-gradient(180deg, rgba(2,11,24,0) 0%, rgba(2,11,24,0.5) 100%);
-    opacity: 1;
-    font-weight: 400;
-    position: absolute;
-    padding:{
-      left:26rpx;
+  .title-group{
+    padding:14rpx;
+  }
+  .body-group{
+    padding:14rpx;
+    .label{
+      color: #AFB5BE;
+    }
+    .content{
+      margin-left:-10rpx;
+      margin-right:-10rpx;
+      .content-img{
+        padding:10rpx;
+      }
+      &.orange{
+       color:#FF9545;
+      }
     }
-    bottom:0;
-    left:0;
-    box-sizing: border-box;
   }
 }
\ No newline at end of file
diff --git a/pages/Line/components/ListPage/index.vue b/pages/Line/components/ListPage/index.vue
index 7a9df42..170e8b6 100644
--- a/pages/Line/components/ListPage/index.vue
+++ b/pages/Line/components/ListPage/index.vue
@@ -1,112 +1,121 @@
 <template>
-  <view class="list-page" :style="{padding:'20rpx'}">
-    <u-form
-        labelPosition="left"
-        :model="model1"
-        :rules="rules"
-        ref="form1"
-        labelWidth="200rpx"
-    >
-      <u-form-item
-          :custom-style="{
-                  padding:'34rpx 0'
-              }"
-          label="事件类型"
-          prop="userInfo.name"
-          borderBottom
-          ref="item1"
-      >
-        <u-input
-            fontSize="28"
-            placeholder="请填写您的真实姓名"
-            v-model="model1.userInfo.name"
-            border="none"
-        ></u-input>
-      </u-form-item>
-      <u-form-item
-          :custom-style="{
-                  padding:'34rpx 0'
-              }"
-          label="手机号"
-          prop="userInfo.name"
-          borderBottom
-          ref="item1"
-      >
-        <u-input
-            fontSize="28"
-            placeholder="请输入"
-            v-model="model1.userInfo.name"
-            border="none"
-        ></u-input>
-      </u-form-item>
-      <u-form-item
-          :custom-style="{
-                  padding:'34rpx 0'
-              }"
-          label="事件地址"
-          prop="userInfo.name"
-          borderBottom
-          ref="item1"
-      >
-        <u-input
-            fontSize="28"
-            placeholder="请选择"
-            v-model="model1.userInfo.name"
-            border="none"
-        ></u-input>
-      </u-form-item>
-      <u-form-item
-          :custom-style="{
-                  padding:'34rpx 0'
-              }"
-          prop="userInfo.name"
-          borderBottom
-          ref="item1"
-      >
-        <view class="font-info">文字说明</view>
-        <u-textarea
-            border="none"
-            placeholder="请描述您遇到的问题"
-            height="220"
-            :custom-style="{
-                backgroundColor:'#FAFAFA',
-                padding:'8rpx 20rpx'
-              }"
-        ></u-textarea>
-      </u-form-item>
+  <u-row>
+    <u-col>
+      <view class="card-container border-box">
+        <view class="card-item border-box">
+          <view class="card-main border-box">
+            <view class="background-view blue"></view>
+            <view class="title-group row">
+              <view class="label">提交时间</view>
+              <view class="content">2023/08/03 15:23</view>
+              <view class="status blue">待办结</view>
+            </view>
+            <view class="main-hr"></view>
+            <view class="body-group border-box">
+              <view class="body-item row">
+                <view class="label">事件类型</view>
+                <view class="content">环境污染</view>
+              </view>
+              <view class="body-item row">
+                <view class="label">事件地址</view>
+                <view class="content">四川省成都市新都区22号</view>
+              </view>
+              <view class="body-item row">
+                <view class="label">文字说明</view>
+                <view class="content">有污水排出，污染河流</view>
+              </view>
+              <view class="body-item row image">
+                <view class="label">图片视频</view>
+                <view class="content row">
+                    <view class="content-img col-6">
+                      <u-image :src="staticImage.userFxx" :lazy-load="true" width="100%" height="180" mode="widthFix"></u-image>
+                    </view>
+                    <view class="content-img col-6">
+                      <u-image :src="staticImage.userFxx" :lazy-load="true" width="100%" height="180" mode="widthFix"></u-image>
+                    </view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="card-ext"></view>
+        </view>
+        <view class="card-item border-box">
+          <view class="card-main border-box">
+            <view class="background-view green"></view>
+            <view class="title-group row">
+              <view class="label">提交时间</view>
+              <view class="content">2023/08/03 15:23</view>
+              <view class="status green">已办结</view>
+            </view>
+            <view class="main-hr"></view>
+            <view class="body-group border-box">
+              <view class="body-item row">
+                <view class="label">事件类型</view>
+                <view class="content">环境污染</view>
+              </view>
+              <view class="body-item row">
+                <view class="label">事件地址</view>
+                <view class="content">四川省成都市新都区22号</view>
+              </view>
+              <view class="body-item row">
+                <view class="label">文字说明</view>
+                <view class="content">有污水排出，污染河流</view>
+              </view>
+              <view class="body-item row image">
+                <view class="label">图片视频</view>
+                <view class="content row">
+                    <view class="content-img col-6">
+                      <u-image :src="staticImage.userFxx"  width="100%" height="180" mode="widthFix"></u-image>
+                    </view>
+                    <view class="content-img col-6">
+                      <u-image :src="staticImage.userFxx"  width="100%" height="180" mode="widthFix"></u-image>
+                    </view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="card-ext">
 
-      <u-form-item
-          :custom-style="{
-                  padding:'34rpx 0'
-              }"
-          label="上传照片或视频(非必填)"
-          prop="userInfo.name"
-          borderBottom
-          ref="item1"
-      >
-        <u-upload
-            width="160"
-            height="160"
-            :fileList="fileList1"
-            name="1"
-            multiple
-            :maxCount="10"
-            uploadIcon="plus"
+          </view>
+        </view>
+        <view class="card-item border-box">
+          <view class="card-main border-box">
+            <view class="body-group border-box">
+              <view class="body-item row">
+                <view class="label">处理时间</view>
+                <view class="content">2023/09/23 16:25</view>
+              </view>
+              <view class="body-item row">
+                <view class="label">处理部门</view>
+                <view class="content">***部门</view>
+              </view>
+              <view class="body-item row">
+                <view class="label">丰行侠暖新币</view>
+                <view class="content orange">10币</view>
+              </view>
+              <view class="body-item row image">
+                <view class="label">图片视频</view>
+                <view class="content">
+                  已勒令整改，并检查完成。
+                </view>
+                <view class="content row">
+                  <view class="content-img col-6">
+                    <u-image :src="staticImage.userFxx" :lazy-load="true" width="100%" height="180" mode="widthFix"></u-image>
+                  </view>
+                  <view class="content-img col-6">
+                    <u-image :src="staticImage.userFxx" :lazy-load="true" width="100%" height="180" mode="widthFix"></u-image>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="card-ext">
 
-        ></u-upload>
-        <u-upload
-            width="160"
-            height="160"
-            :fileList="fileList1"
-            name="1"
-            multiple
-            :maxCount="10"
-            uploadIcon="plus"
-
-        ></u-upload>
-      </u-form-item>
-    </u-form>
-  </view>
+          </view>
+        </view>
+      </view>
+    </u-col>
+  </u-row>
 </template>
 
 <script>
@@ -122,6 +131,21 @@ export default {
     MzCard
   },
   data: {
+    tags:[
+      {
+        checked:true,
+        name:'红绿灯故障'
+      },{
+        checked:false,
+        name:'存在安全隐患'
+      },{
+        checked:false,
+        name:'公共设施损坏了'
+      },{
+        checked:false,
+        name:'环境污染污水'
+      },
+    ],
     fileList1:[],
     model1: {
       userInfo: {
@@ -168,26 +192,26 @@ export default {
       dogImage: imghost + '/static/image/index-user-title-dog.png',
       couponsImage: imghost + '/static/image/index-user-coupons-background.png',
       indexButtonGroup: [{
-          image: imghost + '/static/image/index-five-1.png',
-          url: '/pages/Authentication/index',
-          title:'丰行侠认证'
-        },{
-          image: imghost + '/static/image/index-five-2.png',
-          url: '/pages/Index/index',
-          title:'顾问认证'
-        },{
-          image: imghost + '/static/image/index-five-3.png',
-          url: '/pages/Index/index',
-          title:'线索上传'
-        },{
-          image: imghost + '/static/image/index-five-4.png',
-          url: '/pages/Index/index',
-          title:'社区顾问库'
-        },{
-          image: imghost + '/static/image/index-five-5.png',
-          url: '/pages/Index/index',
-          title:'暖新服务'
-        },
+        image: imghost + '/static/image/index-five-1.png',
+        url: '/pages/Authentication/index',
+        title:'丰行侠认证'
+      },{
+        image: imghost + '/static/image/index-five-2.png',
+        url: '/pages/Index/index',
+        title:'顾问认证'
+      },{
+        image: imghost + '/static/image/index-five-3.png',
+        url: '/pages/Index/index',
+        title:'线索上传'
+      },{
+        image: imghost + '/static/image/index-five-4.png',
+        url: '/pages/Index/index',
+        title:'社区顾问库'
+      },{
+        image: imghost + '/static/image/index-five-5.png',
+        url: '/pages/Index/index',
+        title:'暖新服务'
+      },
       ],
       wallpaperBgImage: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
       bg: imghost + '/static/image/BG.png',
@@ -208,11 +232,26 @@ export default {
     pagePadding: 100,
     userInfo: {},
     userExtends: {},
+    size:{
+      height:0
+    }
   },
   onLoad() {
 
+  },
+  onReady() {
+    let that = this;
+    let info = uni.createSelectorQuery().in(this).select('.foot-button');
+    info.boundingClientRect(function (data) {
+      that.size.height = data.height;
+      console.log('height',that.size.height)
+    }).exec(function (res) {});
   },
   methods: {
+    checkboxClick(index){
+      console.log(index)
+      this.tags[index].checked = !this.tags[index].checked;
+    },
     userCouponsPage() {
       wx.navigateTo({
         url: '/pages/UserCoupons/index'
diff --git a/pages/Line/index.vue b/pages/Line/index.vue
index bc733e3..db45e06 100644
--- a/pages/Line/index.vue
+++ b/pages/Line/index.vue
@@ -2,8 +2,7 @@
   <view class="body-background"></view>
 	<u-navbar
       :title="title"
-      :auto-back="false"
-      left-icon=""
+      :auto-back="true"
       left-icon-size="40rpx"
       :safe-area-inset-top="true"
       :placeholder="true"
@@ -80,16 +79,18 @@
     </u-row>
   </view>
 	<view :class="{show:(tabCheck === 'lists')}">
-
+    <ListPage v-show="(tabCheck === 'lists')"></ListPage>
 	</view>
 </template>
 
 <script>
   import SubmitPage from "./components/SubmitPage/index.vue";
+  import ListPage from "./components/ListPage/index.vue";
 
 	export default {
 		components: {
-      SubmitPage
+      SubmitPage,
+      ListPage,
 		},
 		data() {
 			return {
diff --git a/pages/Line/user.vue b/pages/Line/user.vue
new file mode 100644
index 0000000..3faa4b7
--- /dev/null
+++ b/pages/Line/user.vue
@@ -0,0 +1,191 @@
+<template>
+  <view class="body-background"></view>
+	<u-navbar
+      :title="title"
+      :auto-back="true"
+      left-icon-size="40rpx"
+      :safe-area-inset-top="true"
+      :placeholder="true"
+      bgColor="#fff"
+  ></u-navbar>
+  <view class="screen-body pad">
+    <u-row>
+      <u-col :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:'0 26rpx'}">
+
+        <view class="screen-container row" >
+          <u-row :custom-style="{width:'100%',display:'flex'}" :gutter="20">
+            <u-col :span="5">
+              <view class="screen-type">
+                <view class="screen-type-button row ">
+                  <view class="button-text">
+                    <u-text text="事件类型" size="28" color="#020B18"></u-text>
+                  </view>
+                  <view class="button-icon">
+                    <u-icon name="arrow-down-fill" size="12"></u-icon>
+                  </view>
+                </view>
+              </view>
+            </u-col>
+            <u-col :span="7">
+              <view class="screen-date col-7">
+                <view class="screen-date-button row col">
+                  <view class="date-text">
+                    <u-text text="2023-08-03" size="28" color="#020B18"></u-text>
+                  </view>
+                  <view class="date-icon">
+                    <u-icon name="calendar" size="32"></u-icon>
+                  </view>
+                </view>
+              </view>
+            </u-col>
+          </u-row>
+          <view class="tabs-group row">
+            <view class="col">
+              <u-tabs
+                  :list="list"
+                  u-sticky
+                  lineWidth="64"
+                  lineHeight="8"
+                  :inactiveStyle="{color:'#AFB5BE'}"
+                  :activeStyle="{color:'#F47210'}"
+                  lineColor="#F47210"
+                  :custom-style="{margin:'auto',justifyContent:'center',width:'100%'}"
+                  :scrollable="false"
+                  @change="tabsChenge"
+              ></u-tabs>
+            </view>
+          </view>
+
+
+        </view>
+      </u-col>
+    </u-row>
+  </view>
+  <ListPage></ListPage>
+</template>
+
+<script>
+  import SubmitPage from "./components/SubmitPage/index.vue";
+  import ListPage from "./components/ListPage/index.vue";
+
+	export default {
+		components: {
+      SubmitPage,
+      ListPage,
+		},
+		data() {
+			return {
+        list: [{
+          name: '全部事件',
+        }, {
+          name: '待结案',
+        }, {
+          name: '已结案',
+        },],
+        tabCheck:'submit',
+				show: false,
+				title: '我的线索',
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			// store.
+      tabsChenge(e){
+        console.log(e)
+        // this.tabCheck = e.id
+      }
+		},
+		onPageScroll(res) {
+
+		},
+		created() {
+
+      },
+		mounted() {
+
+		},
+	}
+</script>
+
+<style lang="scss">
+
+  ::v-deep .u-tabs__wrapper__nav__line{
+    left:24rpx;
+  }
+  .body-background{
+    background:{
+      color:#F5F5F6;
+    }
+  }
+  .screen-type-button{
+   justify-content: space-between;
+    border:2rpx solid #eee;
+    align-items: center;
+    padding:12rpx 24rpx;
+    border-radius: 10rpx;
+    .button-text{
+      //margin-right:50rpx;
+    }
+  }
+  .screen-date-button{
+    justify-content: space-between;
+    border:2rpx solid #eee;
+    align-items: center;
+    padding:12rpx 24rpx;
+    border-radius: 10rpx;
+    .button-date{
+      //margin-right:50rpx;
+    }
+  }
+  .screen-button-group{
+    justify-content: center;
+    .screen-button + .screen-button{
+        margin-left:16rpx;
+    }
+  }
+  .tabs-group{
+    justify-content: center;
+  }
+  .screen-body{
+    transition-duration: .2s;
+    transition-timing-function: ease-in-out;
+    transition-delay: .2s;
+
+    -webkit-transition-duration:.2s;
+    -webkit-transition-timing-function:ease-in-out;
+    -webkit-transition-delay:.2s;
+    padding:16rpx 26rpx;
+    background:{
+      color:transparent;
+    }
+    margin-bottom:20rpx;
+    &.pad{
+      background:{
+        color:#fff;
+      }
+      .screen-container{
+        position: relative;
+        opacity: 1;
+        margin-top:32rpx;
+        margin-bottom:16rpx;
+      }
+    }
+
+  }
+  @keyframes show {
+    0% {
+      display: block;
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .show {
+    animation: show .5s;
+  }
+</style>
\ No newline at end of file
diff --git a/pages/Street/components/index.scss b/pages/Street/components/index.scss
new file mode 100644
index 0000000..f2cb94d
--- /dev/null
+++ b/pages/Street/components/index.scss
@@ -0,0 +1,46 @@
+.body-background{
+  background:{
+    color:#F5F5F6;
+  }
+}
+.new-item {
+  background: {
+    color: #fff;
+  };
+  border-radius: 20rpx;
+  padding: 20rpx 16rpx;
+  margin-bottom: 16rpx;
+
+  .new-thumb {
+    width: 260rpx;
+  }
+
+  .new-icon {
+    width: 64rpx;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right:-12rpx;
+  }
+
+  .new-title {
+    padding:{
+      left:20rpx;
+    }
+    font-size: 28rpx;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #000000;
+    line-height: 42rpx;
+    text-align: justify;
+  }
+  .new-time{
+    margin-top:auto;
+    padding:{
+      left:20rpx;
+    }
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #000000;
+    line-height: 1;
+  }
+}
\ No newline at end of file
diff --git a/pages/Street/index.vue b/pages/Street/index.vue
new file mode 100644
index 0000000..5a45087
--- /dev/null
+++ b/pages/Street/index.vue
@@ -0,0 +1,186 @@
+<template>
+  <view class="body-background"></view>
+  <u-navbar
+      :title="title"
+      :auto-back="true"
+      left-icon-size="40rpx"
+      :safe-area-inset-top="true"
+      :placeholder="true"
+      bgColor="transparent"
+  ></u-navbar>
+  <view class="head-background">
+    <image mode="widthFix" :src="staticImage.bg" class="img" width="100%"/>
+  </view>
+  <view class="subsection" :style="sectionStyle">
+    <MzSubsection
+        :list="list"
+        @change="checkSection"
+        :current="current"
+    ></MzSubsection>
+  </view>
+  <u-row :custom-style="{padding:'0 26rpx'}">
+    <u-col>
+      <u-list
+          @scrolltolower="scrollToLower"
+          :height="(api.navHeight().windowHeight-size.height)+'px'"
+          :custom-style="{marginTop:'20rpx'}"
+      >
+
+        <u-list-item
+            v-for="(item, index) in lists"
+            :key="index"
+        >
+          <view class="new-item row">
+            <view class="new-thumb ">
+              <u-image
+                  :show-loading="true"
+                  :src="item.thumb"
+                  width="260"
+                  height="160"
+                  radius="10"
+                  mode="widthFix"
+                  class="img"
+              ></u-image>
+            </view>
+            <view class="new-content row col border-box">
+              <view class="new-title">
+                <image
+                    v-if="item.is_new"
+                    class="new-icon img"
+                    mode="widthFix"
+                    :src="staticImage.newIcon"
+                />
+                {{item.title}}
+              </view>
+              <view class="new-time">{{ item.time }}</view>
+            </view>
+          </view>
+        </u-list-item>
+      </u-list>
+    </u-col>
+  </u-row>
+</template>
+
+<script>
+import {
+  imghost
+} from '@/config/host.js'
+import MzSubsection from '@/components/MzSubsection/Index.vue';
+import api from '@/utils/functions.js';
+
+export default {
+  components: {
+    MzSubsection
+  },
+  data() {
+    return {
+      list: [{
+        name: '最新资讯'
+      }, {
+        name: '表彰评优'
+      }, {
+        name: '活动回顾'
+      }],
+      // 或者如下，也可以配置keyName参数修改对象键名
+      // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
+      current: 1,
+      title: '资讯列表',
+      loading: true,
+      staticImage: {
+        bg: imghost + '/static/image/BG.png',
+        newIcon: imghost + '/static/image/new-icon.png',
+      },
+      user: {
+        avatar: imghost + '/static/image/banner.png',
+        nickname: '清晨的风',
+        coupons: 221,
+        id: 88685,
+      },
+      isTop: false,
+      lists: [
+        {
+          id: 1,
+          thumb: imghost + '/static/image/new-1.png',
+          title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
+          desc: '需要您带一点猫砂上门，谢谢',
+          time: '2023/06/16',
+          is_new: true
+        }, {
+          id: 2,
+          thumb: imghost + '/static/image/new-2.png',
+          title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
+          desc: '需要您带一点猫砂上门，谢谢',
+          time: '2023/06/16',
+          is_new: true
+        }, {
+          id: 3,
+          thumb: imghost + '/static/image/new-3.png',
+          title: '全市公安机关夏季治安打击整治“彭安行动”111开',
+          desc: '需要您带一点猫砂上门，谢谢',
+          time: '2023/06/16',
+          is_new: false
+        },
+      ],
+      size: {
+        height: 500,
+      }
+    }
+  },
+  onLoad() {
+
+  },
+  computed: {
+    api() {
+      return api
+    },
+    sectionStyle() {
+      const style = {};
+      style.padding = '0 26rpx';
+      style.position = 'sticky';
+      style.zIndex = '9999';
+      style.top = api.navHeight().systemBarHeight + 'px'
+      return style;
+    },
+    listHeight() {
+      let that = this;
+      let height;
+      let info = uni.createSelectorQuery().in(this).select('.subsection');
+      info.boundingClientRect(function (data) {
+        that.size.height = data.height;
+      }).exec(function (res) {
+
+      });
+      // that.size.height = (api.navHeight().windowHeight - height);
+    }
+  },
+  methods: {
+    chatDetail(item) {
+      wx.navigateTo({
+        url: '/pages/ChatDetail/index?id=' + item.id
+      });
+    },
+    checkSection(index) {
+      this.current = index;
+    },
+    scrollToLower() {
+
+    },
+  },
+  onPageScroll(res) {
+    if (res.scrollTop <= 20) {
+      uni.$emit('isTop', true);
+    } else {
+      uni.$emit('isTop', false);
+    }
+  },
+  created() {
+    this.listHeight();
+    // this.pagePadding = (api.navHeight().navPaddingTop +
+    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
+  }
+}
+</script>
+
+<style lang="scss">
+@import './components/index.scss';
+</style>
\ No newline at end of file