|
@@ -0,0 +1,207 @@
|
|
|
+<template>
|
|
|
+ <div class='overview'>
|
|
|
+ <!-- <van-button @click='openPreview' type='primary'>测试</van-button> -->
|
|
|
+ <!-- <ImagePreview1 class='overview-img-preview' :visible.sync='showImgPreview' :imgList='imgList' /> -->
|
|
|
+ <!-- 轮播 -->
|
|
|
+ <div class='my-swipe'>
|
|
|
+ <van-swipe :autoplay='0' indicator-color='white'>
|
|
|
+ <van-swipe-item v-for='(image, index) in imgList' :key='index'>
|
|
|
+ <van-image fit='contain' :src='image' />
|
|
|
+ </van-swipe-item>
|
|
|
+ </van-swipe>
|
|
|
+ </div>
|
|
|
+ <!-- tab页签 -->
|
|
|
+ <van-tabs class='overview-tabs' v-model='active' color='#025BAA' title-active-color='#025BAA' :line-width='120' :line-height='2'>
|
|
|
+ <!-- 建筑综合信息 -->
|
|
|
+ <van-tab class='buiding-tab' title='建筑综合信息'>
|
|
|
+ <div class='building-info'>
|
|
|
+ <div class='cell'>
|
|
|
+ <span class='left'>项目名称:</span>
|
|
|
+ <span class='right'>三明万达广场</span>
|
|
|
+ </div>
|
|
|
+ <div class='cell'>
|
|
|
+ <span class='left'>项目地址:</span>
|
|
|
+ <span class='right'>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼办公室</span>
|
|
|
+ </div>
|
|
|
+ <div class='cell'>
|
|
|
+ <span class='left'>建筑面积:</span>
|
|
|
+ <span class='right'>13.07万㎡,其中地上9.09万㎡、地下3.55万㎡</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class='cell'>
|
|
|
+ <span class='left'>建筑高度:</span>
|
|
|
+ <span class='right'>裙房31.22万m</span>
|
|
|
+ </div>
|
|
|
+ <div class='cell'>
|
|
|
+ <span class='left'>楼层分布:</span>
|
|
|
+ <span class='right'>地上5层/地下2层</span>
|
|
|
+ </div>
|
|
|
+ <div class='cell'>
|
|
|
+ <span class='left'>车位信息:</span>
|
|
|
+ <span class='right'>地下823个/地上0个</span>
|
|
|
+ </div>
|
|
|
+ <div class='cell'>
|
|
|
+ <span class='left'>租赁面积:</span>
|
|
|
+ <span class='right'>6.45㎡,其中地上5.82万㎡、地下0.63万㎡</span>
|
|
|
+ </div>
|
|
|
+ <div class='cell'>
|
|
|
+ <span class='left'>开业时间:</span>
|
|
|
+ <span class='right'>2016年11月21日</span>
|
|
|
+ </div>
|
|
|
+ <div class='cell'>
|
|
|
+ <span class='left'>移交时间:</span>
|
|
|
+ <span class='right'>6.45㎡,其中地上5.82万㎡、地下0.63万㎡</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title='施工单位信息'></van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ <div class='bottom'>
|
|
|
+ <span v-if='false'>近一个月,重要维保8条,重要维修3条</span>
|
|
|
+ <span v-else>近一个月,说明书无更新</span>
|
|
|
+ <van-icon v-show='false' class='building-arrow' name='arrow' size='14px' />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import Vue from 'vue'
|
|
|
+import { Button, Icon, Swipe, SwipeItem, Lazyload, Image as VanImage, Tab, Tabs } from 'vant'
|
|
|
+Vue.use(Button).use(Icon).use(Swipe).use(SwipeItem).use(Lazyload).use(VanImage)
|
|
|
+Vue.use(Tab).use(Tabs)
|
|
|
+import ImagePreview1 from '@/components/ImagePreview'
|
|
|
+// import ConstructionUnitInfo from './ConstructionUnitInfo'
|
|
|
+export default {
|
|
|
+ name: 'Overview',
|
|
|
+ props: {},
|
|
|
+ components: { ImagePreview1 },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showImgPreview: true,
|
|
|
+ imgList: ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg'],
|
|
|
+ active: 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ showImgPreview(val) {
|
|
|
+ console.log('========')
|
|
|
+ console.log(val)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeMount() {},
|
|
|
+ mounted() {
|
|
|
+ console.log('项目概况页面mounted')
|
|
|
+ console.table({ a: 'sssss' })
|
|
|
+ console.error('sdfasdfasdf')
|
|
|
+ // debugger
|
|
|
+ this.openPreview()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openPreview() {
|
|
|
+ this.showImgPreview = true
|
|
|
+ this.imgList = [
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
+ ].slice(0, parseInt(Math.random() * 8 + 1))
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.overview {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 150px);
|
|
|
+ // background-color: lightblue;
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // 轮播图
|
|
|
+ .my-swipe {
|
|
|
+ display: block;
|
|
|
+ width: 343px;
|
|
|
+ height: 160px;
|
|
|
+ margin: 12px auto;
|
|
|
+ .van-swipe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .van-swipe-item {
|
|
|
+ .van-image {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // tabs切换
|
|
|
+ .overview-tabs {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 180px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ /deep/ .van-tabs__content {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ // 建筑综合信息
|
|
|
+ .buiding-tab {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .building-info {
|
|
|
+ width: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 16px;
|
|
|
+ .cell {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 20px;
|
|
|
+ margin-top: 12px;
|
|
|
+ display: flex;
|
|
|
+ .left {
|
|
|
+ width: 70px;
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ color: #333;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部固定条
|
|
|
+ .bottom {
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ bottom: 50px;
|
|
|
+ left: 0;
|
|
|
+ height: 44px;
|
|
|
+ padding: 0 16px;
|
|
|
+ background: #fff;
|
|
|
+ color: #025baa;
|
|
|
+ font-size: 14px;
|
|
|
+ .building-arrow {
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (orientation: portrait) {
|
|
|
+ .test {
|
|
|
+ color: lightcoral;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (orientation: landscape) {
|
|
|
+ .test {
|
|
|
+ color: lightgreen;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|