为什么都没了
This commit is contained in:
路 范
16
framework/web-react/src/App.js
Normal file
16
framework/web-react/src/App.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from 'react'
|
||||
import { ConfigProvider } from 'antd'
|
||||
import zhCN from 'antd/lib/locale/zh_CN'
|
||||
import moment from 'moment'
|
||||
import 'moment/locale/zh-cn'
|
||||
|
||||
moment.locale('zh-cn')
|
||||
|
||||
const App = () => (
|
||||
<div className="app">
|
||||
<ConfigProvider locale={zhCN}>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App
|
||||
BIN
framework/web-react/src/assets/image/adorn/house-top-01.png
Normal file
BIN
framework/web-react/src/assets/image/adorn/house-top-01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
framework/web-react/src/assets/image/login-bg-00.jpg
Normal file
BIN
framework/web-react/src/assets/image/login-bg-00.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
BIN
framework/web-react/src/assets/image/login-bg-01.jpg
Normal file
BIN
framework/web-react/src/assets/image/login-bg-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 560 KiB |
BIN
framework/web-react/src/assets/image/login-bg-02.jpg
Normal file
BIN
framework/web-react/src/assets/image/login-bg-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 431 KiB |
BIN
framework/web-react/src/assets/image/login-bg-03.jpg
Normal file
BIN
framework/web-react/src/assets/image/login-bg-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
BIN
framework/web-react/src/assets/image/logo-w.png
Normal file
BIN
framework/web-react/src/assets/image/logo-w.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
framework/web-react/src/assets/image/logo.png
Normal file
BIN
framework/web-react/src/assets/image/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
11
framework/web-react/src/assets/style/dark/extend.less
Normal file
11
framework/web-react/src/assets/style/dark/extend.less
Normal file
@@ -0,0 +1,11 @@
|
||||
@import '~antd/dist/antd.dark.less';
|
||||
@padding-xxs: 4px;
|
||||
@padding-xl: 32px;
|
||||
body {
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
#root {
|
||||
transition: @animation-duration-slow opacity;
|
||||
|
||||
opacity: 1 !important;
|
||||
}
|
||||
35
framework/web-react/src/assets/style/dark/index.less
Normal file
35
framework/web-react/src/assets/style/dark/index.less
Normal file
@@ -0,0 +1,35 @@
|
||||
@import './extend.less';
|
||||
@import './lib/visibility.less';
|
||||
@import './lib/container.less';
|
||||
@import './lib/align.less';
|
||||
@import './lib/font-size.less';
|
||||
@import './lib/text-color.less';
|
||||
@import './lib/margin.less';
|
||||
@import './lib/width-height.less';
|
||||
@import './lib/scrollbar.less';
|
||||
@import './main.less';
|
||||
@import './lib/button.less';
|
||||
@import './lib/card.less';
|
||||
@import './lib/table.less';
|
||||
@import './lib/list.less';
|
||||
@import './lib/form.less';
|
||||
@import './lib/form-page.less';
|
||||
@import './lib/page.less';
|
||||
@import './lib/description.less';
|
||||
@import './lib/input.less';
|
||||
@import './lib/select.less';
|
||||
@import './lib/checkbox.less';
|
||||
@import './lib/radio.less';
|
||||
@import './lib/cascader.less';
|
||||
@import './lib/upload.less';
|
||||
@import './lib/dropdown.less';
|
||||
@import './lib/modal.less';
|
||||
@import './lib/tree-layout.less';
|
||||
@import './lib/authority-view.less';
|
||||
@import './lib/icon-selector.less';
|
||||
@import './lib/color-selector.less';
|
||||
@import './lib/anchor.less';
|
||||
@import './lib/disabled.less';
|
||||
@import './theme/primary.less';
|
||||
@import './public.less';
|
||||
@import './pages/index.less';
|
||||
9
framework/web-react/src/assets/style/dark/lib/align.less
Normal file
9
framework/web-react/src/assets/style/dark/lib/align.less
Normal file
@@ -0,0 +1,9 @@
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
11
framework/web-react/src/assets/style/dark/lib/anchor.less
Normal file
11
framework/web-react/src/assets/style/dark/lib/anchor.less
Normal file
@@ -0,0 +1,11 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-anchor-ink-ball {
|
||||
width: 2px;
|
||||
height: 28px;
|
||||
|
||||
transform: translate(-50%, -10px);
|
||||
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-authority-view {
|
||||
&--container {
|
||||
>.ant-descriptions-view {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.ant-descriptions-item-label {
|
||||
width: 150px;
|
||||
}
|
||||
.ant-descriptions {
|
||||
clear: both;
|
||||
|
||||
margin-bottom: @padding-sm;
|
||||
.ant-descriptions-view {
|
||||
overflow: visible;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.ant-descriptions-item-content {
|
||||
padding: @padding-sm @padding-md;
|
||||
.yo-authority-view--checkbox {
|
||||
display: inline-block;
|
||||
|
||||
width: 150px;
|
||||
margin: @padding-xxs 0;
|
||||
.ant-checkbox-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-card-grid {
|
||||
width: 25%;
|
||||
margin-bottom: @padding-sm;
|
||||
padding: @padding-xs;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.ant-card {
|
||||
margin-bottom: 0;
|
||||
|
||||
background-color: transparent;
|
||||
&-body {
|
||||
margin: -1px 0 0 -1px;
|
||||
padding: 0;
|
||||
}
|
||||
.ant-card-grid {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-btn {
|
||||
box-shadow: none;
|
||||
}
|
||||
14
framework/web-react/src/assets/style/dark/lib/card.less
Normal file
14
framework/web-react/src/assets/style/dark/lib/card.less
Normal file
@@ -0,0 +1,14 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-card {
|
||||
margin-bottom: @padding-md;
|
||||
}
|
||||
.ant-card-grid-hoverable {
|
||||
&:hover {
|
||||
box-shadow: 1px 0 0 0 #303030,
|
||||
0 1px 0 0 #303030,
|
||||
1px 1px 0 0 #303030,
|
||||
1px 0 0 0 #303030 inset,
|
||||
0 1px 0 0 #303030 inset,
|
||||
@card-shadow;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-cascader-picker-arrow {
|
||||
svg {
|
||||
transform: scaleY(.75);
|
||||
}
|
||||
}
|
||||
10
framework/web-react/src/assets/style/dark/lib/checkbox.less
Normal file
10
framework/web-react/src/assets/style/dark/lib/checkbox.less
Normal file
@@ -0,0 +1,10 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-checkbox-wrapper {
|
||||
margin-right: @padding-xs;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
+.ant-checkbox-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-select-dropdown {
|
||||
.chrome-picker {
|
||||
width: auto !important;
|
||||
margin: -@padding-xxs 0;
|
||||
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
.color-selector--palette {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: inset 0 0 0 @border-width-base @border-color-base, inset 0 0 0 3px @black;
|
||||
}
|
||||
43
framework/web-react/src/assets/style/dark/lib/container.less
Normal file
43
framework/web-react/src/assets/style/dark/lib/container.less
Normal file
@@ -0,0 +1,43 @@
|
||||
@import (reference) '../extend.less';
|
||||
@container-width: 1400px;
|
||||
.container-base {
|
||||
margin: 0 auto;
|
||||
padding: 0 @padding-md;
|
||||
}
|
||||
.container {
|
||||
width: @container-width;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.container {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.container-md {
|
||||
width: @container-width - 200px;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
.container-sm {
|
||||
width: @container-width - 400px;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
.container-xs {
|
||||
width: @container-width - 600px;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
.container-xxs {
|
||||
width: @container-width - 700px;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
.container-fluid {
|
||||
.container-base();
|
||||
}
|
||||
.container-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-descriptions-bordered {
|
||||
.ant-descriptions-view {
|
||||
>table {
|
||||
border-collapse: collapse;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
59
framework/web-react/src/assets/style/dark/lib/disabled.less
Normal file
59
framework/web-react/src/assets/style/dark/lib/disabled.less
Normal file
@@ -0,0 +1,59 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-btn-primary-disabled,
|
||||
.ant-btn-primary.disabled,
|
||||
.ant-btn-primary[disabled],
|
||||
.ant-btn-primary-disabled:hover,
|
||||
.ant-btn-primary.disabled:hover,
|
||||
.ant-btn-primary[disabled]:hover,
|
||||
.ant-btn-primary-disabled:focus,
|
||||
.ant-btn-primary.disabled:focus,
|
||||
.ant-btn-primary[disabled]:focus,
|
||||
.ant-btn-primary-disabled:active,
|
||||
.ant-btn-primary.disabled:active,
|
||||
.ant-btn-primary[disabled]:active,
|
||||
.ant-btn-primary-disabled.active,
|
||||
.ant-btn-primary.disabled.active,
|
||||
.ant-btn-primary[disabled].active {
|
||||
opacity: .5;
|
||||
color: @btn-primary-color;
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
box-shadow: @btn-primary-shadow;
|
||||
text-shadow: @btn-text-shadow;
|
||||
}
|
||||
.ant-btn-danger-disabled,
|
||||
.ant-btn-danger.disabled,
|
||||
.ant-btn-danger[disabled],
|
||||
.ant-btn-danger-disabled:hover,
|
||||
.ant-btn-danger.disabled:hover,
|
||||
.ant-btn-danger[disabled]:hover,
|
||||
.ant-btn-danger-disabled:focus,
|
||||
.ant-btn-danger.disabled:focus,
|
||||
.ant-btn-danger[disabled]:focus,
|
||||
.ant-btn-danger-disabled:active,
|
||||
.ant-btn-danger.disabled:active,
|
||||
.ant-btn-danger[disabled]:active,
|
||||
.ant-btn-danger-disabled.active,
|
||||
.ant-btn-danger.disabled.active,
|
||||
.ant-btn-danger[disabled].active {
|
||||
opacity: .5;
|
||||
color: @btn-danger-color;
|
||||
border-color: @btn-danger-border;
|
||||
background-color: @btn-danger-bg;
|
||||
box-shadow: @btn-primary-shadow;
|
||||
text-shadow: @btn-text-shadow;
|
||||
}
|
||||
.ant-radio-button-wrapper-disabled,
|
||||
.ant-radio-button-wrapper-disabled:first-child,
|
||||
.ant-radio-button-wrapper-disabled:hover {
|
||||
opacity: .5;
|
||||
color: @radio-button-color;
|
||||
background-color: @radio-button-bg;
|
||||
}
|
||||
.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
|
||||
opacity: .5;
|
||||
color: @btn-primary-color;
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
box-shadow: @btn-primary-shadow;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-dropdown-trigger {
|
||||
.anticon-down {
|
||||
transform: scaleY(.75);
|
||||
}
|
||||
}
|
||||
25
framework/web-react/src/assets/style/dark/lib/font-size.less
Normal file
25
framework/web-react/src/assets/style/dark/lib/font-size.less
Normal file
@@ -0,0 +1,25 @@
|
||||
@import (reference) '../extend.less';
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
@import (reference) '../extend.less';
|
||||
body {
|
||||
font-weight: 100;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@btn-font-weight: 100;
|
||||
.ant-card-meta-title {
|
||||
font-weight: inherit;
|
||||
}
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
169
framework/web-react/src/assets/style/dark/lib/form-page.less
Normal file
169
framework/web-react/src/assets/style/dark/lib/form-page.less
Normal file
@@ -0,0 +1,169 @@
|
||||
@import (reference) '../extend.less';
|
||||
|
||||
.yo-form-page {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
|
||||
.yo-tab-external-mount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
|
||||
>.ant-tabs {
|
||||
>.ant-tabs-nav {
|
||||
margin-bottom: 0;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
background-color: @component-background;
|
||||
|
||||
&.ant-tabs-card-bar {
|
||||
.ant-tabs-nav-container {
|
||||
height: @tabs-card-height + @padding-xs;
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
|
||||
.ant-tabs-extra-content {
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
transition: none;
|
||||
|
||||
.ant-btn();
|
||||
|
||||
&:hover {
|
||||
border-color: @btn-default-border;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
line-height: @btn-height-base;
|
||||
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
z-index: 2;
|
||||
|
||||
color: @btn-primary-color;
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
|
||||
&:hover {
|
||||
color: @btn-primary-color;
|
||||
border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.yo-tab-external-mount-content {
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
>.yo-tab-external-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&.yo-tab-external-tabpane-inactive {
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--bar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 200;
|
||||
|
||||
&--with-tab {
|
||||
position: absolute;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-right: 7px;
|
||||
|
||||
>.container-fluid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
~.yo-tab-external-mount {
|
||||
>.yo-tab-external-mount-content {
|
||||
>.yo-tab-external-tabpane {
|
||||
padding-bottom: @padding-xs * 2 + @btn-height-base + @border-width-base * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--bar-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: @padding-xs @padding-md;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
background-color: fade(@component-background, 80%);
|
||||
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
>:first-child {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
margin-left: @padding-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&--body {
|
||||
>.ant-card-body {
|
||||
padding: 0;
|
||||
|
||||
>section {
|
||||
padding: @padding-lg;
|
||||
|
||||
>h5 {
|
||||
padding-left: @padding-md;
|
||||
|
||||
border-left: @padding-xs @border-style-base @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
|
||||
&--horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&--header {
|
||||
padding: @padding-md 0;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
}
|
||||
401
framework/web-react/src/assets/style/dark/lib/form.less
Normal file
401
framework/web-react/src/assets/style/dark/lib/form.less
Normal file
@@ -0,0 +1,401 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-form {
|
||||
&--fixed {
|
||||
width: 660px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
color: darken(@white, 40%);
|
||||
}
|
||||
.h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.h4 {
|
||||
font-size: 15px;
|
||||
}
|
||||
.yo-form-group {
|
||||
margin-bottom: @padding-md;
|
||||
}
|
||||
.ant-form-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-bottom: -1px;
|
||||
padding: @padding-xs @padding-md;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
background-color: @component-background;
|
||||
|
||||
@box-shadow-focused: 0 0 0 2px fade(@primary-color, 50%);
|
||||
@control-background: darken(@white, 80%) !important;
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
.ant-form-item-control {
|
||||
text-align: right;
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-number,
|
||||
.ant-mentions,
|
||||
.ant-select-selector,
|
||||
.ant-input-group-addon,
|
||||
.ant-cascader-picker,
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-picker {
|
||||
z-index: 1;
|
||||
|
||||
text-align: left;
|
||||
|
||||
color: darken(@white, 10%);
|
||||
border: 0;
|
||||
background-color: @control-background;
|
||||
}
|
||||
.ant-mentions {
|
||||
textarea {
|
||||
background-color: @control-background;
|
||||
}
|
||||
}
|
||||
.focus {
|
||||
z-index: 2 !important;
|
||||
|
||||
box-shadow: @box-shadow-focused;
|
||||
}
|
||||
.unfoucs {
|
||||
z-index: 1 !important;
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
.ant-input {
|
||||
&:focus {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
.ant-input-affix-wrapper {
|
||||
>.ant-input {
|
||||
&:focus {
|
||||
.unfoucs();
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-input-number-focused,
|
||||
.ant-mentions-focused {
|
||||
.focus();
|
||||
}
|
||||
.ant-select-focused,
|
||||
.ant-select-open {
|
||||
z-index: 2;
|
||||
.ant-select-selection {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
.ant-cascader-picker:focus {
|
||||
.ant-cascader-input {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
.ant-input-affix-wrapper:focus,
|
||||
.ant-input-affix-wrapper-focused {
|
||||
.focus();
|
||||
}
|
||||
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) {
|
||||
.ant-select-selector {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
.ant-picker-focused {
|
||||
.focus();
|
||||
}
|
||||
.ant-input-group {
|
||||
.ant-row-flex {
|
||||
.ant-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.ant-input-group-addon {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
.ant-cascader-picker-clear {
|
||||
background-color: @control-background;
|
||||
}
|
||||
}
|
||||
.ant-form-item-label {
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
|
||||
margin-right: @padding-md;
|
||||
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
>label {
|
||||
color: darken(@white, 10%);
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-control {
|
||||
flex: 0 0 61.8%;
|
||||
|
||||
width: 61.8%;
|
||||
min-width: 220px;
|
||||
}
|
||||
.yo-form--fluid {
|
||||
.ant-form-item-control {
|
||||
flex: 0 0 100%;
|
||||
|
||||
width: 100%;
|
||||
|
||||
text-align: inherit;
|
||||
}
|
||||
}
|
||||
.yo-form--short {
|
||||
.ant-form-item-control {
|
||||
flex: 0 0 38.2%;
|
||||
|
||||
width: 38.2%;
|
||||
}
|
||||
}
|
||||
// 上下布局
|
||||
.yo-form--vertical {
|
||||
display: block;
|
||||
.ant-form-item-control {
|
||||
text-align: left;
|
||||
}
|
||||
&-radio {
|
||||
.ant-radio-wrapper {
|
||||
line-height: @padding-lg;
|
||||
|
||||
display: block;
|
||||
|
||||
margin-right: 0;
|
||||
+.ant-radio-wrapper {
|
||||
margin-top: @padding-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-control-wrapper {
|
||||
margin-left: @padding-lg;
|
||||
}
|
||||
.ant-form-explain {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.yo-form-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin-bottom: -1px;
|
||||
padding: @padding-md;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
background-color: @component-background;
|
||||
&:hover {
|
||||
background-color: lighten(@black, 1%);
|
||||
}
|
||||
&:active {
|
||||
background-color: lighten(@black, 3%);
|
||||
}
|
||||
&--title {
|
||||
font-size: @font-size-base + 1px;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
&--content {
|
||||
flex: 1;
|
||||
|
||||
text-align: right;
|
||||
|
||||
color: fade(@black, 35%);
|
||||
}
|
||||
&--right-icon {
|
||||
margin-left: @padding-xs;
|
||||
|
||||
color: fade(@black, 50%);
|
||||
}
|
||||
}
|
||||
&.yo-form--no-border {
|
||||
.ant-form-item {
|
||||
padding: @padding-md 0;
|
||||
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.yo-form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-modal-form {
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
.yo-form {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
margin: 0;
|
||||
padding: @padding-sm @padding-md @padding-xs;
|
||||
}
|
||||
.yo-form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-form-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
&:first-child {
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-drawer-form {
|
||||
.ant-drawer-wrapper-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-drawer-header {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.ant-drawer-body {
|
||||
position: relative;
|
||||
|
||||
flex: 1 1 100%;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
.yo-drawer-form--body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: @border-width-base + 20px + @padding-md * 2;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
width: 100%;
|
||||
padding: @padding-lg;
|
||||
}
|
||||
.ant-drawer-footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
padding: 10px @padding-md;
|
||||
|
||||
text-align: right;
|
||||
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
background: @component-background;
|
||||
button+button {
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form {
|
||||
fieldset {
|
||||
margin-bottom: @padding-lg;
|
||||
padding: @padding-md;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
legend {
|
||||
display: inline-block;
|
||||
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
.ant-form-horizontal {
|
||||
.ant-form-item-label {
|
||||
line-height: 1.5;
|
||||
|
||||
margin-right: @padding-xs;
|
||||
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.ant-form-vertical {
|
||||
.ant-form-item-label {
|
||||
>label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-required {
|
||||
&::before {
|
||||
content: '' !important;
|
||||
vertical-align: middle;
|
||||
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 5px solid @highlight-color;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.yo-form-page {
|
||||
.ant-form {
|
||||
.ant-radio-button-wrapper {
|
||||
margin-right: @padding-xs;
|
||||
margin-bottom: @padding-xs;
|
||||
|
||||
border-left: @border-width-base @border-style-base @border-color-base;
|
||||
&.ant-radio-button-wrapper-checked {
|
||||
border-left-color: @primary-color;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-filter-item {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
margin-bottom: 0;
|
||||
.ant-tag-checkable {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
.ant-radio-button-wrapper {
|
||||
border: 0 !important;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
color: @red-6;
|
||||
}
|
||||
}
|
||||
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
||||
border-color: @red-6;
|
||||
background-color: @red-6;
|
||||
&:hover {
|
||||
border-color: @red-5;
|
||||
background-color: @red-5;
|
||||
}
|
||||
&:active {
|
||||
border-color: @red-7;
|
||||
background-color: @red-7;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-icon-selector {
|
||||
.ant-drawer-wrapper-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-drawer-body {
|
||||
position: relative;
|
||||
|
||||
flex: 1 1 100%;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
.ant-tabs {
|
||||
height: 100%;
|
||||
.ant-tabs-content-left {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
.ant-tabs-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: @padding-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-card {
|
||||
margin: 0;
|
||||
}
|
||||
.ant-card-grid {
|
||||
width: 25%;
|
||||
|
||||
text-align: center;
|
||||
>span {
|
||||
font-size: @font-size-sm;
|
||||
|
||||
display: block;
|
||||
|
||||
margin: @padding-xxs -@padding-lg 0;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
color: fade(@black, 50%);
|
||||
}
|
||||
&.yo-icon--selected {
|
||||
color: @white;
|
||||
background-color: @primary-color;
|
||||
>span {
|
||||
color: fade(@white, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
framework/web-react/src/assets/style/dark/lib/input.less
Normal file
4
framework/web-react/src/assets/style/dark/lib/input.less
Normal file
@@ -0,0 +1,4 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-addon {
|
||||
padding: 0 @padding-xs;
|
||||
}
|
||||
95
framework/web-react/src/assets/style/dark/lib/list.less
Normal file
95
framework/web-react/src/assets/style/dark/lib/list.less
Normal file
@@ -0,0 +1,95 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-list-bordered {
|
||||
border-color: @border-color-split;
|
||||
background-color: @white;
|
||||
}
|
||||
.yo-list {
|
||||
@title-color: lighten(@black, 70%);
|
||||
@value-color: lighten(@black, 30%);
|
||||
&-content--h {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&--item {
|
||||
margin-left: @padding-xl;
|
||||
>span {
|
||||
line-height: 20px;
|
||||
|
||||
color: @title-color;
|
||||
}
|
||||
>p {
|
||||
line-height: 22px;
|
||||
|
||||
margin-top: @padding-xxs;
|
||||
margin-bottom: 0;
|
||||
|
||||
color: @value-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-pagination {
|
||||
margin: @padding-md 0;
|
||||
}
|
||||
.ant-descriptions {
|
||||
.ant-descriptions-item-label {
|
||||
color: @title-color;
|
||||
}
|
||||
.ant-descriptions-item-content {
|
||||
color: @value-color;
|
||||
}
|
||||
.ant-descriptions-row {
|
||||
&:last-child {
|
||||
>td {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--scroll {
|
||||
position: relative;
|
||||
|
||||
overflow-x: auto;
|
||||
}
|
||||
.ant-list-items {
|
||||
min-width: 1000px;
|
||||
}
|
||||
.ant-list-item {
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: background, border-bottom-color;
|
||||
&:hover {
|
||||
border-bottom-color: lighten(@primary-color, 30%);
|
||||
background: linear-gradient(90deg, transparent 10%, @background-color-light 70%, transparent);
|
||||
}
|
||||
}
|
||||
&-container {
|
||||
position: relative;
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
|
||||
width: 30px;
|
||||
|
||||
content: '';
|
||||
transition: box-shadow @animation-duration-slow;
|
||||
pointer-events: none;
|
||||
}
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
&.yo-list--ping-left {
|
||||
&::before {
|
||||
box-shadow: inset 10px 0 8px -8px fade(@black, 15%);
|
||||
}
|
||||
}
|
||||
&.yo-list--ping-right {
|
||||
&::after {
|
||||
box-shadow: inset -10px 0 8px -8px fade(@black, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
68
framework/web-react/src/assets/style/dark/lib/margin.less
Normal file
68
framework/web-react/src/assets/style/dark/lib/margin.less
Normal file
@@ -0,0 +1,68 @@
|
||||
@import (reference) '../extend.less';
|
||||
@margin-padding-position: ~'', ~'-top', ~'-left', ~'-right', ~'-bottom';
|
||||
@margin-padding-position-name: ~'', ~'t', ~'l', ~'r', ~'b';
|
||||
|
||||
.margin-padding (@i) when (@i <=length(@margin-padding-position)) {
|
||||
@position: extract(@margin-padding-position, @i);
|
||||
@name: extract(@margin-padding-position-name, @i);
|
||||
|
||||
.m@{name}-xl {
|
||||
margin@{position}: @padding-xl !important;
|
||||
}
|
||||
|
||||
.m@{name}-lg {
|
||||
margin@{position}: @padding-lg !important;
|
||||
}
|
||||
|
||||
.m@{name}-md {
|
||||
margin@{position}: @padding-md !important;
|
||||
}
|
||||
|
||||
.m@{name}-sm {
|
||||
margin@{position}: @padding-sm !important;
|
||||
}
|
||||
|
||||
.m@{name}-xs {
|
||||
margin@{position}: @padding-xs !important;
|
||||
}
|
||||
|
||||
.m@{name}-xxs {
|
||||
margin@{position}: @padding-xxs !important;
|
||||
}
|
||||
|
||||
.p@{name}-xl {
|
||||
padding@{position}: @padding-xl !important;
|
||||
}
|
||||
|
||||
.p@{name}-lg {
|
||||
padding@{position}: @padding-lg !important;
|
||||
}
|
||||
|
||||
.p@{name}-md {
|
||||
padding@{position}: @padding-md !important;
|
||||
}
|
||||
|
||||
.p@{name}-sm {
|
||||
padding@{position}: @padding-sm !important;
|
||||
}
|
||||
|
||||
.p@{name}-xs {
|
||||
padding@{position}: @padding-xs !important;
|
||||
}
|
||||
|
||||
.p@{name}-xxs {
|
||||
padding@{position}: @padding-xxs !important;
|
||||
}
|
||||
|
||||
.m@{name}-none {
|
||||
margin@{position}: 0 !important;
|
||||
}
|
||||
|
||||
.p@{name}-none {
|
||||
padding@{position}: 0 !important;
|
||||
}
|
||||
|
||||
.margin-padding(@i + 1);
|
||||
}
|
||||
|
||||
.margin-padding(1);
|
||||
41
framework/web-react/src/assets/style/dark/lib/modal.less
Normal file
41
framework/web-react/src/assets/style/dark/lib/modal.less
Normal file
@@ -0,0 +1,41 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-modal-content {
|
||||
background-color: fade(@primary-color, 50%);
|
||||
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
.ant-modal-header {
|
||||
padding: @padding-sm @padding-md;
|
||||
|
||||
border-bottom: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-modal-title {
|
||||
color: fade(@white, 85%);
|
||||
}
|
||||
.ant-modal-body {
|
||||
background-color: @component-background;
|
||||
}
|
||||
.ant-modal-footer {
|
||||
background-color: @component-background;
|
||||
}
|
||||
.ant-modal-close {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
|
||||
color: fade(@white, 75%);
|
||||
background-color: @error-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
.ant-modal-close-x {
|
||||
line-height: 26px;
|
||||
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
.ant-modal-mask {
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
8
framework/web-react/src/assets/style/dark/lib/page.less
Normal file
8
framework/web-react/src/assets/style/dark/lib/page.less
Normal file
@@ -0,0 +1,8 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-page {
|
||||
&--header {
|
||||
padding: @padding-md 0;
|
||||
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
7
framework/web-react/src/assets/style/dark/lib/radio.less
Normal file
7
framework/web-react/src/assets/style/dark/lib/radio.less
Normal file
@@ -0,0 +1,7 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-radio-button-wrapper-checked {
|
||||
&:not(.ant-radio-button-wrapper-disabled),
|
||||
&:not(.ant-radio-button-wrapper-disabled):hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
14
framework/web-react/src/assets/style/dark/lib/scrollbar.less
Normal file
14
framework/web-react/src/assets/style/dark/lib/scrollbar.less
Normal file
@@ -0,0 +1,14 @@
|
||||
@import (reference) '../extend.less';
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
|
||||
background-color: fade(@white, 10%);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: @border-radius-base;
|
||||
background-color: fade(@white, 30%);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: fade(@white, 50%);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-select-arrow {
|
||||
.anticon-down {
|
||||
transform: scaleY(.75);
|
||||
}
|
||||
}
|
||||
255
framework/web-react/src/assets/style/dark/lib/table.less
Normal file
255
framework/web-react/src/assets/style/dark/lib/table.less
Normal file
@@ -0,0 +1,255 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-query-bar {
|
||||
margin-bottom: @padding-xs;
|
||||
.ant-form-inline {
|
||||
.ant-form-item {
|
||||
margin-bottom: @padding-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-action-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-bottom: @padding-md;
|
||||
&--actions {
|
||||
>.ant-btn,
|
||||
>.ant-btn-group {
|
||||
+.ant-btn,
|
||||
+.ant-btn-group {
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table {
|
||||
.ant-table-container {
|
||||
&::before,
|
||||
&::after {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-thead {
|
||||
th.ant-table-column-has-sorters {
|
||||
&:hover {
|
||||
background-color: darken(@background-color-base, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
transition-property: background, border-bottom-color;
|
||||
}
|
||||
}
|
||||
>tr.ant-table-row:hover {
|
||||
>td {
|
||||
border-bottom-color: lighten(@primary-color, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-small {
|
||||
>.ant-table-content {
|
||||
>.ant-table-body {
|
||||
margin: 0;
|
||||
>table {
|
||||
>.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
background-color: @table-selected-row-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-sticky-scroll {
|
||||
display: none;
|
||||
}
|
||||
.ant-table-expanded-row>td {
|
||||
border-right: @border-width-base @border-style-base @table-border-color !important;
|
||||
}
|
||||
.yo-table {
|
||||
.ant-table {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.border-right-none {
|
||||
border-right-width: 0 !important;
|
||||
&:last-child {
|
||||
border-right-width: 1px !important;
|
||||
}
|
||||
}
|
||||
.ant-table-content {
|
||||
.ant-table-body {
|
||||
overflow-x: auto !important;
|
||||
>table {
|
||||
>.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
>.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-fixed-left {
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-fixed-right {
|
||||
.ant-table-fixed {
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-bordered {
|
||||
>.ant-table-container {
|
||||
border-top: @border-width-base @border-style-base @table-border-color;
|
||||
}
|
||||
}
|
||||
&--row-no {
|
||||
width: 30px !important;
|
||||
|
||||
background-color: @table-header-bg;
|
||||
}
|
||||
}
|
||||
.yo-table-actions {
|
||||
display: inline-block;
|
||||
|
||||
vertical-align: middle;
|
||||
&--inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
.yo-table--column-setting {
|
||||
width: 240px;
|
||||
.ant-dropdown-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.anticon-pushpin {
|
||||
transition: @animation-duration-slow;
|
||||
transform: rotate(45deg);
|
||||
|
||||
color: darken(@white, 40%);
|
||||
}
|
||||
.yo-table--fixed {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
.yo-menu-table {
|
||||
.ant-table {
|
||||
.ant-table-expand-icon-col {
|
||||
width: 28px;
|
||||
}
|
||||
.ant-table-row-expand-icon-cell {
|
||||
z-index: 1;
|
||||
|
||||
padding-right: 0 !important;
|
||||
|
||||
border-right: none !important;
|
||||
+.ant-table-cell {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>.ant-table-expanded-row>td {
|
||||
padding: 0;
|
||||
|
||||
border-right: none !important;
|
||||
.ant-table-wrapper {
|
||||
margin-bottom: -1px;
|
||||
|
||||
border: none;
|
||||
.ant-table {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.ant-table-container {
|
||||
border: none;
|
||||
.ant-table-row-expand-icon-cell {
|
||||
.ant-table-row-expand-icon {
|
||||
left: @padding-md;
|
||||
}
|
||||
+.ant-table-cell {
|
||||
padding-left: @padding-md;
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
&:last-child {
|
||||
>td {
|
||||
border-bottom: @border-width-base @border-style-base @table-border-color;
|
||||
}
|
||||
&:hover {
|
||||
>td {
|
||||
border-bottom-color: lighten(@primary-color, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-card {
|
||||
max-width: fit-content;
|
||||
margin: @padding-sm @padding-xs @padding-sm @padding-xl;
|
||||
|
||||
background: none;
|
||||
.ant-card-grid {
|
||||
width: 300px;
|
||||
height: 90px;
|
||||
padding: @padding-xs @padding-sm;
|
||||
|
||||
background-color: @card-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@import (reference) '../extend.less';
|
||||
.text-primary {
|
||||
color: @primary-color;
|
||||
}
|
||||
.text-info {
|
||||
color: @info-color;
|
||||
}
|
||||
.text-success {
|
||||
color: @success-color;
|
||||
}
|
||||
.text-processing {
|
||||
color: @processing-color;
|
||||
}
|
||||
.text-error,
|
||||
.text-danger {
|
||||
color: @error-color;
|
||||
}
|
||||
.text-highlight {
|
||||
color: @highlight-color;
|
||||
}
|
||||
.text-warning {
|
||||
color: @warning-color;
|
||||
}
|
||||
.text-gray {
|
||||
color: fade(@white, 50%);
|
||||
}
|
||||
.text-normal {
|
||||
color: fade(@white, 30%);
|
||||
}
|
||||
.text-white {
|
||||
color: @white;
|
||||
}
|
||||
.text-black {
|
||||
color: @black;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
@import (reference) '../extend.less';
|
||||
@import (reference) './text-color.less';
|
||||
.yo-tree-layout {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.ant-layout-sider {
|
||||
background-color: @component-background;
|
||||
.ant-layout-header {
|
||||
height: @layout-header-height - 20px;
|
||||
|
||||
background-color: @component-background;
|
||||
.header-actions {
|
||||
.ant-input-search {
|
||||
margin: (@layout-header-height - 20px - 32px) / 2 @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--collapsed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 4;
|
||||
|
||||
transform: translateX(-100%);
|
||||
&.open {
|
||||
transform: translateX(0);
|
||||
|
||||
box-shadow: 2px 0 8px fade(@black , 20%);
|
||||
}
|
||||
}
|
||||
&--bar {
|
||||
line-height: 20px;
|
||||
|
||||
height: 20px;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
text-align: right;
|
||||
>.anticon {
|
||||
margin-left: @padding-xs;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: fade(@white, 50%);
|
||||
&:hover {
|
||||
color: fade(@white, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&--content {
|
||||
position: absolute;
|
||||
top: @layout-header-height;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
width: 100%;
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
background-color: fade(@white, 30%);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:active {
|
||||
background-color: fade(@white, 45%);
|
||||
}
|
||||
}
|
||||
.ant-tree {
|
||||
.text-gray();
|
||||
}
|
||||
}
|
||||
29
framework/web-react/src/assets/style/dark/lib/upload.less
Normal file
29
framework/web-react/src/assets/style/dark/lib/upload.less
Normal file
@@ -0,0 +1,29 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-upload-list-text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.ant-upload-list-item {
|
||||
height: auto;
|
||||
margin-right: @padding-xs;
|
||||
}
|
||||
.ant-upload-list-item-info {
|
||||
position: relative;
|
||||
|
||||
padding: @padding-xxs @padding-xs;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
.anticon-paper-clip {
|
||||
top: 7.5px;
|
||||
}
|
||||
>span {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.ant-upload-list-item-card-actions {
|
||||
position: relative;
|
||||
|
||||
margin-left: @padding-xs;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@import (reference) '../extend.less';
|
||||
.hide {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.ellipsis {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ellipsis-line(@line) {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
|
||||
-webkit-line-clamp: @line;
|
||||
}
|
||||
.ellipsis-2 {
|
||||
.ellipsis-line(2);
|
||||
}
|
||||
.ellipsis-3 {
|
||||
.ellipsis-line(3);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
@import (reference) '../extend.less';
|
||||
|
||||
.width-height (@i) when (@i <=20) {
|
||||
|
||||
@n : @i * 50;
|
||||
@px : @n * 1px;
|
||||
|
||||
.w-@{n} {
|
||||
width: @px !important;
|
||||
}
|
||||
|
||||
.w-@{n}-min {
|
||||
min-width: @px !important;
|
||||
}
|
||||
|
||||
.w-@{n}-max {
|
||||
max-width: @px !important;
|
||||
}
|
||||
|
||||
.h-@{n} {
|
||||
height: @px !important;
|
||||
}
|
||||
|
||||
.h-@{n}-min {
|
||||
min-height: @px !important;
|
||||
}
|
||||
|
||||
.h-@{n}-max {
|
||||
max-height: @px !important;
|
||||
}
|
||||
|
||||
.w-@{n}-p {
|
||||
width: @n * 1% !important;
|
||||
}
|
||||
|
||||
.h-@{n}-p {
|
||||
height: @n * 1% !important;
|
||||
}
|
||||
|
||||
.width-height(@i + 1);
|
||||
}
|
||||
|
||||
.width-height(0);
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
704
framework/web-react/src/assets/style/dark/main.less
Normal file
704
framework/web-react/src/assets/style/dark/main.less
Normal file
@@ -0,0 +1,704 @@
|
||||
@import (reference) './extend.less';
|
||||
@import (reference) './lib/container.less';
|
||||
@import (reference) './lib/text-color.less';
|
||||
.yo-layout--spin {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: @layout-header-background;
|
||||
>.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
>div>.ant-spin {
|
||||
max-height: none;
|
||||
@-webkit-keyframes borderScale {
|
||||
0% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
50% {
|
||||
border: 25px solid transparent;
|
||||
}
|
||||
100% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
}
|
||||
@keyframes borderScale {
|
||||
0% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
50% {
|
||||
border: 25px solid transparent;
|
||||
}
|
||||
100% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
}
|
||||
.loader-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
box-sizing: content-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
margin-right: -50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-animation: borderScale 1s infinite ease-in-out;
|
||||
animation: borderScale 1s infinite ease-in-out;
|
||||
|
||||
color: white;
|
||||
border: 5px solid transparent;
|
||||
border-radius: 50%;
|
||||
>p {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin-right: -50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
>.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.ant-spin-blur {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-header {
|
||||
.header-actions {
|
||||
display: flex;
|
||||
.header-action {
|
||||
display: inline-block;
|
||||
|
||||
padding: 0 @padding-md;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: background-color;
|
||||
.anticon {
|
||||
font-size: @font-size-base + 6px;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: color;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .05);
|
||||
}
|
||||
// 特殊工具按钮
|
||||
.theme-toggle {
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 7px 0;
|
||||
|
||||
border-radius: 50%;
|
||||
&--real {
|
||||
position: relative;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
transition: @animation-duration-slow background-color;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: fade(@white, 60%);
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
content: '';
|
||||
transition: @animation-duration-slow transform;
|
||||
transform: scale(0);
|
||||
|
||||
border: 2px solid @layout-header-background;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&--imaginary {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: -6px;
|
||||
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
transition: @animation-duration-slow transform;
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
transform-origin: top right;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: @layout-header-background;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.theme-toggle {
|
||||
&--real {
|
||||
background-color: @white;
|
||||
&::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&--imaginary {
|
||||
transform: rotate(45deg) scaleY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-select-auto-complete {
|
||||
margin: (@layout-header-height - 10px - 30px) / 2 @padding-md;
|
||||
.ant-input-affix-wrapper {
|
||||
border: 0;
|
||||
background-color: fade(@white, 15%);
|
||||
&:focus,
|
||||
&-focused {
|
||||
background-color: fade(@white, 30%);
|
||||
}
|
||||
.ant-input {
|
||||
color: fade(@white, 85%);
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-input-suffix {
|
||||
.anticon {
|
||||
color: fade(@white, 60%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-container {
|
||||
z-index: 10;
|
||||
|
||||
width: 32px + @padding-sm * 2;
|
||||
height: @layout-header-height - 24px;
|
||||
margin: 2px 0;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
.user-container-inner {
|
||||
position: relative;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.user {
|
||||
&--base {
|
||||
line-height: @layout-header-height - 24px;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: @layout-header-height - 24px;
|
||||
padding: 0 @padding-sm;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
}
|
||||
&--avatar {
|
||||
box-shadow: 0 0 0 2px @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
position: relative;
|
||||
|
||||
overflow-y: auto;
|
||||
>.yo-tab-external-mount {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
>.ant-tabs {
|
||||
z-index: 5;
|
||||
|
||||
overflow: visible;
|
||||
>.ant-tabs-nav {
|
||||
margin-bottom: 0;
|
||||
|
||||
border-bottom: 0;
|
||||
background-color: @layout-header-background;
|
||||
box-shadow: 0 2px 12px fade(@black, 8%);
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
.ant-tabs-nav-container {
|
||||
height: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
line-height: 30px;
|
||||
|
||||
height: 30px;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
|
||||
transition: none;
|
||||
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
color: @white;
|
||||
}
|
||||
.ant-tabs-tab-btn {
|
||||
transition: none;
|
||||
}
|
||||
&.ant-tabs-tab-active {
|
||||
border-color: darken(@primary-color, 10%);
|
||||
background-color: @primary-color;
|
||||
.ant-tabs-tab-btn {
|
||||
color: @white;
|
||||
}
|
||||
.ant-tabs-tab-remove {
|
||||
color: fade(@white, 70%);
|
||||
&:hover {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout-tab-subtitle {
|
||||
line-height: 1;
|
||||
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
max-width: 150px;
|
||||
|
||||
transform: translateY(1px);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
opacity: .75;
|
||||
}
|
||||
+.ant-tabs-tab {
|
||||
margin-left: 0;
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -.5px;
|
||||
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
|
||||
content: '';
|
||||
transform: scaleX(.5);
|
||||
|
||||
background: linear-gradient(transparent, fade(@black, 30%), transparent);
|
||||
}
|
||||
}
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-md * 2 0 @padding-md;
|
||||
}
|
||||
.ant-tabs-tab-unclosable {
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-lg 0 @padding-md;
|
||||
}
|
||||
}
|
||||
.ant-tabs-tab-remove {
|
||||
line-height: 28px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
margin: 0;
|
||||
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.ant-tabs-nav-more {
|
||||
padding: 5px @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
>.yo-tab-external-mount-content {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
>.yo-tab-external-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.yo-tab-external-tabpane-inactive {
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
>iframe {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-sider {
|
||||
.ant-menu-inline {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
.yo-nav {
|
||||
padding-top: @padding-lg;
|
||||
padding-bottom: @padding-lg;
|
||||
&--row {
|
||||
padding: 1px 0;
|
||||
|
||||
column-gap: @padding-md;
|
||||
column-count: 3;
|
||||
}
|
||||
&--col {
|
||||
break-inside: avoid;
|
||||
}
|
||||
&--sub-item {
|
||||
}
|
||||
&--item-group {
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
|
||||
margin-bottom: @padding-xs;
|
||||
padding-top: @padding-xs * 2;
|
||||
|
||||
color: fade(@black, 35%);
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
}
|
||||
&--item {
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-bottom: @padding-xs;
|
||||
padding: @padding-xs @padding-sm;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-fast;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @white;
|
||||
&:hover {
|
||||
color: @white;
|
||||
border-color: @primary-color;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout-sider {
|
||||
height: 100%;
|
||||
|
||||
background-color: @layout-header-background;
|
||||
.ant-layout-sider-children {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.logo {
|
||||
font-size: @font-size-lg * 1.5;
|
||||
font-weight: 500;
|
||||
line-height: @layout-header-height + 10px;
|
||||
|
||||
z-index: 11;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
flex: 0 0 @layout-header-height + 10px;
|
||||
|
||||
height: @layout-header-height + 10px;
|
||||
padding: 0 @padding-md 0 @padding-lg;
|
||||
|
||||
color: @white;
|
||||
box-shadow: none;
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
span {
|
||||
margin-left: @padding-sm;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: opacity;
|
||||
}
|
||||
}
|
||||
&.ant-layout-sider-collapsed {
|
||||
.logo {
|
||||
span {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-sider-nav {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
flex: 1 1 100%;
|
||||
|
||||
box-shadow: 2px 0 8px fade(@black, 25%);
|
||||
&--app {
|
||||
font-size: @font-size-sm;
|
||||
|
||||
margin-top: @padding-sm;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
.text-gray();
|
||||
}
|
||||
.ant-menu {
|
||||
background-color: @layout-header-background;
|
||||
}
|
||||
.ant-menu-sub.ant-menu-inline {
|
||||
background-color: fade(@white, 4%);
|
||||
}
|
||||
}
|
||||
.swiper-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
.swiper-scrollbar {
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: opacity;
|
||||
|
||||
opacity: 0;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.swiper-scrollbar-drag {
|
||||
border-radius: @border-radius-base;
|
||||
background-color: fade(@white, 30%);
|
||||
}
|
||||
&:hover {
|
||||
.swiper-scrollbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
>.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
.ant-spin-blur {
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout--left-menu,
|
||||
.yo-layout--right-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.ant-layout-header {
|
||||
line-height: @layout-header-height - 20px;
|
||||
|
||||
z-index: 6;
|
||||
|
||||
height: @layout-header-height - 20px;
|
||||
padding: 0;
|
||||
|
||||
background-color: @white;
|
||||
>section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
line-height: @layout-header-height - 16px;
|
||||
|
||||
height: @layout-header-height - 20px;
|
||||
|
||||
color: fade(@black, 35%);
|
||||
.anticon {
|
||||
color: fade(@black, 35%);
|
||||
}
|
||||
&:hover {
|
||||
color: @icon-color-hover;
|
||||
background-color: fade(@black, 5%);
|
||||
.anticon {
|
||||
color: @icon-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
>section {
|
||||
>.ant-layout-sider {
|
||||
.yo-layout-sider();
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout--top-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@layout-header-height: 54px;
|
||||
.ant-layout-header {
|
||||
line-height: @layout-header-height;
|
||||
|
||||
z-index: 11;
|
||||
|
||||
flex: 0 0 @layout-header-height;
|
||||
|
||||
height: @layout-header-height;
|
||||
padding: 0;
|
||||
|
||||
background-color: @layout-header-background;
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
color: fade(@white, 60%);
|
||||
.anticon {
|
||||
color: fade(@white, 60%);
|
||||
}
|
||||
&:hover {
|
||||
color: @white;
|
||||
background-color: fade(@white, 20%);
|
||||
.anticon {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-container {
|
||||
margin: (@layout-header-height - 40px) / 2 0;
|
||||
}
|
||||
.logo {
|
||||
font-size: @font-size-lg * 1.5;
|
||||
font-weight: 500;
|
||||
line-height: @layout-header-height - 10px;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
height: @layout-header-height 10px;
|
||||
margin: 5px @padding-lg 5px 0;
|
||||
|
||||
color: @white;
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
span {
|
||||
margin-left: @padding-sm;
|
||||
}
|
||||
}
|
||||
.ant-menu-horizontal {
|
||||
line-height: @layout-header-height;
|
||||
|
||||
border-bottom: 0;
|
||||
>.ant-menu-submenu {
|
||||
top: 0;
|
||||
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
line-height: @layout-header-height - 16px;
|
||||
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--container {
|
||||
.ant-layout-header {
|
||||
.ant-menu-horizontal {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
.yo-tab-external-mount {
|
||||
>.ant-tabs {
|
||||
>.ant-tabs-bar {
|
||||
.ant-tabs-nav-container {
|
||||
width: @container-width - @padding-md * 2;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--container-fluid {
|
||||
.ant-layout-header {
|
||||
.ant-menu-horizontal {
|
||||
width: 800px;
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.ant-menu-horizontal {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-user-popover {
|
||||
width: 280px;
|
||||
padding-top: 0;
|
||||
.ant-popover-arrow {
|
||||
display: none;
|
||||
}
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.yo-popover-infinite-scroll {
|
||||
.ant-popover-inner-content {
|
||||
overflow-y: auto;
|
||||
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-avatar-info {
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 128px;
|
||||
margin: 0 auto;
|
||||
|
||||
border-radius: 50%;
|
||||
&--cover {
|
||||
font-size: @font-size-lg * 2;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-slow;
|
||||
|
||||
opacity: 0;
|
||||
color: @white;
|
||||
background-color: fade(@black, 50%);
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-avatar-cropper {
|
||||
overflow: hidden;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
background-color: #ccc;
|
||||
}
|
||||
.yo-avatar-preview {
|
||||
overflow: hidden;
|
||||
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
}
|
||||
42
framework/web-react/src/assets/style/dark/pages/home.less
Normal file
42
framework/web-react/src/assets/style/dark/pages/home.less
Normal file
@@ -0,0 +1,42 @@
|
||||
@import (reference) '../extend.less';
|
||||
.home-header {
|
||||
margin-bottom: @padding-md;
|
||||
padding: @padding-lg 0;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
.home-header-row {
|
||||
display: flex;
|
||||
}
|
||||
.home-header-content {
|
||||
margin-left: @padding-lg;
|
||||
h4 {
|
||||
span {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.home-container {
|
||||
.ant-card-meta-title {
|
||||
font-size: @font-size-base + 1px;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
height: 42px;
|
||||
|
||||
white-space: normal;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
.ant-row {
|
||||
line-height: 24px;
|
||||
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import './login.less';
|
||||
@import './home.less';
|
||||
@import './account-base.less';
|
||||
89
framework/web-react/src/assets/style/dark/pages/login.less
Normal file
89
framework/web-react/src/assets/style/dark/pages/login.less
Normal file
@@ -0,0 +1,89 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-login {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
>img {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
content: '';
|
||||
|
||||
background: fade(@black, 30%) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpiMLJ0+w8EDIwgAgQAAgwAUdAHrAFSJ6cAAAAASUVORK5CYII=);
|
||||
}
|
||||
&--placeholder {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 0;
|
||||
.container-sm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.ant-form {
|
||||
width: 300px;
|
||||
padding: @padding-lg;
|
||||
|
||||
border-radius: @border-radius-base + 2px;
|
||||
background: linear-gradient(45deg, @component-background, fade(@component-background, 80%));
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-form-item-label {
|
||||
padding: @padding-xs 0 0 !important;
|
||||
|
||||
transition: @animation-duration-base;
|
||||
transform: translate(0);
|
||||
>label {
|
||||
font-weight: normal !important;
|
||||
|
||||
color: fade(@white, 40%);
|
||||
}
|
||||
}
|
||||
&--label {
|
||||
.ant-form-item-label {
|
||||
transform: translate(11px, 28px);
|
||||
}
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper {
|
||||
color: fade(@white, 85%);
|
||||
border-width: 0 0 @border-width-base 0 !important;
|
||||
border-color: fade(@white, 10%);
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-input:hover,
|
||||
.ant-input:focus,
|
||||
.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover,
|
||||
.ant-input-affix-wrapper:focus,
|
||||
.ant-input-affix-wrapper-focused {
|
||||
border-width: 0 0 @border-width-base 0 !important;
|
||||
border-color: @primary-color;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ant-input::placeholder {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
45
framework/web-react/src/assets/style/dark/public.less
Normal file
45
framework/web-react/src/assets/style/dark/public.less
Normal file
@@ -0,0 +1,45 @@
|
||||
@import (reference) './extend.less';
|
||||
.yo-map {
|
||||
&-container {
|
||||
position: relative;
|
||||
|
||||
padding: @padding-sm;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @component-background;
|
||||
.amap-icon {
|
||||
img {
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--search {
|
||||
position: absolute;
|
||||
top: @padding-md;
|
||||
left: @padding-md;
|
||||
z-index: 20;
|
||||
|
||||
width: 25%;
|
||||
min-width: 300px;
|
||||
|
||||
background-color: @component-background;
|
||||
box-shadow: @box-shadow-base;
|
||||
}
|
||||
}
|
||||
.yo-adorn {
|
||||
&--house-top {
|
||||
height: 65px;
|
||||
|
||||
background: url('~assets/image/adorn/house-top-01.png') no-repeat bottom right;
|
||||
}
|
||||
}
|
||||
a.link-gray {
|
||||
color: fade(@white, 50%);
|
||||
&:hover {
|
||||
color: @link-hover-color;
|
||||
}
|
||||
&:active {
|
||||
color: @link-active-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
/** 在此文件夹中添加控制主题颜色的less文件 **/
|
||||
@@ -0,0 +1,5 @@
|
||||
@import '../index.less';
|
||||
@primary-color: #00a091;
|
||||
@error-color: @red-7;
|
||||
@font-size-base: 13px;
|
||||
@border-radius-base: 0;
|
||||
11
framework/web-react/src/assets/style/default/extend.less
Normal file
11
framework/web-react/src/assets/style/default/extend.less
Normal file
@@ -0,0 +1,11 @@
|
||||
@import '~antd/dist/antd.less';
|
||||
@padding-xxs: 4px;
|
||||
@padding-xl: 32px;
|
||||
body {
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
#root {
|
||||
transition: @animation-duration-slow opacity;
|
||||
|
||||
opacity: 1 !important;
|
||||
}
|
||||
35
framework/web-react/src/assets/style/default/index.less
Normal file
35
framework/web-react/src/assets/style/default/index.less
Normal file
@@ -0,0 +1,35 @@
|
||||
@import './extend.less';
|
||||
@import './lib/visibility.less';
|
||||
@import './lib/container.less';
|
||||
@import './lib/align.less';
|
||||
@import './lib/font-size.less';
|
||||
@import './lib/text-color.less';
|
||||
@import './lib/margin.less';
|
||||
@import './lib/width-height.less';
|
||||
@import './lib/scrollbar.less';
|
||||
@import './main.less';
|
||||
@import './lib/button.less';
|
||||
@import './lib/card.less';
|
||||
@import './lib/table.less';
|
||||
@import './lib/list.less';
|
||||
@import './lib/form.less';
|
||||
@import './lib/form-page.less';
|
||||
@import './lib/page.less';
|
||||
@import './lib/description.less';
|
||||
@import './lib/input.less';
|
||||
@import './lib/select.less';
|
||||
@import './lib/checkbox.less';
|
||||
@import './lib/radio.less';
|
||||
@import './lib/cascader.less';
|
||||
@import './lib/upload.less';
|
||||
@import './lib/dropdown.less';
|
||||
@import './lib/modal.less';
|
||||
@import './lib/tree-layout.less';
|
||||
@import './lib/authority-view.less';
|
||||
@import './lib/icon-selector.less';
|
||||
@import './lib/color-selector.less';
|
||||
@import './lib/anchor.less';
|
||||
@import './lib/disabled.less';
|
||||
@import './theme/primary.less';
|
||||
@import './public.less';
|
||||
@import './pages/index.less';
|
||||
@@ -0,0 +1,9 @@
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
11
framework/web-react/src/assets/style/default/lib/anchor.less
Normal file
11
framework/web-react/src/assets/style/default/lib/anchor.less
Normal file
@@ -0,0 +1,11 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-anchor-ink-ball {
|
||||
width: 2px;
|
||||
height: 28px;
|
||||
|
||||
transform: translate(-50%, -10px);
|
||||
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-authority-view {
|
||||
&--container {
|
||||
>.ant-descriptions-view {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.ant-descriptions-item-label {
|
||||
width: 150px;
|
||||
}
|
||||
.ant-descriptions {
|
||||
clear: both;
|
||||
|
||||
margin-bottom: @padding-sm;
|
||||
.ant-descriptions-view {
|
||||
overflow: visible;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.ant-descriptions-item-content {
|
||||
padding: @padding-sm @padding-md;
|
||||
.yo-authority-view--checkbox {
|
||||
display: inline-block;
|
||||
|
||||
width: 150px;
|
||||
margin: @padding-xxs 0;
|
||||
.ant-checkbox-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-card-grid {
|
||||
width: 25%;
|
||||
margin-bottom: @padding-sm;
|
||||
padding: @padding-xs;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.ant-card {
|
||||
margin-bottom: 0;
|
||||
|
||||
background-color: transparent;
|
||||
&-body {
|
||||
margin: -1px 0 0 -1px;
|
||||
padding: 0;
|
||||
}
|
||||
.ant-card-grid {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-btn {
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-card {
|
||||
margin-bottom: @padding-md;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-cascader-picker-arrow {
|
||||
svg {
|
||||
transform: scaleY(.75);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-checkbox-wrapper {
|
||||
margin-right: @padding-xs;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
+.ant-checkbox-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-select-dropdown {
|
||||
.chrome-picker {
|
||||
width: auto !important;
|
||||
margin: -@padding-xxs 0;
|
||||
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
.color-selector--palette {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: inset 0 0 0 @border-width-base @border-color-base, inset 0 0 0 3px @white;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
@import (reference) '../extend.less';
|
||||
@container-width: 1400px;
|
||||
.container-base {
|
||||
margin: 0 auto;
|
||||
padding: 0 @padding-md;
|
||||
}
|
||||
.container {
|
||||
width: @container-width;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.container {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.container-md {
|
||||
width: @container-width - 200px;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
.container-sm {
|
||||
width: @container-width - 400px;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
.container-xs {
|
||||
width: @container-width - 600px;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
.container-xxs {
|
||||
width: @container-width - 700px;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
.container-fluid {
|
||||
.container-base();
|
||||
}
|
||||
.container-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-descriptions-bordered {
|
||||
.ant-descriptions-view {
|
||||
>table {
|
||||
border-collapse: collapse;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-btn-primary-disabled,
|
||||
.ant-btn-primary.disabled,
|
||||
.ant-btn-primary[disabled],
|
||||
.ant-btn-primary-disabled:hover,
|
||||
.ant-btn-primary.disabled:hover,
|
||||
.ant-btn-primary[disabled]:hover,
|
||||
.ant-btn-primary-disabled:focus,
|
||||
.ant-btn-primary.disabled:focus,
|
||||
.ant-btn-primary[disabled]:focus,
|
||||
.ant-btn-primary-disabled:active,
|
||||
.ant-btn-primary.disabled:active,
|
||||
.ant-btn-primary[disabled]:active,
|
||||
.ant-btn-primary-disabled.active,
|
||||
.ant-btn-primary.disabled.active,
|
||||
.ant-btn-primary[disabled].active {
|
||||
opacity: .5;
|
||||
color: @btn-primary-color;
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
box-shadow: @btn-primary-shadow;
|
||||
text-shadow: @btn-text-shadow;
|
||||
}
|
||||
.ant-btn-danger-disabled,
|
||||
.ant-btn-danger.disabled,
|
||||
.ant-btn-danger[disabled],
|
||||
.ant-btn-danger-disabled:hover,
|
||||
.ant-btn-danger.disabled:hover,
|
||||
.ant-btn-danger[disabled]:hover,
|
||||
.ant-btn-danger-disabled:focus,
|
||||
.ant-btn-danger.disabled:focus,
|
||||
.ant-btn-danger[disabled]:focus,
|
||||
.ant-btn-danger-disabled:active,
|
||||
.ant-btn-danger.disabled:active,
|
||||
.ant-btn-danger[disabled]:active,
|
||||
.ant-btn-danger-disabled.active,
|
||||
.ant-btn-danger.disabled.active,
|
||||
.ant-btn-danger[disabled].active {
|
||||
opacity: .5;
|
||||
color: @btn-danger-color;
|
||||
border-color: @btn-danger-border;
|
||||
background-color: @btn-danger-bg;
|
||||
box-shadow: @btn-primary-shadow;
|
||||
text-shadow: @btn-text-shadow;
|
||||
}
|
||||
.ant-radio-button-wrapper-disabled,
|
||||
.ant-radio-button-wrapper-disabled:first-child,
|
||||
.ant-radio-button-wrapper-disabled:hover {
|
||||
opacity: .5;
|
||||
color: @radio-button-color;
|
||||
background-color: @radio-button-bg;
|
||||
}
|
||||
.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
|
||||
opacity: .5;
|
||||
color: @btn-primary-color;
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
box-shadow: @btn-primary-shadow;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-dropdown-trigger {
|
||||
.anticon-down {
|
||||
transform: scaleY(.75);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@import (reference) '../extend.less';
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
@import (reference) '../extend.less';
|
||||
body {
|
||||
font-weight: 100;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@btn-font-weight: 100;
|
||||
.ant-card-meta-title {
|
||||
font-weight: inherit;
|
||||
}
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
169
framework/web-react/src/assets/style/default/lib/form-page.less
Normal file
169
framework/web-react/src/assets/style/default/lib/form-page.less
Normal file
@@ -0,0 +1,169 @@
|
||||
@import (reference) '../extend.less';
|
||||
|
||||
.yo-form-page {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
|
||||
.yo-tab-external-mount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
|
||||
>.ant-tabs {
|
||||
>.ant-tabs-nav {
|
||||
margin-bottom: 0;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
background-color: @component-background;
|
||||
|
||||
&.ant-tabs-card-bar {
|
||||
.ant-tabs-nav-container {
|
||||
height: @tabs-card-height + @padding-xs;
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
|
||||
.ant-tabs-extra-content {
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
transition: none;
|
||||
|
||||
.ant-btn();
|
||||
|
||||
&:hover {
|
||||
border-color: @btn-default-border;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
line-height: @btn-height-base;
|
||||
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
z-index: 2;
|
||||
|
||||
color: @btn-primary-color;
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
|
||||
&:hover {
|
||||
color: @btn-primary-color;
|
||||
border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.yo-tab-external-mount-content {
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
>.yo-tab-external-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&.yo-tab-external-tabpane-inactive {
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--bar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 200;
|
||||
|
||||
&--with-tab {
|
||||
position: absolute;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-right: 7px;
|
||||
|
||||
>.container-fluid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
~.yo-tab-external-mount {
|
||||
>.yo-tab-external-mount-content {
|
||||
>.yo-tab-external-tabpane {
|
||||
padding-bottom: @padding-xs * 2 + @btn-height-base + @border-width-base * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--bar-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: @padding-xs @padding-md;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
background-color: fade(@component-background, 80%);
|
||||
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
>:first-child {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
margin-left: @padding-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&--body {
|
||||
>.ant-card-body {
|
||||
padding: 0;
|
||||
|
||||
>section {
|
||||
padding: @padding-lg;
|
||||
|
||||
>h5 {
|
||||
padding-left: @padding-md;
|
||||
|
||||
border-left: @padding-xs @border-style-base @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
|
||||
&--horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&--header {
|
||||
padding: @padding-md 0;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
}
|
||||
401
framework/web-react/src/assets/style/default/lib/form.less
Normal file
401
framework/web-react/src/assets/style/default/lib/form.less
Normal file
@@ -0,0 +1,401 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-form {
|
||||
&--fixed {
|
||||
width: 660px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
color: darken(@white, 40%);
|
||||
}
|
||||
.h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.h4 {
|
||||
font-size: 15px;
|
||||
}
|
||||
.yo-form-group {
|
||||
margin-bottom: @padding-md;
|
||||
}
|
||||
.ant-form-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-bottom: -1px;
|
||||
padding: @padding-xs @padding-md;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
background-color: @component-background;
|
||||
|
||||
@box-shadow-focused: 0 0 0 2px fade(@primary-color, 50%);
|
||||
@control-background: lighten(@black, 95%) !important;
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
.ant-form-item-control {
|
||||
text-align: right;
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-number,
|
||||
.ant-mentions,
|
||||
.ant-select-selector,
|
||||
.ant-input-group-addon,
|
||||
.ant-cascader-picker,
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-picker {
|
||||
z-index: 1;
|
||||
|
||||
text-align: left;
|
||||
|
||||
color: lighten(@black, 10%);
|
||||
border: 0;
|
||||
background-color: @control-background;
|
||||
}
|
||||
.ant-mentions {
|
||||
textarea {
|
||||
background-color: @control-background;
|
||||
}
|
||||
}
|
||||
.focus {
|
||||
z-index: 2 !important;
|
||||
|
||||
box-shadow: @box-shadow-focused;
|
||||
}
|
||||
.unfoucs {
|
||||
z-index: 1 !important;
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
.ant-input {
|
||||
&:focus {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
.ant-input-affix-wrapper {
|
||||
>.ant-input {
|
||||
&:focus {
|
||||
.unfoucs();
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-input-number-focused,
|
||||
.ant-mentions-focused {
|
||||
.focus();
|
||||
}
|
||||
.ant-select-focused,
|
||||
.ant-select-open {
|
||||
z-index: 2;
|
||||
.ant-select-selection {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
.ant-cascader-picker:focus {
|
||||
.ant-cascader-input {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
.ant-input-affix-wrapper:focus,
|
||||
.ant-input-affix-wrapper-focused {
|
||||
.focus();
|
||||
}
|
||||
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) {
|
||||
.ant-select-selector {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
.ant-picker-focused {
|
||||
.focus();
|
||||
}
|
||||
.ant-input-group {
|
||||
.ant-row-flex {
|
||||
.ant-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.ant-input-group-addon {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
.ant-cascader-picker-clear {
|
||||
background-color: @control-background;
|
||||
}
|
||||
}
|
||||
.ant-form-item-label {
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
|
||||
margin-right: @padding-md;
|
||||
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
>label {
|
||||
color: lighten(@black, 10%);
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-control {
|
||||
flex: 0 0 61.8%;
|
||||
|
||||
width: 61.8%;
|
||||
min-width: 220px;
|
||||
}
|
||||
.yo-form--fluid {
|
||||
.ant-form-item-control {
|
||||
flex: 0 0 100%;
|
||||
|
||||
width: 100%;
|
||||
|
||||
text-align: inherit;
|
||||
}
|
||||
}
|
||||
.yo-form--short {
|
||||
.ant-form-item-control {
|
||||
flex: 0 0 38.2%;
|
||||
|
||||
width: 38.2%;
|
||||
}
|
||||
}
|
||||
// 上下布局
|
||||
.yo-form--vertical {
|
||||
display: block;
|
||||
.ant-form-item-control {
|
||||
text-align: left;
|
||||
}
|
||||
&-radio {
|
||||
.ant-radio-wrapper {
|
||||
line-height: @padding-lg;
|
||||
|
||||
display: block;
|
||||
|
||||
margin-right: 0;
|
||||
+.ant-radio-wrapper {
|
||||
margin-top: @padding-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-control-wrapper {
|
||||
margin-left: @padding-lg;
|
||||
}
|
||||
.ant-form-explain {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.yo-form-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin-bottom: -1px;
|
||||
padding: @padding-md;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
background-color: @white;
|
||||
&:hover {
|
||||
background-color: darken(@white, 1%);
|
||||
}
|
||||
&:active {
|
||||
background-color: darken(@white, 3%);
|
||||
}
|
||||
&--title {
|
||||
font-size: @font-size-base + 1px;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
&--content {
|
||||
flex: 1;
|
||||
|
||||
text-align: right;
|
||||
|
||||
color: fade(@black, 35%);
|
||||
}
|
||||
&--right-icon {
|
||||
margin-left: @padding-xs;
|
||||
|
||||
color: fade(@black, 50%);
|
||||
}
|
||||
}
|
||||
&.yo-form--no-border {
|
||||
.ant-form-item {
|
||||
padding: @padding-md 0;
|
||||
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.yo-form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-modal-form {
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
.yo-form {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
margin: 0;
|
||||
padding: @padding-sm @padding-md @padding-xs;
|
||||
}
|
||||
.yo-form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-form-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
&:first-child {
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-drawer-form {
|
||||
.ant-drawer-wrapper-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-drawer-header {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.ant-drawer-body {
|
||||
position: relative;
|
||||
|
||||
flex: 1 1 100%;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
.yo-drawer-form--body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: @border-width-base + 20px + @padding-md * 2;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
width: 100%;
|
||||
padding: @padding-lg;
|
||||
}
|
||||
.ant-drawer-footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
padding: 10px @padding-md;
|
||||
|
||||
text-align: right;
|
||||
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
background: @component-background;
|
||||
button+button {
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form {
|
||||
fieldset {
|
||||
margin-bottom: @padding-lg;
|
||||
padding: @padding-md;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
legend {
|
||||
display: inline-block;
|
||||
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
.ant-form-horizontal {
|
||||
.ant-form-item-label {
|
||||
line-height: 1.5;
|
||||
|
||||
margin-right: @padding-xs;
|
||||
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.ant-form-vertical {
|
||||
.ant-form-item-label {
|
||||
>label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-required {
|
||||
&::before {
|
||||
content: '' !important;
|
||||
vertical-align: middle;
|
||||
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 5px solid @highlight-color;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.yo-form-page {
|
||||
.ant-form {
|
||||
.ant-radio-button-wrapper {
|
||||
margin-right: @padding-xs;
|
||||
margin-bottom: @padding-xs;
|
||||
|
||||
border-left: @border-width-base @border-style-base @border-color-base;
|
||||
&.ant-radio-button-wrapper-checked {
|
||||
border-left-color: @primary-color;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-filter-item {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
margin-bottom: 0;
|
||||
.ant-tag-checkable {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
.ant-radio-button-wrapper {
|
||||
border: 0 !important;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
color: @red-6;
|
||||
}
|
||||
}
|
||||
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
||||
border-color: @red-6;
|
||||
background-color: @red-6;
|
||||
&:hover {
|
||||
border-color: @red-5;
|
||||
background-color: @red-5;
|
||||
}
|
||||
&:active {
|
||||
border-color: @red-7;
|
||||
background-color: @red-7;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-icon-selector {
|
||||
.ant-drawer-wrapper-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-drawer-body {
|
||||
position: relative;
|
||||
|
||||
flex: 1 1 100%;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
.ant-tabs {
|
||||
height: 100%;
|
||||
.ant-tabs-content-left {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
.ant-tabs-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: @padding-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-card {
|
||||
margin: 0;
|
||||
}
|
||||
.ant-card-grid {
|
||||
width: 25%;
|
||||
|
||||
text-align: center;
|
||||
>span {
|
||||
font-size: @font-size-sm;
|
||||
|
||||
display: block;
|
||||
|
||||
margin: @padding-xxs -@padding-lg 0;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
color: fade(@black, 50%);
|
||||
}
|
||||
&.yo-icon--selected {
|
||||
color: @white;
|
||||
background-color: @primary-color;
|
||||
>span {
|
||||
color: fade(@white, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-addon {
|
||||
padding: 0 @padding-xs;
|
||||
}
|
||||
95
framework/web-react/src/assets/style/default/lib/list.less
Normal file
95
framework/web-react/src/assets/style/default/lib/list.less
Normal file
@@ -0,0 +1,95 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-list-bordered {
|
||||
border-color: @border-color-split;
|
||||
background-color: @white;
|
||||
}
|
||||
.yo-list {
|
||||
@title-color: lighten(@black, 70%);
|
||||
@value-color: lighten(@black, 30%);
|
||||
&-content--h {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&--item {
|
||||
margin-left: @padding-xl;
|
||||
>span {
|
||||
line-height: 20px;
|
||||
|
||||
color: @title-color;
|
||||
}
|
||||
>p {
|
||||
line-height: 22px;
|
||||
|
||||
margin-top: @padding-xxs;
|
||||
margin-bottom: 0;
|
||||
|
||||
color: @value-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-pagination {
|
||||
margin: @padding-md 0;
|
||||
}
|
||||
.ant-descriptions {
|
||||
.ant-descriptions-item-label {
|
||||
color: @title-color;
|
||||
}
|
||||
.ant-descriptions-item-content {
|
||||
color: @value-color;
|
||||
}
|
||||
.ant-descriptions-row {
|
||||
&:last-child {
|
||||
>td {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--scroll {
|
||||
position: relative;
|
||||
|
||||
overflow-x: auto;
|
||||
}
|
||||
.ant-list-items {
|
||||
min-width: 1000px;
|
||||
}
|
||||
.ant-list-item {
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: background, border-bottom-color;
|
||||
&:hover {
|
||||
border-bottom-color: lighten(@primary-color, 30%);
|
||||
background: linear-gradient(90deg, transparent 10%, @background-color-light 70%, transparent);
|
||||
}
|
||||
}
|
||||
&-container {
|
||||
position: relative;
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
|
||||
width: 30px;
|
||||
|
||||
content: '';
|
||||
transition: box-shadow @animation-duration-slow;
|
||||
pointer-events: none;
|
||||
}
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
&.yo-list--ping-left {
|
||||
&::before {
|
||||
box-shadow: inset 10px 0 8px -8px fade(@black, 15%);
|
||||
}
|
||||
}
|
||||
&.yo-list--ping-right {
|
||||
&::after {
|
||||
box-shadow: inset -10px 0 8px -8px fade(@black, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
68
framework/web-react/src/assets/style/default/lib/margin.less
Normal file
68
framework/web-react/src/assets/style/default/lib/margin.less
Normal file
@@ -0,0 +1,68 @@
|
||||
@import (reference) '../extend.less';
|
||||
@margin-padding-position: ~'', ~'-top', ~'-left', ~'-right', ~'-bottom';
|
||||
@margin-padding-position-name: ~'', ~'t', ~'l', ~'r', ~'b';
|
||||
|
||||
.margin-padding (@i) when (@i <=length(@margin-padding-position)) {
|
||||
@position: extract(@margin-padding-position, @i);
|
||||
@name: extract(@margin-padding-position-name, @i);
|
||||
|
||||
.m@{name}-xl {
|
||||
margin@{position}: @padding-xl !important;
|
||||
}
|
||||
|
||||
.m@{name}-lg {
|
||||
margin@{position}: @padding-lg !important;
|
||||
}
|
||||
|
||||
.m@{name}-md {
|
||||
margin@{position}: @padding-md !important;
|
||||
}
|
||||
|
||||
.m@{name}-sm {
|
||||
margin@{position}: @padding-sm !important;
|
||||
}
|
||||
|
||||
.m@{name}-xs {
|
||||
margin@{position}: @padding-xs !important;
|
||||
}
|
||||
|
||||
.m@{name}-xxs {
|
||||
margin@{position}: @padding-xxs !important;
|
||||
}
|
||||
|
||||
.p@{name}-xl {
|
||||
padding@{position}: @padding-xl !important;
|
||||
}
|
||||
|
||||
.p@{name}-lg {
|
||||
padding@{position}: @padding-lg !important;
|
||||
}
|
||||
|
||||
.p@{name}-md {
|
||||
padding@{position}: @padding-md !important;
|
||||
}
|
||||
|
||||
.p@{name}-sm {
|
||||
padding@{position}: @padding-sm !important;
|
||||
}
|
||||
|
||||
.p@{name}-xs {
|
||||
padding@{position}: @padding-xs !important;
|
||||
}
|
||||
|
||||
.p@{name}-xxs {
|
||||
padding@{position}: @padding-xxs !important;
|
||||
}
|
||||
|
||||
.m@{name}-none {
|
||||
margin@{position}: 0 !important;
|
||||
}
|
||||
|
||||
.p@{name}-none {
|
||||
padding@{position}: 0 !important;
|
||||
}
|
||||
|
||||
.margin-padding(@i + 1);
|
||||
}
|
||||
|
||||
.margin-padding(1);
|
||||
41
framework/web-react/src/assets/style/default/lib/modal.less
Normal file
41
framework/web-react/src/assets/style/default/lib/modal.less
Normal file
@@ -0,0 +1,41 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-modal-content {
|
||||
background-color: fade(@primary-color, 50%);
|
||||
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
.ant-modal-header {
|
||||
padding: @padding-sm @padding-md;
|
||||
|
||||
border-bottom: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-modal-title {
|
||||
color: fade(@white, 85%);
|
||||
}
|
||||
.ant-modal-body {
|
||||
background-color: @component-background;
|
||||
}
|
||||
.ant-modal-footer {
|
||||
background-color: @component-background;
|
||||
}
|
||||
.ant-modal-close {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
|
||||
color: fade(@white, 75%);
|
||||
background-color: @error-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
.ant-modal-close-x {
|
||||
line-height: 26px;
|
||||
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
.ant-modal-mask {
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-page {
|
||||
&--header {
|
||||
padding: @padding-md 0;
|
||||
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-radio-button-wrapper-checked {
|
||||
&:not(.ant-radio-button-wrapper-disabled),
|
||||
&:not(.ant-radio-button-wrapper-disabled):hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@import (reference) '../extend.less';
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
|
||||
background-color: fade(@black, 10%);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: @border-radius-base;
|
||||
background-color: fade(@black, 30%);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: fade(@black, 50%);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-select-arrow {
|
||||
.anticon-down {
|
||||
transform: scaleY(.75);
|
||||
}
|
||||
}
|
||||
255
framework/web-react/src/assets/style/default/lib/table.less
Normal file
255
framework/web-react/src/assets/style/default/lib/table.less
Normal file
@@ -0,0 +1,255 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-query-bar {
|
||||
margin-bottom: @padding-xs;
|
||||
.ant-form-inline {
|
||||
.ant-form-item {
|
||||
margin-bottom: @padding-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-action-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-bottom: @padding-md;
|
||||
&--actions {
|
||||
>.ant-btn,
|
||||
>.ant-btn-group {
|
||||
+.ant-btn,
|
||||
+.ant-btn-group {
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table {
|
||||
.ant-table-container {
|
||||
&::before,
|
||||
&::after {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-thead {
|
||||
th.ant-table-column-has-sorters {
|
||||
&:hover {
|
||||
background-color: darken(@background-color-base, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
transition-property: background, border-bottom-color;
|
||||
}
|
||||
}
|
||||
>tr.ant-table-row:hover {
|
||||
>td {
|
||||
border-bottom-color: lighten(@primary-color, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-small {
|
||||
>.ant-table-content {
|
||||
>.ant-table-body {
|
||||
margin: 0;
|
||||
>table {
|
||||
>.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
background-color: @table-selected-row-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-sticky-scroll {
|
||||
display: none;
|
||||
}
|
||||
.ant-table-expanded-row>td {
|
||||
border-right: @border-width-base @border-style-base @table-border-color !important;
|
||||
}
|
||||
.yo-table {
|
||||
.ant-table {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.border-right-none {
|
||||
border-right-width: 0 !important;
|
||||
&:last-child {
|
||||
border-right-width: 1px !important;
|
||||
}
|
||||
}
|
||||
.ant-table-content {
|
||||
.ant-table-body {
|
||||
overflow-x: auto !important;
|
||||
>table {
|
||||
>.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
>.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-fixed-left {
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-fixed-right {
|
||||
.ant-table-fixed {
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-bordered {
|
||||
>.ant-table-container {
|
||||
border-top: @border-width-base @border-style-base @table-border-color;
|
||||
}
|
||||
}
|
||||
&--row-no {
|
||||
width: 30px !important;
|
||||
|
||||
background-color: @table-header-bg;
|
||||
}
|
||||
}
|
||||
.yo-table-actions {
|
||||
display: inline-block;
|
||||
|
||||
vertical-align: middle;
|
||||
&--inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
.yo-table--column-setting {
|
||||
width: 240px;
|
||||
.ant-dropdown-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.anticon-pushpin {
|
||||
transition: @animation-duration-slow;
|
||||
transform: rotate(45deg);
|
||||
|
||||
color: darken(@white, 40%);
|
||||
}
|
||||
.yo-table--fixed {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
.yo-menu-table {
|
||||
.ant-table {
|
||||
.ant-table-expand-icon-col {
|
||||
width: 28px;
|
||||
}
|
||||
.ant-table-row-expand-icon-cell {
|
||||
z-index: 1;
|
||||
|
||||
padding-right: 0 !important;
|
||||
|
||||
border-right: none !important;
|
||||
+.ant-table-cell {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>.ant-table-expanded-row>td {
|
||||
padding: 0;
|
||||
|
||||
border-right: none !important;
|
||||
.ant-table-wrapper {
|
||||
margin-bottom: -1px;
|
||||
|
||||
border: none;
|
||||
.ant-table {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.ant-table-container {
|
||||
border: none;
|
||||
.ant-table-row-expand-icon-cell {
|
||||
.ant-table-row-expand-icon {
|
||||
left: @padding-md;
|
||||
}
|
||||
+.ant-table-cell {
|
||||
padding-left: @padding-md;
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
&:last-child {
|
||||
>td {
|
||||
border-bottom: @border-width-base @border-style-base @table-border-color;
|
||||
}
|
||||
&:hover {
|
||||
>td {
|
||||
border-bottom-color: lighten(@primary-color, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-card {
|
||||
max-width: fit-content;
|
||||
margin: @padding-sm @padding-xs @padding-sm @padding-xl;
|
||||
|
||||
background: none;
|
||||
.ant-card-grid {
|
||||
width: 300px;
|
||||
height: 90px;
|
||||
padding: @padding-xs @padding-sm;
|
||||
|
||||
background-color: @card-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@import (reference) '../extend.less';
|
||||
.text-primary {
|
||||
color: @primary-color;
|
||||
}
|
||||
.text-info {
|
||||
color: @info-color;
|
||||
}
|
||||
.text-success {
|
||||
color: @success-color;
|
||||
}
|
||||
.text-processing {
|
||||
color: @processing-color;
|
||||
}
|
||||
.text-error,
|
||||
.text-danger {
|
||||
color: @error-color;
|
||||
}
|
||||
.text-highlight {
|
||||
color: @highlight-color;
|
||||
}
|
||||
.text-warning {
|
||||
color: @warning-color;
|
||||
}
|
||||
.text-gray {
|
||||
color: fade(@black, 50%);
|
||||
}
|
||||
.text-normal {
|
||||
color: fade(@black, 30%);
|
||||
}
|
||||
.text-white {
|
||||
color: @white;
|
||||
}
|
||||
.text-black {
|
||||
color: @black;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
@import (reference) '../extend.less';
|
||||
@import (reference) './text-color.less';
|
||||
.yo-tree-layout {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.ant-layout-sider {
|
||||
background-color: @component-background;
|
||||
.ant-layout-header {
|
||||
height: @layout-header-height - 20px;
|
||||
|
||||
background-color: @component-background;
|
||||
.header-actions {
|
||||
.ant-input-search {
|
||||
margin: (@layout-header-height - 20px - 32px) / 2 @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--collapsed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 4;
|
||||
|
||||
transform: translateX(-100%);
|
||||
&.open {
|
||||
transform: translateX(0);
|
||||
|
||||
box-shadow: 2px 0 8px fade(@black , 20%);
|
||||
}
|
||||
}
|
||||
&--bar {
|
||||
line-height: 20px;
|
||||
|
||||
height: 20px;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
text-align: right;
|
||||
>.anticon {
|
||||
margin-left: @padding-xs;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: fade(@black, 50%);
|
||||
&:hover {
|
||||
color: fade(@black, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&--content {
|
||||
position: absolute;
|
||||
top: @layout-header-height;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
width: 100%;
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
background-color: fade(@black, 30%);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:active {
|
||||
background-color: fade(@black, 45%);
|
||||
}
|
||||
}
|
||||
.ant-tree {
|
||||
.text-gray();
|
||||
}
|
||||
}
|
||||
29
framework/web-react/src/assets/style/default/lib/upload.less
Normal file
29
framework/web-react/src/assets/style/default/lib/upload.less
Normal file
@@ -0,0 +1,29 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-upload-list-text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.ant-upload-list-item {
|
||||
height: auto;
|
||||
margin-right: @padding-xs;
|
||||
}
|
||||
.ant-upload-list-item-info {
|
||||
position: relative;
|
||||
|
||||
padding: @padding-xxs @padding-xs;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
.anticon-paper-clip {
|
||||
top: 7.5px;
|
||||
}
|
||||
>span {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.ant-upload-list-item-card-actions {
|
||||
position: relative;
|
||||
|
||||
margin-left: @padding-xs;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@import (reference) '../extend.less';
|
||||
.hide {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.ellipsis {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ellipsis-line(@line) {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
|
||||
-webkit-line-clamp: @line;
|
||||
}
|
||||
.ellipsis-2 {
|
||||
.ellipsis-line(2);
|
||||
}
|
||||
.ellipsis-3 {
|
||||
.ellipsis-line(3);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
@import (reference) '../extend.less';
|
||||
|
||||
.width-height (@i) when (@i <=20) {
|
||||
|
||||
@n : @i * 50;
|
||||
@px : @n * 1px;
|
||||
|
||||
.w-@{n} {
|
||||
width: @px !important;
|
||||
}
|
||||
|
||||
.w-@{n}-min {
|
||||
min-width: @px !important;
|
||||
}
|
||||
|
||||
.w-@{n}-max {
|
||||
max-width: @px !important;
|
||||
}
|
||||
|
||||
.h-@{n} {
|
||||
height: @px !important;
|
||||
}
|
||||
|
||||
.h-@{n}-min {
|
||||
min-height: @px !important;
|
||||
}
|
||||
|
||||
.h-@{n}-max {
|
||||
max-height: @px !important;
|
||||
}
|
||||
|
||||
.w-@{n}-p {
|
||||
width: @n * 1% !important;
|
||||
}
|
||||
|
||||
.h-@{n}-p {
|
||||
height: @n * 1% !important;
|
||||
}
|
||||
|
||||
.width-height(@i + 1);
|
||||
}
|
||||
|
||||
.width-height(0);
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
698
framework/web-react/src/assets/style/default/main.less
Normal file
698
framework/web-react/src/assets/style/default/main.less
Normal file
@@ -0,0 +1,698 @@
|
||||
@import (reference) './extend.less';
|
||||
@import (reference) './lib/container.less';
|
||||
@import (reference) './lib/text-color.less';
|
||||
.yo-layout--spin {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: @layout-header-background;
|
||||
>.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
>div>.ant-spin {
|
||||
max-height: none;
|
||||
@-webkit-keyframes borderScale {
|
||||
0% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
50% {
|
||||
border: 25px solid transparent;
|
||||
}
|
||||
100% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
}
|
||||
@keyframes borderScale {
|
||||
0% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
50% {
|
||||
border: 25px solid transparent;
|
||||
}
|
||||
100% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
}
|
||||
.loader-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
box-sizing: content-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
margin-right: -50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-animation: borderScale 1s infinite ease-in-out;
|
||||
animation: borderScale 1s infinite ease-in-out;
|
||||
|
||||
color: white;
|
||||
border: 5px solid transparent;
|
||||
border-radius: 50%;
|
||||
>p {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin-right: -50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
>.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.ant-spin-blur {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-header {
|
||||
.header-actions {
|
||||
display: flex;
|
||||
.header-action {
|
||||
display: inline-block;
|
||||
|
||||
padding: 0 @padding-md;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: background-color;
|
||||
.anticon {
|
||||
font-size: @font-size-base + 6px;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: color;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .05);
|
||||
}
|
||||
// 特殊工具按钮
|
||||
.theme-toggle {
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 7px 0;
|
||||
|
||||
border-radius: 50%;
|
||||
&--real {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
transition: @animation-duration-slow background-color;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: fade(@white, 60%);
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
content: '';
|
||||
transition: @animation-duration-slow transform;
|
||||
transform: scale(1);
|
||||
|
||||
border: 2px solid @layout-header-background;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&--imaginary {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: -6px;
|
||||
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
transition: @animation-duration-slow transform;
|
||||
transform: rotate(45deg) scaleY(0);
|
||||
transform-origin: top right;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: #334454;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.theme-toggle {
|
||||
&--real {
|
||||
background-color: @white;
|
||||
&::before {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
&--imaginary {
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-select-auto-complete {
|
||||
margin: (@layout-header-height - 10px - 30px) / 2 @padding-md;
|
||||
.ant-input-affix-wrapper {
|
||||
border: 0;
|
||||
background-color: fade(@white, 15%);
|
||||
&:focus,
|
||||
&-focused {
|
||||
background-color: fade(@white, 30%);
|
||||
}
|
||||
.ant-input {
|
||||
color: fade(@white, 85%);
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-input-suffix {
|
||||
.anticon {
|
||||
color: fade(@white, 60%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-container {
|
||||
z-index: 10;
|
||||
|
||||
width: 32px + @padding-sm * 2;
|
||||
height: @layout-header-height - 24px;
|
||||
margin: 2px 0;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
.user-container-inner {
|
||||
position: relative;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.user {
|
||||
&--base {
|
||||
line-height: @layout-header-height - 24px;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: @layout-header-height - 24px;
|
||||
padding: 0 @padding-sm;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
}
|
||||
&--avatar {
|
||||
box-shadow: 0 0 0 2px @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
position: relative;
|
||||
|
||||
overflow-y: auto;
|
||||
>.yo-tab-external-mount {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
>.ant-tabs {
|
||||
z-index: 5;
|
||||
|
||||
overflow: visible;
|
||||
>.ant-tabs-nav {
|
||||
margin-bottom: 0;
|
||||
|
||||
border-bottom: 0;
|
||||
background-color: @card-background;
|
||||
box-shadow: 0 2px 12px fade(@black, 8%);
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
.ant-tabs-nav-container {
|
||||
height: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
line-height: 30px;
|
||||
|
||||
height: 30px;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
|
||||
transition: none;
|
||||
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
color: @black;
|
||||
}
|
||||
.ant-tabs-tab-btn {
|
||||
transition: none;
|
||||
}
|
||||
&.ant-tabs-tab-active {
|
||||
border-color: darken(@primary-color, 10%);
|
||||
background-color: @primary-color;
|
||||
.ant-tabs-tab-btn {
|
||||
color: @white;
|
||||
}
|
||||
.ant-tabs-tab-remove {
|
||||
color: fade(@white, 70%);
|
||||
&:hover {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout-tab-subtitle {
|
||||
line-height: 1;
|
||||
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
max-width: 150px;
|
||||
|
||||
transform: translateY(1px);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
opacity: .75;
|
||||
}
|
||||
+.ant-tabs-tab {
|
||||
margin-left: 0;
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -.5px;
|
||||
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
|
||||
content: '';
|
||||
transform: scaleX(.5);
|
||||
|
||||
background: linear-gradient(transparent, fade(@black, 30%), transparent);
|
||||
}
|
||||
}
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-md * 2 0 @padding-md;
|
||||
}
|
||||
.ant-tabs-tab-unclosable {
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-lg 0 @padding-md;
|
||||
}
|
||||
}
|
||||
.ant-tabs-tab-remove {
|
||||
line-height: 28px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
margin: 0;
|
||||
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.ant-tabs-nav-more {
|
||||
padding: 5px @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
>.yo-tab-external-mount-content {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
>.yo-tab-external-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.yo-tab-external-tabpane-inactive {
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
>iframe {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-sider {
|
||||
.ant-menu-inline {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
.yo-nav {
|
||||
padding-top: @padding-lg;
|
||||
padding-bottom: @padding-lg;
|
||||
&--row {
|
||||
padding: 1px 0;
|
||||
|
||||
column-gap: @padding-md;
|
||||
column-count: 3;
|
||||
}
|
||||
&--col {
|
||||
break-inside: avoid;
|
||||
}
|
||||
&--sub-item {
|
||||
}
|
||||
&--item-group {
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
|
||||
margin-bottom: @padding-xs;
|
||||
padding-top: @padding-xs * 2;
|
||||
|
||||
color: fade(@black, 35%);
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
}
|
||||
&--item {
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-bottom: @padding-xs;
|
||||
padding: @padding-xs @padding-sm;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-fast;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @white;
|
||||
&:hover {
|
||||
color: @white;
|
||||
border-color: @primary-color;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout-sider {
|
||||
height: 100%;
|
||||
|
||||
background-color: @white;
|
||||
.ant-layout-sider-children {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.logo {
|
||||
font-size: @font-size-lg * 1.5;
|
||||
font-weight: 500;
|
||||
line-height: @layout-header-height + 10px;
|
||||
|
||||
z-index: 11;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
flex: 0 0 @layout-header-height + 10px;
|
||||
|
||||
height: @layout-header-height + 10px;
|
||||
padding: 0 @padding-md 0 @padding-lg;
|
||||
|
||||
color: @white;
|
||||
box-shadow: none;
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
span {
|
||||
margin-left: @padding-sm;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: opacity;
|
||||
}
|
||||
}
|
||||
&.ant-layout-sider-collapsed {
|
||||
.logo {
|
||||
span {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-sider-nav {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
flex: 1 1 100%;
|
||||
|
||||
box-shadow: 2px 0 8px fade(@black, 25%);
|
||||
&--app {
|
||||
font-size: @font-size-sm;
|
||||
|
||||
margin-top: @padding-sm;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
.text-gray();
|
||||
}
|
||||
}
|
||||
.swiper-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
.swiper-scrollbar {
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: opacity;
|
||||
|
||||
opacity: 0;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.swiper-scrollbar-drag {
|
||||
border-radius: @border-radius-base;
|
||||
background-color: fade(@black, 30%);
|
||||
}
|
||||
&:hover {
|
||||
.swiper-scrollbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
>.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
.ant-spin-blur {
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout--left-menu,
|
||||
.yo-layout--right-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.ant-layout-header {
|
||||
line-height: @layout-header-height - 20px;
|
||||
|
||||
z-index: 6;
|
||||
|
||||
height: @layout-header-height - 20px;
|
||||
padding: 0;
|
||||
|
||||
background-color: @white;
|
||||
>section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
line-height: @layout-header-height - 16px;
|
||||
|
||||
height: @layout-header-height - 20px;
|
||||
|
||||
color: fade(@black, 35%);
|
||||
.anticon {
|
||||
color: fade(@black, 35%);
|
||||
}
|
||||
&:hover {
|
||||
color: @icon-color-hover;
|
||||
background-color: fade(@black, 5%);
|
||||
.anticon {
|
||||
color: @icon-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
>section {
|
||||
>.ant-layout-sider {
|
||||
.yo-layout-sider();
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout--top-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@layout-header-height: 54px;
|
||||
.ant-layout-header {
|
||||
line-height: @layout-header-height;
|
||||
|
||||
z-index: 11;
|
||||
|
||||
flex: 0 0 @layout-header-height;
|
||||
|
||||
height: @layout-header-height;
|
||||
padding: 0;
|
||||
|
||||
background-color: @layout-header-background;
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
color: fade(@white, 60%);
|
||||
.anticon {
|
||||
color: fade(@white, 60%);
|
||||
}
|
||||
&:hover {
|
||||
color: @white;
|
||||
background-color: fade(@white, 20%);
|
||||
.anticon {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-container {
|
||||
margin: (@layout-header-height - 40px) / 2 0;
|
||||
}
|
||||
.logo {
|
||||
font-size: @font-size-lg * 1.5;
|
||||
font-weight: 500;
|
||||
line-height: @layout-header-height - 10px;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
height: @layout-header-height 10px;
|
||||
margin: 5px @padding-lg 5px 0;
|
||||
|
||||
color: @white;
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
span {
|
||||
margin-left: @padding-sm;
|
||||
}
|
||||
}
|
||||
.ant-menu-horizontal {
|
||||
line-height: @layout-header-height;
|
||||
|
||||
border-bottom: 0;
|
||||
>.ant-menu-submenu {
|
||||
top: 0;
|
||||
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
line-height: @layout-header-height - 16px;
|
||||
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--container {
|
||||
.ant-layout-header {
|
||||
.ant-menu-horizontal {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
.yo-tab-external-mount {
|
||||
>.ant-tabs {
|
||||
>.ant-tabs-bar {
|
||||
.ant-tabs-nav-container {
|
||||
width: @container-width - @padding-md * 2;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--container-fluid {
|
||||
.ant-layout-header {
|
||||
.ant-menu-horizontal {
|
||||
width: 800px;
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.ant-menu-horizontal {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-user-popover {
|
||||
width: 280px;
|
||||
padding-top: 0;
|
||||
.ant-popover-arrow {
|
||||
display: none;
|
||||
}
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.yo-popover-infinite-scroll {
|
||||
.ant-popover-inner-content {
|
||||
overflow-y: auto;
|
||||
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-avatar-info {
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 128px;
|
||||
margin: 0 auto;
|
||||
|
||||
border-radius: 50%;
|
||||
&--cover {
|
||||
font-size: @font-size-lg * 2;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-slow;
|
||||
|
||||
opacity: 0;
|
||||
color: @white;
|
||||
background-color: fade(@black, 50%);
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-avatar-cropper {
|
||||
overflow: hidden;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
background-color: #ccc;
|
||||
}
|
||||
.yo-avatar-preview {
|
||||
overflow: hidden;
|
||||
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
}
|
||||
42
framework/web-react/src/assets/style/default/pages/home.less
Normal file
42
framework/web-react/src/assets/style/default/pages/home.less
Normal file
@@ -0,0 +1,42 @@
|
||||
@import (reference) '../extend.less';
|
||||
.home-header {
|
||||
margin-bottom: @padding-md;
|
||||
padding: @padding-lg 0;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
.home-header-row {
|
||||
display: flex;
|
||||
}
|
||||
.home-header-content {
|
||||
margin-left: @padding-lg;
|
||||
h4 {
|
||||
span {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.home-container {
|
||||
.ant-card-meta-title {
|
||||
font-size: @font-size-base + 1px;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
height: 42px;
|
||||
|
||||
white-space: normal;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
.ant-row {
|
||||
line-height: 24px;
|
||||
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import './login.less';
|
||||
@import './home.less';
|
||||
@import './account-base.less';
|
||||
@@ -0,0 +1,89 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-login {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
>img {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
content: '';
|
||||
|
||||
background: fade(@black, 30%) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpiMLJ0+w8EDIwgAgQAAgwAUdAHrAFSJ6cAAAAASUVORK5CYII=);
|
||||
}
|
||||
&--placeholder {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 0;
|
||||
.container-sm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.ant-form {
|
||||
width: 300px;
|
||||
padding: @padding-lg;
|
||||
|
||||
border-radius: @border-radius-base + 2px;
|
||||
background: linear-gradient(45deg, @component-background, fade(@component-background, 80%));
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-form-item-label {
|
||||
padding: @padding-xs 0 0 !important;
|
||||
|
||||
transition: @animation-duration-base;
|
||||
transform: translate(0);
|
||||
>label {
|
||||
font-weight: normal !important;
|
||||
|
||||
color: fade(@black, 40%);
|
||||
}
|
||||
}
|
||||
&--label {
|
||||
.ant-form-item-label {
|
||||
transform: translate(11px, 28px);
|
||||
}
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper {
|
||||
color: fade(@black, 85%);
|
||||
border-width: 0 0 @border-width-base 0 !important;
|
||||
border-color: fade(@black, 10%);
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-input:hover,
|
||||
.ant-input:focus,
|
||||
.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover,
|
||||
.ant-input-affix-wrapper:focus,
|
||||
.ant-input-affix-wrapper-focused {
|
||||
border-width: 0 0 @border-width-base 0 !important;
|
||||
border-color: @primary-color;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ant-input::placeholder {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
45
framework/web-react/src/assets/style/default/public.less
Normal file
45
framework/web-react/src/assets/style/default/public.less
Normal file
@@ -0,0 +1,45 @@
|
||||
@import (reference) './extend.less';
|
||||
.yo-map {
|
||||
&-container {
|
||||
position: relative;
|
||||
|
||||
padding: @padding-sm;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @component-background;
|
||||
.amap-icon {
|
||||
img {
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--search {
|
||||
position: absolute;
|
||||
top: @padding-md;
|
||||
left: @padding-md;
|
||||
z-index: 20;
|
||||
|
||||
width: 25%;
|
||||
min-width: 300px;
|
||||
|
||||
background-color: @component-background;
|
||||
box-shadow: @box-shadow-base;
|
||||
}
|
||||
}
|
||||
.yo-adorn {
|
||||
&--house-top {
|
||||
height: 65px;
|
||||
|
||||
background: url('~assets/image/adorn/house-top-01.png') no-repeat bottom right;
|
||||
}
|
||||
}
|
||||
a.link-gray {
|
||||
color: fade(@black, 50%);
|
||||
&:hover {
|
||||
color: @link-hover-color;
|
||||
}
|
||||
&:active {
|
||||
color: @link-active-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
/** 在此文件夹中添加控制主题颜色的less文件 **/
|
||||
@@ -0,0 +1,5 @@
|
||||
@import '../index.less';
|
||||
@primary-color: #007bff;
|
||||
@font-size-base: 13px;
|
||||
@border-radius-base: 0;
|
||||
@border-color-split: hsv(0, 0, 90%);
|
||||
196
framework/web-react/src/common/api/index.js
Normal file
196
framework/web-react/src/common/api/index.js
Normal file
@@ -0,0 +1,196 @@
|
||||
/**
|
||||
* api
|
||||
* v1.2
|
||||
*/
|
||||
|
||||
import axios from 'axios'
|
||||
import { token } from 'common/token'
|
||||
import status from './status'
|
||||
/**
|
||||
* 最终直接根据url名称调用接口方法
|
||||
* 例如
|
||||
* import { api } from '@/api'
|
||||
* api.getItemGroupType(parmas).then(...)
|
||||
*/
|
||||
import urls from './requests'
|
||||
import { message as Message, notification } from 'antd'
|
||||
|
||||
const STATUS = status
|
||||
|
||||
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/api' : process.env.REACT_APP_BASE_URL
|
||||
|
||||
const initInstance = (options) => {
|
||||
const instance = axios
|
||||
.create({
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + token.value
|
||||
},
|
||||
...options
|
||||
})
|
||||
|
||||
instance.interceptors.response.use((res) => {
|
||||
if (res.data.status === STATUS.Unauthorized) {
|
||||
handlerUnauthorized()
|
||||
}
|
||||
return res
|
||||
}, (err) => {
|
||||
return Promise.reject(err)
|
||||
})
|
||||
return instance
|
||||
}
|
||||
|
||||
const errerCodes = [STATUS.BadRequest, STATUS.InternalServerError, STATUS.Forbidden]
|
||||
|
||||
const errorNotification = ({ code, message }) => {
|
||||
switch (message.constructor) {
|
||||
case Array:
|
||||
message.forEach(p => {
|
||||
setTimeout(() => {
|
||||
notification.error({
|
||||
duration: 30,
|
||||
message: p.field,
|
||||
description: p.messages.join('/'),
|
||||
})
|
||||
})
|
||||
})
|
||||
break
|
||||
default:
|
||||
notification.error({
|
||||
duration: 30,
|
||||
message: code || '错误',
|
||||
description: message,
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const errorMessage = (message) => {
|
||||
Message.error(message)
|
||||
}
|
||||
|
||||
const handlerUnauthorized = () => {
|
||||
token.value = ''
|
||||
window.location.replace('/login')
|
||||
}
|
||||
|
||||
const api = {}
|
||||
|
||||
for (let key in urls) {
|
||||
|
||||
const item = urls[key]
|
||||
let url = '',
|
||||
method = 'get',
|
||||
options = {}
|
||||
if (item.constructor === String) {
|
||||
url = item
|
||||
} else if (item.constructor === Array) {
|
||||
url = item[0]
|
||||
if (item[1]) {
|
||||
method = item[1].toLowerCase()
|
||||
}
|
||||
if (item[2]) {
|
||||
options = item[2]
|
||||
}
|
||||
} else if (item.constructor === Object) {
|
||||
url = item.url
|
||||
if (item.method) {
|
||||
method = item.method.toLowerCase()
|
||||
}
|
||||
}
|
||||
|
||||
api[`${key}Await`] = function (params = {}) {
|
||||
if (method === 'post') {
|
||||
return initInstance(options).post(url, params)
|
||||
} else {
|
||||
let _params = [],
|
||||
_url = url
|
||||
Object.keys(params).forEach(key => {
|
||||
const value = params[key]
|
||||
if (value) {
|
||||
switch (value.constructor) {
|
||||
case Array:
|
||||
_params.push(...value.map(p => `${key}=${p}`))
|
||||
break
|
||||
default:
|
||||
_params.push(`${key}=${value}`)
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
if (_params.length) {
|
||||
_url += '?' + _params.join('&')
|
||||
}
|
||||
return initInstance(options).get(_url)
|
||||
}
|
||||
}
|
||||
|
||||
api[key] = function (params = {}) {
|
||||
return new Promise((reslove, reject) => {
|
||||
api[`${key}Await`](params)
|
||||
.then((res) => {
|
||||
const { data } = res
|
||||
const isFile = [ArrayBuffer, Blob].includes(data.constructor)
|
||||
const result = isFile ? res : data
|
||||
|
||||
// 错误的返回码,以通知的形式弹出
|
||||
if (errerCodes.indexOf(data.code) >= 0) {
|
||||
errorNotification(data)
|
||||
reject(result)
|
||||
}
|
||||
|
||||
// 非文件,返回码正确,但是结果失败,以消息的形式弹出
|
||||
else if (!isFile && !data.success) {
|
||||
errorMessage(data.message)
|
||||
reject(result)
|
||||
}
|
||||
|
||||
// 未登录
|
||||
else if (data.code === STATUS.Unauthorized) {
|
||||
handlerUnauthorized()
|
||||
}
|
||||
|
||||
else {
|
||||
reslove(result)
|
||||
}
|
||||
})
|
||||
.catch(({ response }) => {
|
||||
const { data, status } = response
|
||||
if (data.constructor === String) {
|
||||
errorNotification({
|
||||
message: data,
|
||||
code: status
|
||||
})
|
||||
} else {
|
||||
errorNotification(data)
|
||||
}
|
||||
if (data.code === STATUS.Unauthorized) {
|
||||
handlerUnauthorized()
|
||||
}
|
||||
reject(data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
api[key].url = axios.defaults.baseURL + url
|
||||
api[key].key = key
|
||||
}
|
||||
|
||||
/**
|
||||
* 并发请求,与axios.all方式相同
|
||||
* 但是使用的接口函数为this.$api.[接口名]E
|
||||
*/
|
||||
api.$queue = function (queue) {
|
||||
return new Promise((reslove) => {
|
||||
axios.all(queue).then((results) => {
|
||||
const res = results.map(p => p.data)
|
||||
reslove(res)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export {
|
||||
axios,
|
||||
urls,
|
||||
api,
|
||||
STATUS
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
const urls = {
|
||||
houseCodeAdd: ['/houseCode/add', 'post'],
|
||||
houseCodeEdit: ['/houseCode/edit', 'post'],
|
||||
houseCodePage: ['/houseCode/page', 'post'],
|
||||
houseCodeNo: '/houseCode/getNextNoByCode',
|
||||
houseCodeDetail: '/houseCode/detail'
|
||||
}
|
||||
|
||||
export default urls
|
||||
@@ -0,0 +1,10 @@
|
||||
const urls = {
|
||||
houseCompanyPage: ['/houseCompany/page', 'post'],
|
||||
houseCompanyAdd: ['/houseCompany/add', 'post'],
|
||||
houseCompanyEdit: ['/houseCompany/edit', 'post'],
|
||||
houseCompanyDelete: ['/houseCompany/delete', 'post'],
|
||||
houseCompanyDetail: '/houseCompany/detail',
|
||||
houseCompanyList: '/houseCompany/list'
|
||||
}
|
||||
|
||||
export default urls
|
||||
@@ -0,0 +1,8 @@
|
||||
const urls = {
|
||||
houseInfoGetByTaskId: ['/houseInfo/getByTaskId', 'get'],
|
||||
houseInfoSave: ['houseInfo/save', 'post'],
|
||||
houseInfoCheck: ['houseInfo/check', 'post'],
|
||||
houseInfoSubmitToCheck: ['/houseInfo/submitToCheck', 'post']
|
||||
}
|
||||
|
||||
export default urls
|
||||
@@ -0,0 +1,7 @@
|
||||
const urls = {
|
||||
houseLogList: '/houseLog/list',
|
||||
houseLogListByInfoId: '/houseLog/listByInfoId',
|
||||
houseLogListByTaskId: '/houseLog/listByTaskId',
|
||||
}
|
||||
|
||||
export default urls
|
||||
@@ -0,0 +1,15 @@
|
||||
const urls = {
|
||||
houseMemberPage: ['/houseMember/page', 'post'],
|
||||
houseMemberAdd: ['/houseMember/add', 'post'],
|
||||
houseMemberEdit: ['/houseMember/edit', 'post'],
|
||||
houseMemberDelete: ['/houseMember/delete', 'post'],
|
||||
houseMemberDetail: ['/houseMember/detail', 'detail'],
|
||||
houseMemberOwnRole: ['/houseMember/ownRole', 'get'],
|
||||
houseMemberOwnData: ['/houseMember/ownData', 'get'],
|
||||
houseMemberGrantData: ['/houseMember/grantData', 'post'],
|
||||
houseMemberChangeStatus: ['/houseMember/changeStatus', 'post'],
|
||||
houseMemberDefaultRole: ['/houseMember/defaultRole', 'get'],
|
||||
houseMemberDefaultRoleList: ['/houseMember/defaultRoleRange', 'get']
|
||||
}
|
||||
|
||||
export default urls
|
||||
@@ -0,0 +1,12 @@
|
||||
const urls = {
|
||||
getHouseProjectPage: ['/houseProjectInfo/page', 'post'],
|
||||
houseProejctAdd: ['/houseProjectInfo/add', 'post'],
|
||||
houseProejctEdit: ['/houseProjectInfo/edit', 'post'],
|
||||
houseProejctDelete: ['/houseProjectInfo/delete', 'post'],
|
||||
houseProejctDetail: ['/houseProjectInfo/detail', 'get'],
|
||||
houseProjectNextSort: ['/houseProjectInfo/nextSort', 'get'],
|
||||
houseProjectList: ['houseProjectInfo/list', 'get'],
|
||||
houseProjectGetById: ['houseProjectInfo/getById', 'get']
|
||||
}
|
||||
|
||||
export default urls
|
||||
@@ -0,0 +1,6 @@
|
||||
const urls = {
|
||||
houseQueryPage: ['/houseQuery/page', 'post'],
|
||||
houseQueryDetail: ['/houseQuery/detail', 'get'],
|
||||
}
|
||||
|
||||
export default urls
|
||||
@@ -0,0 +1,8 @@
|
||||
const urls = {
|
||||
houseSelect: ['/houseSelector/select', 'post'],
|
||||
houseSelectRevoke: ['/houseSelector/revoke', 'post'],
|
||||
houseSelectorPage: ['/houseSelector/selectorPage', 'post'],
|
||||
houseSelectedPage: ['/houseSelector/selectedPage', 'post'],
|
||||
}
|
||||
|
||||
export default urls
|
||||
@@ -0,0 +1,6 @@
|
||||
const urls = {
|
||||
houseTaskPage: ['/houseTask/page', 'post'],
|
||||
houseTaskEdit: ['/houseTask/edit', 'post'],
|
||||
}
|
||||
|
||||
export default urls
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user