diff --git a/src/index.scss b/src/index.scss
index b0bef71b476a08caa5c79db60b60da92d871e281..09f35f31e4954a75c97632b18b535dfd84725b1e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -4,6 +4,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-size: 12px;
 }
 
 html {
diff --git a/src/pages/Desktop/StartToolsBar/DateTime/index.module.scss b/src/pages/Desktop/StartToolsBar/DateTime/index.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6ca657b20d87141439f88f34175cb275c4f670d5
--- /dev/null
+++ b/src/pages/Desktop/StartToolsBar/DateTime/index.module.scss
@@ -0,0 +1,7 @@
+.dateTimeBox {
+  padding-left: 8px;
+  width: 66px;
+  font-size: 12px;
+  font-weight: lighter;
+  user-select: none;
+}
diff --git a/src/pages/Desktop/StartToolsBar/DateTime/index.tsx b/src/pages/Desktop/StartToolsBar/DateTime/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..37e62f4a6b35feafcad409564bbe86ed8b6e0b7c
--- /dev/null
+++ b/src/pages/Desktop/StartToolsBar/DateTime/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import styles from './index.module.scss'
+import useMethods from '@utils/useMethods'
+
+interface Time {
+  year: string
+  month: string
+  day: string
+  hour: string
+  minute: string
+  week: string
+}
+
+const DateTime: React.FC = () => {
+  const [dataTime, setDataTime] = React.useState<Time>({
+    day: '',
+    hour: '',
+    minute: '',
+    month: '',
+    week: '',
+    year: ''
+  })
+  React.useEffect(() => {
+    getDateTime()
+  }, [])
+  const { getDateTime } = useMethods({
+    getDateTime() {
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1 // 获取当前月份
+      const day = date.getDate() // 获取当前是几号
+      const weekIndex = date.getDay() //获取当前星期X(0-6,0代表星期天)
+      const hour = date.getHours() //小时
+      const minute = date.getMinutes() //分钟
+      // const second = date.getSeconds() //秒
+      const week_arr = ['日', '一', '二', '三', '四', '五', '六']
+      const time: Time = {
+        year: `${year}`,
+        month: month <= 9 ? `0${month}` : `${month}`,
+        day: day <= 9 ? `0${day}` : `${day}`,
+        hour: hour <= 9 ? `0${hour}` : `${hour}`,
+        minute: minute <= 9 ? `0${minute}` : `${minute}`,
+        week: week_arr[weekIndex]
+      }
+      if (
+        dataTime.minute !== time.minute ||
+        dataTime.hour !== time.hour ||
+        dataTime.day !== time.day
+      ) {
+        setDataTime(time)
+      }
+      setTimeout(getDateTime, 1000)
+    }
+  })
+  return (
+    <div className={styles.dateTimeBox}>
+      <div>{`${dataTime.hour}:${dataTime.minute} 周${dataTime.week}`}</div>
+      <div>{`${dataTime.year}/${dataTime.month}/${dataTime.day}`}</div>
+    </div>
+  )
+}
+
+export default DateTime
diff --git a/src/pages/Desktop/StartToolsBar/WindonBar/index.module.scss b/src/pages/Desktop/StartToolsBar/WindonBar/index.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d4222373fcef42ed4b9450dccc64995339e54cc9
--- /dev/null
+++ b/src/pages/Desktop/StartToolsBar/WindonBar/index.module.scss
@@ -0,0 +1,4 @@
+.windowBarBox {
+  flex-grow: 1;
+  height: 100%;
+}
diff --git a/src/pages/Desktop/StartToolsBar/WindonBar/index.tsx b/src/pages/Desktop/StartToolsBar/WindonBar/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4c91b4a615b92a5920e89c09f1c8c12dcad1730d
--- /dev/null
+++ b/src/pages/Desktop/StartToolsBar/WindonBar/index.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import styles from './index.module.scss'
+
+const WindowBar: React.FC = () => {
+  return <div className={styles.windowBarBox}></div>
+}
+
+export default WindowBar
diff --git a/src/pages/Desktop/StartToolsBar/index.module.scss b/src/pages/Desktop/StartToolsBar/index.module.scss
index 48c89fd39dd5e72d26715144bdcf0a20ff46cedd..b57b5e71237955c477a27c9ae236dacbc11ebead 100644
--- a/src/pages/Desktop/StartToolsBar/index.module.scss
+++ b/src/pages/Desktop/StartToolsBar/index.module.scss
@@ -20,6 +20,7 @@
 }
 
 .startIcon {
+  margin-right: 8px;
   border-radius: 4px;
   padding: 7px;
   width: 38px;
diff --git a/src/pages/Desktop/StartToolsBar/index.tsx b/src/pages/Desktop/StartToolsBar/index.tsx
index 32c86905f24f471f29b79358448aa9499c4868bd..78c0d28579b05c099317cf8550359e4a7a72228c 100644
--- a/src/pages/Desktop/StartToolsBar/index.tsx
+++ b/src/pages/Desktop/StartToolsBar/index.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 import styles from './index.module.scss'
 import startImg from '@img/icon/start/home.png'
 import useStore, { MyState } from '@/store'
+import WindowBar from './WindonBar'
+import DateTime from '@/pages/Desktop/StartToolsBar/DateTime'
 
 const StartToolsBar: React.FC = () => {
   const setShowStartMenu = useStore((state: MyState) => state.setShowStartMenu)
@@ -22,6 +24,8 @@ const StartToolsBar: React.FC = () => {
           }}>
           <img className={styles.startIconImg} src={startImg} alt="startLogo" />
         </div>
+        <WindowBar />
+        <DateTime />
       </div>
     </div>
   )
diff --git a/src/pages/Desktop/index.module.scss b/src/pages/Desktop/index.module.scss
index b821bc8262ea9e218818948a47f1cc03fd5ac180..4e243d91159b6d9feb74297f56992517fe9d8b91 100644
--- a/src/pages/Desktop/index.module.scss
+++ b/src/pages/Desktop/index.module.scss
@@ -1,6 +1,6 @@
 .desktopFramework {
   position: relative;
+  overflow: hidden;
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }