From b58d2d0277eecbae9348d633e7dc805771962024 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 18 九月 2023 19:59:14 +0800 Subject: [PATCH] 2023-09-18 --- src/views/mobdesign/index.scss | 428 +++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 317 insertions(+), 111 deletions(-) diff --git a/src/views/mobdesign/index.scss b/src/views/mobdesign/index.scss index 085ccf3..3753c8f 100644 --- a/src/views/mobdesign/index.scss +++ b/src/views/mobdesign/index.scss @@ -1,132 +1,338 @@ -.mobile-view { - background: #000; - .mob-body { - width: 100vw; - height: calc(100vh - 50px); +body { + --mk-sys-color: #1890ff; + --mk-sys-color1: #e6f7ff; + --mk-sys-color2: #bae7ff; + --mk-sys-color3: #91d5ff; + --mk-sys-color4: #69c0ff; + --mk-sys-color5: #40a9ff; +} +.mk-mob-view { + min-height: 100vh; + + .eye-open { + .component-name { + display: block; + } + .anticon-tool { + display: none; + } + } + .update-tip::after { + content: ' '; + display: inline-block; + position: absolute; + top: -4px; + right: -4px; + width: 8px; + height: 8px; + background-color: red; + border-radius: 8px; + } + .component-name { + position: absolute; + z-index: 9; + display: none; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.9); + border: 1px solid #1890ff; overflow: hidden; - position: relative; - background: #262626; - padding: 0px 300px 0px 40px; - - .mob-tool { + .center { position: absolute; - left: 0; - top: 0; - height: 100%; - width: 40px; - background: #262626; - box-shadow: 2px 0px 2px #000; - .mob-tool-content { - width: 100%; - .plus-content { - position: relative; - color: #ffffff; - width: 100%; - display: flex; - align-items: center; - writing-mode: tb-rl; - padding: 16px 0; - border-bottom: 1px solid #000; - cursor: pointer; - z-index: 10; - background: #262626; - i { - margin-bottom: 5px; - margin-left: 2px; - } - } + font-size: 16px; + left: 50%; + top: 50%; + color: #1890ff; + transform: translate(-50%, -50%); + max-width: 70%; + .title { + text-align: center; + white-space: nowrap; + } + } + .error { + text-align: center; + color: red; + display: block; + } + .waring { + color: orange; + } + } - .useable-component { - position: absolute; - width: 305px; - top: 0; - bottom: 0; - left: -340px; - background: #fff; - opacity: 0; - transition: left 0.3s linear 0.1s, opacity 0.3s linear 0.1s; - overflow-y: auto; - } - } - .mob-tool-content:hover { - .useable-component { - opacity: 1; - left: 40px; - } - } - .mob-tool-other { - position: relative; - z-index: 10; - height: 1000px; - background: #262626; + .mk-hidden { + text-decoration: line-through!important; + span { + text-decoration: line-through!important; + } + } + >.view-spin { + position: absolute; + z-index: 3; + left: calc(50% - 16px); + top: calc(50vh - 70px); + } + .back-view { + width: 28px; + float: right; + margin-right: 10px; + cursor: pointer; + font-size: 20px; + color: #757575; + } + .modal-form-board { + padding-top: 0; + } + .menu-setting { + position: fixed; + left: 0; + top: 48px; + z-index: 10; + transition: left 0.3s; + + .draw { + position: absolute; + z-index: 1; + background: #ffffff; + right: -20px; + top: 0px; + box-shadow: 0 0 1px #959595; + border-radius: 0 2px 2px 0px; + + .anticon { + padding: 12px 3px; } } - .mob-setting { - position: absolute; - right: 0; - top: 0; - height: 100%; + .pc-setting-tools { + height: calc(100vh - 48px); width: 300px; background: #ffffff; - box-shadow: 0px 2px 2px #000; - } + overflow-y: auto; + overflow-x: hidden; + padding-bottom: 50px; - .mob-shell { - width: 375px; - height: calc(100vh - 70px); - margin: 0 auto; + > .ant-collapse { + background-color: #ffffff; + .ant-collapse-item.ant-collapse-item-active { + border-bottom: 1px solid #d9d9d9; + } + .ant-collapse-header { + padding: 11px 16px 10px 40px; + border-bottom: 1px solid #d9d9d9; + background: #1890ff; + color: #ffffff; + } + .ant-collapse-content-box { + .ant-form-item { + margin-bottom: 10px; + } + } + } + + >.ant-tabs { + >.ant-tabs-bar { + border-bottom: 1px solid #181F29; + margin-bottom: 0px; + min-height: 48px; + .ant-tabs-tab { + padding: 14px 16px; + color: rgba(255, 255, 255, 0.85); + } + .ant-tabs-tab-active.ant-tabs-tab { + color: #1890ff; + } + } + } + } + .pc-setting-tools::-webkit-scrollbar { + width: 4px; + } + .pc-setting-tools::-webkit-scrollbar-thumb { + border-radius: 5px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08); + background: rgba(0, 0, 0, 0.08); + } + .pc-setting-tools::-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); + } + } + .menu-setting.hidden { + left: -300px; + } + .mob-shell { + margin: 0 auto; + background: #000000; + background-size: 100% 100%; + padding: 25px 13px 40px; + border-radius: 30px; + .main-search-edit-list { + .page-card > div > .ant-form-item { + display: flex; + >.ant-form-item-label { + width: 70px; + } + >.ant-form-item-control-wrapper { + flex: 1; + } + .ant-form-item-label > label::after { + content: ' '; + + } + } + .page-card.date .ant-form-item, .page-card.datemonth .ant-form-item { + // box-shadow: 0px 1px 1px #f0f0f0; + border-bottom: 1px solid #f0f0f0; + } + } + } + .menu-control { + position: fixed; + right: 0; + top: 48px; + height: calc(100vh - 48px); + background: #ffffff; + z-index: 10; + transition: right 0.3s; + + .draw { + position: absolute; + z-index: 1; background: #ffffff; - background-size: 100% 100%; - padding: 5vh 13px 6vh; - border-radius: 30px; + left: -21px; + top: 0px; + box-shadow: 0 0 1px #959595; + border-radius: 0 2px 2px 0px; - .mob-shell-inner { - width: 100%; - height: 100%; - overflow-y: auto; - overflow-x: hidden; - background-color: #f5f5f9; - } - .mob-shell-inner::-webkit-scrollbar { - width: 4px; - } - .mob-shell-inner::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13); - background: rgba(0, 0, 0, 0.23); - border-radius: 5px; - } - .mob-shell-inner::-webkit-scrollbar-track { - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); - border: 1px solid rgba(0, 0, 0, 0.07); - background: rgba(0, 0, 0, 0); - border-radius: 3px; + .anticon { + padding: 12px 3px; } } + + div:not(.draw), button:not(.ant-switch) { + display: block!important; + margin-bottom: 15px; + width: 100%; + } + .ant-switch.big { + min-width: 60px; + height: 24px; + line-height: 24px; + margin-bottom: 15px; + .ant-switch-inner { + font-size: 14px; + } + } + .ant-switch.big:after { + width: 22px; + height: 22px; + } + .wrap { + height: 100%; + padding: 20px 10px; + overflow-y: auto; + } + .wrap::-webkit-scrollbar { + width: 2px; + } + .wrap::-webkit-scrollbar-thumb { + border-radius: 5px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08); + background: rgba(0, 0, 0, 0.08); + } + .wrap::-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); + } + } + + .menu-control.hidden { + right: -145px; } - .flex-container { - margin: 0 15px; + .menu-body { + width: 100vw; + height: 100vh; + overflow-x: hidden; + position: relative; + background: #959595; + padding: 50px 0px 0px; + overflow-y: auto; + } - .flex-container .inline { - width: 80px!important; - margin: 9px 9px 9px 0; + .menu-body.saving, .menu-view.saving { + .anticon-tool { + display: none; + } } - .flex-container .small { - height: 20px!important; - line-height: 20px!important; + .menu-body::-webkit-scrollbar { + width: 7px; } - .sub-title { - color: #888; - font-size: 14px; - padding: 30px 0 18px 0; + .menu-body::-webkit-scrollbar-thumb { + border-radius: 5px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08); + background: rgba(0, 0, 0, 0.08); } - .placeholder { - background-color: #ebebef; - color: #bbb; - text-align: center; - height: 30px; - line-height: 30px; - width: 100%; + .menu-body::-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); + } + .card-button-cell { + .ant-checkbox-inner { + width: 20px; + height: 20px; + } } } + +.mk-mob-view.userbind { + .pc-setting-tools { + .ant-collapse-item.basedata { + .custom-menu-form > .ant-row { + > .ant-col { + display: none; + } + > .ant-col:nth-child(1), > .ant-col:nth-child(2) { + display: block; + } + } + .url-field-component, .model-tablename-manage-view, .ant-typography { + display: none; + } + } + + .ant-collapse-item.component { + .menu-source-item { + display: none; + } + .menu-source-item.card-propcard, .menu-source-item.balcony-balcony, .menu-source-item.login-normallogin { + display: block; + } + } + .ant-collapse-item.cuscomponent { + display: none; + } + } + .menu-control { + .quote-wrap, .set-home, .set-login { + display: none!important; + } + } +} + +body { + overflow-y: hidden; +} + +.user-component-wrap { + display: none!important; +} \ No newline at end of file -- Gitblit v1.8.0