RuralDatabase/apps/web/components/section/one.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>