diff --git a/src/api/agentcenter/task.js b/src/api/agentcenter/task.js
index ad20368..80e1a3d 100644
--- a/src/api/agentcenter/task.js
+++ b/src/api/agentcenter/task.js
@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-// 任务
+// 全部任务
 export function managerAllTaskList(params) {
   return request({
     url: '/manager/task/allTaskList',
@@ -8,3 +8,21 @@ export function managerAllTaskList(params) {
     params: params,
   })
 }
+
+// 区总览
+export function managerCountyTaskSummary(params) {
+  return request({
+    url: '/manager/task/countyTaskSummary',
+    method: 'get',
+    params: params,
+  })
+}
+
+// 待分配任务
+export function managerUndistribTaskList(params) {
+  return request({
+    url: '/manager/task/undistribTaskList',
+    method: 'get',
+    params: params,
+  })
+}
diff --git a/src/components/framework/RightYearMonthHorizontalSelector.vue b/src/components/framework/RightYearMonthHorizontalSelector.vue
new file mode 100644
index 0000000..f03eb1f
--- /dev/null
+++ b/src/components/framework/RightYearMonthHorizontalSelector.vue
@@ -0,0 +1,204 @@
+<template>
+
+  <div class="right_top_main">
+    <div class="title">
+      <i></i>
+      <p>{{title || '任务日期'}}</p>
+    </div>
+
+    <div class="right_top_block">
+      <div class="time_main">
+        <span class="sanjiao-top" @click="addDate"></span>
+        <p @click = "selectionRange">{{iyear}}</p>
+        <el-date-picker
+          v-model="iyear"
+          type="year"
+          class="pickerTime"
+          ref = "datePicker"
+          value-format="yyyy"
+          placeholder="选择年">
+        </el-date-picker>
+        <span class="sanjiao-bottom" @click="reduceDate"></span>
+      </div>
+
+      <div class="month_main">
+        <p v-for="(item,index) in 12" @click="chooseMonth(index + 1)" :class="{'active':isCurrentMonth(index + 1)}">{{index+1}}月<i v-if="isCurrentMonth(index + 1)"></i></p>
+      </div>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import {date_format} from "@/utils/date";
+
+export default {
+  name: 'RightYearMonthHorizontalSelector',
+  props: {
+    year: String,
+    month: String,
+    title: String,
+  },
+  data() {
+    return {
+      iyear: this.year || date_format('%Y'),
+      imonth: this.month || date_format('%m'),
+    };
+  },
+  methods: {
+    addDate(){
+      this.iyear = '' + (Number(this.iyear) + 1);
+      this.imonth = '01';
+      this.emitUpdate(1 | 2);
+    },
+    reduceDate(){
+      this.iyear = '' + (Number(this.iyear) - 1);
+      this.imonth = '01';
+      this.emitUpdate(1 | 2);
+    },
+    isCurrentMonth(m) {
+      return parseInt(this.imonth) === m;
+    },
+    selectionRange(){
+      this.$refs.datePicker.focus();
+    },
+    emitUpdate(w) {
+      if(w & 1)
+        this.$emit('update:year', this.iyear);
+      if(w & 2)
+        this.$emit('update:month', this.imonth);
+      this.$emit('dateChanged', this.iyear, this.imonth, w);
+    },
+    chooseMonth(month) {
+      this.imonth = month >= 10 ? '' + month : ('0' + month);
+      this.emitUpdate(2);
+    },
+  },
+  watch: {
+    year(newVal) {
+      if(this.iyear != newVal)
+      {
+        this.iyear = newVal;
+        this.emitUpdate(1);
+      }
+    },
+    month(newVal) {
+      if(this.imonth != newVal)
+      {
+        this.imonth = newVal;
+        this.emitUpdate(2);
+      }
+    },
+    iyear(newVal) {
+      if(this.year != newVal)
+      {
+        this.emitUpdate(1);
+      }
+    },
+    imonth(newVal) {
+      if(this.month != newVal)
+      {
+        this.emitUpdate(2);
+      }
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.right_top_main{
+  margin-top: 15px;
+  border-radius: 8px;
+  box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+  background: #fff;
+  padding: 15px 20px;
+  .right_top_block{
+    display: flex;
+    align-items: center;
+  }
+  p{margin: 0;line-height: 1;}
+}
+
+.sanjiao-top {
+  display: inline-block;
+  border-bottom: 8px solid #414141;
+  border-bottom-color: initial;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  cursor: pointer;
+}
+
+.sanjiao-bottom {
+  display: inline-block;
+  border-top: 8px solid #414141;
+  border-top-color: initial;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  cursor: pointer;
+}
+
+.time_main{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f5f6f8;
+  color: #414141;
+  width: 15%;
+  margin-top: 15px;
+  padding: 15px 0;
+  border-radius: 8px;
+  height: 82px;
+  position: relative;
+  cursor: pointer;
+  p{
+    margin: 10px 0;
+  }
+}
+
+.month_main{
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 15px;
+  color: #414141;
+  background-color: #f5f6f8;
+  height: 82px;
+  flex: 1;
+  margin-left: 1vw;
+  border-radius: 8px;
+  p{
+    /*margin-top: 3vh;*/
+    width: 16%;
+    position: relative;
+    text-align: center;
+    &.active{
+      color: #3976ff;
+    }
+    &:hover{
+      color: #3976ff;
+      cursor: pointer;
+    }
+    i{
+      display: block;
+      width: 5px;
+      height: 5px;
+      background-color: #fc5659;
+      position: absolute;
+      top: -5px;
+      right: 12px;
+      border-radius: 100%;
+    }
+  }
+
+}
+.pickerTime{
+  opacity: 0;
+  position: absolute;
+  left: 0px;
+  top: 30px;
+  width: 5px;
+  height: 5px;
+  z-index: -1;
+}
+</style>
diff --git a/src/views/allTasks/allTasks.vue b/src/views/allTasks/allTasks.vue
index 5ecddcf..05790f7 100644
--- a/src/views/allTasks/allTasks.vue
+++ b/src/views/allTasks/allTasks.vue
@@ -31,11 +31,11 @@
         </el-dropdown-menu>
       </el-dropdown>
 
-      <p class="todo_num">镇处理进度：<span>15/50</span></p>
-      <p class="todo_num3">镇审核进度：<span>5/50</span></p>
-      <p class="todo_num1">合作社处理进度：<span>25/70</span></p>
-      <p class="todo_num3">合作社审核进度：<span>10/70</span></p>
-      <p class="todo_num2">任务异常数：<span>1</span>个</p>
+      <p class="todo_num">镇处理进度：<span>{{ countySummary.numTownProcessedTask }}/{{ countySummary.numTown }}</span></p>
+      <p class="todo_num3">镇审核进度：<span>{{ countySummary.numTownApprovalTask }}/{{ countySummary.numTown }}</span></p>
+      <p class="todo_num1">合作社处理进度：<span>{{ countySummary.numBookProcessedTask }}/{{ countySummary.numBook }}</span></p>
+      <p class="todo_num3">合作社审核进度：<span>{{ countySummary.numBookApprovalTask }}/{{ countySummary.numBook }}</span></p>
+      <p class="todo_num2">任务异常数：<span>{{countySummary.abnormalCount}}</span>个</p>
 
     </div>
 
@@ -54,7 +54,7 @@
                 </div>
               </div>
             </template>
-            <el-table :data="item.villageList" style="width: 100%;" :default-sort = "{prop: 'date', order: 'descending'}">
+            <el-table :data="item.villageList" style="width: 100%;">
 
               <el-table-column type="expand">
                 <template slot-scope="props">
@@ -71,7 +71,7 @@
                       <el-col :span="2">记账：{{task.voucherCount}}</el-col>
                       <el-col :span="2">合同：{{task.contracCount}}</el-col>
                       <el-col :span="2">其他：{{task.allCount - task.voucherCount - task.contracCount}}</el-col>
-                      <el-col :span="9" style="text-align: right"><el-button type="primary" size="mini">进入账套</el-button></el-col>
+                      <el-col :span="9" style="text-align: right"><el-button type="primary" size="mini" @click="gotoRemoteSite(task)">进入账套</el-button></el-col>
                     </el-row>
                   </div>
                 </template>
@@ -100,8 +100,8 @@
               <el-table-column prop="handleDate" label="记账完成日期" show-overflow-tooltip />
               <el-table-column prop="value8" label="是否审批完成" show-overflow-tooltip >
                 <template slot-scope="scope">
-                  <p class="backButton">未完成</p>
-                  <p class="backButton2">已完成</p>
+                  <p class="backButton" v-if="!scope.row.approvalFinish">未完成</p>
+                  <p class="backButton2" v-if="scope.row.approvalFinish">已完成</p>
                 </template>
               </el-table-column>
 
@@ -123,7 +123,7 @@
 import {cityTree, deptTree} from "@/api/misc/misc_dept";
 import {ENV} from "@/utils/env";
 import {date_format} from "@/utils/date";
-import {managerAllTaskList} from "@/api/agentcenter/task";
+import {managerAllTaskList, managerCountyTaskSummary,} from "@/api/agentcenter/task";
 import RightYearMonthSelector from "@/components/framework/RightYearMonthSelector.vue";
 
 export default {
@@ -140,6 +140,15 @@ export default {
         orderYear: date_format('%Y'),
         orderMonth: date_format('%m'),
       },
+      countySummary: {
+        numTown: 0,
+        numBook: 0,
+        abnormalCount: 0,
+        numTownProcessedTask: 0,
+        numTownApprovalTask: 0,
+        numBookProcessedTask: 0,
+        numBookApprovalTask: 0,
+      }
     }
   },
   created() {
@@ -150,11 +159,15 @@ export default {
       cityTree({rootId: ENV.UserDeptId()}).then((resp) => {
         this.deptOptions = resp.data;
         if(this.deptOptions.length)
+        {
           this.parms.countyCode = this.deptOptions[0].orgCode;
+          this.getSummary();
+          this.getTaskList();
+        }
       });
     },
     getTaskList() {
-      if(!this.parms.townCode || !this.parms.orderYear || !this.parms.orderMonth)
+      if(!this.parms.countyCode || !this.parms.orderYear || !this.parms.orderMonth)
         return;
       managerAllTaskList(this.parms).then((resp) => {
         this.list = resp.rows;
@@ -164,14 +177,27 @@ export default {
     chooseCity(cmd) {
       this.parms.countyCode = cmd;
       this.parms.townCode = null;
+      this.getTaskList();
+      this.getSummary();
     },
     chooseTown(cmd) {
       this.parms.townCode = cmd;
       this.getTaskList();
     },
     chooseMonth(year, month) {
+      this.getSummary();
       this.getTaskList();
     },
+    gotoRemoteSite(task) {
+      window.open(`/api/open/book/${task.orgCode}/${task.bookId}`, '_blank');
+    },
+    getSummary() {
+      if(!this.parms.countyCode || !this.parms.orderYear || !this.parms.orderMonth)
+        return;
+      managerCountyTaskSummary(this.parms).then((resp) => {
+        this.countySummary = resp.data;
+      })
+    }
   },
   mounted(){
 
diff --git a/src/views/taskAllocation/todo.vue b/src/views/taskAllocation/todo.vue
index 009c109..59cc69b 100644
--- a/src/views/taskAllocation/todo.vue
+++ b/src/views/taskAllocation/todo.vue
@@ -24,14 +24,12 @@
             <p>{{townName}}</p>
           </div>
           <div class="select_address">
-            <p class="select_time">2023.03.05</p>
           </div>
         </div>
         <el-dropdown-menu slot="dropdown" style="width: 16vw;text-align: center;">
           <el-dropdown-item v-for="(item,index) in townList">
             <div class="selected" @click="chooseTown(item.orgCode)">
               <p>{{item.deptName}}</p>
-              <p>2023.03.05</p>
             </div>
           </el-dropdown-item>
         </el-dropdown-menu>
diff --git a/src/views/toBeAllocated/toBeAllocated.vue b/src/views/toBeAllocated/toBeAllocated.vue
index a5f096d..61dd38c 100644
--- a/src/views/toBeAllocated/toBeAllocated.vue
+++ b/src/views/toBeAllocated/toBeAllocated.vue
@@ -6,12 +6,12 @@
       <el-dropdown trigger="click" placement="bottom-start">
         <div class="select_address el-dropdown-link">
           <span class="sanjiao-right"></span>
-          <p>大足区</p>
+          <p>{{cityName}}</p>
         </div>
         <el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;">
-          <el-dropdown-item v-for="(item,index) in 5">
-            <div class="selected">
-              <p>张家镇</p>
+          <el-dropdown-item v-for="(item,index) in deptOptions">
+            <div class="selected" @click="chooseCity(item.orgCode)">
+              <p>{{item.deptName}}</p>
             </div>
           </el-dropdown-item>
         </el-dropdown-menu>
@@ -20,42 +20,43 @@
       <el-dropdown trigger="click" placement="bottom-start">
         <div class="select_address el-dropdown-link">
           <span class="sanjiao-right"></span>
-          <p>张家镇</p>
+          <p>{{townName}}</p>
         </div>
         <el-dropdown-menu slot="dropdown" style="width: 8vw;text-align: center;">
-          <el-dropdown-item v-for="(item,index) in 5">
-            <div class="selected">
-              <p>张家镇</p>
+          <el-dropdown-item v-for="(item,index) in townList">
+            <div class="selected" @click="chooseTown(item.orgCode)">
+              <p>{{item.deptName}}</p>
             </div>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
 
-      <p class="todo_num">已处理村庄：<span>19</span>个</p>
-      <p class="todo_num2">超时完成村庄：<span>1</span>个</p>
+      <p class="todo_num">待处理镇/街：<span>{{total}}</span>个</p>
+      <p class="todo_num2">待处理村庄：<span>{{numVillage}}</span>个</p>
+      <p class="todo_num3">待处理任务：<span>{{allCount}}</span>个</p>
 
     </div>
 
     <div class="main">
 
       <div class="left_main">
-        <el-table :data="tableData" style="width: 100%;" :default-sort = "{prop: 'date', order: 'descending'}">
+        <el-table :data="list" style="width: 100%;" v-if="list.length > 0">
 
           <el-table-column type="expand">
             <template slot-scope="props">
               <div class="openTable">
-                <el-table :data="tableData" style="width: 100%;background-color: transparent;" :default-sort = "{prop: 'date', order: 'descending'}">
-                  <el-table-column prop="value1" label="村" show-overflow-tooltip />
-                  <el-table-column prop="value1" label="合作社" show-overflow-tooltip />
-                  <el-table-column prop="value2" label="记账笔数" show-overflow-tooltip >
+                <el-table :data="props.row.villageList" style="width: 100%;background-color: transparent;">
+                  <el-table-column prop="orgName" label="村" show-overflow-tooltip />
+                  <el-table-column prop="numBook" label="合作社" show-overflow-tooltip />
+                  <el-table-column prop="voucherCount" label="记账笔数" show-overflow-tooltip >
                     <template slot-scope="scope">
-                      5 <span class="num">7</span>
+                      {{scope.row.voucherCount}} <span class="num">7</span>
                     </template>
                   </el-table-column>
-                  <el-table-column prop="value3" label="合同数量" show-overflow-tooltip />
-                  <el-table-column prop="value4" label="其他" show-overflow-tooltip />
-                  <el-table-column prop="value5" label="任务总数" show-overflow-tooltip />
-                  <el-table-column prop="value9" label="操作">
+                  <el-table-column prop="contracCount" label="合同数量" show-overflow-tooltip />
+                  <el-table-column prop="otherCount" label="其他" show-overflow-tooltip />
+                  <el-table-column prop="allCount" label="任务总数" show-overflow-tooltip />
+                  <el-table-column label="操作">
                     <template slot-scope="scope">
                       <div class="setting">
                         <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
@@ -64,24 +65,24 @@
                       </div>
                     </template>
                   </el-table-column>
-                  <el-table-column prop="value7" label="截至日期" show-overflow-tooltip />
+                  <el-table-column prop="endAt" label="截至日期" show-overflow-tooltip />
                 </el-table>
               </div>
             </template>
           </el-table-column>
 
-          <el-table-column prop="value1" label="镇/街" show-overflow-tooltip />
-          <el-table-column prop="value2" label="村账数量" show-overflow-tooltip />
-          <el-table-column prop="value3" label="合作社数量" show-overflow-tooltip />
-          <el-table-column prop="value4" label="记账笔数" show-overflow-tooltip >
+          <el-table-column prop="townName" label="镇/街" show-overflow-tooltip />
+          <el-table-column prop="numVillage" label="村账数量" show-overflow-tooltip />
+          <el-table-column prop="numBook" label="合作社数量" show-overflow-tooltip />
+          <el-table-column prop="voucherCount" label="记账笔数" show-overflow-tooltip >
             <template slot-scope="scope">
-              5 <span class="num">7</span>
+              {{scope.row.voucherCount}} <span class="num">7</span>
             </template>
           </el-table-column>
-          <el-table-column prop="value5" label="合同数量" show-overflow-tooltip />
-          <el-table-column prop="value6" label="其他" show-overflow-tooltip />
-          <el-table-column prop="value7" label="任务总数" show-overflow-tooltip />
-          <el-table-column prop="value8" label="操作" show-overflow-tooltip >
+          <el-table-column prop="contracCount" label="合同数量" show-overflow-tooltip />
+          <el-table-column prop="otherCount" label="其他" show-overflow-tooltip />
+          <el-table-column prop="allCount" label="任务总数" show-overflow-tooltip />
+          <el-table-column label="操作" show-overflow-tooltip >
             <template slot-scope="scope">
               <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
             </template>
@@ -89,40 +90,13 @@
 
         </el-table>
 
-        <img src="../../assets/images/toBeAllocated_icon_none.png" alt="" class="table_none">
+        <img src="../../assets/images/toBeAllocated_icon_none.png" alt="" class="table_none" v-else>
 
       </div>
 
       <div class="right_main">
 
-        <div class="right_top_main">
-
-          <div class="title">
-            <i></i>
-            <p>任务日期</p>
-          </div>
-
-          <div class="right_top_block">
-            <div class="time_main">
-              <span class="sanjiao-top" @click="addDate"></span>
-              <p @click = "selectionRange">{{year}}</p>
-              <el-date-picker
-                v-model="year"
-                type="year"
-                class="pickerTime"
-                ref = "datePicker"
-                value-format="yyyy"
-                placeholder="选择年">
-              </el-date-picker>
-              <span class="sanjiao-bottom" @click="reduceDate"></span>
-            </div>
-
-            <div class="month_main">
-              <p v-for="(item,index) in 12" :class="{'active':index==3}">{{index+1}}月<i v-if="index==3"></i></p>
-            </div>
-          </div>
-
-        </div>
+        <RightYearMonthHorizontalSelector class="right_top_main" :year.sync="parms.orderYear" :month.sync="parms.orderMonth" @dateChanged="chooseMonth"/>
 
         <div class="right_bottom_main">
 
@@ -133,14 +107,14 @@
 
           <div class="right_top_block">
             <el-row>
-              <el-col span="8">姓名</el-col>
-              <el-col span="8" align="center">未完成</el-col>
-              <el-col span="8" align="center">任务期限</el-col>
+              <el-col :span="8">姓名</el-col>
+              <el-col :span="8" align="center">未完成</el-col>
+              <el-col :span="8" align="center">任务期限</el-col>
             </el-row>
             <el-row v-for="(item,index) in 10">
-              <el-col span="8">张三</el-col>
-              <el-col span="8">19 <span class="num">1</span><span class="num2">10</span></el-col>
-              <el-col span="8" align="center">
+              <el-col :span="8">张三</el-col>
+              <el-col :span="8">19 <span class="num">1</span><span class="num2">10</span></el-col>
+              <el-col :span="8" align="center">
                 <span class="no_yes">未选中</span>
                 <div class="num_input">
                   <span @click="reduceNum">-</span>
@@ -162,64 +136,53 @@
 </template>
 
 <script>
+  import RightYearMonthHorizontalSelector from "@/components/framework/RightYearMonthHorizontalSelector.vue";
+  import {cityTree} from "@/api/misc/misc_dept";
+  import {ENV} from "@/utils/env";
+  import {accountingTodoTaskList} from "@/api/agentcenter/accounting_task";
+  import RightYearMonthSelector from "@/components/framework/RightYearMonthSelector.vue";
+  import {date_format} from "@/utils/date";
+  import {managerUndistribTaskList} from "@/api/agentcenter/task";
+
   export default {
     name: "processed",
+    components: {RightYearMonthSelector, RightYearMonthHorizontalSelector},
     data() {
       return {
-        tableData: [{
-          value1: '当当村',
-          value2: '5',
-          value3: '8',
-          value4: '5',
-          value5: '5',
-          value6: '18',
-          value7: '63',
-          value8: '2023.03.06',
-          value9: '111'
-        }, {
-          value1: '当当村',
-          value2: '5',
-          value3: '8',
-          value4: '5',
-          value5: '5',
-          value6: '18',
-          value7: '63',
-          value8: '2023.03.06',
-          value9: '111'
-        }, {
-          value1: '当当村',
-          value2: '5',
-          value3: '8',
-          value4: '5',
-          value5: '5',
-          value6: '18',
-          value7: '63',
-          value8: '2023.03.06',
-          value9: '111'
-        }, {
-          value1: '当当村',
-          value2: '5',
-          value3: '8',
-          value4: '5',
-          value5: '5',
-          value6: '18',
-          value7: '63',
-          value8: '2023.03.06',
-          value9: '111'
-        }],
-        year:'2023',
+        deptOptions: [],
+        list: [],
+        total: 0,
+        parms: {
+          countyCode: null,
+          townCode: null,
+          orderYear: date_format('%Y'),
+          orderMonth: date_format('%m'),
+        },
+        numBook: 0,
+        numVillage: 0,
+        allCount: 0,
         num:0
       }
     },
     created() {
-
+      this.getDeptTree();
     },
     methods:{
-      addDate(){
-        this.year = Number(this.year) + 1 ;
+      getDeptTree() {
+        cityTree({rootId: ENV.UserDeptId()}).then((resp) => {
+          this.deptOptions = resp.data;
+          if(this.deptOptions.length)
+            this.parms.countyCode = this.deptOptions[0].orgCode;
+        });
       },
-      reduceDate(){
-        this.year = Number(this.year) - 1 ;
+      chooseCity(cmd) {
+        this.parms.countyCode = cmd;
+        this.parms.townCode = null;
+        this.getTaskList();
+      },
+      chooseTown(cmd) {
+        this.parms.townCode = cmd;
+        this.getTaskList();
       },
       addNum(){
         this.num = Number(this.num) + 1 ;
@@ -228,13 +191,44 @@
         if(this.num==0){return;}
         this.num = Number(this.num) - 1 ;
       },
-      selectionRange(){
-        this.$refs.datePicker.focus();
+      getTaskList() {
+        if(!this.parms.countyCode || !this.parms.orderYear || !this.parms.orderMonth)
+          return;
+        managerUndistribTaskList(this.parms).then((resp) => {
+          this.list = resp.rows;
+          this.total = resp.total;
+          this.numBook = resp.numBook;
+          this.numVillage = resp.numVillage;
+          this.allCount = resp.allCount;
+        })
+      },
+      chooseMonth(year, month) {
+        this.getTaskList();
       },
     },
     mounted(){
 
-    }
+    },
+    computed: {
+      cityName() {
+        if(!this.deptOptions.length)
+          return '';
+        let dept = this.deptOptions.find((x) => x.orgCode === this.parms.countyCode);
+        return dept ? dept.deptName : '';
+      },
+      townList() {
+        if(!this.deptOptions.length)
+          return [];
+        let dept = this.deptOptions.find((x) => x.orgCode === this.parms.countyCode);
+        return dept ? dept.children || [] : [];
+      },
+      townName() {
+        if(!this.townList.length)
+          return '';
+        let dept = this.townList.find((x) => x.orgCode === this.parms.townCode);
+        return dept ? dept.deptName : '';
+      },
+    },
   }
 </script>
 
@@ -450,6 +444,13 @@
       }
     }
     .todo_num2{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #3976ff;
+      }
+    }
+    .todo_num3{
       margin-left: 2vw;
       span{
         font-size: 24px;