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 272 additions and 303 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,10 +24,10 @@
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from './Breadcrumb'
import defaultSettings from '@/settings'
export default {
import { mapGetters } from 'vuex'
import Breadcrumb from './Breadcrumb'
import defaultSettings from '@/settings'
export default {
components: {
Breadcrumb
},
......@@ -54,10 +54,10 @@ export default {
}
}
}
}
}
</script>
<style lang="scss" scoped>
.navbar-con {
.navbar-con {
position: relative;
.logo {
......@@ -65,25 +65,25 @@ export default {
font-size: 26px;
font-weight: 700;
}
}
}
.dataView {
.dataView {
color: #fff;
width: 120px;
height: 32px;
background: url('../../image/dp.png');
background: url("../../image/dp.png");
background-size: cover;
margin-right: 20px;
}
}
.NoticeBar {
.NoticeBar {
position: absolute;
bottom: 0;
}
}
.el-dropdown-menu {
.el-dropdown-menu {
padding: 0 !important;
border: 1px solid #EBEEF5;
border: 1px solid #ebeef5;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 4px 0 0 4px 4px;
......@@ -93,14 +93,14 @@ export default {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4A4A4A;
color: #4a4a4a;
width: 140px;
height: 36px;
line-height: 36px;
}
.el-dropdown-menu__item:nth-child(6) {
border-top: 1px solid #EBEEF5;
border-top: 1px solid #ebeef5;
}
.popper__arrow {
......@@ -111,18 +111,18 @@ export default {
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
background: #F6F7F9;
color: #4A4A4A;
background: #f6f7f9;
color: #4a4a4a;
}
}
}
.navbar {
.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;
background: #0d1230;
display: flex;
align-items: center;
padding-right: 20px;
......@@ -246,5 +246,5 @@ export default {
}
}
}
}
}
</style>
......
......@@ -14,13 +14,13 @@
</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 {
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 {
......@@ -44,5 +44,5 @@ export default {
return asyncRoutes
}
}
}
}
</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>
......