Browse Source

导航栏

release_0.0.1
deartibers 2 years ago
parent
commit
7e43ef5d7f
  1. BIN
      web/client/fonts/YouSheBiaoTiHei-2.ttf
  2. 6
      web/client/src/index.less
  3. 22
      web/client/src/layout/components/header/index.jsx
  4. 3
      web/client/src/layout/components/header/index.less
  5. 6
      web/client/src/layout/components/sider/index.jsx
  6. 5
      web/client/src/sections/example/nav-item.jsx

BIN
web/client/fonts/YouSheBiaoTiHei-2.ttf

Binary file not shown.

6
web/client/src/index.less

@ -66,4 +66,8 @@ body {
.semi-portal-inner { .semi-portal-inner {
position: fixed; position: fixed;
} }
@font-face {
font-family: 'icomoon';//这个可以任意取,但是应与后面相对应eg:yxingguang
src: url('../fonts/YouSheBiaoTiHei-2.ttf');
}

22
web/client/src/layout/components/header/index.jsx

@ -22,7 +22,7 @@ const Header = (props) => {
} }
}} }}
style={{ style={{
height: 60, height: 48,
minWidth: 520, minWidth: 520,
background: '#1D2343', background: '#1D2343',
backgroundSize: "100% 100%", backgroundSize: "100% 100%",
@ -32,10 +32,12 @@ const Header = (props) => {
logo: ( logo: (
<img <img
src="/assets/images/background/logo.png" src="/assets/images/background/logo.png"
style={{ display: "inline-block", width: 280, height: 52 }} style={{ display: "inline-block", width: 280, height: 40 }}
/> />
), ),
text: "", // text: (
// <div style={{fontFamily: "icomoon",color:'#FFFFFF'}}></div>
// ),
}} }}
footer={ footer={
<> <>
@ -70,18 +72,6 @@ const Header = (props) => {
color: "white", color: "white",
}} }}
> >
<img
src="/assets/images/background/notice.png"
style={{
display: "inline-block",
width: 18,
height: 18,
position: "relative",
top: 6,
left: -10,
}}
/>
<Avatar size="small" color="light-blue" style={{marginRight:4}}> <Avatar size="small" color="light-blue" style={{marginRight:4}}>
<img src="/assets/images/avatar/6.png" /> <img src="/assets/images/avatar/6.png" />
</Avatar> </Avatar>
@ -91,8 +81,6 @@ const Header = (props) => {
left: 4, left: 4,
marginRight: 4, marginRight: 4,
}}> }}>
<div>你好</div>
<div>{user && user.displayName}</div>
</div> </div>
</div> </div>
} }

3
web/client/src/layout/components/header/index.less

@ -8,4 +8,7 @@
.semi-navigation-item-selected{ .semi-navigation-item-selected{
background: none; background: none;
} }
.semi-navigation-item-text{
overflow: inherit;
}
} }

6
web/client/src/layout/components/sider/index.jsx

@ -51,7 +51,11 @@ const Sider = (props) => {
<Nav <Nav
style={{ background: '#101531', width: 180, padding: 0 }} style={{ background: '#101531', width: 180, padding: 0 }}
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
// bodyStyle={{}}
// mode = "vertical"
// footer={{
// collapseButton: true,
// }}
openKeys={openKeys} openKeys={openKeys}
onSelect={({ selectedItems, selectedKeys, }) => { onSelect={({ selectedItems, selectedKeys, }) => {
const selectItem = selectedItems[0] const selectItem = selectedItems[0]

5
web/client/src/sections/example/nav-item.jsx

@ -1,17 +1,18 @@
import React from 'react'; import React from 'react';
import { IconCode } from '@douyinfe/semi-icons'; import { IconCode } from '@douyinfe/semi-icons';
import { Badge } from "@douyinfe/semi-ui";
export function getNavItem (user, dispatch) { export function getNavItem (user, dispatch) {
return ( return (
[ [
{ {
itemKey: 'example', itemKey: 'example',
text: '举个栗子', text: <Badge count={5} type='danger' >举个栗子</Badge>,
icon: <IconCode />, icon: <IconCode />,
items: [ items: [
{ {
itemKey: 'e1', itemKey: 'e1',
text: '举个棒子1', text:'举个棒子1',
icon: <IconCode />, icon: <IconCode />,
to: '/example/e1/c1', to: '/example/e1/c1',
items: [{ items: [{

Loading…
Cancel
Save