🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
路径:ireport365.wa/js/enduser/designer/component.css 组件配置子页面样式 ``` .gx-com-item{ width: 100%; height: 46px; line-height: 46px; text-align: left; margin: 0; } .gx-com-item .gx-table-title{ font-size: 16px; margin: 0; text-align: left; color:#fff; opacity: 1; } .gx-com-item .gx-com-table{ font-size: 14px; color: #fff; opacity: 1; padding-left: 6px; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; } .gx-repeat-keys{ padding: 12px; } .gx-keys-title{ margin-bottom: 10px; } .gx-keys-title h3{ font-size: 14px; color: #fff; opacity: 1; margin-top: -10px; font-weight: normal; margin-bottom: 10px; } .gx-rt-key li{ background-color: #3f7bc0; color: #fff; font-size: 14px; width: 100% !important; height: 26px; line-height: 26px; text-align: center; margin-bottom: 14px; border-radius: 4px; cursor: move; /*overflow: hidden;*/ text-overflow: ellipsis; white-space: nowrap; } .gx-rt-key li >p{ text-overflow: ellipsis; width: 100%; white-space: nowrap; overflow: hidden; } .gx-rt-key li .gx-key-remove, .gx-rt-key li .gx-key-add{ width: 14px; height: 14px; position: absolute; color: #fff; background: red; top: -6px; right: -8px; border-radius: 50%; font-size: 10px; line-height: 12px; } .gx-rt-key li.gx-date-item:hover>.gx-key-date{ display: block; } .gx-rt-key li .gx-key-add{ background: green; } .gx-rt-key .gx-key-date>li{ border-radius: 0; margin: 0; background-color: #fff; color: #333; border-bottom: 1px solid #bbbdbe; padding: 0 10px; cursor: pointer; } .gx-key-date{ width: 100%; height: auto; position: absolute; left: 0; top: 22px; margin-bottom: 10px; transition: all .3s ease; display: none; border-top: 10px solid transparent; z-index: 1000; } .vrd-page-left{ top: 64px; border-top: 1px solid #666; z-index: 210; overflow-y:auto; overflow-x: hidden; } .gx-body{ position: fixed; top:64px;bottom:0; left:270px;right: 278px; background-color: #f2f2f2; z-index: 220; overflow: auto; } .gx-search-area{ min-height: 84px; background-color: #fff; } .gx-search-item{ width: 100%; min-height: 42px; line-height: 42px; color: #333; border-bottom: 1px solid #ccc; } .gx-search-item label{ width: 10%; vertical-align: top; text-align: center; font-size: 14px; color: #333; } .gx-item-keys{ display: inline-block; padding-top: 2px; width: 84%; } .gx-item-keys li{ display: inline-block; margin: 0 20px 10px 0; height: 24px; line-height: 22px; border-radius: 4px; font-size: 14px; color: #fff; padding: 2px 10px; box-sizing: border-box; cursor: pointer; } /*.gx-item-x li{*/ /*background-color: #0c63ee;*/ /*}*/ /*.gx-item-y li{*/ /*background-color: #35a28d;*/ /*}*/ .gx-item-keys .select2-container-multi .select2-choices{ border: none; } .gx-item-keys .select2-container-multi .select2-choices li{ display: inline-block; margin: 0 20px 10px 0; height: 24px; line-height: 22px; border-radius: 4px; font-size: 14px; color: #fff; padding: 2px 10px; box-sizing: border-box; cursor: move; border:none; width: auto; min-width: 112px; text-align: center; } /*.gx-item-x .select2-container-multi .select2-choices .select2-search-choice{*/ /*background-color: #0c63ee;*/ /*}*/ /*.gx-item-y .select2-container-multi .select2-choices .select2-search-choice{*/ /*background-color: #35a28d;*/ /*}*/ .gx-key-label{ display: block; overflow: hidden; width: 90%; height: 100%; text-overflow: ellipsis; white-space: nowrap; margin: auto; } .gx-key-bg{ background-color: LightSlateGray !important; } .gx-y-dimension, .gx-x-dimension{ position: absolute; background-color: #35a28d; left: 0; right: 0; top: 0; bottom: 0; border-radius: 4px; } .gx-y-dimension.isMeasures{ background-color: #35a28d; } .gx-y-dimension.isDimensions .gx-dropdown-main{ display:none !important; } .gx-x-dimension.isMeasures{ background-color: #35a28d; } .gx-x-dimension.isDimensions{ background-color: #0c63ee; } .gx-y-dimension.isDimensions{ background-color: #0c63ee; } .gx-item-keys .select2-container-multi .select2-choices{ overflow: visible; margin-top: 4px } .gx-item-keys .select2-search-choice-close{ width: 14px; height: 14px; position: absolute; top: -5px;left: auto; right: -8px; bottom: auto; font-size: 1px; outline: none; background: red; border-radius: 50%; color: #fff; display: none; } .gx-item-keys .select2-search-choice-close:after{ content: 'x'; color: #fff; position: absolute; left: 4px; right: 4px; top: -5px; font-size: 10px; } .gx-item-keys .ui-select-match-item:hover .select2-search-choice-close{ display: block; } .gx-item-keys .select2-container-multi .select2-choices .select2-search-field input{ background-color: #fff; height: 24px; font-size: 14px; } .gx-item-keys .select2-drop-active{ height: 0; border: none; overflow: hidden; } .gx-item-keys .select2-container-multi .select2-choices .select2-search-field{ cursor: text; } .gx-item-keys .select2-container{ width: 100%; } .gx-item-keys .gx-dropdown-main{ width: 110px; min-height: 150px; position: absolute; left: 0; top: 24px; background-color: #fff; z-index: 300; border: 1px solid #ccc; border-radius: 2px; box-shadow: 1px 2px 10px 1px #ccc; cursor: pointer; transition: all 0.3s ease; display: none; } .gx-item-keys .select2-container-multi .select2-choices .gx-dropdown-item li{ color: #333; text-align: left; padding: 2px 10px; box-sizing: border-box; width: 100%; min-width: 50%; height: 32px; margin: 0; border-bottom: 1px solid #ccc; line-height: 30px; border-radius: 2px; } .gx-item-keys .select2-container-multi .select2-choices .gx-dropdown-item.gx-dropdown-date li{ text-align: center; } .gx-item-keys .select2-container-multi .select2-choices .gx-dropdown-item li:last-child{ border-bottom: none; } .gx-item-keys .select2-container-multi .select2-choices .gx-dropdown-item li:hover, .gx-item-keys .select2-container-multi .select2-choices .gx-dropdown-item li.active{ background-color: #eee; cursor: pointer; } .gx-px-right{ } .gx-px-right .gx-rt-ol{ position: absolute; left: 110px;top: 0; width: 110px; background-color: #fff; z-index: 300; border: 1px solid #ccc; border-radius: 2px; box-shadow: 1px 2px 10px 1px #ccc; cursor: pointer; transition: all 0.3s ease; display: none; } .gx-px-right:hover .gx-rt-ol{ display: block; } .gx-px-right .gx-rt-ol li.active{ background-color: #eee; } .gx-icon-right{ float: right; line-height: 30px; } .gx-item-keys .select2-search-choice:hover .gx-dropdown-main{ display: block; } .gx-item-keys .select2-search-choice.dragging .gx-dropdown-main{ display: none; } .absolute{ /*position: fixed !important;*/ } .mb15{ margin-bottom: 15px; } .gx-label{ font-size: 16px; line-height: 32px; } .gx-slider{ padding-top: 16px; } .gx-slider-input input{ margin: 0; max-width: 100%; flex: 1 0 auto; outline: 0 none; line-height: 16px; font-family: Lato,"Helvetica Neue",Arial,Helvetica,sans-serif; padding: 10px 0; text-align: center; font-size: 14px; background: #FFF none repeat scroll 0 0; border: 1px solid rgba(34,36,38,0.15); color: rgba(0,0,0,0.87); transition: box-shadow .1s ease 0s,border-color .1s ease 0s; box-shadow: none; } .gx-select-unit{ width: 92%; height: 32px; font-size: 14px; } .gx-radio-item label span{ line-height: 1; font-size: 14px; margin-left: 6px; } .gx-com-table-select{ position: absolute; left: 0; right: 0; text-align: center; width: 164px; } /*filter*/ .gx-filter{ position: fixed; top: 65px; z-index: 200; left: 160px; bottom: 0; box-sizing: border-box; font-size: 13px; color: #bbbdbe; width: 110px; height: 100%; background: #fff none repeat scroll 0 0; border-right:1px solid #bbbdbe ; overflow: auto; } .gx-filter-title{ font-size: 16px; color: #333; height: 46px; line-height: 46px; margin: auto; text-align: center; border-bottom: 1px solid #bbbdbe; border-top: 1px solid #bbbdbe; } .gx-filter-main{ min-height: 270px; position: relative; } .gx-filter-main>.empty-text{ position: absolute; top: 0; bottom: 0; text-align: center; margin: auto; } .gx-filter-ol{ padding: 6px 4px; } .gx-filter-ol>.gx-filter-li{ width: 100%; color: #fff; font-size: 14px; height: 26px; line-height: 26px; text-align: center; margin-bottom: 14px; border-radius: 4px; position: relative; } .gx-filter-ol>.gx-filter-li>.gx-filter-label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .gx-filter-ol>.gx-filter-li.filter-dimensions{ background-color: #3f7bc0; } .gx-filter-ol>.gx-filter-li.filter-measures{ background-color: #35a28d; } .gx-filter-ol>.gx-filter-li.gx-color{ color: #333; text-align: left; } .gx-filter-delete{ position: absolute; top: -4px; right: -4px; background-color: red; width: 14px; height: 14px; border-radius: 50%; color: whitesmoke !important; line-height: 1; font-size: 10px; text-align: center; display: none; } .gx-filter-ol>.gx-filter-li:hover>.gx-filter-delete{ display: block; } /*body*/ .gx-body .vrd-page-body{ right: 0; position: relative; min-height: 600px; top: 0; left: 0; } /*right*/ .gx-setting-item{ border-bottom: 1px solid #eee; float: left; width: 100%; } .gx-st-container{ max-height: 2000px; transition: all 1s ease; float: left; overflow: hidden; width: 100%; padding-bottom: 300px; } .gx-st-container.gx-close{ max-height: 0; padding: 0; } .gx-table-setting-item .gx-st-container{ margin-top: 10px; padding-bottom: 300px; } .gx-table-setting-item .gx-st-container.gx-close{ margin-top: 0; padding: 0; } .gx-st-container>.cp-tab{ width: 100%; } .gx-table-setting-item .select-item-components>h4{ padding-left: 14px; } .gx-table-setting-item .opacity-black.disabled { background-color: black; } .gx-table-setting-item .opacity-black.disabled>.opacity-black-position{ opacity: .4; } .gx-right-main{ direction: rtl; } .gx-right-main>.gx-page-right{ direction: ltr; } .gx-setting-item>.gx-set-h4{ height: 32px; line-height: 32px; font-size: 14px; padding: 0 10px; box-sizing: border-box; cursor: pointer; border-bottom:1px solid #bbbdbe; } .modal-super-lgs { width: 40%; } .gx-filter-condition{ font-size: 14px; line-height: 32px; padding: 0 20px; box-sizing: border-box; } .gx-filter-condition>p{ text-align: center; } .gx-con-ol{ border: 1px solid #bbbdbe; height: 312px; overflow: auto; } .gx-con-ol>li{ font-size: 14px; color: #333; height: 32px; line-height: 32px; cursor: pointer; transition: all 0.3s ease; background-color: #fff; padding: 0 20px; } .gx-con-ol>li:hover, .gx-con-ol>li.active{ background-color: #eee; } .gx-con-search{ position: relative; } .gx-con-search>input{ width: 100%; height: 24px; margin: 4px 0; padding: 0 20px 0 10px; box-sizing: border-box; } .gx-con-search>i{ position: absolute; top: 8px; right: 25px; } .selectize-control.single .selectize-input:after{ content: ' '; display: block; position: absolute; top: 50%; right: 4px; margin-top: -3px; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #808080 transparent transparent transparent; } .gx-con-text{ border:none; resize:none; width: 100%; height: 100%; padding: 10px; font-size: 14px; color: #333; } .gx-component>.box-nohelpborder{ padding: 0 !important; } ```