|
|
@@ -8,46 +8,48 @@
|
|
|
<!--<img style="width: 100%; height: 100%;" v-bind:src="img.url" >-->
|
|
|
<!--</el-carousel-item>-->
|
|
|
<!--</el-carousel>-->
|
|
|
- <section class="login"
|
|
|
- :style="{'top':iTop}">
|
|
|
- <div style="width:420px;text-align:center;margin-bottom:20px;">
|
|
|
+ <div class="login">
|
|
|
+ <div style="width:470px;text-align:center;margin-bottom:10px;">
|
|
|
<div class="msgotification"
|
|
|
@click="msgotification">
|
|
|
<img :src="url"
|
|
|
alt="消息通知"
|
|
|
- style="width:45px;" />
|
|
|
+ style="width:40px;" />
|
|
|
<div>通知公告</div>
|
|
|
</div>
|
|
|
<div class="datadownload"
|
|
|
@click="datadownload">
|
|
|
<img :src="url1"
|
|
|
alt="资料下载"
|
|
|
- style="width:45px" />
|
|
|
+ style="width:40px" />
|
|
|
<div>资料下载</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="width: 420px; background:rgba(255,255,255,0.5); padding: 20px">
|
|
|
- <div style="width: 380px;background:rgba(255,255,255,0.9); padding: 20px">
|
|
|
+ <div style="width: 470px; background:rgba(255,255,255,0.5); padding: 20px">
|
|
|
+ <div style="width: 430px;background:rgba(255,255,255,0.9); padding: 20px 20px 10px 20px">
|
|
|
+ <div class="xitongdenglu">系统登录</div>
|
|
|
<el-row>
|
|
|
- <el-col :span="24">
|
|
|
+ <el-col :span="2"> </el-col>
|
|
|
+ <el-col :span="20">
|
|
|
<el-form class="login-form"
|
|
|
auto-complete="off"
|
|
|
:model="model"
|
|
|
:rules="rules"
|
|
|
ref="user"
|
|
|
label-position="left">
|
|
|
- <el-form-item style="margin-top:5px"
|
|
|
+ <el-form-item style="margin-top:10px"
|
|
|
label=""
|
|
|
prop="username">
|
|
|
- <el-input prefix-icon="el-icon-user-solid"
|
|
|
- type="text"
|
|
|
+ <el-input type="text"
|
|
|
+ size="medium"
|
|
|
style="background:rgba(255,255,255,0.8);"
|
|
|
v-model="model.username"
|
|
|
- placeholder="请输入用户名">
|
|
|
+ placeholder="请输入用户名"><i slot="prepend"
|
|
|
+ class="el-icon-user-solid"></i>
|
|
|
<el-select v-model="loginMode"
|
|
|
slot="append"
|
|
|
placeholder="登录类型"
|
|
|
- style="width: 125px;">
|
|
|
+ style="width: 108px;">
|
|
|
<el-option label="PTR认证"
|
|
|
:value="2"></el-option>
|
|
|
<el-option label="普通账户"
|
|
|
@@ -55,23 +57,26 @@
|
|
|
</el-select>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item style="margin-top:20px"
|
|
|
+ <el-form-item style="margin-top:13.5px"
|
|
|
label=""
|
|
|
prop="password">
|
|
|
<el-input type="password"
|
|
|
- prefix-icon="el-icon-s-goods"
|
|
|
+ size="medium"
|
|
|
v-model="model.password"
|
|
|
- placeholder="请输入密码" />
|
|
|
+ placeholder="请输入密码"><i slot="prepend"
|
|
|
+ class="el-icon-key"></i></el-input>
|
|
|
+
|
|
|
</el-form-item>
|
|
|
<el-row>
|
|
|
<el-col :span="16">
|
|
|
- <el-form-item style="margin-top:10px"
|
|
|
+ <el-form-item style="margin-top:3.5px"
|
|
|
label=""
|
|
|
prop="verifycode">
|
|
|
<el-input v-model="model.verifycode"
|
|
|
- prefix-icon="el-icon-view"
|
|
|
+ size="medium"
|
|
|
placeholder="请输入验证码"
|
|
|
- @keyup.enter.native="loginall()"></el-input>
|
|
|
+ @keyup.enter.native="loginall()"><i slot="prepend"
|
|
|
+ class="el-icon-view"></i></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
@@ -79,7 +84,8 @@
|
|
|
<div class="identifybox">
|
|
|
<div @click="refreshCode"
|
|
|
title="看不清，换一张">
|
|
|
- <s-identify :identifyCode="identifyCode"></s-identify>
|
|
|
+ <s-identify :identifyCode="identifyCode"
|
|
|
+ class="s-identify"></s-identify>
|
|
|
</div>
|
|
|
<!-- <el-button @click="refreshCode" type='text' class="textbtn">看不清，换一张</el-button> -->
|
|
|
</div>
|
|
|
@@ -87,37 +93,36 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-button type="primary"
|
|
|
+ style="margin-top:-5.5px"
|
|
|
:loading="loading"
|
|
|
- @click="loginall()">{{ loading ? '登录中...' : '登录系统' }}</el-button>
|
|
|
- <el-row style="margin-top: 5px"
|
|
|
+ @click="loginall()">{{ loading ? '登录中...' : '登 录' }}</el-button>
|
|
|
+ <el-row style="margin-top: 0px"
|
|
|
:gutter="10">
|
|
|
<el-col :span="12">
|
|
|
<router-link :to="'/signup'">
|
|
|
- <el-button type="plain"
|
|
|
- style="background:rgba(255,255,255,0.8)">注册账号</el-button>
|
|
|
+ <el-button type="text">注册账号</el-button>
|
|
|
</router-link>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<router-link :to="'/passwordback'">
|
|
|
- <el-button type="plain"
|
|
|
- style="background:rgba(255,255,255,0.8)">忘记密码</el-button>
|
|
|
+ <el-button type="text">忘记密码</el-button>
|
|
|
</router-link>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
</el-col>
|
|
|
-
|
|
|
+ <el-col :span="2"> </el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </section>
|
|
|
+ </div>
|
|
|
<!--</div>-->
|
|
|
</div>
|
|
|
<div>
|
|
|
<footer class="login-footer"
|
|
|
- style="color:#A9A9A9;padding-bottom: 30px">
|
|
|
- <span style="font-size: 16px">技术支持：李琛 022-25920812<br></span>
|
|
|
- <span style="font-size: 16px">推荐使用谷歌浏览器、360浏览器(极速模式)等，Chrome内核浏览器打开本系统</span>
|
|
|
+ style="color:white;padding-bottom: 10px">
|
|
|
+ <span style="font-size: 14px">技术支持：李琛 022-25920812<br></span>
|
|
|
+ <span style="font-size: 14px">推荐使用谷歌浏览器、360浏览器(极速模式)等，Chrome内核浏览器打开本系统</span>
|
|
|
</footer>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -455,12 +460,42 @@ export default class Login extends Vue {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@import "../assets/styles/base/variables";
|
|
|
-
|
|
|
-.msgotification,.datadownload {
|
|
|
+.el-input__inner {
|
|
|
+ border: 1px solid rgb(202, 204, 206);
|
|
|
+}
|
|
|
+.el-button--text {
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+.el-button--text:hover {
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+.el-button--primary {
|
|
|
+ background: -webkit-gradient(
|
|
|
+ linear,
|
|
|
+ 0% 0%,
|
|
|
+ 0% 100%,
|
|
|
+ from(rgb(75, 165, 241)),
|
|
|
+ to(rgb(55, 123, 188))
|
|
|
+ );
|
|
|
+ // background-color:-webkit-linear-gradient(top, #bccfe3 0%,#d2dded 100%);
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+.el-button--primary:hover {
|
|
|
+ background: -webkit-gradient(
|
|
|
+ linear,
|
|
|
+ 0% 0%,
|
|
|
+ 0% 100%,
|
|
|
+ from(rgba(75, 165, 241, 0.9)),
|
|
|
+ to(rgba(55, 123, 188, 0.9))
|
|
|
+ );
|
|
|
+ border-color: "";
|
|
|
+}
|
|
|
+.msgotification,
|
|
|
+.datadownload {
|
|
|
width: 80px;
|
|
|
display: inline-block;
|
|
|
text-align: center;
|
|
|
- font-weight: bold;
|
|
|
+ font-family: "黑体";
|
|
|
font-size: 20px;
|
|
|
padding-left: 45px;
|
|
|
}
|
|
|
@@ -478,8 +513,8 @@ export default class Login extends Vue {
|
|
|
}
|
|
|
|
|
|
.identifybox {
|
|
|
- margin-top: 12px;
|
|
|
- margin-left: 20px;
|
|
|
+ margin-top: 7px;
|
|
|
+ margin-left: 9px;
|
|
|
}
|
|
|
|
|
|
.identifybox:hover {
|
|
|
@@ -569,7 +604,9 @@ export default class Login extends Vue {
|
|
|
background-color: white;
|
|
|
background-image: url(" ../assets/img/01login.png");
|
|
|
background-repeat: no-repeat;
|
|
|
- background-size: cover;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ // background-size: cover;
|
|
|
/*left: 0;*/
|
|
|
/*right: 0;*/
|
|
|
/*<!--top: -135px;-->*/
|
|
|
@@ -622,59 +659,83 @@ export default class Login extends Vue {
|
|
|
color: $brand-color;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
.login {
|
|
|
- position: relative;
|
|
|
- max-width: 25rem;
|
|
|
- margin: 0 auto; /*水平居中*/
|
|
|
- // top: 500px; /*偏移*/
|
|
|
- // transform: translateY(-50%);
|
|
|
- font-size: 0.875rem;
|
|
|
- opacity: 1;
|
|
|
- z-index: 200;
|
|
|
-
|
|
|
- &-header {
|
|
|
- margin-bottom: 1rem;
|
|
|
- .brand {
|
|
|
- margin: 4.5rem 0 3.5rem;
|
|
|
- text-align: center;
|
|
|
- letter-spacing: 0.125rem;
|
|
|
-
|
|
|
- a {
|
|
|
- margin: 0;
|
|
|
- color: $brand-color;
|
|
|
- font: 300 3rem sans-serif;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: $brand-hover-color;
|
|
|
- text-shadow: 0 0 1rem $brand-hover-color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-form {
|
|
|
- /*margin-bottom: 2.5rem;
|
|
|
- padding: 1.875rem 1.25rem;
|
|
|
- background: $login-form-background;*/
|
|
|
- color: $login-form-color;
|
|
|
-
|
|
|
- /*.heading {
|
|
|
- margin: 0 0 1rem;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 1.5rem;
|
|
|
- }*/
|
|
|
-
|
|
|
- .el-button {
|
|
|
- margin-top: 0.5rem;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -55%);
|
|
|
+ .el-button {
|
|
|
+ margin-top: 0.5rem;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
-
|
|
|
- .el-table,
|
|
|
- .el-table__expanded-cell {
|
|
|
- background-color: rgba(255, 255, 255, 0.8);
|
|
|
+ .xitongdenglu {
|
|
|
+ width: 100%;
|
|
|
+ color: rgb(6, 125, 191);
|
|
|
+ font-size: 26px;
|
|
|
+ font-family: "黑体";
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
+// .login {
|
|
|
+// position: relative;
|
|
|
+// max-width: 25rem;
|
|
|
+// margin: 0 auto; /*水平居中*/
|
|
|
+// // top: 500px; /*偏移*/
|
|
|
+// // transform: translateY(-50%);
|
|
|
+// font-size: 0.875rem;
|
|
|
+// opacity: 1;
|
|
|
+// z-index: 200;
|
|
|
+
|
|
|
+// &-header {
|
|
|
+// margin-bottom: 1rem;
|
|
|
+// .brand {
|
|
|
+// margin: 4.5rem 0 3.5rem;
|
|
|
+// text-align: center;
|
|
|
+// letter-spacing: 0.125rem;
|
|
|
+
|
|
|
+// a {
|
|
|
+// margin: 0;
|
|
|
+// color: $brand-color;
|
|
|
+// font: 300 3rem sans-serif;
|
|
|
+
|
|
|
+// &:hover {
|
|
|
+// color: $brand-hover-color;
|
|
|
+// text-shadow: 0 0 1rem $brand-hover-color;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// &-form {
|
|
|
+// /*margin-bottom: 2.5rem;
|
|
|
+// padding: 1.875rem 1.25rem;
|
|
|
+// background: $login-form-background;*/
|
|
|
+// color: $login-form-color;
|
|
|
+
|
|
|
+// /*.heading {
|
|
|
+// margin: 0 0 1rem;
|
|
|
+// font-weight: 400;
|
|
|
+// font-size: 1.5rem;
|
|
|
+// }*/
|
|
|
+
|
|
|
+// .el-button {
|
|
|
+// margin-top: 0.5rem;
|
|
|
+// width: 100%;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .el-table,
|
|
|
+// .el-table__expanded-cell {
|
|
|
+// background-color: rgba(255, 255, 255, 0.8);
|
|
|
+// }
|
|
|
+// .xitongdenglu {
|
|
|
+// width: 100%;
|
|
|
+// color: rgb(6, 125, 191);
|
|
|
+// font-size: 26px;
|
|
|
+// font-family: "黑体";
|
|
|
+// text-align: center;
|
|
|
+// }
|
|
|
+// }
|
|
|
</style>
|
|
|
|
lijunqing