From 50ee7232f3c98fe24a1f2e31dba9508cfec14887 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Fri, 21 Feb 2025 17:35:39 +0800
Subject: [PATCH] 模型预览
---
src/views/ProjectView.vue | 305 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 305 insertions(+), 0 deletions(-)
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
new file mode 100644
index 0000000..f0d31c4
--- /dev/null
+++ b/src/views/ProjectView.vue
@@ -0,0 +1,305 @@
+<template>
+ <div class="project-info">
+ <!-- 上部分 - 图片 -->
+ <div
+ class="w-full h-[4vh] mb-[1vh]"
+ :style="{
+ backgroundImage: `url(${titleImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: '100% 100%'
+ }"
+ >
+ </div>
+
+ <!-- 下部分 - 内容区域 -->
+ <div
+ class="content flex-1 px-[16px] py-[14px] overflow-y-auto"
+ :style="{
+ backgroundImage: `url(${backgroundImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: 'cover'
+ }"
+ >
+ <!-- 建筑面积 -->
+ <div
+ class="w-full h-[50px] mb-[10px] flex items-center justify-evenly"
+ :style="{
+ backgroundImage: `url(${contentImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: '100% 100%'
+ }"
+ >
+ <img
+ src="../assets/images/backgrounds/jianzhumianji.png"
+ alt=""
+ class="h-[30px] w-[40px]"
+ >
+ <div class="text-white text-[14px]">一期总建筑面积</div>
+ <div class="flex items-center justify-center">
+ <div class="text-[24px] text-[#FFD500] font-bold mr-[8px]">103.18</div>
+ <div class="text-[14px] text-white">万㎡</div>
+ </div>
+ </div>
+
+ <!-- 目标日期 -->
+ <div
+ class="w-full h-[50px] flex items-center justify-evenly"
+ :style="{
+ backgroundImage: `url(${contentImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: '100% 100%'
+ }"
+ >
+ <img
+ src="../assets/images/backgrounds/mubiaowancheng.png"
+ alt=""
+ class="h-[30px] w-[40px]"
+ >
+ <div class="text-white text-[14px]">目标完成日期</div>
+ <div class="flex items-center justify-center">
+ <div class="text-[24px] text-[#00FFFF] font-bold">2028-12-01</div>
+ </div>
+ </div>
+
+ <!-- 项目名称 -->
+ <div
+ class="w-full h-[30px] mt-[20px] mb-[10px]"
+ :style="{
+ backgroundImage: `url(${bgImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: '100% 100%'
+ }"
+ >
+ <div class="text-white text-[14px] ml-[40px] leading-[35px]">项目名称：北京交通大学雄安校区</div>
+ </div>
+
+ <div class="text-white text-[14px] tracking-[1px] leading-[24px]">
+ 北京交通大学雄安校区选址位于河北雄安新区第五组团及启动区。东至规划绿地、城市道路NB6，南至城市道路ED34、城市道路EA2，西至城市道路ND32、城市道路NA11，北至城市道路EA1。
+ </div>
+
+ <img
+ src="../assets/images/backgrounds/map.png"
+ alt=""
+ class="w-full h-[196px] mt-[20px]"
+ >
+
+ <!-- 参建单位 -->
+ <div
+ class="w-full h-[30px] mt-[20px] mb-[10px]"
+ :style="{
+ backgroundImage: `url(${bgImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: '100% 100%'
+ }"
+ >
+ <div class="text-white text-[14px] ml-[40px] leading-[35px]">参建单位</div>
+ </div>
+
+ <!-- 参建单位统计 -->
+ <div class="flex justify-between mb-[10px]">
+ <div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mr-[8px] mb-[10px] lineB">
+ <div class="text-white text-[14px] flex flex-col items-center justify-center">
+ <div class="text-[16px] text-[#00FFFF]">3</div>
+ <div class="text-[12px] text-[#ddd]">建设单位</div>
+ </div>
+ <img
+ src="../assets/images/backgrounds/jianshedanwei.png"
+ alt=""
+ class="h-[40px] w-[60px]"
+ >
+ </div>
+ <div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mb-[10px] lineB">
+ <div class="text-white text-[14px] flex flex-col items-center justify-center">
+ <div class="text-[16px] text-[#00FFFF]">5</div>
+ <div class="text-[12px] text-[#ddd]">施工单位</div>
+ </div>
+ <img
+ src="../assets/images/backgrounds/shigongdanwei.png"
+ alt=""
+ class="h-[40px] w-[60px]"
+ >
+ </div>
+ </div>
+
+ <div class="flex justify-between">
+ <div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mr-[8px] mb-[10px] lineB">
+ <div class="text-white text-[14px] flex flex-col items-center justify-center">
+ <div class="text-[16px] text-[#00FFFF]">1</div>
+ <div class="text-[12px] text-[#ddd]">监理单位</div>
+ </div>
+ <img
+ src="../assets/images/backgrounds/jianlidanwei.png"
+ alt=""
+ class="h-[40px] w-[60px]"
+ >
+ </div>
+ <div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mb-[10px] lineB">
+ <div class="text-white text-[14px] flex flex-col items-center justify-center">
+ <div class="text-[16px] text-[#00FFFF]">1</div>
+ <div class="text-[12px] text-[#ddd]">设计单位</div>
+ </div>
+ <img
+ src="../assets/images/backgrounds/shejidanwei.png"
+ alt=""
+ class="h-[40px] w-[60px]"
+ >
+ </div>
+ </div>
+
+ <!-- 表格搜索 -->
+ <div class="w-full flex items-center justify-between mb-[10px] mt-[20px]">
+ <el-input
+ v-model="searchText"
+ placeholder="搜索"
+ class="search-item w-full rounded-[2px]"
+ prefix-icon="el-icon-search"
+ >
+ </el-input>
+ </div>
+
+ <!-- 表格 -->
+ <div
+ class="w-full min-h-[20vh] px-[8px] py-[10px]"
+ :style="{
+ backgroundImage: `url(${tableImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: '100% 100%'
+ }"
+ >
+ <table class="w-full text-white text-[14px] overflow-y-auto">
+ <thead>
+ <tr class="table-header">
+ <th class="py-[8px] text-left pl-[12px]">类型</th>
+ <th class="py-[8px] text-left">阶段</th>
+ <th class="py-[8px] text-left">名称</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr
+ v-for="item in tableData"
+ :key="item.id"
+ class="border-b border-[rgba(255,255,255,0.1)]"
+ >
+ <td class="py-[8px] pl-[12px]">{{ item.type }}</td>
+ <td class="py-[8px]">{{ item.stage }}</td>
+ <td class="py-[8px]">{{ item.name }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'ProjectView',
+ data() {
+ return {
+ searchText: '',
+ backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png', import.meta.url).href,
+ titleImage: new URL('@/assets/images/titles/xiangmu.png', import.meta.url).href,
+ contentImage: new URL('@/assets/images/titles/xiangmu_bg.png', import.meta.url).href,
+ bgImage: new URL('@/assets/images/titles/title_second.png', import.meta.url).href,
+ tableImage: new URL('@/assets/images/backgrounds/table_bg.png', import.meta.url).href,
+ tableData: [
+ {
+ name: '建设单位名称单位',
+ stage: '一标',
+ type: '建设单位'
+ },
+ {
+ name: '建设单位名称单位',
+ stage: '一标',
+ type: '建设单位'
+ },
+ {
+ name: '建设单位名称单位',
+ stage: '一标',
+ type: '建设单位'
+ },
+ {
+ name: '建设单位名称单位',
+ stage: '一标',
+ type: '建设单位'
+ },
+ ]
+ };
+ },
+}
+</script>
+
+<style scoped lang="scss">
+.project-info {
+ width: 100%;
+ height: calc(100vh - 100px);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.header {
+ width: 100%;
+}
+
+.content {
+ flex: 1;
+ width: 100%;
+
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 0.2);
+ border-radius: 3px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: rgba(0, 0, 0, 0.1);
+ }
+}
+
+.lineB {
+ background: radial-gradient(25% 60% at 50% 50%, rgb(26 56 89 / 50%) 0%, rgb(93 174 255 / 15%) 100%);
+ border-radius: 2px;
+ border: 1px solid;
+ border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)) 1 1;
+}
+
+.search-item {
+ ::v-deep .el-input__wrapper {
+ background-color: rgba(26, 56, 89, 0.5);
+ box-shadow: none;
+ }
+
+ ::v-deep .el-input__icon {
+ line-height: 35px;
+ }
+
+ ::v-deep .el-input__inner {
+ color: white;
+ }
+
+ ::v-deep .el-input__inner::placeholder {
+ color: rgba(255, 255, 255, 0.5);
+ }
+
+ ::v-deep .el-input__prefix-icon {
+ color: rgba(255, 255, 255, 0.5);
+ }
+}
+
+.table-header {
+ height: 32px;
+ background: linear-gradient(180deg, #3068A5 0%, #1E4066 100%);
+ box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.2);
+}
+</style>
--
Gitblit v1.9.3