From 9906987f77abf2f0669a44a877ad86ac730fdfdd Mon Sep 17 00:00:00 2001
From: 张磊磊 <201175954@qq.com>
Date: 星期二, 12 十二月 2023 12:08:01 +0800
Subject: [PATCH] 图片转换
---
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 5ebc614..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;
- }
- }
-
- .search_btn {
- border: 0 none;
- color: #fff;
- background: url('~@/assets/search_bg.png') no-repeat;
- background-size: 100% 100%;
- &:hover {
- color: #F69C42;
- }
- }
-
- .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);
- }
- }
-
- .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