Skip to content

R
rongtong-pc
Commit cede6fc2 authored by kaitly205422@163.com's avatar kaitly205422@163.com
Browse files
Options

登录页修改

parent 39a9cad8
Show whitespace changes
Inline Side-by-side
Showing with 442 additions and 94 deletions
src/router/index.js
View file @ cede6fc2
......@@ -62,7 +62,7 @@ export const constantRoutes = [
path: "index",
component: () => import("@/views/risk/plan/ledger"),
name: "taskPlan",
meta: { title: "任务台账", icon: "star" },
meta: { title: "任务台账列表", icon: "star" },
},
],
......
src/views/login.vue
View file @ cede6fc2
<template>
<div class="login">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<h3 class="title">融通危险源辨识系统</h3>
<div class="logo">
<img src="@/assets/login/logo.png" alt="">
</div>
<div class="login-container">
<div class="login-left">
<div>欢迎登录</div>
<h2>融通地产危险源辨识系统</h2>
</div>
<div class="login-right">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<div class="title">用户登录<span class="bar"></span></div>
<br />
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
<svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
<el-input v-model="loginForm.username" type="text" auto-complete="off">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<br />
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
<el-input v-model="loginForm.password" type="password" auto-complete="off"
@keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
@keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</el-form-item>
<el-checkbox
v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px"
>记住密码</el-checkbox
>
<el-checkbox class="login-remb" v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
<el-form-item style="width: 100%">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width: 100%"
@click.native.prevent="handleLogin"
>
<el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width: 100%"
@click.native.prevent="handleLogin">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right" v-if="register">
<router-link class="link-type" :to="'/register'"
>立即注册</router-link
>
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
</div>
</div>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2023 censoft All Rights Reserved.</span>
......@@ -112,7 +83,7 @@ export default {
},
loading: false,
// 验证码开关
captchaEnabled: false,
captchaEnabled: true,
// 注册开关
register: false,
redirect: undefined,
......@@ -172,7 +143,7 @@ export default {
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
this.$router.push({ path: this.redirect || "/" }).catch(() => { });
})
.catch(() => {
this.loading = false;
......@@ -189,50 +160,135 @@ export default {
<style rel="stylesheet/scss" lang="scss">
.login {
height: 100%;
width: 100%;
background: #e4f2fd;
padding: 28px 90px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
justify-content: center;
box-sizing: border-box;
.logo {
width: 200px;
position: fixed;
top: 28px;
left: 90px;
img {
width: 100%;
}
}
.login-container {
width: 70%;
display: flex;
box-shadow: 0px 0px 10px 6px #d1e3fa;
border-radius: 20px;
margin: 0 auto;
overflow: hidden;
.login-left {
width: 60%;
height: 680px;
background: url('../assets/login/bg.png') center center;
background-size: 100% 100%;
color: #266eaa;
padding-left: 30px;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 50px;
padding-left: 60px;
h2 {
margin-top: 10px;
font-size: 40px;
margin-top: 20px;
}
img {
width: 100%;
vertical-align: middle;
}
}
.login-right {
width: 45%;
align-self: stretch;
background: #fff;
border-radius: 0 20px 20px 0;
display: flex;
overflow: hidden;
}
}
}
.title {
margin: 0px auto 30px auto;
margin: 0px auto 60px auto;
text-align: center;
color: #707070;
color: #266eaa;
position: relative;
font-weight: bold;
font-size: 30px;
.bar {
position: absolute;
bottom: -16px;
left: 50%;
margin-left: -40px;
display: inline-block;
width: 80px;
height: 6px;
background: #266eaa;
border-radius: 10px;
}
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
height: 100%;
padding: 80px 60px 5px 60px;
flex: 1;
color: #266eaa;
.el-input {
height: 38px;
height: 50px;
input {
height: 38px;
height: 50px;
border-color: #266faa72;
}
}
.input-icon {
height: 39px;
width: 14px;
height: 50px;
width: 20px;
margin-left: 2px;
color: #266eaa;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
color: #266eaa;
}
.login-code {
width: 33%;
height: 38px;
float: right;
color: #266eaa;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
......@@ -245,7 +301,48 @@ export default {
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
}
.login-btn {
background: #266eaa;
border-color: #266eaa;
&:hover {
background: #266eaa !important;
}
}
.login-remb {
border-color: #266eaa;
color: #266eaa;
&:active {
border-color: #266eaa;
}
}
.el-checkbox__inner {
border-color: #266eaa;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #266eaa;
}
.login-remb.is-checked .el-checkbox__inner {
background-color: #266eaa;
border-color: #266eaa;
}
.el-form-item {
margin-bottom: 10px;
}
.el-input__prefix {
left: 14px;
}
</style>
src/views/login1.vue → src/views/login_1.vue
View file @ cede6fc2
<template>
<div class="login">
<div class="logo">
<img src="@/assets/login/logo.png" alt="">
</div>
<div class="login-container">
<div class="login-left">
<div>欢迎登录</div>
<h2>融通地产危险源辨识系统</h2>
</div>
<div class="login-right">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<h4 class="title">账号登录<span class="bar"></span></h4>
<h3 class="title">融通危险源辨识系统</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
......@@ -86,8 +77,6 @@
</div>
</el-form-item>
</el-form>
</div>
</div>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2023 censoft All Rights Reserved.</span>
......@@ -123,7 +112,7 @@ export default {
},
loading: false,
// 验证码开关
captchaEnabled: true,
captchaEnabled: false,
// 注册开关
register: false,
redirect: undefined,
......@@ -200,83 +189,24 @@ export default {
<style rel="stylesheet/scss" lang="scss">
.login {
height: 100%;
width: 100%;
background: #e4f2fd;
padding: 28px 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
.logo{
width: 128px;
position: fixed;
top: 28px;
left: 90px;
img{
width: 100%;
}
}
.login-container{
width: 70%;
display: flex;
box-shadow: 0px 0px 2px 2px #d1e3fa;
border-radius: 10px;
margin: 0 auto;
.login-left{
width: 60%;
height: 500px;
background: url('../assets/login/bg.png') center center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
color: #266eaa;
padding-left: 30px;
padding-top: 20px;
h2{
margin-top: 10px;
}
img{
width: 100%;
vertical-align: middle;
}
}
.login-right{
width: 40%;
align-self: stretch;
background: #fff;
border-radius:0 10px 10px 0;
}
}
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
color: #266eaa;
position: relative;
margin-bottom: 30px;
.bar{
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -25px;
display: inline-block;
width: 50px;
// border-bottom: 5px solid #266eaa;
height: 5px;
background: #266eaa;
border-radius: 10px;
}
}
.login-form {
border-radius: 6px;
background: #ffffff;
// width: 400px;
height: 100%;
width: 400px;
padding: 25px 25px 5px 25px;
flex: 1;
.el-input {
height: 38px;
input {
......
src/views/risk/inherent/index.vue
View file @ cede6fc2
......@@ -30,7 +30,7 @@
<el-table v-loading="loading" :data="inherentList" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center">
<el-table-column label="序号" width="55" align="center">
<template slot-scope="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
......@@ -59,7 +59,7 @@
<!-- <el-table-column label="工程技术措施" align="center" prop="measuresProject" /> -->
<!-- <el-table-column label="应采取的管理措施" align="center" prop="measuresAdministration" /> -->
<el-table-column label="应急措施" align="center" prop="measuresEmergency" />
<el-table-column label="应急措施" min-width="300" align="center" prop="measuresEmergency" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
......
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