login/register update

package-lock.json

@@ -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",

package.json

@@ -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",

src/assets/css/home-style.css

@@ -875,12 +875,22 @@ body.light-mode .video-bg:before {
     }
 }
 
-::-webkit-scrollbar {
+/*::-webkit-scrollbar {*/
-    width: 6px;
+/*    width: 6px;*/
-    border-radius: 10px;
+/*    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;
+}
+

src/components/home/HomeHeader.vue

@@ -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 class="router" 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 class="router" to="/hotNews"><a class="menu-link notify">HotNews</a></router-link>-->
-      <router-link to="/navDetail"><a class="menu-link">Discover</a></router-link>
+      <!--      <router-link  class="router" to="/navDetail"><a class="menu-link">Discover</a></router-link>-->
-      <a class="menu-link notify" href="#">Market</a>
+      <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&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" alt="">
+      <img @click="openLoginDialog" class="profile-img"
+           src="https://images.unsplash.com/photo-1600353068440-6361ef3a86e8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;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:{
+  components: {},
-    LoginDialog
-  },
   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").
+      $(".search-bar input").focus(function () {
-      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>

src/components/login/LoginDialog.vue

@@ -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>

src/main.js

@@ -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);

src/router/index.js

@@ -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',
+        path: '/news',
-        name: 'hotNews',
+        name: 'news',
-        component: hotNews
+        component: news
       },{
         path: '/navDetail',
         name: 'navDetail',

vue.config.js

@@ -1,6 +1,7 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true,
+  lintOnSave:false,//关闭语法检查
   devServer: {
     client: {
       overlay: false // 编译错误时，取消全屏覆盖