页面切图

2023-02-06 13:34:15 +08:00
parent d1a1396164
commit 6cd009f621
29 changed files with 12591 additions and 112 deletions
--- a/pages/device/detailAPF.vue
+++ b/pages/device/detailAPF.vue
@@ -0,0 +1,138 @@
+<template>
+    <Cn-page :loading='loading' noPadding>
+        <view slot='body'>
+            <view class='detail'>
+                <view class="header"> </view>
+                <view class="des">
+                    <text>设备基础信息</text>
+                    <text class="ml10">设备状态</text>
+                </view>
+                <view class="nav">
+                    <view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
+                        v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
+                    </view>
+                </view>
+                <view class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
+                    <view v-show="navMenuActive == 0">
+                        <basic></basic>
+                    </view>
+                    <view v-show="navMenuActive == 1">
+                        <xieBo></xieBo>
+                    </view>
+                    <view v-show="navMenuActive == 2">
+                        <view>
+                            <text>设备功率信息</text>
+                        </view>
+                    </view>
+                    <view v-show="navMenuActive == 3">
+                        <view>
+                            <text>设备波形信息</text>
+                        </view>
+                    </view>
+                    <view v-show="navMenuActive == 4">
+                        <view>
+                            <text>设备I/O信息</text>
+                        </view>
+                    </view>
+                    <view style="height:20rpx"></view>
+                </view>
+            </view>
+        </view>
+    </Cn-page>
+</template>
+<script>
+import basic from "./APF/basic.vue";
+import xieBo from "./APF/xieBo.vue";
+
+export default {
+    components: {
+        basic,
+        xieBo
+    },
+    data () {
+        return {
+            loading: false,
+            navMenuActive: 0,
+            navHeight: 0,
+            navMenuList: [{
+                text: '基本'
+            }, {
+                text: '谐波'
+            }, {
+                text: '功率'
+            }, {
+                text: '波形'
+            }, {
+                text: 'I/O'
+            }]
+        }
+    },
+    methods: {
+        navMenuClick (idx) {
+            this.navMenuActive = idx
+        },
+        init () {
+            setTimeout(() => {
+                // 获取nav高度
+                uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
+                    this.navHeight = rect.height
+                }).exec()
+            }, 1000);
+        }
+    },
+    onLoad (options) {
+        this.init()
+    },
+
+}
+</script>
+<style lang='scss'>
+.detail {
+
+    // background: #fff;
+    .header {
+        height: 400rpx;
+        background: $uni-color-primary;
+    }
+
+    .des {
+        padding: 20rpx 20rpx 0;
+        font-size: 28rpx;
+        color: #999;
+    }
+
+    .nav {
+        position: sticky;
+        top: 0;
+        left: 0;
+        padding: 20rpx;
+        display: flex;
+        background: rgb(243, 244, 245);
+
+        .nav-menu {
+            padding: 10rpx 20rpx;
+            margin-left: 20rpx;
+            font-size: 28rpx;
+            border-radius: 8rpx;
+            background: #fff;
+
+            &:first-of-type {
+                margin-left: 0;
+            }
+
+            &-active {
+                background: $uni-color-primary;
+                color: #fff;
+            }
+        }
+
+    }
+
+    .content {
+        box-sizing: border-box;
+        padding: 0 20rpx;
+    }
+
+
+}
+</style>