<template> <div class="container"> <!-- 顶部信息 --> <div class="containertop"> <div class="topleft"> <img src="../../../assets/images/detailsicon/1.png" alt=""> <span>规划信息</span> </div> <div class="topright"> <el-button type="primary" size="medium" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;"> <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;"> 编辑 </el-button> <el-button type="primary" size="medium" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;"> <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;"> 导出 </el-button> </div> </div> <!-- 内容区 --> <div class="content"> <div class="descriptionsdiv"> <el-descriptions class="margin-top" :column="4" border> <el-descriptions-item> <template slot="label"> 总用地面积(平方米) </template> THi SIP高端装备工业港 </el-descriptions-item> <el-descriptions-item> <template slot="label"> 容积率 </template> 泰凌医药(中国)有限公司 </el-descriptions-item> <el-descriptions-item> <template slot="label"> 总建筑面积(平方米) </template> 项目法人单位性质 </el-descriptions-item> <el-descriptions-item> <template slot="label"> 标准层建筑面积(平方米) </template> kooriookami </el-descriptions-item> <el-descriptions-item> <template slot="label"> 计容积率建筑面积(平方米) </template> 18100000000 </el-descriptions-item> <el-descriptions-item> <template slot="label"> 建筑密度(%) </template> 苏州市 </el-descriptions-item> <el-descriptions-item> <template slot="label"> 绿地率(%) </template> kooriookami </el-descriptions-item> <el-descriptions-item> <template slot="label"> 建筑栋数(栋): </template> 18100000000 </el-descriptions-item> <el-descriptions-item> <template slot="label"> 地上建筑面积(平方米) </template> 苏州市 </el-descriptions-item> <el-descriptions-item> <template slot="label"> 地下建筑面积(平方米) </template> kooriookami </el-descriptions-item> <el-descriptions-item> <template slot="label"> 最高建筑层数(层) </template> 18100000000 </el-descriptions-item> <el-descriptions-item> <template slot="label"> 最高建筑高度(米) </template> 苏州市 </el-descriptions-item> <el-descriptions-item> <template slot="label"> 机动车停车位(辆) </template> kooriookami </el-descriptions-item> <el-descriptions-item> <template slot="label"> 非机动车停车位(辆) </template> 18100000000 </el-descriptions-item> <el-descriptions-item> <template slot="label"> 防火等级 </template> 苏州市 </el-descriptions-item> <el-descriptions-item> <template slot="label"> 规划文件 </template> kooriookami </el-descriptions-item> </el-descriptions> </div> </div> </div> </template> <script> export default { props: { size: { type: String, default: '' } } } </script> <style scoped> .container { display: flex; flex-direction: column; width: 100%; background-color: #FFFFFF; box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1); border-radius: 0.5rem 0.5rem 0.5rem 0.5rem; } .content { padding: 1rem; display: flex; } .containertop { height: auto; display: flex; justify-content: space-between; padding: .7rem 0; padding: .5rem; border-bottom: 1px solid #E5E5E5; } .topleft { width: 8rem; display: flex; gap: 0.4rem; align-items: center; } .topleft img { width: 0.81rem; height: 0.81rem; } .topleft span { width: auto; height: 0.88rem; font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; font-weight: 500; font-size: 0.88rem; color: #3D424C; line-height: 0.88rem; text-align: right; font-style: normal; text-transform: none; } .picturediv { width: 18.31rem; height: 25.31rem; background-color: lightblue; } .descriptionsdiv{ width: 100%; margin-left: 1rem; height: auto; } .two-row-item{ height: 20rem; } </style>