|
|
@@ -1,15 +1,31 @@
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
+ <view class="mobile-login-page">
|
|
|
<view class="login-top">
|
|
|
- <img src="../static/images/login/login-bj-sj.png">
|
|
|
- <text>
|
|
|
+ <img class="login-logo" src="../static/images/login/login-logo-sj.png">
|
|
|
+ <text class="login-text">
|
|
|
{{systemName}}
|
|
|
</text>
|
|
|
</view>
|
|
|
- <view class="text-area">
|
|
|
- <input type="text" v-model="username" placeholder="Username" class="input-item" />
|
|
|
- <input type="password" v-model="password" placeholder="Password" class="input-item" />
|
|
|
- <button @click="handleLogin">Login</button>
|
|
|
+ <view class="login-body">
|
|
|
+ <view class="input-container">
|
|
|
+ <uni-icons type="auth" size="30" class="input-icon"></uni-icons>
|
|
|
+ <input type="text" v-model="username" placeholder="请输入用户名" class="input-item-1" />
|
|
|
+ </view>
|
|
|
+ <view class="input-container">
|
|
|
+ <uni-icons type="locked" size="30" class="input-icon"></uni-icons>
|
|
|
+ <input type="password" v-model="password" placeholder="请输入密码" class="input-item-1" />
|
|
|
+ </view>
|
|
|
+ <view class="login-change">
|
|
|
+ <checkbox-group>
|
|
|
+ <label class="checkbox-zhanghao">
|
|
|
+ <checkbox value="cb" color="#0550e5" checked="true" />记住此账号
|
|
|
+ </label>
|
|
|
+ </checkbox-group>
|
|
|
+ <text class="checkbox-zhanghao">
|
|
|
+ 忘记密码？
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <button class="login-btn" @click="handleLogin">登录</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -23,12 +39,12 @@
|
|
|
import {
|
|
|
ref
|
|
|
} from 'vue';
|
|
|
- let systemName = ref('麦塔考试')
|
|
|
+ let systemName = ref('麦塔考试系统')
|
|
|
let username = ref('')
|
|
|
let password = ref('')
|
|
|
//let loginLogoImg = ref('../static/images/login/login-bj-sj.png')
|
|
|
|
|
|
- const changePassword = ()=>{
|
|
|
+ const changePassword = () => {
|
|
|
|
|
|
}
|
|
|
const handleLogin = () => {
|
|
|
@@ -46,55 +62,107 @@
|
|
|
key: 'Mta-Auth',
|
|
|
data: obj // 假设 this.userInputValue 是用户输入的数据
|
|
|
});
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- let req = {
|
|
|
- 'page': 1,
|
|
|
- 'size': 4,
|
|
|
- 'status': 1,
|
|
|
- }
|
|
|
- kaoshiList(req).then(res => {
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
- }, 5000)
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ });
|
|
|
+ // setTimeout(() => {
|
|
|
+ // let req = {
|
|
|
+ // 'page': 1,
|
|
|
+ // 'size': 4,
|
|
|
+ // 'status': 1,
|
|
|
+ // }
|
|
|
+ // kaoshiList(req).then(res => {
|
|
|
+ // console.log(res)
|
|
|
+ // })
|
|
|
+ // }, 5000)
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
+ .mobile-login-page {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #FFF;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ overflow: auto;
|
|
|
|
|
|
.login-top {
|
|
|
- height: 270px;
|
|
|
+ height: 540rpx;
|
|
|
background-size: cover;
|
|
|
background-image: url("../static/images/login/login-bj-sj.png");
|
|
|
// logo
|
|
|
- img {
|
|
|
- width: 133px;
|
|
|
- max-height: 50px;
|
|
|
- margin-top: 78px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-logo {
|
|
|
+ width: 266rpx;
|
|
|
+ max-height: 100rpx;
|
|
|
+ margin-top: 156rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-text {
|
|
|
+ display: block;
|
|
|
+ font-size: 64rpx;
|
|
|
+ color: #FFF;
|
|
|
+ margin: 24rpx 0 0;
|
|
|
+ font-weight: 700
|
|
|
+ }
|
|
|
+
|
|
|
+ // 登录区域
|
|
|
+ .login-body {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 60px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 140rpx auto 0;
|
|
|
+
|
|
|
+ .input-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /* 垂直对齐 */
|
|
|
+ position: relative;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ padding: 0;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-icon {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ /* 图标和输入框之间的间距 */
|
|
|
+ color: #999;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
- .text-area {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- .input-item {
|
|
|
- margin-bottom: 20rpx;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- padding: 0 10rpx;
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-radius: 4rpx;
|
|
|
+ // 输入框
|
|
|
+ .login-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ letter-spacing: 7.2rpx;
|
|
|
+ background: linear-gradient(0deg, #436aff 0%, #234ff7 100%);
|
|
|
+ border-radius: 50rpx;
|
|
|
+ border: 0;
|
|
|
+ color: #F7F7F7;
|
|
|
+ line-height: 100rpx;
|
|
|
}
|
|
|
- button {
|
|
|
- margin-top: 20rpx;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- background-color: #409EFF;
|
|
|
- color: #fff;
|
|
|
- border-radius: 4rpx;
|
|
|
+
|
|
|
+ .login-change {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .checkbox-zhanghao {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #565656;
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
wangguoyu