| | |
| | | <template> |
| | | <div class="login-container"> |
| | | <div class="title">石家庄人社局业务运行数据分析平台</div> |
| | | <!-- 用户登录盒子--> |
| | | <div class="loginBox"> |
| | | <div class="title-text"> |
| | | <span>用户登录</span> |
| | | </div> |
| | | <!-- 表单登录盒子--> |
| | | <div class="FormBox"> |
| | | <!--两个图标--> |
| | | <div class="headerIcon"></div> |
| | | <div class="lockIcon"></div> |
| | | <!--表单--> |
| | | <el-form |
| | | ref="loginFormRef" |
| | | :model="loginForm" |
| | | class="LoginForm" |
| | | label-width="0rem" |
| | | :rules="loginFormRules" |
| | | > |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | v-model="loginForm.username" |
| | | placeholder="请输入用户名" |
| | | class="userInput" |
| | | prefix-icon="iconfont icon-user" |
| | | > |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | v-model="loginForm.password" |
| | | prefix-icon="iconfont icon-3702mima" |
| | | placeholder="请输入密码" |
| | | class="passwordInput" |
| | | show-password |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | |
| | | <el-button type="primary" class="loginButton" @click="login()" |
| | | >登录 |
| | | </el-button> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import { login } from "@/api/index"; |
| | | // import {login} from "@/api/index"; |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | loginForm: { |
| | | username: "admin", |
| | | password: "123456" |
| | | }, |
| | | loginFormRules: { |
| | | // 验证用户名是否合法 |
| | | username: [ |
| | | { required: true, message: "请输入登录名称", trigger: "blur" }, |
| | | { min: 3, max: 15, message: "长度在6到15个字符", trigger: "blur" } |
| | | ], |
| | | // 验证密码是否合法 |
| | | password: [ |
| | | { required: true, message: "请输入登录密码", trigger: "blur" }, |
| | | { min: 6, max: 10, message: "长度在6到10个字符", trigger: "blur" } |
| | | ] |
| | | } |
| | | }; |
| | | }, |
| | | beforeCreate() { |
| | | }, |
| | | beforeCreate() {}, |
| | | methods: { |
| | | }, |
| | | login() { |
| | | this.$refs.loginFormRef.validate(async valid => { |
| | | console.log(valid); |
| | | if (!valid) return; |
| | | this.$router.push("/"); |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | $bg: #283443; |
| | | $light_gray: rgb(43, 7, 7); |
| | | $cursor: #fff; |
| | | .loginButton { |
| | | font-size: 0.125rem !important; |
| | | } |
| | | .FormBox { |
| | | width: 100%; |
| | | margin-left: 0.3125rem; |
| | | position: absolute; |
| | | top: 0.6875rem; |
| | | |
| | | .el-input__inner { |
| | | height: 0.3438rem; |
| | | font-size: 0.1094rem; |
| | | background: rgba(81, 210, 255, 0.24); |
| | | color: #ffffff; |
| | | padding-left: 0.4063rem; |
| | | } |
| | | |
| | | :nth-of-type(2) { |
| | | margin-top: 0.1875rem; |
| | | } |
| | | |
| | | .el-form-item__content { |
| | | width: 2.5rem; |
| | | height: 0.3438rem; |
| | | line-height: 0.3438rem; |
| | | } |
| | | |
| | | .el-form-item__error { |
| | | font-size: 0.1094rem !important; |
| | | margin-top: 0.0352rem; |
| | | } |
| | | |
| | | .el-input .el-input__clear { |
| | | position: relative; |
| | | //background-color: blue; |
| | | width: 0.0664rem; |
| | | height: 0.043rem; |
| | | top: -0.1328rem; |
| | | right: 0.0898rem; |
| | | border-radius: 60%; |
| | | } |
| | | |
| | | .el-icon-view:before { |
| | | position: absolute; |
| | | top: -0.0547rem; |
| | | right: 0.0039rem; |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | <style lang="scss" scoped> |
| | | </style> |
| | | @import "../assets/css/base"; |
| | | .login-container { |
| | | width: 10rem; |
| | | height: 6.5625rem; |
| | | background: url(../assets/images/login/loginBackground@2x.png) no-repeat; |
| | | background-size: 100%; |
| | | position: relative; |
| | | } |
| | | |
| | | .title { |
| | | width: 13.0612rem; |
| | | height: 0.5rem; |
| | | background: url(../assets/images/login/top@2x.png) no-repeat; |
| | | background-size: 100%; |
| | | position: absolute; |
| | | left: -1.5306rem; |
| | | top: 0; |
| | | font-size: 0.1406rem; |
| | | color: #ffffff; |
| | | font-weight: 400; |
| | | text-align: center; |
| | | line-height: 0.3906rem; |
| | | //font-family: Source Han Sans CN, Source Han Sans CN-Regular; |
| | | } |
| | | |
| | | .headerIcon { |
| | | position: absolute; |
| | | width: 0.3438rem; |
| | | height: 0.3359rem; |
| | | background: url(../assets/images/login/header@2x.png) no-repeat; |
| | | background-size: 100%; |
| | | border-right: 0.0039rem dashed #51d2ff; |
| | | } |
| | | |
| | | .lockIcon { |
| | | position: absolute; |
| | | top: 0.3438rem; |
| | | width: 0.3438rem; |
| | | height: 0.3359rem; |
| | | border-right: 0.0039rem dashed #51d2ff; |
| | | background: url(../assets/images/login/lock@2x_1.png) no-repeat; |
| | | background-size: 100%; |
| | | } |
| | | |
| | | .loginBox { |
| | | width: 3.125rem; |
| | | height: 3.1979rem; |
| | | background: url(../assets/images/login/loginBorder@2x.png); |
| | | background-size: 100%; |
| | | position: relative; |
| | | margin: 0 auto; |
| | | top: 1.5234rem; |
| | | |
| | | .title-text { |
| | | position: absolute; |
| | | width: 3.125rem; |
| | | margin-top: 0.375rem; |
| | | text-align: center; |
| | | |
| | | span { |
| | | font-size: $fontSize-32; |
| | | color: #51d2ff; |
| | | //font-family: Source Han Sans CN, Source Han Sans CN-Regular; |
| | | font-weight: 400; |
| | | line-height: 0.0469rem; |
| | | } |
| | | } |
| | | |
| | | .LoginForm { |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .loginButton { |
| | | width: 2.5rem; |
| | | height: 0.3438rem; |
| | | background: #51d2ff; |
| | | font-size: 0.125rem !important; |
| | | //font-family: Source Han Sans CN, Source Han Sans CN-Regular; |
| | | font-weight: 400; |
| | | text-align: center; |
| | | color: #000e2d; |
| | | line-height: 0.0938rem; |
| | | position: absolute; |
| | | bottom: 0.5648rem; |
| | | left: 0.3125rem; |
| | | } |
| | | } |
| | | </style> |