app-govern/pages/index/index.vue

<template>
    <Cn-page :loading="loading">
        <view slot="body">
            <view class="index">
                <div class="header">
                    <div class="header-content">
                        <div class="header-content-item">
                            <div class="header-content-item-value">38</div>
                            <div class="header-content-item-label">正常设备</div>
                        </div>
                        <div class="header-content-item">
                            <div class="header-content-item-value">5</div>
                            <div class="header-content-item-label">报警设备</div>
                        </div>
                        <div class="header-content-item">
                            <div class="header-content-item-value">3</div>
                            <div class="header-content-item-label">离线设备</div>
                        </div>
                    </div>
                </div>
                <uni-card title="基础设备" sub-title="副标题" extra="APF" v-for="item in 3" :key="item" @click="jump"
                    thumbnail="/static/device.png">
                    <text>设备基础信息 </text>
                </uni-card>
                <uni-load-more status="nomore"></uni-load-more>
                <uni-fab ref="fab" horizontal="right" vertical="bottom" :content="content" @trigger="trigger" />
            </view>
        </view>
    </Cn-page>
</template>
<script>
export default {
    data () {
        return {
            loading: false,
            content: [{
                iconPath: '/static/device.png',
                text: '添加设备',
            }, {
                iconPath: '/static/wangguan.png',
                text: '添加网关',
            },
            ]
        }
    },
    methods: {
        send () {
            uni.createPushMessage({
                title: '灿能',
                content: '灿能推送',
                success: function (res) {
                    console.log('推送成功')
                },
                fail: function (res) {
                    console.log('推送失败')
                }
            })
        },
        jump () {
            uni.navigateTo({
                url: '/pages/device/detailAPF'
            })
        },
        trigger (e) {
            if (e.index === 0) {
                uni.navigateTo({
                    url: '/pages/device/new'
                })
            }
        }
    },
    onShow () {
        setTimeout(() => {
            this.loading = false
        }, 500);
    }
}
</script>
<style lang="scss">
.index {
    padding: 34rpx 0;

    .header {
        margin: 0 30rpx;
        background: #fff;
        border-radius: 12rpx;
        background: $uni-color-primary;
        padding: 30rpx 10rpx 40rpx;

        .header-content {
            display: flex;
            justify-content: space-around;

            .header-content-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #fff;
                font-size: 28rpx;

                .header-content-item-value {
                    margin-bottom: 10rpx;
                }
            }
        }
    }
}
</style>