Skip to content

9
91isoft_vue_manage
Commit 4c0b4cd9 authored by 张伯涛's avatar 张伯涛
Browse files
Options

公共样式整合

parent 7bb504e5
Hide whitespace changes
Inline Side-by-side
Showing with 240 additions and 34 deletions
src/components/coolbutton/index.vue
View file @ 4c0b4cd9
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
v-if="isShow" v-if="isShow"
:size="size" :size="size"
:type="type" :type="type"
:class="className"
:icon="icon" :icon="icon"
:disabled="disabled" :disabled="disabled"
@click="defaultClick" @click="defaultClick"
...@@ -12,6 +13,7 @@ ...@@ -12,6 +13,7 @@
v-hasPermi="hasper" v-hasPermi="hasper"
:size="size" :size="size"
:type="type" :type="type"
:class="className"
:icon="icon" :icon="icon"
:disabled="disabled" :disabled="disabled"
@click="defaultClick" @click="defaultClick"
...@@ -27,6 +29,9 @@ export default { ...@@ -27,6 +29,9 @@ export default {
name: { name: {
type: String type: String
}, },
className: {
type: String
},
type: { type: {
type: String type: String
}, },
......
src/styles/themeA/index.scss
View file @ 4c0b4cd9
//------------公共的样式文件---------------------------------------------------
@import "./navigationBar.scss"; // 左侧导航栏css样式文件
@import "./sidebar.scss"; // 自带的左侧导航栏css样式文件
@import "./variables.scss"; // 风格变量css样式文件
@import "./tagsView.scss"; // 顶部面包屑tag签css样式文件
@import "./layout.scss"; // layout的css样式文件
//-----------各个模块的样式文件--------------------------------------------
@import "./user.scss"; // 用户管理模块css样式文件 @import "./user.scss"; // 用户管理模块css样式文件
@import "./role.scss"; // 角色管理模块css样式文件 @import "./role.scss"; // 角色管理模块css样式文件
@import "./menu.scss"; // 菜单管理模块css样式文件 @import "./menu.scss"; // 菜单管理模块css样式文件
...@@ -8,8 +21,3 @@ ...@@ -8,8 +21,3 @@
@import "./errorLog.scss"; // 异常日志模块css样式文件 @import "./errorLog.scss"; // 异常日志模块css样式文件
@import "./reSetPsw.scss"; // 修改密码模块css样式文件 @import "./reSetPsw.scss"; // 修改密码模块css样式文件
@import "./login.scss"; // 登录页面css样式文件 @import "./login.scss"; // 登录页面css样式文件
@import "./navigationBar.scss"; // 左侧导航栏css样式文件
@import "./sidebar.scss"; // 自带的左侧导航栏css样式文件
@import "./variables.scss"; // 风格变量css样式文件
@import "./tagsView.scss"; // 顶部面包屑tag签css样式文件
@import "./layout.scss"; // layout的css样式文件
src/styles/themeB/common.scss 0 → 100644
View file @ 4c0b4cd9
// 通用样式，如：按钮，列表，form表单等
// 查询按钮
.queryBtn{
//width: 72px;
//height: 32px;
background: #03a487;
border: 1px solid #03a487!important;
border-radius: 4px;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #ffffff;
line-height: 16px;
}
//重置按钮
.resetBtn{
//width: 72px;
//height: 32px;
background: #ffffff;
border: 1px solid #d9d9d9;
border-radius: 4px;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #666666;
line-height: 16px;
}
//新增按钮
.addBtn{
//width: 72px;
//height: 34px;
background: #03a487!important;
border: 1px solid #03a487!important;
border-radius: 6px;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #ffffff;
line-height: 16px;
}
//导入按钮
.importBtn{
//width: 72px;
//height: 34px;
background: #f9a221!important;
border: 1px solid #f9a221!important;
border-radius: 6px;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #ffffff;
line-height: 16px;
}
//导出按钮
.exportBtn{
//width: 72px;
//height: 34px;
background: #0762b6!important;
border: 1px solid #0762b6!important;
border-radius: 6px;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #ffffff;
line-height: 16px;
}
form的label样式
.el-form .el-form-item .el-form-item__label{
color: #333333;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #333333;
}
// 输入框内文字样式
.el-input__inner{
padding-right: 10px!important;
font-size: 16px!important;
}
// placeholder样式
::placeholder{
color: #969696!important;
font-size: 16px!important;
}
// tree组件样式
.el-tree-node{
font-size: 16px!important;
}
// switch开样式
.el-switch.is-checked .el-switch__core{
border-color: #03A487;
background-color: #03A487;
}
// switch关样式
.el-switch__core{
border-color: #BBBBBB;
background-color: #BBBBBB;
}
//table列表title样式
.tableTitle{
margin: 20px 0;
color: #333333;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-700;
font-weight: 700;
text-align: LEFT;
}
// table列表表头样式
.el-table th .cell{
background: #f2f2f2;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-700;
font-weight: 700;
text-align: LEFT;
color: #333333;
line-height: 24px;
}
// table列表内容样式
.el-table td .cell{
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #666666;
}
//修改按钮文字类型样式
.updateBtn{
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #03a487;
}
//重置按钮文字类型样式
.resetBtnText{
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #0762B6;
}
//删除按钮文字类型样式
.delBtn{
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #0762B6;
}
//分页样式
.el-pagination.is-background .el-pager li:not(.disabled).active{
background: #ffffff;
border: 1px solid #03a487;
border-radius: 2px;
color: #03a487;
font-size: 16px;
}
//分页样式
.el-pagination.is-background .el-pager li {
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
color: #686A6C;
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 2px;
}
//分页样式
.el-pagination__total{
font-size: 16px!important;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #686a6c;
}
src/styles/themeB/index.scss
View file @ 4c0b4cd9
//------------公共的样式文件---------------------------------------------------
@import "./navigationBar.scss"; // 左侧导航栏css样式文件
@import "./sidebar.scss"; // 自带的左侧导航栏css样式文件
@import "./variables.scss"; // 风格变量css样式文件
@import "./tagsView.scss"; // 顶部面包屑tag签css样式文件
@import "./layout.scss"; // layout的css样式文件
@import "./common.scss"; // // 通用样式，如：按钮，列表，form表单等样式文件
//-----------各个模块的样式文件--------------------------------------------
@import "./login.scss"; // 登录页面css样式文件
@import "./user.scss"; // 用户管理模块css样式文件 @import "./user.scss"; // 用户管理模块css样式文件
@import "./role.scss"; // 角色管理模块css样式文件 @import "./role.scss"; // 角色管理模块css样式文件
@import "./menu.scss"; // 菜单管理模块css样式文件 @import "./menu.scss"; // 菜单管理模块css样式文件
...@@ -7,9 +20,3 @@ ...@@ -7,9 +20,3 @@
@import "./operLog.scss"; // 操作日志模块css样式文件 @import "./operLog.scss"; // 操作日志模块css样式文件
@import "./errorLog.scss"; // 异常日志模块css样式文件 @import "./errorLog.scss"; // 异常日志模块css样式文件
@import "./reSetPsw.scss"; // 修改密码模块css样式文件 @import "./reSetPsw.scss"; // 修改密码模块css样式文件
@import "./login.scss"; // 登录页面css样式文件
@import "./navigationBar.scss"; // 左侧导航栏css样式文件
@import "./sidebar.scss"; // 自带的左侧导航栏css样式文件
@import "./variables.scss"; // 风格变量css样式文件
@import "./tagsView.scss"; // 顶部面包屑tag签css样式文件
@import "./layout.scss"; // layout的css样式文件
src/styles/themeB/sidebar.scss
View file @ 4c0b4cd9
...@@ -263,7 +263,7 @@ ...@@ -263,7 +263,7 @@
font-size: 16px!important; font-size: 16px!important;
color: #333333 !important; color: #333333 !important;
font-weight: bold!important; font-weight: bold!important;
//margin: 0 10px!important; margin: 0 10px!important;
height: 42px!important; height: 42px!important;
line-height: 42px!important; line-height: 42px!important;
border-radius: 4px!important; border-radius: 4px!important;
......
src/styles/themeB/user.scss
View file @ 4c0b4cd9
$color-theme: #F57b7b; $color-theme: #F57b7b;
.user-manage{ .user-manage{
.userQueryBtn{
//font-size: 20px;
//font-weight: bold;
background-color: $color-theme!important;
}
} }
src/utils/commonField.js
View file @ 4c0b4cd9
...@@ -6,6 +6,11 @@ const commonField = { ...@@ -6,6 +6,11 @@ const commonField = {
nameParent: '删除', nameParent: '删除',
resetPassword: '重置密码', resetPassword: '重置密码',
resetName: '重置', resetName: '重置',
addClass: 'addBtn',
exportClass: 'exportBtn',
updateClass: 'updateBtn',
resetPasClass: 'resetBtnText',
delClass: 'delBtn',
addName: '新增', addName: '新增',
queryName: '查询', queryName: '查询',
exportName: '导出', exportName: '导出',
......
src/views/system/role/index.vue
View file @ 4c0b4cd9
...@@ -39,13 +39,13 @@ ...@@ -39,13 +39,13 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button> <el-button class="queryBtn" type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button> <el-button class="resetBtn" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
<div style="float: right"> <div style="float: right">
<el-form-item> <el-form-item>
<coolbutton style="padding: 8px 7px;" :type="commonField.typePrimary" :name="commonField.addName" :size="commonField.smallSize" :icon="commonField.addIcon" :haspermi="hasAddPerm" @btn-click="handleAdd" /> <coolbutton :class-name="commonField.addClass" style="padding: 8px 7px;" :type="commonField.typePrimary" :name="commonField.addName" :size="commonField.smallSize" :icon="commonField.addIcon" :haspermi="hasAddPerm" @btn-click="handleAdd" />
<coolbutton style="padding: 8px 7px;" :type="commonField.typeSuccess" :name="commonField.exportName" :size="commonField.smallSize" :icon="commonField.exportIcon" :haspermi="hasExportPerm" @btn-click="handleExport" /> <coolbutton :class-name="commonField.exportClass" style="padding: 8px 7px;" :type="commonField.typeSuccess" :name="commonField.exportName" :size="commonField.smallSize" :icon="commonField.exportIcon" :haspermi="hasExportPerm" @btn-click="handleExport" />
</el-form-item> </el-form-item>
</div> </div>
</el-form> </el-form>
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
<div style="padding:5px 10px"> <div style="padding:5px 10px">
<div class="mb12 font-small-bold">角色管理列表</div> <div class="mb12 font-small-bold">角色管理列表</div>
<el-table v-loading="loading" border :data="roleList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" border :data="roleList" @selection-change="handleSelectionChange">
<el-table-column type="index" label="序号" width="50" /> <el-table-column type="index" label="序号" width="90" />
<el-table-column label="名称" prop="roleName" :show-overflow-tooltip="true"> <el-table-column label="名称" prop="roleName" :show-overflow-tooltip="true">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.roleName || '-' }} {{ scope.row.roleName || '-' }}
...@@ -86,14 +86,16 @@ ...@@ -86,14 +86,16 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" class-name="small-padding fixed-width" width="200px"> <el-table-column label="操作" class-name="small-padding fixed-width" width="200px">
<template slot-scope="scope"> <template slot-scope="scope">
<coolbutton style="color: #49cec9" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasUpdatePerm" @btn-click="handleUpdate(scope.row)" /> <coolbutton :class-name="commonField.updateClass" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasUpdatePerm" @btn-click="handleUpdate(scope.row)" />
<el-button <el-button
class="resetBtnText"
v-hasPermi="['sys:role:update']" v-hasPermi="['sys:role:update']"
size="mini" size="mini"
type="text" type="text"
@click="handleMenu(scope.row)" @click="handleMenu(scope.row)"
>数据权限</el-button> >数据权限</el-button>
<el-button <el-button
class="delBtn"
size="mini" size="mini"
type="text" type="text"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
......
src/views/system/user/index.vue
View file @ 4c0b4cd9
...@@ -29,18 +29,19 @@ ...@@ -29,18 +29,19 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button class="userQueryBtn" type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button> <el-button class="queryBtn" type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button> <el-button class="resetBtn" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
<el-form-item style="float: right"> <el-form-item style="float: right">
<coolbutton :type="commonField.typePrimary" :name="commonField.addName" :size="commonField.smallSize" :icon="commonField.addIcon" :haspermi="hasAddPerm" @btn-click="handleAdd" /> <coolbutton :class-name="commonField.addClass" :type="commonField.typePrimary" :name="commonField.addName" :size="commonField.smallSize" :icon="commonField.addIcon" :haspermi="hasAddPerm" @btn-click="handleAdd" />
<el-button <el-button
class="importBtn"
type="warning" type="warning"
icon="el-icon-upload" icon="el-icon-upload"
size="small" size="small"
@click="handleImport" @click="handleImport"
>导入</el-button> >导入</el-button>
<coolbutton :type="commonField.typeSuccess" :name="commonField.exportName" :size="commonField.smallSize" :icon="commonField.exportIcon" :haspermi="hasAddPerm" @btn-click="handleExport" /> <coolbutton :class-name="commonField.exportClass" :type="commonField.typeSuccess" :name="commonField.exportName" :size="commonField.smallSize" :icon="commonField.exportIcon" :haspermi="hasAddPerm" @btn-click="handleExport" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -70,20 +71,20 @@ ...@@ -70,20 +71,20 @@
@node-click="handleNodeClick" @node-click="handleNodeClick"
> >
<div slot-scope="{ node }" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden" class="custom-tree-node"> <div slot-scope="{ node }" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden" class="custom-tree-node">
<span style="font-size: 14px" :title="node.label">{{ node.label }}</span> <span :title="node.label">{{ node.label }}</span>
</div> </div>
</el-tree> </el-tree>
</div> </div>
</el-col> </el-col>
<!--用户数据--> <!--用户数据-->
<el-col :span="20" :xs="24"> <el-col :span="20" :xs="24">
<div class="mb12 font-small-bold" style="margin-top: 20px">用户管理列表</div> <div class="tableTitle">用户管理列表</div>
<el-table <el-table
v-loading="loading" v-loading="loading"
style="padding-right: 10px" style="padding-right: 10px"
:data="userList" :data="userList"
> >
<el-table-column type="index" label="序号" width="50" /> <el-table-column type="index" label="序号" width="90" />
<el-table-column label="登录名" prop="username" :show-overflow-tooltip="true"> <el-table-column label="登录名" prop="username" :show-overflow-tooltip="true">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.username || '-' }} {{ scope.row.username || '-' }}
...@@ -117,13 +118,13 @@ ...@@ -117,13 +118,13 @@
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="操作" label="操作"
width="180" width="200"
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<coolbutton style="color: #49cec9" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasUpdatePerm" @btn-click="handleUpdate(scope.row)" /> <coolbutton :class-name="commonField.updateClass" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasUpdatePerm" @btn-click="handleUpdate(scope.row)" />
<coolbutton :type="commonField.typeParent" :name="commonField.resetPassword" :size="commonField.size" :haspermi="hasResetPerm" @btn-click="handleResetPwd(scope.row)" /> <coolbutton :class-name="commonField.resetPasClass" :type="commonField.typeParent" :name="commonField.resetPassword" :size="commonField.size" :haspermi="hasResetPerm" @btn-click="handleResetPwd(scope.row)" />
<coolbutton v-if="scope.row.businessId !== 1" :type="commonField.typeParent" :name="commonField.nameParent" :size="commonField.size" :haspermi="hasDelPerm" @btn-click="handleDelete(scope.row)" /> <coolbutton :class-name="commonField.delClass" v-if="scope.row.businessId !== 1" :type="commonField.typeParent" :name="commonField.nameParent" :size="commonField.size" :haspermi="hasDelPerm" @btn-click="handleDelete(scope.row)" />
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
......
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