create login layout

assets/css/login.scss

@@ -0,0 +1,17 @@
+.login-container{
+  background-image:url('/image/seec_background.png');
+  background-size: cover;
+  background-attachment:fixed;
+  background-position: center center;
+  background-repeat: no-repeat;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.login-card{
+  width: 30%;
+  top: 100px;
+  position: absolute;
+  right: 20%;
+}

assets/css/main.scss

@@ -1,3 +1,41 @@
+@charset "UTF-8";
+
+$common-color: #333;
+$sub-color: #666;
+$note-color: #999;
+$select-color: #409eff;
+$hover-color: #bb61ff;
+
+html{height:100%}
+
 body{
   font-size: 14px;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  min-width: 1080px;
+  min-height: 100%;
 }
+
+.page-container{
+  width: 100%;
+  min-height: 100vh;
+}
+
+//
+//h1 h2 h3{
+//  color: #333;
+//}
+//
+//h1{
+//  font-size: 34px;
+//}
+//
+//h2{
+//  font-size: 28px;
+//}
+//
+//h3{
+//  font-size: 22px;
+//}

layouts/default.vue

@@ -8,7 +8,6 @@
 html {
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, 'Helvetica Neue', Arial, sans-serif;
-  font-size: 16px;
   word-spacing: 1px;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;

nuxt.config.js

@@ -24,7 +24,7 @@ module.exports = {
   */
   css: [
     'element-ui/lib/theme-chalk/index.css',
-    '@/assets/css/main.scss'
+    { src: '~/assets/css/main.scss', lang: 'scss' }
   ],
   /*
   ** Plugins to load before mounting the App

package.json

@@ -20,7 +20,8 @@
     "cross-env": "^5.2.0",
     "element-ui": "^2.4.11",
     "koa": "^2.6.2",
-    "nuxt": "^2.0.0"
+    "nuxt": "^2.0.0",
+    "scss-loader": "^0.0.1"
   },
   "devDependencies": {
     "@vue/test-utils": "^1.0.0-beta.27",

pages/login.vue

@@ -1,5 +1,9 @@
 <template>
+  <div class="page-container login-container">
+      <el-card class="login-card">
 
+      </el-card>
+  </div>
 </template>
 
 <script>
@@ -9,12 +13,12 @@
     name: "login",
     data(){
       return{
-          phone: '12345678912',
-          password: '123456'
+          phone: '',
+          password: ''
       }
     },
     mounted(){
-      this.login();
+      //this.login();
     },
     methods: {
       login() {
@@ -40,5 +44,5 @@
 </script>
 
 <style scoped>
-
+  @import '~/assets/css/login.scss';
 </style>

yarn.lock

@@ -8410,6 +8410,11 @@ schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
+scss-loader@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/scss-loader/-/scss-loader-0.0.1.tgz#eae017b9e0f38c12a532db25c220b902fb34e671"
+  integrity sha1-6uAXueDzjBKlMtslwiC5Avs05nE=
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"