搭建登录界面

src/App.vue

@@ -10,5 +10,14 @@
 </template>
 
 <style lang="scss">
-
+#app{
+  height: 100%;
+  margin: 0;
+}
+body,html{
+    height: 100%;
+    width:100%;
+    margin:0 0 0 0;
+    overflow:hidden hidden;
+}
 </style>

src/assets/css/reset.scss

@@ -1 +1,46 @@
-/* 公用scss */
+/* 公用scss */
+/*css 初始化 */
+body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,article,aside,header,section,body,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
+ul,ol{list-style:none;}
+a{text-decoration:none;}
+html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
+body{line-height:1.5; font-size:16px;}
+body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
+b,strong{font-weight:bold;}
+i,em{font-style:normal;}
+table{border-collapse:collapse;border-spacing:0;}
+table th,table td{border:1px solid #ddd;padding:5px;}
+table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
+img{border:0 none;width:auto\9;max-width:100%;vertical-align:top; height:auto;}
+button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
+button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
+button[disabled],input[disabled]{cursor:default;}
+input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
+input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
+input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
+input:focus{outline:none;}
+article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
+audio,canvas,video,progress{display:inline-block;}
+input::-webkit-input-speech-button {display: none}
+button,input,textarea{
+-webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+.clearfix:before{
+    clear:both;
+    height:0;
+    width:0;
+    content: "";
+    display: table;
+}
+.clearfix:after {
+    clear:both;
+    height:0;
+    width:0;
+    content: "";
+    display: table;
+}
+.clearfix {
+    *zoom: 1; /*IE/7/6*/ /*兼容IE6下的写法*/
+}
+
+/*css初始化完成*/

src/router/index.js

@@ -7,11 +7,11 @@ Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/login',
+    path: '/',
     name: 'login',
     component: Login
   }, {
-    path: '/',
+    path: '/home',
     name: 'home',
     component: Home
   }

src/views/Home.vue

@@ -4,6 +4,7 @@
     <!-- 加载动态组件 -->
     <component :is="$store.state.dynamicComponent.GLOBAL.logo"></component>
     <HelloWorld msg="Vue + vue-module-loader = Micro Front-end" />
+    
   </div>
 </template>
 
@@ -23,3 +24,10 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.home{
+  height: 2000px;
+  border: 2px solid #f00;
+}
+</style>

src/views/Login.vue

@@ -1,8 +1,25 @@
 <template>
     <div class="login">
-        <h1 class="h1">登录界面</h1>
-        账号：<el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
-        密码：<el-input placeholder="请输入密码" v-model="input" show-password></el-input>
+        <div class="shade">
+            <header class="header">
+                <img class="logo" src="../assets/logo.png" alt="慧牧科技LOGO" />
+                慧牧科技
+            </header>
+            <article class="article">
+                <h1>登录界面</h1>
+                <el-form :label-position="labelPosition" label-width="80px" :model="form">
+                    <el-form-item label="账号：">
+                        <el-input v-model="form.account" placeholder="请输入账号"></el-input>
+                    </el-form-item>
+                    <el-form-item label="密码：">
+                        <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="onSignIn">登录</el-button>
+                    </el-form-item>
+                </el-form>
+            </article>
+        </div>
     </div>
 </template>
 <script>
@@ -10,15 +27,61 @@ export default {
     name: "login",
     data() {
         return {
-            input: ""
+            labelPosition: "right",
+            form: {
+                account: "",
+                password: ""
+            }
         };
     },
+    methods: {
+        /* 登录按钮 */
+        onSignIn() {
+            console.log("登录!");
+            console.log(this.form)
+        }
+    },
     mounted() {}
 };
 </script>
 
 <style lang="scss" scoped>
-.h1 {
-    color: red;
+.login {
+    width: 100%;
+    height: 100%;
+    background: url(../assets/login_bg.jpg) 0 0 no-repeat;
+    background-size: 100%;
+    .shade {
+        height: 100%;
+        width: 100%;
+        background-color: #8899aa44;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .header {
+            font-size: 60px;
+            color: #eee;
+            margin: 180px 0 50px 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .logo {
+                height: 70px;
+                width: 70px;
+                margin-right: 20px;
+            }
+        }
+        .article {
+            width: 400px;
+            background-color: #ffffff44;
+            padding: 20px 60px 40px 20px;
+            border-radius: 20px;
+            h1 {
+                font-size: 20px;
+                color: #eee;
+                margin-left: 25px;
+            }
+        }
+    }
 }
 </style>