组件样式调整
Showing
9 changed files
with
446 additions
and
477 deletions
| ... | @@ -4,9 +4,9 @@ | ... | @@ -4,9 +4,9 @@ |
| 4 | <div class="logo"> | 4 | <div class="logo"> |
| 5 | <img :src="require('@/image/logo.png')" alt="" /> | 5 | <img :src="require('@/image/logo.png')" alt="" /> |
| 6 | </div> | 6 | </div> |
| 7 | <div class="backdrop"> | 7 | <!-- <div class="backdrop"> |
| 8 | <Breadcrumb /> | 8 | <Breadcrumb /> |
| 9 | </div> | 9 | </div> --> |
| 10 | <div class="right-menu"> | 10 | <div class="right-menu"> |
| 11 | <div class="dataView d-center pointer" @click="handleDataView">大屏展示</div> | 11 | <div class="dataView d-center pointer" @click="handleDataView">大屏展示</div> |
| 12 | <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> | 12 | <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> |
| ... | @@ -24,227 +24,227 @@ | ... | @@ -24,227 +24,227 @@ |
| 24 | </div> | 24 | </div> |
| 25 | </template> | 25 | </template> |
| 26 | <script> | 26 | <script> |
| 27 | import { mapGetters } from 'vuex' | 27 | import { mapGetters } from 'vuex' |
| 28 | import Breadcrumb from './Breadcrumb' | 28 | import Breadcrumb from './Breadcrumb' |
| 29 | import defaultSettings from '@/settings' | 29 | import defaultSettings from '@/settings' |
| 30 | export default { | 30 | export default { |
| 31 | components: { | 31 | components: { |
| 32 | Breadcrumb | 32 | Breadcrumb |
| 33 | }, | ||
| 34 | computed: { | ||
| 35 | ...mapGetters(['sidebar', 'avatar', 'name']) | ||
| 36 | }, | ||
| 37 | data () { | ||
| 38 | return { | ||
| 39 | title: defaultSettings.title | ||
| 40 | } | ||
| 41 | }, | ||
| 42 | methods: { | ||
| 43 | handleDataView () { | ||
| 44 | const { href } = this.$router.resolve('/dataView'); | ||
| 45 | window.open(href, '_blank'); | ||
| 46 | }, | 33 | }, |
| 47 | themeChange (val) { | 34 | computed: { |
| 48 | this.$store.dispatch('app/updateTheme', val) | 35 | ...mapGetters(['sidebar', 'avatar', 'name']) |
| 36 | }, | ||
| 37 | data () { | ||
| 38 | return { | ||
| 39 | title: defaultSettings.title | ||
| 40 | } | ||
| 49 | }, | 41 | }, |
| 50 | handleCommand (command) { | 42 | methods: { |
| 51 | if (command == 'a') { | 43 | handleDataView () { |
| 52 | } else { | 44 | const { href } = this.$router.resolve('/dataView'); |
| 45 | window.open(href, '_blank'); | ||
| 46 | }, | ||
| 47 | themeChange (val) { | ||
| 48 | this.$store.dispatch('app/updateTheme', val) | ||
| 49 | }, | ||
| 50 | handleCommand (command) { | ||
| 51 | if (command == 'a') { | ||
| 52 | } else { | ||
| 53 | 53 | ||
| 54 | } | ||
| 54 | } | 55 | } |
| 55 | } | 56 | } |
| 56 | } | 57 | } |
| 57 | } | ||
| 58 | </script> | 58 | </script> |
| 59 | <style lang="scss" scoped> | 59 | <style lang="scss" scoped> |
| 60 | .navbar-con { | 60 | .navbar-con { |
| 61 | position: relative; | 61 | position: relative; |
| 62 | |||
| 63 | .logo { | ||
| 64 | color: #fff; | ||
| 65 | font-size: 26px; | ||
| 66 | font-weight: 700; | ||
| 67 | } | ||
| 68 | } | ||
| 69 | |||
| 70 | .dataView { | ||
| 71 | color: #fff; | ||
| 72 | width: 120px; | ||
| 73 | height: 32px; | ||
| 74 | background: url('../../image/dp.png'); | ||
| 75 | background-size: cover; | ||
| 76 | margin-right: 20px; | ||
| 77 | } | ||
| 78 | |||
| 79 | .NoticeBar { | ||
| 80 | position: absolute; | ||
| 81 | bottom: 0; | ||
| 82 | } | ||
| 83 | |||
| 84 | .el-dropdown-menu { | ||
| 85 | padding: 0 !important; | ||
| 86 | border: 1px solid #EBEEF5; | ||
| 87 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); | ||
| 88 | border-radius: 4px 0 0 4px 4px; | ||
| 89 | |||
| 90 | .el-dropdown-menu__item { | ||
| 91 | text-align: center; | ||
| 92 | margin-top: 0 !important; | ||
| 93 | font-size: 14px; | ||
| 94 | font-family: PingFangSC-Regular, PingFang SC; | ||
| 95 | font-weight: 400; | ||
| 96 | color: #4A4A4A; | ||
| 97 | width: 140px; | ||
| 98 | height: 36px; | ||
| 99 | line-height: 36px; | ||
| 100 | } | ||
| 101 | 62 | ||
| 102 | .el-dropdown-menu__item:nth-child(6) { | 63 | .logo { |
| 103 | border-top: 1px solid #EBEEF5; | 64 | color: #fff; |
| 65 | font-size: 26px; | ||
| 66 | font-weight: 700; | ||
| 67 | } | ||
| 104 | } | 68 | } |
| 105 | 69 | ||
| 106 | .popper__arrow { | 70 | .dataView { |
| 107 | top: -11px !important; | 71 | color: #fff; |
| 108 | left: 110px !important; | 72 | width: 120px; |
| 109 | transform: rotate(0deg) scale(2); | 73 | height: 32px; |
| 74 | background: url("../../image/dp.png"); | ||
| 75 | background-size: cover; | ||
| 76 | margin-right: 20px; | ||
| 110 | } | 77 | } |
| 111 | 78 | ||
| 112 | .el-dropdown-menu__item:not(.is-disabled):hover, | 79 | .NoticeBar { |
| 113 | .el-dropdown-menu__item:focus { | 80 | position: absolute; |
| 114 | background: #F6F7F9; | 81 | bottom: 0; |
| 115 | color: #4A4A4A; | ||
| 116 | } | ||
| 117 | } | ||
| 118 | |||
| 119 | .navbar { | ||
| 120 | height: $headerHeight; | ||
| 121 | overflow: hidden; | ||
| 122 | position: relative; | ||
| 123 | // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色 | ||
| 124 | // box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08); | ||
| 125 | background: #0D1230; | ||
| 126 | display: flex; | ||
| 127 | align-items: center; | ||
| 128 | padding-right: 20px; | ||
| 129 | justify-content: space-between; | ||
| 130 | margin-bottom: 10px; | ||
| 131 | |||
| 132 | .header-logo { | ||
| 133 | width: 300px; | ||
| 134 | } | 82 | } |
| 135 | 83 | ||
| 136 | .backdrop { | 84 | .el-dropdown-menu { |
| 137 | flex: 1; | 85 | padding: 0 !important; |
| 138 | width: 60%; | 86 | border: 1px solid #ebeef5; |
| 139 | background-size: 100% 100%; | 87 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); |
| 140 | height: $headerHeight; | 88 | border-radius: 4px 0 0 4px 4px; |
| 141 | display: flex; | 89 | |
| 142 | align-items: center; | 90 | .el-dropdown-menu__item { |
| 143 | } | 91 | text-align: center; |
| 92 | margin-top: 0 !important; | ||
| 93 | font-size: 14px; | ||
| 94 | font-family: PingFangSC-Regular, PingFang SC; | ||
| 95 | font-weight: 400; | ||
| 96 | color: #4a4a4a; | ||
| 97 | width: 140px; | ||
| 98 | height: 36px; | ||
| 99 | line-height: 36px; | ||
| 100 | } | ||
| 144 | 101 | ||
| 145 | .hamburger-container { | 102 | .el-dropdown-menu__item:nth-child(6) { |
| 146 | line-height: 43px; | 103 | border-top: 1px solid #ebeef5; |
| 147 | height: 100%; | 104 | } |
| 148 | float: left; | ||
| 149 | cursor: pointer; | ||
| 150 | transition: background 0.3s; | ||
| 151 | -webkit-tap-highlight-color: transparent; | ||
| 152 | 105 | ||
| 153 | &:hover { | 106 | .popper__arrow { |
| 154 | background: rgba(0, 0, 0, 0.025); | 107 | top: -11px !important; |
| 108 | left: 110px !important; | ||
| 109 | transform: rotate(0deg) scale(2); | ||
| 155 | } | 110 | } |
| 156 | } | ||
| 157 | 111 | ||
| 158 | .breadcrumb-container { | 112 | .el-dropdown-menu__item:not(.is-disabled):hover, |
| 159 | float: left; | 113 | .el-dropdown-menu__item:focus { |
| 114 | background: #f6f7f9; | ||
| 115 | color: #4a4a4a; | ||
| 116 | } | ||
| 160 | } | 117 | } |
| 161 | 118 | ||
| 162 | .right-menu { | 119 | .navbar { |
| 163 | float: right; | 120 | height: $headerHeight; |
| 164 | height: 100%; | 121 | overflow: hidden; |
| 165 | line-height: 50px; | 122 | position: relative; |
| 123 | // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色 | ||
| 124 | // box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08); | ||
| 125 | background: #0d1230; | ||
| 166 | display: flex; | 126 | display: flex; |
| 167 | align-items: center; | 127 | align-items: center; |
| 128 | padding-right: 20px; | ||
| 129 | justify-content: space-between; | ||
| 130 | margin-bottom: 10px; | ||
| 168 | 131 | ||
| 169 | .function { | 132 | .header-logo { |
| 170 | margin: 0 15px; | 133 | width: 300px; |
| 171 | cursor: pointer; | ||
| 172 | } | 134 | } |
| 173 | 135 | ||
| 174 | .shutdown { | 136 | .backdrop { |
| 175 | font-size: 20px; | 137 | flex: 1; |
| 176 | margin-left: 15px; | 138 | width: 60%; |
| 177 | cursor: pointer; | 139 | background-size: 100% 100%; |
| 178 | } | 140 | height: $headerHeight; |
| 179 | 141 | display: flex; | |
| 180 | .organization-item { | 142 | align-items: center; |
| 181 | margin-right: 40px; | ||
| 182 | margin-top: -40px !important; | ||
| 183 | } | 143 | } |
| 184 | 144 | ||
| 185 | .item { | 145 | .hamburger-container { |
| 186 | margin-right: 40px; | 146 | line-height: 43px; |
| 187 | margin-top: -20px; | 147 | height: 100%; |
| 188 | line-height: 18.4px; | 148 | float: left; |
| 189 | cursor: pointer; | 149 | cursor: pointer; |
| 190 | position: relative; | 150 | transition: background 0.3s; |
| 191 | 151 | -webkit-tap-highlight-color: transparent; | |
| 192 | .item-box { | 152 | |
| 193 | position: absolute; | 153 | &:hover { |
| 194 | top: -5px; | 154 | background: rgba(0, 0, 0, 0.025); |
| 195 | left: 3px; | ||
| 196 | width: 100%; | ||
| 197 | min-width: 25px; | ||
| 198 | height: 25px; | ||
| 199 | cursor: pointer; | ||
| 200 | z-index: 100; | ||
| 201 | } | 155 | } |
| 202 | } | 156 | } |
| 203 | 157 | ||
| 204 | &:focus { | 158 | .breadcrumb-container { |
| 205 | outline: none; | 159 | float: left; |
| 206 | } | 160 | } |
| 207 | 161 | ||
| 208 | .right-menu-item { | 162 | .right-menu { |
| 209 | display: inline-block; | 163 | float: right; |
| 210 | height: 100%; | 164 | height: 100%; |
| 211 | font-size: 18px; | 165 | line-height: 50px; |
| 212 | color: #fff; | 166 | display: flex; |
| 213 | vertical-align: text-bottom; | 167 | align-items: center; |
| 214 | 168 | ||
| 215 | &.hover-effect { | 169 | .function { |
| 170 | margin: 0 15px; | ||
| 216 | cursor: pointer; | 171 | cursor: pointer; |
| 217 | transition: background 0.3s; | 172 | } |
| 218 | display: flex; | ||
| 219 | align-items: center; | ||
| 220 | 173 | ||
| 221 | &:hover { | 174 | .shutdown { |
| 222 | background: rgba(0, 0, 0, 0.025); | 175 | font-size: 20px; |
| 223 | } | 176 | margin-left: 15px; |
| 177 | cursor: pointer; | ||
| 224 | } | 178 | } |
| 225 | } | ||
| 226 | 179 | ||
| 227 | .avatar-wrapper { | 180 | .organization-item { |
| 228 | position: relative; | 181 | margin-right: 40px; |
| 229 | display: flex; | 182 | margin-top: -40px !important; |
| 230 | height: 40px; | 183 | } |
| 231 | align-items: center; | ||
| 232 | 184 | ||
| 233 | .user-avatar { | 185 | .item { |
| 186 | margin-right: 40px; | ||
| 187 | margin-top: -20px; | ||
| 188 | line-height: 18.4px; | ||
| 234 | cursor: pointer; | 189 | cursor: pointer; |
| 235 | width: 35px; | 190 | position: relative; |
| 236 | height: 35px; | 191 | |
| 237 | border-radius: 50%; | 192 | .item-box { |
| 193 | position: absolute; | ||
| 194 | top: -5px; | ||
| 195 | left: 3px; | ||
| 196 | width: 100%; | ||
| 197 | min-width: 25px; | ||
| 198 | height: 25px; | ||
| 199 | cursor: pointer; | ||
| 200 | z-index: 100; | ||
| 201 | } | ||
| 238 | } | 202 | } |
| 239 | 203 | ||
| 240 | .el-icon-caret-bottom { | 204 | &:focus { |
| 241 | cursor: pointer; | 205 | outline: none; |
| 242 | position: absolute; | 206 | } |
| 243 | right: -15px; | 207 | |
| 244 | top: 17px; | 208 | .right-menu-item { |
| 245 | font-size: 12px; | 209 | display: inline-block; |
| 210 | height: 100%; | ||
| 211 | font-size: 18px; | ||
| 212 | color: #fff; | ||
| 213 | vertical-align: text-bottom; | ||
| 214 | |||
| 215 | &.hover-effect { | ||
| 216 | cursor: pointer; | ||
| 217 | transition: background 0.3s; | ||
| 218 | display: flex; | ||
| 219 | align-items: center; | ||
| 220 | |||
| 221 | &:hover { | ||
| 222 | background: rgba(0, 0, 0, 0.025); | ||
| 223 | } | ||
| 224 | } | ||
| 225 | } | ||
| 226 | |||
| 227 | .avatar-wrapper { | ||
| 228 | position: relative; | ||
| 229 | display: flex; | ||
| 230 | height: 40px; | ||
| 231 | align-items: center; | ||
| 232 | |||
| 233 | .user-avatar { | ||
| 234 | cursor: pointer; | ||
| 235 | width: 35px; | ||
| 236 | height: 35px; | ||
| 237 | border-radius: 50%; | ||
| 238 | } | ||
| 239 | |||
| 240 | .el-icon-caret-bottom { | ||
| 241 | cursor: pointer; | ||
| 242 | position: absolute; | ||
| 243 | right: -15px; | ||
| 244 | top: 17px; | ||
| 245 | font-size: 12px; | ||
| 246 | } | ||
| 246 | } | 247 | } |
| 247 | } | 248 | } |
| 248 | } | 249 | } |
| 249 | } | ||
| 250 | </style> | 250 | </style> | ... | ... |
| ... | @@ -14,35 +14,35 @@ | ... | @@ -14,35 +14,35 @@ |
| 14 | </template> | 14 | </template> |
| 15 | 15 | ||
| 16 | <script> | 16 | <script> |
| 17 | import { mapGetters } from 'vuex' | 17 | import { mapGetters } from 'vuex' |
| 18 | import Logo from './Logo' | 18 | import Logo from './Logo' |
| 19 | import defaultSettings from '@/settings' | 19 | import defaultSettings from '@/settings' |
| 20 | import SidebarItem from './SidebarItem' | 20 | import SidebarItem from './SidebarItem' |
| 21 | import variables from '@/styles/variables.scss' | 21 | import variables from '@/styles/variables.scss' |
| 22 | import { asyncRoutes } from '@/router' | 22 | import { asyncRoutes } from '@/router' |
| 23 | export default { | 23 | export default { |
| 24 | components: { SidebarItem, Logo }, | 24 | components: { SidebarItem, Logo }, |
| 25 | data () { | 25 | data () { |
| 26 | return { | 26 | return { |
| 27 | title: defaultSettings.title | 27 | title: defaultSettings.title |
| 28 | } | ||
| 29 | }, | ||
| 30 | computed: { | ||
| 31 | ...mapGetters(['permission_routes', 'sidebar']), | ||
| 32 | activeMenu () { | ||
| 33 | const route = this.$route | ||
| 34 | const { meta, path } = route | ||
| 35 | if (meta.activeMenu) { | ||
| 36 | return meta.activeMenu | ||
| 37 | } | 28 | } |
| 38 | return path | ||
| 39 | }, | ||
| 40 | variables () { | ||
| 41 | return variables | ||
| 42 | }, | 29 | }, |
| 43 | asyncRoutes () { | 30 | computed: { |
| 44 | return asyncRoutes | 31 | ...mapGetters(['permission_routes', 'sidebar']), |
| 32 | activeMenu () { | ||
| 33 | const route = this.$route | ||
| 34 | const { meta, path } = route | ||
| 35 | if (meta.activeMenu) { | ||
| 36 | return meta.activeMenu | ||
| 37 | } | ||
| 38 | return path | ||
| 39 | }, | ||
| 40 | variables () { | ||
| 41 | return variables | ||
| 42 | }, | ||
| 43 | asyncRoutes () { | ||
| 44 | return asyncRoutes | ||
| 45 | } | ||
| 45 | } | 46 | } |
| 46 | } | 47 | } |
| 47 | } | ||
| 48 | </script> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 48 | </script> | ... | ... |
| ... | @@ -199,4 +199,235 @@ | ... | @@ -199,4 +199,235 @@ |
| 199 | box-sizing: border-box; | 199 | box-sizing: border-box; |
| 200 | text-align: right; | 200 | text-align: right; |
| 201 | } | 201 | } |
| 202 | // 修改弹框样式 | ||
| 203 | .modifydialog{ | ||
| 204 | /deep/.el-dialog__header { | ||
| 205 | text-align: center; | ||
| 206 | margin-bottom: 10px; | ||
| 207 | .el-dialog__title { | ||
| 208 | color: white; | ||
| 209 | } | ||
| 210 | } | ||
| 211 | |||
| 212 | /deep/.el-form-item__label { | ||
| 213 | color: white; | ||
| 214 | } | ||
| 215 | /deep/.el-input__inner { | ||
| 216 | background-color: #07388b; | ||
| 217 | } | ||
| 218 | /deep/.el-input__inner { | ||
| 219 | background: #07388b; | ||
| 220 | border-radius: 2px; | ||
| 221 | border: 1px solid #6bc1fc; | ||
| 222 | } | ||
| 223 | /deep/.el-textarea__inner { | ||
| 224 | background: #07388b; | ||
| 225 | color: #fff; | ||
| 226 | } | ||
| 227 | /deep/.el-form-item__label { | ||
| 228 | color: #fff; | ||
| 229 | } | ||
| 230 | /deep/.el-dialog__headerbtn { | ||
| 231 | position: absolute; | ||
| 232 | top: 22px; | ||
| 233 | right: 30px; | ||
| 234 | } | ||
| 235 | /deep/.el-dialog__header { | ||
| 236 | text-align: center; | ||
| 237 | margin-bottom: 10px; | ||
| 238 | .el-dialog__title { | ||
| 239 | color: white; | ||
| 240 | } | ||
| 241 | } | ||
| 242 | } | ||
| 243 | |||
| 244 | // 角色配置 | ||
| 245 | .roleconfiguration{ | ||
| 246 | /deep/.el-dialog__body { | ||
| 247 | display: flex; | ||
| 248 | flex-direction: column; | ||
| 249 | } | ||
| 250 | |||
| 251 | /deep/ .el-tabs { | ||
| 252 | color: #cef8ff; | ||
| 253 | } | ||
| 254 | |||
| 255 | .sjmx { | ||
| 256 | /deep/.el-tabs__item { | ||
| 257 | height: 50px; | ||
| 258 | padding-top: 6px; | ||
| 259 | } | ||
| 260 | } | ||
| 261 | |||
| 262 | /deep/.el-tabs__item { | ||
| 263 | color: #cef8ff !important; | ||
| 264 | |||
| 265 | display: flex; | ||
| 266 | flex-direction: row; | ||
| 267 | justify-content: center; | ||
| 268 | background: url("~@/image/tabitem.png") no-repeat; | ||
| 269 | background-size: 100% 100%; | ||
| 270 | border: none !important; | ||
| 271 | } | ||
| 272 | |||
| 273 | .obligee-item-name { | ||
| 274 | background: #05275b; | ||
| 275 | color: #ffffff; | ||
| 276 | background: url("~@/image/itembg.png") no-repeat; | ||
| 277 | background-size: 100% 100%; | ||
| 278 | } | ||
| 279 | |||
| 280 | /deep/.el-tabs__nav-scroll { | ||
| 281 | background: none; | ||
| 282 | } | ||
| 283 | |||
| 284 | /deep/.el-tabs__nav { | ||
| 285 | display: flex; | ||
| 286 | border: none !important; | ||
| 287 | } | ||
| 288 | |||
| 289 | /deep/.el-tabs__item.is-top { | ||
| 290 | border: 1px solid #dfe4ed; | ||
| 291 | border-top: 1px solid #dfe4ed; | ||
| 292 | border-bottom: 1px solid transparent; | ||
| 293 | } | ||
| 294 | |||
| 295 | /deep/.el-tabs__header { | ||
| 296 | border: none; | ||
| 297 | margin-bottom: 0; | ||
| 298 | } | ||
| 299 | |||
| 300 | /deep/.el-tabs__item.is-top:not(:last-child) { | ||
| 301 | margin-right: 5px; | ||
| 302 | } | ||
| 303 | |||
| 304 | /deep/.el-tabs__item.is-top { | ||
| 305 | background-color: none !important; | ||
| 306 | } | ||
| 307 | |||
| 308 | /deep/.el-tabs__item.is-active { | ||
| 309 | background: url("~@/image/tabitemse.png") no-repeat; | ||
| 310 | background-size: 100% 100%; | ||
| 311 | } | ||
| 312 | |||
| 313 | .success-images { | ||
| 314 | width: 30px; | ||
| 315 | height: 30px; | ||
| 316 | position: relative; | ||
| 317 | top: 10px; | ||
| 318 | right: 3px; | ||
| 319 | } | ||
| 320 | |||
| 321 | .tab-pane-item { | ||
| 322 | line-height: 20px; | ||
| 323 | color: #02d9fd; | ||
| 324 | |||
| 325 | p { | ||
| 326 | text-align: center; | ||
| 327 | } | ||
| 328 | } | ||
| 329 | |||
| 330 | .edit-content { | ||
| 331 | height: 450px; | ||
| 332 | overflow-y: auto; | ||
| 333 | overflow-x: hidden; | ||
| 334 | padding-right: 1px; | ||
| 335 | margin-bottom: 10px; | ||
| 336 | border-top: none; | ||
| 337 | } | ||
| 338 | |||
| 339 | /deep/.editDialogBox { | ||
| 340 | border-radius: 8px; | ||
| 341 | overflow: hidden; | ||
| 342 | min-width: 1228px; | ||
| 343 | height: 825px !important; | ||
| 344 | |||
| 345 | .dialog-from { | ||
| 346 | padding: 13px; | ||
| 347 | border-radius: 2px; | ||
| 348 | box-sizing: border-box; | ||
| 349 | |||
| 350 | .el-row { | ||
| 351 | display: flex; | ||
| 352 | flex-wrap: nowrap; | ||
| 353 | } | ||
| 354 | |||
| 355 | .el-col { | ||
| 356 | line-height: 18px; | ||
| 357 | display: flex; | ||
| 358 | align-items: center; | ||
| 359 | margin-bottom: 3px; | ||
| 360 | color: #b5d6dc; | ||
| 361 | border-radius: 2px; | ||
| 362 | border: 1px solid #224c7c; | ||
| 363 | margin: 5px; | ||
| 364 | |||
| 365 | span { | ||
| 366 | display: inline-block; | ||
| 367 | padding: 3px; | ||
| 368 | border-radius: 3px; | ||
| 369 | overflow: hidden; | ||
| 370 | white-space: nowrap; | ||
| 371 | text-align: left; | ||
| 372 | color: #02d9fd; | ||
| 373 | } | ||
| 374 | |||
| 375 | p { | ||
| 376 | flex: 1; | ||
| 377 | width: 100%; | ||
| 378 | padding-left: 5px; | ||
| 379 | line-height: 20px; | ||
| 380 | color: #c0c4cc; | ||
| 381 | cursor: not-allowed; | ||
| 382 | white-space: nowrap; | ||
| 383 | margin-right: 5px; | ||
| 384 | text-align: right; | ||
| 385 | } | ||
| 386 | } | ||
| 387 | } | ||
| 388 | |||
| 389 | .dialog_title { | ||
| 390 | display: flex; | ||
| 391 | position: relative; | ||
| 392 | font-size: 24px; | ||
| 393 | top: -11px; | ||
| 394 | width: 38%; | ||
| 395 | height: 40px; | ||
| 396 | margin-left: 28px; | ||
| 397 | justify-content: center; | ||
| 398 | } | ||
| 399 | |||
| 400 | .el-dialog__header { | ||
| 401 | display: flex; | ||
| 402 | margin-bottom: 15px; | ||
| 403 | } | ||
| 404 | .el-dialog__footer { | ||
| 405 | padding-right: 40px; | ||
| 406 | } | ||
| 407 | |||
| 408 | .divider { | ||
| 409 | width: 100%; | ||
| 410 | border-bottom: 1px solid #ccc; | ||
| 411 | } | ||
| 412 | } | ||
| 413 | |||
| 414 | .el-dialog__wrapper { | ||
| 415 | overflow: hidden; | ||
| 416 | } | ||
| 417 | /deep/.el-table { | ||
| 418 | background: none; | ||
| 419 | th.el-table__cell { | ||
| 420 | background-color: #073781; | ||
| 421 | color: #02d9fd; | ||
| 422 | } | ||
| 423 | tr { | ||
| 424 | background: none; | ||
| 425 | |||
| 426 | td { | ||
| 427 | color: white; | ||
| 428 | } | ||
| 429 | } | ||
| 430 | } | ||
| 431 | |||
| 432 | } | ||
| 202 | 433 | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <Dialog | 3 | <Dialog |
| 4 | class="modifydialog" | ||
| 4 | :title="title" | 5 | :title="title" |
| 5 | :show.sync="visible" | 6 | :show.sync="visible" |
| 6 | :width="'767px'" | 7 | :width="'767px'" |
| ... | @@ -258,19 +259,5 @@ | ... | @@ -258,19 +259,5 @@ |
| 258 | } | 259 | } |
| 259 | </script> | 260 | </script> |
| 260 | <style scoped lang="scss"> | 261 | <style scoped lang="scss"> |
| 261 | /deep/.el-dialog__header { | 262 | @import "~@/styles/public.scss"; |
| 262 | text-align: center; | ||
| 263 | margin-bottom: 10px; | ||
| 264 | .el-dialog__title { | ||
| 265 | color: white; | ||
| 266 | } | ||
| 267 | } | ||
| 268 | |||
| 269 | /deep/.el-form-item__label { | ||
| 270 | color: white; | ||
| 271 | } | ||
| 272 | /deep/.el-input__inner { | ||
| 273 | background-color: #07388b; | ||
| 274 | } | ||
| 275 | |||
| 276 | </style> | 263 | </style> | ... | ... |
| 1 | <!-- 新增 & 修改角色 --> | 1 | <!-- 新增 & 修改角色 --> |
| 2 | <template> | 2 | <template> |
| 3 | <Dialog | 3 | <Dialog |
| 4 | class="modifydialog" | ||
| 4 | :title="dialogTitle" | 5 | :title="dialogTitle" |
| 5 | :show.sync="showAddEditDialog" | 6 | :show.sync="showAddEditDialog" |
| 6 | :width="'767px'" | 7 | :width="'767px'" |
| ... | @@ -160,28 +161,4 @@ | ... | @@ -160,28 +161,4 @@ |
| 160 | } | 161 | } |
| 161 | </script> | 162 | </script> |
| 162 | <style scoped lang="scss"> | 163 | <style scoped lang="scss"> |
| 163 | /deep/.el-input__inner { | ||
| 164 | background: #07388b; | ||
| 165 | border-radius: 2px; | ||
| 166 | border: 1px solid #6bc1fc; | ||
| 167 | } | ||
| 168 | /deep/.el-textarea__inner { | ||
| 169 | background: #07388b; | ||
| 170 | color: #fff; | ||
| 171 | } | ||
| 172 | /deep/.el-form-item__label { | ||
| 173 | color: #fff; | ||
| 174 | } | ||
| 175 | /deep/.el-dialog__headerbtn { | ||
| 176 | position: absolute; | ||
| 177 | top: 15px; | ||
| 178 | right: 30px; | ||
| 179 | } | ||
| 180 | /deep/.el-dialog__header { | ||
| 181 | text-align: center; | ||
| 182 | margin-bottom: 10px; | ||
| 183 | .el-dialog__title { | ||
| 184 | color: white; | ||
| 185 | } | ||
| 186 | } | ||
| 187 | </style> | 164 | </style> | ... | ... |
| ... | @@ -3,6 +3,7 @@ | ... | @@ -3,6 +3,7 @@ |
| 3 | :close-on-click-modal="false" | 3 | :close-on-click-modal="false" |
| 4 | top="0" | 4 | top="0" |
| 5 | @click="close()" | 5 | @click="close()" |
| 6 | class="roleconfiguration" | ||
| 6 | custom-class="dialogBox editDialogBox mainCenter" | 7 | custom-class="dialogBox editDialogBox mainCenter" |
| 7 | :visible.sync="visible" | 8 | :visible.sync="visible" |
| 8 | width="85%"> | 9 | width="85%"> |
| ... | @@ -417,210 +418,4 @@ | ... | @@ -417,210 +418,4 @@ |
| 417 | <style scoped lang="scss"> | 418 | <style scoped lang="scss"> |
| 418 | @import "~@/styles/mixin.scss"; | 419 | @import "~@/styles/mixin.scss"; |
| 419 | @import "~@/styles/dialogBox.scss"; | 420 | @import "~@/styles/dialogBox.scss"; |
| 420 | |||
| 421 | .editForm { | ||
| 422 | /deep/.el-textarea__inner { | ||
| 423 | border: 1px solid #224c7c !important; | ||
| 424 | margin: 0 0 10px 0 !important; | ||
| 425 | width: 100% !important; | ||
| 426 | color: #dadde3 !important; | ||
| 427 | background: transparent !important; | ||
| 428 | } | ||
| 429 | |||
| 430 | /deep/.el-input__inner { | ||
| 431 | border: 1px solid #224c7c !important; | ||
| 432 | margin: 0 !important; | ||
| 433 | width: 100% !important; | ||
| 434 | color: #dadde3 !important; | ||
| 435 | background: transparent !important; | ||
| 436 | } | ||
| 437 | } | ||
| 438 | |||
| 439 | /deep/.el-dialog__body { | ||
| 440 | display: flex; | ||
| 441 | flex-direction: column; | ||
| 442 | } | ||
| 443 | |||
| 444 | /deep/ .el-tabs { | ||
| 445 | color: #cef8ff; | ||
| 446 | } | ||
| 447 | |||
| 448 | .sjmx { | ||
| 449 | /deep/.el-tabs__item { | ||
| 450 | height: 50px; | ||
| 451 | padding-top: 6px; | ||
| 452 | } | ||
| 453 | } | ||
| 454 | |||
| 455 | /deep/.el-tabs__item { | ||
| 456 | color: #cef8ff !important; | ||
| 457 | |||
| 458 | display: flex; | ||
| 459 | flex-direction: row; | ||
| 460 | justify-content: center; | ||
| 461 | background: url("~@/image/tabitem.png") no-repeat; | ||
| 462 | background-size: 100% 100%; | ||
| 463 | border: none !important; | ||
| 464 | } | ||
| 465 | |||
| 466 | .obligee-item-name { | ||
| 467 | background: #05275b; | ||
| 468 | color: #ffffff; | ||
| 469 | background: url("~@/image/itembg.png") no-repeat; | ||
| 470 | background-size: 100% 100%; | ||
| 471 | } | ||
| 472 | |||
| 473 | /deep/.el-tabs__nav-scroll { | ||
| 474 | background: none; | ||
| 475 | } | ||
| 476 | |||
| 477 | /deep/.el-tabs__nav { | ||
| 478 | display: flex; | ||
| 479 | border: none !important; | ||
| 480 | } | ||
| 481 | |||
| 482 | /deep/.el-tabs__item.is-top { | ||
| 483 | border: 1px solid #dfe4ed; | ||
| 484 | border-top: 1px solid #dfe4ed; | ||
| 485 | border-bottom: 1px solid transparent; | ||
| 486 | } | ||
| 487 | |||
| 488 | /deep/.el-tabs__header { | ||
| 489 | border: none; | ||
| 490 | margin-bottom: 0; | ||
| 491 | } | ||
| 492 | |||
| 493 | /deep/.el-tabs__item.is-top:not(:last-child) { | ||
| 494 | margin-right: 5px; | ||
| 495 | } | ||
| 496 | |||
| 497 | /deep/.el-tabs__item.is-top { | ||
| 498 | background-color: none !important; | ||
| 499 | } | ||
| 500 | |||
| 501 | /deep/.el-tabs__item.is-active { | ||
| 502 | background: url("~@/image/tabitemse.png") no-repeat; | ||
| 503 | background-size: 100% 100%; | ||
| 504 | } | ||
| 505 | |||
| 506 | .success-images { | ||
| 507 | width: 30px; | ||
| 508 | height: 30px; | ||
| 509 | position: relative; | ||
| 510 | top: 10px; | ||
| 511 | right: 3px; | ||
| 512 | } | ||
| 513 | |||
| 514 | .tab-pane-item { | ||
| 515 | line-height: 20px; | ||
| 516 | color: #02d9fd; | ||
| 517 | |||
| 518 | p { | ||
| 519 | text-align: center; | ||
| 520 | } | ||
| 521 | } | ||
| 522 | |||
| 523 | .edit-content { | ||
| 524 | height: 450px; | ||
| 525 | overflow-y: auto; | ||
| 526 | overflow-x: hidden; | ||
| 527 | padding-right: 1px; | ||
| 528 | margin-bottom: 10px; | ||
| 529 | border-top: none; | ||
| 530 | } | ||
| 531 | |||
| 532 | /deep/.editDialogBox { | ||
| 533 | border-radius: 8px; | ||
| 534 | overflow: hidden; | ||
| 535 | min-width: 1228px; | ||
| 536 | height: 825px !important; | ||
| 537 | |||
| 538 | .dialog-from { | ||
| 539 | padding: 13px; | ||
| 540 | border-radius: 2px; | ||
| 541 | box-sizing: border-box; | ||
| 542 | |||
| 543 | .el-row { | ||
| 544 | display: flex; | ||
| 545 | flex-wrap: nowrap; | ||
| 546 | } | ||
| 547 | |||
| 548 | .el-col { | ||
| 549 | line-height: 18px; | ||
| 550 | display: flex; | ||
| 551 | align-items: center; | ||
| 552 | margin-bottom: 3px; | ||
| 553 | color: #b5d6dc; | ||
| 554 | border-radius: 2px; | ||
| 555 | border: 1px solid #224c7c; | ||
| 556 | margin: 5px; | ||
| 557 | |||
| 558 | span { | ||
| 559 | display: inline-block; | ||
| 560 | padding: 3px; | ||
| 561 | border-radius: 3px; | ||
| 562 | overflow: hidden; | ||
| 563 | white-space: nowrap; | ||
| 564 | text-align: left; | ||
| 565 | color: #02d9fd; | ||
| 566 | } | ||
| 567 | |||
| 568 | p { | ||
| 569 | flex: 1; | ||
| 570 | width: 100%; | ||
| 571 | padding-left: 5px; | ||
| 572 | line-height: 20px; | ||
| 573 | color: #c0c4cc; | ||
| 574 | cursor: not-allowed; | ||
| 575 | white-space: nowrap; | ||
| 576 | margin-right: 5px; | ||
| 577 | text-align: right; | ||
| 578 | } | ||
| 579 | } | ||
| 580 | } | ||
| 581 | |||
| 582 | .dialog_title { | ||
| 583 | display: flex; | ||
| 584 | position: relative; | ||
| 585 | font-size: 24px; | ||
| 586 | top: -11px; | ||
| 587 | width: 38%; | ||
| 588 | height: 40px; | ||
| 589 | margin-left: 28px; | ||
| 590 | justify-content: center; | ||
| 591 | } | ||
| 592 | |||
| 593 | .el-dialog__header { | ||
| 594 | display: flex; | ||
| 595 | margin-bottom: 15px; | ||
| 596 | } | ||
| 597 | .el-dialog__footer { | ||
| 598 | padding-right: 40px; | ||
| 599 | } | ||
| 600 | |||
| 601 | .divider { | ||
| 602 | width: 100%; | ||
| 603 | border-bottom: 1px solid #ccc; | ||
| 604 | } | ||
| 605 | } | ||
| 606 | |||
| 607 | .el-dialog__wrapper { | ||
| 608 | overflow: hidden; | ||
| 609 | } | ||
| 610 | /deep/.el-table { | ||
| 611 | background: none; | ||
| 612 | th.el-table__cell { | ||
| 613 | background-color: #073781; | ||
| 614 | color: #02d9fd; | ||
| 615 | } | ||
| 616 | tr { | ||
| 617 | background: none; | ||
| 618 | |||
| 619 | td { | ||
| 620 | color: white; | ||
| 621 | } | ||
| 622 | } | ||
| 623 | } | ||
| 624 | |||
| 625 | // #08346F !important; | ||
| 626 | </style> | 421 | </style> | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <Dialog :title="title" :show.sync="visible" :width="'715px'" @close="close()"> | 2 | <Dialog :title="title" class="modifydialog" :show.sync="visible" :width="'715px'" @close="close()"> |
| 3 | <template slot="content"> | 3 | <template slot="content"> |
| 4 | <el-form ref="form" :model="form" :rules="rules"> | 4 | <el-form ref="form" :model="form" :rules="rules"> |
| 5 | <el-row :gutter="24"> | 5 | <el-row :gutter="24"> |
| ... | @@ -218,26 +218,4 @@ | ... | @@ -218,26 +218,4 @@ |
| 218 | }; | 218 | }; |
| 219 | </script> | 219 | </script> |
| 220 | <style scoped lang="scss"> | 220 | <style scoped lang="scss"> |
| 221 | /deep/.el-input__inner { | ||
| 222 | background: #07388b; | ||
| 223 | border-radius: 2px; | ||
| 224 | border: 1px solid #6bc1fc; | ||
| 225 | } | ||
| 226 | /deep/.el-textarea__inner { | ||
| 227 | background: #07388b; | ||
| 228 | color: #fff; | ||
| 229 | } | ||
| 230 | /deep/.el-form-item__label { | ||
| 231 | color: #fff; | ||
| 232 | } | ||
| 233 | /deep/.el-dialog__body { | ||
| 234 | padding-top: 20px; | ||
| 235 | } | ||
| 236 | /deep/.el-dialog__header { | ||
| 237 | text-align: center; | ||
| 238 | margin-bottom: 10px; | ||
| 239 | .el-dialog__title { | ||
| 240 | color: white; | ||
| 241 | } | ||
| 242 | } | ||
| 243 | </style> | 221 | </style> | ... | ... |
src/views/system/users/index.scss
0 → 100644
| ... | @@ -307,7 +307,5 @@ | ... | @@ -307,7 +307,5 @@ |
| 307 | <style scoped lang="scss"> | 307 | <style scoped lang="scss"> |
| 308 | @import "~@/styles/mixin.scss"; | 308 | @import "~@/styles/mixin.scss"; |
| 309 | @import "~@/styles/public.scss"; | 309 | @import "~@/styles/public.scss"; |
| 310 | .btnColRight { | 310 | @import "./index.scss"; |
| 311 | margin-top: 20px; | ||
| 312 | } | ||
| 313 | </style> | 311 | </style> | ... | ... |
-
Please register or sign in to post a comment