|
@@ -1,13 +1,378 @@
|
|
|
<template>
|
|
|
<div id='overview'>
|
|
|
- <p>项目基本参数</p>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <div class='view-box'>
|
|
|
+ <div class='view-left'>
|
|
|
+ <div class='view-left-top'>
|
|
|
+ <div class='view-top-imgL'>
|
|
|
+ <rotation :rotationImg='rotationImg'></rotation>
|
|
|
+ </div>
|
|
|
+ <div class='view-top-imgR'>
|
|
|
+ <rotation :rotationImg='rotationImg'></rotation>
|
|
|
+ <!-- <i class='i-r'></i> -->
|
|
|
+ <!-- <img src='../../assets/imgs/open.svg' alt /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='view-left-bottom'>
|
|
|
+ <nav>
|
|
|
+ <span></span>
|
|
|
+ <span>建筑综合信息</span>
|
|
|
+ </nav>
|
|
|
+ <p class='place-p'>
|
|
|
+ <span>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼201室福建省三明市梅列区东乾二路1号</span>
|
|
|
+ </p>
|
|
|
+ <span class='place-hr'></span>
|
|
|
+ <div class='place-bottom'>
|
|
|
+ <div class='place-bottom-row'>
|
|
|
+ <div>
|
|
|
+ <span>项目名称</span>
|
|
|
+ <span>建筑高度</span>
|
|
|
+ <span>楼层分布</span>
|
|
|
+ <span>车位信息</span>
|
|
|
+ </div>
|
|
|
+ <div style='min-width:172px;'>
|
|
|
+ <span>三明万达广场</span>
|
|
|
+ <span>裙房31.22m</span>
|
|
|
+ <span>地上5层/地下2层</span>
|
|
|
+ <span>地上832个/地下0个</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='place-bottom-row'>
|
|
|
+ <div>
|
|
|
+ <span>竣工日期</span>
|
|
|
+ <span>开业日期</span>
|
|
|
+ <span>移交日期</span>
|
|
|
+ </div>
|
|
|
+ <div style='min-width:172px;'>
|
|
|
+ <span>2016年11月21日</span>
|
|
|
+ <span>2016年12月30日</span>
|
|
|
+ <span>2017年04月30日</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='place-bottom-row'>
|
|
|
+ <div>
|
|
|
+ <span style='margin-bottom:32px'>建筑面积</span>
|
|
|
+ <span>租赁面积</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>
|
|
|
+ 13.07万㎡
|
|
|
+ 其中地上9.90万㎡、地下3.55万㎡
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ 6.45㎡
|
|
|
+ 其中地上5.82万㎡,地下0.63万㎡
|
|
|
+ </span>
|
|
|
+ </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>
|
|
|
</template>
|
|
|
-<style lang="less">
|
|
|
+<script>
|
|
|
+import Rotation from '@/components/rotation'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ rightA: [
|
|
|
+ { type: '总包', company: '中国建筑第一工程局有限公司' },
|
|
|
+ { type: '弱电', company: '中国建筑第一工程局有限公司' },
|
|
|
+ { type: '消防', company: '中国建筑第一工程局有限公司' },
|
|
|
+ { type: '机电', company: '中国建筑第一工程局有限公司' },
|
|
|
+ { type: '给排水', company: '南京金鸿装饰工程有限公司、深圳建装业集团股份有限公司广西建工集团有限公司' },
|
|
|
+ { type: '精装', company: '中国建筑第一工程局有限公司' },
|
|
|
+ { type: '电梯', company: '中国建筑第一工程局有限公司' }
|
|
|
+ ],
|
|
|
+ rotationImg: [
|
|
|
+ require('@/assets/imgs/survey_pop1.png'),
|
|
|
+ require('@/assets/imgs/survey_pop2.png'),
|
|
|
+ require('@/assets/imgs/survey_pop1.png')
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {},
|
|
|
+ components: {
|
|
|
+ Rotation
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
#overview {
|
|
|
- color: #1f2429;
|
|
|
- p {
|
|
|
- font-size: 16px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|