app-govern/pages/gateway/detail.vue

<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">项目：XXX项目1</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" v-if="userInfo.role != '2' && userInfo.role != '5'" @click="newDevice">注册设备
                    </view>
                </view>
                <uni-card :title="'设备' + item" :sub-title="'XXX项目1'" extra="用能" v-for="item in 2" :key="item"
                    @click="goDevice" padding="0" thumbnail="/static/device.png">
                </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,
            userInfo: {},
            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) {
        this.userInfo = uni.getStorageSync('userInfo')
    },

}
</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>