Skip to content

肖文锋 / clm-admin

Go to a project
Commit 9db13274 by xiaowenfeng
Options

1、修改

parent e5624eb4
Inline Side-by-side
Showing with 153 additions and 55 deletions
src/App.vue
...@@ -31,16 +31,46 @@ export default { ...@@ -31,16 +31,46 @@ export default {
<style lang="less"> <style lang="less">
@nav-width: 208px; @nav-width: 208px;
/*滚动条整体样式*/
::-webkit-scrollbar{
/*高宽分别对应横竖滚动条的尺寸*/
height: 9px !important; /*no*/
width: 6px !important; /*no*/
}
/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
border-radius:8px; /*no*/
border-style: dashed;
background-color: #bfbfbf;
border-color: transparent;
border-width: 1px; /*no*/
background-clip: padding-box;
}
// 鼠标放上去滚动条颜色
::-webkit-scrollbar-thumb:hover {
background: #bfbfbf
}
/*滚动条里面轨道*/
::-webkit-scrollbar-track {
border-radius: 0 ;
background: rgba(255, 255, 255, 0.1);
cursor: pointer ;
}
// 竖向和横向滚动条小角落的颜色
::-webkit-scrollbar-corner{
background: rgba(255, 255, 255, 0.1);
}
#app { #app {
font-family: SourceHanSansSC-regular; font-family: SourceHanSansSC-regular;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
min-width: 1440px;/*no*/ min-width: 1440px;/*no*/
min-height: 900px; /*no*/
height: 100%; height: 100%;
#app-body { #app-body {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-x: scroll; // overflow-x: scroll;
.main-wrap { .main-wrap {
width: 100%; width: 100%;
height: calc(100% - 53px); height: calc(100% - 53px);
......
src/components/Footer.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
padding: 0 15px; padding: 0 15px;
font-size: 12px; font-size: 12px;
} }
::v-deep .ant-btn { ::v-deep(.ant-btn) {
background: none; background: none;
border: none; border: none;
width: 120px; width: 120px;
......
src/components/Header.vue
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<template #content> <template #content>
<a-button class="user-popover">退出登陆</a-button> <a-button class="user-popover">退出登陆</a-button>
</template> </template>
<a-button type="default"> <a-button type="default" class="user-btn">
<span class="iconfont iconUser"></span> <span class="iconfont iconUser"></span>
<span class="user-name">493514152@qq.com493514152@qq.com493514152@qq.com493514152@qq.com</span> <span class="user-name">493514152@qq.com493514152@qq.com493514152@qq.com493514152@qq.com</span>
<span class="iconfont icontriangle-bottom"></span> <span class="iconfont icontriangle-bottom"></span>
...@@ -66,8 +66,9 @@ ...@@ -66,8 +66,9 @@
} }
.back-old { .back-old {
width: 80px; width: 80px;
min-width: 65px; /*no*/
height: 21px; height: 21px;
line-height: 20px; line-height: 19px;
border-radius: 4px; border-radius: 4px;
padding: 0; padding: 0;
font-size: 12px; font-size: 12px;
...@@ -135,7 +136,9 @@ ...@@ -135,7 +136,9 @@
.back-clm{ .back-clm{
right: 408px; right: 408px;
width: 80px; width: 80px;
min-width: 65px; /*no*/
height: 21px; height: 21px;
line-height: 19px;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
...@@ -156,14 +159,17 @@ ...@@ -156,14 +159,17 @@
.ant-btn { .ant-btn {
border: none; border: none;
box-shadow: none; box-shadow: none;
& > * { display: flex;
display: inline-block; align-items: center;
vertical-align: middle; justify-content: flex-start;
} text-align: justify;
.iconUser { .iconUser {
font-size: 18px; font-size: 18px;
padding: 0 5px; padding: 0 5px;
} }
.user-btn {
line-height: 30px;
}
.user-name { .user-name {
width: 135px; width: 135px;
overflow: hidden; overflow: hidden;
......
src/components/LeftNav.vue
...@@ -120,10 +120,10 @@ export default { ...@@ -120,10 +120,10 @@ export default {
left: 40px; left: 40px;
} }
} }
::v-deep .ant-menu-submenu-inline{ ::v-deep(.ant-menu-submenu-inline){
padding: 0; padding: 0;
} }
::v-deep .ant-menu-submenu-title { ::v-deep(.ant-menu-submenu-title) {
height: 58px; height: 58px;
margin: 0; margin: 0;
line-height: 58px; line-height: 58px;
...@@ -131,15 +131,15 @@ export default { ...@@ -131,15 +131,15 @@ export default {
font-weight: bold; font-weight: bold;
background: #D2D2D2 100%; background: #D2D2D2 100%;
} }
::v-deep .ant-menu-sub{ ::v-deep(.ant-menu-sub){
background: @e3-color; background: @e3-color;
} }
::v-deep .ant-menu-submenu-selected { ::v-deep(.ant-menu-submenu-selected) {
.ant-menu-submenu-title { .ant-menu-submenu-title {
background:#C3C3C3 100%; background:#C3C3C3 100%;
} }
} }
::v-deep .ant-menu-item { ::v-deep(.ant-menu-item) {
margin: 0; margin: 0;
height: 54px; height: 54px;
line-height: 54px; line-height: 54px;
......
src/components/RightNavSlot.vue
...@@ -30,7 +30,7 @@ export default { ...@@ -30,7 +30,7 @@ export default {
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(255, 255, 255, 100); border: 1px solid rgba(255, 255, 255, 100);
margin-bottom: @right-nav-margin-bottom; margin-bottom: @right-nav-margin-bottom;
::v-deep .nav-list { ::v-deep(.nav-list) {
height: 100%; height: 100%;
.ant-menu-horizontal{ .ant-menu-horizontal{
line-height: @nav-item-height; line-height: @nav-item-height;
......
src/css/common.less
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
justify-content: flex-start; justify-content: flex-start;
text-align: justify; text-align: justify;
} }
::v-deep .qd-btn { ::v-deep(.qd-btn) {
width: 93px; width: 93px;
height: 30px; height: 30px;
border-radius: 90px; border-radius: 90px;
...@@ -36,11 +36,16 @@ ...@@ -36,11 +36,16 @@
font-family: PingFang SC; font-family: PingFang SC;
padding: 0; padding: 0;
} }
::v-deep .qd-btn-default-w { ::v-deep(.qd-btn-default-w) {
min-width: 93px;/*no*/ min-width: 93px;/*no*/
} }
::v-deep .qd-table { ::v-deep(.qd-table) {
.ant-table-thead > tr > th {
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
}
.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td { .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
background: @f9-color !important; background: @f9-color !important;
} }
......
src/views/Home.vue
...@@ -70,7 +70,7 @@ export default { ...@@ -70,7 +70,7 @@ export default {
.breadcrumb { .breadcrumb {
height: @breadcrumb-height; height: @breadcrumb-height;
margin-bottom: 12px; margin-bottom: 12px;
::v-deep .ant-breadcrumb { ::v-deep(.ant-breadcrumb) {
font-size: 12px !important; font-size: 12px !important;
} }
} }
...@@ -83,7 +83,7 @@ export default { ...@@ -83,7 +83,7 @@ export default {
} }
} }
} }
::v-deep .footer-wrap { ::v-deep(.footer-wrap) {
width: 100%; width: 100%;
height: @footer-height; height: @footer-height;
line-height: @footer-height; line-height: @footer-height;
......
src/views/origanizationManage/Member.vue
...@@ -29,11 +29,17 @@ ...@@ -29,11 +29,17 @@
v-show="searchType.current === Object.keys(searchType.types)[0]" v-show="searchType.current === Object.keys(searchType.types)[0]"
:treeData="organizationTreeData" :treeData="organizationTreeData"
:defaultExpandedKeys="['0-0']" :defaultExpandedKeys="['0-0']"
:blockNode="true"
showIcon showIcon
@select="selectOrganization" @select="selectOrganization"
> >
<template #jiegou><span class="iconfont iconjiegou"></span></template> <!--
<template #jiegou><span class="iconfont iconjiegou"></span></template>
-->
<template #custom=item>
<span>{{item.title}}</span>
<a-button type="default" @click.stop="test(item)">删除</a-button>
<a-button type="default" @click.stop="test(item)">添加</a-button>
</template>
</a-tree> </a-tree>
<a-tree <a-tree
v-show="searchType.current === Object.keys(searchType.types)[1]" v-show="searchType.current === Object.keys(searchType.types)[1]"
...@@ -123,31 +129,65 @@ export default { ...@@ -123,31 +129,65 @@ export default {
title: '深圳企大科技有限公司', title: '深圳企大科技有限公司',
key: '0-0', key: '0-0',
slots: { slots: {
icon: 'jiegou' icon: 'jiegou',
title: 'custom'
}, },
children: [ children: [
{ {
title: '客服部', title: '客服部',
key: '0-0-0', key: '0-0-0',
slots: {
title: 'custom'
},
children: [ children: [
{ title: '客服一部', key: '0-0-0-0' } {
title: '客服一部',
key: '0-0-0-0',
slots: {
title: 'custom'
}
}
] ]
}, },
{ {
title: 'IT技术部', title: 'IT技术部',
key: '0-0-1', key: '0-0-1',
slots: {
title: 'custom'
},
children: [ children: [
{ title: 'IT一部', key: '0-0-1-0' } {
title: 'IT一部',
key: '0-0-1-0',
slots: {
title: 'custom'
}
}
] ]
}, },
{ {
title: '运营部', title: '运营部',
key: '0-0-2', key: '0-0-2',
slots: {
title: 'custom'
},
children: [ children: [
{ title: '客服一部', key: '0-0-2-0' } {
title: '客服一部',
key: '0-0-2-0',
slots: {
title: 'custom'
}
}
] ]
}, },
{ title: '财务相关', key: '0-0-3' } {
title: '财务相关',
key: '0-0-3',
slots: {
title: 'custom'
}
}
] ]
}], }],
roleTreeData: [{ roleTreeData: [{
...@@ -337,6 +377,9 @@ export default { ...@@ -337,6 +377,9 @@ export default {
} }
}, },
methods: { methods: {
test (item) {
console.log(item)
},
onChange (e) { onChange (e) {
this.searchKey = e.target.value this.searchKey = e.target.value
}, },
...@@ -361,8 +404,20 @@ export default { ...@@ -361,8 +404,20 @@ export default {
} }
setTimeout(() => { setTimeout(() => {
treeNode.dataRef.children = [ treeNode.dataRef.children = [
{ title: 'Child Node', key: `${treeNode.eventKey}-0` }, {
{ title: 'Child Node', key: `${treeNode.eventKey}-1` } title: 'Child Node',
key: `${treeNode.eventKey}-0`,
slots: {
title: 'custom'
}
},
{
title: 'Child Node',
key: `${treeNode.eventKey}-1`,
slots: {
title: 'custom'
}
}
] ]
this.organizationTreeData = [...this.organizationTreeData] this.organizationTreeData = [...this.organizationTreeData]
resolve() resolve()
...@@ -406,12 +461,12 @@ export default { ...@@ -406,12 +461,12 @@ export default {
width: 100%; width: 100%;
height: @tree-input-height; height: @tree-input-height;
padding: 21px 10px 5px 10px; padding: 21px 10px 5px 10px;
::v-deep .ant-input-affix-wrapper{ ::v-deep(.ant-input-affix-wrapper){
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
} }
::v-deep .ant-input-clear-icon { ::v-deep(.ant-input-clear-icon) {
font-size: 16px; font-size: 16px;
} }
} }
...@@ -422,42 +477,45 @@ export default { ...@@ -422,42 +477,45 @@ export default {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
::v-deep .ant-btn{ ::v-deep(.ant-btn){
width: 50%; width: 50%;
height: 100%; height: 100%;
border-color: 1px solid rgba(128, 128, 128, 100); border-color: 1px solid rgba(128, 128, 128, 100);
} }
.active-tap{ .active-tap{
background: #808080 100%; background: #808080 100%;
color: #fff; color: #fff;
border-color: #808080 100%; border-color: #808080 100%;
} }
& :first-child { & :first-child {
border-top-left-radius: @tap-wrap-height / 2; border-top-left-radius: @tap-wrap-height / 2;
border-bottom-left-radius: @tap-wrap-height / 2; border-bottom-left-radius: @tap-wrap-height / 2;
border-right: 0; border-right: 0;
} }
& :last-child { & :last-child {
border-top-right-radius: @tap-wrap-height / 2; border-top-right-radius: @tap-wrap-height / 2;
border-bottom-right-radius: @tap-wrap-height / 2; border-bottom-right-radius: @tap-wrap-height / 2;
border-left: 0; border-left: 0;
} }
} }
.tree-wrap{ .tree-wrap{
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: scroll; overflow: scroll;
::v-deep .ant-tree-title { ::v-deep(.ant-tree-title) {
font-size: 16px; font-size: 16px;
} }
::v-deep .ant-tree-node-selected{ ::v-deep(.ant-tree-switcher) {
top: 2.5px;
}
::v-deep(.ant-tree-node-selected){
background: #CECECE 100%; background: #CECECE 100%;
} }
.iconjiegou { .iconjiegou {
font-size: 24px; font-size: 24px;
} }
::v-deep .ant-tree svg { ::v-deep(.ant-tree svg) {
font-size: 18px; font-size: 18px;
} }
} }
.create-role-wrap { .create-role-wrap {
...@@ -466,7 +524,6 @@ export default { ...@@ -466,7 +524,6 @@ export default {
padding: 4px 0 12px 45px; padding: 4px 0 12px 45px;
.ant-btn { .ant-btn {
height: 25px; height: 25px;
line-height: 25px;
width: 97px; width: 97px;
border-radius: 90px; border-radius: 90px;
padding: 0; padding: 0;
...@@ -494,8 +551,8 @@ export default { ...@@ -494,8 +551,8 @@ export default {
.menber-count{ .menber-count{
display: inline-block; display: inline-block;
width: 68px; width: 68px;
height: 22px; // height: 22px; /*no*/
line-height: 22px; line-height: 22px; /*no*/
border-radius: 4px; border-radius: 4px;
background-color: rgba(195, 195, 195, 100); background-color: rgba(195, 195, 195, 100);
color: rgba(255, 255, 255, 100); color: rgba(255, 255, 255, 100);
...@@ -543,11 +600,11 @@ export default { ...@@ -543,11 +600,11 @@ export default {
width: 100%; width: 100%;
height: 42px; height: 42px;
background: @e3-color; background: @e3-color;
::v-deep .dif-btn{ ::v-deep(.dif-btn){
width: 159px; width: 159px;
} }
} }
::v-deep .qd-table { ::v-deep(.qd-table) {
.ant-btn { .ant-btn {
border: none; border: none;
background: none; background: none;
......
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 sign in to comment