Skip to content

N
national_museum_vod
Commit f6b0dd1b authored by xulili's avatar xulili
Browse files
Options

公共样式、用户和单位管理账户页面

parent 90f5592c
Hide whitespace changes
Inline Side-by-side
Showing with 604 additions and 15 deletions
src/App.vue
View file @ f6b0dd1b
...@@ -39,6 +39,7 @@ export default { ...@@ -39,6 +39,7 @@ export default {
<style lang="less"> <style lang="less">
@import "common/fonts/font.css"; @import "common/fonts/font.css";
@import 'style/common.less'; @import 'style/common.less';
@import 'style/dialog.less';
#app { #app {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
src/components/pagination.vue
View file @ f6b0dd1b
...@@ -19,7 +19,7 @@ export default { ...@@ -19,7 +19,7 @@ export default {
props:{ props:{
total:{ total:{
type:Number, type:Number,
default:0 default:500
}, },
pageSize:{ pageSize:{
type:Number, type:Number,
...@@ -32,4 +32,7 @@ export default { ...@@ -32,4 +32,7 @@ export default {
} }
} }
} }
</script> </script>
\ No newline at end of file <style lang="less">
@import '../style/pagination.less';
</style>
\ No newline at end of file
src/components/table.vue
View file @ f6b0dd1b
<template> <template>
<div class="partyt-table"> <div class="party-table">
<el-table :data="list" style="width: 100%"> <el-table border :data="list" style="width: 100%;height:100%" height="100%">
<el-table-column <el-table-column
align="center"
v-for="(item,index) in feildList" v-for="(item,index) in feildList"
:key="index" :key="index"
:prop="item.prop" :prop="item.prop"
...@@ -28,4 +29,7 @@ export default { ...@@ -28,4 +29,7 @@ export default {
} }
} }
} }
</script> </script>
\ No newline at end of file <style lang="less">
@import '../style/table.less';
</style>
\ No newline at end of file
src/page/system/log.vue 0 → 100644
View file @ f6b0dd1b
<template>
<div class="log-wrapper height100">
</div>
</template>
<script>
export default {
data(){
return{
}
},
components:{ },
mounted(){
},
methods:{
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
src/page/system/unitAdmin.vue
View file @ f6b0dd1b
<template> <template>
<div class="unit-admin-wrapper"> <div class="unit-admin-wrapper height100">
<div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入用户名"
suffix-icon="el-icon-search"
></el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入用户名"
suffix-icon="el-icon-search"
></el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入用户名"
suffix-icon="el-icon-search"
></el-input>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="handleSubmit">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可根据用户名称搜索对用户信息进行筛选。可以新增账号，“*”为必填项。可以对账号信息进行修改及重置密码</span>
</div>
</div>
<div class="table-content">
<div class="btn-group">
<el-button type="primary">新建账户</el-button>
</div>
<party-table :feildList="feildList" :list="list"></party-table>
<party-pagination/>
</div>
<user-dialog/>
</div> </div>
</template> </template>
<script> <script>
import { partyPagination,partyTable } from '@/components/index'
import userDialog from './userDialog/index'
export default { export default {
data(){ data(){
return{ return{
form:{
user:''
},
addForm:{
},
feildList:[
{prop:'date',label:'日期'},
{prop:'name',label:'姓名'},
{prop:'address',label:'地址'},
],
list: [
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
]
} }
}, },
components:{ partyPagination, partyTable, userDialog},
mounted(){ mounted(){
}, },
methods:{ methods:{
handleSubmit(){
},
handleReset(){
this.form.user = ''
},
// 弹窗关闭
handleClose(){
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
} }
} }
</script> </script>
......
src/page/system/userDialog/index.vue 0 → 100644
View file @ f6b0dd1b
<template>
<el-dialog
custom-class="party-dialog"
title="提示"
:visible.sync="dialogVisible"
width="468px"
:before-close="handleClose">
<div class="dialog-content">
<el-form ref="form" :model="form" label-width="80px" label-position="top" class="party-form">
<el-form-item label="系统用户名" >
<el-input v-model="form.name" placeholder="请填写"></el-input>
</el-form-item>
<el-form-item label="所在机构" >
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="账号有效期" >
<el-radio-group v-model="form.radio">
<el-radio :label="3">永久有效</el-radio>
<el-radio :label="6">设置有效期</el-radio>
</el-radio-group>
<el-date-picker
class="mt16"
v-model="form.date"
type="date"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="账号状态" >
<el-radio-group v-model="form.radio">
<el-radio :label="3">激活</el-radio>
<el-radio :label="6">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="账号类型" >
<el-checkbox-group v-model="form.name">
<el-checkbox label="超级管理员" name="type"></el-checkbox>
<el-checkbox label="后台管理员" name="type"></el-checkbox>
<el-checkbox label="展板管理员" name="type"></el-checkbox>
<el-checkbox label="视频管理员" name="type"></el-checkbox>
<el-checkbox label="视频及展板审核" name="type"></el-checkbox>
<el-checkbox label="账号禁用审核员" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data(){
return {
dialogVisible:false,
form:{
name:'',
date:''
}
}
},
methods:{
// 弹窗关闭
handleClose(){
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
src/page/system/users.vue
View file @ f6b0dd1b
<template> <template>
<div class="user-wrapper height100"> <div class="user-wrapper height100">
<div class="search-container"> <div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入用户名"
suffix-icon="el-icon-search"
></el-input>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="handleSubmit">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可根据用户名称搜索对用户信息进行筛选。可以新增账号，“*”为必填项。可以对账号信息进行修改及重置密码</span>
</div>
</div> </div>
<div class="table-content"> <div class="table-content">
<party-table></party-table> <div class="btn-group">
<el-button type="primary">新建账户</el-button>
</div>
<party-table :feildList="feildList" :list="list"></party-table>
<party-pagination/>
</div> </div>
<party-pagination/> <user-dialog/>
</div> </div>
</template> </template>
<script> <script>
import { partyPagination,partyTable } from '@/components/index' import { partyPagination,partyTable } from '@/components/index'
import userDialog from './userDialog/index'
export default { export default {
data(){ data(){
return{ return{
form:{
user:''
},
addForm:{
},
feildList:[
{prop:'date',label:'日期'},
{prop:'name',label:'姓名'},
{prop:'address',label:'地址'},
],
list: [
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
]
} }
}, },
components:{ partyPagination, partyTable}, components:{ partyPagination, partyTable, userDialog},
mounted(){ mounted(){
}, },
methods:{ methods:{
handleSubmit(){
},
handleReset(){
this.form.user = ''
},
// 弹窗关闭
handleClose(){
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
} }
} }
</script> </script>
......
src/style/dialog.less 0 → 100644
View file @ f6b0dd1b
.party-dialog{
background:@party-white;
box-shadow: 0 4px 8px 0 rgba(221,221,221,0.40);
border-radius: 8px;
padding: 20px 20px 0 20px;
.el-dialog__header{
padding: 0;
border-bottom: 1px solid @party-border-color;
height: 40px;
text-align: center;
.el-dialog__title{
font-size: 18px;
font-weight: bold;
color: @font-color;
}
.el-dialog__close{
font-size: 20px;
&:hover{
color: @party-btn-color;
}
}
}
.el-dialog__footer{
padding-top: 20px;
border-top: 1px solid @party-border-color;
text-align: center;
}
}
.party-form{
.el-input{
width: 280px;
.el-input__inner{
border-radius: 22px;
background-color: @party-bg-gray;
border: 1px solid @party-border-color;
}
}
.mt16{
margin-top: 16px;
}
.el-radio-group{
.el-radio__inner{
width: 24px;
height: 24px;
border-color: @party-border-color;
}
.el-radio__label{
font-size: 16px;
}
.el-radio.is-checked{
.el-radio__input.is-checked{
.el-radio__inner{
background-color: transparent;
border-color: @party-border-color;
&:after{
width: 10px;
height: 10px;
background-color: @party-btn-color;
}
}
}
.el-radio__label{
color: @font-color;
}
}
}
.el-checkbox-group{
.el-checkbox{
margin-right: 25px;
.el-checkbox__inner{
width: 22px;
height: 22px;
&:hover{
border-color: @party-border-color;
}
}
.el-checkbox__label{
color: @font-color
}
& +.el-checkbox{
margin-left: 0;
}
&.is-checked{
.el-checkbox__inner{
border-color: @party-border-color;
background-color: @party-check-bg-color;
&:after{
border: 2px solid #AC9374;
border-left:0;
border-top: 0;
height: 11px;
left:7px;
width: 5px;
}
}
.el-checkbox__label{
color: @font-color
}
}
}
}
}
\ No newline at end of file
src/style/global.less
View file @ f6b0dd1b
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
@party-border-color:#EEEEEE; @party-border-color:#EEEEEE;
@party-black:#000000; @party-black:#000000;
@party-bg-gray:#F8F8F8; @party-bg-gray:#F8F8F8;
@party-btn-color:#AC9374;
@party-table-header-color:#FDFBF8;
@party-page-border-color:#DDDDDD;
@party-check-bg-color:#F5F5F5;
.ft($fz){ .ft($fz){
font-size: $fz; font-size: $fz;
} }
...@@ -21,3 +24,119 @@ ...@@ -21,3 +24,119 @@
.height100{ .height100{
height: 100%; height: 100%;
} }
@media screen and (max-width:1600px){
.search-container{
.el-input{
width: 180px;
}
}
.btn-group{
.el-button{
width: 80px;
}
}
.page-tips{
width: 365px;
}
}
@media (min-width:1601px) and (max-width:1800px){
.search-container{
.el-input{
width: 220px;
}
}
.btn-group{
.el-button{
width: 96px;
}
}
.page-tips{
width: 420px;
}
}
@media (min-width:1801px){
.search-container{
.el-input{
width: 280px;
}
}
.btn-group{
.el-button{
width: 128px;
}
}
.page-tips{
width: 480px;
}
}
.search-container{
background:@party-white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px;
margin-bottom: 20px;
padding: 20px 24px;
height: 80px;
display: flex;
justify-content: space-between;
.el-form{
margin-bottom: 0;
.el-input{
.el-input__inner{
border-radius: 22px;
background-color:@party-bg-gray;
border-color: @party-border-color;
}
}
.el-input__icon{
width: 40px;
font-size: 20px;
color: @party-btn-color;
}
.btn-group{
padding-left: 15px;
.el-button{
height: 40px;
}
}
}
.page-tip{
display: flex;
font-size: 14px;
color: @font-color;
.page-tip-title{
font-weight: bold;
padding-right: 10px;
}
}
}
.table-content{
height: calc(100% - 100px);
background:@party-white;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
border-radius: 8px;
padding: 20px 40px 0 40px;
.btn-group{
text-align: right;
margin-bottom: 12px;
}
}
.btn-group{
.el-button{
height: 36px;
padding: 0;
border-radius: 28px;
span {
font-size: 16px;
}
}
.el-button--primary{
background-color: @party-btn-color;
border-color: @party-btn-color;
color:@party-white ;
}
.el-button--default{
background: rgba(172,147,116,0.10);
border: 1px solid @party-btn-color;
color:@party-btn-color;
}
}
src/style/pagination.less 0 → 100644
View file @ f6b0dd1b
.partyt-pagination{
.el-pagination{
margin-top: 40px;
.btn-prev,
.btn-next{
width: 40px;
height: 40px;
border-radius: 50%;
background: #EEEEEE;
border: 1px solid #DDDDDD;
padding: 0;
i{
font-size: 18px;
}
&:hover{
color: @party-btn-color;
border-color: @party-btn-color;
background-color: rgba(172,147,116,0.10);;
}
}
.el-pager{
padding-left: 20px;
li.number{
width: 40px;
height: 40px;
line-height: 40px;
background: @party-white;
border: 1px solid @party-page-border-color;
border-radius: 50%;
margin-right: 20px;
color: @font-color;
&.active,
&:hover{
background: @party-btn-color;
color: @party-white;
border-color: @party-page-border-color;
}
}
li.el-icon{
width: 40px;
height: 40px;
line-height: 40px;
margin-left: -20px;
}
}
.el-pagination__jump{
height: 40px;
line-height: 40px;
color: @font-color;
.el-pagination__editor{
height: 40px;
&.is-active{
border-color: @party-btn-color;
}
.el-input__inner{
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
&:focus{
border-color: @party-btn-color;
}
}
}
}
}
}
\ No newline at end of file
src/style/table.less 0 → 100644
View file @ f6b0dd1b
.party-table{
height: calc(100% - 160px);
.el-table__header-wrapper{
border-radius: 8px 8px 0 0 ;
.el-table__header{
tr,th{
background-color: @party-red;
color: @party-table-header-color;
font-size: 16px;
}
}
}
.el-table__body{
tr{
&:nth-child(even){
background-color: #FDFBF8;
}
}
}
}
\ No newline at end of file
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