个人中心切图

This commit is contained in:
仲么了
2023-01-13 16:32:56 +08:00
parent 36bcbab647
commit 25482cb612
41 changed files with 1090 additions and 75 deletions

View File

@@ -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>

View File

@@ -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;
}
}
}