除了与后端的连接之外，个人感觉做的差不多了

src/App.tsx

@@ -10,10 +10,14 @@ import {
   setupIonicReact,
 } from '@ionic/react'
 import { IonReactRouter } from '@ionic/react-router'
-import { ellipse, square, triangle } from 'ionicons/icons'
-import Tab1 from './pages/Tab1'
-import Tab2 from './pages/Tab2'
-import Tab3 from './pages/Tab3'
+import Home from './pages/Home'
+import Tab2 from './pages/Schedule'
+import Tab3 from './pages/Todos'
+import home from './footerLogo/home.svg'
+import schedule from './footerLogo/schedule.svg'
+import todo from './footerLogo/todos.svg'
+import functions from './footerLogo/functions.svg'
+import mine from './footerLogo/mine.svg'
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css'
@@ -47,41 +51,49 @@ import './theme/variables.css'
 
 setupIonicReact()
 
-export default function App() {
-  return (
-    <IonApp>
-      <IonReactRouter>
-        <IonTabs>
-          <IonRouterOutlet>
-            <Route exact path="/tab1">
-              <Tab1 />
-            </Route>
-            <Route exact path="/tab2">
-              <Tab2 />
-            </Route>
-            <Route path="/tab3">
-              <Tab3 />
-            </Route>
-            <Route exact path="/">
-              <Redirect to="/tab1" />
-            </Route>
-          </IonRouterOutlet>
-          <IonTabBar slot="bottom">
-            <IonTabButton tab="tab1" href="/tab1">
-              <IonIcon icon={triangle} />
-              <IonLabel>Tab 1</IonLabel>
-            </IonTabButton>
-            <IonTabButton tab="tab2" href="/tab2">
-              <IonIcon icon={ellipse} />
-              <IonLabel>Tab 2</IonLabel>
-            </IonTabButton>
-            <IonTabButton tab="tab3" href="/tab3">
-              <IonIcon icon={square} />
-              <IonLabel>Tab 3</IonLabel>
-            </IonTabButton>
-          </IonTabBar>
-        </IonTabs>
-      </IonReactRouter>
-    </IonApp>
-  )
-}
+const App: React.FC = () => (
+  <IonApp>
+    <IonReactRouter>
+      <IonTabs>
+        <IonRouterOutlet>
+          <Route exact path="/home">
+            <Home />
+          </Route>
+          <Route exact path="/schedule">
+            <Tab2 />
+          </Route>
+          <Route path="/todos">
+            <Tab3 />
+          </Route>
+          <Route exact path="/">
+            <Redirect to="/home" />
+          </Route>
+        </IonRouterOutlet>
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="tab1" href="/home">
+            <IonIcon aria-hidden="true" icon={home} />
+            <IonLabel>主页</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab2" href="/schedule">
+            <IonIcon aria-hidden="true" icon={schedule} />
+            <IonLabel>日程</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab3" href="/todos">
+            <IonIcon aria-hidden="true" icon={todo} />
+            <IonLabel>待办</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab4" href="/functions">
+            <IonIcon aria-hidden="true" icon={functions} />
+            <IonLabel>功能</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab5" href="/mine">
+            <IonIcon aria-hidden="true" icon={mine} />
+            <IonLabel>我的</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
+    </IonReactRouter>
+  </IonApp>
+)
+
+export default App

src/components/Card.css

@@ -0,0 +1,37 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1875rem;
+  margin: 0.625rem 0.6875rem;
+  border-radius: 0.9375rem;
+  padding-bottom: 0.875rem;
+  background-color: var(--element-background-color);
+  .head {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+    align-items: center;
+    padding-top: 2%;
+    margin-bottom: 2%;
+    padding-left: 0.625rem;
+    img {
+      border-radius: 0.5rem;
+      padding: 0.1875rem;
+    }
+    .title {
+      height: 1.375rem;
+      flex-basis: 58vw;
+      font-size: 1.25rem;
+      font-weight: bold;
+    }
+    .all {
+      height: 1.0625rem;
+      font-weight: 500;
+      flex-basis: 19.656vw;
+      font-size: 1rem;
+      color: var(--schedule-all-color);
+    }
+  }
+}
+

src/components/Card.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react'
+import './Card.css'
+
+const Card = ({
+  logo,
+  title,
+  cardHref,
+  all,
+  name,
+  children,
+}: {
+  logo: string
+  title: string
+  cardHref: string
+  all: string
+  name: string
+  children: ReactNode
+}) => {
+  return (
+    <div className="container">
+      <div className="head">
+        <img src={logo} alt="404" className={name} />
+        <span className="title">{title}</span>
+        <a href={cardHref} className={'all'}>
+          {all}
+        </a>
+      </div>
+      {children}
+    </div>
+  )
+}
+/**这里的className={name}可以让定制组件内的clss不会相互冲突，都包含在这个特定的name下即可 */
+
+export default Card
+

src/components/head/Calendar/Calendar.css

@@ -0,0 +1,16 @@
+.calendar-container {
+  display: flex;
+  flex-direction: column;
+  font-size: 1.5625rem;
+  font-weight: 400;
+  margin-top: 1.875rem;
+  margin-left: 1.5625rem;
+  .calendar-item1 {
+    height: 1.875rem;
+  }
+  .calendar-item2 {
+    display: flex;
+    flex-direction: row;
+    gap: 0.3125rem;
+  }
+}

src/components/head/Calendar/Calendar.tsx

@@ -0,0 +1,34 @@
+import './Calendar.css'
+
+function Calendar({
+  year,
+  month,
+  day,
+  season,
+  number,
+  num,
+}: {
+  year: number
+  month: number
+  day: number
+  season: string
+  number: number
+  num: string
+}) {
+  return (
+    <div className="calendar-container">
+      <div className="calendar-item1">
+        {year}年{month}月{day}日
+      </div>
+      <div className="calendar-item2">
+        <div>
+          {season}
+          {number}周
+        </div>
+        <div>星期{num}</div>
+      </div>
+    </div>
+  )
+}
+
+export default Calendar

src/components/head/HomeHead.tsx

@@ -0,0 +1,65 @@
+import Calendar from './Calendar/Calendar'
+import Weather from './weather/Weather'
+
+function Head() {
+  interface Tips {
+    //天气与温馨提示的对象数组
+    weather: string
+    tip: string
+  }
+  const tips: Tips[] = [
+    { weather: '下雨', tip: '今日有雨，记得带伞哦！' },
+    { weather: '', tip: '今日气温较低，注意穿衣保暖~' },
+    { weather: '多云', tip: '今日天气舒服，适合出门走走哟~' },
+    { weather: '晴天', tip: '今日天气舒服，适合出门走走哟~' },
+    { weather: '阴', tip: '虽然阴天，但心情也要晴朗！' },
+    { weather: '霾', tip: '今日空气质量不佳，可以带上口罩隔绝污染' },
+  ]
+
+  interface calendarModel {
+    //calendar部分接口与数据
+    year: number
+    month: number
+    day: number
+    season: string
+    number: number
+    num: string
+  }
+  const calendar: calendarModel = {
+    year: 24,
+    month: 12,
+    day: 24,
+    season: '冬',
+    number: 14,
+    num: '一',
+  }
+  interface weatherModel {
+    //weather部分接口与数据
+    weather: string
+    temperature: {
+      min: number
+      max: number
+    }
+  }
+
+  const weatherCondition: weatherModel = {
+    weather: '多云',
+    temperature: {
+      min: -1,
+      max: 100,
+    },
+  }
+
+  const tip = (
+    tips.find((item) => item.weather === weatherCondition.weather) as Tips
+  ).tip //找到对应天气的温馨提醒
+
+  //
+  return (
+    <>
+      <Calendar {...calendar} />
+      <Weather weatherData={weatherCondition} tip={tip} />
+    </>
+  )
+}
+export default Head

src/components/head/weather/Weather.css

@@ -0,0 +1,16 @@
+.weather-container1 {
+  margin: 0.625rem 0 1.5625rem 1.5625rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  font-weight: 400;
+  .weather {
+    display: flex;
+    font-size: 1.5625rem;
+    gap: 0.75rem;
+    align-items: center;
+  }
+  #weather-tip {
+    font-size: 0.875rem;
+  }
+}

src/components/head/weather/Weather.tsx

@@ -0,0 +1,30 @@
+import './Weather.css'
+
+interface weatherModel {
+  weather: string
+  temperature: {
+    min: number
+    max: number
+  }
+}
+function Weather({
+  weatherData,
+  tip,
+}: {
+  weatherData: weatherModel
+  tip: string
+}) {
+  return (
+    <div className="weather-container1">
+      <div className="weather">
+        <div>{weatherData.weather}</div>
+        <div>
+          {weatherData.temperature.min}/{weatherData.temperature.max}&#176;C
+        </div>
+      </div>
+      <div id="weather-tip">{tip}</div>
+    </div>
+  )
+}
+
+export default Weather

src/components/quickLink/LinkAnimation.tsx

@@ -0,0 +1,44 @@
+import { useState, useRef, useEffect, ReactElement } from 'react'
+
+const LinkAnimation = ({
+  href,
+  children,
+}: {
+  href: string
+  children: ReactElement
+}) => {
+  /**制作一个点击回弹效果，并保证动画结束后再跳转 */
+  const [isAnimating, setIsAnimating] = useState(false) // 控制动画状态
+  const linkRef = useRef<HTMLAnchorElement>(null) // 使用ref来引用DOM元素
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault() // 阻止默认的跳转行为
+    setIsAnimating(true) // 触发动画
+  }
+
+  useEffect(() => {
+    if (isAnimating && linkRef.current) {
+      // 添加动画类
+      linkRef.current.style.animation = 'bounce 0.3s ease-out'
+
+      // 动画完成后跳转
+      const timeoutId = setTimeout(() => {
+        if (linkRef.current) {
+          window.location.href = linkRef.current.getAttribute('href') as string // 跳转到目标页面
+        }
+        setIsAnimating(false) // 重置动画状态
+      }, 300) // 动画持续时间（0.3s）
+
+      // 清理定时器
+      return () => clearTimeout(timeoutId)
+    }
+  }, [isAnimating])
+
+  return (
+    <a ref={linkRef} onClick={handleClick} href={href}>
+      {children}
+    </a>
+  )
+}
+
+export default LinkAnimation