From a49d80c794d90925ca8c8f15aabe3e268f641468 Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Thu, 21 Jul 2022 15:03:23 +0800
Subject: [PATCH] =?UTF-8?q?=E9=98=B2=E8=BF=94=E8=B4=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppHelpEffect/AppHelpEffect.vue      | 141 +++++++--
 src/apps/AppHelpEffect/helpDetail.vue         | 270 +++++++++++++++++-
 src/apps/AppHelpEffect/images/dh@2x.png       | Bin 0 -> 816 bytes
 src/apps/AppHelpEffect/images/dz@2x.png       | Bin 0 -> 884 bytes
 src/apps/AppPovertyHome/AppPovertyHome.vue    |   2 +-
 .../saas/AppCooperationPropaganda/detail.vue  |  63 +++-
 6 files changed, 440 insertions(+), 36 deletions(-)
 create mode 100644 src/apps/AppHelpEffect/images/dh@2x.png
 create mode 100644 src/apps/AppHelpEffect/images/dz@2x.png

diff --git a/src/apps/AppHelpEffect/AppHelpEffect.vue b/src/apps/AppHelpEffect/AppHelpEffect.vue
index a4e0d89c..ce7b1e4c 100644
--- a/src/apps/AppHelpEffect/AppHelpEffect.vue
+++ b/src/apps/AppHelpEffect/AppHelpEffect.vue
@@ -1,8 +1,40 @@
 <template>
   <div class="AppHelpEffect">
-    <AiFixedBtn>
-      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog(0)"></div>
-    </AiFixedBtn>
+    <AiTopFixed>
+      <div class="search"><u-search placeholder="请输入姓名、身份证号" v-model="name" :show-action="false"></u-search></div>
+      <div class="select">
+        <div class="left">
+          <AiSelect v-model="declareReason" :list="areaList" @data="areaSelect">
+            <span v-if="!declareReason" style="color: #999;">地区筛选</span>
+            <span v-else>{{ $dict.getLabel('helpDeclarationReason', declareReason) }}</span>
+            <u-icon name="arrow-down" color="#999" size="24" style="margin-left: 4px;width: 14px;display:inline-block;"></u-icon>
+          </AiSelect>
+        </div>
+        <div class="right">
+          <AiSelect v-model="declareReason" :list="typeList" @data="typeSelect">
+            <span v-if="!declareReason" style="color: #999;">户型类型</span>
+            <span v-else>{{ $dict.getLabel('helpDeclarationReason', declareReason) }}</span>
+            <u-icon name="arrow-down" color="#999" size="24" style="margin-left: 4px;width: 14px;display:inline-block;"></u-icon>
+          </AiSelect>
+        </div>
+      </div>
+    </AiTopFixed>
+
+    <div class="cardList">
+      <div class="card" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
+        <p class="user">
+          <span class="name">{{ item.name }}</span>
+          <span :style="{color: item.houseType==1? '#FF6300': '#00D25D'}">{{ $dict.getLabel('', item.houseType) }}</span>
+        </p>
+        <div class="idCard">{{ item.idNumber.replace(/(.{6}).*(.{4})/, '$1********$2') }}</div>
+        <div class="tel" @click="callPhone()"><img src="./images/dh@2x.png" alt="">{{ item.phone}}</div>
+        <div class="address"><img src="./images/dz@2x.png" alt="">
+          {{ item.countyName + item.townName + item.villageName }}{{ item.currentAddress || '' }}
+        </div>
+      </div>
+    </div>
+
+    
   </div>
 </template>
 
@@ -11,31 +43,102 @@ export default {
   name: "AppHelpEffect",
   appName: '帮扶成效',
   data() {
-    return {}
+    return {
+      name: "",
+      current: 1,
+      declareReason: "",
+      areaList: [],
+      typeList: [],
+      houseType: 1,
+      provertyStatus: 0,
+      list: [],
+    }
+  },
+  methods: {
+    areaSelect() {},
+    typeSelect() {},
+    callPhone(phone) {
+      uni.makePhoneCall({phoneNumber: phone})
+    },
+    getList() {
+      this.$http.post('/app/appgirdmemberpoverty/listByGirdMember', null, {
+        params: {
+          current: this.current,
+          provertyStatus: this.provertyStatus,
+          name: this.name,
+        },
+      }).then((res) => {
+        if (res?.data) {
+          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
+        }
+      })
+    },
+    toDetail(id) {
+      uni.navigateTo({url: `./helpDetail?id=${id}`})
+    },
+    onReachBottom() {
+      this.current ++
+      this.getList()
+    }
   },
-  methods: {},
   onShow() {
     document.title = '帮扶成效'
+    this.getList()
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .AppHelpEffect {
-
-
-  .addBtn {
-    width: 96px;
-    height: 96px;
-    flex-shrink: 0;
-    background: $uni-color-primary;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    font-size: 48px;
-    color: #fff;
-    border-radius: 50%;
-    justify-content: center;
-    align-items: center;
-    display: flex;
+  .search {
+    height: 100px;
+    line-height: 100px;
   }
+  .select {
+    width: 100%;
+    display: flex;
+    height: 60px;
+    line-height: 60px;
+
+    ::v-deep .AiSelect .display {
+      justify-content: center;
+    }
+
+    .left,
+    .right {
+      width: 50%;
+    }
+  }
+  .cardList {
+    padding: 32px;
+    box-sizing: border-box;
+    .card {
+      padding: 32px;
+      box-sizing: border-box;
+      margin-bottom: 32px;
+      background: #FFF;
+      box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.0200);
+      border-radius: 16px;
+      .user {
+        display: flex;
+        justify-content: space-between;
+        .name {
+          font-size: 36px;
+          font-weight: 600;
+        }
+      }
+      .idCard,
+      .tel,
+      .address {
+        margin-top: 8px;
+        color: #999999;
+        img {
+          width: 28px;
+          height: 28px;
+        }
+      }
+    }
+  }
+
 }
 </style>
\ No newline at end of file
diff --git a/src/apps/AppHelpEffect/helpDetail.vue b/src/apps/AppHelpEffect/helpDetail.vue
index aab9a0a1..4ed807c6 100644
--- a/src/apps/AppHelpEffect/helpDetail.vue
+++ b/src/apps/AppHelpEffect/helpDetail.vue
@@ -1,20 +1,280 @@
 <template>
-  <div class="helpDetail"></div>
+  <div class="helpDetail">
+    <AiTopFixed>
+      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bar-width="150" @change="change"></u-tabs>
+    </AiTopFixed>
+
+    <div class="tab-content" v-show="currentTabs === 0">
+      <div class="tab-content__item">
+        <div class="log-item" v-for="(item, index) in helpList" :key="index">
+          <div class="log-item__wrapper">
+            <div class="log-item__user">
+              <div class="left">
+                <div class="user">
+                  <span>{{ item.createUserName.substr(item.createUserName.length - 2) }}</span>
+                </div>
+                <h2>{{ item.createUserName }}</h2>
+              </div>
+              <div class="right">
+                <span>{{ item.createTime }}</span>
+                <u-icon name="list" color="#999" size="28" @click="edit(item.id)" style="margin-left:16px;" v-if="item.createUserId == user.id"></u-icon>
+              </div>
+            </div>
+            <p style="color: #999999;">帮扶措施：{{ $dict.getLabel('fpAssistanceMeasures',item.operationDesc) }}</p>
+            <p>{{ item.detail }}</p>
+            <div class="imgs" v-if="item.files && item.files.length">
+              <image :src="img.url" @click="prevImg(item.files, img.url)" v-for="(img, index) in item.files"
+                     :key="index"/>
+            </div>
+          </div>
+        </div>
+        <AiEmpty v-if="!helpList.length" style="padding-bottom: 20px;"></AiEmpty>
+      </div>
+    </div>
+
+    <div class="tab-content__item" v-show="currentTabs == 1">
+      <div class="log-item" v-for="(item, index) in logList" :key="index">
+        <div class="log-item__wrapper">
+          <div class="log-item__user">
+            <div class="left">
+              <div class="user">
+                <span>{{ item.createUserName.substr(item.createUserName.length - 2) }}</span>
+              </div>
+              <h2>{{ item.createUserName }}</h2>
+            </div>
+            <div class="right">
+              <span>{{ item.createTime }}</span>
+              <u-icon name="list" color="#999" size="28" @click="edit(item.id)" style="margin-left:16px;" v-if="item.createUserId == user.id && item.operationDesc == '走访排查'"></u-icon>
+            </div>
+          </div>
+          <p style="color: #999999;">操作类型：{{ item.operationDesc }}</p>
+          <p>{{ item.detail }}</p>
+          <div class="imgs" v-if="item.files && item.files.length">
+            <image :src="img.url" @click="prevImg(item.files, img.url)" v-for="(img, index) in item.files"
+                    :key="index"/>
+          </div>
+        </div>
+      </div>
+      <AiEmpty v-if="!logList.length" style="padding-bottom: 20px;"></AiEmpty>
+    </div>
+
+    <AiFixedBtn v-if="currentTabs === 0">
+      <!-- v-if="$permissions('app_apppreventionreturntopovertylog_edit')" -->
+      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog(1)" ></div>
+    </AiFixedBtn>
+    <AiFixedBtn v-if="currentTabs === 1">
+      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog()"></div>
+    </AiFixedBtn>
+  </div>
 </template>
 
 <script>
+import {mapState} from 'vuex'
 export default {
   name: 'helpDetail',
   data() {
-    return {}
+    return {
+      tabList: [
+        {
+          name: '帮扶措施',
+        },
+        {
+          name: '走访日志',
+        }
+      ],
+      currentTabs: 0,
+      helpList: [],
+      logList: [],
+      id: '',
+    }
+  },
+  computed: {
+    ...mapState(['user'])
+  },
+  onLoad(o) {
+    this.id = o.id
+    this.$dict.load('fpAssistanceMeasures')
+  },
+  methods: {
+    change(index) {
+      this.currentTabs = index
+      if(index == 0) {
+        this.getHelpList()
+      } else if(index == 1) {
+        this.getLogList()
+      }
+    },
+    getHelpList() {
+      this.$http.post(`/app/apppreventionreturntopovertylog/list?pid=${this.id}&size=1000&current=1&type=1`).then(res => {
+        if (res.code === 0) {
+          this.helpList = res.data.records || []
+        }
+      })
+    },
+    getLogList() {
+      this.$http.post(`/app/apppreventionreturntopovertylog/list?pid=${this.id}&size=1000&current=1&type=0`).then(res => {
+        if (res.code === 0) {
+          this.logList = res.data.records || []
+        }
+      })
+    },
+    toAddLog(type) {
+      uni.navigateTo({
+        url: `./addLog?pid=${this.id}&type=${type}`
+      })
+    },
+
+    prevImg(urls, img) {
+      const imgs = urls.map(v => v.url)
+      uni.previewImage({
+        urls: imgs,
+        current: img
+      })
+    },
+
+    edit(id) {
+      uni.showActionSheet({
+        itemList: ['编辑', '删除'],
+        success: res => {
+          if (res.tapIndex === 0) {
+            uni.navigateTo({
+              url: `./addLog?pid=${this.info.id}&id=${id}&type=0`
+            })
+          } else if (res.tapIndex === 1) {
+            this.$confirm('确定删除该数据？').then(() => {
+              uni.showLoading()
+              this.$http.post(`/app/apppreventionreturntopovertylog/delete?ids=${id}`).then(res => {
+                if (res.code === 0) {
+                  this.$u.toast('删除成功')
+                  this.getHelpList()
+                }
+                uni.hideLoading()
+              })
+            }).catch(() => {
+            })
+          }
+        }
+      })
+    },
+
+
+
+
+
+
+
   },
-  methods() {},
   onShow() {
-    document.title('帮扶情况')
+    document.title = '帮扶情况'
+    if(this.id) {
+      this.getHelpList()
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.helpDetail {}
+.helpDetail {
+  ::v-deep .AiTopFixed .content{
+    padding: 0;
+  }
+
+  .log-item {
+    padding: 0 0 0 32px;
+    background: #fff;
+
+    &:first-child {
+      margin-top: 16px;
+    }
+
+    &:last-child {
+      .log-item__wrapper {
+        border: none !important;
+      }
+    }
+
+    .log-item__wrapper {
+      padding: 32px 32px 32px 0;
+      border-bottom: 1px solid #E4E5E6;
+
+      .log-item__user {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        & > div {
+          display: flex;
+          align-items: center;
+        }
+
+        .left {
+          .user, image {
+            width: 80px;
+            height: 80px;
+            line-height: 80px;
+            margin-right: 16px;
+            text-align: center;
+            border-radius: 50%;
+            background: #2266FF;
+
+            span {
+              color: #fff;
+              font-size: 28px;
+            }
+          }
+
+          h2 {
+            color: #333;
+            font-size: 32px;
+          }
+        }
+
+        .right {
+          image {
+            width: 32px;
+            height: 32px;
+          }
+
+          span {
+            margin-right: 6px;
+            color: #999999;
+            font-size: 28px;
+          }
+        }
+      }
+
+      p {
+        margin: 4px 0 16px 96px;
+        color: #343D65;
+        font-size: 28px;
+      }
+
+      .imgs {
+        margin-left: 96px;
+
+        image {
+          width: 136px;
+          height: 136px;
+          margin-right: 8px;
+          margin-bottom: 8px;
+        }
+      }
+    }
+  }
+
+
+  .addBtn {
+    width: 96px;
+    height: 96px;
+    flex-shrink: 0;
+    background: $uni-color-primary;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    font-size: 48px;
+    color: #fff;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/apps/AppHelpEffect/images/dh@2x.png b/src/apps/AppHelpEffect/images/dh@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..5a2a8a7d4cb11d2a99833339c08a99c4766f4bf4
GIT binary patch
literal 816
zcmeAS@N?(olHy`uVBq!ia0vp^G9b*s1|*Ak?@s|zjKx9jP7LeL$-D$|Tv8)E(|mmy
zw18|52FCVG1{RPKAeI7R1_tH@j10^`nh_+nfC(-uvw#`F1}RM0`(+UW1Jf)|7sn6}
z-n(J;8Nz`w|LUf@G=;8Q+1<>?mnF*X7;tIHjB864tq7jjR8mlI>F7e|zs4(OJ74rP
z>JV^LRQMNtrDCPpKi3y3RvICJA`_jqt~~hc-ShWN<vUN`J=%S<>U8z{-*xxD->t5E
zAKP&B--Ozxn0xzWuFe!@kY{;e-l3MUq2y%T<;?qBPnJ6yhG<O|+IBS2>r~{eP^-5G
ztRyt1mDTCJ<}&uU=KrzzN!;pnhy9c%WNu$C{?WCrROQj>?T#i)jT_eYRm#@w>HPgE
zSK!-${(n}pSX=FWd_FkSP2u6p?LLP@P6cEY-I|@xpUa|Eb2`{dV*28bmnQ$_-ypan
z>9g#``r=A~v%5F&F=$WNmMZ>aga3{_5%Q&pvJ7DfcNb@WW!)KTXZc4$Gi<Um-<sw|
z<q3~|#w*B_|ID1T_P&eWqS^z387DF~%$a^c+fO^L`_vs%y?0;iSNk=-KOq{ip2xM%
z^Y=Q>sg7&QX3kvudwVCp$rsVhvu-ieF64O@>Zg86QN~W^`KD(_ntN-Qc`a9WzP%7J
z_1z`4-M?Q%nK^x|HukkhxoPgS{;N~}swsMB%s$`q{<Xb}?UcR%7w_qOE%##|Q=SBy
z9p(RRTsDQfHZx<Z=8GEUkh#yCK24Zw{!2GKLu~V{{p_=*O)vcH!`r?{W~ofcE4DAi
z@1#<DE-n4MEPR2(;u+nw)(al$N!Tv42=HDMFhzuSik#$E-RW2IJXWfo7wl3=aeM#v
zhy8CIu2}ozYpi@GESrq)E8W^0T4i}zA;Nq1nO)nMcm-AS{x2!16j{=9Vt2h+Z`3xQ
zaNm7z9fCFL*Q{G?y)ACvRQ1%$HRgrk-W5Gl_a>{!Ra~CIw0>GVzy87N`s@pm<vSj4
s^1bE}8yfdSZPCWX$5vIm6jT4k9`3&J`8H3cjiA)(>FVdQ&MBb@0GLu;g8%>k

literal 0
HcmV?d00001

diff --git a/src/apps/AppHelpEffect/images/dz@2x.png b/src/apps/AppHelpEffect/images/dz@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3a49fdbee254911343bf0cead410325b7648cc4
GIT binary patch
literal 884
zcmeAS@N?(olHy`uVBq!ia0vp^G9b*s1|*Ak?@s|zjKx9jP7LeL$-D$|Tv8)E(|mmy
zw18|52FCVG1{RPKAeI7R1_tH@j10^`nh_+nfC(-uvw#`F1}RM0`(+UW1JgZE7sn6}
z-n*gR-NKFn>t>x)skks(0|<UGo9sTq8h*3+N5qllT^bzOLVGI(0zYi(ws+u=JMx3!
z>!Rul-HU#(DE>CMIr~9(sbF9@f0tZ|>Fmt?a+kcz&-<v&n$7DRUi&q)HrCeG*5&{2
z2W3)cV#Q9s+PtNE#x^d;Y(stCPb_B>>Kc{GjWu@#p8VXtq)L}{_xWzsVmn?(1^=c?
zoJZ>v>ohkvw7K(tcy5umCSjXS)y1=>j%V{8X|;Up@AGE9%4E;k&XL_Oag%$|`TPsA
zEqgi&jE;P{U6>*5B7f`2goN<OH6J^(UgRzG{U<Hox_@_Ol)d4J^<Qn=%a^?6)+*If
zd;K6(C+o^emE2kh*|J!XoyTN)U$uD5ewo|A9VIAv-ND>ddfu~2A4j)#0qKCo6Ej~5
zez-chy<%z2lHOp2jW;f4T!^#H;83cZEO#Y0=cxCa;Qvn&=LJ<HFmoqy@tmJsdP2bE
zQIT!N4ZhgM1N_X*myfKwwd2#<S#1h&C2oRmBY%9kdTdJn9{p3>(swUYJkhl5Ez48m
z%VMdwi%-u8y)59eFv77$%li6UVfP%v&XY5G&;Rzxf0iqudDrnb|AX(ZXQWP7*ua0|
zv6>#g%l4y&F*?U~<nlPG`zkN;TkcrYt8;lGldh|XZ1mlNnd`LU&mEf<#$I_WZld2m
z_TTqhCfdKOY+Jyy!Fzd$le*b1?yFp!*SKO1vKFisUZ^nrrP?m(?XO!{R1YRw_5Gc{
z_2k=MKW@}7v#}C9+Akub|EV}8S$(n4t%DnGB!A2Ie41!@(V64mO{2TVmtPV;+u@r3
zc-L(~@!mH9lV(O%=)FCd6@OIqwnf-~o*Q-2*Z<z&6Xlfur6se-Fy~`Z>(MjsW&4Y+
zHviF6lRL0cc9qIc?n8>Nj-HAVoz-;Xn2KSfabUotCyGh^RSHp)_t|ZDI(3S(t$^`6
zpSg=~cSf(8T;9)7{!3c+=r^$s936A-#w{^Ed}iOd?9~5^{LBYcf9<|h1WNIqu6{1-
HoD!M<g_C#Q

literal 0
HcmV?d00001

diff --git a/src/apps/AppPovertyHome/AppPovertyHome.vue b/src/apps/AppPovertyHome/AppPovertyHome.vue
index 178ff6a2..368ff2fe 100644
--- a/src/apps/AppPovertyHome/AppPovertyHome.vue
+++ b/src/apps/AppPovertyHome/AppPovertyHome.vue
@@ -6,7 +6,7 @@
         <h2>监测对象</h2>
       </div>
       <div class="info-top__item" @click="linkTo('../AppHelpEffect/AppHelpEffect')" v-if="$permissions('app_apppreventionreturntopoverty_detail')">
-        <image :src="$cdn + 'wdbf.png'"/>
+        <image :src="$cdn + 'bfcx.png'"/>
         <h2>帮扶成效</h2>
       </div>
       <div class="info-top__item" @click="linkTo('../AppWarningMonitoring/AppWarningMonitoring')">
diff --git a/src/project/saas/AppCooperationPropaganda/detail.vue b/src/project/saas/AppCooperationPropaganda/detail.vue
index f734eb8d..ede90097 100644
--- a/src/project/saas/AppCooperationPropaganda/detail.vue
+++ b/src/project/saas/AppCooperationPropaganda/detail.vue
@@ -38,12 +38,28 @@
       <div class="content">
         <p>群发内容</p>
         <div>
-          <div class="textarea" v-if="content.length">{{ content[0].content }}</div>
-          <div class="pictures">
-            <!-- <image v-for="(item, index) in picList" :key="index" :src="item.url" @click.stop="previewImages(picList, item.url)/> -->
+          <!-- 文本 -->
+          <div class="textarea" v-show="content.length">{{ content[0].content }}</div>
+          <!-- 图片 -->
+          <div class="pictures" v-show="picList.length">
+            <image v-for="(item, index) in picList" :key="index" :src="item.imgPicUrl" @click.stop="previewImages(picList, item.imgPicUrl)"/>
+          </div>
+          <!-- 视频 -->
+          <div class="video" v-show="videoList.length">
+            <video v-for="(item, index) in videoList" :key="index" :src="item.imgPicUrl"/>
+          </div>
+          <!-- 文件 -->
+          <div class="file" v-show="fileList.length">
+            <AiUploader v-for="(item, index) in fileList" :key="index" :src="item.imgPicUrl"/>
+          </div>
+          <!-- 网页 -->
+          <div class="webpage" v-show="webpage.length">
+            <video v-for="(item, index) in picList" :key="index" :src="item.imgPicUrl"/>
+          </div>
+          <!-- 小程序 -->
+          <div class="miniapp" v-show="miniapp.length">
+            <!-- <video v-for="(item, index) in picList" :key="index" :src="item.imgPicUrl"/> -->
           </div>
-          <div></div>
-          <div></div>
         </div>
       </div>
     </div>
@@ -61,7 +77,11 @@ export default {
       id: "",
       data: {},
       content: [],
-      picList: []
+      picList: [],
+      videoList: [],
+      fileList: [],
+      webpage: [],
+      miniapp: [],
     }
   },
   onLoad(o) {
@@ -72,14 +92,18 @@ export default {
       this.$http.post(`/app/appmasssendingtask/queryDetailById?id=${this.id}`).then(res=> {
         if (res?.data) {
           this.data = res.data
-          this.content = res.data.contents.map(v=> v.msgType == 0)
-          this.picList = res.data.contents.map(e=> e.msgType == 1)
+          this.content = res.data.contents.filter(v=> v.msgType == 0)
+          this.picList = res.data.contents.filter(v=> v.msgType == 1)
+          this.videoList = res.data.contents.filter(v=> v.msgType == 2)
+          this.fileList = res.data.contents.filter(v=> v.msgType == 3)
+          this.webpage = res.data.contents.filter(v=> v.msgType == 4)
+          this.miniapp = res.data.contents.filter(v=> v.msgType == 5)
         }
       })
     },
-    previewImage(images, img) {
+    previewImages(images, img) {
       uni.previewImage({
-        urls: images.map(v => v.url),
+        urls: images.map(v => v.imgPicUrl),
         current: img
       })
     },
@@ -184,12 +208,29 @@ export default {
         color: #999;
         margin-bottom: 26px;
       }
-      .textarea {
+      .textarea,
+      .pictures,
+      .video,
+      .file,
+      .webpage,
+      .miniapp {
         background: #F9F9F9;
         border-radius: 4px;
         padding: 20px;
         box-sizing: border-box;
       }
+      .pictures {
+        margin-top: 16px;
+        image {
+          width: 190px;
+          height: 190px;
+          margin-right: 4px;
+          margin-bottom: 4px;
+        }
+        image:nth-child(3n) {
+          margin-right: 0;
+        }
+      }
     }
   }