<template>
  <div class="list-box">
    <div class="task-box">
      <div class="task-time flex items-center justify-between">
        <div class="flex items-center">
          <div class="circular"></div>
          <span>2020年08月16日 13:30</span>
        </div>
        <div class="task-action"></div>
      </div>

      <div class="task-info">
        <div>
          <div class="task-card">
            <div class="task-name cursor-pointer flex justify-between items-center">
              <span class="leading-none color-3">第一次科研需求分析会议</span>
              <RightOutlined style="color: #666" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="task-box">
      <div class="task-time flex items-center justify-between">
        <div class="flex items-center">
          <div class="circular"></div>
          <span>2020年08月16日 13:30</span>
        </div>
        <div class="task-action"></div>
      </div>

      <div class="task-info">
        <div>
          <div class="task-card">
            <div class="task-name cursor-pointer flex justify-between items-center">
              <span class="leading-none color-3">第一次科研需求分析会议</span>
              <RightOutlined style="color: #666" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { RightOutlined } from '@ant-design/icons-vue';
</script>

<style scoped>
.list-box {
  padding: 10px 16px 50px;
  overflow-y: auto;
}

.task-box {
}

.task-time {
  height: 32px;
}

.task-time .circular {
  margin-right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #1890ff;
}

.task-time span {
  font-size: 14px;
  color: #595959;
}

.task-info {
  margin: 8px 0;
  padding-left: 8px;
}

.task-info > div {
  padding-left: 15px;
  border-left: 1px solid #d2d2d2;
}

.task-info .task-card {
  padding: 16px;
  border-radius: 8px;
  -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
}

.task-con {
  margin-top: 16px;
}

.task-con > div {
  height: 30px;
}
</style>
