Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
cdbf5b1d by xiaomiao
Options

组件样式调整

1 parent 90e3f601
Inline Side-by-side
Showing 9 changed files with 446 additions and 477 deletions
......@@ -4,9 +4,9 @@
<div class="logo">
<img :src="require('@/image/logo.png')" alt="" />
</div>
<div class="backdrop">
<!-- <div class="backdrop">
<Breadcrumb />
</div>
</div> -->
<div class="right-menu">
<div class="dataView d-center pointer" @click="handleDataView">大屏展示</div>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
......@@ -24,227 +24,227 @@
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from './Breadcrumb'
import defaultSettings from '@/settings'
export default {
components: {
Breadcrumb
},
computed: {
...mapGetters(['sidebar', 'avatar', 'name'])
},
data () {
return {
title: defaultSettings.title
}
},
methods: {
handleDataView () {
const { href } = this.$router.resolve('/dataView');
window.open(href, '_blank');
import { mapGetters } from 'vuex'
import Breadcrumb from './Breadcrumb'
import defaultSettings from '@/settings'
export default {
components: {
Breadcrumb
},
themeChange (val) {
this.$store.dispatch('app/updateTheme', val)
computed: {
...mapGetters(['sidebar', 'avatar', 'name'])
},
data () {
return {
title: defaultSettings.title
}
},
handleCommand (command) {
if (command == 'a') {
} else {
methods: {
handleDataView () {
const { href } = this.$router.resolve('/dataView');
window.open(href, '_blank');
},
themeChange (val) {
this.$store.dispatch('app/updateTheme', val)
},
handleCommand (command) {
if (command == 'a') {
} else {
}
}
}
}
}
</script>
<style lang="scss" scoped>
.navbar-con {
position: relative;
.logo {
color: #fff;
font-size: 26px;
font-weight: 700;
}
}
.dataView {
color: #fff;
width: 120px;
height: 32px;
background: url('../../image/dp.png');
background-size: cover;
margin-right: 20px;
}
.NoticeBar {
position: absolute;
bottom: 0;
}
.el-dropdown-menu {
padding: 0 !important;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 4px 0 0 4px 4px;
.el-dropdown-menu__item {
text-align: center;
margin-top: 0 !important;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4A4A4A;
width: 140px;
height: 36px;
line-height: 36px;
}
.navbar-con {
position: relative;
.el-dropdown-menu__item:nth-child(6) {
border-top: 1px solid #EBEEF5;
.logo {
color: #fff;
font-size: 26px;
font-weight: 700;
}
}
.popper__arrow {
top: -11px !important;
left: 110px !important;
transform: rotate(0deg) scale(2);
.dataView {
color: #fff;
width: 120px;
height: 32px;
background: url("../../image/dp.png");
background-size: cover;
margin-right: 20px;
}
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
background: #F6F7F9;
color: #4A4A4A;
}
}
.navbar {
height: $headerHeight;
overflow: hidden;
position: relative;
// background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
// box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
background: #0D1230;
display: flex;
align-items: center;
padding-right: 20px;
justify-content: space-between;
margin-bottom: 10px;
.header-logo {
width: 300px;
.NoticeBar {
position: absolute;
bottom: 0;
}
.backdrop {
flex: 1;
width: 60%;
background-size: 100% 100%;
height: $headerHeight;
display: flex;
align-items: center;
}
.el-dropdown-menu {
padding: 0 !important;
border: 1px solid #ebeef5;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 4px 0 0 4px 4px;
.el-dropdown-menu__item {
text-align: center;
margin-top: 0 !important;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4a4a4a;
width: 140px;
height: 36px;
line-height: 36px;
}
.hamburger-container {
line-height: 43px;
height: 100%;
float: left;
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
.el-dropdown-menu__item:nth-child(6) {
border-top: 1px solid #ebeef5;
}
&:hover {
background: rgba(0, 0, 0, 0.025);
.popper__arrow {
top: -11px !important;
left: 110px !important;
transform: rotate(0deg) scale(2);
}
}
.breadcrumb-container {
float: left;
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
background: #f6f7f9;
color: #4a4a4a;
}
}
.right-menu {
float: right;
height: 100%;
line-height: 50px;
.navbar {
height: $headerHeight;
overflow: hidden;
position: relative;
// background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
// box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
background: #0d1230;
display: flex;
align-items: center;
padding-right: 20px;
justify-content: space-between;
margin-bottom: 10px;
.function {
margin: 0 15px;
cursor: pointer;
.header-logo {
width: 300px;
}
.shutdown {
font-size: 20px;
margin-left: 15px;
cursor: pointer;
}
.organization-item {
margin-right: 40px;
margin-top: -40px !important;
.backdrop {
flex: 1;
width: 60%;
background-size: 100% 100%;
height: $headerHeight;
display: flex;
align-items: center;
}
.item {
margin-right: 40px;
margin-top: -20px;
line-height: 18.4px;
.hamburger-container {
line-height: 43px;
height: 100%;
float: left;
cursor: pointer;
position: relative;
.item-box {
position: absolute;
top: -5px;
left: 3px;
width: 100%;
min-width: 25px;
height: 25px;
cursor: pointer;
z-index: 100;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
&:focus {
outline: none;
.breadcrumb-container {
float: left;
}
.right-menu-item {
display: inline-block;
.right-menu {
float: right;
height: 100%;
font-size: 18px;
color: #fff;
vertical-align: text-bottom;
line-height: 50px;
display: flex;
align-items: center;
&.hover-effect {
.function {
margin: 0 15px;
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
}
&:hover {
background: rgba(0, 0, 0, 0.025);
}
.shutdown {
font-size: 20px;
margin-left: 15px;
cursor: pointer;
}
}
.avatar-wrapper {
position: relative;
display: flex;
height: 40px;
align-items: center;
.organization-item {
margin-right: 40px;
margin-top: -40px !important;
}
.user-avatar {
.item {
margin-right: 40px;
margin-top: -20px;
line-height: 18.4px;
cursor: pointer;
width: 35px;
height: 35px;
border-radius: 50%;
position: relative;
.item-box {
position: absolute;
top: -5px;
left: 3px;
width: 100%;
min-width: 25px;
height: 25px;
cursor: pointer;
z-index: 100;
}
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -15px;
top: 17px;
font-size: 12px;
&:focus {
outline: none;
}
.right-menu-item {
display: inline-block;
height: 100%;
font-size: 18px;
color: #fff;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
}
.avatar-wrapper {
position: relative;
display: flex;
height: 40px;
align-items: center;
.user-avatar {
cursor: pointer;
width: 35px;
height: 35px;
border-radius: 50%;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -15px;
top: 17px;
font-size: 12px;
}
}
}
}
}
</style>
......
......@@ -14,35 +14,35 @@
</template>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import defaultSettings from '@/settings'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
data () {
return {
title: defaultSettings.title
}
},
computed: {
...mapGetters(['permission_routes', 'sidebar']),
activeMenu () {
const route = this.$route
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
import { mapGetters } from 'vuex'
import Logo from './Logo'
import defaultSettings from '@/settings'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
data () {
return {
title: defaultSettings.title
}
return path
},
variables () {
return variables
},
asyncRoutes () {
return asyncRoutes
computed: {
...mapGetters(['permission_routes', 'sidebar']),
activeMenu () {
const route = this.$route
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
variables () {
return variables
},
asyncRoutes () {
return asyncRoutes
}
}
}
}
</script>
\ No newline at end of file
</script>
......
......@@ -199,4 +199,235 @@
box-sizing: border-box;
text-align: right;
}
// 修改弹框样式
.modifydialog{
/deep/.el-dialog__header {
text-align: center;
margin-bottom: 10px;
.el-dialog__title {
color: white;
}
}
/deep/.el-form-item__label {
color: white;
}
/deep/.el-input__inner {
background-color: #07388b;
}
/deep/.el-input__inner {
background: #07388b;
border-radius: 2px;
border: 1px solid #6bc1fc;
}
/deep/.el-textarea__inner {
background: #07388b;
color: #fff;
}
/deep/.el-form-item__label {
color: #fff;
}
/deep/.el-dialog__headerbtn {
position: absolute;
top: 22px;
right: 30px;
}
/deep/.el-dialog__header {
text-align: center;
margin-bottom: 10px;
.el-dialog__title {
color: white;
}
}
}
// 角色配置
.roleconfiguration{
/deep/.el-dialog__body {
display: flex;
flex-direction: column;
}
/deep/ .el-tabs {
color: #cef8ff;
}
.sjmx {
/deep/.el-tabs__item {
height: 50px;
padding-top: 6px;
}
}
/deep/.el-tabs__item {
color: #cef8ff !important;
display: flex;
flex-direction: row;
justify-content: center;
background: url("~@/image/tabitem.png") no-repeat;
background-size: 100% 100%;
border: none !important;
}
.obligee-item-name {
background: #05275b;
color: #ffffff;
background: url("~@/image/itembg.png") no-repeat;
background-size: 100% 100%;
}
/deep/.el-tabs__nav-scroll {
background: none;
}
/deep/.el-tabs__nav {
display: flex;
border: none !important;
}
/deep/.el-tabs__item.is-top {
border: 1px solid #dfe4ed;
border-top: 1px solid #dfe4ed;
border-bottom: 1px solid transparent;
}
/deep/.el-tabs__header {
border: none;
margin-bottom: 0;
}
/deep/.el-tabs__item.is-top:not(:last-child) {
margin-right: 5px;
}
/deep/.el-tabs__item.is-top {
background-color: none !important;
}
/deep/.el-tabs__item.is-active {
background: url("~@/image/tabitemse.png") no-repeat;
background-size: 100% 100%;
}
.success-images {
width: 30px;
height: 30px;
position: relative;
top: 10px;
right: 3px;
}
.tab-pane-item {
line-height: 20px;
color: #02d9fd;
p {
text-align: center;
}
}
.edit-content {
height: 450px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 1px;
margin-bottom: 10px;
border-top: none;
}
/deep/.editDialogBox {
border-radius: 8px;
overflow: hidden;
min-width: 1228px;
height: 825px !important;
.dialog-from {
padding: 13px;
border-radius: 2px;
box-sizing: border-box;
.el-row {
display: flex;
flex-wrap: nowrap;
}
.el-col {
line-height: 18px;
display: flex;
align-items: center;
margin-bottom: 3px;
color: #b5d6dc;
border-radius: 2px;
border: 1px solid #224c7c;
margin: 5px;
span {
display: inline-block;
padding: 3px;
border-radius: 3px;
overflow: hidden;
white-space: nowrap;
text-align: left;
color: #02d9fd;
}
p {
flex: 1;
width: 100%;
padding-left: 5px;
line-height: 20px;
color: #c0c4cc;
cursor: not-allowed;
white-space: nowrap;
margin-right: 5px;
text-align: right;
}
}
}
.dialog_title {
display: flex;
position: relative;
font-size: 24px;
top: -11px;
width: 38%;
height: 40px;
margin-left: 28px;
justify-content: center;
}
.el-dialog__header {
display: flex;
margin-bottom: 15px;
}
.el-dialog__footer {
padding-right: 40px;
}
.divider {
width: 100%;
border-bottom: 1px solid #ccc;
}
}
.el-dialog__wrapper {
overflow: hidden;
}
/deep/.el-table {
background: none;
th.el-table__cell {
background-color: #073781;
color: #02d9fd;
}
tr {
background: none;
td {
color: white;
}
}
}
}
......
<template>
<div>
<Dialog
class="modifydialog"
:title="title"
:show.sync="visible"
:width="'767px'"
......@@ -258,19 +259,5 @@
}
</script>
<style scoped lang="scss">
/deep/.el-dialog__header {
text-align: center;
margin-bottom: 10px;
.el-dialog__title {
color: white;
}
}
/deep/.el-form-item__label {
color: white;
}
/deep/.el-input__inner {
background-color: #07388b;
}
@import "~@/styles/public.scss";
</style>
......
<!-- 新增 & 修改角色 -->
<template>
<Dialog
class="modifydialog"
:title="dialogTitle"
:show.sync="showAddEditDialog"
:width="'767px'"
......@@ -160,28 +161,4 @@
}
</script>
<style scoped lang="scss">
/deep/.el-input__inner {
background: #07388b;
border-radius: 2px;
border: 1px solid #6bc1fc;
}
/deep/.el-textarea__inner {
background: #07388b;
color: #fff;
}
/deep/.el-form-item__label {
color: #fff;
}
/deep/.el-dialog__headerbtn {
position: absolute;
top: 15px;
right: 30px;
}
/deep/.el-dialog__header {
text-align: center;
margin-bottom: 10px;
.el-dialog__title {
color: white;
}
}
</style>
......
......@@ -3,6 +3,7 @@
:close-on-click-modal="false"
top="0"
@click="close()"
class="roleconfiguration"
custom-class="dialogBox editDialogBox mainCenter"
:visible.sync="visible"
width="85%">
......@@ -417,210 +418,4 @@
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBox.scss";
.editForm {
/deep/.el-textarea__inner {
border: 1px solid #224c7c !important;
margin: 0 0 10px 0 !important;
width: 100% !important;
color: #dadde3 !important;
background: transparent !important;
}
/deep/.el-input__inner {
border: 1px solid #224c7c !important;
margin: 0 !important;
width: 100% !important;
color: #dadde3 !important;
background: transparent !important;
}
}
/deep/.el-dialog__body {
display: flex;
flex-direction: column;
}
/deep/ .el-tabs {
color: #cef8ff;
}
.sjmx {
/deep/.el-tabs__item {
height: 50px;
padding-top: 6px;
}
}
/deep/.el-tabs__item {
color: #cef8ff !important;
display: flex;
flex-direction: row;
justify-content: center;
background: url("~@/image/tabitem.png") no-repeat;
background-size: 100% 100%;
border: none !important;
}
.obligee-item-name {
background: #05275b;
color: #ffffff;
background: url("~@/image/itembg.png") no-repeat;
background-size: 100% 100%;
}
/deep/.el-tabs__nav-scroll {
background: none;
}
/deep/.el-tabs__nav {
display: flex;
border: none !important;
}
/deep/.el-tabs__item.is-top {
border: 1px solid #dfe4ed;
border-top: 1px solid #dfe4ed;
border-bottom: 1px solid transparent;
}
/deep/.el-tabs__header {
border: none;
margin-bottom: 0;
}
/deep/.el-tabs__item.is-top:not(:last-child) {
margin-right: 5px;
}
/deep/.el-tabs__item.is-top {
background-color: none !important;
}
/deep/.el-tabs__item.is-active {
background: url("~@/image/tabitemse.png") no-repeat;
background-size: 100% 100%;
}
.success-images {
width: 30px;
height: 30px;
position: relative;
top: 10px;
right: 3px;
}
.tab-pane-item {
line-height: 20px;
color: #02d9fd;
p {
text-align: center;
}
}
.edit-content {
height: 450px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 1px;
margin-bottom: 10px;
border-top: none;
}
/deep/.editDialogBox {
border-radius: 8px;
overflow: hidden;
min-width: 1228px;
height: 825px !important;
.dialog-from {
padding: 13px;
border-radius: 2px;
box-sizing: border-box;
.el-row {
display: flex;
flex-wrap: nowrap;
}
.el-col {
line-height: 18px;
display: flex;
align-items: center;
margin-bottom: 3px;
color: #b5d6dc;
border-radius: 2px;
border: 1px solid #224c7c;
margin: 5px;
span {
display: inline-block;
padding: 3px;
border-radius: 3px;
overflow: hidden;
white-space: nowrap;
text-align: left;
color: #02d9fd;
}
p {
flex: 1;
width: 100%;
padding-left: 5px;
line-height: 20px;
color: #c0c4cc;
cursor: not-allowed;
white-space: nowrap;
margin-right: 5px;
text-align: right;
}
}
}
.dialog_title {
display: flex;
position: relative;
font-size: 24px;
top: -11px;
width: 38%;
height: 40px;
margin-left: 28px;
justify-content: center;
}
.el-dialog__header {
display: flex;
margin-bottom: 15px;
}
.el-dialog__footer {
padding-right: 40px;
}
.divider {
width: 100%;
border-bottom: 1px solid #ccc;
}
}
.el-dialog__wrapper {
overflow: hidden;
}
/deep/.el-table {
background: none;
th.el-table__cell {
background-color: #073781;
color: #02d9fd;
}
tr {
background: none;
td {
color: white;
}
}
}
// #08346F !important;
</style>
......
<template>
<Dialog :title="title" :show.sync="visible" :width="'715px'" @close="close()">
<Dialog :title="title" class="modifydialog" :show.sync="visible" :width="'715px'" @close="close()">
<template slot="content">
<el-form ref="form" :model="form" :rules="rules">
<el-row :gutter="24">
......@@ -218,26 +218,4 @@
};
</script>
<style scoped lang="scss">
/deep/.el-input__inner {
background: #07388b;
border-radius: 2px;
border: 1px solid #6bc1fc;
}
/deep/.el-textarea__inner {
background: #07388b;
color: #fff;
}
/deep/.el-form-item__label {
color: #fff;
}
/deep/.el-dialog__body {
padding-top: 20px;
}
/deep/.el-dialog__header {
text-align: center;
margin-bottom: 10px;
.el-dialog__title {
color: white;
}
}
</style>
......
.btnColRight {
margin-top: 20px;
}
......@@ -307,7 +307,5 @@
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/public.scss";
.btnColRight {
margin-top: 20px;
}
@import "./index.scss";
</style>
......