提交代码

vue-demo/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "eslint": "^7.18.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuetify": "^2.2.11",
@@ -22,7 +23,9 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-html": "^5.0.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",

vue-demo/src/App.vue

 <template>
-  <v-app>
-    <div id="app">
-    <div id="nav">
+  <v-app id="app">
+    <!-- <div id="nav">
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link> |
       <router-link to="/login">Login</router-link>
-    </div>
+    </div> -->
     <router-view/>
-  </div>
   </v-app>
 </template>
 
 <style lang="less">
 #app {
+  position: absolute;
+  height: 100%;
+  width: 100%;
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

vue-demo/src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'Login',
+    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
   },
   {
     path: '/about',

vue-demo/src/views/Login.vue

 <template>
-  <div>
+  <div class="login-container">
+    <div class="left">
+      <p>Elegant Design with unlimited features, built with love</p>
+      <p>
+        Wrappixel helps developers to build organized and well-coded admin
+        dashboards full of beautiful and feature rich modules.
+      </p>
+    </div>
+    <!-- <v-col cols="12" sm="6" md="8" class="info justify-center">
+          <v-layout row wrap  align-center justify-center fill-height >
             <v-container>
-      <v-row no-gutters>
-        <v-col>
-          <v-card color="primary" dark>
-            <v-card-text>
-              <h2
-                class="white--text"
-                align="left"
-              >Elegant Design with unlimited features, built with love</h2>
-              <h6
-                align="left"
-              >Wrappixel helps developers to build organized and well-coded admin dashboards full of beautiful and feature rich modules.</h6>
-            </v-card-text>
-          </v-card>
+              <v-row  class="justify-center">
+                <v-col cols="9" sm="6" md="9">
+                    <h2 class="display-1 white--text font-weight-medium"  align="left">Elegant Design with unlimited features, built with love</h2>
                 </v-col>
-        <v-col>
-          <v-card>
+             </v-row>
+             <v-row  class="justify-center">
+                <v-col cols="9" sm="6" md="9">
+                    <h6 class="subtitle-1 mt-4 white--text op-5 font-weight-regular"  align="left">Wrappixel helps developers to build organized and well-coded admin dashboards full of beautiful and feature rich modules.</h6>
+                </v-col>
+             </v-row>
+             <v-row  class="justify-center">
+                <v-col cols="9" sm="6" md="9">
+                  <button type="button" class="mt-4 text-capitalize v-btn v-btn--depressed v-btn--flat v-btn--outlined theme--light v-size--x-large white--text">
+                      <span class="v-btn__content">Learn More</span>
+                  </button>
+                </v-col>
+             </v-row>
+          </v-container>
+          </v-layout>
+      </v-col>-->
+    <div class="right">
+      <div>
         <v-card-title>
           <div>
             <v-row>
@@ -33,9 +48,9 @@
             </v-row>
             <v-row>
               <v-col align="left">
-                    <h6 class="subtitle-1">
+                <h6 class="subtitle-1 ml-auto">
                   Don't have an account?
-                      <a href>Sign Up</a>
+                  <a class="text-decoration-none" href>Sign Up</a>
                 </h6>
               </v-col>
             </v-row>
@@ -80,7 +95,7 @@
                 ></v-checkbox>
               </v-col>
               <v-col align="right">
-                    <a class="link" href>Forgot pwd?</a>
+                <a class="text-decoration-none" href>Forgot pwd?</a>
               </v-col>
             </v-row>
             <v-row>
@@ -91,7 +106,8 @@
                   :disabled="invalid"
                   color="primary"
                   block
-                    >SIGN IN</v-btn>
+                  >SIGN IN</v-btn
+                >
               </v-col>
             </v-row>
           </form>
@@ -102,10 +118,8 @@
           <v-btn text>Github</v-btn>
           <v-spacer></v-spacer>
         </v-card-actions>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -122,5 +136,42 @@ export default {
     }
   }
 }
-
 </script>
+
+<style scoped lang="less">
+.login-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  .left {
+    flex: 1;
+    background: rgb(43, 129, 214);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    p {
+      color: #ffffff;
+      width: 70%;
+      text-align: left;
+      font-size: 14px;
+      letter-spacing: 1px;
+      &:first-child {
+        margin-bottom: 8px;
+        font-size: 20px;
+      }
+    }
+  }
+  .right {
+    width: 640px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    div {
+      width: 100%;
+    }
+  }
+}
+</style>