登陆页面ui更换,调整用户和机构表单字段

main
xuechunyuan 3 years ago
parent 8cd62f2d58
commit 0d28ef4a8a
  1. BIN
      public/img/bg/bg5.png
  2. BIN
      public/img/bg/login-title.png
  3. 6
      src/config/website.js
  4. 21
      src/page/login/index.vue
  5. 4
      src/page/login/userlogin.vue
  6. 100
      src/styles/login.scss
  7. 79
      src/views/blacklist/index.vue
  8. 10
      src/views/system/dept.vue
  9. 871
      src/views/system/user.vue

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

@ -5,12 +5,12 @@ export default {
title: "车管所体检预约", title: "车管所体检预约",
logo: "C", logo: "C",
key: 'saber',//配置主键,目前用于存储 key: 'saber',//配置主键,目前用于存储
indexTitle: '车管所体检预约 管理', indexTitle: '车管所体检预约管理',
clientId: 'saber', // 客户端id clientId: 'saber', // 客户端id
clientSecret: 'saber_secret', // 客户端密钥 clientSecret: 'saber_secret', // 客户端密钥
tenantMode: true, // 是否开启租户模式 tenantMode: false, // 是否开启租户模式
tenantId: "000000", // 管理组租户编号 tenantId: "000000", // 管理组租户编号
captchaMode: true, // 是否开启验证码模式 captchaMode: false, // 是否开启验证码模式
switchMode: false, // 是否开启部门切换模式 switchMode: false, // 是否开启部门切换模式
lockPage: '/lock', lockPage: '/lock',
tokenTime: 3000, tokenTime: 3000,

@ -4,7 +4,7 @@
@keyup.enter.native="handleLogin"> @keyup.enter.native="handleLogin">
<top-color v-show="false"></top-color> <top-color v-show="false"></top-color>
<div class="login-weaper animated bounceInDown"> <div class="login-weaper animated bounceInDown">
<div class="login-left"> <!-- <div class="login-left">
<div class="login-time"> <div class="login-time">
{{time}} {{time}}
</div> </div>
@ -30,23 +30,24 @@
<br> <br>
<span>----------------------------------------------</span> <span>----------------------------------------------</span>
</div> </div>
<!--<img class="img" src="/img/logo.png" alt="">--> <img class="img" src="/img/logo.png" alt="">
</div> </div> -->
<div class="login-border"> <div class="login-border">
<div class="login-main"> <div class="login-main">
<h4 class="login-title"> <div class="login-title">
{{ $t('login.title') }}{{website.title}} <img class="login-img" src="/img/bg/login-title.png"/>
<top-lang></top-lang> <div class="login-small-title">VEHICLE MANAGEMENT OFFICE PHYSICAL EXAMINATION<br/>
</h4> RESERVATION SYSTEM</div>
</div>
<userLogin v-if="activeName==='user'"></userLogin> <userLogin v-if="activeName==='user'"></userLogin>
<codeLogin v-else-if="activeName==='code'"></codeLogin> <!-- <codeLogin v-else-if="activeName==='code'"></codeLogin>
<thirdLogin v-else-if="activeName==='third'"></thirdLogin> <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
<div class="login-menu"> <div class="login-menu">
<a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a> <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
<!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>--> <a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>
<a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a> <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>
<a :href="website.ssoUrl + website.redirectUri">{{ $t('login.ssoLogin') }}</a> <a :href="website.ssoUrl + website.redirectUri">{{ $t('login.ssoLogin') }}</a>
</div> </div> -->
</div> </div>
</div> </div>

@ -15,7 +15,7 @@
</el-input> </el-input>
</el-form-item> --> </el-form-item> -->
<el-form-item prop="username"> <el-form-item prop="username">
<el-input size="small" <el-input
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
v-model="loginForm.username" v-model="loginForm.username"
auto-complete="off" auto-complete="off"
@ -24,7 +24,7 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input size="small" <el-input
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
:type="passwordType" :type="passwordType"
v-model="loginForm.password" v-model="loginForm.password"

@ -5,14 +5,18 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
background-image: url("/img/bg/bg.jpg"); background-image: url("/img/bg/bg5.png");
background-size: 100% 100%; background-size: 100% 100%;
} }
.login-weaper { .login-weaper {
margin: 0 auto; margin: 0 144px 0 auto;
width: 1000px; // width: 1000px;
box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4); width: 500px;
// box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
background: linear-gradient(140deg, #E4ECF7 0%, #F8FAFC 67%, #FFFFFF 100%);
box-shadow: 1px 3px 12px 1px rgba(34, 63, 88, 0.14);
border-radius: 8px;
.el-input-group__append { .el-input-group__append {
border: none; border: none;
@ -63,38 +67,54 @@
letter-spacing: 2px; letter-spacing: 2px;
} }
.login-border { // .login-border {
border-left: none; // border-left: none;
border-top-right-radius: 5px; // border-top-right-radius: 5px;
border-bottom-right-radius: 5px; // border-bottom-right-radius: 5px;
color: #fff; // color: #fff;
background-color: #fff; // background-color: #fff;
width: 50%; // width: 50%;
float: left; // float: left;
box-sizing: border-box; // box-sizing: border-box;
} // }
.login-main { .login-main {
margin: 0 auto; margin: 0 auto;
width: 65%; width: 396px;
box-sizing: border-box; box-sizing: border-box;
} }
.login-main > h3 { .login-main>h3 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.login-main > p { .login-main>p {
color: #76838f; color: #76838f;
} }
.login-title { .login-title {
color: #333; color: #333;
margin-bottom: 40px; margin-bottom: 40px;
margin-top: 60px;
font-weight: 500; font-weight: 500;
font-size: 22px; font-size: 22px;
text-align: center; text-align: center;
letter-spacing: 4px; // letter-spacing: 4px;
}
.login-img {
width: 396px;
height: 42px;
}
.login-small-title {
color: #999999;
font-size: 12px;
line-height: 16px;
font-family: Microsoft YaHei-Light, Microsoft YaHei;
font-weight: 300;
text-align: left;
margin-top: 14px;
} }
.login-menu { .login-menu {
@ -111,21 +131,26 @@
.login-submit { .login-submit {
width: 100%; width: 100%;
height: 45px; height: 60px;
border: 1px solid #409EFF; // border: 1px solid #409EFF;
background: none; background: #1677FF;
;
font-size: 18px; font-size: 18px;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 300; font-weight: 300;
color: #409EFF; // color: #409EFF;
color: #fff;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
cursor: pointer; cursor: pointer;
margin-top: 30px; margin-top: 50px;
font-family: "neo"; // font-family: "neo";
transition: 0.25s; transition: 0.25s;
border-radius: 8px;
} }
.login-form { .login-form {
margin: 10px 0; margin: 0 0 60px 0;
i { i {
color: #333; color: #333;
@ -136,24 +161,33 @@
} }
.el-form-item { .el-form-item {
margin-bottom: 12px; margin-bottom: 20px;
} }
.el-input { .el-input {
input { input {
padding-bottom: 10px; height:60px;
// padding-bottom: 10px;
text-indent: 5px; text-indent: 5px;
background: transparent; // background: transparent;
border: none; // border: none;
border-radius: 0; // border-radius: 0;
color: #333; color: #333;
border-bottom: 1px solid rgb(235, 237, 242); // border-bottom: 1px solid rgb(235, 237, 242);
border: 1px solid #D2D2D2;
border-radius: 8PX;
&:focus{
border-color: #1677FF;
}
} }
.el-input__prefix { .el-input__prefix {
top: 10px;
i { i {
color: #1677FF;
padding: 0 5px; padding: 0 5px;
font-size: 16px !important; font-size: 18px !important;
} }
} }
} }
@ -179,5 +213,5 @@
line-height: 38px; line-height: 38px;
text-indent: 5px; text-indent: 5px;
text-align: center; text-align: center;
cursor:pointer!important; cursor: pointer !important;
} }

@ -1,11 +1,11 @@
<template> <template>
<basic-container> <basic-container>
<avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" @row-del="rowDel" <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" v-model="form"
v-model="form" :permission="permissionList" @row-update="rowUpdate" @row-save="rowSave" :before-open="beforeOpen" :permission="permissionList" :before-open="beforeOpen" @search-change="searchChange" @search-reset="searchReset"
@search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
@current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"> @refresh-change="refreshChange" @on-load="onLoad">
<template slot-scope="{row}" slot="menu"> <template slot-scope="{row}" slot="menu">
<el-button type="text" icon="el-icon-circle-plus-outline" size="small" @click="handleDelete">取消黑名单 <el-button type="text" icon="el-icon-circle-plus-outline" size="small" @click="handleCancel">取消黑名单
</el-button> </el-button>
</template> </template>
<template slot-scope="{row}" slot="status"> <template slot-scope="{row}" slot="status">
@ -93,44 +93,25 @@ export default {
} }
}, },
methods: { methods: {
// //
publish(row, done, loading) { handleCancel(row) {
console.log(row, done, loading) this.$confirm("确认将此用户移除黑名单吗?", {
},
rowSave(row, done, loading) {
add(row).then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
done();
}, error => {
window.console.log(error);
loading();
});
},
rowUpdate(row, index, done, loading) {
update(row).then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
done();
}, error => {
window.console.log(error);
loading();
});
},
rowDel(row) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}) })
.then(() => { .then(() => {
return remove(row.id); // update(row).then(() => {
// this.onLoad(this.page);
// this.$message({
// type: "success",
// message: "!"
// });
// done();
// }, error => {
// window.console.log(error);
// loading();
// });
}) })
.then(() => { .then(() => {
this.onLoad(this.page); this.onLoad(this.page);
@ -157,28 +138,6 @@ export default {
this.selectionList = []; this.selectionList = [];
this.$refs.crud.toggleSelection(); this.$refs.crud.toggleSelection();
}, },
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(this.ids);
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
this.$refs.crud.toggleSelection();
});
},
beforeOpen(done, type) { beforeOpen(done, type) {
if (["edit", "view"].includes(type)) { if (["edit", "view"].includes(type)) {
getNotice(this.form.id).then(res => { getNotice(this.form.id).then(res => {

@ -32,7 +32,7 @@ import {
getDeptTree getDeptTree
} from "@/api/system/dept"; } from "@/api/system/dept";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import website from '@/config/website'; // import website from '@/config/website';
export default { export default {
data() { data() {
@ -74,7 +74,7 @@ export default {
}, },
{ {
label: "机构logo", label: "机构logo",
prop: "deptName", prop: "imgUrl",
html: true, html: true,
formatter: (val) => { formatter: (val) => {
return `${val.logo ? '<img src="' + val.logo + '"/>' : ''}` return `${val.logo ? '<img src="' + val.logo + '"/>' : ''}`
@ -146,11 +146,11 @@ export default {
}] }]
}, },
{ {
label: "备注", label: "地址",
prop: "remark", prop: "remark",
rules: [{ rules: [{
required: false, required: true,
message: "请输入备注", message: "请输入地址",
trigger: "blur" trigger: "blur"
}], }],
hide: true hide: true

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save