修改登录页面样式

src/views/login/index.vue

@@ -1,6 +1,65 @@
 <template>
   <div>
-    <el-card class="login-form-layout">
+    <div class="login-wrap">
+			<div class="main-login">
+				<div class="login-box">
+					<div class="login-layout">
+						<div class="logo"></div>
+						<!-- <form class="layui-form login-form" action=""> -->
+              <el-form autoComplete="on"
+              class="layui-form login-form"
+               :model="loginForm"
+               :rules="loginRules"
+               ref="loginForm"
+               label-position="left">
+							<h3 class="formTitle">
+								<img src="http://source.gzqlyx.com/lyjlogin/img/login-logo-bg-icon.png">林业发布后台管理系统</h3>
+							<!-- <div class="layui-form-item">
+								<i class="layui-icon">&#xe66f;</i>
+								<input type="text" name="account" required lay-verify="userName" placeholder="请输入账号" autocomplete="off" class="login-box-input layui-input">                
+							</div> -->
+              <el-form-item prop="username">
+                <el-input name="username"
+                          type="text"
+                          v-model="loginForm.username"
+                          autoComplete="on"
+                          placeholder="请输入用户名">
+                <span slot="prefix">
+                  <svg-icon icon-class="login-name" class="color-main login-name"></svg-icon>
+                </span>
+                </el-input>
+              </el-form-item>
+              <el-form-item prop="password">
+                <el-input name="password"
+                          :type="pwdType"
+                          @keyup.enter.native="handleLogin"
+                          v-model="loginForm.password"
+                          autoComplete="on"
+                          placeholder="请输入密码">
+                <span slot="prefix">
+                  <svg-icon icon-class="login-pass" class="color-main"></svg-icon>
+                </span>
+                <!-- <span slot="suffix" @click="showPwd">
+                  <svg-icon icon-class="eye" class="color-main"></svg-icon>
+                </span> -->
+                </el-input>
+              </el-form-item>
+              <el-form-item style="margin-bottom: 0;box-shadow: none;">
+                <el-button class="submit-btn" style="" type="primary" :loading="loading" @click.native.prevent="handleLogin">
+                  登录
+                </el-button>
+              </el-form-item>
+							<!-- <div class="layui-form-item">
+								<i class="layui-icon">&#xe673;</i>
+								<input type="password" name="pwd" required lay-verify="pwd" placeholder="请输入密码" autocomplete="off" class="login-box-input layui-input">
+							</div> -->
+							<!-- <button class="layui-btn layui-submit login-btn-submit" lay-submit lay-filter="loginForm">登录</button> -->
+					</el-form>
+					</div>
+				</div>
+			</div>
+		</div>
+    <!-- <el-card class="login-form-layout">
       <el-form autoComplete="on"
                :model="loginForm"
                :rules="loginRules"
@@ -43,7 +102,7 @@
         </el-form-item>
       </el-form>
     </el-card>
-    <img :src="login_center_bg" class="login-center-layout">
+    <img :src="login_center_bg" class="login-center-layout"> -->
   </div>
 </template>
 
@@ -138,8 +197,12 @@
   }
 </script>
 
-<style scoped>
-  .login-form-layout {
+<style>
+/* @import url('http://source.gzqlyx.com/lyjlogin/css/style.css'); */
+@import url('./login.css');
+
+
+  /* .login-form-layout {
     position: absolute;
     left: 0;
     right: 0;
@@ -159,5 +222,5 @@
     max-width: 100%;
     max-height: 100%;
     margin-top: 200px;
-  }
+  } */
 </style>

src/views/login/login.css

@@ -0,0 +1,180 @@
+.main-login {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  background: url("../../../static/img/login-bg.png") no-repeat center center !important;
+  background-size: 100% 100%;
+}
+
+.login-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100% - 70px);
+}
+.login-layout {
+  width: 800px;
+  padding: 0;
+  margin-top: -3%;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.logo {
+  float: left;
+  width: 340px;
+  height: 300px;
+  background: url("../../../static/img/login-logo-bg-index.png") no-repeat left center,
+    url("../../../static/img//login-logo-bg.png") no-repeat center center;
+  background-size: 93% 89%, 102% 107%;
+  text-align: center;
+  margin-right: 20px;
+}
+.logo h2,
+.logo h3 {
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.74);
+}
+.formTitle {
+  /* display: flex; */
+  align-items: center;
+  font-size: 18px;
+  color: #336666;
+  font-weight: 700;
+  margin: 15px 0 18px 0;
+  letter-spacing: 4px;
+}
+.formTitle img {
+  display: inline-block;
+  vertical-align: middle;
+  width: 42px;
+  height: 38px;
+  margin-right: 10px;
+}
+.logo .title {
+  margin: 84px 0 5px 0;
+  font-size: 28px;
+}
+.logo .sub-title {
+  font-size: 18px;
+  letter-spacing: 3px;
+}
+.login-btn-submit {
+  width: 100% !important;
+  background: linear-gradient(180deg, #70ba7b 1%, #70ba7b 100%) !important;
+  border: none !important;
+  box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.1) !important;
+}
+.login-btn-submit:hover {
+  width: 100% !important;
+  background: linear-gradient(180deg, #70ba7b 1%, #70ba7b 100%) !important;
+  border: none !important;
+  box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.1) !important;
+  color: #fff !important;
+}
+.login-form {
+  overflow: hidden;
+  padding: 20px 36px 20px 22px;
+  text-align: center;
+}
+.login-form h4 {
+  font-size: 18px;
+  margin: 16px 0 18px 0;
+  letter-spacing: 2px;
+  color: #fff;
+  text-align: left;
+  text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.6);
+}
+.layui-form-item {
+  height: 38px;
+  background-color: #fff;
+  border: 1px solid #f8f8f8;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 22px;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
+}
+.layui-form-item .layui-icon {
+  font-size: 20px;
+  padding: 0 10px;
+  color: #409eff;
+}
+.layui-form-item .layui-input {
+  border: none;
+  font-size: 16px;
+  height: 38px;
+  line-height: 45px;
+  padding-left: 5px;
+}
+.layui-submit {
+  margin-top: 10px;
+  width: 100%;
+  color: #fff;
+  background: #409eff;
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 1px solid #409eff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  -webkit-transition: 0.1s;
+  transition: 0.1s;
+  font-weight: 500;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  padding: 12px 20px;
+  font-size: 14px;
+  border-radius: 4px;
+  letter-spacing: 9px;
+}
+.layui-submit:hover {
+  color: #333;
+}
+.layui-form-item .layui-input:focus {
+  border-color: #70ba7b !important;
+}
+.layui-form-item .layui-input:hover {
+  border-color: #70ba7b !important;
+}
+.layui-form-item .layui-icon {
+  color: #70ba7b;
+}
+.layui-form-item .layui-input::-webkit-input-placeholder {
+  /* 使用webkit内核的浏览器 */
+  color: #dcdfe6;
+}
+.layui-form-item .layui-input:-moz-placeholder {
+  /* Firefox版本4-18 */
+  color: #dcdfe6;
+}
+.layui-form-item .layui-input::-moz-placeholder {
+  /* Firefox版本19+ */
+  color: #dcdfe6;
+}
+.layui-form-item .layui-input:-ms-input-placeholder {
+  /* IE浏览器 */
+  color: #dcdfe6;
+}
+
+.color-main{color: #70ba7b;}
+.el-form-item{margin-bottom: 22px;box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);}
+.el-input__prefix{left: 10px;}
+.el-input--prefix .el-input__inner{padding-left: 40px;}
+.el-input{font-size: 16px;}
+.submit-btn{width: 100%;background: linear-gradient(180deg, #70ba7b 1%, #70ba7b 100%) !important;border: 0;letter-spacing: 9px;border-radius: 4px;font-size: 14px;}
+.submit-btn:hover{opacity: 0.8;}
+.login-name{position: relative;top:2px;}