登陆界面by VUE & elementUI

过来一遍VUE基础于是想尝试先写一个登陆界面先做准备，为后面的学习开个头，UI组件选用的是elementUI。

• 组件代码：

<template>
  <div class="login" style="display:flex;justify-content:center;">
    <div class="login1" style="text-align:center;">
      <div style="position:absolute;left:15%;top:2%;">
        <div>
          <p>
          <img src="./img/6.png" height="180" width="250" style="z-index: 10"/>
          </p>
          <span
            style="font-family:Hiragino Sans GB; font-size:50px;color:#F56C6C;font-weight:1000;z-index: 10"
          >Slot</span>
        </div>
        <!-- login -->
        <div>
          <el-main style="text-align:center;">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>登录</span>
              </div>
              <el-input v-model="user" placeholder="请输入账号" style="margin-bottom:15px;width:80%"></el-input>
              <el-input
                placeholder="请输入密码"
                v-model="pass"
                show-password
                style="margin-bottom:15px;width:80%"
              ></el-input>
              <el-button type="info" round style="width:50%">登陆</el-button>
            </el-card>
          </el-main>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: "",
      pass: ""
    };
  }
};
</script>


<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
.login {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(./img/3.jpg);
  background-size: 100%;
}
.login1 {
  position: absolute;
  left: 25%;
  height: 100%;
  width: 50%;
  background: rgba(255, 255, 255, 0.6);
}
.el-main {
  opacity:0.85;
}
</style>

• 界面预览：
  
• 有待解决
  界面布局需要再系统学习下，以及界面的随着浏览器大小而自适应功能的实现。