页面切图

2023-02-20 14:19:28 +08:00
parent 7d28b3476a
commit 5e69ab1da6
50 changed files with 1136 additions and 213 deletions
--- a/pages/project/detail.vue
+++ b/pages/project/detail.vue
@@ -0,0 +1,126 @@
+<template>
+    <Cn-page :loading='loading' noPadding>
+        <view slot='body'>
+            <view class='detail'>
+                <view class="header">
+                    <view class="header-title">{{ project }}</view>
+                    <view class="header-des">项目详情。。。。。。。。</view>
+                </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">
+                        <uni-card title="基础设备" sub-title="副标题" extra="APF" v-for="item in 10" :key="item" @click="jump"
+                            thumbnail="/static/real_time_data.png">
+                            <text>设备基础信息 </text>
+                        </uni-card>
+                    </view>
+                    <view style="padding: 0 20rpx" v-show="navMenuActive == 1">
+                        <uni-list>
+                            <uni-list-item title="张三" note="2023-02-10 14:55" thumb="/static/head.png" thumb-size="lg">
+                                <template v-slot:footer>
+                                    <view class="footer-btn mt20" style="background:#e47470" @click="del">移除</view>
+                                    <!-- <view class="footer-btn mt20 ml10" @click="goUserDetail">查看</view> -->
+                                </template>
+                            </uni-list-item>
+                            <uni-list-item title="李四" note="2023-02-10 14:55" thumb="/static/head.png" thumb-size="lg">
+                                <template v-slot:footer>
+                                    <view class="footer-btn mt20" style="background:#e47470" @click="del">移除</view>
+                                    <!-- <view class="footer-btn mt20 ml10" @click="goUserDetail">查看</view> -->
+                                </template>
+                            </uni-list-item>
+                        </uni-list>
+                    </view>
+                    <uni-load-more status="nomore"></uni-load-more>
+                </view>
+            </view>
+        </view>
+    </Cn-page>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            loading: false,
+            project: '',
+            navMenuList: [{
+                text: '设备列表'
+            }, {
+                text: '子用户列表'
+            }],
+            navMenuActive: 0
+        }
+    },
+    methods: {
+        navMenuClick (index) {
+            this.navMenuActive = index
+        },
+        goUserDetail () {
+            uni.navigateTo({
+                url: '/pages/mine/userDetail'
+            })
+        },
+        del () {
+            console.log('del');
+            uni.showModal({
+                title: '提示',
+                content: '确定要移除该成员吗？',
+                success: function (res) {
+                    if (res.confirm) {
+                        console.log('用户点击确定')
+                    } else if (res.cancel) {
+                        console.log('用户点击取消')
+                    }
+                }
+            })
+        }
+    },
+    onLoad (option) {
+        this.project = option.project
+        setTimeout(() => {
+            // 获取nav高度
+            uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
+                this.navHeight = rect.height
+            }).exec()
+        }, 1000);
+        // uni.setNavigationBarTitle({ title: this.project })
+    }
+}
+</script>
+<style lang='scss'>
+.detail {
+    .content {
+        box-sizing: border-box;
+        padding-bottom: 20rpx;
+    }
+
+    .header {
+        padding: 20rpx 20rpx 0;
+
+        .header-title {
+            font-size: 40rpx;
+            margin-bottom: 10rpx;
+        }
+
+        .header-des {
+            font-size: 28rpx;
+            color: #666;
+        }
+    }
+
+
+    .footer-btn {
+        padding: 0 20rpx;
+        height: 50rpx;
+        background-color: #007aff;
+        font-size: 24rpx;
+        color: #fff;
+        text-align: center;
+        line-height: 50rpx;
+        border-radius: 10rpx;
+    }
+}
+</style>