Browse Source

导航栏

release_0.0.1
deartibers 2 years ago
parent
commit
7e43ef5d7f
  1. BIN
      web/client/fonts/YouSheBiaoTiHei-2.ttf
  2. 4
      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. 3
      web/client/src/sections/example/nav-item.jsx

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

Binary file not shown.

4
web/client/src/index.less

@ -67,3 +67,7 @@ body {
.semi-portal-inner {
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={{
height: 60,
height: 48,
minWidth: 520,
background: '#1D2343',
backgroundSize: "100% 100%",
@ -32,10 +32,12 @@ const Header = (props) => {
logo: (
<img
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={
<>
@ -70,18 +72,6 @@ const Header = (props) => {
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}}>
<img src="/assets/images/avatar/6.png" />
</Avatar>
@ -91,8 +81,6 @@ const Header = (props) => {
left: 4,
marginRight: 4,
}}>
<div>你好</div>
<div>{user && user.displayName}</div>
</div>
</div>
}

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

@ -8,4 +8,7 @@
.semi-navigation-item-selected{
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
style={{ background: '#101531', width: 180, padding: 0 }}
selectedKeys={selectedKeys}
// bodyStyle={{}}
// mode = "vertical"
// footer={{
// collapseButton: true,
// }}
openKeys={openKeys}
onSelect={({ selectedItems, selectedKeys, }) => {
const selectItem = selectedItems[0]

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

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

Loading…
Cancel
Save