From 33413c6be7f338ba1ee92b3218e5c078364675dc Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期三, 24 七月 2024 17:29:07 +0800
Subject: [PATCH] 提交
---
pages/index/index.vue | 177 ++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 128 insertions(+), 49 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 5047d7e..eeb599d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,24 +1,34 @@
<template>
<view class="box">
- <view class="header">
- <view class="titleFirst"><b>安全在线教育平台</b></view>
+ <image :src="loginTop" class="topImg" mode="widthFix"></image>
+ <view class="main">
+ <view class="header">
+ <view class="titleFirst">
+ 你好~<br/>欢迎来到安全教育在线平台</view>
+ </view>
+ <view>
+ <u-form :model="form" ref="uForm" class="form" >
+ <u-form-item style="width: 75%;"><u-input v-model="form.username" :class="{'isFocused': userFocused}" placeholder="请输入用户名" @focus="focusUser"/></u-form-item>
+ <u-form-item style="margin-top: 10px;width: 75%;" ><u-input v-model="form.password" :class="{'isFocused': codeFocused}" :type="codeType" placeholder="请输入密码" @focus="focusCode">
+ <template slot="suffix">
+ <u-icon v-show="codeType == 'password'" name="eye" color="#999" size="20" @click="viewCode"></u-icon>
+ <u-icon v-show="codeType == 'text'" name="eye-off" color="#999" size="20" @click="viewCode"></u-icon>
+ </template>
+ </u-input></u-form-item>
+ <!-- <view class="loginPsw">
+ <u-checkbox-group >
+ <u-checkbox disabled="true"></u-checkbox><text style="color: #fff;">自动登录</text>
+ </u-checkbox-group>
+ <text style="color: lightblue;">忘记密码</text>
+ </view> -->
+ <u-form-item style="margin-top: 10px;width: 75%;">
+ <u-button class="loginBtn" :loading="isLogining" style="width: 100%;height: 56px;border-radius: 28px" @click="Login" type="primary">登录</u-button>
+ </u-form-item>
+ <!-- <view style="color: white;margin-top: 150px;">技术支持：技术保障部</view>-->
+ </u-form>
+ </view>
</view>
- <view>
- <u-form :model="form" ref="uForm" class="form" >
- <u-form-item style="width: 75%;"><u-input :customStyle="cstyle" v-model="form.username" placeholder="请输入用户名" /></u-form-item>
- <u-form-item style="margin-top: 10px;width: 75%;" ><u-input :customStyle="cstyle" v-model="form.password" type="password" placeholder="请输入密码" /></u-form-item>
- <!-- <view class="loginPsw">
- <u-checkbox-group >
- <u-checkbox disabled="true"></u-checkbox><text style="color: #fff;">自动登录</text>
- </u-checkbox-group>
- <text style="color: lightblue;">忘记密码</text>
- </view> -->
- <u-form-item style="margin-top: 10px;width: 75%;">
- <u-button :loading="isLogining" style="width: 100%;height: 44px" @click="Login" type="primary">登录</u-button>
- </u-form-item>
-<!-- <view style="color: white;margin-top: 150px;">技术支持：技术保障部</view>-->
- </u-form>
- </view>
+
</view>
</template>
@@ -27,24 +37,25 @@
import store from '@/store/index.js'
import VUE_APP_BASE_URL from '../../common/constant.js'
const jpushModule = uni.requireNativePlugin('JG-JPush')
+ import loginTop from '../../static/loginTop1.png'
export default {
data() {
return {
+ loginTop: loginTop,
+ userFocused: false,
+ codeFocused: false,
form: {
username: '',
password: '',
code: '',
uuid: ''
},
+ codeType: 'password',
type: '',
//极光推送
connectStatus: '未连接',
registrationID: '未获得',
- isLogining: false,
- cstyle: {
- background: '#fff',
- padding: '10px'
- }
+ isLogining: false
}
},
onShow() {
@@ -82,8 +93,12 @@
},
Login(){
this.isLogining = true;
- this.form.password = this.base64Encode(this.form.password)
- login(this.form).then(res => {
+ // this.form.password = this.base64Encode(this.form.password)
+ const {username,password,code,uuid} = this.form
+ const data = {username,password,code,uuid}
+ data.password = this.base64Encode(data.password)
+ uni.removeStorageSync('tk');
+ login(data).then(res => {
if (res.code === 200) {
this.isLogining = false;
//登录成功后
@@ -121,13 +136,13 @@
icon: "none",
title: res.message
});
- this.form.name = '';
- this.form.pwd = '';
+ this.form.username = '';
+ this.form.password = '';
this.isLogining = false;
}
}).catch(err=>{
- this.form.name = '';
- this.form.pwd = '';
+ this.form.username = '';
+ this.form.password = '';
this.isLogining = false;
})
},
@@ -148,59 +163,123 @@
getRegistrationID() {
jpushModule.getRegistrationID(result => {
let registerID = result.registerID
- console.log('registerID',registerID)
this.registrationID = registerID
this.form.registrationId = registerID;
uni.setStorageSync('registrationID', registerID);
console.log("iddd",uni.getStorageSync('registrationID'))
})
},
+
+ focusUser(){
+ this.userFocused = true
+ this.codeFocused = false
+ },
+ focusCode(){
+ this.codeFocused = true
+ this.userFocused = false
+ },
+ viewCode(){
+ if(this.codeType == 'password'){
+ this.codeType = 'text'
+ } else{
+ this.codeType = 'password'
+ }
+ }
}
}
</script>
-<style>
+<style scoped lang="scss">
.box{
width: 100%;
height: 100vh;
- background: url('../../static/login1.jpg') no-repeat;
- background-size: 100% 100%;
- background-attachment: fixed;/* 不设置的话页面滑动时，背景会不铺满*/
+ background: #f5f5f5;
display: flex;
flex-direction: column;
}
+
+.topImg{
+ width: 100%;
+ height: 100%;
+ filter: drop-shadow(0 3px 5px rgba(21,148,232,.1))
+}
+
+.main{
+ width: 100%;
+ margin-top: 24rpx;
+ display: flex;
+ flex-direction: column;
+ justify-content: left;
+}
+
+.header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
.titleFirst{
- text-align: center;
- font-size: 32px;
- letter-spacing: 6px;
- color:#fff;
- text-shadow: 2px 2px 6px rgba(0,0,0,.1);
+ width: 75%;
+ font-size: 40rpx;
+ line-height: 1.5;
+ font-weight: bold;
+ letter-spacing: 2px;
+ color: #333;
}
.titleSecond{
text-align: center;
font-size: 19px;
- color:#fff;
+ color: #fff;
margin-top: 10px;
-}
-.header {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding-top:120px;
- text-shadow:0 0 1px #000;
}
.form{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
- margin-top: 25%;
+ margin-top: 40rpx;
}
+
+.u-input{
+ border-color: #f5f5f5 !important;
+ border-radius: 99px;
+ background: #f5f5f5;
+ padding: 15px 20px !important;
+ box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1) !important;
+ transition: box-shadow .1s ease !important;
+
+ &:active{
+ box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 12px rgba(0, 0, 0, 0.1),inset 0 3px 6px rgba(50, 50, 50, .05) !important;
+ }
+}
+
+.isFocused{
+ background: #fff;
+ border-width: 1.5px !important;
+ border-color: #e6e6e6 !important;
+ box-shadow: 0px -6px 10px rgba(255, 255, 255, 0), 0px 4px 12px rgba(0, 0, 0, 0),inset 0 3px 6px rgba(50, 50, 50, .05) !important;
+}
+
.loginPsw{
margin-bottom: 20px;
display: flex;
justify-content: space-between;
}
+
+.loginBtn{
+ border: 1px solid rgba(255,255,255,.4);
+ letter-spacing: 10px;
+ box-shadow: 0 2px 4px rgba(0,0,0,.2);
+ background-image: linear-gradient(#41a2ff,#0f7ff9);
+ transition: box-shadow .15s ease !important;
+}
+
+.loginBtn:active{
+ box-shadow: 0 2px 4px rgba(0,0,0,0);
+ background-image: linear-gradient(#0f7ff9,#41a2ff);
+}
+
+
</style>
--
Gitblit v1.9.2