管理端web端提交
This commit is contained in:
aixianling
36
web/src/components/KuDialog.vue
Normal file
36
web/src/components/KuDialog.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<section class="KuDialog" v-if="show">
|
||||
<div class="modal" v-if="modal"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "KuDialog",
|
||||
props: {
|
||||
show: Boolean,
|
||||
modal: {type: Boolean, default: true}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
created() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.KuDialog {
|
||||
position: fixed;
|
||||
z-index: 6800;
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
background: rgba(#000, .2);
|
||||
z-index: 6700;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
135
web/src/components/KuLogin/KuLogin.vue
Normal file
135
web/src/components/KuLogin/KuLogin.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<section class="KuLogin">
|
||||
<div class="panel" :class="{border,changePwd}">
|
||||
<h2 v-text="title"/>
|
||||
<div class="color-a2v1c5 subTitle" v-text="`请输入您的用户名及密码`"/>
|
||||
<el-form :model="form" :rules="rules" ref="LoginForm" size="large">
|
||||
<el-form-item prop="name">
|
||||
<el-input placeholder="用户名或手机号" v-model="form.name" clearable>
|
||||
<template slot="prefix">
|
||||
<el-icon :size="20" color="var(--el-color-primary)" class="inputIcon">
|
||||
<user-filled/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input placeholder="请输入密码" type="password" v-model="form.password" clearable show-password>
|
||||
<template slot="prefix">
|
||||
<el-icon :size="20" color="var(--el-color-primary)" class="inputIcon">
|
||||
<lock/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="btn">登录</div>
|
||||
<el-row justify="end">
|
||||
<el-button class="rightBtn" type="text" @click="changePwd=true">修改密码</el-button>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<change-pwd v-bind="$props" @back="changePwd=false"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {Lock, UserFilled} from "@element-plus/icons-vue";
|
||||
import ChangePwd from "./changePwd";
|
||||
|
||||
export default {
|
||||
name: "KuLogin",
|
||||
components: {ChangePwd, UserFilled, Lock},
|
||||
props: {
|
||||
title: {default: "登录组件"},
|
||||
border: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
rules: {},
|
||||
changePwd: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.KuLogin {
|
||||
width: 630px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 16px;
|
||||
|
||||
:deep(.panel) {
|
||||
width: inherit;
|
||||
padding: 30px 50px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
margin-bottom: 1px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 30px;
|
||||
transition: margin-left 1s ease;
|
||||
|
||||
&.border {
|
||||
box-shadow: 0 6px 12px 1px rgba(38, 127, 255, 0.1);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
&.changePwd {
|
||||
margin-left: -660px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #31507D;
|
||||
font-size: 32px;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
text-align: center;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
background: var(--el-color-primary);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input {
|
||||
.el-input__inner {
|
||||
line-height: 60px;
|
||||
height: 60px;
|
||||
padding-left: 44px !important;
|
||||
}
|
||||
|
||||
.el-input__prefix-inner {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rightBtn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
98
web/src/components/KuLogin/changePwd.vue
Normal file
98
web/src/components/KuLogin/changePwd.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="panel" :class="{border}">
|
||||
<h2>
|
||||
<el-icon :size="32" @click="next?next=false:$emit('back')">
|
||||
<back/>
|
||||
</el-icon>
|
||||
{{ ['修改密码', next ? '新密码提交' : '原密码确认'].join('-') }}
|
||||
</h2>
|
||||
<el-form :model="form" :rules="rules" ref="LoginForm" size="large">
|
||||
<template v-if="!next">
|
||||
<el-form-item prop="name">
|
||||
<el-input placeholder="用户名或手机号" v-model="form.name" clearable>
|
||||
<template slot="prefix">
|
||||
<el-icon :size="20" color="var(--el-color-primary)" class="inputIcon">
|
||||
<user-filled/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input placeholder="请输入密码" type="password" v-model="form.password" clearable show-password>
|
||||
<template slot="prefix">
|
||||
<el-icon :size="20" color="var(--el-color-primary)" class="inputIcon">
|
||||
<lock/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="btn" @click="next=true">下一步</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form-item prop="password">
|
||||
<el-input placeholder="请输入新密码" type="password" v-model="form.password" clearable show-password>
|
||||
<template slot="prefix">
|
||||
<el-icon :size="20" color="var(--el-color-primary)" class="inputIcon">
|
||||
<lock/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input placeholder="请确认新密码" type="password" v-model="form.password" clearable show-password>
|
||||
<template slot="prefix">
|
||||
<el-icon :size="20" color="var(--el-color-primary)" class="inputIcon">
|
||||
<lock/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="btn" @click="submit">提交</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Back, Lock, UserFilled} from "@element-plus/icons-vue";
|
||||
|
||||
export default {
|
||||
name: "changePwd",
|
||||
components: {Back, UserFilled, Lock},
|
||||
props: {
|
||||
title: {default: "登录组件"},
|
||||
border: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
rules: {},
|
||||
next: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h2 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.el-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
20
web/src/components/building.vue
Normal file
20
web/src/components/building.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<section class="building">
|
||||
<div class="color-a2v1c5" v-text="'应用正在开发中...'"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.building {
|
||||
height: 100%;
|
||||
background-image: url("../assets/building.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 400px 330px;
|
||||
|
||||
& > div {
|
||||
margin-top: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
86
web/src/components/sliderNav.vue
Normal file
86
web/src/components/sliderNav.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<section class="sliderNav">
|
||||
<div class="item" v-for="menu in menus" :key="menu.id">
|
||||
<el-row class="pad-w10" align="middle" @click="menu.expand=!menu.expand">
|
||||
<i class="iconfont icon-shujuqingxi"/>
|
||||
<div class="fill" v-text="menu.label"/>
|
||||
<el-icon :size="20">
|
||||
<component :is="arrow(menu.expand)"/>
|
||||
</el-icon>
|
||||
</el-row>
|
||||
<template v-if="menu.expand">
|
||||
<div class="app" v-for="app in menu.children" :key="app.id" v-text="app.label" :class="{active:app.id==12}"/>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ArrowDownBold, ArrowUpBold, Histogram} from "@element-plus/icons-vue";
|
||||
|
||||
export default {
|
||||
name: "sliderNav",
|
||||
components: {Histogram, ArrowUpBold, ArrowDownBold},
|
||||
data() {
|
||||
return {
|
||||
menus: [
|
||||
{
|
||||
id: 1,
|
||||
label: "基础数据库",
|
||||
icon: "",
|
||||
expand: false,
|
||||
children: [{id: 11, label: "人口数据"}, {id: 12, label: "党员数据"}, {id: 13, label: "党组织数据"}]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "专题数据库",
|
||||
icon: "",
|
||||
expand: false,
|
||||
children: [{id: 14, label: "办公考勤数据"}, {id: 15, label: "信访数据"}, {id: 21, label: "矛盾调解数据"}]
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
arrow(expand) {
|
||||
return expand ? ArrowUpBold : ArrowDownBold
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sliderNav {
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
background: var(--background-color);
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
|
||||
.item {
|
||||
color: var(--el-color-primary);
|
||||
margin-bottom: 20px;
|
||||
line-height: 50px;
|
||||
cursor: pointer;
|
||||
|
||||
.fill {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.app {
|
||||
padding-left: 28px;
|
||||
cursor: pointer;
|
||||
margin: 0 10px 0;
|
||||
|
||||
&:hover {
|
||||
color: rgba(#fff, .8);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: var(--el-color-primary);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user