<template>
  <div class="detail">
    <div class="task">
      <div class="task_title">群发客户群</div>
      <div class="task_content">
        <div class="item">
          <span>任务名称</span>
          <span>居民社保最新政策</span>
        </div>
        <div class="item">
          <span>创建人</span>
          <span>居民社保最新政策</span>
        </div>
        <div class="item">
          <span>所在部门</span>
          <span>居民社保最新政策</span>
        </div>
        <div class="item">
          <span>群发时间</span>
          <span>居民社保最新政策</span>
        </div>
      </div>
    </div>
    <div class="info">
      <div class="scope">
        <span>群发范围</span>
        <span>按条件筛选的全部X个客户群</span>
      </div>
      <div class="content">
        <p>群发内容</p>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {},
  onShow() {
    document.title = "群发审批"
  }
}
</script>

<style lang="scss" scoped>
.detail {
  padding: 32px;
  box-sizing: border-box;
  .task {
    margin-bottom: 24px;
    background: #FFF;
    border-radius: 8px;
    box-shadow: inset 0px -1px 0px 0px #DDDDDD;
    .task_title {
      padding: 26px 32px;
      box-sizing: border-box;
      border-bottom: 2px solid #DDDDDD;
    }
    .task_content {
      padding: 0 32px 26px 32px;
      box-sizing: border-box;
      .item {
        display: flex;
        padding-top: 26px;
        box-sizing: border-box;
        span:first-child {
          width: 160px;
          color: #999999;
        }
        span:last-child {
          width: calc(100% - 160px);
        }
      }
    }
  }

  .info {
    background: #FFF;
    border-radius: 8px;
    padding: 26px 32px;
    box-sizing: border-box;
    .scope {
      display: flex;
      margin-bottom: 16px;
      span:first-child {
        width: 160px;
        color: #999;
      }
      span:last-child {
        width: calc(100% - 160px);
      }
    }
    .content {
      p {
        color: #999;
      }
    }
  }
}
</style>