yunxing 4 years ago
parent
commit
bf163293db
5 changed files with 217 additions and 86 deletions
  1. 5 4
      postcss.config.js
  2. 2 2
      src/router/index.ts
  3. 3 1
      src/style/common.less
  4. 0 79
      src/views/Overview.vue
  5. 207 0
      src/views/overview/index.vue

+ 5 - 4
postcss.config.js

@@ -2,10 +2,11 @@ module.exports = {
     plugins: {
         // autoprefixer: {}, // 用来自动处理浏览器前缀的一个插件。 // VueCLI 内部已经配置了 autoprefixer 插件
         'postcss-pxtorem': {
-            rootValue({ file }) {
-                // TODO: rootValue
-                return file.indexOf('vant') !== -1 ? 37.5 : 41.4 // vant 使用375, 其他使用设计图  414?
-            },
+            // rootValue({ file }) {
+            //     // TODO: rootValue
+            //     return file.indexOf('vant') !== -1 ? 37.5 : 41.4 // vant 使用375, 其他使用设计图  414?
+            // },
+            rootValue: 37.5,
             unitPrecision: 5, //小数位
             minPixelValue: 1, //转换的最小单位
             selectorBlackList: [], //忽略的样式, 正则 // vant样式忽略

+ 2 - 2
src/router/index.ts

@@ -16,7 +16,7 @@ const routes: Array<RouteConfig> = [
     {
         path: '/',
         name: 'Overview',
-        component: () => import(/* webpackChunkName: "overview" */ '../views/Overview.vue'),
+        component: () => import(/* webpackChunkName: "overview" */ '../views/overview/index.vue'),
         meta: {
             keepAlive: true,
             showTabbar: true,
@@ -26,7 +26,7 @@ const routes: Array<RouteConfig> = [
     {
         path: '/overview',
         name: 'overview',
-        component: () => import(/* webpackChunkName: "overview" */ '../views/Overview.vue'),
+        component: () => import(/* webpackChunkName: "overview" */ '../views/overview/index.vue'),
         meta: {
             keepAlive: true,
             showTabbar: true,

+ 3 - 1
src/style/common.less

@@ -22,9 +22,11 @@ button,
 input,
 textarea,
 th,
-td {
+td,
+div {
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
 }
 
 body,

+ 0 - 79
src/views/Overview.vue

@@ -1,79 +0,0 @@
-<template>
-    <div class='overview'>
-        <p class='test'>Overview</p>
-        <van-button @click='openPreview' type='primary'>测试</van-button>
-        <ImagePreview1 :visible.sync='showImgPreview' :imgList='imgList' />
-    </div>
-</template>
-<script>
-import Vue from 'vue'
-import { Button, ImagePreview } from 'vant'
-Vue.use(Button).use(ImagePreview)
-import ImagePreview1 from '../components/ImagePreview'
-export default {
-    name: 'Overview',
-    props: {},
-    components: { ImagePreview1 },
-    data() {
-        return {
-            showImgPreview: false,
-            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',
-            ],
-        }
-    },
-    watch: {
-        showImgPreview(val) {
-            console.log('========')
-            console.log(val)
-        },
-    },
-    beforeMount() {},
-    mounted() {
-        console.log('项目概况页面mounted')
-        console.table({ a: 'sssss' })
-        console.error('sdfasdfasdf')
-        // debugger
-    },
-    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% - 50px);
-    // background-color: #87cefa;
-    .img-preview {
-        width: 100%;
-    }
-}
-
-@media screen and (orientation: portrait) {
-    .test {
-        color: lightcoral;
-    }
-}
-
-@media screen and (orientation: landscape) {
-    .test {
-        color: lightgreen;
-    }
-}
-</style>

+ 207 - 0
src/views/overview/index.vue

@@ -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>