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 {
border-radius: 8px;
/*50 = navbar */
min-height: calc(100vh - 50px);
width: 98%;
width: calc(98% - 20px);
position: relative;
overflow: hidden;
}
......
src/styles/common.scss
View file @ 824d0878
/**
公共样式
*/
*{
font-family: 'Source Han Sans CN';
}
.ml10 {
margin-left: 10px;
}
......@@ -11,7 +13,7 @@
}
.mb20 {
margin-bottom: 20px;
margin-bottom: 24px;
}
.ml20 {
......
src/views/alarm/cableTime/index.vue
View file @ 824d0878
<template>
<!-- 漏缆实时状态 -->
<!-- 漏缆监测告警 -->
<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-group>
......
src/views/alarm/device/index.vue
View file @ 824d0878
<template>
<!-- 漏缆实时状态 -->
<!-- 设备连接告警 -->
<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>
......
src/views/dashboard/index.vue
View file @ 824d0878
......@@ -5,9 +5,9 @@
<el-row :gutter="24">
<el-col :span="12" v-for="item in listData" class="mb20">
<el-card shadow="never">
<div slot="header" class="clearfix">
<div slot="header" class="clearfix posa">
<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 v-for="k in item.list" :key="k.name" :class="item.list.length<=2? 'text2' : 'text'">
<el-row :gutter="24">
......@@ -82,6 +82,13 @@ export default {
padding: 0px;
}
}
.posa{
position: relative;
}
.savebtn{
position: absolute;
right:2%;
}
// .el-col {
// margin-bottom: 20px;
// }
......
src/views/login/index.vue
View file @ 824d0878
<template>
<div class="login-container">
<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 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">
<h3 class="title">欢迎登录</h3>
</div>
<el-form-item prop="username">
<span class="svg-container">
<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">
<span class="svg-container">
<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="password">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input
:key="passwordType"
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-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input
:key="passwordType"
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"
class="loginbtn"
style="width: 100%; margin-top: 30px; margin-bottom: 30px;"
@click.native.prevent="handleLogin"
>登录</el-button
>
<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> password:任意6位</span>
</div> -->
</el-form>
</el-form>
</div>
</div>
</template>
<script>
import { validUsername } from '@/utils/validate'
import { validUsername } from "@/utils/validate";
export default {
name: 'Login',
name: "Login",
data() {
const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) {
callback(new Error('请输入正确的用户名'))
callback(new Error("请输入正确的用户名"));
} else {
callback()
callback();
}
}
};
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码不能少于6位'))
callback(new Error("密码不能少于6位"));
} else {
callback()
callback();
}
}
};
return {
loginForm: {
username: 'admin',
password: '123456'
username: "admin",
password: "123456",
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
username: [
{ required: true, trigger: "blur", validator: validateUsername },
],
password: [
{ required: true, trigger: "blur", validator: validatePassword },
],
},
loading: false,
passwordType: 'password',
redirect: undefined
}
passwordType: "password",
redirect: undefined,
};
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
immediate: true,
},
},
methods: {
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
if (this.passwordType === "password") {
this.passwordType = "";
} else {
this.passwordType = 'password'
this.passwordType = "password";
}
this.$nextTick(() => {
this.$refs.password.focus()
})
this.$refs.password.focus();
});
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {
if (this.loginForm.password=='123456') {
this.$router.push({ path: this.redirect || '/' })
this.loading = false
}
else{
alert('密码错误')
this.loading = false
return false
}
}).catch(() => {
this.loading = false
})
this.loading = true;
this.$store
.dispatch("user/login", this.loginForm)
.then(() => {
if (this.loginForm.password == "123456") {
this.$router.push({ path: this.redirect || "/" });
this.loading = false;
} else {
alert("密码错误");
this.loading = false;
return false;
}
})
.catch(() => {
this.loading = false;
});
} else {
console.log('error submit!!')
return false
console.log("error submit!!");
return false;
}
})
}
}
}
});
},
},
};
</script>
<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg:#283443;
$light_gray:#fff;
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
......@@ -158,7 +179,7 @@ $cursor: #fff;
.login-container {
.el-input {
display: inline-block;
height: 47px;
height: 42px;
width: 85%;
input {
......@@ -168,7 +189,7 @@ $cursor: #fff;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
caret-color: $cursor;
&:-webkit-autofill {
......@@ -179,70 +200,81 @@ $cursor: #fff;
}
.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);
border-radius: 25px;
border-radius: 12px;
color: #454545;
height: 42px;
}
.el-form-item__content{
line-height: 32px;
}
}
</style>
<style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
min-height: 100%;
width: 100%;
// 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-repeat:no-repeat;
background-size:100% 100%;
background-image: url("../../assets/img/login.png");
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
.text {
.text {
position: absolute;
top: 50%;
left: 10%;
top: 20%;
left: calc(50% - 323px);
display: block;
width: 634px;
width: 646px;
height: 122px;
line-height: 60px;
font-size: 40px;
transform: translateY(-82px);
margin: 0;
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
background-image: url('../../assets/img/loginTitleBg.png');
// ../../assets/img/
font-family: "Source Sans Pro", sans-serif;
// background-image: url('../../assets/img/loginTitleBg.png');
}
.loginBox {
.loginBox {
position: absolute;
top: 50%;
left: 78%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
width: 464px;
height: 407px;
background: rgba(0, 0, 0, 0.4);
height: 380px;
background: rgba(0, 0, 0, 0.4);
margin: 0;
padding: 33px 21px 67px;
padding: 33px 21px 40px;
box-sizing: border-box;
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 {
position: relative;
width: 80%;
padding: 0px;
margin: 0 auto;
overflow: hidden;
}
.tips {
......@@ -258,7 +290,7 @@ $light_gray:#eee;
}
.svg-container {
padding: 6px 5px 6px 15px;
padding: 4px 5px 10px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
......@@ -267,20 +299,28 @@ $light_gray:#eee;
.title-container {
position: relative;
margin-top:15px;
margin-bottom: 32px;
.title {
font-size: 26px;
font-family: 'Source Han Sans CN';
font-size: 24px;
color: $light_gray;
margin: 0px auto 40px auto;
margin: 0px auto 10px auto;
text-align: center;
font-weight: bold;
// font-weight: bold;
letter-spacing: 5px;
}
.titeng{
font-size: 16px;
letter-spacing: 3px;
}
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
top: 5px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
......@@ -288,15 +328,15 @@ $light_gray:#eee;
}
}
.loginBox .el-input__inner {
border: 1px solid #0058FF!important;
border: 1px solid #0058ff !important;
background-color: transparent !important;
border-radius: 20px;
color: #C7C7C7 !important;
color: #c7c7c7 !important;
}
.loginBox .el-button--primary {
background-color: #0058FF;
border-color: #0058FF;
border-radius: 20px;
margin-top: 50px
background-color: #0058ff;
border-color: #0058ff;
border-radius: 20px;
margin-top: 50px;
}
</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