login/register update
This commit is contained in:
parent
29fe82a05b
commit
c0a044355b
26
package-lock.json
generated
26
package-lock.json
generated
@ -8,7 +8,9 @@
|
||||
"name": "love-nav-vue",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"axios": "^1.6.2",
|
||||
"bootstrap": "^5.3.2",
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.4.3",
|
||||
"element-ui": "^2.15.14",
|
||||
@ -2042,6 +2044,11 @@
|
||||
"integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.8",
|
||||
"resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.8.tgz",
|
||||
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
|
||||
},
|
||||
"node_modules/@sideway/address": {
|
||||
"version": "4.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
|
||||
@ -3716,6 +3723,14 @@
|
||||
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/bootstrap": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/bootstrap/-/bootstrap-5.3.2.tgz",
|
||||
"integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.11.8"
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
@ -12620,6 +12635,11 @@
|
||||
"integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@popperjs/core": {
|
||||
"version": "2.11.8",
|
||||
"resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.8.tgz",
|
||||
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
|
||||
},
|
||||
"@sideway/address": {
|
||||
"version": "4.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
|
||||
@ -14029,6 +14049,12 @@
|
||||
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
|
||||
"dev": true
|
||||
},
|
||||
"bootstrap": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/bootstrap/-/bootstrap-5.3.2.tgz",
|
||||
"integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
|
||||
"requires": {}
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
|
@ -8,7 +8,9 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"axios": "^1.6.2",
|
||||
"bootstrap": "^5.3.2",
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.4.3",
|
||||
"element-ui": "^2.15.14",
|
||||
|
@ -875,12 +875,22 @@ body.light-mode .video-bg:before {
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/*::-webkit-scrollbar {*/
|
||||
/* width: 6px;*/
|
||||
/* height: 0px;*/
|
||||
/* border-radius: 10px;*/
|
||||
/*}*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-bg);
|
||||
border-radius: 10px;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
|
@ -2,10 +2,13 @@
|
||||
<div class="header">
|
||||
<div class="menu-circle"></div>
|
||||
<div class="header-menu">
|
||||
<router-link to="/home"><a class="menu-link is-active" >ALL</a></router-link>
|
||||
<router-link to="/hotNews"><a class="menu-link notify">HotNews</a></router-link>
|
||||
<router-link to="/navDetail"><a class="menu-link">Discover</a></router-link>
|
||||
<a class="menu-link notify" href="#">Market</a>
|
||||
<!-- <router-link class="router" to="/home"><a class="menu-link is-active" >ALL</a></router-link>-->
|
||||
<!-- <router-link class="router" to="/hotNews"><a class="menu-link notify">HotNews</a></router-link>-->
|
||||
<!-- <router-link class="router" to="/navDetail"><a class="menu-link">Discover</a></router-link>-->
|
||||
<router-link class="menu-link is-active" to="/home">ALL</router-link>
|
||||
<router-link class="menu-link notify" to="/news">HotNews</router-link>
|
||||
<router-link class="menu-link" to="/navDetail">Discover</router-link>
|
||||
<router-link class="menu-link notify" to="#">Market</router-link>
|
||||
</div>
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Search">
|
||||
@ -13,30 +16,183 @@
|
||||
<div class="header-profile">
|
||||
<div class="notification">
|
||||
<span class="notification-number">3</span>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" class="feather feather-bell">
|
||||
<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<svg viewBox="0 0 512 512" fill="currentColor">
|
||||
<path d="M448.773 235.551A135.893 135.893 0 00451 211c0-74.443-60.557-135-135-135-47.52 0-91.567 25.313-115.766 65.537-32.666-10.59-66.182-6.049-93.794 12.979-27.612 19.013-44.092 49.116-45.425 82.031C24.716 253.788 0 290.497 0 331c0 7.031 1.703 13.887 3.006 20.537l.015.015C12.719 400.492 56.034 436 106 436h300c57.891 0 106-47.109 106-105 0-40.942-25.053-77.798-63.227-95.449z"></path>
|
||||
<path
|
||||
d="M448.773 235.551A135.893 135.893 0 00451 211c0-74.443-60.557-135-135-135-47.52 0-91.567 25.313-115.766 65.537-32.666-10.59-66.182-6.049-93.794 12.979-27.612 19.013-44.092 49.116-45.425 82.031C24.716 253.788 0 290.497 0 331c0 7.031 1.703 13.887 3.006 20.537l.015.015C12.719 400.492 56.034 436 106 436h300c57.891 0 106-47.109 106-105 0-40.942-25.053-77.798-63.227-95.449z"></path>
|
||||
</svg>
|
||||
<img @click="openLoginDialog" class="profile-img" src="https://images.unsplash.com/photo-1600353068440-6361ef3a86e8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="">
|
||||
<img @click="openLoginDialog" class="profile-img"
|
||||
src="https://images.unsplash.com/photo-1600353068440-6361ef3a86e8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
|
||||
alt="">
|
||||
</div>
|
||||
<LoginDialog :login-dialog-visible="loginDialogVisible"></LoginDialog>
|
||||
<!--登录弹窗-->
|
||||
<el-dialog
|
||||
class="dialog"
|
||||
:visible.sync="loginDialogVisible"
|
||||
width="30vw"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="modalClose"
|
||||
>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane>
|
||||
<span slot="label"><i class="el-icon-user-solid"></i>登录</span>
|
||||
<el-form :model="loginForm" ref="ruleForm" class="form">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
prefix-icon="el-icon-user"
|
||||
placeholder="用户名/邮箱"
|
||||
auto-complete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<!-- type:密码显示* -->
|
||||
<el-input
|
||||
prefix-icon="el-icon-unlock"
|
||||
:type="passwordVisible"
|
||||
v-model="loginForm.password"
|
||||
placeholder="密码"
|
||||
auto-complete="new-password"
|
||||
>
|
||||
<i slot="suffix" :class="icon" @click="showPass" ></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
|
||||
<el-input
|
||||
prefix-icon="el-icon-mobile-phone"
|
||||
type="text"
|
||||
placeholder="点击图片更换验证码"
|
||||
v-model="loginForm.code"
|
||||
class="vertify_code"
|
||||
auto-complete="false"
|
||||
style="width: 15.8vw"
|
||||
></el-input>
|
||||
<!-- <span class="code">验证码</span> -->
|
||||
<img src="imageUrl" @click="resetImg" class="vertify_img"/>
|
||||
</el-form-item>
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;align-content: center">
|
||||
<el-form-item prop="remember">
|
||||
<el-checkbox v-model="loginForm.remember" class="remember">记住我</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button type="primary" @click="submitLoginForm('ruleForm')" >登录
|
||||
</el-button
|
||||
>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane>
|
||||
<span slot="label"><i class="el-icon-edit"></i> 注册</span>
|
||||
<el-form :model="registerFrom" ref="ruleForm" class="form">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="registerFrom.username"
|
||||
prefix-icon="el-icon-user"
|
||||
placeholder="用户名"
|
||||
auto-complete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email">
|
||||
<el-input
|
||||
prefix-icon="el-icon-s-promotion"
|
||||
v-model="registerFrom.email"
|
||||
placeholder="邮箱"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<!-- type:密码显示* -->
|
||||
<el-input
|
||||
prefix-icon="el-icon-unlock"
|
||||
:type="passwordVisible"
|
||||
v-model="registerFrom.password"
|
||||
placeholder="密码"
|
||||
auto-complete="new-password"
|
||||
>
|
||||
<i slot="suffix" :class="icon" @click="showPass" ></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="repassword">
|
||||
<!-- type:密码显示* -->
|
||||
<el-input
|
||||
prefix-icon="el-icon-unlock"
|
||||
:type="passwordVisible"
|
||||
v-model="registerFrom.repassword"
|
||||
placeholder="确认密码"
|
||||
auto-complete="new-password"
|
||||
>
|
||||
<i slot="suffix" :class="icon" @click="showPass" ></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="captcha" style="display: flex;flex-wrap: nowrap;flex-direction: row;justify-content: space-between">
|
||||
<el-input
|
||||
prefix-icon="el-icon-mobile-phone"
|
||||
type="text"
|
||||
placeholder="验证码"
|
||||
v-model="registerFrom.captcha"
|
||||
class="vertify_code"
|
||||
auto-complete="false"
|
||||
style="width: 15.3vw"
|
||||
></el-input>
|
||||
<el-button style="margin-left: 5px" @click="sendEmail" type="success" :disabled="!showTime">
|
||||
获取验证码
|
||||
<span v-show="!showTime" class="count">({{sendTime}}s)</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button type="primary" @click="submitRegisterForm('ruleForm')" >注册
|
||||
</el-button
|
||||
>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
import LoginDialog from "@/components/login/LoginDialog.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "HomeHeader",
|
||||
components:{
|
||||
LoginDialog
|
||||
},
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
loginDialogVisible: false,
|
||||
}},
|
||||
passwordVisible: "password",
|
||||
icon: "el-icon-view",
|
||||
showTime: true, /* 布尔值,通过v-show控制显示‘获取按钮’还是‘倒计时’ */
|
||||
sendTime: '', /* 倒计时 计数器 */
|
||||
timer: null,
|
||||
loginForm: {
|
||||
username: null,
|
||||
password: null,
|
||||
code: null,
|
||||
remember: null
|
||||
},
|
||||
registerFrom:{
|
||||
username: null,
|
||||
email:null,
|
||||
captcha:null,
|
||||
password: null,
|
||||
repassword:null,
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.toggleActive();
|
||||
this.reacherBarFun();
|
||||
@ -44,14 +200,13 @@ this.reacherBarFun();
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
// 打开登陆注册
|
||||
openLoginDialog() {
|
||||
this.loginDialogVisible = true;
|
||||
},
|
||||
|
||||
// 导航栏动态切换
|
||||
toggleActive() {
|
||||
$(function () {
|
||||
$(".menu-link").click(function () {
|
||||
@ -60,19 +215,83 @@ this.reacherBarFun();
|
||||
});
|
||||
});
|
||||
},
|
||||
// 搜索框
|
||||
reacherBarFun() {
|
||||
$(".search-bar input").
|
||||
focus(function () {
|
||||
$(".search-bar input").focus(function () {
|
||||
$(".header").addClass("wide");
|
||||
}).
|
||||
blur(function () {
|
||||
}).blur(function () {
|
||||
$(".header").removeClass("wide");
|
||||
});
|
||||
},
|
||||
// 弹窗关闭
|
||||
modalClose() {
|
||||
this.loginDialogVisible = false;
|
||||
},
|
||||
// 显示密码
|
||||
showPass() {
|
||||
if (this.passwordVisible === "text") {
|
||||
this.passwordVisible = "password";
|
||||
//更换图标
|
||||
this.icon = "el-icon-view";
|
||||
} else {
|
||||
this.passwordVisible = "text";
|
||||
this.icon = "el-icon-lock";
|
||||
}
|
||||
},
|
||||
// 登录提交
|
||||
submitLoginForm(formName) {
|
||||
// var _this=this;
|
||||
// this.$refs[formName].validate((valid) => {
|
||||
// if (valid) {
|
||||
//
|
||||
// }
|
||||
//
|
||||
// });
|
||||
},
|
||||
// 注册提交
|
||||
submitRegisterForm(formName) {
|
||||
// var _this=this;
|
||||
// this.$refs[formName].validate((valid) => {
|
||||
// if (valid) {
|
||||
//
|
||||
// }
|
||||
//
|
||||
// });
|
||||
},
|
||||
//重置
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
// 发送邮箱验证码
|
||||
sendEmail(){
|
||||
|
||||
const TIME_COUNT = 60; // 更改倒计时时间
|
||||
if (!this.timer) {
|
||||
this.sendTime = TIME_COUNT;
|
||||
this.showTime = false;
|
||||
this.timer = setInterval(() => {
|
||||
if (this.sendTime > 0 && this.sendTime <= TIME_COUNT) {
|
||||
this.sendTime--;
|
||||
} else {
|
||||
this.showTime = true;
|
||||
clearInterval(this.timer); // 清除定时器
|
||||
this.timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
//点击图片更换验证码
|
||||
resetImg() {
|
||||
this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.dialog {
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="登录"
|
||||
:visible="loginDialogVisible"
|
||||
width="25vw"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
:before-close="modalClose">
|
||||
<div>
|
||||
登录
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"LoginDialog",
|
||||
props:{
|
||||
loginDialogVisible:Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
modalClose() {
|
||||
this.$emit('update:loginDialogVisible', false); // 直接修改父组件的属性
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
@ -14,6 +14,8 @@ window.$ = $;
|
||||
import * as echarts from 'echarts';//引入echarts
|
||||
Vue.prototype.$echarts = echarts //引入组件
|
||||
|
||||
import 'bootstrap'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(ElementUI);
|
||||
|
@ -2,7 +2,7 @@ import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import index from '../views/Index.vue'
|
||||
import home from "@/components/home/HomePage.vue";
|
||||
import hotNews from "@/components/hotNews/HotNews.vue";
|
||||
import news from "@/components/hotNews/HotNews.vue";
|
||||
import navDetail from "@/components/detail/NavDetail.vue";
|
||||
import notFound from "@/components/notFound/NotFound.vue";
|
||||
import settings from "@/views/Settings.vue";
|
||||
@ -30,9 +30,9 @@ const routes = [
|
||||
component: home
|
||||
},
|
||||
{
|
||||
path: '/hotNews',
|
||||
name: 'hotNews',
|
||||
component: hotNews
|
||||
path: '/news',
|
||||
name: 'news',
|
||||
component: news
|
||||
},{
|
||||
path: '/navDetail',
|
||||
name: 'navDetail',
|
||||
|
@ -1,6 +1,7 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true,
|
||||
lintOnSave:false,//关闭语法检查
|
||||
devServer: {
|
||||
client: {
|
||||
overlay: false // 编译错误时,取消全屏覆盖
|
||||
|
Loading…
Reference in New Issue
Block a user