893 lines
23 KiB
Vue
893 lines
23 KiB
Vue
<template>
|
|
<view class="tab-bar-user">
|
|
<view class="nav-tops">
|
|
<view class="infos">
|
|
<view class="img">
|
|
<image v-if="token != '' && token != null" :src="avatarUrl ? avatarUrl : '/static/avatar.png'"
|
|
mode="aspectFill" @click="handleToAvatar"></image>
|
|
<image v-else src="/static/avatar.png" mode="aspectFill" @click="handleToAvatar"></image>
|
|
</view>
|
|
<view class="title-wrap">
|
|
<!-- #ifdef H5-->
|
|
<view class="name-wrap">
|
|
<span v-if="token != '' && token != null" class="nickName"
|
|
@click="gotoAccount()">{{profile.nickName ? profile.nickName : $tt('user.visitor')}}</span>
|
|
<span v-else @click="handleGotoLogin">{{$tt('user.login')}}</span>
|
|
<span style="margin-left: 16rpx;" v-if="wxStatus">
|
|
<u-icon name="/static/wechat_bind.png" size="22" color="#fff"
|
|
@click="handleUnbindWeChart"></u-icon>
|
|
</span>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef APP-PLUS || MP-WEIXIN-->
|
|
<view class="name-wrap">
|
|
<span v-if="token != '' && token != null" class="nickName"
|
|
@click="gotoAccount()">{{profile.nickName ? profile.nickName : $tt('user.visitor')}}</span>
|
|
<span v-else @click="handleGotoLogin">{{$tt('user.login')}}</span>
|
|
<span style="margin-left: 10px;" v-if="token != '' && token != null">
|
|
<u-icon v-if="wxStatus" name="/static/wechat_bind.png" size="22" color="#fff"
|
|
@click="handleUnbindWeChart"></u-icon>
|
|
<u-icon name="/static/wechat_unbind.png" size="22" color="#fff" @click="handleBindWeChart"
|
|
v-else></u-icon>
|
|
</span>
|
|
</view>
|
|
<!-- #endif -->
|
|
<view class="desc">
|
|
{{$tt('user.openIOT')}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="main">
|
|
<view class="users">
|
|
<view class="u-item" @click="gotoScada()">
|
|
<u-icon name="/static/user/scada_black_blue.png" size="25" color="#fff" labelPos="bottom"
|
|
labelSize="11" space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
|
|
<view class="u-tit">{{$tt('user.configuration')}}</view>
|
|
</view>
|
|
<view class="u-item" @click="gotoScene()">
|
|
<u-icon name="/static/user/scene_black_blue.png" size="25" color="#fff" labelPos="bottom"
|
|
labelSize="11" space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
|
|
<view class="u-tit">{{$tt('user.addScene')}}</view>
|
|
</view>
|
|
<view class="u-item" @click="gotoGroup()">
|
|
<u-icon name="/static/user/group_black_blue.png" size="25" color="#fff" labelPos="bottom"
|
|
labelSize="11" space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
|
|
<view class="u-tit">{{$tt('user.groupManagement')}}</view>
|
|
</view>
|
|
<!-- <view class="u-item" @click="gotoEmulator()">
|
|
<u-icon name="/static/user/message_black_blue.png" size="25" color="#fff" labelPos="bottom"
|
|
labelSize="11" space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
|
|
<view class="u-tit">{{$tt('user.platformMsg')}}</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="list">
|
|
<view class="group">
|
|
<!-- 多语言 -->
|
|
<view class="item" @click="gotoLanguage()">
|
|
<view class="left">
|
|
<u-icon class="iconfont" name="/static/user/language_blue.png" size="16"></u-icon>
|
|
<text class="text">{{$tt('user.language')}}</text>
|
|
</view>
|
|
<view class="right">
|
|
<u-icon class="iconfont" name="arrow-right" size="12" color="#D8D8D8"></u-icon>
|
|
</view>
|
|
</view>
|
|
<!-- 密码修改 -->
|
|
<view class="item" @click="gotoResetPsd()" v-if="token != '' && token != null">
|
|
<view class="left">
|
|
<u-icon class="iconfont" name="/static/user/password_blue.png" size="16"></u-icon>
|
|
<text class="text">{{$tt('user.updatePassword')}}</text>
|
|
</view>
|
|
<view class="right"><u-icon class="iconfont" name="arrow-right" size="12"
|
|
color="#D8D8D8"></u-icon>
|
|
</view>
|
|
</view>
|
|
<!-- 华普 -->
|
|
<!-- <view class="item" @click="handleGotoHp">
|
|
<view class="left">
|
|
<u-icon class="iconfont" name="/static/user/hp_logo.png" size="18"></u-icon>
|
|
<text class="text">{{$tt('login.HuapuIoT')}}</text>
|
|
</view>
|
|
<view class="right"><u-icon class="iconfont" name="arrow-right" size="12"
|
|
color="#D8D8D8"></u-icon>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<!-- <view class="group"> -->
|
|
<!-- app下载 -->
|
|
<!-- #ifdef H5 || MP-WEIXIN -->
|
|
<!-- <view class="item" @click="handleGotoAppDownload">
|
|
<view class="left">
|
|
<u-icon class="iconfont" name="/static/user/download_blue.png" size="16"></u-icon>
|
|
<text class="text">{{$tt('user.appDownload')}}</text>
|
|
</view>
|
|
<view class="right">
|
|
<u-icon class="iconfont" name="arrow-right" size="12" color="#D8D8D8"></u-icon>
|
|
</view>
|
|
</view> -->
|
|
<!-- #endif -->
|
|
<!-- app检查更新 -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<!-- <view class="item" @click="handleGotoAppUpdate">
|
|
<view class="left">
|
|
<u-icon class="iconfont" name="/static/user/download_blue.png" size="16"></u-icon>
|
|
<text class="text">{{$tt('user.appUpdate')}}</text>
|
|
</view>
|
|
<view class="right">
|
|
<u-icon class="iconfont" name="arrow-right" size="12" color="#D8D8D8"></u-icon>
|
|
</view>
|
|
</view> -->
|
|
<!-- #endif -->
|
|
<!-- 关于我们 -->
|
|
<!-- <view class="item" @click="handleGotoAbout">
|
|
<view class="left">
|
|
<u-icon class="iconfont" name="/static/user/about_blue.png" size="16"></u-icon>
|
|
<text class="text">{{$tt('user.about')}}</text>
|
|
</view>
|
|
<view class="right"><u-icon class="iconfont" name="arrow-right" size="12"
|
|
color="#D8D8D8"></u-icon>
|
|
</view>
|
|
</view> -->
|
|
<!-- </view> -->
|
|
<view class="group" v-if="token != '' && token != null">
|
|
<view class="logout" @click="handleExit">
|
|
<view class="left">
|
|
<text class="text">{{$tt('user.exitAccount')}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="logout" @click="handleUnsubscribe()">
|
|
<view class="left">
|
|
<text style="color: #C2C2C2;" class="text">{{$tt('user.signOut')}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="other-wrap">
|
|
<!-- 退出系统提示框 -->
|
|
<u-modal :show="show" :title="$tt('user.confirmExit')" :showCancelButton="true" @cancel="cancelExit"
|
|
@confirm="confirmExit"></u-modal>
|
|
<!-- 注销账号提示 -->
|
|
<u-modal :show="isUnsubscribe" :title="$tt('user.confirmSignOut')" :content="$tt('user.signOutAlert')"
|
|
:cancelText="$tt('user.notWriteOff')" :confirmText="$tt('user.confirmWriteOff')"
|
|
:showCancelButton="true" confirmColor="#606266" cancelColor="#2979ff" @cancel="isUnsubscribe = false"
|
|
@confirm="confirmUnsubscribe"></u-modal>
|
|
<!-- 解除微信绑定提示框 -->
|
|
<u-modal :show="isBindWeChart" :title="$tt('user.confirmWxBind')" :content="$tt('user.wxBindAlertTitle')"
|
|
:cancelText="$tt('user.notBind')" :confirmText="$tt('user.confirmBind')" :showCancelButton="true"
|
|
@cancel="isBindWeChart = false" @confirm="confirmBindWeChart"></u-modal>
|
|
<!-- 提示登录 -->
|
|
<u-modal :show="showModel" :content="$tt('user.notice')" @confirm="confirmGotoLogin"
|
|
@cancel="() => showModel = false" showCancelButton></u-modal>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from 'vuex';
|
|
import projectConfig from '@/env.config.js';
|
|
import {
|
|
logout,
|
|
secureBind,
|
|
wechatBind
|
|
} from '@/apis/modules/common';
|
|
import {
|
|
deviceRelateUser
|
|
} from '@/apis/modules/device';
|
|
import {
|
|
versionCompare
|
|
} from '@/utils/common.js'
|
|
|
|
export default {
|
|
components: {},
|
|
computed: {
|
|
...mapState(['isLoggedIn']) // 获取登录状态
|
|
},
|
|
data() {
|
|
return {
|
|
avatarUrl: '', // 头像
|
|
showModel: false,
|
|
wxStatus: false,
|
|
scanJson: {}, // 扫码获取的Json
|
|
show: false, // 退出模态窗
|
|
isTopShow: false, // 顶部弹出层
|
|
isUnsubscribe: false, // 是否注销账号
|
|
isBindWeChart: false, // 是否绑定微信
|
|
isVipModel: false, // 是否会员升级
|
|
token: '',
|
|
};
|
|
},
|
|
onShow() {
|
|
//小程序tabBar导航国际化特殊性
|
|
// #ifdef MP-WEIXIN ||APP-PLUS
|
|
uni.setTabBarItem({
|
|
index: 0,
|
|
text: this.$tt('navBar.home'),
|
|
})
|
|
uni.setTabBarItem({
|
|
index: 1,
|
|
text: this.$tt('navBar.scene'),
|
|
})
|
|
uni.setTabBarItem({
|
|
index: 2,
|
|
text: this.$tt('navBar.alert'),
|
|
})
|
|
uni.setTabBarItem({
|
|
index: 3,
|
|
text: this.$tt('navBar.news'),
|
|
})
|
|
uni.setTabBarItem({
|
|
index: 4,
|
|
text: this.$tt('navBar.user'),
|
|
})
|
|
//#endif
|
|
uni.$on('refreshData', () => {
|
|
this.getProfile();
|
|
})
|
|
this.wxStatus = uni.getStorageSync('wxStatus'); // 获取存储的参数
|
|
},
|
|
onLoad() {
|
|
this.getToken();
|
|
if (this.token != '' && this.token != null) {
|
|
this.getProfile();
|
|
} else {}
|
|
|
|
},
|
|
methods: {
|
|
getToken() {
|
|
// 本地缓存获取token
|
|
this.token = uni.getStorageSync('token');
|
|
// vuex存储token
|
|
uni.$u.vuex('vuex_token', this.token);
|
|
},
|
|
...mapMutations(['setLoggedIn']),
|
|
// 退出系统
|
|
handleExit() {
|
|
this.show = true;
|
|
},
|
|
// 取消退出系统
|
|
cancelExit() {
|
|
this.show = false;
|
|
},
|
|
// 确认退出系统
|
|
confirmExit() {
|
|
logout().then(() => {
|
|
this.clearToken();
|
|
this.setLoggedIn(false);
|
|
// 跳转
|
|
uni.reLaunch({
|
|
url: '/pagesB/login/waitLogin'
|
|
});
|
|
});
|
|
},
|
|
//移动端微信解绑
|
|
handleAppSecureBind() {
|
|
uni.navigateTo({
|
|
url: '/pagesB/user/secureBind'
|
|
});
|
|
},
|
|
gotoAccount() {
|
|
uni.$u.route('/pagesB/user/account');
|
|
},
|
|
//跳转信息
|
|
gotoMessageList() {
|
|
if (this.token != '' && this.token != null) {
|
|
uni.navigateTo({
|
|
url: '/pagesB/user/message/index'
|
|
});
|
|
} else {
|
|
this.showModel = true;
|
|
}
|
|
},
|
|
gotoLanguage() {
|
|
//this.clearToken()
|
|
uni.navigateTo({
|
|
url: '/pagesB/user/language/index'
|
|
})
|
|
},
|
|
gotoEmulator() {
|
|
if (this.token != '' && this.token != null) {
|
|
uni.navigateTo({
|
|
url: '/pagesB/user/message/index'
|
|
});
|
|
} else {
|
|
this.showModel = true;
|
|
}
|
|
},
|
|
gotoScene() {
|
|
if (this.token != '' && this.token != null) {
|
|
uni.switchTab({
|
|
url: '/pages/tabBar/scene/index'
|
|
});
|
|
} else {
|
|
this.showModel = true;
|
|
}
|
|
},
|
|
//确定去登录
|
|
confirmGotoLogin() {
|
|
// this.clearToken();
|
|
uni.reLaunch({
|
|
url: '/pagesB/login/waitLogin'
|
|
});
|
|
this.showModel = false;
|
|
},
|
|
handleGotoLogin() {
|
|
this.showModel = true;
|
|
},
|
|
// 设备分组
|
|
gotoGroup() {
|
|
if (this.token != '' && this.token != null) {
|
|
uni.navigateTo({
|
|
url: '/pagesB/user/deviceGroup/index'
|
|
});
|
|
} else {
|
|
this.showModel = true;
|
|
}
|
|
},
|
|
// 清除token
|
|
clearToken() {
|
|
uni.setStorageSync('token', '');
|
|
},
|
|
getProfile() {
|
|
// 调用用户信息接口
|
|
this.$api.common.getProfile().then(res => {
|
|
//存储用户信息,TODO 需要调用一次，不然其他页面调用返回空
|
|
uni.$u.vuex('profile', res.data);
|
|
this.avatarUrl = this.profile.avatar && projectConfig.baseUrl + this.profile.avatar;
|
|
this.wxStatus = res.wxBind;
|
|
}).catch(err => {
|
|
this.$u.toast(err.msg);
|
|
});
|
|
},
|
|
// 注销账户
|
|
handleUnsubscribe() {
|
|
this.isUnsubscribe = true;
|
|
},
|
|
//跳转密码修改
|
|
gotoResetPsd() {
|
|
/*uni.navigateTo({
|
|
url:"/pagesB/user/resetPsd"
|
|
})*/
|
|
uni.$u.route('/pagesB/user/resetPsd');
|
|
},
|
|
// 跳转到华普
|
|
handleGotoHp() {
|
|
// #ifdef MP-WEIXIN
|
|
uni.setClipboardData({
|
|
data: 'http://www.hpiot.cn',
|
|
success: () => {
|
|
uni.showToast({
|
|
title: this.$tt('about.copyTip'),
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
// #endif
|
|
// #ifdef H5
|
|
window.open('http://www.hpiot.cn', '_blank');
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
plus.runtime.openURL('http://www.hpiot.cn');
|
|
// #endif
|
|
},
|
|
// 跳转到app下载
|
|
handleGotoAppDownload() {
|
|
const appUrl = 'https://www.pgyer.com/eWU9hc';
|
|
// #ifdef H5
|
|
const u = navigator.userAgent.toLowerCase();
|
|
// 判断是否是微信、微博、QQ内部浏览器
|
|
const isBlackApp = /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1;
|
|
if (isBlackApp) {
|
|
uni.showToast({
|
|
title: this.$tt('user.browserOpen'),
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
} else {
|
|
if (u.match(/(iphone|ipod|ipad);?/i)) {
|
|
const loadDateTime = new Date();
|
|
window.location = "fastbee://" //schema链接或者universal link data进行参数传值
|
|
window.setTimeout(function() { //如果没有安装app,便会执行setTimeout跳转下载页
|
|
const timeOutDateTime = new Date();
|
|
if (timeOutDateTime - loadDateTime < 2200) {
|
|
window.location = appUrl; //app的下载地址
|
|
} else {
|
|
window.close();
|
|
}
|
|
}, 2000);
|
|
} else if (u.match(/android/i)) {
|
|
const loadDateTime = new Date();
|
|
window.location = "fastbee://" //schema链接或者universal link data进行参数传值
|
|
window.setTimeout(function() { //如果没有安装app,便会执行setTimeout跳转下载页
|
|
uni.hideLoading()
|
|
const timeOutDateTime = new Date();
|
|
if (timeOutDateTime - loadDateTime < 2200) {
|
|
uni.showModal({
|
|
title: this.$tt('user.noDownloadApp'),
|
|
content: this.$tt('user.isDownloadApp'),
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
window.location = appUrl; //app下载地址
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
window.close();
|
|
}
|
|
}, 2000);
|
|
}
|
|
}
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
uni.setClipboardData({
|
|
data: appUrl,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: this.$tt('user.copyTip'),
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
// #endif
|
|
},
|
|
// 跳转到APP更新
|
|
handleGotoAppUpdate() {
|
|
const platform = uni.getSystemInfoSync().platform;
|
|
// plus.runtime.version 调试模式下只能获取到Hbuilderx版本号
|
|
plus.runtime.getProperty(plus.runtime.appid, (info) => {
|
|
const currentVersion = info.version;
|
|
if (platform === 'android') {
|
|
uni.request({
|
|
url: "https://www.pgyer.com/apiv2/app/check", // 蒲公英地址或者换成自己服务器地址
|
|
data: {
|
|
_api_key: '1d4ea30632d22aca336ace046d1b7e04', //API 用户自己的Key
|
|
appKey: 'b67c34e7099ef2dbfc872b882f3f16e7' //App应用的唯一Key
|
|
},
|
|
success: (res) => {
|
|
if (res.statusCode == 200) {
|
|
const data = res.data;
|
|
// 获取服务器上的最新版本信息
|
|
const latestVersion = data.data.buildVersion;
|
|
// 比较版本号，如果服务器上有新版本，则提示用户更新
|
|
if (versionCompare(latestVersion, currentVersion) === 1) {
|
|
uni.showModal({
|
|
title: this.$tt('user.discoverNewVer'),
|
|
content: this.$tt('user.isUpdateNewVer'),
|
|
success: (modalRes) => {
|
|
if (modalRes.confirm) {
|
|
// 跳转到蒲公英或者对应应用商城
|
|
plus.runtime.openURL(data.data
|
|
.downloadURL);
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: this.$tt('user.thisLatestVer'),
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: this.$tt('user.verCheckFailed'),
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
} else if (platform === 'ios') {
|
|
// 正常情况下需要先判断是否有更新
|
|
let appleId = 'fastebee'; // app store id
|
|
plus.runtime.launchApplication({
|
|
action: `itms-apps://itunes.apple.com/cn/app/id${appleId}`,
|
|
})
|
|
}
|
|
});
|
|
},
|
|
// 跳转到关于我们
|
|
handleGotoAbout() {
|
|
uni.navigateTo({
|
|
url: '/pagesB/user/about'
|
|
})
|
|
},
|
|
confirmUnsubscribe() {
|
|
logout().then(() => {
|
|
this.clearToken();
|
|
// 跳转
|
|
uni.reLaunch({
|
|
url: '/pages/login/index'
|
|
});
|
|
});
|
|
},
|
|
//跳转个人信息
|
|
handleToAvatar() {
|
|
if (this.token != '' && this.token != null) {
|
|
const source = {
|
|
album: this.$tt('user.selectAlbum'),
|
|
camera: this.$tt('user.photograph'),
|
|
};
|
|
const success = ({
|
|
tempFilePaths: a,
|
|
tempFiles: b
|
|
}) => {
|
|
const image = a ? a[0] : b[0].path;
|
|
uni.$u.route('/pagesB/user/avatar', {
|
|
url: image
|
|
});
|
|
};
|
|
const _uploadImage = (type) => {
|
|
const sizeType = ['original', 'compressed'];
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType,
|
|
sourceType: [type],
|
|
success
|
|
});
|
|
}
|
|
const list = Object.entries(source);
|
|
// #ifdef H5
|
|
_uploadImage(list[0][0]);
|
|
return;
|
|
// #endif
|
|
uni.showActionSheet({
|
|
itemList: list.map(v => v[1]),
|
|
success: async ({
|
|
tapIndex: i
|
|
}) => {
|
|
// #ifdef APP-PLUS
|
|
const permissionID = list[i][0] === 'album' ? 'READ_EXTERNAL_STORAGE' : 'CAMERA';
|
|
let result = await this.$store.dispatch("permission/requestPermissions",
|
|
permissionID);
|
|
if (result !== 1) return;
|
|
// #endif
|
|
_uploadImage(list[i][0]);
|
|
}
|
|
});
|
|
} else {
|
|
this.showModel = true;
|
|
}
|
|
},
|
|
// 开通会员
|
|
handleVipUpgrade() {
|
|
this.isVipModel = true;
|
|
},
|
|
//独立组态
|
|
gotoScada() {
|
|
if (this.token != '' && this.token != null) {
|
|
uni.navigateTo({
|
|
url: '/pagesB/user/scada/indeScada'
|
|
});
|
|
} else {
|
|
this.showModel = true;
|
|
}
|
|
},
|
|
// 解绑微信
|
|
handleUnbindWeChart() {
|
|
uni.navigateTo({
|
|
url: '/pagesB/user/secureBind'
|
|
});
|
|
},
|
|
// 绑定微信
|
|
handleBindWeChart() {
|
|
this.isBindWeChart = true;
|
|
},
|
|
confirmBindWeChart() {
|
|
this.isBindWeChart = false;
|
|
let that = this;
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: function(res) {
|
|
if (res) {
|
|
console.log('用户授权成功');
|
|
// #ifdef APP-PLUS
|
|
const params = {
|
|
sourceClient: 'wechat_open_mobile',
|
|
openId: res.authResult.openid,
|
|
unionId: res.authResult.unionid,
|
|
}
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
const params = {
|
|
code: res.code,
|
|
sourceClient: 'wechat_open_mini_program',
|
|
}
|
|
// #endif
|
|
wechatBind(params).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: that.$tt('user.bindSuccess'),
|
|
});
|
|
that.getProfile();
|
|
} else {
|
|
uni.$u.toast(res.msg);
|
|
}
|
|
}).catch(err => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tab-bar-user {
|
|
// #ifdef MP-WEIXIN
|
|
height: 100vh;
|
|
// #endif
|
|
// #ifdef H5
|
|
height: calc(100vh - 100rpx);
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
height: 100vh;
|
|
// #endif
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
overflow-x: hidden;
|
|
|
|
.nav-tops {
|
|
position: relative;
|
|
height: 21.92rem;
|
|
background-color: #3378FE;
|
|
background-size: 100% 100%;
|
|
background-image: url("@/static/common/bg.png");
|
|
z-index: 0;
|
|
|
|
.infos {
|
|
position: absolute;
|
|
top: 4.586rem;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 0 30px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
z-index: 1;
|
|
|
|
.img {
|
|
width: 86px;
|
|
height: 84px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 5px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
|
|
image {
|
|
width: 76px;
|
|
height: 74px;
|
|
border: 1px solid #FFFFFF;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.title-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
justify-content: center;
|
|
margin-left: 18px;
|
|
|
|
|
|
.name-wrap {
|
|
display: flex;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
line-height: 21px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
|
|
.nickName {
|
|
max-width: 350rpx;
|
|
overflow: hidden;
|
|
text-wrap: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
line-height: 21px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
flex: 1;
|
|
background: #F1F3F9;
|
|
margin-top: -9.653rem;
|
|
z-index: 1;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
padding: 19px;
|
|
|
|
.users {
|
|
margin-top: -2.186rem;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
height: 95px;
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 10px 10px 10px 10px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
.u-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.u-tit {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 21px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
margin-top: 13px;
|
|
|
|
.group {
|
|
border-radius: 20rpx;
|
|
background-color: #fff;
|
|
padding: 15rpx 40rpx;
|
|
margin-bottom: 22rpx;
|
|
|
|
.item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 26rpx 0;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 21px;
|
|
border-bottom: 1rpx solid #f8f8f8;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.iconfont {
|
|
font-size: 38rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 28rpx;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
}
|
|
|
|
.right {
|
|
.iconfont {
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.logout {
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid #f8f8f8;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 21px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.logout:last-child {
|
|
border: none;
|
|
|
|
}
|
|
|
|
.item:last-child {
|
|
border: none;
|
|
|
|
}
|
|
}
|
|
|
|
.group:last-child {
|
|
border: none;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.setIcon {
|
|
position: absolute;
|
|
top: 50rpx;
|
|
right: 50rpx;
|
|
}
|
|
|
|
.logout {
|
|
text-align: center;
|
|
}
|
|
|
|
.t-item .tit {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.t-item .vals {
|
|
font-size: 36rpx;
|
|
color: #333;
|
|
font-weight: 700;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.u-top {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.users .u-top image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.u-top .tit {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
}
|
|
|
|
.borderless-button {
|
|
border: none !important;
|
|
background-color: transparent;
|
|
color: #007bff;
|
|
/* 设置文字颜色 */
|
|
}
|
|
|
|
::v-deep .uni-list-item__content-title[data-v-296a3d7e] {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
overflow: hidden;
|
|
font-weight: 500;
|
|
}
|
|
|
|
::v-deep .uni-list-item__container {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.other-wrap {
|
|
.popup-title {
|
|
margin: 20px 20px;
|
|
}
|
|
|
|
.btnclass {
|
|
margin: 0px 20px 20px 20px;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
</style> |