{items}
);
-}
-export default Dropdown;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css
index 51438b3..37e4c8b 100644
--- a/src/components/dropdown/dropdown.css
+++ b/src/components/dropdown/dropdown.css
@@ -1,5 +1,5 @@
.dropdown {
- width: 160px;
+ min-width: 120px;
height: 100%;
padding: 0 10px;
cursor: pointer;
@@ -11,10 +11,11 @@
display: flex;
justify-content: center;
align-items: center;
+ font-size: var(--font-size-head);
}
.dropdown ul {
- /*display: none;*/
+ display: none;
margin: 0;
width: 100%;
padding: 10px 0;
@@ -29,6 +30,7 @@
cursor: pointer;
word-break: break-all;
border-top: 1px solid var(--color-border);
+ color: var(--color-dark)
}
.dropdown ul li:last-child {
diff --git a/src/components/message/MessageHead.tsx b/src/components/message/MessageHead.tsx
new file mode 100644
index 0000000..376f01c
--- /dev/null
+++ b/src/components/message/MessageHead.tsx
@@ -0,0 +1,15 @@
+import './message-header.css'
+
+export default function MessageHead() {
+
+ const handleClick = () => {
+ console.log('查看消息')
+ }
+
+ return (
+
+ 消息
+ 99+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/message/message-header.css b/src/components/message/message-header.css
new file mode 100644
index 0000000..a28782f
--- /dev/null
+++ b/src/components/message/message-header.css
@@ -0,0 +1,17 @@
+.message-header {
+}
+
+.message-header .label {
+
+}
+
+.message-header .badge {
+ background-color: var(--color-red);
+ width: 26px;
+ height: 26px;
+ line-height: 26px;
+ font-size: 12px;
+ border-radius: 13px;
+ text-align: center;
+ color: #ffffff;
+}
diff --git a/src/components/recharge/RechargeHead.tsx b/src/components/recharge/RechargeHead.tsx
new file mode 100644
index 0000000..b7eecbd
--- /dev/null
+++ b/src/components/recharge/RechargeHead.tsx
@@ -0,0 +1,14 @@
+import './recharge-head.css';
+
+export default function RechargeHead() {
+
+ const handleRecharge = () => {
+ console.log('充值');
+ }
+
+ return (
+
+ 充值
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/recharge/recharge-head.css b/src/components/recharge/recharge-head.css
new file mode 100644
index 0000000..a372c76
--- /dev/null
+++ b/src/components/recharge/recharge-head.css
@@ -0,0 +1,3 @@
+.recharge-head {
+
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 48cec20..93f3fa4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,18 @@
:root {
- --color-border: #E1E1E1;
+ --color-border: #eeeeee;
--color-box-shadow: rgba(0, 0, 0, 0.3);
+ --color-red: #ff5722;
+ --color-orange: #ffb800;
+ --color-green: #16baaa;
+ --color-blue: #1e9fff;
+ --color-purple: #a233c6;
+ --color-dark: #2f363c;
+ --color-light: #fafafa;
+ --font-size-head: 16px;
}
html, body {
margin: 0;
- padding: 0
+ padding: 0;
+ font-size: 14px;
}
diff --git a/src/interfaces/dropdown/IDropdown.ts b/src/interfaces/dropdown/IDropdown.ts
new file mode 100644
index 0000000..226a82b
--- /dev/null
+++ b/src/interfaces/dropdown/IDropdown.ts
@@ -0,0 +1,13 @@
+import {MouseEvent} from "react";
+
+export interface IDropdownItem {
+ id: string;
+ name: string;
+}
+
+export interface IDropdown {
+ title: string;
+ list: Arrayfooter
+ footer
)
}
\ No newline at end of file
diff --git a/src/layout/foot/foot.css b/src/layout/foot/foot.css
new file mode 100644
index 0000000..4d7c3fb
--- /dev/null
+++ b/src/layout/foot/foot.css
@@ -0,0 +1,12 @@
+.foot {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--color-dark);
+ color: var(--color-light);
+}
\ No newline at end of file
diff --git a/src/layout/head/Head.tsx b/src/layout/head/Head.tsx
index 0d545a1..362f5b5 100644
--- a/src/layout/head/Head.tsx
+++ b/src/layout/head/Head.tsx
@@ -1,22 +1,44 @@
import './head.css'
import Dropdown from '../../components/dropdown/Dropdown.tsx';
+import BalanceHead from '../../components/balance/BalanceHead.tsx';
+import RechargeHead from '../../components/recharge/RechargeHead.tsx';
+import MessageHead from '../../components/message/MessageHead.tsx';
export default function Head() {
+ const logo: string = 'vite.svg';
return (
-
-
-
LOGO
-
+
+
+
diff --git a/src/layout/head/head.css b/src/layout/head/head.css
index cf893c1..d1454db 100644
--- a/src/layout/head/head.css
+++ b/src/layout/head/head.css
@@ -1,12 +1,13 @@
.head {
width: 100%;
- height: 70px;
+ height: 60px;
position: fixed;
top: 0;
left: 0;
- background-color: #E1E1E1;
+ background-color: var(--color-dark);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
z-index: 0;
+ color: var(--color-light)
}
.head .center {
@@ -18,11 +19,36 @@
}
.head .center .left {
- width: 200px;
+ min-width: 180px;
height: 100%;
- background-color: blue;
+ display: flex;
+ align-items: center;
+ font-size: 20px;
+ font-weight: 800;
+}
+
+.head .center .left .logo {
+ width: 38px;
+ height: 38px;
+}
+
+.head .center .left .sys-title {
+ margin-left: 5px;
}
.head .center .right {
height: 100%;
+ display: flex;
+ justify-content: right;
+}
+
+.head .center .head-item {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0 15px;
+ font-size: var(--font-size-head);
+ cursor: pointer;
+ position: relative;
}
\ No newline at end of file
+ 
+ AI软件著作权管理系统
+
+
+ {
- console.log(1)
- }
+ id: 'userinfo',
+ name: '个人信息',
+ },
+ {
+ id: 'changePass',
+ name: '修改密码'
+ },
+ {
+ id: 'logout',
+ name: '退出系统'
}
]}
+ handle={
+ (_e, _index, item) => {
+
+ console.log(item.name)
+ }
+ }
/>