data_visual/src/views/Overview/ProjectDetail.vue

<template>
  <ChartContainer class="project-detail" title="项目详情">
    <div class="body grid grid-cols-2 px-5">
      <div
        v-for="(item, index) in dataList"
        :style="`visibility: ${item.hidden ? 'hidden' : 'visible'};`"
        class="detail-item flex flex-col justify-between py-4"
      >
        <div class="title-row flex items-center">
          <div class="icon"></div>
          <div class="title ml-2">{{ item.title }}</div>
        </div>
        <div class="content">{{ item.content }}</div>
      </div>
    </div>
  </ChartContainer>
</template>
<script setup>
import ChartContainer from "@/components/ChartContainer.vue";
import { ref } from "vue";

const resp = {
  RESP: "王五",
  PROID: "HT6YXM-202209302022090009",
  UPDATEDATE: 1664515833000,
  PRONAME: "测试办公楼扩建",
  TASKTITLE: "材料出库",
  RBDATE: "2016-01-01 00:00:00",
  BINDID: "3d657d15-2685-4361-b315-95b5dfdaacc9",
  ORGID: "8911e732-b42a-4556-853f-ad32761bcbee",
  EDATE: "2023-01-30 00:00:00",
  BDATE: "2012-03-01 00:00:00",
  ANNEX: "",
  MILESTONEFLAG: 1,
  UPDATEUSER: "system1",
  PROCESSDEFID: "obj_c9074b46bca14282a3fd3a7869d18baf",
  TASKCONTENT: "将整理好得原材料出库",
  CREATEDATE: 1664515833000,
  REDATE: "2016-01-01 00:00:00",
  TASKID: "RWJD-202209302022090003",
};

const dataList = ref([
  {
    title: "项目名称",
    content: "六院信息化工程",
  },
  {
    hidden: true,
  },
  {
    title: "项目编号",
    content: "11293425960",
  },
  {
    title: "项目负责人",
    content: "辛弃疾",
  },
  {
    title: "建设单位",
    content: "碧海蓝天建筑施工",
  },
  {
    title: "合同开竣工日期",
    content: "2022.03.01-2023.03.01",
  },
  {
    title: "项目名称",
    content: "六院信息化工程",
  },
  {
    title: "项目名称",
    content: "六院信息化工程",
  },
  {
    title: "项目名称",
    content: "六院信息化工程",
  },
  {
    title: "项目名称",
    content: "六院信息化工程",
  },
  {
    title: "项目名称",
    content: "六院信息化工程",
  },
  {
    title: "项目名称",
    content: "六院信息化工程",
  },
  {
    title: "项目名称",
    content: "六院信息化工程",
  },
  {
    title: "项目名称",
    content: "六院信息化工程",
  },
  {
    title: "项目名称",
    content: "六院信息化工程",
  },
  {
    title: "项目名称",
    content: "六院信息化工程",
  },
]);
</script>
<style lang="scss" scoped>
.project-detail {
  width: 465px;
  .body {
    margin-top: 24px;
    height: 744px;
    background-image: linear-gradient(
      180deg,
      rgba(4, 53, 99, 0.4) 0%,
      rgba(4, 53, 99, 0.13) 100%
    );
    .detail-item {
      .title-row {
        .icon {
          width: 4px;
          height: 14px;
          background-image: linear-gradient(180deg, #abd6ff 0%, #379eff 100%);
          border-radius: 2px;
        }
        .title {
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #b1e1ff;
          letter-spacing: 0;
          line-height: 24px;
          text-shadow: 0 0 9px #158eff;
          font-weight: 400;
        }
      }
      .content {
        // margin-top: 16px;
        font-family: PingFangSC-Regular;
        font-size: 18px;
        color: #ffffff;
        letter-spacing: 0;
        line-height: 26px;
        text-shadow: 0 0 9px #158eff;
        font-weight: 400;
      }
    }
  }
}
</style>