From a7c92047424d58954127b38bbef7c9096994a972 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 14 六月 2023 13:42:42 +0800 Subject: [PATCH] 2023-06-14 --- src/tabviews/custom/components/card/data-card/index.scss | 228 ++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 162 insertions(+), 66 deletions(-) diff --git a/src/tabviews/custom/components/card/data-card/index.scss b/src/tabviews/custom/components/card/data-card/index.scss index 9f7e363..bb71f96 100644 --- a/src/tabviews/custom/components/card/data-card/index.scss +++ b/src/tabviews/custom/components/card/data-card/index.scss @@ -4,41 +4,75 @@ background-repeat: no-repeat; background-size: cover; min-height: 20px; - - >.button-list.toolbar-button { - padding: 0; - line-height: 45px; - button { - margin-right: 0px; - margin-bottom: 0px; - min-height: 28px; - height: auto; - } - } + overflow-y: auto; .data-zoom { display: flex; position: relative; - } - .data-zoom.radio, .data-zoom.checkbox { - .card-row-list { - >.ant-col:not(.active):not(.selected):not(.extend-card):hover { - >.card-item-box { - border-color: #69c0ff!important; - box-shadow: 0 0 4px #69c0ff!important; + .mk-disabled { + >.card-item-box { + cursor: not-allowed; + color: #bcbcbc; + .ant-mk-text, .anticon { + color: #bcbcbc!important; + span { + color: #bcbcbc!important; + } } } } + .mk-parity-bg { + .card-item-box { + background-color: var(--mk-sys-color1); + } + } } - .data-zoom.true { + .data-zoom.scale { .card-row-list { - >.ant-col:not(.extend-card):hover { + .mk-card:hover { >.card-item-box { z-index: 1; transform: scale(1.05); } } } + } + .card-row-list { + flex: 10; + } + .card-row-list.flex-layout { + display: flex; + width: 100%; + >.ant-col { + width: 5%; + flex: 1; + } + } + .card-row-list.float-center { + text-align: center; + >.ant-col { + display: inline-block; + float: none; + text-align: left; + vertical-align: top; + } + } + .card-row-list.float-right { + text-align: right; + >.ant-col { + display: inline-block; + float: none; + text-align: left; + vertical-align: top; + } + } + .card-item-box { + position: relative; + background-color: #ffffff; + transition: all 0.3s; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; } .prev-page { width: 20px; @@ -68,34 +102,8 @@ display: block; clear: both; } - .card-row-list { - flex: 10; - - .card-item-box { - position: relative; - background-color: #ffffff; - transition: all 0.3s; - } - >.pointer { - cursor: pointer; - } - >.active >.card-item-box { - border-color: #1890ff!important; - box-shadow: 0 0 4px #1890ff; - } - >.selected >.card-item-box { - border-color: #69c0ff!important; - box-shadow: 0 0 4px #69c0ff; - } - } - .card-item-box { - background-position: center center; - background-repeat: no-repeat; - background-size: cover; - } .ant-empty { - width: 100%; min-height: 100px; padding-top: 15px; @@ -127,30 +135,118 @@ padding: 10px; text-align: right; } - .trigger-button { - .card-item-box { - .card-cell-list { - position: unset; - .mk-cell-btn { - position: unset; - .ant-btn { - position: unset; - } - .ant-btn::after { - content: ' '; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - cursor: pointer; - } - } + .mk-more { + text-align: center; + line-height: 40px; + cursor: pointer; + .anticon-down { + margin-left: 2px; + } + } + .mk-more.disabled { + cursor: not-allowed; + color: #bcbcbc; + } + .mk-disabled { + .circle-select { + border-color: #e8e8e8!important; + cursor: not-allowed; + } + } + .circle-select { + position: relative; + display: none; + width: 16px; + height: 16px; + border: 1px solid #cccccc; + border-radius: 50%; + box-sizing: content-box; + margin: auto; + margin-right: 5px; + background-color: #ffffff; + transition: border-color 0.2s; + cursor: pointer; + } + .circle-select::before { + position: relative; + top: 1px; + left: 6px; + content: ' '; + display: block; + width: 5px; + height: 11px; + border-style: solid; + border-width: 0 2px 2px 0; + border-color: #ffffff; + transform: rotate(45deg); + } + + .data-zoom.check.square { + .circle-select { + border-radius: 0!important; + } + .circle-select.half::after { + border-radius: 0px; + } + } + .data-zoom.check { + .mk-card.active, .mk-card.selected { + .circle-select { + border-color: var(--mk-sys-color); + background: var(--mk-sys-color); } + } + .circle-select.whole { + border-color: var(--mk-sys-color); + background: var(--mk-sys-color); + } + .circle-select.half { + border-color: var(--mk-sys-color); + } + .circle-select.half::before { + display: none; + } + .circle-select.half::after { + position: absolute; + top: 4px; + left: 4px; + content: ' '; + display: block; + border-radius: 8px; + width: 8px; + height: 8px; + background: var(--mk-sys-color); + } + .card-item-box { + // width: 100%; + display: flex; + } + .card-cell-list { + flex: 1; + } + .circle-select { + display: block; + } + .circle-select:hover { + border-color: var(--mk-sys-color); } } } - +.custom-data-card-box::-webkit-scrollbar { + width: 7px; + height: 7px; +} +.custom-data-card-box::-webkit-scrollbar-thumb { + border-radius: 5px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13); + background: rgba(0, 0, 0, 0.13); +} +.custom-data-card-box::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.07); + background: rgba(0, 0, 0, 0); +} .custom-card-box::after { content: ' '; display: block; -- Gitblit v1.8.0