From 8e7cd003414ea4ca8f42fb3171de18f8839ece17 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期一, 10 七月 2023 18:04:27 +0800
Subject: [PATCH] 登录页面和查询分类设置
---
src/views/login/index.vue | 311 +++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 294 insertions(+), 17 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index b80b5f9..a4e2b81 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,30 +1,307 @@
<template>
- <div class="login">
- <h1>login</h1>
+ <div class="page-login">
+ <div class="page-login--layer">
+ <div class="page-login--content" flex="dir:top cross:stretch box:justify">
+ <div class="page-login--content-header">
+ <p class="page-login--content-header-motto">
+ <!-- 鏃堕棿鏄竴鍒囪储瀵屼腑鏈�瀹濊吹鐨勮储瀵� -->
+ </p>
+ </div>
+ <div class="page-login--content-main" flex="dir:top main:center cross:center">
+ <!-- logo -->
+ <!-- <img class="page-login--logo" src="./image/logo@2x.png" /> -->
+ <!-- form -->
+ <div class="page-login--form">
+ <span style="font-family: PingFangSC-Medium, sans-serif">鐧诲綍</span>
+ <el-card shadow="never">
+ <el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin" size="default">
+ <el-form-item prop="username">
+ <el-input type="text" v-model="formLogin.username" placeholder="鐢ㄦ埛鍚�"> </el-input>
+ </el-form-item>
+ <el-form-item prop="password">
+ <el-input type="password" v-model="formLogin.password" placeholder="瀵嗙爜" show-password id="password">
+ </el-input>
+ <i id="iconfont" class="iconfont icon-biyanjing" @click="clickeye()"></i>
+ </el-form-item>
+ <!-- <el-form-item prop="code">
+ <el-input type="text" v-model="formLogin.code" placeholder="楠岃瘉鐮�">
+ <template slot="append">
+ <img class="login-code" :src="captcha" @click="getCaptchaData" />
+ </template>
+ </el-input>
+ </el-form-item> -->
+ <el-button size="default" @click="submit" type="primary" class="button-login"> 鐧诲綍 </el-button>
+ </el-form>
+ </el-card>
+ <div class="error" style="font-size: 14px; float: left">
+ {{ this.error }}
+ </div>
+ <p class="page-login--options">
+ <span> 娉ㄥ唽</span>
+ <span>|</span>
+ <span>蹇樿瀵嗙爜</span>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</template>
<script>
+// import { mapActions } from "vuex"
+// import "@/assets/font/iconfont"
+
export default {
- name: "LoginOn",
- props: {}
+ name: "LoginView",
+ data() {
+ return {
+ captcha: "",
+ // timeInterval: null,
+ // time: dayjs().format("HH:mm:ss"),
+ // 蹇�熼�夋嫨鐢ㄦ埛
+ dialogVisible: false,
+ // 琛ㄥ崟
+ formLogin: {
+ username: "admin",
+ password: "123456",
+ code: ""
+ },
+ // 琛ㄥ崟鏍￠獙
+ rules: {
+ username: [
+ {
+ required: true,
+ message: "璇疯緭鍏ョ敤鎴峰悕",
+ trigger: "blur"
+ }
+ ],
+ password: [
+ {
+ required: true,
+ message: "璇疯緭鍏ュ瘑鐮�",
+ trigger: "blur"
+ }
+ ],
+ code: [
+ {
+ required: true,
+ message: "璇疯緭鍏ラ獙璇佺爜",
+ trigger: "blur"
+ }
+ ]
+ },
+ error: ""
+ }
+ },
+ mounted() {
+ this.timeInterval = setInterval(() => {
+ // this.refreshTime()
+ }, 1000)
+ this.getCaptchaData()
+ },
+ beforeDestroy() {
+ clearInterval(this.timeInterval)
+ },
+ methods: {
+ getCaptchaData() {},
+
+ /**
+ * @description 鎻愪氦琛ㄥ崟
+ */
+ // 鎻愪氦鐧诲綍淇℃伅
+ submit() {
+ this.$refs.loginForm.validate((valid) => {
+ if (valid) {
+ // 鐧诲綍
+ // 娉ㄦ剰 杩欓噷鐨勬紨绀烘病鏈変紶楠岃瘉鐮�
+ // 鍏蜂綋闇�瑕佷紶閫掔殑鏁版嵁璇疯嚜琛屼慨鏀逛唬鐮�
+ // this.login({
+ // username: this.formLogin.username,
+ // password: this.formLogin.password,
+ // captcha: this.formLogin.code
+ // }).then((rsp) => {
+ // // 閲嶅畾鍚戝璞′笉瀛樺湪鍒欒繑鍥為《灞傝矾寰�
+ // if (rsp != "") {
+ // // this.$message.warning(rsp);
+ // this.error = "濉叆淇℃伅閿欒锛岃妫�鏌ワ紒"
+ // let _this = this
+ // setTimeout(function () {
+ // _this.error = ""
+ // }, 3000)
+ // return
+ // }
+ this.$router.replace(this.$route.query.redirect || "/").catch((err) => {
+ console.log(err)
+ })
+ // })
+ } else {
+ // 鐧诲綍琛ㄥ崟鏍￠獙澶辫触
+ // this.$message.error("琛ㄥ崟鏍￠獙澶辫触锛岃妫�鏌�");
+ this.error = "濉叆淇℃伅閿欒锛岃妫�鏌ワ紒"
+ var _this = this
+ setTimeout(function () {
+ _this.error = ""
+ }, 3000)
+ }
+ })
+ },
+ //鐐瑰嚮鐪肩潧
+ clickeye() {
+ // let eye = document.getElementById("iconfont")
+ let pwd = document.getElementById("password")
+ if (pwd.type == "password") {
+ // ;(pwd.type = "text"), (eye.className = "iconfont icon-yanjing")
+ } else {
+ // ;(pwd.type = "password"), (eye.className = "iconfont icon-biyanjing")
+ }
+ }
+ }
}
</script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
- margin: 40px 0 0;
+<style lang="scss">
+.el-icon-view:before {
+ content: "";
}
-ul {
- list-style-type: none;
- padding: 0;
+.iconfont:before {
+ line-height: 48px;
+ position: absolute;
+ right: 19px;
+ font-size: 18px;
+ color: rgba(0, 0, 0, 0.4);
}
-li {
- display: inline-block;
- margin: 0 10px;
-}
-a {
- color: #42b983;
+.page-login {
+ background-size: 100%;
+ height: 100%;
+ position: relative;
+ .page-login--layer-area {
+ overflow: hidden;
+ }
+ // 鏃堕棿
+ .page-login--layer-time {
+ font-size: 24em;
+ font-weight: bold;
+ color: rgba(0, 0, 0, 0.03);
+ overflow: hidden;
+ }
+ // 鐧婚檰椤甸潰鎺т欢鐨勫鍣�
+ .page-login--content {
+ height: 100%;
+ min-height: 500px;
+ position: relative;
+ top: 0;
+ left: 0;
+ }
+ // header
+ .page-login--content-header {
+ padding: 1em 0;
+ .page-login--content-header-motto {
+ margin: 0px;
+ padding: 0px;
+ color: beige;
+ text-align: center;
+ font-size: 12px;
+ }
+ }
+ // main
+ .page-login--logo {
+ width: 240px;
+ margin-bottom: 2em;
+ margin-top: -2em;
+ position: absolute;
+ top: 7%;
+ left: 3%;
+ }
+ // 鐧诲綍琛ㄥ崟
+ .page-login--form {
+ width: 431px;
+ height: 400px;
+ left: 50%;
+ top: 30%;
+ transform: translate(-50%, 0%);
+ position: absolute;
+ background: #fafbff;
+ opacity: 0.9;
+ border-radius: 24px;
+ padding: 35px 36px;
+ text-align: center;
+ font-size: 36px;
+ line-height: 48px;
+ color: #181f30;
+ .el-form {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ .el-form-item {
+ margin-bottom: 24px;
+ width: 359px;
+ height: 48px;
+ background: #fff;
+ border: 8px;
+ .el-input__inner {
+ font-size: 14px;
+ height: 48px;
+ line-height: 20px;
+ padding-left: 16px;
+ color: #181f30;
+ }
+ }
+ }
+ // 鍗＄墖
+ .el-card {
+ margin-bottom: 15px;
+ background: transparent;
+ border: 0;
+ }
+ // 鐧诲綍鎸夐挳
+ .button-login {
+ width: 359px;
+ height: 48px;
+ font-size: 16px;
+ line-height: 20px;
+ font-family: PingFangSC-Medium, sans-serif;
+ }
+ // 杈撳叆妗嗗乏杈圭殑鍥捐〃鍖哄煙缂╃獎
+ .el-input-group__prepend {
+ padding: 0px 14px;
+ }
+ .login-code {
+ height: 40px - 2px;
+ display: block;
+ margin: 0px -20px;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ }
+ // 鐧婚檰閫夐」
+ .page-login--options {
+ font-family: PingFangSC-Medium, sans-serif;
+ color: #181f30 !important;
+ margin: 0px;
+ padding: 0px;
+ font-size: 14px;
+ line-height: 20px;
+ color: #2a78fb;
+ margin-right: 34px;
+ margin-bottom: 15px;
+ font-weight: bold;
+ float: right;
+ :nth-child(2) {
+ margin: 0px 5px;
+ }
+ }
+ .page-login--quick {
+ width: 100%;
+ }
+ }
+ .error {
+ float: left;
+ font-size: 14px;
+ line-height: 20px;
+ margin-left: 35px;
+ color: #f62f2f;
+ font-family: PingFangSC-Medium, sans-serif;
+ }
}
</style>
--
Gitblit v1.8.0