w-vue-middle
Version:
统一公共服务组件
974 lines (897 loc) • 19.2 kB
text/less
/*
* @Author: Jason Liu
* @Date: 2022-03-24 15:17:35
* @Desc: 主题样式
*/
::-webkit-scrollbar {
}
.no_border {
border: none;
}
input {
outline: medium;
&:focus {
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*点击高亮的颜色*/
}
&:single-button {
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*点击高亮的颜色*/
}
}
.all_body {
height: 100%;
overflow-y: auto;
}
.main_content(@mainColor, @secondaryColor, @pressColor, @headerColor, @checkedColor, @navigationColor,@rowCurrent) {
.ant-notification-notice-description {
overflow: auto;
}
.w-title__content {
&::before {
border-radius: 4px;
}
}
// layout布局
.ant-layout {
background: #eff2fd;
// 头部栏位
.ant-layout-header {
height: 48px;
line-height: 48px;
padding: 0 8px 0 12px;
background: @mainColor;
.app_logo {
overflow: hidden;
&:hover {
overflow: auto;
}
display: flex;
.svg-icon {
font-size: 38px;
vertical-align: middle;
margin-right: 4px;
}
font-size: 20px;
font-weight: 600;
color: #ffffff;
.title {
float: left;
height: 48px;
}
}
}
.ant-layout-sider {
width: 210px;
background: #fff;
overflow: auto;
padding-top: 16px;
height: calc(100vh - 80px);
.ant-menu {
.ant-menu-item,
.ant-menu-submenu-title {
height: 48px;
line-height: 48px;
margin: initial;
font-size: 16px;
font-weight: 400;
color: @primaryText;
.svg-icon {
margin-right: 5px;
font-size: 18px;
color: #7e89a4;
}
&.ant-menu-item-selected {
color: #fff;
background: linear-gradient(
90deg,
@mainColor 0%,
@secondaryColor 100%
);
.svg-icon {
color: #fff;
}
}
&::after {
display: none;
}
&:hover {
background: linear-gradient(
90deg,
@mainColor 0%,
@secondaryColor 100%
);
color: #fff;
}
}
.ant-menu-submenu {
&.menu_active {
color: #fff;
background: linear-gradient(
90deg,
@mainColor 0%,
@secondaryColor 100%
);
> .ant-menu-submenu-title {
color: #fff;
}
.svg-icon {
color: #fff;
}
}
}
&.ant-menu-inline-collapsed {
width: 60px;
.ant-menu-item,
.ant-menu-submenu-title {
text-align: center;
padding: 0 22px ;
.svg-icon + span {
width: 0;
display: inherit;
opacity: 0;
}
}
}
}
}
&.sub_app {
.app_container {
height: calc(100vh);
}
}
.app_container {
padding: 12px;
height: calc(100vh - 86px);
overflow: hidden;
position: relative;
.full-height-and-width {
width: 100%;
height: 100%;
z-index: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
.app {
min-width: auto;
.win_container {
padding: 12px;
height: calc(100vh - 80px);
.vxe-cell--checkbox {
padding-left: 0;
}
}
}
}
.ant-layout-footer {
height: 48px;
line-height: 48px;
padding: 0 24px;
text-align: right;
background: #fff;
border-top: 1px solid @borderColor;
}
}
}
.ant-menu-dark {
background: @mainColor;
height: 48px;
line-height: 48px;
&.ant-menu-submenu-popup {
background: #fff;
}
.ant-menu-sub {
background: #fff;
font-size: 16px;
font-weight: 500;
color: #ffffff;
&.ant-menu-submenu-content {
background: #fff;
.ant-menu-item {
color: @primaryText;
font-size: 14px;
font-weight: 400;
text-align: left;
margin: 0;
.svg-icon {
color: #7e89a4;
}
&.ant-menu-item-active,
&.ant-menu-item-selected {
color: #2d5afa;
background: #eef2fd;
.svg-icon {
color: #2d5afa;
}
}
}
}
}
.ant-menu-item,
.ant-menu-submenu,
.ant-menu-submenu-title {
text-align: center;
font-size: 15px;
font-weight: 500;
color: #ffffff;
.anticon {
margin-right: 0;
position: absolute;
margin-left: 4px;
top: 50%;
font-size: 12px;
margin-top: -6px;
}
&:hover {
background: @pressColor;
}
&.ant-menu-item-selected {
background: @pressColor;
}
&.ant-menu-submenu-selected {
background: @pressColor;
}
}
}
// 卡片
.ant-card {
&.ant-card-small {
.ant-card-head {
position: relative;
font-size: 14px;
border: none;
padding-left: 28px;
font-weight: 600;
color: @primaryText;
&::before {
content: "";
position: absolute;
width: 4px;
height: 16px;
background: linear-gradient(
90deg,
@mainColor 0%,
@secondaryColor 100%
);
border-radius: 2px;
left: 16px;
top: 50%;
margin-top: -8px;
}
}
.ant-card-body {
padding: 0 12px;
}
}
}
// 表单容器
.ant-form {
.ant-form-item {
font-size: 14px;
font-weight: 400;
color: @primaryText;
margin-bottom: 8px;
}
}
.ant-btn-group {
&.ant-btn-group-sm {
.ant-btn {
font-size: 12px;
font-weight: 400;
}
}
}
// 按钮
.ant-btn {
font-size: 14px;
font-weight: 500;
color: @primaryText;
> .anticon + span {
margin-left: 4px;
}
&.ant-btn-sm {
font-size: 12px;
font-weight: 400;
}
&.ant-btn-primary {
color: #fff;
background-color: @mainColor;
border-color: @mainColor;
&:hover,
&:focus {
background-color: @secondaryColor;
border-color: @secondaryColor;
}
&.ant-btn-background-ghost {
color: @secondaryColor;
background-color: #eaeefe ;
border-color: @secondaryColor;
}
&:disabled {
color: rgba(0, 0, 0, 0.25);
background-color: #f5f5f5;
border-color: #d9d9d9;
text-shadow: none;
box-shadow: none;
}
}
&.ant-btn-danger {
color: #fff;
background-color: @Danger;
border-color: @Danger;
&.ant-btn-background-ghost {
color: @Danger;
background-color: rgba(251, 244, 244, 1) ;
border-color: @Danger;
}
}
&.ant-btn-link {
color: @mainColor;
padding: 0 6px;
&:hover,
&:focus {
color: @secondaryColor;
}
&:disabled {
color: rgba(0, 0, 0, 0.25);
}
}
}
.ant-dropdown {
a,
span {
color: #000000;
font-size: 14px;
}
.ant-dropdown-menu-item-disabled {
a {
color: inherit;
}
}
}
//步骤
.ant-steps {
.ant-steps-item {
&.ant-steps-item-active {
.ant-steps-item-icon {
background: @mainColor;
border-color: @mainColor;
}
}
&.ant-steps-item-finish {
.ant-steps-item-icon {
border-color: #00ab45;
> .ant-steps-icon {
color: #00ab45;
font-weight: bold;
}
}
> .ant-steps-item-container
> .ant-steps-item-content
> .ant-steps-item-title {
color: #00ab45;
&::after {
background-color: #00ab45;
}
}
}
}
}
.a_link {
color: @mainColor;
padding: 0 5px;
}
.a_danger {
color: #ec0000 ;
padding: 0 5px;
}
// 单选框
.ant-radio-group {
.ant-radio-button-wrapper {
font-size: 14px;
font-weight: 400;
color: #000000;
&.ant-radio-button-wrapper-checked {
&::before {
background-color: @mainColor;
}
color: #fff;
background: @mainColor;
border-color: @mainColor;
}
}
&.ant-radio-group-small {
.ant-radio-button-wrapper {
font-size: 12px;
}
}
}
.ant-radio-wrapper {
.ant-radio-inner {
width: 18px;
height: 18px;
border-width: 2px;
}
span.ant-radio + * {
font-size: 14px;
font-weight: 400;
color: #000000;
}
&.ant-radio-wrapper-checked {
::after {
background: #fff;
}
.ant-radio-inner {
background: @mainColor;
border-color: @mainColor;
}
span.ant-radio + * {
color: @mainColor;
}
}
}
.ant-checkbox-wrapper {
color: @primaryText;
.ant-checkbox + span {
padding-left: 4px;
}
}
//复选框
.ant-checkbox {
.ant-checkbox-inner {
border: 2px solid #d9d9d9;
width: 18px;
height: 18px;
}
&.ant-checkbox-checked {
.ant-checkbox-inner {
background-color: @mainColor;
border-color: @mainColor;
}
}
&.ant-checkbox-disabled {
.ant-checkbox-inner::after {
border-color: #fff;
}
}
}
// 日期
.ant-calendar {
.ant-calendar-time-picker-btn, .ant-calendar-today-btn {
color: #1890ff;
}
}
//表格
.vxe-table {
.vxe-table--fixed-wrapper {
.vxe-table--header {
background-color: #eef2fd;
font-size: 14px;
color: @primaryText;
.vxe-header--column {
padding: 0;
height: 40px;
line-height: 40px;
font-weight: 500;
overflow: hidden;
}
}
}
.vxe-body--column {
height: 40px;
min-height: 40px;
color: @primaryText;
padding: initial;
&:hover {
cursor: pointer;
}
.ant-btn-link {
padding: 0 3px;
}
}
.vxe-table--main-wrapper {
.vxe-table--header-wrapper {
background-color: #eef2fd;
font-size: 14px;
color: @primaryText;
.vxe-header--column {
padding: 0;
height: 40px;
line-height: 40px;
font-weight: 500;
}
}
.vxe-table--body-wrapper {
.vxe-body--row {
&.row--current {
background: @rowCurrent;
.vxe-body--column {
color: @mainColor;
}
}
&.row--error {
background: rgba(236, 0, 0, 0.3);
}
}
.vxe-body--column {
height: 40px;
min-height: 40px;
color: @primaryText;
padding: initial;
&:hover {
cursor: pointer;
}
.ant-btn-link {
padding: 0 3px;
}
}
}
}
.col--ellipsis {
height: 40px;
line-height: 40px;
}
.vxe-cell {
.vxe-icon-checkbox-checked {
}
.vxe-cell--checkbox.is--checked,
.vxe-cell--checkbox.is--indeterminate {
color: @mainColor;
.vxe-checkbox--icon {
&.vxe-icon-checkbox-unchecked {
&::before {
content: "";
}
}
color: @mainColor;
}
.vxe-icon-checkbox-indeterminate,
.vxe-icon-checkbox-checked {
color: @mainColor;
}
.vxe-checkbox--checked-icon,
.vxe-checkbox--indeterminate-icon {
&::before {
border-color: @mainColor;
background-color: @mainColor;
}
}
}
.vxe-tree-cell {
.ant-dropdown-trigger {
width: 100%;
display: inline-block;
}
}
.vxe-icon-checkbox-indeterminate,
.vxe-icon-checkbox-checked {
color: @mainColor;
}
.vxe-checkbox--checked-icon,
.vxe-checkbox--indeterminate-icon {
&::before {
border-color: @mainColor;
background-color: @mainColor;
}
}
}
}
//分页
.vxe-pager {
font-size: 14px;
font-weight: 400;
color: #000000;
.vxe-pager--jump-next,
.vxe-pager--jump-prev {
background: #ffffff;
border-radius: 4px;
border: 1px solid #c9c9c9;
&.is--disabled {
background: #e9e9e9 ;
border-radius: 4px;
border: 1px solid #c9c9c9 ;
::after {
border-bottom: 0.7em solid #c9c9c9;
}
}
::before {
display: none;
}
i {
width: 1em;
height: 1em;
line-height: 1em;
&::after {
position: absolute;
content: "";
border-width: initial;
border-style: initial;
border-left: 0.4em solid transparent;
border-right: 0.4em solid transparent;
border-bottom: 0.6em solid #7e89a4;
top: 0.12em;
left: 0.22em;
}
}
.vxe-pager--jump-more-icon {
&::before {
display: inline-block;
content: "...";
color: #000;
top: 0;
left: 0;
line-height: 1.3em ;
font-weight: 700;
text-align: center;
font-family: auto;
position: absolute;
width: 100%;
}
&::after {
display: none;
}
}
}
.vxe-pager--jump-next {
i {
&::after {
transform: rotate(90deg);
}
}
}
.vxe-pager--jump-prev {
i {
&::after {
left: -0.05em;
transform: rotate(-90deg);
}
}
}
.vxe-pager--num-btn {
background: #ffffff;
border-radius: 4px;
border: 1px solid #c9c9c9;
&:hover {
color: @mainColor;
border-color: @mainColor ;
}
&.is--active {
background: @mainColor ;
border-color: @mainColor ;
}
}
}
.ant-select,
.ant-cascader-picker {
width: 100%;
}
.ant-select-dropdown-menu-item-group-title {
p {
font-size: 14px;
font-weight: 400;
color: #000000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.svg-icon {
color: @mainColor;
}
}
}
// 开关
.ant-switch {
&.ant-switch-checked {
background-color: @mainColor;
}
}
.ant-tag {
letter-spacing: 0;
font-weight: 400;
margin-right: 8px;
min-width: 32px;
text-align: center;
min-width: 32px;
height: 32px;
text-align: center;
line-height: 30px;
font-size: 14px;
&:hover {
cursor: pointer;
}
&.tag_entry {
background: #eef2fd;
border-color: #eef2fd;
color: #000000;
}
&.tag_or {
background: rgba(0, 171, 69, 0.2);
border: 1px solid rgba(0, 171, 69, 0.3);
color: #00ab45;
}
&.tag_and {
background: rgba(255, 140, 0, 0.2);
border: 1px solid rgba(255, 140, 0, 0.3);
color: #ff8c00;
}
&.ant-tag-blue {
color: var(--COLOR-NORMAL, #0f49ed);
background: var(--COLOR-NORMAL-BG, #eaeefe);
border-color: var(--COLOR-NORMAL, #0f49ed);
}
&.tag_value {
color: #0f49ed;
background: #ebf0ff;
border: 1px solid #b5c9ff;
}
&.tag_operate {
color: rgba(0, 0, 0, 0.7);
background: #ffffff;
border: 1px solid #c9c9c9;
}
&.tag_fail {
color: #ec0000;
background: rgba(235, 0, 0, 0.2);
border: 1px solid rgba(235, 0, 0, 0.3);
}
}
.ant-input-number-handler-wrap {
z-index: 1;
}
//查询框
.ant-input-search {
.ant-input-group-addon {
&:hover {
cursor: pointer;
}
}
}
.a_foot_nuttop {
position: absolute;
right: 0;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid #e9e9e9;
padding: 10px 16px;
background: #fff;
text-align: right;
z-index: 1;
}
.ant-tabs {
&.ant-tabs-card {
.ant-tabs-tab-active {
color: @mainColor;
}
}
}
.ant-tabs-nav {
.ant-tabs-tab {
font-weight: 500;
margin: auto;
color: @primaryText;
}
.ant-tabs-tab-active {
color: @mainColor;
}
.ant-tabs-ink-bar {
background-color: @mainColor;
}
}
.ant-drawer-body {
padding: 12px;
}
.icon_primary_key {
font-size: 16px;
color: #f60 ;
}
.icon_controls {
font-size: 14px;
color: #5f95ff;
margin-right: 2px;
}
.vxe-table {
.vxe-sort--asc-btn.sort--active,
.vxe-sort--desc-btn.sort--active {
color: @mainColor;
}
}
.vxe-table--render-default,
.ant-input-suffix {
z-index: 1;
}
.vxe-table--render-default {
.vxe-input.is--suffix .vxe-input--inner {
padding-left: 0.5em;
}
.row_warning {
background-color: #fffbe6 ;
border: 1px solid #ffe58f ;
}
}
.body_container {
background: #fff;
height: 100%;
padding: 16px;
.search_label {
font-size: 14px;
font-weight: 400;
margin-left: 24px;
margin-right: 10px;
text-align: right;
color: #000000;
}
.ant-input-search {
width: 220px;
}
.ant-select {
width: 200px;
}
.ant-calendar-picker {
width: 260px;
}
.api_tool {
text-align: right;
}
.w-pagination {
justify-content: end;
}
}
.search_body {
.w-input {
width: 200px;
.w-input {
width: auto;
}
}
.w-input-number {
width: 200px;
}
}
.span_as {
color: #ea6040;
}
.twinkling {
animation: _flicker 1.2s infinite;
-webkit-animation: _flicker 1.2s infinite;
}
@keyframes _flicker {
from {
opacity: 1;
}
50% {
opacity: 0.4;
}
to {
opacity: 1;
}
}
@-webkit-keyframes _flicker {
from {
opacity: 1;
}
50% {
opacity: 0.4;
}
to {
opacity: 1;
}
}
.rader_scan {
animation: _scaning 3s linear infinite;
transform-origin: 100% 100%;
}
@keyframes _scaning {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes _scaning {
to {
transform: rotate(360deg);
}
}
}