|
|
@@ -1,74 +1,108 @@
|
|
|
<template>
|
|
|
<div class="login-container">
|
|
|
- <el-form
|
|
|
- ref="loginForm"
|
|
|
- :model="loginForm"
|
|
|
- class="login-form"
|
|
|
- auto-complete="on"
|
|
|
- label-position="left"
|
|
|
- >
|
|
|
- <div class="title-container">
|
|
|
- <h3 class="title">湖南智企云数据中心开放平台</h3>
|
|
|
+ <el-card :body-style="{padding:0}" shadow="none">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>数据中心开放平台</span>
|
|
|
+ <div style="float: right; color: #666666">
|
|
|
+ 服务热线：<span style="color: #FF970F;font-weight: bold">400-698-5980</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <el-form-item prop="username">
|
|
|
- <span class="svg-container el-icon-user-solid" />
|
|
|
-
|
|
|
- <el-input
|
|
|
- ref="username"
|
|
|
- v-model="loginForm.username"
|
|
|
- placeholder="请输入手机号/邮箱"
|
|
|
- name="username"
|
|
|
- type="text"
|
|
|
- auto-complete="on"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item prop="password">
|
|
|
- <span class="svg-container el-icon-lock" />
|
|
|
- <el-input
|
|
|
- :key="passwordType"
|
|
|
- ref="password"
|
|
|
- v-model="loginForm.password"
|
|
|
- :type="passwordType"
|
|
|
- placeholder="请输入登录密码"
|
|
|
- name="password"
|
|
|
- auto-complete="on"
|
|
|
- @keyup.enter.native="handleLogin"
|
|
|
- />
|
|
|
- <span class="show-pwd" @click="showPwd">
|
|
|
- <svg-icon
|
|
|
- :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
|
|
|
- />
|
|
|
- </span>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item prop="password">
|
|
|
- <span class="svg-container el-icon-warning" />
|
|
|
+ <div style="min-height: 500px;">
|
|
|
+ <el-row style="width: 1000px;margin: 99px auto 0 auto;overflow: hidden;">
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-image src="http://lcadmin.tongyu99.com/statics/image/dl01.png"/>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-card shadow="always">
|
|
|
+
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <strong>用户登录</strong>
|
|
|
+ </div>
|
|
|
+ <el-form
|
|
|
+ ref="loginForm"
|
|
|
+ :model="loginForm"
|
|
|
+ class="login-form"
|
|
|
+ auto-complete="on"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <el-form-item prop="username">
|
|
|
+ <el-input
|
|
|
+ ref="username"
|
|
|
+ v-model="loginForm.username"
|
|
|
+ placeholder="请输入手机号/邮箱"
|
|
|
+ name="username"
|
|
|
+ type="text"
|
|
|
+ auto-complete="on"
|
|
|
+ >
|
|
|
+ <span slot="prepend" class="svg-container el-icon-user-solid"/>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input
|
|
|
+ :key="passwordType"
|
|
|
+ ref="password"
|
|
|
+ v-model="loginForm.password"
|
|
|
+ :type="passwordType"
|
|
|
+ placeholder="请输入登录密码"
|
|
|
+ name="password"
|
|
|
+ auto-complete="on"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ >
|
|
|
+ <span slot="prepend" class="svg-container el-icon-lock"/>
|
|
|
+ <span slot="append" class="show-pwd" @click="showPwd">
|
|
|
+ <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
|
|
|
+ </span>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-form-item prop="password">
|
|
|
+
|
|
|
+ <el-input
|
|
|
+ ref="captcha"
|
|
|
+ v-model="loginForm.captcha"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ name="captcha"
|
|
|
+ type="text"
|
|
|
+ >
|
|
|
+ <span slot="prepend" class="svg-container el-icon-warning"/>
|
|
|
+
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="text-align: right">
|
|
|
+ <el-image
|
|
|
+ v-if="captcha && captcha!==''"
|
|
|
+ :src="captcha"
|
|
|
+ style="width: 80px"
|
|
|
+ class="show-pwd"
|
|
|
+ @click="refreshCaptcha"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ :loading="loading"
|
|
|
+ type="primary"
|
|
|
+ style="width: 100%; margin-bottom: 30px"
|
|
|
+ @click.native.prevent="handleLogin"
|
|
|
+ >
|
|
|
+ 登录
|
|
|
+ </el-button>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
|
|
|
- <el-input
|
|
|
- ref="captcha"
|
|
|
- v-model="loginForm.captcha"
|
|
|
- placeholder="请输入验证码"
|
|
|
- name="captcha"
|
|
|
- type="text"
|
|
|
- />
|
|
|
- <img
|
|
|
- :src="captcha"
|
|
|
- class="show-pwd"
|
|
|
- style="height: 38px"
|
|
|
- @click="refreshCaptcha"
|
|
|
- >
|
|
|
- </el-form-item>
|
|
|
+ </el-card>
|
|
|
|
|
|
- <el-button
|
|
|
- :loading="loading"
|
|
|
- type="primary"
|
|
|
- style="width: 100%; margin-bottom: 30px"
|
|
|
- @click.native.prevent="handleLogin"
|
|
|
- >立即登录
|
|
|
- </el-button>
|
|
|
- </el-form>
|
|
|
+ <div class="footer">
|
|
|
+ ©2022 智慧旅游 版权所有 All Rights Reserved.
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -80,8 +114,8 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
loginForm: {
|
|
|
- username: '18888888888',
|
|
|
- password: 'a111111',
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
captcha: ''
|
|
|
},
|
|
|
loading: false,
|
|
|
@@ -143,99 +177,21 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
-$bg: #283443;
|
|
|
-
|
|
|
-$light_gray: #fff;
|
|
|
-$cursor: #fff;
|
|
|
-
|
|
|
-@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
|
|
- .login-container .el-input input {
|
|
|
- color: $cursor;
|
|
|
- }
|
|
|
+<style lang="css">
|
|
|
+.footer {
|
|
|
+ height: 68px;
|
|
|
+ line-height: 68px;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ background: #eaeaea;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
|
|
|
-/* reset element-ui css */
|
|
|
-.login-container {
|
|
|
- .el-input {
|
|
|
- display: inline-block;
|
|
|
- height: 47px;
|
|
|
- width: 85%;
|
|
|
-
|
|
|
- input {
|
|
|
- background: transparent;
|
|
|
- border: 0px;
|
|
|
- -webkit-appearance: none;
|
|
|
- border-radius: 0px;
|
|
|
- padding: 12px 5px 12px 15px;
|
|
|
- color: $light_gray;
|
|
|
- height: 47px;
|
|
|
- caret-color: $cursor;
|
|
|
-
|
|
|
- &:-webkit-autofill {
|
|
|
- box-shadow: 0 0 0px 1000px $bg inset !important;
|
|
|
- -webkit-text-fill-color: $cursor !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-form-item {
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
- background: rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 5px;
|
|
|
- color: #454545;
|
|
|
- }
|
|
|
+.footer a {
|
|
|
+ color: #333;
|
|
|
}
|
|
|
-</style>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-$bg: #2d3a4b;
|
|
|
-$dark_gray: #889aa4;
|
|
|
-$light_gray: #eee;
|
|
|
-
|
|
|
-.login-container {
|
|
|
- min-height: 100%;
|
|
|
- width: 100%;
|
|
|
- background-color: $bg;
|
|
|
- overflow: hidden;
|
|
|
|
|
|
- .login-form {
|
|
|
- position: relative;
|
|
|
- width: 520px;
|
|
|
- max-width: 100%;
|
|
|
- padding: 160px 35px 0;
|
|
|
- margin: 0 auto;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .svg-container {
|
|
|
- padding: 6px 5px 6px 15px;
|
|
|
- color: $dark_gray;
|
|
|
- vertical-align: middle;
|
|
|
- width: 30px;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
- .title-container {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 26px;
|
|
|
- color: $light_gray;
|
|
|
- margin: 0px auto 40px auto;
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .show-pwd {
|
|
|
- position: absolute;
|
|
|
- right: 10px;
|
|
|
- top: 7px;
|
|
|
- font-size: 16px;
|
|
|
- color: $dark_gray;
|
|
|
- cursor: pointer;
|
|
|
- user-select: none;
|
|
|
- }
|
|
|
+.footer a:hover {
|
|
|
+ color: #f08200;
|
|
|
}
|
|
|
</style>
|
