152 lines
3.4 KiB
Vue
152 lines
3.4 KiB
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>
|