From ecbe0dc46ce2b8f607b9afd063104adeb7f10fe8 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 30 三月 2021 15:19:31 +0800 Subject: [PATCH] 2021-03-30 --- src/views/mobdesign/index.scss | 282 +++++++++++++++++++++++++++++++++----------------------- 1 files changed, 166 insertions(+), 116 deletions(-) diff --git a/src/views/mobdesign/index.scss b/src/views/mobdesign/index.scss index 7251e22..7699f0b 100644 --- a/src/views/mobdesign/index.scss +++ b/src/views/mobdesign/index.scss @@ -1,78 +1,77 @@ -.mobile-view { - background: #000; +.mk-mob-view { min-height: 100vh; - .mob-body { - width: 100vw; - height: 100vh; - overflow-x: hidden; - position: relative; - background: #262626; - padding: 50px 300px 0px 40px; - .mob-tool { - position: fixed; - left: 0; - top: 48px; - height: 100%; - width: 40px; - background: #262626; - box-shadow: 2px 0px 2px #000; - .mob-tool-content { - width: 100%; - .plus-content { - position: relative; + >.view-spin { + position: absolute; + z-index: 3; + left: calc(50% - 16px); + top: calc(50vh - 70px); + } + .modal-form-board { + padding-top: 0; + } + .menu-setting { + position: fixed; + left: 0; + top: 48px; + z-index: 10; + transition: left 0.3s; + + .pc-setting-tools { + height: calc(100vh - 48px); + width: 300px; + background: #ffffff; + overflow-y: auto; + overflow-x: hidden; + + > .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; - 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: #202735; - i { - margin-bottom: 5px; - margin-left: 2px; + } + .ant-collapse-content-box { + .ant-form-item { + margin-bottom: 10px; + } + .model-table-tablemanage-view { + >.ant-list { + margin-top: 20px; + .ant-list-item { + display: -webkit-box; + padding-right: 20px; + position: relative; + padding-left: 5px; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + min-height: 55px; + width: 100%; + .anticon { + position: absolute; + top: 0px; + right: 0px; + padding: 3px 3px 10px 10px; + cursor: pointer; + } + } + } + >.tables { + width: 66.66666667%!important; + } + >.ant-form-item-label { + width: 33.33333333%; + } } } - - .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: #202735; - } - } - - .mob-setting { - position: fixed; - right: 0; - top: 0; - z-index: 10; - height: 100%; - width: 300px; - background: #202735; - box-shadow: 0px 2px 2px #000; - + >.ant-tabs { >.ant-tabs-bar { border-bottom: 1px solid #181F29; @@ -88,62 +87,113 @@ } } } + .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); + } + } + .mob-shell { + width: 375px; + height: 680px; + margin: 0 auto; + background: #000000; + background-size: 100% 100%; + padding: 25px 13px 40px; + border-radius: 30px; - .mob-shell { - width: 375px; - height: 680px; - margin: 0 auto; + .mob-shell-inner { + width: 100%; + height: 100%; + overflow-y: auto; + overflow-x: hidden; background: #ffffff; - background-size: 100% 100%; - padding: 25px 13px 40px; - border-radius: 30px; + box-shadow: 0px 0px 2px #000000; + } + .mob-shell-inner::-webkit-scrollbar { + width: 2px; + } + .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; + } + } + .menu-control { + position: fixed; + right: 0; + top: 48px; + height: 100vh; + padding: 20px 10px; + background: #ffffff; + z-index: 10; + transition: right 0.3s; - .mob-shell-inner { - width: 100%; - height: 100%; - overflow-y: auto; - overflow-x: hidden; - box-shadow: 0px 0px 2px #000000; + 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; } - .mob-shell-inner::-webkit-scrollbar { - width: 2px; - } - .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; - } + } + .ant-switch.big:after { + width: 22px; + height: 22px; } } - .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; + .menu-shell-inner { + min-height: 100vh; + margin: 0 auto; + } } - .flex-container .inline { - width: 80px!important; - margin: 9px 9px 9px 0; + .menu-body.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); } -} +} \ No newline at end of file -- Gitblit v1.8.0