EvenManage/src/components/pages/race/eventCenter/projectJd.vue

<template>
  <div class="center_content">
    <div class="jd_body">
      <div class="jd_title">项目信息</div>
      <div class="jd_content">
        <div class="jd_table">
          <div class="jd_th">
            <div class="th"><span>时间</span></div>
            <div class="th"><span>项目流程</span></div>
            <div class="th"><span>项目详情</span></div>
            <div class="th"><span>项目状态</span></div>
          </div>
          <div class="jd_tr">
            <div class="td">
              <div class="time">
                <div class="active">
                  <span>2023-04-15</span> <span>10:46</span>
                </div>
              </div>
              <div class="time">
                <div><span>2023-04-15</span> <span>10:46</span></div>
              </div>
              <div class="time">
                <div><span>2023-04-15</span> <span>10:46</span></div>
              </div>
              <div class="time">
                <div><span>2023-04-15</span> <span>10:46</span></div>
              </div>
            </div>
            <div class="td">
              <div class="progress">
                <div>
                  <img src="../../../../assets/icon/race/progress.png" alt="" />
                  <span>项目填写</span>
                </div>
                <div>
                  <img src="../../../../assets/icon/race/progress.png" alt="" />
                  <span>项目提交</span>
                </div>
                <div>
                  <img src="../../../../assets/icon/race/progress.png" alt="" />
                  <span>项目评审</span>
                </div>
                <div>
                  <img src="../../../../assets/icon/race/progress.png" alt="" />
                  <span>比赛结果</span>
                </div>
              </div>
            </div>
            <div class="td">
              <div class="detail">
                <span
                  >广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明</span
                >
              </div>
              <div class="detail">
                <span
                  >广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明</span
                >
              </div>
              <div class="detail">
                <span
                  >广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明</span
                >
              </div>
              <div class="detail">
                <span
                  >广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明广东省案例征集说明</span
                >
              </div>
            </div>
            <div class="td">
              <div class="state">
                <span class="active">已完成</span>
              </div>
              <div class="state">
                <span class="active">已完成</span>
              </div>
              <div class="state">
                <span>进行中</span>
              </div>
              <div class="state">
                <span>暂无</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.center_content {
  width: 100%;
  height: 100%;
}

.jd_body {
  /* width: 70%; */
  width: calc(100% - 200px);
  margin: 0 auto 20px;
  height: 100%;
  overflow: auto;
  min-width: 600px;
  /* box-shadow: inset 0px 14px 7px -14px #b9b9b9; */
  padding-bottom: 10px;
  box-sizing: border-box;
}

.jd_title {
  width: 100%;
  height: 200px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  background: #fff;
}

.jd_content {
  margin-top: 20px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.jd_table {
}
.jd_th {
  display: flex;
  align-items: center;
  background: rgb(24 143 209);
  color: #fff;
  height: 50px;
}
.jd_th .th,
.jd_tr .td {
  width: calc(100% / 4);
  display: flex;
  justify-content: center;
}
.jd_tr {
  display: flex;
}

.jd_tr .td {
  flex-direction: column;
  align-items: center;
}

.jd_tr .td .time,
.jd_tr .td .progress div,
.jd_tr .td .detail,
.jd_tr .td .state {
  height: 170px;
  /* overflow: auto; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.jd_tr .td .time div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 18px;
  color: rgb(117, 117, 117);
}
.jd_tr .td .time div span + span {
  margin-top: 5px;
}
.jd_tr .td .time .active {
  background: rgb(50, 173, 241);
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
}
.jd_tr .td .progress {
}
.jd_tr .td .progress div {
}
.jd_tr .td .progress img {
  position: absolute;
  left: -15px;
  z-index: 99;
}
.jd_tr .td .progress span {
  padding: 0 0 0 25px;
}
.jd_tr .td .progress div + div::after {
  content: "";
  height: 100%;
  background: #eee;
  width: 4px;
  position: absolute;
  left: 0;
  transform: translateY(-50%);
}
.jd_tr .td .detail {
  overflow: auto;
  padding: 10px;
  margin: 10px 0;
  height: 150px;
  box-sizing: border-box;
}
.jd_tr .td .state {
  color: rgb(205, 205, 205);
}

.jd_tr .td .state .active {
  color: rgb(106, 106, 106);
}

.jd_tr .td .state .active::after {
  content: "";
  background-image: url(../../../../assets/icon/race/right.png);
  width: 25px;
  height: 25px;
  position: absolute;
  background-size: 100% 100%;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
}
</style>