Skip to content

W
web-monitor
Commit 824d0878 authored by neogcg's avatar neogcg
Browse files
Options

登录页

parent 5dc76026
Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 140 deletions
src/layout/components/AppMain.vue
View file @ 824d0878
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
border-radius: 8px; border-radius: 8px;
/*50 = navbar */ /*50 = navbar */
min-height: calc(100vh - 50px); min-height: calc(100vh - 50px);
width: 98%; width: calc(98% - 20px);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
......
src/styles/common.scss
View file @ 824d0878
/** /**
公共样式 公共样式
*/ */
*{
font-family: 'Source Han Sans CN';
}
.ml10 { .ml10 {
margin-left: 10px; margin-left: 10px;
} }
...@@ -11,7 +13,7 @@ ...@@ -11,7 +13,7 @@
} }
.mb20 { .mb20 {
margin-bottom: 20px; margin-bottom: 24px;
} }
.ml20 { .ml20 {
......
src/views/alarm/cableTime/index.vue
View file @ 824d0878
<template> <template>
<!-- 漏缆实时状态 --> <!-- 漏缆监测告警 -->
<div class="leakage-cable"><el-button-group> <div class="leakage-cable"><el-button-group>
<el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button> <el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
</el-button-group> </el-button-group>
......
src/views/alarm/device/index.vue
View file @ 824d0878
<template> <template>
<!-- 漏缆实时状态 --> <!-- 设备连接告警 -->
<div class="leakage-cable"> <div class="leakage-cable">
<el-button-group> <el-button-group>
<el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button> <el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
......
src/views/dashboard/index.vue
View file @ 824d0878
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="12" v-for="item in listData" class="mb20"> <el-col :span="12" v-for="item in listData" class="mb20">
<el-card shadow="never"> <el-card shadow="never">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix posa">
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
<el-button v-if="item.option" style="float: right; padding: 3px 0;margin-right:20px" type="text">保存</el-button> <el-button v-if="item.option" style="float: right; padding: 3px 0;margin-right:20px" type="text" class="savebtn">保存</el-button>
</div> </div>
<div v-for="k in item.list" :key="k.name" :class="item.list.length<=2? 'text2' : 'text'"> <div v-for="k in item.list" :key="k.name" :class="item.list.length<=2? 'text2' : 'text'">
<el-row :gutter="24"> <el-row :gutter="24">
...@@ -82,6 +82,13 @@ export default { ...@@ -82,6 +82,13 @@ export default {
padding: 0px; padding: 0px;
} }
} }
.posa{
position: relative;
}
.savebtn{
position: absolute;
right:2%;
}
// .el-col { // .el-col {
// margin-bottom: 20px; // margin-bottom: 20px;
// } // }
......
src/views/login/index.vue
View file @ 824d0878
<template> <template>
<div class="login-container"> <div class="login-container">
<div class="text"> <div class="text">
<p style="color: white;font-size: 30px;text-align: center;">RX100R 漏缆故障定位监测系统</p> <p style="color: white; font-size: 40px; text-align: center; letter-spacing: 5px;">
RX100R 漏缆故障定位监测系统
</p>
</div> </div>
<div class="loginBox"> <div class="loginBox">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> <el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="on"
label-position="left"
>
<div class="title-container">
<p class="title">欢迎登录</p>
<p class="title titeng">WELCOME LOGIN</p>
</div>
<div class="title-container"> <el-form-item prop="username">
<h3 class="title">欢迎登录</h3> <span class="svg-container">
</div> <svg-icon icon-class="user" />
</span>
<el-input
ref="username"
v-model="loginForm.username"
placeholder="用户名"
name="username"
type="text"
tabindex="1"
auto-complete="on"
style="width: 270px"
/>
</el-form-item>
<el-form-item prop="username"> <el-form-item prop="password">
<span class="svg-container"> <span class="svg-container">
<svg-icon icon-class="user" /> <svg-icon icon-class="password" />
</span> </span>
<el-input <el-input
ref="username" :key="passwordType"
v-model="loginForm.username" ref="password"
placeholder="用户名" v-model="loginForm.password"
name="username" style="width: 270px"
type="text" :type="passwordType"
tabindex="1" placeholder="密码"
auto-complete="on" name="password"
style="width:270px" tabindex="2"
/> auto-complete="on"
</el-form-item> @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"> <el-button
<span class="svg-container"> :loading="loading"
<svg-icon icon-class="password" /> class="loginbtn"
</span> style="width: 100%; margin-top: 30px; margin-bottom: 30px;"
<el-input @click.native.prevent="handleLogin"
:key="passwordType" >登录</el-button
ref="password" >
v-model="loginForm.password"
style="width:270px"
:type="passwordType"
placeholder="密码"
name="password"
tabindex="2"
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-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button> <!-- <div class="tips">
<!-- <div class="tips">
<span style="margin-right:20px;">username: admin</span> <span style="margin-right:20px;">username: admin</span>
<span> password:任意6位</span> <span> password:任意6位</span>
</div> --> </div> -->
</el-form>
</el-form>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { validUsername } from '@/utils/validate' import { validUsername } from "@/utils/validate";
export default { export default {
name: 'Login', name: "Login",
data() { data() {
const validateUsername = (rule, value, callback) => { const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) { if (!validUsername(value)) {
callback(new Error('请输入正确的用户名')) callback(new Error("请输入正确的用户名"));
} else { } else {
callback() callback();
} }
} };
const validatePassword = (rule, value, callback) => { const validatePassword = (rule, value, callback) => {
if (value.length < 6) { if (value.length < 6) {
callback(new Error('密码不能少于6位')) callback(new Error("密码不能少于6位"));
} else { } else {
callback() callback();
} }
} };
return { return {
loginForm: { loginForm: {
username: 'admin', username: "admin",
password: '123456' password: "123456",
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }], username: [
password: [{ required: true, trigger: 'blur', validator: validatePassword }] { required: true, trigger: "blur", validator: validateUsername },
],
password: [
{ required: true, trigger: "blur", validator: validatePassword },
],
}, },
loading: false, loading: false,
passwordType: 'password', passwordType: "password",
redirect: undefined redirect: undefined,
} };
}, },
watch: { watch: {
$route: { $route: {
handler: function(route) { handler: function (route) {
this.redirect = route.query && route.query.redirect this.redirect = route.query && route.query.redirect;
}, },
immediate: true immediate: true,
} },
}, },
methods: { methods: {
showPwd() { showPwd() {
if (this.passwordType === 'password') { if (this.passwordType === "password") {
this.passwordType = '' this.passwordType = "";
} else { } else {
this.passwordType = 'password' this.passwordType = "password";
} }
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.password.focus() this.$refs.password.focus();
}) });
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
this.loading = true this.loading = true;
this.$store.dispatch('user/login', this.loginForm).then(() => { this.$store
if (this.loginForm.password=='123456') { .dispatch("user/login", this.loginForm)
this.$router.push({ path: this.redirect || '/' }) .then(() => {
this.loading = false if (this.loginForm.password == "123456") {
} this.$router.push({ path: this.redirect || "/" });
else{ this.loading = false;
alert('密码错误') } else {
this.loading = false alert("密码错误");
return false this.loading = false;
} return false;
}).catch(() => { }
this.loading = false })
}) .catch(() => {
this.loading = false;
});
} else { } else {
console.log('error submit!!') console.log("error submit!!");
return false return false;
} }
}) });
} },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
/* 修复input 背景不协调 和光标变色 */ /* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg:#283443; $bg: #283443;
$light_gray:#fff; $light_gray: #fff;
$cursor: #fff; $cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) { @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
...@@ -158,7 +179,7 @@ $cursor: #fff; ...@@ -158,7 +179,7 @@ $cursor: #fff;
.login-container { .login-container {
.el-input { .el-input {
display: inline-block; display: inline-block;
height: 47px; height: 42px;
width: 85%; width: 85%;
input { input {
...@@ -168,7 +189,7 @@ $cursor: #fff; ...@@ -168,7 +189,7 @@ $cursor: #fff;
border-radius: 0px; border-radius: 0px;
padding: 12px 5px 12px 15px; padding: 12px 5px 12px 15px;
color: $light_gray; color: $light_gray;
height: 47px;
caret-color: $cursor; caret-color: $cursor;
&:-webkit-autofill { &:-webkit-autofill {
...@@ -179,70 +200,81 @@ $cursor: #fff; ...@@ -179,70 +200,81 @@ $cursor: #fff;
} }
.el-form-item { .el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.6);
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 25px; border-radius: 12px;
color: #454545; color: #454545;
height: 42px;
}
.el-form-item__content{
line-height: 32px;
} }
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
$bg:#2d3a4b; $bg: #2d3a4b;
$dark_gray:#889aa4; $dark_gray: #889aa4;
$light_gray:#eee; $light_gray: #eee;
.login-container { .login-container {
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
// background-color: $bg; // background-color: $bg;
background-image: url( "http://dapchina.bj.bcebos.com/nms/20220105153715.png?authorization=bce-auth-v1/5d787726a1b84b738cbac101c310a28c/2022-01-05T07%3A37%3A50Z/300/host/035d0be566820fec4b53e4c3a59407558e46a8bdf20dc77711df04b71ca7d8f3"); background-image: url("../../assets/img/login.png");
background-repeat:no-repeat; background-repeat: no-repeat;
background-size:100% 100%; background-size: 100% 100%;
overflow: hidden; overflow: hidden;
.text { .text {
position: absolute; position: absolute;
top: 50%; top: 20%;
left: 10%; left: calc(50% - 323px);
display: block; display: block;
width: 634px; width: 646px;
height: 122px; height: 122px;
line-height: 60px; line-height: 60px;
font-size: 40px;
transform: translateY(-82px); transform: translateY(-82px);
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif; font-family: "Source Sans Pro", sans-serif;
background-image: url('../../assets/img/loginTitleBg.png'); // background-image: url('../../assets/img/loginTitleBg.png');
// ../../assets/img/
} }
.loginBox { .loginBox {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 78%; left: 50%;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
display: block; display: block;
width: 464px; width: 464px;
height: 407px; height: 380px;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
margin: 0; margin: 0;
padding: 33px 21px 67px; padding: 33px 21px 40px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 20px; border-radius: 20px;
font-family: 'Source Sans Pro', sans-serif; font-family: "Source Sans Pro", sans-serif;
.loginbtn{
background: linear-gradient(180deg, #4082FF 0%, #0044C7 100%);
color:#ffffff;
font-size: 14px;
border:none;
height: 46px;
border-radius: 8px;
letter-spacing: 3px;
}
} }
.login-form { .login-form {
position: relative; position: relative;
width: 80%; width: 80%;
padding: 0px; padding: 0px;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
} }
.tips { .tips {
...@@ -258,7 +290,7 @@ $light_gray:#eee; ...@@ -258,7 +290,7 @@ $light_gray:#eee;
} }
.svg-container { .svg-container {
padding: 6px 5px 6px 15px; padding: 4px 5px 10px 15px;
color: $dark_gray; color: $dark_gray;
vertical-align: middle; vertical-align: middle;
width: 30px; width: 30px;
...@@ -267,20 +299,28 @@ $light_gray:#eee; ...@@ -267,20 +299,28 @@ $light_gray:#eee;
.title-container { .title-container {
position: relative; position: relative;
margin-top:15px;
margin-bottom: 32px;
.title { .title {
font-size: 26px; font-family: 'Source Han Sans CN';
font-size: 24px;
color: $light_gray; color: $light_gray;
margin: 0px auto 40px auto; margin: 0px auto 10px auto;
text-align: center; text-align: center;
font-weight: bold; // font-weight: bold;
letter-spacing: 5px;
}
.titeng{
font-size: 16px;
letter-spacing: 3px;
} }
} }
.show-pwd { .show-pwd {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 7px; top: 5px;
font-size: 16px; font-size: 16px;
color: $dark_gray; color: $dark_gray;
cursor: pointer; cursor: pointer;
...@@ -288,15 +328,15 @@ $light_gray:#eee; ...@@ -288,15 +328,15 @@ $light_gray:#eee;
} }
} }
.loginBox .el-input__inner { .loginBox .el-input__inner {
border: 1px solid #0058FF!important; border: 1px solid #0058ff !important;
background-color: transparent !important; background-color: transparent !important;
border-radius: 20px; border-radius: 20px;
color: #C7C7C7 !important; color: #c7c7c7 !important;
} }
.loginBox .el-button--primary { .loginBox .el-button--primary {
background-color: #0058FF; background-color: #0058ff;
border-color: #0058FF; border-color: #0058ff;
border-radius: 20px; border-radius: 20px;
margin-top: 50px margin-top: 50px;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment