From aeb2269b65863fcda25f13937a01a7ff3237ee50 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期四, 12 九月 2024 11:37:13 +0800
Subject: [PATCH] 登录页面修改
---
src/views/login/index.vue | 429 +++++++++++++++++++++++------------------------------
1 files changed, 186 insertions(+), 243 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index c391125..dc9d55f 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,177 +1,114 @@
<template>
- <div class="login-container">
- <!-- <el-form
- ref="loginForm"
- :model="loginForm"
- :rules="loginRules"
- class="login-form"
- auto-complete="on"
- label-position="left"
- >
- <div class="title-container">
- <h3 class="title">Login Form</h3>
- </div>
-
- <el-form-item prop="username">
- <span class="svg-container">
- <svg-icon icon-class="user" />
- </span>
- <el-input
- ref="username"
- v-model="loginForm.username"
- placeholder="Username"
- name="username"
- type="text"
- tabindex="1"
- auto-complete="on"
- />
- </el-form-item>
-
- <el-form-item prop="password">
- <span class="svg-container">
- <svg-icon icon-class="password" />
- </span>
- <el-input
- :key="passwordType"
- ref="password"
- v-model="loginForm.password"
- :type="passwordType"
- placeholder="Password"
- name="password"
- tabindex="2"
- auto-complete="on"
- @keyup.enter.native="handleLogin"
- />
- <span class="show-pwd" @click="showPwd">
- <svg-icon
- :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
- />
- </span>
- </el-form-item>
-
- <el-button
- :loading="loading"
- type="primary"
- style="width: 100%; margin-bottom: 30px"
- @click.native.prevent="handleLogin"
- >Login</el-button
- >
-
- <div class="tips">
- <span style="margin-right: 20px">username: admin</span>
- <span> password: any</span>
- </div>
- </el-form> -->
- <div class="wxLogin">
- <el-card class="main_wx">
- <wxlogin
- :appid="appid"
- :redirect_uri="redirect_uri"
- scope="snsapi_login"
- :href="href"
- :state="state"
- ></wxlogin>
- <!-- <el-button @click="handleLogin">寮�鍙戠幆澧冧笓鐢ㄥ伔娓℃寜閽�</el-button> -->
- </el-card>
+ <div class="login-container">
+ <div class="wxLogin">
+ <el-card class="main_wx">
+ <wxlogin
+ :appid="appid"
+ :redirect_uri="redirect_uri"
+ scope="snsapi_login"
+ :href="href"
+ :state="state"
+ ></wxlogin>
+ </el-card>
+ </div>
</div>
- </div>
</template>
<script>
import { validUsername } from "@/utils/validate";
import wxlogin from "vue-wxlogin";
export default {
- name: "Login",
- components: { wxlogin },
- data() {
- const validateUsername = (rule, value, callback) => {
- if (!validUsername(value)) {
- callback(new Error("Please enter the correct user name"));
- } else {
- callback();
- }
- };
- const validatePassword = (rule, value, callback) => {
- if (value.length < 6) {
- callback(new Error("The password can not be less than 6 digits"));
- } else {
- callback();
- }
- };
- return {
- appid: "wx7103925df6236723",
- redirect_uri: encodeURIComponent("https://dingdang.9village.cn/#/student"),
- state: "1",
- href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7CiAgICAgICAgICBib3JkZXI6IG5vbmU7CiAgICAgICAgICB3aWR0aDogMTQwcHg7CiAgICAgICAgICBoZWlnaHQ6IDE0MHB4OwogICAgICAgIH0=", // 鑷畾涔夋牱寮忛摼鎺�
- loginForm: {
- username: "admin",
- password: "111111",
- },
- loginRules: {
- username: [
- { required: true, trigger: "blur", validator: validateUsername },
- ],
- password: [
- { required: true, trigger: "blur", validator: validatePassword },
- ],
- },
- loading: false,
- passwordType: "password",
- redirect: undefined,
- };
- },
- watch: {
- $route: {
- handler: function (route) {
- this.redirect = route.query && route.query.redirect;
- },
- immediate: true,
+ name: "Login",
+ components: { wxlogin },
+ data() {
+ const validateUsername = (rule, value, callback) => {
+ if (!validUsername(value)) {
+ callback(new Error("Please enter the correct user name"));
+ } else {
+ callback();
+ }
+ };
+ const validatePassword = (rule, value, callback) => {
+ if (value.length < 6) {
+ callback(new Error("The password can not be less than 6 digits"));
+ } else {
+ callback();
+ }
+ };
+ return {
+ appid: "wx7103925df6236723",
+ redirect_uri: encodeURIComponent("https://dingdang.9village.cn/#/student"),
+ state: "1",
+ href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7CiAgICAgICAgICBib3JkZXI6IG5vbmU7CiAgICAgICAgICB3aWR0aDogMTQwcHg7CiAgICAgICAgICBoZWlnaHQ6IDE0MHB4OwogICAgICAgIH0=", // 鑷畾涔夋牱寮忛摼鎺�
+ loginForm: {
+ username: "admin",
+ password: "111111",
+ },
+ loginRules: {
+ username: [
+ { required: true, trigger: "blur", validator: validateUsername },
+ ],
+ password: [
+ { required: true, trigger: "blur", validator: validatePassword },
+ ],
+ },
+ loading: false,
+ passwordType: "password",
+ redirect: undefined,
+ };
},
- },
- mounted() {
- this.getWeChatUrl();
- },
- methods: {
- getWeChatUrl() {
- // api.wachatQrUrl().then(res => {
- // if (res && res.code === '0000') {
- // const data = res.data
- // this.appid = data.appId
- // this.redirect_uri = data.wxCallbackUrl + 'weChatLogin'
- // }
- // })
+ watch: {
+ $route: {
+ handler: function (route) {
+ this.redirect = route.query && route.query.redirect;
+ },
+ immediate: true,
+ },
},
- showPwd() {
- if (this.passwordType === "password") {
- this.passwordType = "";
- } else {
- this.passwordType = "password";
- }
- this.$nextTick(() => {
- this.$refs.password.focus();
- });
+ mounted() {
+ this.getWeChatUrl();
},
- handleLogin() {
- this.$router.push({ path: "/educational/student" });
- // this.$refs.loginForm.validate((valid) => {
- // if (valid) {
- // this.loading = true;
- // this.$store
- // .dispatch("user/login", this.loginForm)
- // .then(() => {
- // this.$router.push({ path: this.redirect || "/" });
- // this.loading = false;
- // })
- // .catch(() => {
- // this.loading = false;
- // });
- // } else {
- // console.log("error submit!!");
- // return false;
- // }
- // });
+ methods: {
+ getWeChatUrl() {
+ // api.wachatQrUrl().then(res => {
+ // if (res && res.code === '0000') {
+ // const data = res.data
+ // this.appid = data.appId
+ // this.redirect_uri = data.wxCallbackUrl + 'weChatLogin'
+ // }
+ // })
+ },
+ showPwd() {
+ if (this.passwordType === "password") {
+ this.passwordType = "";
+ } else {
+ this.passwordType = "password";
+ }
+ this.$nextTick(() => {
+ this.$refs.password.focus();
+ });
+ },
+ handleLogin() {
+ this.$router.push({ path: "/educational/student" });
+ // this.$refs.loginForm.validate((valid) => {
+ // if (valid) {
+ // this.loading = true;
+ // this.$store
+ // .dispatch("user/login", this.loginForm)
+ // .then(() => {
+ // this.$router.push({ path: this.redirect || "/" });
+ // this.loading = false;
+ // })
+ // .catch(() => {
+ // this.loading = false;
+ // });
+ // } else {
+ // console.log("error submit!!");
+ // return false;
+ // }
+ // });
+ },
},
- },
};
</script>
@@ -184,48 +121,54 @@
$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
- .login-container .el-input input {
- color: $cursor;
- }
+ .login-container .el-input input {
+ color: $cursor;
+ }
}
/* reset element-ui css */
.login-container {
- // background-image: url('https://s1.locimg.com/2024/09/12/891ab39f72938.png');
- // background-size: contain;
- display: flex;
- align-items: center;
- justify-content: center;
- .el-input {
- display: inline-block;
- height: 47px;
- width: 85%;
+ background-image: url('../../assets/login_backgroup.png');
+ // background-size: contain;
+ background-size: auto 100%;
+ background-position: center center;
+ /* 鑳屾櫙鍥句笉骞抽摵 */
+ background-repeat: no-repeat;
+ /* 褰撳唴瀹归珮搴﹀ぇ浜庡浘鐗囬珮搴︽椂锛岃儗鏅浘鍍忕殑浣嶇疆鐩稿浜巚iewport鍥哄畾 */
+ background-attachment: fixed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .el-input {
+ display: inline-block;
+ height: 47px;
+ width: 85%;
- input {
- background: transparent;
- border: 0px;
- -webkit-appearance: none;
- border-radius: 0px;
- padding: 12px 5px 12px 15px;
- color: $light_gray;
- height: 47px;
- caret-color: $cursor;
+ input {
+ background: transparent;
+ border: 0px;
+ -webkit-appearance: none;
+ border-radius: 0px;
+ padding: 12px 5px 12px 15px;
+ color: $light_gray;
+ height: 47px;
+ caret-color: $cursor;
- &:-webkit-autofill {
- box-shadow: 0 0 0px 1000px $bg inset !important;
- -webkit-text-fill-color: $cursor !important;
- }
+ &:-webkit-autofill {
+ box-shadow: 0 0 0px 1000px $bg inset !important;
+ -webkit-text-fill-color: $cursor !important;
+ }
+ }
}
- }
- .el-form-item {
- border: 1px solid rgba(255, 255, 255, 0.1);
- background: rgba(0, 0, 0, 0.1);
- border-radius: 5px;
- color: #454545;
- }
+ .el-form-item {
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ color: #454545;
+ }
}
-#weixin{
+#weixin {
/* background-color: #fcf; */
display: flex;
justify-content: center;
@@ -239,60 +182,60 @@
$light_gray: #eee;
.login-container {
- min-height: 100%;
- width: 100%;
- background-color: $bg;
- overflow: hidden;
-
- .login-form {
- position: relative;
- width: 520px;
- max-width: 100%;
- padding: 160px 35px 0;
- margin: 0 auto;
+ min-height: 100%;
+ width: 100%;
+ background-color: $bg;
overflow: hidden;
- }
- .tips {
- font-size: 14px;
- color: #fff;
- margin-bottom: 10px;
-
- span {
- &:first-of-type {
- margin-right: 16px;
- }
+ .login-form {
+ position: relative;
+ width: 520px;
+ max-width: 100%;
+ padding: 160px 35px 0;
+ margin: 0 auto;
+ overflow: hidden;
}
- }
- .svg-container {
- padding: 6px 5px 6px 15px;
- color: $dark_gray;
- vertical-align: middle;
- width: 30px;
- display: inline-block;
- }
+ .tips {
+ font-size: 14px;
+ color: #fff;
+ margin-bottom: 10px;
- .title-container {
- position: relative;
-
- .title {
- font-size: 26px;
- color: $light_gray;
- margin: 0px auto 40px auto;
- text-align: center;
- font-weight: bold;
+ span {
+ &:first-of-type {
+ margin-right: 16px;
+ }
+ }
}
- }
- .show-pwd {
- position: absolute;
- right: 10px;
- top: 7px;
- font-size: 16px;
- color: $dark_gray;
- cursor: pointer;
- user-select: none;
- }
+ .svg-container {
+ padding: 6px 5px 6px 15px;
+ color: $dark_gray;
+ vertical-align: middle;
+ width: 30px;
+ display: inline-block;
+ }
+
+ .title-container {
+ position: relative;
+
+ .title {
+ font-size: 26px;
+ color: $light_gray;
+ margin: 0px auto 40px auto;
+ text-align: center;
+ font-weight: bold;
+ }
+ }
+
+ .show-pwd {
+ position: absolute;
+ right: 10px;
+ top: 7px;
+ font-size: 16px;
+ color: $dark_gray;
+ cursor: pointer;
+ user-select: none;
+ }
}
</style>
--
Gitblit v1.8.0