diff --git a/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue b/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue
index dc99f7aa..2bb2d66d 100644
--- a/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue
+++ b/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue
@@ -2,10 +2,11 @@
   <div class="AppPropagandaStatistics">
     <div class="calendar_header">
       <u-section title="宣发日历" :show-line="false"  sub-title="查看更多" @click="readMore"></u-section>
+      <!-- <div>{{ calendarList[nowDate - 1] }}</div> -->
     </div>
     <div class="threeDays">
       <div class="yesterday">
-        <div class="itemYesterday">昨天<span>11:51</span></div>
+        <div class="itemYesterday">昨天<span>{{ calendarList[nowDate - 1] }}</span></div>
         <div>晴风小区志愿者活动</div>
       </div>
       <div class="today">
@@ -16,7 +17,7 @@
         <div class="itemTomorrow">明天<span>11:51</span></div>
         <div @click="showMore(index)">晴风小区志愿者活动</div>
         <div class="isShow" @click="showMore()">{{ isShow ? '收起' : '展开' }}</div>
-        <span ></span>
+        <span></span>
       </div>
     </div>
     
@@ -25,7 +26,7 @@
     <div class="brokenEcharts">
       <div class="broken_title">
         <div class="broken_left">宣发效果</div>
-        <div class="broken_right" @click="filterShow = true">筛选</div>
+        <div class="broken_right" @click="filterShow = true"><img src="./images/shaixuan.png" alt="">筛选</div>
       </div>
       <div class="broken_statistics">
         <div class="broken_item">
@@ -51,35 +52,59 @@
     <div class="columnarEcharts">
       <div class="broken_title">
         <div class="broken_left">宣发明细</div>
-        <div class="broken_right">筛选</div>
+        <div class="broken_right">
+          <span :class="detailType ==0? 'active': ''" @click="detailType = 0, getColData()">近七天</span>
+          <span :class="detailType ==1? 'active': ''" @click="detailType = 1, getColData()">近30天</span>
+          <span :class="detailType ==2? 'active': ''" @click="detailType = 2, getColData()">近1年</span>
+        </div>
       </div>
       <div id="columnarEcharts"></div>
     </div>
 
-    <u-popup v-model="filterShow" mode="bottom">
+    <u-popup v-model="filterShow" mode="bottom" border-radius="14">
       <div class="popup">
         <div class="tips"></div>
         <div class="title">
-          <div class="cancel" @click.stop="filterShow=false">取消</div>
+          <div class="cancel" @click.stop="filterShow=false,timeSelect=0">取消</div>
           <p>筛选条件</p>
           <div class="confirm" @click.stop="selectConfirm">确定</div>
         </div>
         <scroll-view class="select-content" scroll-y="true">
           <div class="type-list">
             <div class="type-title">宣发时间</div>
-            <!-- <div class="item" v-for="(item, index) in quotaList" :key="index" :class="index == quotaIndex ? 'active' : ''" @click.stop="quotaIndex=index">{{item.label}}</div> -->
+            <div class="item" v-for="(item, index) in timeList" :key="index" :class="index == timeSelect ? 'active' : ''" @click.stop="checkTime(index)">{{item}}</div>
           </div>
           <div class="type-list">
             <div class="type-title">宣发部门</div>
-            <!-- <div class="item" v-for="(item, index) in typeList" :key="index" :class="index == typeIndex ? 'active' : ''" @click.stop="typeIndex=index">{{item.dictName}}</div> -->
-          </div>
-
-          <div>
-            <!-- <div>重置</div>
-            <div>确认</div> -->
+            <AiPagePicker type="custom" :selected.sync="deptList" nodeKey="id" :ops="{url:`./selectDeptUser`,label:'name'}" valueObj>
+              <span class="label" v-if="deptList.length">已选择</span>
+              <span v-else style="color:#999;">请选择</span>
+              <u-icon name="arrow-right" color="#999" size="24" style="margin-left:8px;"/>
+            </AiPagePicker>
           </div>
         </scroll-view>
+        <div class="popBtn">
+          <div @click="reset">重置</div>
+          <div @click="selectConfirm">确认</div>
+        </div>
       </div>
+      <u-popup v-model="customShow" mode="bottom" border-radius="14" closeable>
+        <div class="customPop">    
+          <div class="startTime">
+            <div>开始时间：</div>
+            <div>
+              <u-input v-model="start" placeholder="请输入格式为2022-00-00的开始时间" type="text" clearable/>
+            </div>
+          </div>
+          <div class="endTime">
+            <div>结束时间：</div>
+            <div>
+              <u-input v-model="end" placeholder="请输入格式为2022-00-00的结束时间" type="text" clearable/>
+            </div>
+          </div>
+          <div class="timeBtn" @click="handleTime">确定</div>
+        </div>
+      </u-popup>
     </u-popup>
   </div>
 </template>
@@ -97,25 +122,113 @@ export default {
       brokenEcharts3: null,
       columnarEcharts: null,
       filterShow: false,
+      customShow: false,
+      timeList: ['近7天', '近30天', '近1年','自定义'],
+      timeSelect: 0,
+      start: '',
+      end: '',
+      deptList: [],
+      nowDate: '',
+      calendarList: [],
+      colData: {},
+      detailType: 0,
+      timeType: '',
+      departId: '',
+      startTime: '',
+      endTime: '',
     }
   },
   
   onShow() {
     document.title = '宣发统计'
+    this.getData()
+    this.getNowDate()
   },
   mounted() {
     this.getBrokenEcharts1()
     this.getBrokenEcharts2()
     this.getBrokenEcharts3()
     this.getColumnarEcharts()
+    this.getColData()
   },
   methods: {
     showMore() {},
+
+    checkTime(index) {
+      if(index == 3) {
+        this.timeSelect = index
+        this.customShow = true
+      } else {
+        this.timeSelect = index
+      }
+    },
     
     readMore() {
       uni.navigateTo({url: `./calendarInfo`})
     },
-    // 折线图
+    // 重置
+    reset() {
+      this.timeType = 0
+      this.startTime = ''
+      this.endTime = ''
+      this.departId = ''
+    },
+
+    selectConfirm() {
+      if(this.timeSelect == 3) {
+        this.timeType = this.timeSelect
+        this.startTime = this.start
+        this.endTime = this.end
+        this.getBrokenDate()
+      } else {
+        this.timeType = this.timeSelect
+        this.getBrokenDate()
+      }
+      this.filterShow = false
+      
+    },
+
+    handleTime() {
+      this.startTime = this.start
+      this.endTime = this.end
+      this.customShow = false
+    },
+
+    getNowDate() {
+      let date = new Date()
+      this.nowDate = date.getDate()
+      // console.log(this.nowDate);
+    },
+    // 宣发日历
+    getData() {
+      this.$http.post(`/app/appmasssendingtask/statisticsCalendar`, null, {
+        params: {
+
+        }
+      }).then((res)=> {{
+        if(res?.data) {
+          this.calendarList = res.data
+        }
+      }})
+    },
+
+
+    // 宣发效果
+    getBrokenDate() {
+      this.$http.post(`/app/appmasssendingtask/statisticsEffect`, null, {
+        params: {
+          type: this.timeSelect,
+          startTime: this.startTime,
+          endTime: this.endTime,
+          departId: this.departId
+        }
+      }).then(res=>{
+        if(res?.data) {
+          console.log(res);
+        }
+      })
+    },
+    // 触发人数
     getBrokenEcharts1() {
       this.brokenEcharts1 = echarts.init(document.getElementById('brokenEcharts1'))
       this.brokenEcharts1.setOption({
@@ -170,6 +283,7 @@ export default {
         ]
       })
     },
+    // 宣发次数
     getBrokenEcharts2() {
       this.brokenEcharts2 = echarts.init(document.getElementById('brokenEcharts2'))
       this.brokenEcharts2.setOption({
@@ -224,6 +338,7 @@ export default {
         ]
       })
     },
+    // 宣发任务数
     getBrokenEcharts3() {
       this.brokenEcharts3 = echarts.init(document.getElementById('brokenEcharts3'))
       this.brokenEcharts3.setOption({
@@ -278,7 +393,20 @@ export default {
         ]
       })
     },
-    // 柱状图
+    // 宣发明细
+    getColData() {
+      this.$http.post(`/app/appmasssendingtask/statisticsDepart`, null, {
+        params: {
+          type: this.detailType
+        }
+      }).then(res=> {
+        console.log(res);
+        if(res?.data) {
+          console.log(res);
+          this.colData = res.data
+        }
+      })
+    },
     getColumnarEcharts() {
       this.columnarEcharts = echarts.init(document.getElementById('columnarEcharts'))
       this.columnarEcharts.setOption({
@@ -314,6 +442,8 @@ export default {
         ]
       })
     },
+
+
     
   }
 }
@@ -376,7 +506,7 @@ export default {
       display: flex;
       justify-content: space-between;
       height: 96px;
-      line-height: 96px;
+      align-items: center;
 
       .broken_left {
         font-size: 32px;
@@ -385,7 +515,24 @@ export default {
 
       .broken_right {
         font-size: 24px;
-        color: #3399FF;
+        // color: #3399FF;
+
+        img {
+          width: 28px;
+          height: 28px;
+        }
+        
+        span {
+          margin-right: 12px;
+          padding: 8px 10px;
+          display: inline-block;
+          border: 1px solid #DDD;
+          border-radius: 8px;
+        }
+        .active {
+          background: #3399FF;
+          color: #FFF;
+        }
       }
     }
 
@@ -435,13 +582,15 @@ export default {
   }
 
   .popup{
-    padding: 0 32px;
-    padding-bottom: 60px;
+    box-sizing: border-box;
+    // height: 800px;
     .tips{
       width: 80px;
       height: 6px;
       background: #DDDDDD;
       border-radius: 4px;
+      padding: 0 32px;
+      box-sizing: border-box;
       margin: 32px auto 8px auto;
     }
     .title{
@@ -451,6 +600,8 @@ export default {
       font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 500;
       color: #222;
+      padding: 0 32px;
+      box-sizing: border-box;
       padding-bottom: 32px;
       .cancel{
         display: inline-block;
@@ -475,6 +626,8 @@ export default {
       overflow-y: scroll;
     }
     .type-list{
+      padding: 0 32px;
+      box-sizing: border-box;
       margin-bottom: 32px;
       .type-title{
         line-height: 108px;
@@ -490,7 +643,6 @@ export default {
         line-height: 64px;
         background: #F3F4F7;
         border-radius: 4px;
-        // padding: 0 80px;
         margin: 0 16px 16px 0;
         font-size: 28px;
         font-family: PingFangSC-Regular, PingFang SC;
@@ -500,11 +652,46 @@ export default {
         background: #1365DD;
         color: #fff;
       }
+      
+    }
+    .popBtn {
+      display: flex;
+      height: 98px;
+      line-height: 98px;
+      div {
+        width: 50%;
+        border: 2px solid #3399FF;
+        text-align: center;
+      }
+      div:first-child {
+        color: #3399FF;
+      }
+      div:last-child {
+        color: #FFF;
+        background: #3399FF;
+      }
     }
   }
 
-  ::v-deep .popup{
-    height: 800px;
+  .customPop {
+    padding: 80px 32px 20px 32px;
+    box-sizing: border-box;
+
+    .startTime,
+    .endTime {
+      border-bottom: 1px solid #DDD;
+      margin-bottom: 20px;
+    }
+
+    .timeBtn {
+      width: 100%;
+      background: #3399FF;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      border-radius: 16px;
+      color: #FFF;
+    }
   }
 }
 
diff --git a/src/project/saas/AppPropagandaStatistics/groupSendResident.vue b/src/project/saas/AppPropagandaStatistics/groupSendResident.vue
index 55de9744..51ef945d 100644
--- a/src/project/saas/AppPropagandaStatistics/groupSendResident.vue
+++ b/src/project/saas/AppPropagandaStatistics/groupSendResident.vue
@@ -5,18 +5,18 @@
         <div class="searchBox">
           <u-search placeholder="请输入任务名称" v-model="name" :show-action="false"></u-search>
         </div>
-        <div class="filterBtn">筛选</div>
+        <div class="filterBtn"><img src="./images/shaixuan.png" alt="">筛选</div>
       </div>
     </AiTopFixed>
     <div class="resident_list">
-      <div class="card" @click="toDetail">
+      <div class="card" @click="toDetail" v-for="(item,index) in list" :key="index">
         <div class="card_title">
-          <div class="card_left">晴风小区志愿者活动</div>
+          <div class="card_left">{{ item.content }}</div>
           <div class="card_right"><span></span>进行中</div>
         </div>
-        <div>创建时间：<span>2022-07-12</span></div>
+        <div>创建时间：<span>{{ item.createTime }}</span></div>
         <div>共需<span class="num">56</span>名成员完成群发，目前已完成<span class="num">65%</span></div>
-        <div>创建部门：市委/宣传部/一组</div>
+        <div>创建部门：<span>{{ item.createUserDept }}</span></div>
       </div>
     </div>
   </div>
@@ -27,16 +27,31 @@ export default {
   data() {
     return {
       current: 1,
-      name: ''
+      name: '',
+      list: [],
     }
   },
   methods: {
     toDetail() {
       uni.navigateTo({url: `./groupSendDetail`})
+    },
+    getList() {
+      this.$http.post(`/app/appmasssendingtask/list`, null, {
+        params: {
+          current: this.current,
+
+        }
+      }).then(res=> {
+        if(res?.data) {
+          this.list = this.current == 1?  res.data.records : [...res.data.records, ...this.list]
+        }
+        console.log(res);
+      })
     }
   },
   onShow() {
     document.title = '群发居民群'
+    this.getList()
   },
   onReachBottom() {
     this.current ++
@@ -56,7 +71,10 @@ export default {
       width: 562px;
     }
     .filterBtn {
-      width: calc( 100% - 562px);
+      img {
+        width: 28px;
+        height: 28px;
+      }
     }
   }
   .resident_list {
@@ -66,6 +84,7 @@ export default {
       background: #FFF;
       border-radius: 16px;
       padding: 30px;
+      margin-bottom: 24px;
       & > div {
         padding: 10px 0;
       }
diff --git a/src/project/saas/AppPropagandaStatistics/images/gird--select-icon.png b/src/project/saas/AppPropagandaStatistics/images/gird--select-icon.png
new file mode 100644
index 00000000..205144d2
Binary files /dev/null and b/src/project/saas/AppPropagandaStatistics/images/gird--select-icon.png differ
diff --git a/src/project/saas/AppPropagandaStatistics/images/local-icon.png b/src/project/saas/AppPropagandaStatistics/images/local-icon.png
new file mode 100644
index 00000000..3e23aff6
Binary files /dev/null and b/src/project/saas/AppPropagandaStatistics/images/local-icon.png differ
diff --git a/src/project/saas/AppPropagandaStatistics/images/right-icon.png b/src/project/saas/AppPropagandaStatistics/images/right-icon.png
new file mode 100644
index 00000000..e1c626b7
Binary files /dev/null and b/src/project/saas/AppPropagandaStatistics/images/right-icon.png differ
diff --git a/src/project/saas/AppPropagandaStatistics/images/shaixuan.png b/src/project/saas/AppPropagandaStatistics/images/shaixuan.png
new file mode 100644
index 00000000..88015ea5
Binary files /dev/null and b/src/project/saas/AppPropagandaStatistics/images/shaixuan.png differ
diff --git a/src/project/saas/AppPropagandaStatistics/images/tx@2x.png b/src/project/saas/AppPropagandaStatistics/images/tx@2x.png
new file mode 100644
index 00000000..d9620e08
Binary files /dev/null and b/src/project/saas/AppPropagandaStatistics/images/tx@2x.png differ
diff --git a/src/project/saas/AppPropagandaStatistics/images/xz.png b/src/project/saas/AppPropagandaStatistics/images/xz.png
new file mode 100644
index 00000000..98f78cda
Binary files /dev/null and b/src/project/saas/AppPropagandaStatistics/images/xz.png differ
diff --git a/src/project/saas/AppPropagandaStatistics/images/xzh.png b/src/project/saas/AppPropagandaStatistics/images/xzh.png
new file mode 100644
index 00000000..967fa399
Binary files /dev/null and b/src/project/saas/AppPropagandaStatistics/images/xzh.png differ
diff --git a/src/project/saas/AppPropagandaStatistics/selectDeptUser.vue b/src/project/saas/AppPropagandaStatistics/selectDeptUser.vue
new file mode 100644
index 00000000..dfaff442
--- /dev/null
+++ b/src/project/saas/AppPropagandaStatistics/selectDeptUser.vue
@@ -0,0 +1,288 @@
+<template>
+  <section class="selectDeptUser">
+    <div class="header-middle">
+      <div class="hint">
+        <span v-for="(item, index) in selectDeptPath" :key="index">
+          <span v-if="index>0" class="mar-h4">/</span>
+          <span class="color-3F8DF5" @click="deptNameClick(item, index)">{{ item.name }}</span>
+        </span>
+      </div>
+      <div class="cards" v-for="item in treeList" :key="item.id" @click="itemClick(item)">
+        <div class="imges">
+          <div class="imgselect" :class="{checked:item.isChecked}" @click.stop="itemCheck(item, 'dept')"/>
+          <img src="./images/gird--select-icon.png" alt="" class="avatras"/>
+        </div>
+        <div class="rightes">
+          <div class="applicationNames">{{ item.name }}</div>
+          <img src="./images/right-icon.png" alt="" class="imgs"/>
+        </div>
+      </div>
+      <div class="userCards" v-for="e in userList" :key="e.id">
+        <div class="imges">
+          <div class="imgselect" :class="{checked:e.isChecked}" @click.stop="itemCheck(e, 'user')"/>
+          <img src="./images/tx@2x.png" alt="" class="avatras"/>
+        </div>
+        <div class="rights fill">
+          <div class="applicationNames" v-text="e.name"/>
+          <div class="idNumbers">{{ e.phone }}</div>
+        </div>
+      </div>
+      <AiEmpty description="暂无数据" v-if="!hasData"/>
+    </div>
+    <div class="subBtn" @click="submit">
+      <div>确定选择</div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "selectDeptUser",
+  appName: "选择部门/人员",
+  data() {
+    return {
+      selected: [],
+      allData: null,
+      treeList: [],
+      selectDeptPath: [],
+      userList: [],
+    }
+  },
+  computed: {
+    hasData() {
+      return this.treeList?.length > 0 || this.userList?.length > 0
+    }
+  },
+  onLoad() {
+    // console.log(this.$route.query.selected)
+    // this.selected = [this.$route.query.selected].flat().filter(e => !!e)?.map(id => ({id, kind: /^\d{1,5}}$/.test(id) ? 'dept' : 'user'})) || []
+    this.selected = uni.getStorageSync('selectDeptUser') || []
+    console.log(this.selected)
+    this.getAllDepts()
+  },
+  methods: {
+    isSelected(id, corpId) {
+      return !!this.selected.find(e => e.id == id && e.corpId == corpId)
+    },
+    getAllDepts() {
+      this.$http.post('/app/wxcp/wxdepartment/listAllByCorp').then((res) => {
+        if (res?.data) {
+          let parents = res.data.map(e => e.parentid)
+          this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id), isChecked: this.isSelected(e.id, e.corpId)}))
+          this.deptInit()
+        }
+      })
+    },
+    deptInit() {
+      this.treeList = this.allData.filter(e => !e.parentid)
+      this.selectDeptPath = [{name: "可选范围", id: ''}]
+    },
+    itemClick({id, name, corpId}) {
+      let index = this.selectDeptPath.findIndex(e => e.id == id && e.corpId == corpId)
+      if (index == -1) {
+        this.selectDeptPath.push({name, id, corpId})
+        this.getDeptsAndUsersByParent(id, corpId)
+      }
+    },
+    getDeptsAndUsersByParent(departmentId, corpId) {
+      this.treeList = this.allData.filter(e => e.parentid == departmentId && e.corpId == corpId)
+      this.userList = []
+      this.$http.post(`/app/wxcp/wxuser/listByDeptId`, null, {
+        params: {departmentId, status: 1, cid: corpId}
+      }).then(res => {
+        if (res?.data) {
+          this.userList = res.data.map(e => ({...e, isChecked: this.isSelected(e.id, e.corpId)}))
+        }
+      })
+    },
+    deptNameClick(row, index) {
+      this.userList = []
+      if (!index) { //第一级别
+        this.deptInit()
+      } else {
+        let length = this.selectDeptPath.length - index
+        this.selectDeptPath.splice(index + 1, length)
+        this.getDeptsAndUsersByParent(row.id, row.corpId)
+      }
+    },
+    itemCheck(row, kind) {
+      row.isChecked = !row.isChecked
+      if (row.isChecked) {
+        this.selected.push({...row, kind})
+      } else {
+        let index = this.selected.findIndex(e => e.id == row.id)
+        this.selected.splice(index, 1)
+      }
+      this.$forceUpdate()
+    },
+    submit() {
+      console.log([this.selected].flat())
+      if(![this.selected].flat().length) {
+        return this.$u.toast('请选择部门或人员')
+      }
+      
+      uni.$emit("pagePicker:custom", [this.selected].flat())
+      uni.setStorageSync('selectDeptUser', [this.selected].flat())
+      uni.navigateTo({url: `./selectTag`})
+      
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.selectDeptUser {
+  height: 100%;
+  background: #fff;
+
+  .header-top {
+    background: #fff;
+    padding: 20px 32px;
+  }
+
+  .header-middle {
+    padding-bottom: 140px;
+
+    .hint {
+      padding: 28px 20px 28px 32px;
+      line-height: 56px;
+      box-shadow: 0 1px 0 0 #e4e5e6;
+      font-size: 30px;
+      font-weight: 500;
+      word-break: break-all;
+    }
+
+    .empty-div {
+      height: 16px;
+      background: #f5f5f5;
+    }
+
+    .imges {
+      display: flex;
+      align-items: center;
+
+      .imgselect {
+        width: 48px;
+        height: 48px;
+        vertical-align: middle;
+        background-image: url("./images/xz.png");
+        background-position: center;
+        background-size: 100% 100%;
+
+        &.checked {
+          background-image: url("./images/xzh.png");
+        }
+      }
+
+      .avatras {
+        width: 74px;
+        height: 74px;
+        border-radius: 8px;
+        margin-left: 36px;
+      }
+    }
+
+    .cards {
+      display: flex;
+      align-items: center;
+      height: 120px;
+      line-height: 120px;
+      padding: 0 0 0 32px;
+
+
+      img {
+        width: 74px;
+        height: 74px;
+        border-radius: 8px;
+      }
+
+      .rightes {
+        width: calc(100% - 160px);
+        display: flex;
+        align-items: center;
+        margin-left: 32px;
+        border-bottom: 1px solid #e4e5e6;
+
+        .applicationNames {
+          flex: 1;
+          min-width: 0;
+          font-size: 36px;
+          font-weight: 500;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .imgs {
+          flex-shrink: 0;
+          width: 40px;
+          height: 40px;
+          margin-right: 20px;
+        }
+      }
+    }
+
+    .userCards {
+      display: flex;
+      align-items: center;
+      height: 120px;
+      line-height: 120px;
+      padding: 0 0 0 32px;
+
+      .rights {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-left: 32px;
+        border-bottom: 1px solid #e4e5e6;
+        padding-right: 40px;
+        height: inherit;
+
+        .applicationNames {
+          font-size: 36px;
+          font-weight: 500;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .idNumbers {
+          color: #666;
+        }
+      }
+    }
+  }
+
+  .subBtn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 118px;
+    background: #f4f8fb;
+
+    div {
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background: #1365dd;
+      border-radius: 4px;
+      font-size: 32px;
+      color: #fff;
+      margin: 20px 34px 0 0;
+      float: right;
+    }
+  }
+
+  .color-3F8DF5 {
+    color: #3F8DF5;
+  }
+
+  .mar-h4 {
+    margin: 0 4px;
+  }
+}
+</style>