页面切图

2023-02-23 08:44:46 +08:00
parent 95db305cee
commit 89f0e79ceb
25 changed files with 830 additions and 148 deletions
--- a/pages/gateway/detail.vue
+++ b/pages/gateway/detail.vue
@@ -0,0 +1,109 @@
+<template>
+    <Cn-page :loading='loading' noPadding>
+        <view slot='body'>
+            <view class='detail device'>
+                <view class="header">
+                    <image src="/static/test2.pic.png" mode="widthFix" style="width: 100%;" />
+                </view>
+                <view class="title">基本信息</view>
+                <view class="des">
+                    <text>名称：监测网关</text>
+                    <text class="ml20">项目：监测</text>
+                </view>
+                <view class="des">
+                    <text>设备型号：PQS-882</text>
+                    <text class="ml20">版本号：v1.0.0</text>
+                </view>
+                <view class="title mb20 m340">设备列表
+                    <view class="footer-btn" @click="newDevice">注册设备</view>
+                </view>
+                <uni-card :title="item.name" :sub-title="item.project" :extra="item.type"
+                    v-for="(item, index) in deviceList" :key="index" style="margin-top:4rpx" @click="goDevice(item)"
+                    thumbnail="/static/device.png" padding="0">
+                </uni-card>
+                <uni-load-more status="nomore"></uni-load-more>
+                <view style="height:20rpx"></view>
+            </view>
+        </view>
+    </Cn-page>
+</template>
+<script>
+
+export default {
+
+    data () {
+        return {
+            loading: false,
+            deviceList: [
+                {
+                    name: '设备1',
+                    des: '设备描述1',
+                    type: 'APF',
+                    project: '监测',
+                },
+                {
+                    name: '设备2',
+                    des: '设备描述2',
+                    type: 'DVR',
+                    project: '监测'
+                },
+            ]
+        }
+    },
+    methods: {
+        newDevice () {
+            uni.navigateTo({
+                url: '/pages/gateway/newDevice'
+            })
+        },
+        goDevice (item) {
+            uni.navigateTo({
+                url: `/pages/device/${item.type}/detail`
+            })
+        }
+    },
+    onLoad (options) {
+    },
+
+}
+</script>
+<style lang='scss'>
+.detail {
+
+    // background: $uni-theme-white;
+    .header {
+        position: relative;
+
+
+    }
+
+    .title {
+        display: flex;
+        justify-content: space-between;
+        padding: 20rpx 20rpx 0;
+        font-size: 36rpx;
+        color: #111;
+        font-weight: 700;
+        .footer-btn {
+            padding: 0 20rpx;
+            height: 50rpx;
+            background-color: #007aff;
+            font-size: 24rpx;
+            color: #fff;
+            text-align: center;
+            line-height: 50rpx;
+            border-radius: 10rpx;
+        }
+    }
+
+    .des {
+        padding: 20rpx 20rpx 0;
+        font-size: 28rpx;
+        color: #333;
+    }
+
+    .content {
+        box-sizing: border-box;
+
+    }
+}</style>