diff --git a/src/project/saas/AppResidentDocument/DetailCard.vue b/src/project/saas/AppResidentDocument/DetailCard.vue
index 5c9e230d..4cbc3b09 100644
--- a/src/project/saas/AppResidentDocument/DetailCard.vue
+++ b/src/project/saas/AppResidentDocument/DetailCard.vue
@@ -1,49 +1,135 @@
 <template>
   <div class="DetailCard" v-if="pageShow">
-    <div class="top"></div>
-    <div class="middle">
-      <div class="hint">家庭地址</div>
-      <div class="areaHint">
-        <u-icon name="map-fill" color="#73ABFF"></u-icon>
-        <span style="margin-left: 14px;">{{resident.currentAreaName}}</span>
-        <span v-if="resident.currentAddress">{{resident.currentAddress}}</span>
+    <div class="top">
+      <image src="./components/img/4.png" />
+      <div class="top-right">
+        <div class="top-right__top">
+          <div class="left">
+            <h2>卓作旺</h2>
+            <i>已注销</i>
+          </div>
+          <span>户主</span>
+        </div>
+        <div class="top-right__bottom">
+          <span>退役军人</span>
+          <span>退役军人</span>
+          <span>退役军人</span>
+          <span>退役军人</span>
+          <span>退役军人</span>
+          <span>退役军人</span>
+          <span>退役军人</span>
+        </div>
       </div>
     </div>
-    <div class="bottom">
-      <div class="hints">家庭成员 {{ data.family && data.family.length }}人</div>
-
-      <div v-if="data.family && data.family.length > 0">
-        <div class="card" v-for="(item, i) in data.family" :key="i" @click="toDetailPeople(item)">
-          <div class="photos">
-            <img :src="item.photo" alt="" v-if="item.photo" />
-            <img src="./components/img/44.png" alt="" v-else />
-          </div>
-
-          <div class="right">
-            <div class="rightTop">
-              <div class="rightTop-lefts">
-                <span class="names">{{ item.name }}</span>
-                <span class="fileStatuss" v-if="item.fileStatus == 1">已注销</span>
-                <span class="householdNames" v-if="item.householdName == 1">户主</span>
-                <span class="householdNames" v-else>
-                  {{ $dict.getLabel('householdRelation', item.householdRelation) }}
-                </span>
-              </div>
-
-              <div class="rightTop-rights">
-                <u-section :show-line="false" sub-title="详情"></u-section>
-              </div>
+    <div class="body">
+      <div class="tab">
+        <span @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">基本信息</span>
+        <span @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">家庭成员信息</span>
+      </div>
+      <div class="info" v-show="currIndex === 0">
+        <div class="info-group">
+          <h2>个人基本信息</h2>
+          <div class="info-wrapper">
+            <div class="item">
+              <span>籍贯</span>
+              <i>{{ data.resident && data.resident.birthplaceAreaName }}</i>
             </div>
-
-            <div class="rightBottom">
-              <span>身份证号：</span>
-              <span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</span>
+            <div class="item">
+              <span>身份证号</span>
+              <i>{{ data.resident && data.resident.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</i>
+            </div>
+            <div class="item">
+              <span>民族</span>
+              <i v-if="data.resident && data.resident.nation"> {{ $dict.getLabel('nation', data.resident.nation) }}</i>
+            </div>
+            <div class="item">
+              <span>文化程度</span>
+              <i v-if="data.resident && data.resident.education">{{ $dict.getLabel('education', data.resident.education) }}</i>
+            </div>
+            <div class="item">
+              <span>婚姻状况</span>
+              <i v-if="data.resident && data.resident.maritalStatus">{{ $dict.getLabel('maritalStatus', data.resident.maritalStatus) }}</i>
+            </div>
+            <div class="item">
+              <span>政治面貌</span>
+              <i v-if="data.resident && data.resident.politicsStatus">{{ $dict.getLabel('politicsStatus', data.resident.politicsStatus) }}</i>
+            </div>
+            <div class="item">
+              <span>兵役状况</span>
+              <i v-if="data.resident && data.resident.militaryStatus">{{ $dict.getLabel('militaryStatus', data.resident.militaryStatus) }}</i>
+            </div>
+            <div class="item">
+              <span>宗教信仰</span>
+              <i v-if="data.resident && data.resident.faithType">{{ $dict.getLabel('faithType', data.resident.faithType) }}</i>
+            </div>
+            <div class="item">
+              <span>职业</span>
+              <i v-if="data.resident && data.resident.job">{{ $dict.getLabel('job', data.resident.job) }}</i>
+            </div>
+          </div>
+        </div>
+        <div class="info-group">
+          <h2>联络信息</h2>
+          <div class="info-wrapper">
+            <div class="item">
+              <span>联系方式</span>
+              <i class="phones" v-if="data.resident && data.resident.phone" @click="callPhone(data.resident.phone)">{{ data.resident.phone }}</i>
+            </div>
+            <div class="item">
+              <span>现住址</span>
+              <i v-if="data.resident && data.resident.currentAreaName">{{ data.resident.currentAreaName }}</i>
+            </div>
+            <div class="item">
+              <span>现住详细地址</span>
+              <i v-if="data.resident && data.resident.currentAddress">{{ data.resident.currentAddress }}</i>
+            </div>
+            <div class="item">
+              <span>户籍地址</span>
+              <i v-if="data.resident && data.resident.householdAreaName">{{ data.resident.householdAreaName }}</i>
+            </div>
+            <div class="item">
+              <span>户籍详细地址</span>
+              <i v-if="data.resident && data.resident.householdAddress">{{ data.resident.householdAddress }}</i>
             </div>
           </div>
         </div>
       </div>
+      <div class="bottom" v-show="currIndex === 1">
+        <div class="hints">家庭成员({{ data.family && data.family.length }}人)</div>
 
-      <AiEmpty v-else></AiEmpty>
+        <div v-if="data.family && data.family.length > 0">
+          <div class="card" v-for="(item, i) in data.family" :key="i" @click="toDetailPeople(item)">
+            <div class="photos">
+              <img :src="item.photo" alt="" v-if="item.photo" />
+              <img src="./components/img/44.png" alt="" v-else />
+            </div>
+
+            <div class="right">
+              <div class="rightTop">
+                <div class="rightTop-lefts">
+                  <span class="names">{{ item.name }}</span>
+                  <span class="fileStatuss" v-if="item.fileStatus == 1">已注销</span>
+                  <span class="householdNames" v-if="item.householdName == 1">户主</span>
+                  <span class="householdNames" v-else>
+                    {{ $dict.getLabel('householdRelation', item.householdRelation) }}
+                  </span>
+                </div>
+
+                <div class="rightTop-rights">
+                  <u-section :show-line="false" sub-title="详情"></u-section>
+                </div>
+              </div>
+
+              <div class="rightBottom">
+                <span>身份证号：</span>
+                <span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <AiEmpty v-else></AiEmpty>
+      </div>
     </div>
   </div>
 </template>
@@ -59,6 +145,7 @@
         id: '',
         data: [],
         resident: {},
+        currIndex: 0,
         pageShow: false
       }
     },
@@ -98,35 +185,169 @@
 
 <style scoped lang="scss">
 .DetailCard {
-  height: 100%;
-  .top {
-    height: 112px;
-    background: #3975c6;
+  * {
+    box-sizing: border-box;
   }
 
-  .middle {
-    margin: -80px 32px 0 32px;
-    padding: 38px 30px 78px 28px;
-    background: #ffffff;
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
-    border-radius: 16px;
-    z-index: 999;
-    .hint {
-      font-size: 32px;
-      font-weight: 500;
-      color: #333333;
+  .top {
+    display: flex;
+    align-items: center;
+    padding: 48px 32px 32px;
+    background: #fff;
+
+    & > image {
+      width: 112px;
+      height: 112px;
+      margin-right: 24px;
+      border-radius: 50%;
     }
-    .areaHint {
-      margin-top: 38px;
+
+    .top-right {
+      flex: 1;
+
+      .top-right__bottom {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        color: #999999;
+        font-size: 28px;
+
+        span {
+          line-height: 1.4;
+          margin-right: 16px;
+        }
+      }
+
+      .top-right__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 16px;
+
+        & > span {
+          color: #5AAD6A;
+          font-size: 32px;
+        }
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          h2 {
+            margin-right: 16px;
+            color: #333;
+            font-size: 36px;
+            font-weight: 700;
+          }
+
+          i {
+            width: 88px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            background: #FFECEF;
+            border-radius: 8px;
+            color: #FF4466;
+            font-size: 24px;
+            font-style: normal;
+          }
+        }
+      }
+    }
+  }
+
+  .body {
+    .tab {
+      display: flex;
+      align-items: center;
+      height: 96px;
+      padding: 0 32px;
+      border-bottom: 1px solid #D4D4D4;
+      background: #fff;
+
+      span {
+        position: relative;
+        flex: 1;
+        height: 100%;
+        line-height: 96px;
+        color: #000;
+        font-size: 32px;
+        text-align: center;
+
+        &.active {
+          color: #1365DD;
+
+          &:after {
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            z-index: 1;
+            width: 192px;
+            height: 6px;
+            background: #1365DD;
+            content: ' ';
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+
+    .info {
+      .info-group {
+        margin-bottom: 4px;
+        padding: 0 32px;
+        background: #FFFFFF;
+
+        &:first-child {
+          margin-bottom: 4px;
+        }
+
+        & > h2 {
+          height: 108px;
+          line-height: 108px;
+          font-weight: 700;
+          font-size: 32px;
+          color: #333333;
+        }
+
+        .item {
+          display: flex;
+          line-height: 1.3;
+          padding: 14px 0;
+          font-size: 32px;
+
+          .phones {
+            color: #3d94fb;
+          }
+
+          span {
+            width: 190px;
+            flex-shrink: 1;
+            color: #999;
+          }
+
+          i {
+            flex: 1;
+            margin-left: 16px;
+            text-align: right;
+            color: #333;
+            font-style: normal;
+          }
+        }
+      }
     }
   }
 
   .bottom {
-    margin: 32px 30px 48px 30px;
     background: #fff;
-    padding: 38px 30px 30px 30px;
+    padding: 0 60px 32px;
     .hints {
-      margin-bottom: 38px;
+      height: 108px;
+      line-height: 108px;
+      margin-bottom: 32px;
+      font-weight: 700;
+      font-size: 32px;
+      color: #333333;
     }
     .card {
       display: flex;
diff --git a/src/project/saas/AppResidentDocument/DetailPeople.vue b/src/project/saas/AppResidentDocument/DetailPeople.vue
index ef603f10..6724f8c3 100644
--- a/src/project/saas/AppResidentDocument/DetailPeople.vue
+++ b/src/project/saas/AppResidentDocument/DetailPeople.vue
@@ -1,6 +1,27 @@
 <template>
   <div class="DetailPeople" v-if="pageShow">
     <div class="top">
+      <image src="./components/img/4.png" />
+      <div class="top-right">
+        <div class="top-right__top">
+          <div class="left">
+            <h2>卓作旺</h2>
+            <i>已注销</i>
+          </div>
+          <span>户主</span>
+        </div>
+        <div class="top-right__bottom">
+          <span>退役军人</span>
+          <span>退役军人</span>
+          <span>退役军人</span>
+          <span>退役军人</span>
+          <span>退役军人</span>
+          <span>退役军人</span>
+          <span>退役军人</span>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="top">
       <div class="photos">
         <img :src="data.resident.photo" alt="" v-if="data.resident && data.resident.photo" />
         <img src="./components/img/44.png" alt="" v-else />
@@ -17,7 +38,7 @@
 
         <div class="rightBottom" v-if="data.resident && data.resident.phone">{{ data.resident.phone }}</div>
       </div>
-    </div>
+    </div> -->
     <div class="line"></div>
     <div class="middle">
       <div class="hint">个人基本信息</div>
@@ -134,48 +155,67 @@
   background: #fff;
   .top {
     display: flex;
-    padding: 48px 32px 32px 32px;
-    .photos {
-      img {
-        width: 112px;
-        height: 112px;
-        border-radius: 50%;
-      }
+    align-items: center;
+    padding: 48px 32px 32px;
+    background: #fff;
+
+    & > image {
+      width: 112px;
+      height: 112px;
+      margin-right: 24px;
+      border-radius: 50%;
     }
-    .right {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      margin-left: 24px;
-      .rightTop {
+
+    .top-right {
+      flex: 1;
+
+      .top-right__bottom {
         display: flex;
-        justify-content: space-between;
-        .fileStatuss {
-          display: inline-block;
-          margin-left: 30px;
-          color: #ff4466;
-          background: #ffecef;
-          border-radius: 8px;
-          width: 120px;
-          height: 40px;
-          line-height: 40px;
-          text-align: center;
-          font-weight: 400;
-          font-size: 28px;
-        }
-        .names {
-          font-size: 32px;
-          font-weight: 600;
-        }
-        .householdNames {
-          margin-left: 30px;
-          font-size: 26px;
-          font-weight: 500;
-          color: #5aad6a;
+        align-items: center;
+        flex-wrap: wrap;
+        color: #999999;
+        font-size: 28px;
+
+        span {
+          line-height: 1.4;
+          margin-right: 16px;
         }
       }
-      .rightBottom {
-        margin-top: 16px;
+
+      .top-right__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 16px;
+
+        & > span {
+          color: #5AAD6A;
+          font-size: 32px;
+        }
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          h2 {
+            margin-right: 16px;
+            color: #333;
+            font-size: 36px;
+            font-weight: 700;
+          }
+
+          i {
+            width: 88px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            background: #FFECEF;
+            border-radius: 8px;
+            color: #FF4466;
+            font-size: 24px;
+            font-style: normal;
+          }
+        }
       }
     }
   }
@@ -190,30 +230,38 @@
     padding: 0 32px;
 
     .hint {
-      padding: 32px 0;
+      height: 108px;
+      line-height: 108px;
+      font-weight: 700;
+      font-size: 32px;
+      color: #333333;
     }
 
     .contents {
-      .item {
-        display: flex;
-        justify-content: space-between;
-        padding: 14px 0;
+        .item {
+          display: flex;
+          line-height: 1.3;
+          padding: 14px 0;
+          font-size: 32px;
 
-        .phones {
-          color: #3d94fb;
-        }
+          .phones {
+            color: #3d94fb;
+          }
 
-        span {
-          width: 180px;
-          margin-right: 20rpx;
-        }
+          span {
+            width: 190px;
+            flex-shrink: 1;
+            color: #999;
+          }
 
-        i {
-          flex: 1;
-          text-align: right;
-          font-style: normal;
+          i {
+            flex: 1;
+            margin-left: 16px;
+            text-align: right;
+            color: #333;
+            font-style: normal;
+          }
         }
-      }
     }
   }
 
diff --git a/src/project/saas/AppSpecialGroups/Add.vue b/src/project/saas/AppSpecialGroups/Add.vue
new file mode 100644
index 00000000..b53b1212
--- /dev/null
+++ b/src/project/saas/AppSpecialGroups/Add.vue
@@ -0,0 +1,624 @@
+<template>
+  <div class="Add">
+    <div class="pad-l32">
+      <div class="item">
+        <span class="label"><span class="tips">*</span>类型</span>
+        <div class="value" @click="selectClick('appSpecialTypeFive', 'userType')">
+          <span
+              :class="form.userType === '' ? 'color-999' : ''">{{
+              $dict.getLabel('appSpecialTypeFive', form.userType) || '请选择'
+            }}</span>
+          <u-icon name="arrow-right" color="#cccccc" size="24"/>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label"><span class="tips">*</span>姓名</span>
+        <div class="value">
+
+          <u-input type="text" placeholder="请输入" v-model="form.name" input-align="right"
+                   placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="15" :clearable="false"/>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label"><span class="tips">*</span>身份证号</span>
+        <div class="value">
+          <u-input type="text" placeholder="请输入" v-model="form.idNumber" input-align="right"
+                   placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="18" :clearable="false"
+                   @input="changeIdNumber"/>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label"><span class="tips">*</span>性别</span>
+        <div class="value">
+          <u-input disabled placeholder="自动填充" v-model="form.gender" input-align="right"
+                   placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="15" :clearable="false"/>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label"><span class="tips">*</span>出生日期</span>
+        <div class="value">
+          <u-input type="text" disabled placeholder="自动填充" v-model="form.birth" input-align="right"
+                   placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="19" :clearable="false"/>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label"><span class="tips">*</span>联系电话</span>
+        <div class="value">
+          <u-input type="number" placeholder="请输入" v-model="form.phone" input-align="right"
+                   placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="11" :clearable="false"/>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label"><span class="tips">*</span>所属区域</span>
+        <div class="value">
+          <AiAreaPicker v-model="form.areaId" @select="areaSelect" :fullName.sync="form.areaName" mode="custom" all>
+            <span class="label font" v-if="form.areaName" style="font-size: 16px">{{ form.areaName }}</span>
+            <span v-else :class="form.areaName === '' ? 'color-999' : ''">请选择</span>
+            <u-icon name="arrow-right" color="#cccccc" size="24" style="margin-left:4px;"/>
+          </AiAreaPicker>
+        </div>
+      </div>
+      <div class="address">
+        <span class="label"><span class="tips"></span>详细地址</span>
+        <div class="value">
+          <u-input type="textarea" placeholder="请输入" v-model="form.address"
+                   placeholder-style="color:#999;font-size:16px;" :maxlength="20" auto-height/>
+        </div>
+      </div>
+
+      <div class="item">
+        <span class="label"><span class="tips"></span>所属网格</span>
+        <div class="value">
+          <AiPagePicker type="custom" v-model="form.girdId" @select="handleSelectGrid"
+                        :ops="{url:'../AppGridManagement/SelectGird',label: 'girdName'}">
+            <AiMore v-model="form.girdName"/>
+          </AiPagePicker>
+        </div>
+      </div>
+      <div v-if="this.form.userType != ''">
+        <div v-for="(item, index) in tableData[this.form.userType].list" :key="index">
+
+          <div class="item" v-if="item.type == 'input'">
+            <span class="label"><span class="tips"></span>{{ item.label }}</span>
+            <div class="value">
+              <u-input type="text" placeholder="请输入" v-model="form[item.formDbName]" input-align="right"
+                       placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="item.maxlength"
+                       :clearable="false"/>
+            </div>
+          </div>
+
+          <div class="item" v-if="item.type == 'number'">
+            <span class="label"><span class="tips"></span>{{ item.label }}</span>
+            <div class="value">
+              <u-input type="number" placeholder="请输入" v-model="form[item.formDbName]" input-align="right"
+                       placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="item.maxlength"
+                       :clearable="false"/>
+            </div>
+          </div>
+
+          <div class="item" v-if="item.type == 'money'">
+            <span class="label"><span class="tips"></span>{{ item.label }}</span>
+            <div class="value">
+              <u-input type="number" placeholder="请输入" v-model="form[item.formDbName]" input-align="right"
+                       placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="item.maxlength"
+                       :clearable="false" style="font-size: 16px"/>
+            </div>
+          </div>
+
+          <div class="item" v-if="item.type == 'select'">
+            <span class="label"><span class="tips"></span>{{ item.label }}</span>
+            <div class="value" @click="selectClick(item.dict, item.formDbName)">
+              <span
+                  :class="form[item.formDbName] === '' ? 'color-999' : ''">{{
+                  $dict.getLabel(item.dict, form[item.formDbName]) || '请选择'
+                }}</span>
+              <u-icon name="arrow-right" color="#cccccc" size="24"/>
+            </div>
+          </div>
+
+          <div class="item" v-if="item.type == 'time'">
+            <span class="label"><span class="tips"></span>{{ item.label }}</span>
+            <div class="value" @click="selectTime(item.formDbName)">
+              <span :class="form[item.formDbName] === '' ? 'color-999' : ''">{{
+                  $dateFormat(form[item.formDbName], 'YYYY-MM-DD') || '请选择'
+                }}</span>
+              <u-icon name="arrow-right" color="#cccccc" size="24"/>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+    <div class="footer" @click="submit">
+      <div class="btn">{{ isEdit ? '保存' : '提交' }}</div>
+    </div>
+
+    <u-picker mode="time" v-model="dateShow" :params="deteParams" start-year="1900" @confirm="dateConfirm">请选择
+    </u-picker>
+    <u-select v-model="showSelect" :list="selectList" label-name="dictName" value-name="dictValue"
+              @confirm="confirmSelect"/>
+  </div>
+</template>
+
+<script>
+
+import {mapState} from 'vuex'
+
+export default {
+  data() {
+    return {
+      form: {
+        userType: '',
+        name: '',
+        idNumber: '',
+        gender: '',
+        birth: '',
+        phone: '',
+        areaName: '',
+        address: '',
+        girdName: '',
+        areaId: '',
+        sex: ''
+      },
+      dateShow: false,
+      deteParams: {year: true, month: true, day: true, hour: false, minute: false, second: false},
+      showSelect: false,
+      selectDict: '',
+      selectName: '',
+      tableIndex: 0,
+      tableData: [
+        {
+          list: [   // 残疾人
+            {
+              label: '家庭年收入（万）',
+              type: 'money',
+              formDbName: 'income',
+              maxlength: 9
+            },
+            {
+              label: '婚姻情况',
+              type: 'select',
+              dict: 'appSpecialMarriage',
+              formDbName: 'marriage'
+            },
+            {
+              label: '身体状况',
+              type: 'select',
+              dict: 'appSpecialHealth',
+              formDbName: 'health'
+            },
+            {
+              label: '残疾类型',
+              type: 'select',
+              dict: 'appSpecialDisableType',
+              formDbName: 'type'
+            },
+            {
+              label: '残疾级别',
+              type: 'select',
+              dict: 'appSpecialDisableLevel',
+              formDbName: 'level'
+            },
+          ]
+        },
+        {
+          list: [  // 精神病人
+            {
+              label: '家庭年收入',
+              type: 'money',
+              formDbName: 'income',
+              maxlength: 9
+            },
+            {
+              label: '发病日期',
+              type: 'time',
+              formDbName: 'sickTime'
+            },
+            {
+              label: '监护人姓名',
+              type: 'input',
+              formDbName: 'helpName',
+              maxlength: 20
+            },
+            {
+              label: '监护人联系方式',
+              type: 'number',
+              formDbName: 'helpPhone',
+              maxlength: 11
+            },
+            {
+              label: '目前危险等级',
+              type: 'select',
+              dict: 'appSpecialDengerLevel',
+              formDbName: 'level',
+            },
+            {
+              label: '治疗情况',
+              type: 'select',
+              dict: 'appSpecialCure',
+              formDbName: 'situation',
+            },
+          ]
+        },
+        {
+          list: [  // 社区矫正人群
+            {
+              label: '具体罪名',
+              type: 'input',
+              formDbName: 'crime',
+              maxlength: 20
+            },
+            {
+              label: '矫正类别',
+              type: 'select',
+              dict: 'appSpecialChangeType',
+              formDbName: 'type'
+            },
+            {
+              label: '矫正开始日期',
+              type: 'time',
+              formDbName: 'startTime',
+            },
+            {
+              label: '矫正结束日期',
+              type: 'time',
+              formDbName: 'endTime',
+            },
+            {
+              label: '是否建立矫正小组',
+              type: 'select',
+              dict: 'yesOrNo',
+              formDbName: 'isCreateGroup',
+            },
+            {
+              label: '是否托管',
+              type: 'select',
+              dict: 'yesOrNo',
+              formDbName: 'isRelease',
+            }
+          ]
+        },
+        {
+          list: [  //  戒毒人员
+            {
+              label: '初次发现日期',
+              type: 'time',
+              formDbName: 'firstTime',
+            },
+            {
+              label: '吸毒状态',
+              type: 'select',
+              dict: 'appSpecialDrug',
+              formDbName: 'status',
+            },
+            {
+              label: '戒毒情况',
+              type: 'select',
+              dict: 'appSpecialDebug',
+              formDbName: 'debug',
+            },
+            {
+              label: '管控情况',
+              type: 'select',
+              dict: 'appSpecialControl',
+              formDbName: 'control',
+            },
+            {
+              label: '管控人姓名',
+              type: 'input',
+              formDbName: 'controlName',
+              maxlength: 20
+            },
+            {
+              label: '管控人联系方式',
+              type: 'number',
+              formDbName: 'controlPhone',
+              maxlength: 11
+            },
+            {
+              label: '有无犯罪史',
+              type: 'select',
+              dict: 'isReflection',
+              formDbName: 'crime'
+            },
+          ]
+        },
+        {
+          list: [  // 刑满释放
+            {
+              label: '是否累犯',
+              type: 'select',
+              dict: 'yesOrNo',
+              formDbName: 'isSecond'
+            },
+            {
+              label: '原罪名',
+              type: 'select',
+              dict: 'appSpecialCrime',
+              formDbName: 'crime'
+            },
+            {
+              label: '服刑场所',
+              type: 'input',
+              formDbName: 'place',
+              maxlength: 20
+            },
+            {
+              label: '危险性评估',
+              type: 'select',
+              dict: 'appSpecialDenger',
+              formDbName: 'denger'
+            },
+            {
+              label: '安置情况',
+              type: 'select',
+              dict: 'appSpecialPlacement',
+              formDbName: 'placement'
+            },
+            {
+              label: '安置时间',
+              type: 'time',
+              formDbName: 'placeTime'
+            },
+            {
+              label: '衔接情况',
+              type: 'select',
+              dict: 'appSpecialSituation',
+              formDbName: 'situation'
+            },
+            {
+              label: '衔接时间',
+              type: 'time',
+              formDbName: 'situationTime'
+            },
+            {
+              label: '是否重新犯罪',
+              type: 'select',
+              dict: 'yesOrNo',
+              formDbName: 'isRepeat'
+            },
+          ]
+        }
+      ],
+      selectList: [],
+      id: "",
+      index: "",
+      isEdit: false,
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad(o) {
+    this.$dict.load('appSpecialSituation', 'appSpecialPlacement', 'appSpecialDenger', 'appSpecialCrime',
+        'appSpecialControl', 'appSpecialDebug', 'appSpecialDrug', 'appSpecialChangeType', 'appSpecialCure', 'appSpecialDengerLevel',
+        'appSpecialDisableLevel', 'appSpecialDisableType', 'appSpecialHealth', 'appSpecialMarriage', 'appSpecialTypeFive', 'isReflection', 'yesOrNo').then(() => {
+    })
+    if (o) {
+      this.isEdit = true
+      this.id = o.id
+      this.index = o.index
+      this.getDetail()
+    }
+    if (!o.id) {
+      this.isEdit = false
+      this.getDetail()
+    }
+  },
+  onShow() {
+    document.title = '新增人员'
+  },
+
+  methods: {
+    getDetail() {
+      if (!this.id) return
+      var urlList = ['/app/appspecialdisabled/queryDetailById', '/app/appspecialmental/queryDetailById', '/app/appspecialadjustment/queryDetailById',
+        '/app/appspecialdrug/queryDetailById', '/app/appspecialprison/queryDetailById']
+
+      this.$http.post(urlList[this.index], null, {
+        params: {
+          id: this.id
+        }
+      }).then((res) => {
+        if (res.code == 0) {
+          this.$forceUpdate()
+          this.form = res.data
+          this.form.userType = this.index
+        }
+      })
+    },
+    changeIdNumber() {
+      let people = this.$idCardNoUtil.getIdCardInfo(this.form.idNumber)
+      this.form.birth = people.birthday
+      this.form.gender = people.gender
+    },
+
+    handleSelectGrid(v) {
+      this.form.girdName = v?.girdName || ""
+    },
+
+    submit() {
+      if (this.form.userType === '') {
+        return this.$u.toast('请选择类型')
+      }
+      if (!this.form.name) {
+        return this.$u.toast('请输入姓名')
+      }
+      if (!this.form.idNumber) {
+        return this.$u.toast('请输入身份证号')
+      }
+      if (
+          !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.idNumber)
+      ) {
+        return this.$u.toast("请输入正确的身份证账号");
+      }
+      if (!this.form.phone) {
+        return this.$u.toast('请输入联系电话')
+      }
+      if (!this.form.areaName) {
+        return this.$u.toast('请选择区域')
+      }
+      if (this.form.userType == 1) {
+        if (!!this.form.income && !/^([0-9]{1,5})(\.[0-9]{1,3}){0,1}$/.test(this.form.income)) {
+          return this.$u.toast('输入的数字不能超过10万')
+        }
+      }
+
+      var urlList = ['/app/appspecialdisabled/addOrUpdate', '/app/appspecialmental/addOrUpdate', '/app/appspecialadjustment/addOrUpdate',
+        '/app/appspecialdrug/addOrUpdate', '/app/appspecialprison/addOrUpdate']
+
+      this.$http.post(urlList[this.form.userType], {
+        ...this.form,
+        id: this.isEdit ? this.id : ''
+      }).then(res => {
+        if (res.code == 0) {
+          this.$u.toast(this.isEdit ? '信息保存成功' : '信息提交成功')
+          uni.$emit('specialPeopleList')
+          setTimeout(() => {
+            uni.navigateBack({})
+          }, 600)
+          this.isEdit = !this.isEdit
+        } else if (res.code == 1) {
+          this.$u.toast('保存失败,信息未填写')
+        } else {
+          this.$confirm('是否放弃编辑当前信息').then(() => {
+            uni.navigateBack({})
+          })
+        }
+      })
+    },
+    areaSelect(e) {
+      this.form.areaId = e
+    },
+
+    selectClick(dictName, formName) {
+      this.selectList = this.$dict.getDict(dictName)
+      this.selectName = formName
+      this.showSelect = true
+    },
+    confirmSelect(e) {
+      this.form[this.selectName] = e[0].value
+
+      if (this.selectName == 'userType') {
+        this.tableData[this.form.userType].list.map((item) => {
+          this.form[item.formDbName] = ''
+        })
+      }
+    },
+    selectTime(formName) {
+      this.selectName = formName
+      this.dateShow = true
+    },
+    dateConfirm(e) {
+      this.form[this.selectName] = `${e.year}-${e.month}-${e.day}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.Add {
+  padding-bottom: 112px;
+  font-size: 32px;
+
+  .item {
+    width: 100%;
+    padding: 34px 36px 34px 0;
+    background: #FFFFFF;
+    border-bottom: 1px solid #D8DDE6;
+    display: flex;
+    justify-content: space-between;
+    font-size: 32px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #333;
+    line-height: 44px;
+    box-sizing: border-box;
+
+    .color-999 {
+      color: #999;
+    }
+
+    .value {
+      width: 60%;
+      display: flex;
+      justify-content: flex-end;
+      font-size: 32px;
+
+      .u-icon {
+        margin-left: 16px;
+      }
+    }
+
+    .tips {
+      display: inline-block;
+      width: 16px;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #F46;
+      line-height: 44px;
+    }
+  }
+
+  .address {
+    font-size: 32px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #333;
+    background: #FFFFFF;
+    border-bottom: 1px solid #D8DDE6;
+    padding: 34px 36px 34px 0;
+    box-sizing: border-box;
+
+    .tips {
+      display: inline-block;
+      width: 16px;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #F46;
+      line-height: 44px;
+    }
+
+    .value {
+      margin-left: 16px;
+      font-size: 32px;
+    }
+  }
+
+  .footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+
+  ::v-deep .uni-input-form,
+  ::v-deep .uni-textarea-textarea,
+  ::v-deep .uni-input-input,
+  ::v-deep .uni-input-placeholder,
+  ::v-deep .uni-input-wrapper {
+    font-size: 32px;
+  }
+
+  .btn {
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background: #1365DD;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+  }
+
+  .line-bg {
+    width: 100%;
+    height: 16px;
+    background: #F5F5F5;
+  }
+
+  .pad-l32 {
+    padding-left: 32px;
+    background-color: #fff;
+  }
+}
+</style>
diff --git a/src/project/saas/AppSpecialGroups/AppSpecialGroups.vue b/src/project/saas/AppSpecialGroups/AppSpecialGroups.vue
index ebd5aa2a..06056f29 100644
--- a/src/project/saas/AppSpecialGroups/AppSpecialGroups.vue
+++ b/src/project/saas/AppSpecialGroups/AppSpecialGroups.vue
@@ -1,25 +1,15 @@
 <template>
   <div class="AppSpecialGroups">
-    <div class="title">特殊人群总计 : 60人</div>
-    <div class="item" @click="toList">
+    <div class="title">特殊人群总计 : {{ total }}人</div>
+    <div class="item" @click="toList(item.label)" v-for="(item, index) in statisticsList" :key="index">
       <div class="left">
         <img src="./img/user-icon-mini.png" alt="">
-        <span>残疾人残疾人残疾人残疾人残疾人残疾人残疾人残疾人残疾人残疾人</span>
+        <span>{{ item.label }}</span>
       </div>
       <div class="right">
-        12<img src="./img/down-icon-666.png" alt="">
+        {{ item.value }}<img src="./img/down-icon-666.png" alt="">
       </div>
     </div>
-    <div class="item">
-      <div class="left">
-        <img src="./img/user-icon-mini.png" alt="">
-        <span>残疾人</span>
-      </div>
-      <div class="right">
-        12<img src="./img/down-icon-666.png" alt="">
-      </div>
-    </div>
-    
   </div>
 </template>
 
@@ -29,14 +19,34 @@ export default {
   appName: "特殊人群",
   data() {
     return {
-      
+      statisticsList: [],
+      total: 0
     }
   },
   methods: {
-    toList() {
-      uni.navigateTo({ url: './List'})
+    getStatistic() {
+      this.statisticsList = []
+      this.total = 0
+      this.$http.post(`/app/appspecialadjustment/statistic?type=0&range=0`).then((res) => {
+        if (res?.data) {
+          for (let i in res.data.map) {
+            var obj = {
+              label: i,
+              value: res.data.map[i],
+            }
+            this.total = this.total + res.data.map[i]
+            this.statisticsList.push(obj)
+          }
+        }
+      })
+    },
+    toList(label) {
+      uni.navigateTo({ url: `./List?label=${label}`})
     }
   },
+  created() {
+    this.getStatistic()
+  },
   onShow() {
     document.title = "特殊人群"
   },
diff --git a/src/project/saas/AppSpecialGroups/List.vue b/src/project/saas/AppSpecialGroups/List.vue
index cf2d0d87..9d25f8cc 100644
--- a/src/project/saas/AppSpecialGroups/List.vue
+++ b/src/project/saas/AppSpecialGroups/List.vue
@@ -2,62 +2,121 @@
   <div class="List">
     <AiTopFixed>
       <div class="select-gird" flex>
-        <AiPagePicker type="gird" v-model="handleSelectGird" valueObj nodeKey="id" formType="2">
+        <AiPagePicker type="gird" v-model="girdInfo" valueObj nodeKey="id" formType="2">
           <img src="./img/gird-icon.png" alt="" class="grid-icon">
           <AiMore v-model="girdInfo.girdName" icon="arrow-down"/>
         </AiPagePicker>
-        <u-search placeholder="姓名/联系方式/身份证号后6位" :show-action="false" search-icon-color="#ccc" v-model="search.title"
-          @search="search.current = 1, getList()"/>
+        <u-search placeholder="姓名/联系方式/身份证号后6位" :show-action="false" search-icon-color="#ccc" v-model="page.title"
+          @search="page.current = 1, getList()"/>
       </div>
     </AiTopFixed>
-    <div class="item">
+    <div class="item" v-for="(item, index) in list" :key="index">
       <div class="user-img">
         <img src="./img/user-icon.png" alt="">
       </div>
       <div class="user-content">
         <div class="user-info">
-          <h3>金宝彩</h3>
-          <p>428008******8765</p>
+          <h3>{{ item.name }}</h3>
+          <p>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</p>
         </div>
         <div class="btn">
           <div>
-            <img src="./img/edit-icon.png" alt="">
-            <img src="./img/del-icon.png" alt="">
+            <img src="./img/edit-icon.png" alt="" @click="edit(item)">
+            <img src="./img/del-icon.png" alt="" @click="del(item.id)">
           </div>
-          <p>13890767891</p>
+          <p>{{ item.phone }}</p>
         </div>
       </div>
     </div>
+    <AiEmpty v-if="!list.length"></AiEmpty>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'List',
   data() {
     return {
-      search: {
+      page: {
         current: 1,
-        title: ''
+        title: '',
+        total: 1
       },
-      girdInfo: {}
+      girdInfo: {},
+      navTitle: '',
+      urlKey: {
+        '社区矫正人群' : 'appspecialadjustment',
+        '精神疾病患者' : 'appspecialmental',
+        '残疾人' : 'appspecialdisabled',
+        '刑满释放人员' : 'appspecialprison',
+        '吸毒人员' : 'appspecialdrug'
+      },
+      typeList: [],
+      list: []
     }
   },
   methods: {
     handleSelectGird(v) {
       this.girdInfo = v || {}
-      // this.getGirdUserList()
+      this.getList()
     },
-    getGirdUserList() {
-      // this.$http.post(`/app/appgirdmemberinfo/listGirdMemberByGirdId?girdId=${this.userGird.id}`).then((res) => {
-      //   if (res.code == 0) {
-      //     this.dataInfo = res.data
+    getList() {
+      this.$http.post(`/app/${this.urlKey[this.navTitle]}/list`, null, {
+        params: {
+          current: this.page.current,
+          size: 10,
+          name: this.page.title,
+          girdId: this.girdInfo.id || ''
+        }
+      }).then((res) => {
+        if (res.code == 0) {
+          if (this.page.current > 1) {
+            this.list = [...this.list, ...res.data.records]
+          } else this.list = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    del(id) {
+      this.$confirm('确定删除该人员?').then(() => {
+        this.$http.post(`/app/${this.urlKey[this.navTitle]}/delete?ids=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.$u.toast('删除成功！')
+            this.page.current = 1
+            this.list = []
+            this.getList()
+          }
+        })
+      })
+    },
+    edit(row) {
+      var index = ['残疾人', '精神疾病患者', '社区矫正人群', '吸毒人员', '刑满释放人员'].indexOf(this.navTitle)
+      console.log(index)
+      // this.typeList.map((item) => {
+      //   console.log(this.navTitle, item.dictName)
+      //   if(this.navTitle == item.dictName) {
+      //     index = item.dictValue
       //   }
       // })
-    },
+      uni.navigateTo({url : `./Add?id=${row.id}&index=${index}`})
+    }
+  },
+  onLoad(option) {
+    this.$dict.load('appSpecialTypeFive').then(() => {
+      this.typeList = this.$dict.getDict('appSpecialTypeFive')
+    })
+    this.navTitle = option.label
+    this.getList()
   },
   onShow() {
-    // document.title = "残疾人列表"
+    document.title = this.navTitle
   },
+  onReachBottom() {
+    if (this.page.total > this.list.length) {
+      this.page.current++
+      this.getList()
+    }
+  }
 }
 </script>
 
diff --git a/src/project/saas/AppSpecialGroups/pickGrid.vue b/src/project/saas/AppSpecialGroups/pickGrid.vue
deleted file mode 100644
index 3d75616b..00000000
--- a/src/project/saas/AppSpecialGroups/pickGrid.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<template>
-  <div class="pickGrid">
-    <div class="header-middle">
-      <div class="hint">
-        <span v-for="(item, index) in selectList" :key="index">
-          <span v-if="index" style="margin:0 4px;" v-text="`/`"/>
-          <span style="color:#3F8DF5" @click="girdNameClick(item, index)" v-text="item.girdName"/>
-        </span>
-      </div>
-      <div class="showTypes">
-        <div v-if="options.length > 0">
-          <div class="cards" v-for="(item, index) in options" :key="index">
-            <div class="imges">
-              <img src="./img/gird--select-icon.png" alt="" class="avatras"/>
-            </div>
-            <div class="rightes fill">
-              <div class="applicationNames fill" @click="itemClick(item)">{{ item.girdName }}</div>
-              <u-icon class="more" name="arrow-right" @click="girdClick(item, index)"/>
-            </div>
-          </div>
-        </div>
-        <AiEmpty :description="isGridMember?`暂无数据`:`当前人员不是网格员或网格长`" class="emptyWrap" v-else/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import {mapState} from "vuex";
-
-export default {
-  name: 'pickGrid',
-  appName: "网格选择",
-  data() {
-    return {
-      SelectGird: {},
-      allData: null,
-      options: [],
-      selectList: [],
-      parentGirdId: '',
-      isFormMap: 0, //1为网格地图 一级不允许选中
-    }
-  },
-  computed: {
-    ...mapState(['user']),
-    isMyGirds() {
-      return this.$route?.query.self == true
-    },
-    isGridMember() {
-      return this.user.girdCheckType > 0
-    },
-    //是否是网格员申报
-    isApply: v => v.$route?.query.formType == 2,
-    clearable: v => v.$route?.query.clearable,
-    selected: v => [v.$route?.query.selected].flat()
-  },
-  onLoad(option) {
-    if (option.isFormMap) {
-      this.isFormMap = option.isFormMap
-    }
-    this.isGridMember || this.isApply ? this.getAllGrids() : this.$u.toast('当前人员不是网格员或网格长')
-  },
-  methods: {
-    getAllGrids() {
-      this.selectList = []
-      let {girdMemberId} = this.user,
-          url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser`,
-          params = {girdMemberId}
-      if (this.isApply) {
-        url = `/app/appgirdinfo/listByInfo`
-        params = {}
-      }
-      if (this.isMyGirds) {
-        url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2`
-      }
-      this.$http.post(url, null, {params}).then((res) => {
-        if (res?.data) {
-          let parents = res.data.map(e => e.parentGirdId)
-          this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id)}))
-          this.treeInit()
-        }
-      })
-    },
-    treeInit(isClick) {
-      let last = uni.getStorageSync("lastSelectedGrid")
-      if (!isClick && last && !this.isApply) {
-        this.$http.post("/app/appgirdinfo/listFatherGirdInfo", null, {
-          params: {girdId: last}
-        }).then(res => {
-          if (res?.data) {
-            this.selectList = [{girdName: '可选范围', id: ''}, res.data.filter(e => !!this.allData.find(a => a.id == e.id))].flat()
-            this.getGridsByGridMemberAndParent({id: last})
-          }
-        })
-      } else {
-        this.options = this.allData.filter((e, i, arr) => !arr.map(e => e.id).includes(e.parentGirdId) || this.isMyGirds)
-        this.options.map((item) => item.isChecked = this.selected.includes(item.id))
-        let obj = {girdName: '可选范围', id: ''}
-        this.selectList.push(obj)
-      }
-    },
-    itemClick(row) {
-      if (row.hasChildren) {
-        let obj = {
-          girdName: row.girdName,
-          id: row.id,
-        }
-        this.selectList.push(obj)
-        this.getGridsByGridMemberAndParent(row)
-      }
-    },
-    getGridsByGridMemberAndParent(row) {
-      let {id: parentGirdId} = row
-      this.options = this.allData.filter(e => e.parentGirdId == parentGirdId)
-      this.options.map((item) => item.isChecked = this.selected.includes(item.id))
-    },
-    girdNameClick(row, index) {
-      if (!index) { //第一级别
-        this.selectList = []
-        this.treeInit(true)
-      } else {
-        this.selectList.splice(index, 8)
-        this.getGridsByGridMemberAndParent(row)
-      }
-    },
-    girdClick(row) {
-      this.SelectGird = row
-      this.$forceUpdate()
-      this.submit()
-    },
-    submit() {
-      if (this.SelectGird.id != null) {
-        if (!this.isApply && !this.isMyGirds) {
-          uni.setStorageSync("lastSelectedGrid", this.SelectGird.parentGirdId)
-        }
-        uni.navigateBack({
-          success: () => {
-            uni.$emit("pagePicker:custom", this.SelectGird)
-          }
-        })
-      } else {
-        return this.$u.toast('请选择网格')
-      }
-    },
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.pickGrid {
-  min-height: 100vh;
-  background: #fff;
-  padding-bottom: 140px;
-  box-sizing: border-box;
-
-  .more {
-    width: 80px;
-    justify-content: center;
-  }
-
-  .header-middle {
-    .hint {
-      padding: 28px 20px 28px 32px;
-      line-height: 56px;
-      box-shadow: 0px 1px 0px 0px #e4e5e6;
-      font-size: 30px;
-      font-weight: 500;
-      word-break: break-all;
-    }
-
-    .showTypes {
-      .cards {
-        display: flex;
-        align-items: center;
-        height: 120px;
-        line-height: 120px;
-        // background: pink;
-        padding: 0 0 0 32px;
-
-        .imges {
-          display: flex;
-          align-items: center;
-          // width: 200px;
-          .imgselect {
-            width: 48px;
-            height: 48px;
-            vertical-align: middle;
-          }
-
-          .avatras {
-            width: 74px;
-            height: 74px;
-            border-radius: 8px;
-          }
-        }
-
-        img {
-          width: 74px;
-          height: 74px;
-          border-radius: 8px;
-        }
-
-        .rightes {
-          display: flex;
-          border-bottom: 1px solid #e4e5e6;
-          padding: 0 16px;
-
-          .applicationNames {
-            display: inline-block;
-            font-size: 36px;
-            font-weight: 500;
-            color: #333333;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            vertical-align: bottom;
-          }
-        }
-      }
-    }
-  }
-
-  .subBtn {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 118px;
-    background: #f4f8fb;
-    justify-content: flex-end;
-
-    div {
-      width: 192px;
-      height: 80px;
-      line-height: 80px;
-      text-align: center;
-      border: 2px solid #1365dd;
-      background: #1365dd;
-      border-radius: 4px;
-      font-size: 32px;
-      color: #fff;
-      margin-right: 32px;
-    }
-  }
-}
-</style>