Merge pull request 'dev' (#3) from dev into main

Reviewed-on: #3

package-lock.json

@@ -14,7 +14,8 @@
         "jquery": "^3.7.1",
         "perfect-scrollbar": "^1.5.6",
         "vue": "^2.6.14",
-        "vue-router": "^3.5.1"
+        "vue-router": "^3.5.1",
+        "vuex": "^3.6.2"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~5.0.0",
@@ -10345,6 +10346,15 @@
         "prettier": "^1.18.2 || ^2.0.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.4",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.4.tgz",

package.json

@@ -13,7 +13,8 @@
     "jquery": "^3.7.1",
     "perfect-scrollbar": "^1.5.6",
     "vue": "^2.6.14",
-    "vue-router": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",

src/App.vue

@@ -1,5 +1,34 @@
 <template>
-  <div id="app">
+  <div id="app" :class="mainClass">
     <router-view/>
   </div>
 </template>
+<script>
+
+
+export default {
+
+  computed:{
+    /**
+     * 授权页面添加特定类名
+     * @returns {string}
+     */
+    mainClass(){
+      const path = this.$route.path
+      console.log(path)
+      if(path.startsWith('/auth')){
+        return 'login-page'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  width: 100%;
+  height:100%;
+  min-height: 100vh;
+}
+
+</style>

src/router/index.js

@@ -1,7 +1,8 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import RegisteredVue from '../views/registered/Registered.vue'
+import Login from '@/views/auth/Login.vue'
+import Register from '@/views/auth/Register.vue'
 
 Vue.use(VueRouter)
 
@@ -10,25 +11,24 @@ const routes = [
     path: '/home',
     name: 'home',
     component: HomeView
-  },
-  {
-    path: '/about',
-    name: 'about',
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  },
-  {
-    path: '/login',
-    name: 'Login',
-    component: () => import('../views/login/Login.vue')
-  }, 
-  {
-    path: '/registered',
-    name: 'Registered',
-    component:RegisteredVue
   }
   ,{
     path:'',
     redirect:'/home'
+  },
+  {
+    path:'/auth',
+    component: Login,
+    children: [
+      {
+        path:'login',
+        component: Login
+      },
+      {
+        path:'register',
+        component: Register
+      }
+    ]
   }
 ]
 

src/views/auth/Login.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="container">
+            <div class="row justify-content-md-center">
+                <div class="col-md-12 col-lg-4">
+                    <div class="card login-box-container">
+                        <div class="card-body">
+                            <div class="authent-logo">
+                                <img src="../../assets/images/logo@2x.png" alt="">
+                            </div>
+                            <div class="authent-text">
+                                <p>Welcome to IO!</p>
+                                <p>Please Sign-in to your account.</p>
+                            </div>
+
+                            <form>
+                                <div class="mb-3">
+                                    <div class="form-floating">
+                                        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+                                        <label for="floatingInput">Email address</label>
+                                      </div>
+                                </div>
+                                <div class="mb-3">
+                                    <div class="form-floating">
+                                        <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+                                        <label for="floatingPassword">Password</label>
+                                      </div>
+                                </div>
+                                <div class="mb-3 form-check">
+                                  <input type="checkbox" class="form-check-input" id="exampleCheck1">
+                                  <label class="form-check-label" for="exampleCheck1">Check me out</label>
+                                </div>
+                                <div class="d-grid">
+                                <button type="submit" class="btn btn-info m-b-xs">Sign In</button>
+                                <button class="btn btn-primary">Facebook</button>
+                            </div>
+                              </form>
+                              <div class="authent-reg">
+                                  <p>Not registered? <a href="register.html">Create an account</a></p>
+                              </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+</template>
+
+<script>
+
+
+</script>
+
+<style>
+
+</style>

src/views/auth/Register.vue

@@ -84,7 +84,7 @@
 <script>
 import { SendValidateCode_api,registered_api } from '@/request/api'
 export default {
-    name: 'Registered',
+    name: 'Register',
     data() {
         return {
             loader:false,

store/index.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)