随手拍

src/apps/AppHandSnapshot/AppHandSnapshot.vue

@@ -1,232 +1,99 @@
 <template>
   <div class="AppHandSnapshot">
-    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
-
-    <div class="select-top">
-      <AiSelect @data="(v) => (list = v.map((e) => e.value))" :list="list" placeholder="所属网格"></AiSelect>
-
-      <AiSelect @data="(v) => (list = v.map((e) => e.value))" :list="list" placeholder="办件状态"></AiSelect>
-    </div>
-
-    <template v-if="datas.length > 0">
-      <AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
-        <template #custom>
-          <div class="card-top">
-            <div class="titles">世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多</div>
-
-            <div class="types">
-              <span>事件类型</span>
-              <span class="types-right">矛盾纠纷</span>
-            </div>
-
-            <div class="gards">
-              <span>所属网格</span>
-              <span class="gards-right">04号网格</span>
-            </div>
-          </div>
-
-          <div class="status status0">
-            <span class="icon"></span>
-            <span>待处理</span>
-          </div>
-        </template>
-      </AiCard>
-    </template>
-
-    <AiEmpty v-else></AiEmpty>
-    <div class="pad-b120"></div>
-    <div class="tabs">
-      <div class="item">
-        <img src="./components/img/handle-icon-active.png" alt="">
-        <p class="color-3267F0">办理</p>
-      </div>
-      <div class="item" @click="linkTo('./Statistics')">
-        <img src="./components/img/statistics-icon.png" alt="">
-        <p>统计</p>
-      </div>
-      <div class="item">
-        <img src="./components/img/set-icon.png" alt="">
-        <p>配置</p>
+    <component
+      v-if="refresh"
+      :is="component"
+      @change="onChange"
+      :params="params">
+    </component>
+    <div class="tabs" v-if="isTab">
+      <div class="item" @click="tabClick(index, item.component)" v-for="(item, index) in tabs" :key="index">
+        <img :src="tabIndex == index ? item.activeImg : item.img" alt="">
+        <p :class="tabIndex == index ? 'color-3267F0' : ''">{{item.text}}</p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import List from './List.vue'
+import Statistics from './Statistics.vue'
+import Set from './Set.vue'
+
 export default {
-  props: {},
   name: 'AppHandSnapshot',
   appName: '随手拍',
+
   data() {
     return {
-      datas: [],
-      tabList: [
+      component: 'Statistics',
+      params: {},
+      refresh: true,
+      tabIndex: 1,
+      tabs: [
         {
-          name: '全部待办',
+          img: require('./components/img/handle-icon.png'),
+          activeImg: require('./components/img/handle-icon-active.png'),
+          text: '办理',
+          component: 'List'
         },
         {
-          name: '办件历史',
+          img: require('./components/img/statistics-icon.png'),
+          activeImg: require('./components/img/statistics-icon-active.png'),
+          text: '统计',
+          component: 'Statistics'
         },
+        {
+          img: require('./components/img/set-icon.png'),
+          activeImg: require('./components/img/set-icon-active.png'),
+          text: '配置',
+          component: 'Set'
+        }
       ],
-      list: [
-        {
-          value: '1',
-          label: '江',
-        },
-        {
-          value: '2',
-          label: '湖',
-        },
-      ],
-      currentTabs: 0,
-      current: 1,
-      size: 10,
-      pages: 0,
+      isTab: true
     }
   },
-  computed: {
-    loadmore() {
-      return this.pages <= this.current ? 'loading ' : 'nomore'
+
+  components: {
+    List,
+    Statistics,
+    Set
   },
-  },
-  watch: {},
-  onLoad() {
-    this.getList()
-  },
-  onShow() {},
+
   methods: {
-    getList() {
-      this.$http
-        .post('/app/appvisitvondolence/list', null, {
-          params: {
-            size: this.size,
-            current: this.current,
-            createUserId: this.currentTabs == 1 ? this.user.id : '',
+    onChange(e) {
+      this.params = e.params
+      this.component = e.type
     },
+    tabClick(index, component) {
+      this.tabIndex = index
+      this.component = component
+      this.refresh = false
+      this.$nextTick(() => {
+        this.refresh = true
       })
-        .then((res) => {
-          if (res.code == 0) {
-            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
-            this.pages = res.data.pages
     }
+  },
+  onShow() {
+    document.title = "随手拍"
+    uni.$on('hideTab', () => {
+      this.isTab = false
+    })
+    uni.$on('showTab', () => {
+      this.isTab = true
     })
-    },
-
-    goDetail(item) {
-      uni.navigateTo({ url: `./Detail?id=${item.id}` })
-    },
-
-    change(index) {
-      this.currentTabs = index
-      this.getList()
-    },
-    linkTo(url) {
-      uni.navigateTo({url})
-    }
   },
   onReachBottom() {
-    this.current = this.current + 1
-    this.getList()
-  },
+    uni.$emit('nextList')
+  }
 }
 </script>
 
-<style scoped lang="scss">
-uni-page-body {
+<style lang="scss" scoped>
+.AppHandSnapshot{
   height: 100%;
 }
-.AppHandSnapshot {
-  height: 100%;
-  .select-top {
-    background: #fff;
-    display: flex;
-    justify-content: space-around;
-    .AiSelect {
-      margin: 30px 0;
-    }
-  }
-  ::v-deep .AiCard {
-    background: #f3f6f9;
-    padding: 24px 40px 0 32px;
-    .start {
-      background: #fff;
-      border-radius: 16px;
-      .card-top {
-        padding: 32px;
-        .titles {
-          margin-bottom: 34px;
-          font-size: 32px;
-          font-weight: 500;
-          color: #333333;
-          line-height: 1.4;
-          word-break: break-all;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-        }
-        .types,
-        .gards {
-          margin-top: 8px;
-          font-size: 26px;
-          .types-right,
-          .gards-right {
-            margin-left: 32px;
-            color: #333333;
-          }
-        }
-      }
-
-      .status {
-        padding: 32px;
-        border-top: 1px solid #dddddd;
-        .icon {
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          vertical-align: middle;
-          margin-right: 8px;
-        }
-      }
-
-      .status0 {
-        color: #ff883c;
-        .icon {
-          background: #ff883c;
-        }
-      }
-
-      .status1 {
-        color: #1aaaff;
-        .icon {
-          background: #1aaaff;
-        }
-      }
-
-      .status2 {
-        color: #42d784;
-        .icon {
-          background: #42d784;
-        }
-      }
-
-      .status3 {
-        color: #ff4466;
-        .icon {
-          background: #ff4466;
-        }
-      }
-    }
-  }
-  // ::v-deep .AiCard:last-child {
-  //   padding-bottom: 24px;
-  // }
-  .pad-b120{
-    background-color: #f3f6f9;
-    padding-bottom: 120px;
-  }
-  .tabs{
+.tabs{
   width: 100%;
   height: 98px;
   background: #FFF;
@@ -254,6 +121,5 @@ uni-page-body {
       color: #3267F0;
     }
   }
-  }
 }
 </style>

src/apps/AppHandSnapshot/List.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="list">
+    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+
+    <div class="select-top">
+      <AiSelect @data="(v) => (list = v.map((e) => e.value))" :list="list" placeholder="所属网格"></AiSelect>
+
+      <AiSelect @data="(v) => (list = v.map((e) => e.value))" :list="list" placeholder="办件状态"></AiSelect>
+    </div>
+
+    <template v-if="datas.length > 0">
+      <AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
+        <template #custom>
+          <div class="card-top">
+            <div class="titles">世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多</div>
+
+            <div class="types">
+              <span>事件类型</span>
+              <span class="types-right">矛盾纠纷</span>
+            </div>
+
+            <div class="gards">
+              <span>所属网格</span>
+              <span class="gards-right">04号网格</span>
+            </div>
+          </div>
+
+          <div class="status status0">
+            <span class="icon"></span>
+            <span>待处理</span>
+          </div>
+        </template>
+      </AiCard>
+    </template>
+
+    <AiEmpty v-else></AiEmpty>
+    <div class="pad-b120" v-if="datas.length"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  data() {
+    return {
+      datas: [],
+      tabList: [
+        {
+          name: '全部待办',
+        },
+        {
+          name: '办件历史',
+        },
+      ],
+      list: [
+        {
+          value: '1',
+          label: '江',
+        },
+        {
+          value: '2',
+          label: '湖',
+        },
+      ],
+      currentTabs: 0,
+      current: 1,
+      size: 10,
+      pages: 0,
+    }
+  },
+  computed: {
+    loadmore() {
+      return this.pages <= this.current ? 'loading ' : 'nomore'
+    },
+  },
+  mounted() {
+    console.log(12)
+    this.current = 1
+    this.getList()
+    uni.$on('nextList', () => {
+      this.current ++
+      this.getList()
+    })
+  },
+  methods: {
+    getList() {
+      this.$http
+        .post('/app/appvisitvondolence/list', null, {
+          params: {
+            size: 10,
+            current: this.current,
+            createUserId: this.currentTabs == 1 ? this.user.id : '',
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            this.pages = res.data.pages
+          }
+        })
+    },
+
+    goDetail(item) {
+      uni.navigateTo({ url: `./Detail?id=${item.id}` })
+    },
+
+    change(index) {
+      this.currentTabs = index
+      this.getList()
+    },
+    linkTo(url) {
+      uni.navigateTo({url})
+    }
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+uni-page-body {
+  height: 100%;
+}
+.list {
+  height: 100%;
+  .select-top {
+    background: #fff;
+    display: flex;
+    justify-content: space-around;
+    .AiSelect {
+      margin: 30px 0;
+    }
+  }
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    padding: 24px 40px 0 32px;
+    .start {
+      background: #fff;
+      border-radius: 16px;
+      .card-top {
+        padding: 32px;
+        .titles {
+          margin-bottom: 34px;
+          font-size: 32px;
+          font-weight: 500;
+          color: #333333;
+          line-height: 1.4;
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        .types,
+        .gards {
+          margin-top: 8px;
+          font-size: 26px;
+          .types-right,
+          .gards-right {
+            margin-left: 32px;
+            color: #333333;
+          }
+        }
+      }
+
+      .status {
+        padding: 32px;
+        border-top: 1px solid #dddddd;
+        .icon {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          vertical-align: middle;
+          margin-right: 8px;
+        }
+      }
+
+      .status0 {
+        color: #ff883c;
+        .icon {
+          background: #ff883c;
+        }
+      }
+
+      .status1 {
+        color: #1aaaff;
+        .icon {
+          background: #1aaaff;
+        }
+      }
+
+      .status2 {
+        color: #42d784;
+        .icon {
+          background: #42d784;
+        }
+      }
+
+      .status3 {
+        color: #ff4466;
+        .icon {
+          background: #ff4466;
+        }
+      }
+    }
+  }
+  // ::v-deep .AiCard:last-child {
+  //   padding-bottom: 24px;
+  // }
+  .pad-b120{
+    background-color: #f3f6f9;
+    padding-bottom: 120px;
+  }
+}
+</style>

src/apps/AppHandSnapshot/PercentageDetail.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="PercentageDetail">
+    <div class="header">
+      <div class="left">
+        <h2>小区管理</h2>
+        <p>共21条，已办结18条</p>
+      </div>
+      <div class="right">
+        <h4>86%</h4>
+        <p>办结率</p>
+      </div>
+    </div>
+    <div class="info-content">
+      <div class="title">分类统计</div>
+      <div class="percentage">
+        <div class="item">
+          <div class="mini-title">小区管理</div>
+          <div class="info">
+            <div class="line-bg"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
+          </div>
+        </div>
+        <div class="item">
+          <div class="mini-title">小区管理</div>
+          <div class="info">
+            <div class="line-bg" style="width:50%;"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
+          </div>
+        </div>
+        <div class="item">
+          <div class="mini-title">小区管理</div>
+          <div class="info">
+            <div class="line-bg" style="width:40%;"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  data() {
+    return {
+      contents: [
+        {
+          label: '待受理',
+          num: 5
+        },
+        {
+          label: '办理中',
+          num: 5
+        },
+        {
+          label: '今日上报',
+          num: 5
+        },
+        {
+          label: '今日办结',
+          num: 5
+        }
+      ]
+    }
+  },
+  onLoad() {
+    
+  },
+  onShow() {},
+  methods: {
+    getList() {
+      this.$http
+        .post('/app/appvisitvondolence/list', null, {
+          params: {
+            size: this.size,
+            current: this.current,
+            createUserId: this.currentTabs == 1 ? this.user.id : '',
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            this.pages = res.data.pages
+          }
+        })
+    },
+
+    goDetail(item) {
+      uni.navigateTo({ url: `./Detail?id=${item.id}` })
+    },
+
+    change(index) {
+      this.currentTabs = index
+      this.getList()
+    },
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.PercentageDetail {
+  background-color: #F3F7F8;
+  padding: 32px 30px 0;
+  .header{
+    width: 100%;
+    background: #FFF;
+    border-radius: 16px;
+    margin-bottom: 30px;
+    display: flex;
+    padding: 32px 32px 38px 24px;
+    box-sizing: border-box;
+    .left{
+      width: calc(100% - 112px);
+      h2{
+        font-size: 42px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333;
+        line-height: 48px;
+        margin-bottom: 16px;
+      }
+      p{
+        font-size: 30px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #999;
+        line-height: 42px;
+      }
+    }
+    .right{
+      width: 112px;
+      background: #E6FFF1;
+      border-radius: 8px;
+      text-align: center;
+      color: #42D784;
+      h4{
+        font-size: 36px;
+        font-family: DINAlternate-Bold, DINAlternate;
+        font-weight: bold;
+        line-height: 42px;
+        padding: 8px 0 4px 0;
+      }
+      p{
+        font-size: 24px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        line-height: 34px;
+      }
+    }
+  }
+  .info-content{
+    width: 100%;
+    background: #FFF;
+    border-radius: 16px;
+    margin-bottom: 24px;
+    .title{
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333;
+      line-height: 48px;
+      padding: 24px 16px 24px 24px;
+      img{
+        float: right;
+        width: 40px;
+        height: 40px;
+      }
+    }
+    .percentage{
+      padding: 16px 0 0 26px;
+      .item{
+        width: 100%;
+        padding-bottom: 32px;
+        .mini-title{
+          font-size: 30px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 48px;
+          margin-bottom: 14px;
+        }
+        .info{
+          width: 100%;
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #999;
+          line-height: 48px;
+          .line-bg{
+            display: inline-block;
+            width: 63%;
+            height: 14px;
+            background: #D7D8D9;
+            border-radius: 8px;
+            margin-right: 12px;
+            .active-bg{
+              width: 80%;
+              height: 100%;
+              background: #257FF1;
+              border-radius: 8px;
+            }
+          }
+          img{
+            width: 32px;
+            height: 32px;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/apps/AppHandSnapshot/Set.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="set">
+    <div class="info-content" @click="toSetList">
+      <img src="./components/img/setting-icon.png" alt="" class="set-icon">
+      <div class="info">
+        <h2>配置事件类别</h2>
+        <p>提交上报时选择事件类别，有助于管理上报和统计分析</p>
+      </div>
+      <img src="./components/img/right-icon.png" alt="" class="right-icon">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    toSetList() {
+      uni.navigateTo({url: './SetList'})
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+uni-page-body {
+  height: 100%;
+}
+.set {
+  height: 100%;
+  padding: 32px 30px 0;
+  box-sizing: border-box;
+  background-color: #F3F7F8;
+  .info-content{
+    width: 100%;
+    background-color: #fff;
+    padding: 40px 8px 34px 40px;
+    box-sizing: border-box;
+    display: flex;
+    .set-icon{
+      width: 40px;
+      height: 40px;
+      margin-right: 44px;
+    }
+    .info{
+      display: inline-block;
+      width: calc(100% - 216px);
+      h2{
+        font-size: 36px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 48px;
+        margin-bottom: 6px;
+      }
+      p{
+        width: 100%;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #999;
+        line-height: 40px;
+        word-break: break-all;
+      }
+    }
+    .right-icon{
+      width: 56px;
+      height: 56px;
+      margin-left: 76px;
+    }
+  }
+}
+</style>

src/apps/AppHandSnapshot/SetList.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="SetList">
+    <div class="header">
+      <div class="title">事件类别</div>
+      <p>成员上报时需要选择事件类别，上报会按照分类进行统计。</p>
+    </div>
+    <div class="set-list">
+      <div class="item">
+        <div class="title">小区管理</div>
+        <div class="tips-list">
+          <span class="tips">公共部位设置地桩锁</span>
+          <span class="tips">公共部位桩锁</span>
+          <span class="tips">地桩锁</span>
+          <span class="tips">公共部位设置地桩锁</span>
+          <span class="tips">公共部位桩锁</span>
+          <span class="tips">地桩锁</span>
+          <span class="tips">公共部位设置地桩锁</span>
+          <span class="tips">公共部位桩锁</span>
+          <span class="tips">地桩锁</span>
+        </div>
+        <img src="./components/img/right-icon.png" alt="">
+      </div>
+    </div>
+    <div class="btn">新建分类</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SetList',
+  components: {},
+  props: {
+    dict: Object,
+    instance: Function,
+    params: Object,
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.SetList {
+  height: 100%;
+  background-color: #fff;
+  .header{
+    padding: 40px 30px 74px;
+    .title{
+      font-size: 42px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #333;
+      line-height: 48px;
+      margin-bottom: 16px;
+    }
+    p{
+      width: 100%;
+      font-size: 30px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 42px;
+      word-break: break-all;
+    }
+  }
+  .set-list{
+    padding: 0 28px 120px;
+    .item{
+      width: 100%;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #E9EAEB;
+      position: relative;
+      .title{
+        font-size: 34px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 48px;
+        margin-bottom: 22px;
+      }
+      .tips-list{
+        width: calc(100% - 68px);
+      }
+      .tips{
+        display: inline-block;
+        line-height: 64px;
+        background: #F7F8F9;
+        border-radius: 8px;
+        padding: 0 20px;
+        font-size: 30px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #999;
+        margin: 0 16px 24px 0;
+      }
+      img{
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        top: 50%;
+        right: 20px;
+      }
+    }
+  }
+  .btn{
+    width: 100%;
+    line-height: 112px;
+    background: #3975C6;
+    box-shadow: inset 0px 1px 0px 0px #EEEEEE;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+  }
+}
+</style>

src/apps/AppHandSnapshot/Statistics.vue

@@ -1,21 +1,85 @@
 <template>
-  <div class="Statistics">
-   
+  <div class="statistics">
+    <div class="gird-select">
+      <img src="./components/img/gird-icon.png" alt="">
+      <span>全部网格</span>
+      <img src="./components/img/down-icon.png" alt="">
+    </div>
+    <div class="info-content">
+      <div class="title">今日概况</div>
+      <div class="el-row">
+        <div class="item" v-for="(item, index) in contents" :key="index">
+          <h2>{{item.num}}</h2>
+          <p>{{item.label}}</p>
+        </div>
+      </div>
+    </div>
+    <div class="info-content">
+      <div class="title">业务透视</div>
+      <div class="business">
+        <div class="left">
+          <div class="item">
+            <p>受理率</p>
+            <h2>83.3%</h2>
+          </div>
+          <div class="item">
+            <p>办结率</p>
+            <h2>83.3%</h2>
+          </div>
+        </div>
+        <div class="right">
+          <div class="img">
+            <img src="./components/img/line-img.png" alt="">
+            <img src="./components/img/line-img.png" alt="">
+          </div>
+          <div class="num">
+            <div class="item bg1">
+              <h2>累计反馈</h2>
+              <p>30</p>
+            </div>
+            <div class="item bg2">
+              <h2>累计受理</h2>
+              <p>30</p>
+            </div>
+            <div class="item bg3">
+              <h2>累计办理</h2>
+              <p>30</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="info-content">
+      <div class="title" @click="toPercentageDetail">分类统计
+        <img src="./components/img/right-icon.png" alt="">
+      </div>
+      <div class="percentage">
+        <div class="item">
+          <div class="mini-title">小区管理</div>
+          <div class="info">
+            <div class="line-bg"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
+          </div>
+        </div>
+        <div class="item">
+          <div class="mini-title">小区管理</div>
+          <div class="info">
+            <div class="line-bg" style="width:50%;"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
+          </div>
+        </div>
+        <div class="item">
+          <div class="mini-title">小区管理</div>
+          <div class="info">
+            <div class="line-bg" style="width:40%;"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="info-content">
+      <div class="title">成员明细
+        <img src="./components/img/right-icon.png" alt="">
+      </div>
+    </div>
     <div class="pad-b120"></div>
-    <div class="tabs">
-      <div class="item">
-        <img src="./components/img/handle-icon.png" alt="">
-        <p>办理</p>
-      </div>
-      <div class="item">
-        <img src="./components/img/statistics-icon-active.png" alt="">
-        <p class="color-3267F0">统计</p>
-      </div>
-      <div class="item">
-        <img src="./components/img/set-icon.png" alt="">
-        <p>配置</p>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -24,7 +88,24 @@ export default {
   props: {},
   data() {
     return {
-
+      contents: [
+        {
+          label: '待受理',
+          num: 5
+        },
+        {
+          label: '办理中',
+          num: 5
+        },
+        {
+          label: '今日上报',
+          num: 5
+        },
+        {
+          label: '今日办结',
+          num: 5
+        }
+      ]
     }
   },
   onLoad() {
@@ -57,53 +138,198 @@ export default {
       this.currentTabs = index
       this.getList()
     },
-  },
-  onReachBottom() {
-    this.current = this.current + 1
-    this.getList()
+
+    toPercentageDetail() {
+      uni.navigateTo({url: './PercentageDetail'})
+    }
   },
 }
 </script>
 
 <style scoped lang="scss">
-uni-page-body {
-  height: 100%;
-}
-.Statistics {
-  height: 100%;
-
-  .pad-b120{
-    background-color: #f3f6f9;
-    padding-bottom: 120px;
-  }
-  .tabs{
+.statistics {
+  background-color: #F3F7F8;
+  padding: 30px 30px 0;
+  .gird-select{
     width: 100%;
-    height: 98px;
     background: #FFF;
-    border-top: 1px solid #ddd;
-    position: fixed;
-    bottom: 0;
-    left: 0;
+    border-radius: 16px;
+    margin: 0 0 24px;
+    text-align: center;
+    padding: 24px 0;
+    img{
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+    }
+    span{
+      display: inline-block;
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333;
+      line-height: 48px;
+      margin: 0 10px;
+    }
+  }
+  .info-content{
+    width: 100%;
+    background: #FFF;
+    border-radius: 16px;
+    margin-bottom: 24px;
+    .title{
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333;
+      line-height: 48px;
+      padding: 24px 16px 24px 24px;
+      img{
+        float: right;
+        width: 40px;
+        height: 40px;
+      }
+    }
+    .el-row{
       display: flex;
+      padding: 32px 0 60px 0;
       .item{
         flex: 1;
         text-align: center;
-      img{
-        width: 56px;
-        height: 56px;
-        margin-top: 8px;
+        h2{
+          font-size: 64px;
+          font-family: DINAlternate-Bold, DINAlternate;
+          font-weight: bold;
+          color: #3B424A;
+          line-height: 64px;
+          margin-bottom: 8px;
         }
         p{
-        font-size: 22px;
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #999;
+          line-height: 40px;
+        }
+      }
+    }
+    .business{
+      display: flex;
+      padding: 40px 0 30px 0;
+      .left{
+        width: 240px;
+        padding: 20px 0 78px 64px;
+        .item{
+          margin-bottom: 58px;
+        }
+        h2{
+          font-size: 58px;
+          font-family: DINAlternate-Bold, DINAlternate;
+          font-weight: bold;
+          color: #3B424A;
+          line-height: 64px;
+        }
+        p{
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #666;
+          line-height: 48px;
+        }
+      }
+      .right{
+        width: calc(100% - 240px);
+        display: flex;
+        .img{
+          width: 140px;
+          margin-top: 42px;
+          img{
+            width: 140px;
+            height: 144px;
+            margin-bottom: 20px;
+          }
+        }
+        .num{
+          width: calc(100% - 140px);
+          text-align: center;
+          .item{
+            height: 130px;
+            border-radius: 6px;
+            background-size: 100% 100%;
+            margin-bottom: 4px;
+            color: #2F7EE5;
+            h2{
+              font-size: 26px;
               font-family: PingFangSC-Medium, PingFang SC;
               font-weight: 500;
-        color: #C4CAD4;
-        line-height: 8px;
+              line-height: 48px;
+              padding-top: 20px;
             }
-      .color-3267F0{
-        color: #3267F0;
+            p{
+              font-size: 40px;
+              font-family: DINAlternate-Bold, DINAlternate;
+              font-weight: bold;
             }
           }
+          .bg1{
+            width: 304px;
+            background-image: url('./components/img/bg-1.png');
+          }
+          .bg2{
+            width: 266px;
+            background-image: url('./components/img/bg-2.png');
+            margin-left: 16px;
+          }
+          .bg3{
+            width: 240px;
+            background-image: url('./components/img/bg-3.png');
+            margin-left: 32px;
+          }
+        }
+      }
+    }
+    .percentage{
+      padding: 16px 0 0 26px;
+      .item{
+        width: 100%;
+        padding-bottom: 32px;
+        .mini-title{
+          font-size: 30px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 48px;
+          margin-bottom: 14px;
+        }
+        .info{
+          width: 100%;
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #999;
+          line-height: 48px;
+          .line-bg{
+            display: inline-block;
+            width: 63%;
+            height: 14px;
+            background: #D7D8D9;
+            border-radius: 8px;
+            margin-right: 12px;
+            .active-bg{
+              width: 80%;
+              height: 100%;
+              background: #257FF1;
+              border-radius: 8px;
+            }
+          }
+          img{
+            width: 32px;
+            height: 32px;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+  }
+  .pad-b120{
+    background-color: #F3F7F8;
+    padding-bottom: 120px;
   }
 }
 </style>