登录页面编写

ms-web/src/App.vue

@@ -12,11 +12,6 @@ export default {
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+
 }
 </style>

ms-web/src/components/HelloWorld.vue

@@ -1,13 +1,42 @@
 <template>
-
-
+      <div class="" style="margin-top: 350px">
+        <el-row type="flex" justify="center">
+          <span style="color:#909399;font-size: 30px;margin-bottom: 100px">micro fast 后台管理系统</span>
+        </el-row>
+        <el-row type="flex" justify="center">
+          <el-col :sm="5" :md="7" :lg="5" :xl="4">
+            <el-input v-model="username" placeholder="用户名" size="large"  clearable></el-input>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center" class="row-line">
+          <el-col :sm="5" :md="7" :lg="5" :xl="4">
+            <el-input v-model="password" placeholder="密码"  size="large"  clearable type="password"></el-input>
+          </el-col>
+        </el-row>
+        <el-row type="flex" justify="center" class="row-line">
+          <el-button type="success" size="medium" class="button-margin">登录</el-button>
+          <el-button type="primary" size="medium">注册</el-button>
+        </el-row>
+      </div>
 </template>
 <script>
+import ElRow from "element-ui/packages/row/src/row";
+import ElCol from "element-ui/packages/col/src/col";
+import ElContainer from "../../node_modules/element-ui/packages/container/src/main.vue";
+import ElMain from "../../node_modules/element-ui/packages/main/src/main.vue";
+import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";
 export default {
+  components: {
+    ElButton,
+    ElMain,
+    ElContainer,
+    ElCol,
+    ElRow},
   name: 'HelloWorld',
   data () {
     return {
-      msg: 'Welcome to Your Vue.js App'
+      username: '',
+      password: ''
     }
   }
 }
@@ -15,18 +44,10 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h1, h2 {
-  font-weight: normal;
+.button-margin{
+  margin-right: 70px;
 }
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
+.row-line{
+    margin-top: 10px ;
 }
 </style>