- 新增自定义用户信息卡片样式 - 优化登录页面输入框和按钮样式 - 重构首页布局和图标展示 - 添加多种操作图标资源 - 改进用户退出登录逻辑 - 优化页面跳转和错误处理
120 lines
2.2 KiB
Vue
120 lines
2.2 KiB
Vue
<script>
|
||
import config from './config';
|
||
import store from '@/store';
|
||
import {
|
||
getToken
|
||
} from '@/utils/auth';
|
||
|
||
export default {
|
||
onLaunch: function() {
|
||
this.initApp();
|
||
},
|
||
data() {
|
||
return {
|
||
width: '--width:360px;',
|
||
height: '--height:712px;'
|
||
};
|
||
},
|
||
methods: {
|
||
// 初始化应用
|
||
initApp() {
|
||
// 初始化应用配置
|
||
this.initConfig();
|
||
// 检查用户登录状态
|
||
//#ifdef H5
|
||
this.checkLogin();
|
||
//#endif
|
||
},
|
||
initConfig() {
|
||
const _windowsWidth = uni.getWindowInfo().windowWidth;
|
||
const _windowsHeight = uni.getWindowInfo().windowHeight;
|
||
// console.log(_windowsWidth,_windowsHeight);
|
||
this.globalData.config = config;
|
||
// 设置页面初始大小
|
||
// this.'--width' = _windowsWidth + 'px;';
|
||
// this.'--height' = (_windowsHeight - 50) + 'px;';
|
||
},
|
||
checkLogin() {
|
||
const token = getToken();
|
||
if (!token) {
|
||
this.$tab.reLaunch('/pages/login');
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
|
||
@import '@/uni_modules/uview-ui/index.scss';
|
||
|
||
/* 无顶部nav无tab通用主容器 可使用高度 */
|
||
.common-container {
|
||
width: 360px;
|
||
height: 712px;
|
||
background-color: white;
|
||
}
|
||
|
||
/* 存在顶部nav主容器 可使用高度 */
|
||
.common-nav-container {
|
||
width: 360px;
|
||
height: 644px;
|
||
background-color: white;
|
||
}
|
||
|
||
/* 通用测试边框 */
|
||
.border {
|
||
border: 1px solid black;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('static/images/background/background.png');
|
||
background-size: cover;
|
||
//filter: opacity(50%);
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
width: 360px;
|
||
height: 662px;
|
||
}
|
||
|
||
.main-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.gap-5 {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 5px;
|
||
height: 5px;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.gap-10 {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.gap-20 {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.gap-40 {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 40px;
|
||
height: 40px;
|
||
background-color: transparent;
|
||
}
|
||
|
||
@import '@/static/scss/index.scss';
|
||
</style> |