<template>
|
<uni-base-page :footer="false">
|
<view class="example-body" slot="page">
|
<uni-list v-if="loginInfo.hasLogin">
|
<uni-list-item style="background-color: #f8f8f8;" :show-extra-icon="true" :show-arrow="false"
|
:title="loginInfo.chineseName">
|
<template slot="header">
|
<image class="slot-image" src="../../static/img/touxiang.jpg" mode="widthFix"></image>
|
</template>
|
</uni-list-item>
|
</uni-list>
|
<view class="btn-row" style="margin-top: 10px;">
|
<button v-if="!loginInfo.hasLogin" type="primary" class="primary" @tap="bindLogin">登录</button>
|
<button v-if="loginInfo.hasLogin" type="default" @tap="bindLogout">退出登录</button>
|
</view>
|
</view>
|
</uni-base-page>
|
</template>
|
|
|
<script>
|
export default {
|
data() {
|
return {
|
loginInfo: this.$loginInfo
|
}
|
},
|
created() {
|
|
},
|
methods: {
|
bindLogin() {
|
uni.navigateTo({
|
url: 'login',
|
});
|
},
|
bindLogout() {
|
this.$logout();
|
/**
|
* 如果需要强制登录跳转回登录页面
|
*/
|
if (this.loginInfo.forcedLogin) {
|
uni.reLaunch({
|
url: 'login',
|
});
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.slot-image {
|
display: block;
|
margin-right: 10px;
|
width: 50px;
|
height: 50px;
|
border-radius: 50%;
|
}
|
|
.container {
|
width: 100%; /* 移动端默认全宽 */
|
max-width: 50%; /* PC端最大宽度为屏幕的50% */
|
margin: 0 auto; /* 水平居中 */
|
}
|
|
/* 电脑端样式 */
|
@media (min-width: 768px) {
|
.container {
|
width: 600px; /* PC端固定宽度（等效于50%屏幕宽度） */
|
margin: 0 auto; /* 居中 */
|
}
|
.example-body {
|
width: 50%;
|
max-width: 500px;
|
margin: 0 auto !important; /* 居中 */
|
}
|
}
|
</style>
|
