Skip to content

C
CivWeb
Commit c79783a1 authored by 曾婧's avatar 曾婧
Browse files
Options

fix: 华农主题hover

parent a0f7a260
Hide whitespace changes
Inline Side-by-side
Showing with 328 additions and 17 deletions
src/layouts/AppLayout/components/SlideMenu/index.js
View file @ c79783a1
......@@ -120,7 +120,7 @@ const Menu = props => {
[`hight-active`]: item.name === activeMenu,
})}
>
{/.svg/.test(item.extData.icon) ? (
{item.extData.icon=='1'?(<span></span>):/.svg/.test(item.extData.icon) ? (
<div className="my-svg">
<ReactSVG src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
</div>
......@@ -138,11 +138,11 @@ const Menu = props => {
}
subMenuItemRender={(item, dom) => (
<div className={classNames(`test-icon`)}>
{/.svg/.test(item.extData.icon) ? (
{item.extData.icon=='1'?(<span></span>):/.svg/.test(item.extData.icon) ? (
<div className="my-svg">
<ReactSVG src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
</div>
) : (
) :(
<div className="my-img">
<img src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
</div>
......
src/layouts/AppLayout/components/TopNavHeader/index.js 0 → 100644
View file @ c79783a1
import React, { useContext } from 'react';
import { ConfigProvider, Tabs, Divider, Menu, Dropdown } from 'antd';
import Icon, { DownOutlined } from '@ant-design/icons';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import { ReactSVG } from 'react-svg';
import { useHistory } from '@wisdom-utils/runtime';
import './index.less';
const { TabPane } = Tabs;
const Index = props => {
const history = useHistory();
const context = useContext(ConfigProvider.ConfigContext);
const prefixCls = props.prefixCls ?? context.getPrefixCls();
const { childrenRoutes = [] } = props;
const [selectedKey, setSelectedKey] = useMergedState(() => [], {
value: props.selectedKey,
onChange: props.onHandlerSubmenu,
});
const [tabActiveKey, setTabActiveKey] = useMergedState(() => '', {
value: props.tabActiveKey,
onChange: props.onTabChange,
});
React.useEffect(() => {
const current = selectedKey[0];
if (current) {
if (window.__POWERED_BY_QIANKUN__) {
window.history.pushState(null, '', `/civbase${current}`);
} else {
history.push(`/${current}`);
}
}
}, [selectedKey]);
const onHandleSubmenu = ({ item, key, keyPath, domEvent }) => {
setSelectedKey([key]);
// window.history.pushState(null, '', `/civbase${key}`);
};
const renderChildrenMenu = route => {
const routes = (route.routes || []).map(item => {
item.key = item.href;
return item;
});
const menu = (
<Menu selectedKeys={selectedKey} onClick={onHandleSubmenu}>
{(routes || []).map((item, index) => {
return (
<>
<Menu.Item key={item.href}>
<div>
<span />
<span>{item.name}</span>
</div>
</Menu.Item>
<Divider style={{ width: '80%', minWidth: '80%', margin: '0 auto' }} />
</>
);
})}
</Menu>
);
return (
<>
<Dropdown overlay={menu} overlayClassName={`${prefixCls}-dropdown-custom-menu`}>
<div>
{route.extData.icon == '1' ? (
<span />
) : /.svg/.test(route.extData.icon) ? (
<ReactSVG
src={route.extData.icon}
style={{ width: '18px', height: '18px', position: 'relative', top: '-3px' }}
/>
) : (
<img src={route.extData.icon} style={{ width: '18px', height: '18px' }} />
)}
<span style={{ marginLeft: '8px' }}>{route.name} </span>
<DownOutlined style={{ position: 'relative', right: '-10px' }} />
</div>
</Dropdown>
<Divider type="vertical" />
</>
);
};
const onTab = event => {
setTabActiveKey(event);
if (event.indexOf('web_console') === -1) {
if (window.__POWERED_BY_QIANKUN__) {
window.history.pushState(null, '', `/civbase${event}`);
} else {
history.push(event);
}
}
};
return (
<div className={`${prefixCls}-menu-item-children`}>
<Tabs activeKey={tabActiveKey} tabBarGutter={30} tabPosition="top" onTabClick={event => onTab(event)}>
{childrenRoutes.map((item, index) => (
<>
<TabPane
className="only-last-children"
tab={
<>
{item.routes ? (
renderChildrenMenu(item)
) : (
<>
{item.icon ? (
item.icon
) : item.extData && item.extData.icon == '1' ? (
<span />
) : /.svg/.test(item.extData.icon) ? (
<ReactSVG src={item.extData.icon} style={{ width: '18px', height: '18px' }} />
) : (
item.extData && <img src={item.extData.icon} style={{ width: '18px', height: '18px' }} />
)}
<span className={`menu-item-name`}>{item.name}</span>
{childrenRoutes.length === 1 ? null : <Divider type="vertical" />}
</>
)}
</>
}
key={item.path}
/>
</>
))}
</Tabs>
</div>
);
};
export default Index;
src/layouts/AppLayout/components/TopNavHeader/index.less 0 → 100644
View file @ c79783a1
@import '~antd/es/style/themes/default.less';
@primary-color: #1685ff;
@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
@primary-5: color(
~`colorPalette('@{primary-color}', 5) `
); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
@slider-light: #fff;
@color-black: #fff;
@panda-prefix-cls: ~'@{ant-prefix}';
.@{panda-prefix-cls}-menu-item-children {
height: 36px;
background: #fff;
box-shadow: rgb(240 241 242) 0px 2px 8px;
position: fixed;
top: 46px;
width: 100%;
z-index: 500;
svg {
path,
rect,
circle {
fill: #c4cddb;
stroke: #c4cddb;
box-shadow: 0px 1px 2px 0px rgb(6 0 1 / 50%);
}
}
img {
filter: drop-shadow(10px 0px #c4cddb);
transform: translateX(-10px);
}
& :global {
.@{ant-prefix}-tabs-tab {
padding: 7px 0 !important;
margin: 0 32px 0 0 !important;
&:hover {
svg path,
svg rect,
svg circle {
fill: @primary-color!important;
stroke: @primary-color!important;
}
img {
filter: drop-shadow(10px 0px @primary-color);
}
.menu-item-name {
color: @primary-color;
}
.@{ant-prefix}-tabs-tab-btn {
color: @primary-color;
}
}
.@{ant-prefix}-tabs-tab-btn {
.@{ant-prefix}-dropdown-trigger {
div {
div {
width: 100%;
height: 100%;
}
}
}
}
}
}
.menu-item {
float: left;
}
& :global(.@{ant-prefix}-tabs-tab) {
display: flex !important;
}
& :global(.@{ant-prefix}-tabs-tab-btn) {
display: flex;
position: relative;
align-items: center;
color: #737983;
transform: scale(0.92);
}
& :global(.@{ant-prefix}-tabs-tab.@{ant-prefix}-tabs-tab-active .@{ant-prefix}-tabs-tab-btn) {
color: @primary-color!important;
}
& :global(.@{ant-prefix}-tabs-tab-btn > div > div) {
display: flex;
}
& :global(.@{ant-prefix}-tabs-nav::before) {
border-bottom: none !important;
}
.menu-item-name {
margin-left: 8px;
color: #737983;
// transition: color .3s;
transition: border-color 0.3s, color 0.3s, padding 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
&:hover {
color: @primary-color;
}
}
& :global {
.@{ant-prefix}-divider-vertical {
left: 20px;
margin: 0 1px !important;
}
.@{ant-prefix}-tabs-nav-operations {
.ant-tabs-nav-more {
margin-right: 0px !important;
}
}
}
& :global(.@{ant-prefix}-tabs-ink-bar) {
background: @primary-color!important;
}
& :global(.@{ant-prefix}-tabs-tab-active) {
color: @primary-color!important;
}
& :global(.@{ant-prefix}-tabs-tab-active .panda-pro-layouts-basic-layout-menu-item-name) {
color: @primary-color!important;
}
& :global {
.@{ant-prefix}-tabs-tab-active svg path,
.@{ant-prefix}-tabs-tab-active svg rect,
.@{ant-prefix}-tabs-tab-active svg circle {
fill: @primary-color!important;
stroke: @primary-color!important;
}
.@{ant-prefix}-tabs-tab-active img {
filter: drop-shadow(10px 0px @primary-color);
}
}
& :global(.@{ant-prefix}-tabs-nav-wrap) {
margin-left: 22px;
}
& :global(.@{ant-prefix}-dropdown-trigger) {
display: flex;
align-items: center;
}
& :global(.@{ant-prefix}-tabs-nav) {
margin: 0px !important;
}
}
src/layouts/AppLayout/layouts/BasicLayout.js
View file @ c79783a1
......@@ -7,7 +7,7 @@ import SlideMenu from '../components/SlideMenu';
import WrapContent from '@wisdom-utils/components/lib/AppLayout/layouts/WrapContent';
import Header from '@wisdom-utils/components/lib/AppLayout/layouts/Header';
import Footer from '@wisdom-utils/components/lib/AppLayout/layouts/Footer';
import TopNavHeader from '@wisdom-utils/components/lib/AppLayout/components/TopNavHeader';
import TopNavHeader from '../components/TopNavHeader';
import PageContainer from '@wisdom-utils/components/lib/AppLayout/components/PageContainer';
import { helpers } from '@wisdom-utils/utils';
import { getBreadcrumbProps } from '@wisdom-utils/components/lib/AppLayout/layouts/utils/getBreadcrumbProps';
......
src/layouts/HN.less
View file @ c79783a1
......@@ -53,8 +53,6 @@
.ant-menu-inline > .ant-menu-item{
height: 40px;
line-height: 40px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0 16px;
line-height: 40px;
text-overflow: ellipsis;
......@@ -230,7 +228,7 @@
margin: 0 auto;
margin-top: 4px;
margin-right: 16px;
padding-left: 16px;
padding-left: 23px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
......@@ -247,7 +245,14 @@
.@{ant-prefix}-menu {
ul {
.@{ant-prefix}-menu-item-only-child {
padding-left: 26px !important;
padding-left: 0 !important;
.test-icon{
margin-left: 20px;
padding-left: 20px!important;
}
.@{ant-prefix}-menu-title-content{
border-radius: 5px;
}
}
}
}
......@@ -260,7 +265,7 @@
margin: 0 auto;
margin-top: 4px;
margin-right: 16px;
padding-left: 16px;
padding-left: 23px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
......@@ -277,7 +282,14 @@
.ant-menu {
ul {
.ant-menu-item-only-child {
padding-left: 26px !important;
padding-left: 0 !important;
.ant-menu-title-content{
border-radius: 5px;
}
.test-icon{
margin-left: 20px;
padding-left: 20px!important;
}
}
}
}
......@@ -286,6 +298,7 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-left: 6px;
.my-svg {
display: inline-block;
width: 18px;
......@@ -322,9 +335,27 @@
}
}
.test-icon:hover{
color: #00b278;
color: @hn-greenColor;
.my-desc {
color: #00b278;
color: @hn-greenColor;
}
svg path,
svg rect,
svg circle {
fill: @hn-greenColor !important;
stroke: @hn-greenColor !important;
}
}
.hight-active:hover{
color: #fff;
.my-desc {
color: #fff;
}
svg path,
svg rect,
svg circle {
fill: #fff !important;
stroke: #fff !important;
}
}
......@@ -343,18 +374,18 @@
vertical-align: bottom;
}
.hight-active {
color: @hn-greenColor;
// background: @hn-greenColor;
color: #fff;
background: @hn-greenColor;
// background: #00b278;
border-radius: 5px;
.my-desc {
color: #00b278;
color: #fff;
}
svg path,
svg rect,
svg circle {
fill: @hn-greenColor !important;
stroke: @hn-greenColor !important;
fill: #fff !important;
stroke: #fff !important;
}
}
.@{ant-prefix}-menu.@{ant-prefix}-menu-dark
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment