From 5672f352d0ba114e2ae96c8cefad6c74ae6d2934 Mon Sep 17 00:00:00 2001 From: unknown <280848880@qq.com> Date: 星期一, 23 十月 2023 10:38:28 +0800 Subject: [PATCH] 苏州-web:智能安全帽提交 --- web/src/style/layout-main.scss | 959 +++++++++++++++++++++++++++++++---------------------------- 1 files changed, 496 insertions(+), 463 deletions(-) diff --git a/web/src/style/layout-main.scss b/web/src/style/layout-main.scss index 3eb82ea..e6479f6 100644 --- a/web/src/style/layout-main.scss +++ b/web/src/style/layout-main.scss @@ -1,464 +1,497 @@ -// 页面主体样式 -.main { - position: absolute; - display: flex; - flex-direction: column; - width: calc(100% - 30px); - height: calc(100% - 30px); - border-radius: 4px; - background: url('~@/assets/main-bg.png') no-repeat; - background-size: 100% 100%; - // background: linear-gradient(170deg, rgba(14, 54, 120, .3) 20%, #0E3678 35%, rgba(14, 54, 120, .3) 55%); - box-shadow: 0 2px 12px 0 rgba(57, 181, 254, 0.6); - - // - .main_tabs { - padding: 20px 0 10px; - - /deep/ .el-tabs__nav-wrap { - padding: 0 20px; - font-size: 20px; - - &::after { - height: 1px; - background-color: #1B428F; - } - } - - /deep/ .el-tabs__active-bar { - background-color: #39B5FE; - } - } - - // 主体头部样式 - .main_header { - display: flex; - margin: 9px 24px 24px; - font-size: 1rem; - flex-wrap: wrap; - - .header_item { - display: flex; - align-items: center; - margin-right: 24px; - margin-top: 15px; - } - - .header_label { - color: #EAEAEA; - white-space: nowrap; - text-align: right; - // min-width: 100px; - } - } - - // - .main_functional { - display: flex; - margin: 10px 10px 20px; - } - - // 主体内容样式 - .main_content { - position: relative; - flex: 1; - margin: 0 24px; - overflow: hidden; - } - - // 主体底部样式 - .main_footer { - height: 50px; - margin: 10px; - text-align: right; - margin-top: 35px; - ::v-deep.el-input__inner{ - border:1px solid #294366; - background-color: #102448; - } - ::v-deep .el-pagination__jump{ - color: #bfbfbf; - } - } - - ::v-deep .search_btn { - border: 0 none; - color: #fff; - background: url('~@/assets/search_bg.png') no-repeat; - background-size: 100% 100%; - &:hover { - color: #F69C42; - } - } - - ::v-deep .table_btn { - border: 0 none; - color: #39B5FE; - background: url('~@/assets/table_btn.png') no-repeat; - background-size: 100% 100%; - &:hover { - color: rgba($color: #39B5FE, $alpha: .7); - } - } - - ::v-deep .delete_btn { - border: 0 none; - color: #F94550; - background: url('~@/assets/error_btn.png') no-repeat; - background-size: 100% 100%; - &:hover { - color: rgba($color: #F94550, $alpha: .7); - } - } - - ::v-deep .el-tabs__item { - color: #fff; - } - ::v-deep .el-loading-mask { - background-color: rgba($color: #132a5c, $alpha: .8); - } - ::v-deep .el-tabs__item.is-active { - color: #39B5FE; - } - ::v-deep .el-tabs__active-bar { - background-color: #39B5FE; - } - ::v-deep .el-tabs__nav-wrap::after { - background-color: #1c50ae; - } - ::v-deep .el-table { - background: transparent - } - ::v-deep .el-input__inner { - border: 1px solid #39B5FE; - background-color: transparent; - color: #fff; - } - ::v-deep .el-textarea__inner { - color: #fff; - background-color: transparent; - border: 1px solid #39B5FE; - } - ::v-deep .el-dialog__body .el-input__inner { - background-color: transparent; - border: 1px solid rgba(57, 181, 254, 1); - color: #fff; - } - ::v-deep .el-table tr { - background: transparent; - } - ::v-deep .el-table__expand-icon { - color: #22fffe; - } - ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { - background: rgba($color: #34AFED, $alpha: .5); - } - ::v-deep .el-table .warning-row { - background: transparent; - } - ::v-deep .el-table .success-row { - background: #031a46; - } - ::v-deep .el-table__body .el-table__row.hover-row td { - background-color: #0d3271; - } - ::v-deep .el-date-editor .el-range-input { - background-color: #0b2f66; - color: #fff; - } - ::v-deep .el-table tr { - &:nth-of-type(even) { - background: linear-gradient( - 90deg, - transparent 3%, - rgba(57, 166, 254, 0.4) 55%, - transparent 95%); - } - } - ::v-deep .el-date-editor .el-range-separator { - // color: #606266; - color: #fff; - } - ::v-deep .el-upload--picture-card { - background-color: #0b2c64; - border-color: #39B5FE; - } - ::v-deep .el-radio { - padding-bottom: 16px; - color: #fff; - } - ::v-deep .el-radio__inner { - border-color: #39B5FE; - background-color: #061c48; - } - ::v-deep .el-input-group__append, - .el-input-group__prepend { - background-color: #0B2559; - border-color: #39B5FE; - color: #fff; - padding: 0 10px; - } - /deep/.el-date-editor .el-range-input{ - background-color: transparent; - } -} - -// 列表按钮侧边竖线 -.line { - position: relative; - - &::before { - content: ""; - position: absolute; - top: 50%; - right: -6px; - transform: translateY(-50%); - width: 1px; - height: 40%; - background-color: #eaeaea; - } -} -.preview_dialog{ - ::v-deep .el-dialog__headerbtn{ - font-size: 24px!important; - } -} - -.scan_dialog{ - ::v-deep .el-dialog{ - min-width: 200px!important; - margin-top: 30vh!important; - } - ::v-deep .el-dialog__header{ - padding-bottom: 10px!important; - } - ::v-deep .el-dialog__body{ - padding: 10px 10px 26px!important; - } -} -// 弹出框标题蓝线 -.prop_dialog { - ::v-deep .el-dialog__header { - position: relative; - padding: 20px 20px 20px 24px; - } - - ::v-deep .el-dialog__headerbtn .el-dialog__close { - color: #BFBFBF; - } - - ::v-deep .el-dialog__body { - padding: 30px 10px 10px 24px; - } - ::v-deep .el-dialog__title { - color: #39B5FE; - font-weight: 600; - } - ::v-deep .el-dialog__footer { - padding: 20px 20px 20px; - } - .submit_btn { - border: 0 none; - color: #39B5FE; - background: url('~@/assets/submit_bg.png') no-repeat; - background-size: 100% 100%; - &:hover { - color: #39B5FE; - } - } -} - -// form表单样式 -.rule_form { - padding-right: 15px; - max-height: 550px; - overflow-y: auto; - - ::v-deep .el-select { - width: 100%; - } - ::v-deep .el-date-editor.el-input, - .el-date-editor.el-input__inner { - width: 100%; - color: #fff; - background-color: #102351; - } - ::v-deep.el-form-item__label-wrap .el-form-item__label { - color: #fff; - } - .text_ranage { - width: 210px; - padding: 0px 15px; - margin-left: 15px; - background-color: #102351; - color: #fff; - } - ::v-deep .el-form-item__label { - color: #fff; - } - ::v-deep .el-form-item__content { - display: flex; - flex-direction: row; - .marks_text { - margin-left: 20px; - padding: 0px 10px; - width: 18rem; - border: 1px solid #deeaff; - background-color: #deeaff; - - .el-icon-time:before { - color: #2c77ff; - padding-right: 10px; - } - } - .el-switch { - padding-top: 15px; - } - } - ::v-deep .el-textarea__inner { - font-family: Avenir, Helvetica, Arial, sans-serif; - background-color: #102351; - } - - ::v-deep .el-cascader { - width: 100%; - } - ::v-deep .el-input-number { - width: 100%; - } - ::v-deep .el-input-number .el-input__inner { - text-align: left; - background-color: #102351; - } -} - -.tabs_main { - margin: 0; - width: 100%; - height: 100%; - box-shadow: none; -} - -/deep/ .el-textarea__inner{ - background-color: transparent; - border: 1px solid #39B5FE; -} -.inspection_content { - display: flex; - flex-direction: column; - padding: 0 20px; - height: 500px; - overflow: auto; - - .inspection_content_item { - display: flex; - flex-direction: column; - margin-bottom: 20px; - width: 100%; - color: #E1E3E9; - - .inspection_content_item--header { - position: relative; - display: flex; - justify-content: space-between; - padding: 0 0 5px 15px; - border-bottom: 1px solid #39B5FE; - - &::after { - content: ""; - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - width: 3px; - height: 70%; - background: #19F7F7; - } - - .label { - color: #19F7F7; - } - } - - .inspection_content_item--content { - display: flex; - flex-direction: column; - padding: 10px 0; - - .info_image { - margin: 10px 0; - width: 150px; - height: 140px; - border: 1px solid #39B5FE; - border-radius: 6px; - cursor: pointer; - } - } - } -} - -.prop_image { - padding: 0 15px 20px 0; - width: 100%; - height: 450px; - background: transparent; -} -//预览按钮样式 -.preview_content{ - padding: 24px 20px; - box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.06); - .preview_titles{ - text-align: center; - font-size: 28px; - font-weight: 600; - color: #39B5FE; - } - .preview_times{ - text-align: center; - font-size: 14px; - color: #999999; - margin-top: 15px; - padding-bottom: 15px; - border-bottom: 1px dashed #eaeaea; - } - .preview_main{ - padding: 24px 20px 0px; - overflow: auto; - } -} - -/deep/.el-dialog.is-fullscreen{ - overflow-x: hidden; - overflow-y: auto; - width: 64%; - height: 92%; - margin-top: 40px; - background: #f6f6f6!important; -} - -/deep/.el-input-number__decrease{ - border-right-color: #39B5FE; - .el-icon-minus:before{ - color: #19F6F8; - } -} - -/deep/.el-input-number__increase{ - border-left-color: #39B5FE; - .el-icon-plus:before{ - color: #19F6F8; - } -} - -/deep/.el-input-number__increase{ - background-color: transparent; -} - -/deep/.el-input-number__decrease{ - background-color: transparent; -} - -/deep/.el-textarea.is-disabled .el-textarea__inner{ - background-color: #0D2657; - border-color: #39B5FE; +// 页面主体样式 +.main { + position: absolute; + display: flex; + flex-direction: column; + width: calc(100% - 30px); + height: calc(100% - 30px); + border-radius: 4px; + background: url('~@/assets/main-bg.png') no-repeat; + background-size: 100% 100%; + // background: linear-gradient(170deg, rgba(14, 54, 120, .3) 20%, #0E3678 35%, rgba(14, 54, 120, .3) 55%); + box-shadow: 0 2px 12px 0 rgba(57, 181, 254, 0.6); + + // + .main_tabs { + padding: 20px 0 10px; + + /deep/ .el-tabs__nav-wrap { + padding: 0 20px; + font-size: 20px; + + &::after { + height: 1px; + background-color: #1B428F; + } + } + + /deep/ .el-tabs__active-bar { + background-color: #39B5FE; + } + } + + // 主体头部样式 + .main_header { + display: flex; + margin: 9px 24px 24px; + font-size: 1rem; + flex-wrap: wrap; + + .header_item { + display: flex; + align-items: center; + margin-right: 24px; + margin-top: 15px; + } + + .header_label { + color: #EAEAEA; + white-space: nowrap; + text-align: right; + // min-width: 100px; + } + } + + // + .main_functional { + display: flex; + margin: 10px 10px 20px; + } + + // 主体内容样式 + .main_content { + position: relative; + flex: 1; + margin: 0 24px; + overflow: hidden; + } + + // 主体底部样式 + .main_footer { + height: 50px; + margin: 10px; + text-align: right; + margin-top: 35px; + ::v-deep.el-input__inner{ + border:1px solid #294366; + background-color: #102448; + } + ::v-deep .el-pagination__jump{ + color: #bfbfbf; + } + } + + ::v-deep .search_btn { + border: 0 none; + color: #fff; + background: url('~@/assets/search_bg.png') no-repeat; + background-size: 100% 100%; + &:hover { + color: #F69C42; + } + } + + ::v-deep .table_btn { + border: 0 none; + color: #39B5FE; + background: url('~@/assets/table_btn.png') no-repeat; + background-size: 100% 100%; + &:hover { + color: rgba($color: #39B5FE, $alpha: .7); + } + } + + ::v-deep .delete_btn { + border: 0 none; + color: #F94550; + background: url('~@/assets/error_btn.png') no-repeat; + background-size: 100% 100%; + &:hover { + color: rgba($color: #F94550, $alpha: .7); + } + } + + ::v-deep .el-checkbox__inner { + border: 1px solid #3DC8FF; + background-color: transparent; + &::after{ + border: 1px solid #3DC8FF; + border-left: 0; + border-top: 0; + } + } + ::v-deep .el-tabs__item { + color: #fff; + } + ::v-deep .el-loading-mask { + background-color: rgba($color: #132a5c, $alpha: .8); + } + ::v-deep .el-tabs__item.is-active { + color: #39B5FE; + } + ::v-deep .el-tabs__active-bar { + background-color: #39B5FE; + } + ::v-deep .el-tabs__nav-wrap::after { + background-color: #1c50ae; + } + ::v-deep .el-table { + background: transparent + } + ::v-deep .el-input__inner { + border: 1px solid #39B5FE; + background-color: transparent; + color: #fff; + } + ::v-deep .el-textarea__inner { + color: #fff; + background-color: transparent; + border: 1px solid #39B5FE; + } + ::v-deep .el-dialog__body .el-input__inner { + background-color: transparent; + border: 1px solid rgba(57, 181, 254, 1); + color: #fff; + } + ::v-deep .el-table tr { + background: transparent; + } + ::v-deep .el-table__expand-icon { + color: #22fffe; + } + ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { + background: rgba($color: #34AFED, $alpha: .5); + } + ::v-deep .el-table .warning-row { + background: transparent; + } + ::v-deep .el-table .success-row { + background: #031a46; + } + ::v-deep .el-table__body .el-table__row.hover-row td { + background-color: #0d3271; + } + ::v-deep .el-date-editor .el-range-input { + background-color: #0b2f66; + color: #fff; + } + ::v-deep .el-table tr { + &:nth-of-type(even) { + background: linear-gradient( + 90deg, + transparent 3%, + rgba(57, 166, 254, 0.4) 55%, + transparent 95%); + } + } + ::v-deep .el-date-editor .el-range-separator { + // color: #606266; + color: #fff; + } + ::v-deep .el-upload--picture-card { + background-color: #0b2c64; + border-color: #39B5FE; + } + ::v-deep .el-radio { + padding-bottom: 16px; + color: #fff; + } + ::v-deep .el-radio__inner { + border-color: #39B5FE; + background-color: #061c48; + } + ::v-deep .el-input-group__append, + .el-input-group__prepend { + background-color: #0B2559; + border-color: #39B5FE; + color: #fff; + padding: 0 10px; + } + /deep/.el-date-editor .el-range-input{ + background-color: transparent; + } +} + +// 列表按钮侧边竖线 +.line { + position: relative; + + &::before { + content: ""; + position: absolute; + top: 50%; + right: -6px; + transform: translateY(-50%); + width: 1px; + height: 40%; + background-color: #eaeaea; + } +} +.preview_dialog{ + ::v-deep .el-dialog__headerbtn{ + font-size: 24px!important; + } +} + +.scan_dialog{ + ::v-deep .el-dialog{ + min-width: 200px!important; + margin-top: 30vh!important; + } + ::v-deep .el-dialog__header{ + padding-bottom: 10px!important; + } + ::v-deep .el-dialog__body{ + padding: 10px 10px 26px!important; + } +} +// 弹出框标题蓝线 +.prop_dialog { + ::v-deep .el-dialog__header { + position: relative; + padding: 20px 20px 20px 24px; + } + + ::v-deep .el-dialog__headerbtn .el-dialog__close { + color: #BFBFBF; + } + + ::v-deep .el-dialog__body { + padding: 30px 10px 10px 24px; + } + ::v-deep .el-dialog__title { + color: #39B5FE; + font-weight: 600; + } + ::v-deep .el-dialog__footer { + padding: 20px 20px 20px; + } + .submit_btn { + border: 0 none; + color: #39B5FE; + background: url('~@/assets/submit_bg.png') no-repeat; + background-size: 100% 100%; + &:hover { + color: #39B5FE; + } + } +} + +// form表单样式 +.rule_form { + padding-right: 15px; + max-height: 550px; + overflow-y: auto; + + ::v-deep .el-select { + width: 100%; + } + ::v-deep .el-date-editor.el-input, + .el-date-editor.el-input__inner { + width: 100%; + color: #fff; + background-color: #102351; + } + ::v-deep.el-form-item__label-wrap .el-form-item__label { + color: #fff; + } + .text_ranage { + width: 210px; + padding: 0px 15px; + margin-left: 15px; + background-color: #102351; + color: #fff; + } + ::v-deep .el-form-item__label { + color: #fff; + } + ::v-deep .el-form-item__content { + display: flex; + flex-direction: row; + .marks_text { + margin-left: 20px; + padding: 0px 10px; + width: 18rem; + border: 1px solid #deeaff; + background-color: #deeaff; + + .el-icon-time:before { + color: #2c77ff; + padding-right: 10px; + } + } + .el-switch { + padding-top: 15px; + } + } + ::v-deep .el-textarea__inner { + font-family: Avenir, Helvetica, Arial, sans-serif; + background-color: #102351; + } + + ::v-deep .el-cascader { + width: 100%; + } + ::v-deep .el-input-number { + width: 100%; + } + ::v-deep .el-input-number .el-input__inner { + text-align: left; + background-color: #102351; + } +} + +.tabs_main { + margin: 0; + width: 100%; + height: 100%; + box-shadow: none; +} + +/deep/ .el-textarea__inner{ + background-color: transparent; + border: 1px solid #39B5FE; +} +.inspection_content { + display: flex; + flex-direction: column; + padding: 0 20px; + height: 500px; + overflow: auto; + + .inspection_content_item { + display: flex; + flex-direction: column; + margin-bottom: 20px; + width: 100%; + color: #E1E3E9; + + .inspection_content_item--header { + position: relative; + display: flex; + justify-content: space-between; + padding: 0 0 5px 15px; + border-bottom: 1px solid #39B5FE; + + &::after { + content: ""; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 3px; + height: 70%; + background: #19F7F7; + } + + .label { + color: #19F7F7; + } + } + + .inspection_content_item--content { + display: flex; + flex-direction: column; + padding: 10px 0; + + .info_image { + margin: 10px 0; + width: 150px; + height: 140px; + border: 1px solid #39B5FE; + border-radius: 6px; + cursor: pointer; + } + } + } +} + +.prop_image { + padding: 0 15px 20px 0; + width: 100%; + height: 450px; + background: transparent; +} +//预览按钮样式 +.preview_content{ + padding: 24px 20px; + box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.06); + .preview_titles{ + text-align: center; + font-size: 28px; + font-weight: 600; + color: #39B5FE; + } + .preview_times{ + text-align: center; + font-size: 14px; + color: #999999; + margin-top: 15px; + padding-bottom: 15px; + border-bottom: 1px dashed #eaeaea; + } + .preview_main{ + padding: 24px 20px 0px; + overflow: auto; + } +} + +/deep/.el-dialog.is-fullscreen{ + overflow-x: hidden; + overflow-y: auto; + width: 64%; + height: 92%; + margin-top: 40px; + background: #f6f6f6!important; +} + +/deep/.el-input-number__decrease{ + border-right-color: #39B5FE; + .el-icon-minus:before{ + color: #19F6F8; + } +} + +/deep/.el-input-number__increase{ + border-left-color: #39B5FE; + .el-icon-plus:before{ + color: #19F6F8; + } +} + +/deep/.el-input-number__increase{ + background-color: transparent; +} + +/deep/.el-input-number__decrease{ + background-color: transparent; +} + +/deep/.el-textarea.is-disabled .el-textarea__inner{ + background-color: #0D2657; + border-color: #39B5FE; +} + +/* 滚动条统一样式修改 */ +/deep/ { + &::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + &::-webkit-scrollbar-corner { + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + box-shadow: inset 0 0 5px transparent; + background: #39B5FE; + } + + &::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px transparent; + border-radius: 10px; + background: rgba(76, 188, 254, .3); + } } \ No newline at end of file -- Gitblit v1.9.3