146 lines
4.1 KiB
Vue
146 lines
4.1 KiB
Vue
<template>
|
||
<view>
|
||
<view class="warp warp1" style="">
|
||
<view class="user" style="">
|
||
<image class="user-avatar" mode="aspectFit" :src="userInfo.avatar"
|
||
style="background-image: ../../../static/avatar.png;"></image>
|
||
<view class="user-info">
|
||
<h2> {{userInfo.nickname}} </h2>
|
||
<text> UID {{userInfo.uid}}</text>
|
||
<text> {{userInfo.account}}</text>
|
||
<text> 云深不知归处，爱你不会迷路</text>
|
||
</view>
|
||
</view>
|
||
<view style="padding: 10rpx;"></view>
|
||
<view class="Grid">
|
||
<view class="Grid-Item">
|
||
<view class="Grid-Item-1">
|
||
<image class="GSimg" src="../../../static/logo.png"></image>
|
||
<view class="GStitle">测试功能</view>
|
||
</view>
|
||
</view>
|
||
<view class="Grid-Item">
|
||
<view class="Grid-Item-1">
|
||
<image class="GSimg" src="../../../static/logo.png"></image>
|
||
<view class="GStitle">测试功能</view>
|
||
</view>
|
||
</view>
|
||
<view class="Grid-Item">
|
||
<view class="Grid-Item-1">
|
||
<image class="GSimg" src="../../../static/logo.png"></image>
|
||
<view class="GStitle">测试功能</view>
|
||
</view>
|
||
</view>
|
||
<view class="Grid-Item">
|
||
<view class="Grid-Item-1">
|
||
<image class="GSimg" src="../../../static/logo.png"></image>
|
||
<view class="GStitle">测试功能</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="padding: 10rpx;"></view>
|
||
<uni-list style="">
|
||
<uni-list-item title="列表左侧带略缩图"
|
||
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
|
||
thumb-size="sm" rightText="右侧文字" showArrow></uni-list-item>
|
||
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}"
|
||
title="列表左侧带扩展图标" clickable showArrow>
|
||
</uni-list-item>
|
||
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}"
|
||
title="列表左侧带扩展图标" clickable showArrow>
|
||
</uni-list-item>
|
||
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}"
|
||
title="列表左侧带扩展图标" clickable showArrow>
|
||
</uni-list-item>
|
||
</uni-list>
|
||
<view style="padding: 10rpx;"></view>
|
||
<uni-list>
|
||
<uni-list-item title="列表左侧带略缩图"
|
||
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
|
||
thumb-size="sm" rightText="右侧文字" showArrow></uni-list-item>
|
||
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}" title="设置"
|
||
clickable showArrow>
|
||
</uni-list-item>
|
||
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'info'}" title="关于"
|
||
clickable showArrow>
|
||
</uni-list-item>
|
||
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#ff0000',size: '25',type: 'back'}" title="退出"
|
||
clickable showArrow>
|
||
</uni-list-item>
|
||
</uni-list>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapGetters
|
||
} from 'vuex'
|
||
export default {
|
||
computed: {
|
||
...mapState({
|
||
text: state => state.moduleA.text,
|
||
timestamp: state => state.moduleB.timestamp
|
||
}),
|
||
...mapGetters({
|
||
isLogin: 'getuserIsLogin',
|
||
userInfo: 'getUserInfo'
|
||
})
|
||
},
|
||
data() {
|
||
return {}
|
||
},
|
||
onLoad() {
|
||
console.log(this.isLogin);
|
||
if (!this.isLogin) {
|
||
uni.redirectTo({
|
||
url: "/pages/login/login"
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
},
|
||
onBackPress() {
|
||
// #ifdef APP-PLUS
|
||
plus.key.hideSoftKeybord();
|
||
// #endif
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.warp1{ }
|
||
.user {
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding-top: 180rpx;
|
||
/* #ifdef H5 */
|
||
padding-top: 80rpx;
|
||
/* #endif */
|
||
padding-left: 15rpx;
|
||
padding-bottom: 25rpx;
|
||
// background-image: url(/static/user/back.jpg);
|
||
// background-size: 100% 100%;
|
||
// background: linear-gradient(pink,#a900ff7a, pink);
|
||
.user-avatar {
|
||
width: 138rpx;
|
||
height: 138rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding-left: 45rpx;
|
||
}
|
||
}
|
||
</style>
|