Browse Source

font

release_0.0.1
巴林闲侠 2 years ago
parent
commit
bfba015319
  1. 0
      web/client/assets/fonts/YouSheBiaoTiHei-2.ttf
  2. 7
      web/client/src/index.less
  3. 170
      web/client/src/layout/components/header/index.jsx

0
web/client/fonts/YouSheBiaoTiHei-2.ttf → web/client/assets/fonts/YouSheBiaoTiHei-2.ttf

7
web/client/src/index.less

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

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

@ -5,103 +5,103 @@ import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";
import "./index.less"; import "./index.less";
const Header = (props) => { const Header = (props) => {
const { dispatch, history, user, actions, socket ,headerItems,tochange} = props; const { dispatch, history, user, actions, socket, headerItems, tochange } = props;
return ( return (
<> <>
<div id="top-slider"> <div id="top-slider">
<Nav <Nav
mode={"horizontal"} mode={"horizontal"}
onClick={({ itemKey }) => { onClick={({ itemKey }) => {
if (itemKey == "logout") { if (itemKey == "logout") {
dispatch(actions.auth.logout(user)); dispatch(actions.auth.logout(user));
if (socket) { if (socket) {
socket.disconnect(); socket.disconnect();
}
history.push(`/signin`);
}
}}
style={{
height: 48,
minWidth: 520,
background: '#1D2343',
backgroundSize: "100% 100%",
color: "white",
}}
header={{
logo: (
<img
src="/assets/images/background/logo.png"
style={{ display: "inline-block", width: 280, height: 40 }}
/>
),
text: (
<div style={{ fontFamily: "icomoon", color: '#FFFFFF' }}>运维管理系统</div>
),
}}
footer={
<>
{headerItems.map((item, index) => {
if (item.hasOwnProperty('items')) {
return (
<Nav.Sub
key={index + 'a'}
itemKey={item.itemKey}
text={item.text}
dropdownStyle={{ color: '#F2F3F5' }}
>
{item.hasOwnProperty('items') && item.items.map((ite, idx) => (
<Nav.Item key={idx + 'd'} itemKey={ite.itemKey} text={ite.text} onClick={() => { tochange(ite); }} />
))}
</Nav.Sub>
)
} }
history.push(`/signin`); else {
} return (
}} <Nav.Item key={index + 'a'} itemKey={item.itemKey} text={item.text} onClick={() => { tochange(item) }} />
style={{ )
height: 48,
minWidth: 520,
background: '#1D2343',
backgroundSize: "100% 100%",
color: "white",
}}
header={{
logo: (
<img
src="/assets/images/background/logo.png"
style={{ display: "inline-block", width: 280, height: 40 }}
/>
),
// text: (
// <div style={{fontFamily: "icomoon",color:'#FFFFFF'}}></div>
// ),
}}
footer={
<>
{headerItems.map((item,index)=>{
if(item.hasOwnProperty('items')){
return(
<Nav.Sub
key={index+'a'}
itemKey={item.itemKey}
text={item.text}
dropdownStyle={{color:'#F2F3F5'}}
>
{item.hasOwnProperty('items')&&item.items.map((ite,idx)=>(
<Nav.Item key={idx+'d'} itemKey={ite.itemKey} text={ite.text} onClick={()=>{tochange(ite);}}/>
))}
</Nav.Sub>
)
} }
else{ })}
return( <Nav.Sub
<Nav.Item key={index+'a'} itemKey={item.itemKey} text={item.text} onClick={()=>{tochange(item)}} />
)
}
})}
<Nav.Sub
itemKey={"user"} itemKey={"user"}
text={ text={
<div <div
style={{ style={{
marginLeft: 20, marginLeft: 20,
display: "inline-block", display: "inline-block",
color: "white", color: "white",
}} }}
> >
<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>
<div style={{ <div style={{
display: "inline-block", position: "relative", display: "inline-block", position: "relative",
top: 10, top: 10,
left: 4, left: 4,
marginRight: 4, marginRight: 4,
}}> }}>
</div> </div>
</div> </div>
} }
> >
<Nav.Item itemKey={"logout"} text={"退出"} /> <Nav.Item itemKey={"logout"} text={"退出"} />
</Nav.Sub> </Nav.Sub>
</> </>
} }
/> />
</div> </div>
</> </>
); );
}; };
function mapStateToProps (state) { function mapStateToProps (state) {
const { global, auth, webSocket } = state; const { global, auth, webSocket } = state;
return { return {
actions: global.actions, actions: global.actions,
user: auth.user, user: auth.user,
socket: webSocket.socket, socket: webSocket.socket,
}; };
} }
export default connect(mapStateToProps)(Header); export default connect(mapStateToProps)(Header);

Loading…
Cancel
Save