|
@@ -1,26 +1,103 @@
|
|
|
|
+/**
|
|
|
|
+*@author:Guoxiaohuan
|
|
|
|
+*@date:2020.05.26
|
|
|
|
+*@info 项目概况主页
|
|
|
|
+*/
|
|
<template>
|
|
<template>
|
|
- <div id='overview'>
|
|
|
|
- <div class='overview-box'>
|
|
|
|
- <div class='view-title'>
|
|
|
|
- <nav>
|
|
|
|
- <span></span>
|
|
|
|
- <span>项目基本信息</span>
|
|
|
|
- </nav>
|
|
|
|
- <div class='view-button'>
|
|
|
|
- <img src='../../assets/imgs/file.svg' alt />
|
|
|
|
- 项目资料
|
|
|
|
|
|
+ <div class='overview'>
|
|
|
|
+ <div class='view-title'>
|
|
|
|
+ <nav>
|
|
|
|
+ <span></span>
|
|
|
|
+ <span>项目基本信息</span>
|
|
|
|
+ </nav>
|
|
|
|
+ <div class='view-button'>
|
|
|
|
+ <img src='../../assets/imgs/file.svg' alt />
|
|
|
|
+ 项目资料
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='view-box'>
|
|
|
|
+ <div class='view-left'>
|
|
|
|
+ <div class='lb-left'>
|
|
|
|
+ <rotation :rotationImg='rotationImg'></rotation>
|
|
|
|
+ <div class='lb-icon'></div>
|
|
|
|
+ <img class='lb-img' src='../../assets/imgs/open1.svg' alt />
|
|
|
|
+ </div>
|
|
|
|
+ <div class='lb-bottom'>
|
|
|
|
+ <nav>
|
|
|
|
+ <span></span>
|
|
|
|
+ <span>建筑综合信息</span>
|
|
|
|
+ </nav>
|
|
|
|
+ <p class='place-p1'>三明万达广场</p>
|
|
|
|
+ <p class='place-p2'>
|
|
|
|
+ <span>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼201室福建省三明市梅列区东乾二路1号</span>
|
|
|
|
+ </p>
|
|
|
|
+ <div class='place-bottom'>
|
|
|
|
+ <div class='place-box'>
|
|
|
|
+ <div class='place-left'>
|
|
|
|
+ <span>建筑面积</span>
|
|
|
|
+ <span>建筑高度</span>
|
|
|
|
+ <span>楼层分布</span>
|
|
|
|
+ <span>车位信息</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='place-right'>
|
|
|
|
+ <span>13.07万㎡(地上9.90万㎡、地下3.55万㎡)</span>
|
|
|
|
+ <span>裙房31.22m</span>
|
|
|
|
+ <span>地上5层/地下2层</span>
|
|
|
|
+ <span>地下832个/地上0个</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='place-box'>
|
|
|
|
+ <div class='place-left'>
|
|
|
|
+ <span>租赁面积</span>
|
|
|
|
+ <span>竣工日期</span>
|
|
|
|
+ <span>开业日期</span>
|
|
|
|
+ <span>移交日期</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='place-right'>
|
|
|
|
+ <span>6.45㎡(地上5.82万㎡、地下0.63万㎡)</span>
|
|
|
|
+ <span>2016年11月21日</span>
|
|
|
|
+ <span>2016年11月21日</span>
|
|
|
|
+ <span>2016年11月21日</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class='view-box'>
|
|
|
|
- <div class='view-left'>
|
|
|
|
|
|
+ <div class='view-right'>
|
|
|
|
+ <div class='view-right-box'>
|
|
|
|
+ <div class='lb-right'>
|
|
|
|
+ <rotation :rotationImg='rotationImg'></rotation>
|
|
|
|
+ <div class='lb-icon'></div>
|
|
|
|
+ <img class='lb-img' src='../../assets/imgs/open1.svg' alt />
|
|
|
|
+ </div>
|
|
|
|
+ <div class='lb-right-bottom'>
|
|
|
|
+ <nav>
|
|
|
|
+ <span></span>
|
|
|
|
+ <span>施工单位信息</span>
|
|
|
|
+ </nav>
|
|
|
|
+ <div class='view-right-bottom'>
|
|
|
|
+ <el-table :data='msgData' :height='350'>
|
|
|
|
+ <el-table-column label='序号' width='150' type='index' align='left'></el-table-column>
|
|
|
|
+ <el-table-column label='专业' prop='type' width='150'></el-table-column>
|
|
|
|
+ <el-table-column prop='company' label='施工单位'></el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <div class='view-right-bottom' v-for='(item,index) in rightA' :key='index'>
|
|
|
|
+ <div class='view-right-bottom-l'>{{item.type}}</div>
|
|
|
|
+ <div class='view-right-bottom-r'>{{item.company}}</div>
|
|
|
|
+ </div>-->
|
|
|
|
+ <!-- <div class='view-left-box'>
|
|
<div class='view-left-top'>
|
|
<div class='view-left-top'>
|
|
<div class='view-top-imgL'>
|
|
<div class='view-top-imgL'>
|
|
<rotation :rotationImg='rotationImg'></rotation>
|
|
<rotation :rotationImg='rotationImg'></rotation>
|
|
</div>
|
|
</div>
|
|
<div class='view-top-imgR'>
|
|
<div class='view-top-imgR'>
|
|
<rotation :rotationImg='rotationImg'></rotation>
|
|
<rotation :rotationImg='rotationImg'></rotation>
|
|
- <!-- <i class='i-r'></i> -->
|
|
|
|
- <!-- <img src='../../assets/imgs/open.svg' alt /> -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='view-left-bottom'>
|
|
<div class='view-left-bottom'>
|
|
@@ -77,27 +154,20 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <div class='view-right'>
|
|
|
|
- <nav>
|
|
|
|
- <span></span>
|
|
|
|
- <span>施工单位信息</span>
|
|
|
|
- </nav>
|
|
|
|
- <div class='view-right-bottom' v-for='(item,index) in rightA' :key='index'>
|
|
|
|
- <div class='view-right-bottom-l'>{{item.type}}</div>
|
|
|
|
- <div class='view-right-bottom-r'>{{item.company}}</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ </div>-->
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
-import Rotation from '@/components/rotation'
|
|
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- rightA: [
|
|
|
|
|
|
+ msgData: [
|
|
|
|
+ { type: '总包', company: '中国建筑第一工程局有限公司' },
|
|
|
|
+ { type: '弱电', company: '中国建筑第一工程局有限公司' },
|
|
|
|
+ { type: '消防', company: '中国建筑第一工程局有限公司' },
|
|
|
|
+ { type: '机电', company: '中国建筑第一工程局有限公司' },
|
|
|
|
+ { type: '给排水', company: '南京金鸿装饰工程有限公司、深圳建装业集团股份有限公司广西建工集团有限公司' },
|
|
|
|
+ { type: '精装', company: '中国建筑第一工程局有限公司' },
|
|
|
|
+ { type: '电梯', company: '中国建筑第一工程局有限公司' },
|
|
{ type: '总包', company: '中国建筑第一工程局有限公司' },
|
|
{ type: '总包', company: '中国建筑第一工程局有限公司' },
|
|
{ type: '弱电', company: '中国建筑第一工程局有限公司' },
|
|
{ type: '弱电', company: '中国建筑第一工程局有限公司' },
|
|
{ type: '消防', company: '中国建筑第一工程局有限公司' },
|
|
{ type: '消防', company: '中国建筑第一工程局有限公司' },
|
|
@@ -115,264 +185,30 @@ export default {
|
|
},
|
|
},
|
|
methods: {},
|
|
methods: {},
|
|
components: {
|
|
components: {
|
|
- Rotation
|
|
|
|
|
|
+ // Rotation
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
-#overview {
|
|
|
|
- padding: 16px 20px 22px 20px;
|
|
|
|
- background: #f2f5f7;
|
|
|
|
- height: 100%;
|
|
|
|
- .overview-box {
|
|
|
|
- height: 100%;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- .view-title {
|
|
|
|
- margin-bottom: 16px;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- height: 32px;
|
|
|
|
- padding: 5px 0;
|
|
|
|
- nav {
|
|
|
|
- // padding: 5px 0;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- width: 161px;
|
|
|
|
- span:nth-of-type(1) {
|
|
|
|
- width: 2px;
|
|
|
|
- height: 16px;
|
|
|
|
- background: #025baa;
|
|
|
|
- margin-right: 6px;
|
|
|
|
- display: inline-block;
|
|
|
|
- }
|
|
|
|
- span:nth-of-type(2) {
|
|
|
|
- width: 107px;
|
|
|
|
- height: 22px;
|
|
|
|
- font-size: 14px;
|
|
|
|
- font-family: MicrosoftYaHeiSemibold;
|
|
|
|
- color: #1f2429;
|
|
|
|
- line-height: 19px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .view-button {
|
|
|
|
- width: 106px;
|
|
|
|
- height: 32px;
|
|
|
|
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
|
|
|
|
- font-size: 14px;
|
|
|
|
- color: #ffffff;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- img {
|
|
|
|
- margin-right: 6px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .view-box {
|
|
|
|
- display: flex;
|
|
|
|
- height: 100%;
|
|
|
|
- // height: 100%;
|
|
|
|
- // height: calc(100vh - 45px);
|
|
|
|
- .view-left {
|
|
|
|
- flex: 1;
|
|
|
|
- height: 100%;
|
|
|
|
- // min-width: 855px;
|
|
|
|
- // max-width: 1285px;
|
|
|
|
- margin-right: 15px;
|
|
|
|
- .view-left-top {
|
|
|
|
- // min-height: 327px;
|
|
|
|
- display: flex;
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
- // justify-content: space-between;
|
|
|
|
- .view-top-imgL {
|
|
|
|
- height: 487px;
|
|
|
|
- width: 799px;
|
|
|
|
- // height: calc(100vh - 400px);
|
|
|
|
- // height: 100%;
|
|
|
|
- // flex: 1;
|
|
|
|
- // max-width: 540px;
|
|
|
|
- margin-right: 16px;
|
|
|
|
- background: rgba(216, 216, 216, 1);
|
|
|
|
- // position: relative;
|
|
|
|
- .view-top-imgL-auto {
|
|
|
|
- // width: 100%;
|
|
|
|
- // min-width: 540px;
|
|
|
|
- // height: 100%;
|
|
|
|
- }
|
|
|
|
- // .i-r {
|
|
|
|
- // position: absolute;
|
|
|
|
- // top: 0;
|
|
|
|
- // right: 0;
|
|
|
|
- // width: 32px;
|
|
|
|
- // height: 32px;
|
|
|
|
- // background: rgba(0, 0, 0, 0.6);
|
|
|
|
- // box-shadow: 0px 4px 6px 0px rgba(2, 20, 37, 0.12);
|
|
|
|
- // border-radius: 0px 4px 0px 4px;
|
|
|
|
- // }
|
|
|
|
- // img {
|
|
|
|
- // display: inline-block;
|
|
|
|
- // position: absolute;
|
|
|
|
- // top: 3px;
|
|
|
|
- // right: 0;
|
|
|
|
- // width: 32px;
|
|
|
|
- // height: 32px;
|
|
|
|
- // }
|
|
|
|
- }
|
|
|
|
- .view-top-imgR {
|
|
|
|
- height: 487px;
|
|
|
|
- // flex: 1;
|
|
|
|
- background: #cccccc;
|
|
|
|
- width: 453px;
|
|
|
|
- // position: relative;
|
|
|
|
- // .i-r {
|
|
|
|
- // position: absolute;
|
|
|
|
- // top: 0;
|
|
|
|
- // right: 0;
|
|
|
|
- // width: 32px;
|
|
|
|
- // height: 32px;
|
|
|
|
- // background: rgba(0, 0, 0, 0.6);
|
|
|
|
- // box-shadow: 0px 4px 6px 0px rgba(2, 20, 37, 0.12);
|
|
|
|
- // border-radius: 0px 4px 0px 4px;
|
|
|
|
- // }
|
|
|
|
- // img {
|
|
|
|
- // display: inline-block;
|
|
|
|
- // position: absolute;
|
|
|
|
- // top: 3px;
|
|
|
|
- // right: 0;
|
|
|
|
- // width: 32px;
|
|
|
|
- // height: 32px;
|
|
|
|
- // }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .view-left-bottom {
|
|
|
|
- // height: auto;
|
|
|
|
- height: 449px;
|
|
|
|
- background: #ffffff;
|
|
|
|
- padding: 16px 16px 54px 16px;
|
|
|
|
- nav {
|
|
|
|
- padding: 5px 0;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- width: 161px;
|
|
|
|
- background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
|
|
|
|
- span:nth-of-type(1) {
|
|
|
|
- width: 2px;
|
|
|
|
- height: 16px;
|
|
|
|
- background: #025baa;
|
|
|
|
- margin-right: 6px;
|
|
|
|
- display: inline-block;
|
|
|
|
- }
|
|
|
|
- span:nth-of-type(2) {
|
|
|
|
- width: 107px;
|
|
|
|
- height: 22px;
|
|
|
|
- font-size: 14px;
|
|
|
|
- font-family: MicrosoftYaHeiSemibold;
|
|
|
|
- color: #025baa;
|
|
|
|
- line-height: 19px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .place-p {
|
|
|
|
- margin: 16px 0;
|
|
|
|
- height: 22px;
|
|
|
|
- font-size: 14px;
|
|
|
|
- font-family: MicrosoftYaHei;
|
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
|
- line-height: 19px;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- img {
|
|
|
|
- margin-right: 3px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .place-hr {
|
|
|
|
- width: 823px;
|
|
|
|
- height: 1px;
|
|
|
|
- background: #979797;
|
|
|
|
- display: block;
|
|
|
|
- margin-bottom: 16px;
|
|
|
|
- }
|
|
|
|
- .place-bottom {
|
|
|
|
- display: flex;
|
|
|
|
- .place-bottom-row {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-around;
|
|
|
|
- div {
|
|
|
|
- span {
|
|
|
|
- display: block;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- div:nth-of-type(1) {
|
|
|
|
- margin-right: 16px;
|
|
|
|
- span {
|
|
|
|
- width: 56px;
|
|
|
|
- font-size: 14px;
|
|
|
|
- font-family: MicrosoftYaHei;
|
|
|
|
- color: rgba(100, 108, 115, 1);
|
|
|
|
- line-height: 32px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- div:nth-of-type(2) {
|
|
|
|
- margin-right: 16px;
|
|
|
|
- span {
|
|
|
|
- font-size: 14px;
|
|
|
|
- font-family: MicrosoftYaHei;
|
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
|
- line-height: 32px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .view-right {
|
|
|
|
- // flex: 1;
|
|
|
|
- min-width: 456px;
|
|
|
|
- max-width: 595px;
|
|
|
|
- padding: 16px;
|
|
|
|
- background: #ffffff;
|
|
|
|
- nav {
|
|
|
|
- padding: 5px 0;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- width: 161px;
|
|
|
|
- background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
|
|
|
|
- span:nth-of-type(1) {
|
|
|
|
- width: 2px;
|
|
|
|
- height: 16px;
|
|
|
|
- background: #025baa;
|
|
|
|
- margin-right: 6px;
|
|
|
|
- display: inline-block;
|
|
|
|
- }
|
|
|
|
- span:nth-of-type(2) {
|
|
|
|
- width: 107px;
|
|
|
|
- height: 22px;
|
|
|
|
- font-size: 14px;
|
|
|
|
- font-family: MicrosoftYaHeiSemibold;
|
|
|
|
- color: #025baa;
|
|
|
|
- line-height: 19px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .view-right-bottom {
|
|
|
|
- display: flex;
|
|
|
|
- margin-top: 12px;
|
|
|
|
- .view-right-bottom-l {
|
|
|
|
- min-width: 42px;
|
|
|
|
- margin-right: 16px;
|
|
|
|
- font-size: 14px;
|
|
|
|
- font-family: MicrosoftYaHei;
|
|
|
|
- color: #646c73;
|
|
|
|
- line-height: 32px;
|
|
|
|
- }
|
|
|
|
- .view-right-bottom-r {
|
|
|
|
- font-size: 14px;
|
|
|
|
- font-family: MicrosoftYaHei;
|
|
|
|
- color: #1f2429;
|
|
|
|
- line-height: 32px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+@import '../../assets/css/rotation.css';
|
|
|
|
+</style>
|
|
|
|
+<style lang="less">
|
|
|
|
+.el-table thead {
|
|
|
|
+ height: 16px;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
|
+ line-height: 16px;
|
|
|
|
+ background: rgba(245, 246, 247, 1);
|
|
|
|
+}
|
|
|
|
+.el-table td,
|
|
|
|
+.el-table th {
|
|
|
|
+ padding: 3px 0;
|
|
|
|
+}
|
|
|
|
+.el-table--enable-row-transition .el-table__body td {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
|
+ line-height: 24px;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|