个人中心切图
This commit is contained in:
@@ -1,53 +1,43 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">{{ title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<Cn-page :loading="loading">
|
||||
<view slot="body">
|
||||
<view class="index">
|
||||
<Cn-grid title="实时消息">
|
||||
<Cn-grid-item background="#fff" src="/static/message.png" text="暂态事件"
|
||||
@click="jump('/pages/home/zantaishijian')"></Cn-grid-item>
|
||||
<Cn-grid-item background="#fff" src="/static/message.png" text="稳态越限"
|
||||
@click="jump('/pages/home/wentaiyuexian')"></Cn-grid-item>
|
||||
<Cn-grid-item background="#fff" src="/static/message.png" text="终端状态"
|
||||
@click="jump('/pages/home/zhongduanzhuangtai')"></Cn-grid-item>
|
||||
</Cn-grid>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
const mqtt = require('mqtt')
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
title: '灿能'
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
onLoad () {
|
||||
console.log(mqtt);
|
||||
},
|
||||
methods: {
|
||||
|
||||
jump (url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
},
|
||||
onShow () {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
<style lang="scss">
|
||||
.index {
|
||||
padding: 34rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,14 +2,22 @@
|
||||
<view :loading="loading">
|
||||
<view class="mine">
|
||||
<view class="mine-header" @click="jump('basic')">
|
||||
<image mode="aspectFill" class="mine-header-head" src="/static/head.jpg" />
|
||||
<view class="mine-header-name hide-txt">灿能电力</view>
|
||||
<image mode="aspectFill" class="mine-header-head" src="/static/head.png" />
|
||||
<view class="mine-header-name hide-txt">
|
||||
<view>灿能电力</view>
|
||||
<view class="tag">普通用户</view>
|
||||
</view>
|
||||
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
||||
</view>
|
||||
<view class="mine-nav" @click="jump('server')"
|
||||
style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c;">
|
||||
<view class="mine-nav" @click="jump('upgrade')">
|
||||
<image mode="aspectFill" class="mine-nav-icon" src="/static/server.png" />
|
||||
<view class="mine-nav-label">客服</view>
|
||||
<view class="mine-nav-label">角色升级</view>
|
||||
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
||||
</view>
|
||||
<view class="mine-nav" @click="jump('message')"
|
||||
style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c;">
|
||||
<image mode="aspectFill" class="mine-nav-icon" src="/static/message2.png" />
|
||||
<view class="mine-nav-label">个人消息</view>
|
||||
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
||||
</view>
|
||||
<view class="mine-nav" @click="jump('setup')" style="margin-top:20rpx;border-bottom: none; ">
|
||||
@@ -17,6 +25,10 @@
|
||||
<view class="mine-nav-label">设置</view>
|
||||
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
||||
</view>
|
||||
<uni-popup ref="inputDialog" type="dialog">
|
||||
<uni-popup-dialog ref="inputClose" mode="input" title="角色升级" placeholder="请输入六位邀请码"
|
||||
@confirm="upgrade"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -31,12 +43,23 @@ export default {
|
||||
methods: {
|
||||
init () {
|
||||
},
|
||||
upgrade (code) {
|
||||
console.log(code);
|
||||
uni.showToast({
|
||||
title: '升级成功',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
jump (type) {
|
||||
switch (type) {
|
||||
case 'login':
|
||||
uni.navigateTo({
|
||||
url: `/pages/login/login`
|
||||
url: `/pages/user/login`
|
||||
})
|
||||
break;
|
||||
case 'upgrade':
|
||||
this.$refs.inputDialog.open()
|
||||
break;
|
||||
default:
|
||||
uni.navigateTo({
|
||||
url: `/pages/mine/${type}`
|
||||
@@ -75,6 +98,12 @@ export default {
|
||||
font-size: 36rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
|
||||
.tag {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user