tall4-pc/src/components/tall/center/ProjectDetail.vue

<template>
  <div class="navbar flex items-center justify-between">
    <div class="project-name">项目名称</div>
    <div class="project-action">
      <img />
      <img @click="toShowMask" />
    </div>
  </div>

  <div class="role-list flex items-center">
    <div class="role-box relative">
      <div class="role-name">角色名称</div>
      <div class="line-box absolute flex justify-center"><div class="line"></div></div>
    </div>
  </div>

  <div class="global">
    <div class="global-box">
      <div class="global-task">任务1</div>
      <div class="global-task">任务1</div>
      <div class="global-task">任务1</div>
      <div class="global-task">任务1</div>
    </div>
  </div>
  <div class="task-list">
    <div class="task-box">
      <div class="task-time flex items-center justify-between">
        <div class="flex items-center">
          <img />
          <span>10日 09:00</span>
        </div>
        <div class="task-action"></div>
      </div>

      <div class="task-info">
        <div>
          <div class="task-card">
            <div class="task-name">任务名</div>
            <div class="task-con">
              <div>
                <a-checkbox @change="onChange"><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
              </div>
              <div>
                <a-checkbox @change="onChange"><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
              </div>
              <div>
                <a-checkbox @change="onChange"><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
              </div>
              <div>
                <a-checkbox @change="onChange"><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
              </div>
              <div>
                <a-checkbox @change="onChange"><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
              </div>
            </div>
            <div class="open-icon" @click="openCard">
              <img />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="task-box">
      <div class="task-time flex items-center justify-between">
        <div class="flex items-center">
          <img />
          <span>10日 09:00</span>
        </div>
        <div class="task-action"></div>
      </div>

      <div class="task-info">
        <div>
          <div class="task-card">
            <div class="task-name">任务名</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style scoped>
.navbar {
  padding: 0 16px;
  height: 44px;
}

.project-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.role-list {
  padding: 0 16px;
  height: 36px;
  border-bottom: 1px solid #cccccc;
}

.role-box {
  height: 36px;
}

.role-name {
  font-size: 14px;
  line-height: 36px;
  font-weight: 600;
  color: #1890ff;
}

.role-box .line-box {
  width: 100%;
  bottom: 0;
}

.line-box .line {
  width: 16px;
  height: 2px;
  background-color: #1890ff;
}

.global {
  padding: 16px;
}

.global-box {
  border: 1px solid #cccccc;
  border-radius: 10px;
  padding: 12px 16px;
}

.global-task {
  padding: 8px 0;
}

.task-list {
  padding: 0 16px;
}

.task-box {
}

.task-time {
  height: 32px;
}

.task-time img {
  width: 23px;
  height: 23px;
  margin-right: 16px;
}

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

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

.task-info > div {
  padding-left: 27px;
  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;
}

.child-project-name {
  color: #607d8b;
}
</style>