Skip to content

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

登录页修改

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