diff --git a/src/apps/AppWorkonline/AppWorkonline.vue b/src/apps/AppWorkonline/AppWorkonline.vue
index 3cd912a6..bd2c9a21 100644
--- a/src/apps/AppWorkonline/AppWorkonline.vue
+++ b/src/apps/AppWorkonline/AppWorkonline.vue
@@ -5,7 +5,7 @@
     </div>
 
     <template v-if="datas.length == 0">
-      <u-card v-for="(items, index) in 4" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
+      <u-card v-for="(item, index) in 4" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
         <view class="body" slot="body">
           <view class="u-body-item">
             <div class="title">基本养老保险灵活就业人员新参保业务</div>
@@ -73,8 +73,10 @@ export default {
   methods: {
     getList() {},
 
-    goDetail(item) {
-      
+    goDetail(item, indexs) {
+      console.log(item, indexs)
+      var id = '11'
+      uni.navigateTo({ url: `./detail?id=${id}` })
     },
 
     search(e) {
diff --git a/src/apps/AppWorkonline/components/Profile_Picture.png b/src/apps/AppWorkonline/components/Profile_Picture.png
new file mode 100644
index 00000000..ac46d7c6
Binary files /dev/null and b/src/apps/AppWorkonline/components/Profile_Picture.png differ
diff --git a/src/apps/AppWorkonline/components/agree.png b/src/apps/AppWorkonline/components/agree.png
new file mode 100644
index 00000000..ae6f8705
Binary files /dev/null and b/src/apps/AppWorkonline/components/agree.png differ
diff --git a/src/apps/AppWorkonline/components/basic.png b/src/apps/AppWorkonline/components/basic.png
new file mode 100644
index 00000000..a049cd9f
Binary files /dev/null and b/src/apps/AppWorkonline/components/basic.png differ
diff --git a/src/apps/AppWorkonline/components/clearn.png b/src/apps/AppWorkonline/components/clearn.png
new file mode 100644
index 00000000..96020cf4
Binary files /dev/null and b/src/apps/AppWorkonline/components/clearn.png differ
diff --git a/src/apps/AppWorkonline/detail.vue b/src/apps/AppWorkonline/detail.vue
index ac7b033d..d32d3d34 100644
--- a/src/apps/AppWorkonline/detail.vue
+++ b/src/apps/AppWorkonline/detail.vue
@@ -1,25 +1,914 @@
 <template>
-  <div class="detail">detail</div>
+  <div class="detail" v-if="pageShow">
+    <!-- <div class="top" v-if="list.approvalStatus == 1">
+      <p>审批通过:</p>
+      <div class="save">
+        <div style="display: inline">11已签署完成,</div>
+        <ai-image preview :file="list.pdfFile" style="display: inline-block; margin-left: 4px"><span class="clicksave">点击查看和保存</span> </ai-image>
+      </div>
+    </div> -->
+
+    <div class="form">
+      <!-- 审批表单名称 -->
+      <text class="text">
+        审批表单名称
+        <!-- {{ list.processDefName }} -->
+      </text>
+
+      <div class="people">
+        <!-- 左 -->
+        <div class="people_msg">
+          <!-- 圆形头像 -->
+          <div class="avatar">
+            <span>李伟民</span>
+            <!-- <span v-if="list.createUserAvatar"><img :src="list.createUserAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
+            <span v-else> {{ $formatName(list.createUserName) }}</span> -->
+          </div>
+
+          <text class="name">
+            <!-- 姓名 -->
+            <p class="name_con">
+              李伟民
+              <!-- {{ list.createUserName }} -->
+            </p>
+            <!-- 日期 -->
+            <p class="name_createtime">
+              2021
+              <!-- {{ list.createTime }} -->
+            </p>
+          </text>
+        </div>
+
+        <!-- 右 -->
+        <!-- 审批状态 -->
+        <!-- 审批中 -->
+        <div class="people_status_ing">
+          <!-- v-if="list.approvalStatus == 0" -->
+          <!-- {{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }} -->
+        </div>
+
+        <!-- 已通过 -->
+        <div class="people_status_agree">
+          <!-- v-if="list.approvalStatus == 1" -->
+          <img src="./components/people_status_agree.png" alt="" />
+        </div>
+
+        <!-- 被驳回 -->
+        <!-- <div class="people_status_reject" v-if="list.approvalStatus == 2">
+          {{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }}
+        </div> -->
+      </div>
+
+      <!-- 表头内容 -->
+      <div class="content">
+        <div class="item">
+          <span class="item_info">所属类型：</span>
+          <span class="zhuf">
+            classificationName
+            <!-- {{ list.classificationName }} -->
+          </span>
+        </div>
+
+        <div class="item">
+          <span class="item_info">所属部门：</span>
+          <span class="liangzhu">
+            department
+            <!-- {{ $dict.getLabel('hbDepartment', list.department) }} -->
+          </span>
+        </div>
+
+        <div class="item">
+          <span class="item_info">审批编号：</span>
+          <span class="liangzhu">
+            serialNumber
+            <!-- {{ list.serialNumber }} -->
+          </span>
+        </div>
+
+        <div class="item">
+          <div class="item_info">
+            <span class="annexs">附件资料：</span>
+
+            <!-- v-for="(item, indexs) in list.annexs" :key="indexs" -->
+            <div class="img_text">
+              img_text
+              <!-- <ai-image :src="item.annexFile.url" preview />
+              <span class="text">{{ item.annexName }}</span> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- tabs栏 -->
+    <u-tabs class="tabs" :list="list_tabs" height="96" active-color="#1365dd" inactive-color="#999" bar-width="374" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs>
+
+    <!-- 表单申请的折叠窗 -->
+    <div style="background-color: #fff">
+      <div v-if="current == 0" class="collapse">
+        <!-- <u-collapse event-type="close" :arrow="true" :accordion="true">
+          <u-collapse-item v-if="item.length > 0" v-for="(item, index) in inforlist" :title="item[0].groupName" :key="index">
+            <div v-for="(items, indexs) in item" :key="indexs">
+              <div class="item_msg">
+                <span class="msg_lef">{{ items.fieldName }}</span>
+
+                <span class="msg_lright" v-if="items.fieldDataType != 5">{{ $dict.getLabel(items.dictionaryCode, items.fieldValue) }}</span>
+                <span class="msg_lright" v-else>
+                  <span v-for="(itemL, indexL) in items.fieldValue" :key="indexL"
+                    >{{ $dict.getLabel(items.dictionaryCode, itemL) }}
+                    <span v-if="indexL < items.fieldValue.length - 1">,</span>
+                  </span>
+                </span>
+              </div>
+            </div>
+          </u-collapse-item>
+        </u-collapse> -->
+      </div>
+    </div>
+
+    <!-- 流程信息 -->
+    <div v-if="current == 1" class="workflow">
+      <!-- 第一步发起 -->
+
+      <!-- v-if="item.nodeType == 3" -->
+      <div class="step-list">
+        <!-- <div class="step-item" v-for="(item, index) in stepList" :key="index"> -->
+        <div class="step-item" v-for="(item, index) in 3" :key="index">
+          <div class="item-left">
+            <div class="item-left-ava-icon">
+              <div class="avatar" v-if="item.userName">
+                <span>userName</span>
+                <!-- <span v-if="item.stepAvatar"><img :src="item.stepAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
+                <span v-else> {{ $formatName(item.userName) }}</span> -->
+              </div>
+
+              <!-- <div class="avatar" v-else-if="item.title == '抄送'">
+                <img src="./components/Profile_Picture.png" alt="" />
+              </div> -->
+
+              <div class="avatar" v-else>
+                <span>candidates</span>
+                <!-- <div v-for="(item3, indexs) in item.candidates" :key="indexs">{{ $formatName(item3.name) }}</div> -->
+              </div>
+
+              <!-- <div class="icon-yes" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
+                <img src="./components/agree.png" alt="" />
+              </div>
+
+              <div class="" v-else-if="item.stepType == 2"></div>
+
+              <div class="icon-no" v-else>
+                <img src="./components/clearn.png" />
+              </div> -->
+            </div>
+
+            <!-- <div :class="item.stepType == 1 || item.stepType == 0 || item.stepType == 3 ? 'solid' : 'dashed'"></div> -->
+          </div>
+
+          <div class="item-right">
+            <div class="time-info">
+              <div>
+                title
+                <!-- {{ item.title }} -->
+              </div>
+              <span>
+                approvalTime
+                <!-- {{ item.approvalTime }} -->
+              </span>
+            </div>
+            <div class="item-right-flex">
+              <!-- 1人或签 -->
+              <span class="title2">
+                title2
+                <!-- {{ item.title2 }} -->
+              </span>
+
+              <!-- 审批中 -->
+              <span class="title2Desc-ing">
+                <!-- v-if="item.stepType == 9" -->
+                title2Desc
+                <!-- {{ item.title2Desc }} -->
+              </span>
+
+              <!--已拒绝   -->
+              <!-- <span class="title2Desc-false" v-else-if="item.stepType == 2">{{ item.title2Desc }}</span> -->
+
+              <!-- 审批通过 -->
+              <!-- <span class="title2Desc" v-else>
+                {{ item.title2Desc }}
+              </span> -->
+
+              <!-- 抄送人/抄送人头像 -->
+              <div class="user-list">
+                <div class="item-right-flex-left-name" v-for="(items, i) in item.candidates" :key="i">
+                  <span class="avatar" v-if="items.name">{{ $formatName(items.name) }}</span>
+                  <span class="avatar-name" v-if="items.name">{{ items.name }}</span>
+                </div>
+              </div>
+
+              <!-- 意见 -->
+              <div v-for="(item2, inde2) in item.candidateFieldInfos" :key="inde2">
+                <span>{{ item2.fieldName }}&nbsp;:&nbsp;</span>
+                <span>{{ item2.fieldValue }}</span>
+              </div>
+
+              <!-- <div v-for="(item4, index4) in this.stepList" :key="inde4">
+                    <span>{{ item2.fieldName }}&nbsp;:&nbsp;</span>
+                    <span>{{ item4.fieldValue }}</span>
+                </div> -->
+
+              <span v-if="item.stepType == 2">
+                <span>审批意见:</span>
+                <span>意见111</span>
+                <!-- {{ item.opinion }} -->
+              </span>
+
+              <div class="examine" v-if="item.stepType == 2">
+                <div class="examine_docx1">
+                  <!-- 图片 -->
+                  <!-- <div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
+                    <ai-image preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 65px; height: 75px; float: left; margin-left: 6px; margin-bottom: 4px; overflow: hidden" />
+                  </div> -->
+
+                  <!-- 附件资料 -->
+                  <!-- <div v-if="item.annexFiles && item.annexFiles.length > 0">
+                    <div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
+                      <ai-image :file="annex" preview>
+                        <u-row justify="space-between">
+                          <span class="docx-name">{{ annex.name }}</span>
+                          <span>{{ annex.fileSizeStr }}</span>
+                        </u-row>
+                      </ai-image>
+                    </div>
+                  </div> -->
+                </div>
+              </div>
+
+              <!-- 附件资料 -->
+              <!-- v-if="item.stepType == 8" -->
+              <!-- <div class="examine" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
+                <div class="examine_docx1">
+                  <div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
+                    <ai-image preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 69px; height: 75px; float: left; margin-left: 4px; margin-bottom: 4px; overflow: hidden" />
+                  </div>
+
+                  <div v-if="item.annexFiles && item.annexFiles.length > 0">
+                    <div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
+                      <ai-image :file="annex" preview>
+                        <u-row justify="space-between">
+                          <span class="docx-name">{{ annex.name }}</span>
+                          <span>{{ annex.fileSizeStr }}</span>
+                        </u-row>
+                      </ai-image>
+                    </div>
+                  </div>
+                </div>
+              </div> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="reject_agree">
+      <!-- v-if="canApproval && list.approvalStatus == 0" -->
+      <div class="reject" @click="agree(0)">拒绝</div>
+      <div class="agre" @click="agree(1)">同意</div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'detail',
   components: {},
-  props: {},
-  data() {
-    return {}
+  computed: {
+    ...mapState(['user']),
+
+    // canApproval() {
+    //   return this.listType == 0
+    // },
+  },
+  created(options) {
+    // this.detailId = options.id
+    // this.listType = options.listType
+    // this.getDetail()
+  },
+  data() {
+    return {
+      detailId: '',
+      list: [],
+      list_tabs: [
+        {
+          name: '申请表单',
+        },
+        {
+          name: '流程信息',
+        },
+      ],
+      current: 0,
+      // inforlist: [],
+      // stepList: [],
+      // dictList: ['hbDepartment'],
+      pageShow: true,
+      // listType: 0,
+      // eventChannel: null,
+    }
+  },
+  // 方法
+  methods: {
+    getDetail() {
+      // this.$http.post(`/app/approv-alapply-info/info-id-table?id=${this.detailId}`).then((res) => {
+      //   if (res.code == 0) {
+      //     if (res.data) {
+      //       this.list = res.data
+      //       console.log(res.data)
+      //       if (res.data.createUserAvatar) {
+      //         console.log(res.data.createUserAvatar)
+      //       }
+      //       this.inforlist = [[], [], [], [], [], [], [], [], [], []]
+      //       res.data.tableInfo.tableFieldInfos.map((item) => {
+      //         if (item.groupIndex) {
+      //           this.inforlist[item.groupIndex - 1].push(item)
+      //         }
+      //         if (item.dictionaryCode) {
+      //           this.dictList.push(item.dictionaryCode)
+      //         }
+      //         if (item.fieldDataType == 5) {
+      //           // item.fieldValue = item.fieldValue.split(',')
+      //         }
+      //       })
+      //       this.$dict.load(this.dictList).then(() => {
+      //         this.pageShow = true
+      //       })
+      //     }
+      //   }
+      // })
+      // this.$http.post(`/app/approv-alapply-info/processinfo-id2?id=${this.detailId}`).then((res) => {
+      //   if (res.code == 0) {
+      //     if (res.data) {
+      //       this.stepList = res.data
+      //     }
+      //   }
+      // })
+    },
+
+    change(i) {
+      this.current = i
+    },
+
+    agree(type) {
+      console.log(type)
+      // this.$http
+      //   .post(`/app/approv-alapply-info/approval-popup?type=${type}&id=${this.detailId}`)
+      //   .then((res) => {
+      //     if (res.code == 0) {
+      //       uni.navigateTo({
+      //         url: `/pages/workonline/approvalopinion?id=${this.detailId}&type=${type}`,
+      //       })
+      //     }
+      //   })
+      //   .catch((e) => {
+      //     uni.showToast({
+      //       title: e,
+      //       icon: 'none',
+      //     })
+      //   })
+    },
   },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {},
-  methods: {},
 }
 </script>
 
 <style scoped lang="scss">
 .detail {
-  height: 100%;
+  .top {
+    background-color: #eff4ff;
+    height: 144px;
+    padding: 32px 0 0 32px;
+    color: #3a7ee2;
+    font-size: 28px;
+    .save {
+      margin-top: 8px;
+      .clicksave {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .form {
+    padding: 32px;
+    background-color: #fff;
+
+    .text {
+      font-size: 40px;
+      font-weight: 800;
+    }
+
+    .people {
+      display: flex;
+      // align-items: center;
+      justify-content: space-between;
+      // margin-top: 20px;
+      height: 122px;
+      line-height: 122px;
+      border-bottom: 1px solid #eee;
+      padding-bottom: 10px;
+
+      .people_msg {
+        .avatar {
+          display: inline-block;
+          width: 84px;
+          height: 84px;
+          line-height: 84px;
+          border-radius: 50%;
+          background-color: #2266ff;
+          color: #fff;
+          font-size: 28px;
+          vertical-align: middle;
+          text-align: center;
+          margin-right: 10px;
+        }
+
+        .name {
+          display: inline-block;
+          width: 145px;
+          vertical-align: middle;
+
+          .name_con {
+            font-size: 30px;
+            height: 40px;
+          }
+
+          .name_createtime {
+            color: #999;
+            font-size: 24px;
+            height: 120px;
+            width: 400px;
+          }
+        }
+      }
+
+      .people_status_ing {
+        color: #ff8822;
+        text-align: center;
+      }
+
+      .people_status_agree {
+        width: 192px;
+        height: 192px;
+
+        img {
+          width: 192px;
+          height: 192px;
+          margin-top: -60px;
+        }
+      }
+
+      .people_status_reject {
+        color: #f14242;
+        text-align: center;
+      }
+    }
+
+    .content {
+      margin-top: 16px;
+
+      .item {
+        margin-top: 16px;
+
+        .item_info {
+          display: inline;
+          font-size: 30px;
+          font-weight: 400;
+          color: #999999;
+
+          .annexs {
+            // display: inline;
+            vertical-align: top;
+          }
+
+          .img_text {
+            display: inline-block;
+            position: relative;
+            width: 180px;
+            height: 175px;
+
+            img {
+              width: 180px;
+              height: 100%;
+            }
+
+            .text {
+              position: absolute;
+              bottom: 14px;
+              left: -12px;
+              font-size: 12px;
+              width: 160px;
+              height: 40px;
+              line-height: 40px;
+              text-align: center;
+              color: #fff;
+              background-color: #000;
+              opacity: 0.4;
+              margin-left: 12px;
+            }
+          }
+        }
+
+        .zhuf {
+          font-size: 30px;
+          font-weight: 400;
+          color: #1365dd;
+        }
+
+        .liangzhu {
+          font-size: 30px;
+          font-weight: 400;
+          color: #343d65;
+        }
+      }
+    }
+  }
+
+  .tabs {
+    // margin-top: 16px;
+  }
+
+  .info {
+    height: 16px;
+    width: 100%;
+    background-color: #eee;
+  }
+
+  // 表单申请
+  .collapse {
+    // margin: 0 32px;
+    // padding: 0 32px;
+    ::v-deep .u-collapse {
+      // background-color: #fff;
+    }
+
+    ::v-deep .u-collapse-head {
+      background-color: #fff;
+      padding: 0 32px;
+      height: 96px;
+    }
+
+    ::v-deep .u-collapse-body {
+      padding: 0 32px;
+      background-color: #fafafa;
+
+      .u-collapse-content {
+        .item_msg {
+          display: flex;
+          // align-items: center;
+          justify-content: space-between;
+          padding: 10px 0;
+
+          .msg_lef {
+            width: 350px;
+            font-size: 30px;
+            font-weight: 400;
+            color: #999999;
+          }
+
+          .msg_lright {
+            max-width: 420px;
+            word-break: break-all;
+            // word-wrap: break-word;
+            margin-right: 0;
+            font-size: 30px;
+            font-weight: 400;
+            color: #333333;
+          }
+        }
+
+        .account {
+          // .account_leave {
+          // }
+          .account_house {
+            margin: 10px 0;
+            color: #333;
+            font-size: 30px;
+          }
+        }
+      }
+    }
+  }
+
+  // 流程信息
+  .workflow {
+    background-color: #fff;
+    padding: 24px 32px 40px 32px;
+
+    // 发起申请步骤
+
+    .step-list {
+      .step-item {
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+        // align-items: center;
+        padding-bottom: 40px;
+
+        .item-left {
+          height: 100%;
+          // position: relative;
+          .item-left-ava-icon {
+            position: relative;
+
+            .avatar {
+              display: inline-block;
+              width: 80px;
+              height: 80px;
+              line-height: 80px;
+              border-radius: 50%;
+              background-color: #2266ff;
+              color: #fff;
+              font-size: 28px;
+              // vertical-align: middle;
+              text-align: center;
+              z-index: 999;
+
+              img {
+                // margin: 16px 0 0 8px;
+                width: 48px;
+                height: 48px;
+              }
+            }
+
+            .icon-yes {
+              position: absolute;
+              top: 50px;
+              left: 50px;
+              width: 36px;
+              height: 36px;
+              // background: #fff;
+              border-radius: 50%;
+              text-align: center;
+              vertical-align: middle;
+
+              img {
+                width: 36px;
+                height: 36px;
+              }
+            }
+
+            .icon-no {
+              position: absolute;
+              top: 50px;
+              left: 50px;
+              width: 36px;
+              height: 36px;
+              background: #ff8822;
+              border-radius: 50%;
+              text-align: center;
+              vertical-align: middle;
+
+              img {
+                width: 36px;
+                height: 36px;
+              }
+            }
+          }
+
+          .solid {
+            // height: 100%;
+            height: calc(100%);
+            border-left: 4px solid #eee;
+            position: absolute;
+            top: 80px;
+            left: 40px;
+          }
+
+          .dashed {
+            // height: 100%;
+            height: calc(100%);
+            border-left: 4px dashed #eee;
+            position: absolute;
+            top: 80px;
+            left: 40px;
+          }
+        }
+
+        .item-right {
+          width: 590px;
+
+          .item-right-flex {
+            // display: flex;
+            // justify-content: space-between;
+            // align-items: center;
+            .block {
+              display: block;
+              // margin-top: 124px;
+            }
+
+            .title2 {
+              display: inline-block;
+            }
+
+            .title2Desc {
+              display: inline-block;
+              color: #2ea222;
+              margin-left: 10px;
+            }
+
+            .title2Desc-ing {
+              display: inline-block;
+              color: #ff8822;
+              margin-left: 10px;
+            }
+
+            .title2Desc-false {
+              color: #f14242;
+              display: inline-block;
+              margin-left: 10px;
+            }
+
+            .user-list {
+              overflow: hidden;
+            }
+
+            .item-right-flex-left-name {
+              margin-top: 20px;
+              float: left;
+              margin-right: 16px;
+              text-align: center;
+
+              .avatar {
+                display: inline-block;
+                width: 64px;
+                height: 64px;
+                line-height: 64px;
+                border-radius: 50%;
+                background-color: #2266ff;
+                color: #fff;
+                font-size: 28px;
+                vertical-align: middle;
+                text-align: center;
+                // margin-left: 8px;
+              }
+
+              .avatar-name {
+                display: block;
+              }
+            }
+
+            .examine {
+              p {
+                margin: 6px 0;
+                font-size: 12px;
+              }
+
+              .examine_img {
+                // display: flex;
+                // flex-wrap: wrap;
+                // justify-content: space-between;
+                // float: left;
+                // img {
+                //   width: 134px;
+                //   height: 136px;
+                //   margin-right: 8px;
+                // }
+                // ::v-deep.AiImage {
+                //   ::v-deep.u-image__image {
+                //     width: 60px !important;
+                //     height: 60px;
+                //   }
+                // }
+              }
+            }
+
+            .examine_docx1 {
+              .docx {
+                display: flex;
+                justify-content: space-between;
+                width: 556px;
+                padding: 16px;
+                background-color: #ddd;
+                margin: 6px 0;
+
+                .docx-name {
+                  width: 440px;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                }
+              }
+            }
+          }
+
+          .time-info {
+            display: flex;
+            justify-content: space-between;
+
+            span {
+              color: #999;
+              font-size: 28px;
+            }
+          }
+        }
+      }
+
+      .step-item:first-child {
+        .item-right {
+          .item-right-flex {
+            .block {
+              margin-top: 0 !important;
+            }
+          }
+        }
+      }
+
+      .step-item:last-child {
+        .dashed {
+          border-left: 0 !important;
+        }
+
+        .solid {
+          border-left: 0 !important;
+        }
+      }
+    }
+  }
+
+  // 抄送人头像
+  .recipients {
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
+    margin: 16px 0 0 120px;
+
+    .recipients_content {
+      // display: inline-block;
+      // width: 64px;
+      // height: 150px;
+      margin-left: 32px;
+
+      .name_ava {
+        display: inline-block;
+        width: 120px;
+        // text-align: center;
+        margin-top: 5px;
+
+        .avatar {
+          display: inline-block;
+          width: 64px;
+          height: 64px;
+          line-height: 64px;
+          border-radius: 50%;
+          background-color: #2266ff;
+          color: #fff;
+          font-size: 28px;
+          vertical-align: middle;
+          text-align: center;
+          // margin-left: 8px;
+        }
+
+        .recipients_name {
+          // display: inline;
+          width: 100px;
+          height: 34px;
+          line-height: 34px;
+          // text-align: center;
+          // background-color: pink;
+          margin-top: 8px;
+        }
+      }
+    }
+
+    // .recipients_content:first-child {
+    //   margin-left: 0;
+    // }
+  }
+}
+
+.reject_agree {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  line-height: 112px;
+  text-align: center;
+  border-top: 1px solid #ddd;
+  z-index: 999;
+  background: #fff;
+
+  .reject {
+    background-color: #fff;
+    width: 50%;
+    color: red;
+  }
+
+  .agre {
+    height: 112px;
+    width: 50%;
+    background-color: #1365dd;
+    color: #fff;
+  }
 }
 </style>