118 lines
2.3 KiB
Vue
118 lines
2.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
const list = [{
|
||
|
|
name: '园区名称',
|
||
|
|
value: 'xx科技园',
|
||
|
|
}, {
|
||
|
|
name: '简称年份',
|
||
|
|
value: '2021年',
|
||
|
|
}, {
|
||
|
|
name: '物业公司',
|
||
|
|
value: 'xx物业公司',
|
||
|
|
}, {
|
||
|
|
name: '建筑面积',
|
||
|
|
value: '10000平方米',
|
||
|
|
}, {
|
||
|
|
name: '占地面积',
|
||
|
|
value: '10000平方米',
|
||
|
|
}, {
|
||
|
|
name: '容积率',
|
||
|
|
value: '10000',
|
||
|
|
}]
|
||
|
|
|
||
|
|
const digitals = [
|
||
|
|
{
|
||
|
|
title: '总面积(m2)',
|
||
|
|
value: 87512,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '楼栋数量',
|
||
|
|
value: 1000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '办公人数',
|
||
|
|
value: 1000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '总入住企业',
|
||
|
|
value: 1000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '入住率',
|
||
|
|
value: 1000,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '总人数',
|
||
|
|
value: 1000,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
const digitalsV2 = [
|
||
|
|
{
|
||
|
|
title: '公寓',
|
||
|
|
value: 123,
|
||
|
|
unit: '加',
|
||
|
|
icon: 'solar:airbuds-remove-line-duotone',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '停车位',
|
||
|
|
value: 123,
|
||
|
|
unit: '加',
|
||
|
|
icon: 'solar:airbuds-remove-line-duotone',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '超市',
|
||
|
|
value: 123,
|
||
|
|
unit: '加',
|
||
|
|
icon: 'solar:airbuds-remove-line-duotone',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '扒拉',
|
||
|
|
value: 123,
|
||
|
|
unit: '加',
|
||
|
|
icon: 'solar:airbuds-remove-line-duotone',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '餐厅',
|
||
|
|
value: 123,
|
||
|
|
unit: '加',
|
||
|
|
icon: 'solar:airbuds-remove-line-duotone',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '休想学',
|
||
|
|
value: 123,
|
||
|
|
unit: '加',
|
||
|
|
icon: 'solar:airbuds-remove-line-duotone',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<FrameV1 title="园区简介">
|
||
|
|
<div class="">
|
||
|
|
<div class="grid grid-cols-2 gap-1 px-6">
|
||
|
|
<div v-for="(item, index) in list" :key="index" class="grid grid-cols-5 ">
|
||
|
|
<div class="col-span-2 font-medium text-[12px] text-[#E4F3FF] opacity-60">
|
||
|
|
{{ item.name }} :
|
||
|
|
</div>
|
||
|
|
<div class="col-span-3 font-medium text-[14px] text-[#D9F1FD]">
|
||
|
|
{{ item.value }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-3 mt-4 gap-x-5">
|
||
|
|
<DigitalV1 v-for="(item, index) in digitals" :key="index" v-bind="item" />
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-center mt-6 mb-4">
|
||
|
|
<TitleV1 title="园区环境" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="w-full">
|
||
|
|
<div class="grid grid-cols-2 mx-auto gap-x-4 w-fit -gap-1">
|
||
|
|
<DigitalV2 v-for="(item, index) in digitalsV2" :key="index" v-bind="item" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</FrameV1>
|
||
|
|
</template>
|