网格

src/apps/AppGridManagement/Organization.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="Organization">
+    <div class="select-gird">
+      <img src="./components/img/gird-icon.png" alt="" class="gird-icon">
+      <div>
+        南湖街道网格一
+        <img src="./components/img/down-icon.png" alt="" class="down-icon"> 
+      </div>
+      <span @click="linkTo('./AddGird')">网格配置</span>
+    </div>
+    <div class="title">网格人员</div>
+    <div class="user-content">
+      <img src="./components/img/user-img.png" alt="">
+      <div class="right">
+        <div class="name">侯敬兰</div>
+        <div class="gird">一级网格长</div>
+        <p>南湖街道一级网格</p>
+      </div>
+    </div>
+    <div class="user-content user-item">
+      <img src="./components/img/user-img.png" alt="">
+      <div class="right">
+        <div class="name">侯敬兰 
+          <span class="gird">一级网格长</span>
+          <span class="family-btn" @click="linkTo('./FamilyList')">责任家庭 ></span>
+        </div>
+        <p>南湖街道一级网格</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  onShow() {
+    document.title = '网格管理'
+  },
+  methods: {
+    linkTo(url) {
+      uni.navigateTo({url})
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Organization {
+  height: 100%;
+  padding-top: 32px;
+  .select-gird{
+  width: calc(100% - 60px);
+  padding: 24px 32px;
+  background: #FFFFFF;
+  border-radius: 16px;
+  margin: 0 30px 32px;
+  box-sizing: border-box;
+  img{
+    width: 32px;
+    height: 32px;
+    vertical-align: middle;
+  }
+  div{
+    display: inline-block;
+    width: calc(100% - 144px);
+    padding-left: 20px;
+    box-sizing: border-box;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333;
+    line-height: 48px;
+    img{
+      margin-left: 8px;
+    }
+  }
+  span{
+    display: inline-block;
+    width: 112px;
+    height: 48px;
+    font-size: 28px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #3F8DF5;
+    line-height: 48px;
+  }
+  }
+  .title{
+    font-size: 38px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #333;
+    line-height: 52px;
+    padding-left: 32px;
+    margin-bottom: 32px;
+  }
+  .user-content{
+    width: calc(100% - 64px);
+    margin: 0 0 32px 32px;
+    background-color: #fff;
+    padding: 32px;
+    box-sizing: border-box;
+    display: flex;
+    img{
+      width: 200px;
+      height: 200px;
+      margin-right: 32px;
+    }
+    .right{
+      width: 100%;
+      .name{
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 44px;
+        margin-bottom: 12px;
+      }
+      .gird{
+        display: inline-block;
+        line-height: 44px;
+        background: #E8EFFF;
+        border-radius: 8px;
+        padding: 0 8px;
+        font-size: 26px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #26F;
+        margin-bottom: 12px;
+      }
+      p{
+        font-size: 26px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #666;
+        line-height: 36px;
+      }
+    }
+  }
+  .user-item{
+    img{
+      width: 96px;
+      height: 96px;
+    }
+    .gird{
+      display: inline-block;
+      margin-left: 16px;
+      margin-bottom: 0!important;
+    }
+    .name{
+      margin-bottom: 8px!important;
+    }
+  }
+  .family-btn{
+    font-size: 26px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #3975C6;
+    line-height: 36px;
+    float: right;
+  }
+}
+</style>