diff --git a/teaching_integration_platform_template/index.html b/teaching_integration_platform_template/index.html
index 7414bf0..6eea473 100644
--- a/teaching_integration_platform_template/index.html
+++ b/teaching_integration_platform_template/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
     <title>Vite + Vue + TS</title>
   </head>
   <body>
diff --git a/teaching_integration_platform_template/src/Layout/footer/index copy.vue b/teaching_integration_platform_template/src/Layout/footer/index copy.vue
new file mode 100644
index 0000000..bb12e63
--- /dev/null
+++ b/teaching_integration_platform_template/src/Layout/footer/index copy.vue	
@@ -0,0 +1,81 @@
+<template>
+  <div class="footer">
+    <ul>
+      <li>
+        系统标题：
+        {{ adminInfoStore.info.title }}
+
+      </li><el-divider direction="vertical" border-style="dashed" />
+      <li>
+        版权信息：
+        {{ adminInfoStore.info.copyrightInformation }}
+
+      </li> <el-divider direction="vertical" border-style="dashed" />
+      <li>
+        备案号：
+        {{ adminInfoStore.info.recordNumber }}
+
+      </li> <el-divider direction="vertical" border-style="dashed" />
+      <li>
+        qq:
+        {{ adminInfoStore.info.qqNumber }}
+
+      </li><el-divider direction="vertical" border-style="dashed" />
+      <li>
+        邮箱:
+        {{ adminInfoStore.info.mailbox }}
+
+      </li> <el-divider direction="vertical" border-style="dashed" />
+      <li>
+        电话:
+        {{ adminInfoStore.info.phone }}
+
+      </li>
+      <li>
+        地址:
+        {{ adminInfoStore.info.address }}
+      </li>
+      <el-divider direction="vertical" border-style="dashed" />
+      <li>
+        <el-image style="width: 50px; height: 50px" :src="adminInfoStore.info.qrCode" fit="cover" />
+      </li>
+      <el-divider direction="vertical" border-style="dashed" />
+      <li>
+        备案信息:
+        {{ adminInfoStore.info.recordInformation }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import useAdminInfoStore from '@/store/module/adminInfo'
+const adminInfoStore = useAdminInfoStore()
+console.log(adminInfoStore);
+
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  background-color: #252527;
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ul {
+    width: 600px;
+    height: 200px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    color: #ccc;
+    font-family:'Courier New', Courier, monospace;
+    // background: linear-gradient(white,#38495a);
+    // background-clip: text;
+    // color: transparent;
+  }
+
+}
+</style>
diff --git a/teaching_integration_platform_template/src/Layout/footer/index.vue b/teaching_integration_platform_template/src/Layout/footer/index.vue
index bb12e63..1b63b9e 100644
--- a/teaching_integration_platform_template/src/Layout/footer/index.vue
+++ b/teaching_integration_platform_template/src/Layout/footer/index.vue
@@ -1,81 +1,312 @@
-<template>
-  <div class="footer">
-    <ul>
-      <li>
-        系统标题：
-        {{ adminInfoStore.info.title }}
-
-      </li><el-divider direction="vertical" border-style="dashed" />
-      <li>
-        版权信息：
-        {{ adminInfoStore.info.copyrightInformation }}
-
-      </li> <el-divider direction="vertical" border-style="dashed" />
-      <li>
-        备案号：
-        {{ adminInfoStore.info.recordNumber }}
-
-      </li> <el-divider direction="vertical" border-style="dashed" />
-      <li>
-        qq:
-        {{ adminInfoStore.info.qqNumber }}
-
-      </li><el-divider direction="vertical" border-style="dashed" />
-      <li>
-        邮箱:
-        {{ adminInfoStore.info.mailbox }}
-
-      </li> <el-divider direction="vertical" border-style="dashed" />
-      <li>
-        电话:
-        {{ adminInfoStore.info.phone }}
-
-      </li>
-      <li>
-        地址:
-        {{ adminInfoStore.info.address }}
-      </li>
-      <el-divider direction="vertical" border-style="dashed" />
-      <li>
-        <el-image style="width: 50px; height: 50px" :src="adminInfoStore.info.qrCode" fit="cover" />
-      </li>
-      <el-divider direction="vertical" border-style="dashed" />
-      <li>
-        备案信息:
-        {{ adminInfoStore.info.recordInformation }}
-      </li>
-    </ul>
-  </div>
-</template>
-
 <script lang="ts" setup>
+import { ref } from "vue";
 import useAdminInfoStore from '@/store/module/adminInfo'
 const adminInfoStore = useAdminInfoStore()
-console.log(adminInfoStore);
+const info = adminInfoStore.info;
+
+const footer = ref(null)
 
+function handleDark() {
+  // @ts-ignore
+  footer.value.classList.toggle('dark__mode')
+  isShow.value = !isShow.value
+}
+const isShow = ref(false)
 </script>
 
+<template>
+  <footer ref="footer" class="dark__mode">
+    <div class="container">
+      <div class="container__footer">
+        <div class="profil">
+          <div class="logo__area">
+            <img src="../../assets/images/LOGO.png" alt="">
+            <span class="logo__name">LESSON</span>
+            <button v-show="isShow" @click="handleDark" class="moon"><i class='bx bxs-moon'></i></button>
+            <button v-show="!isShow" @click="handleDark" class="sun"><i class='bx bxs-sun'></i></button>
+          </div>
+          <div class="desc__area">
+            <p>
+              Thanks for using the integrated teaching portal system
+            </p>
+          </div>
+          <div class="social__media">
+            <i class='bx bxl-linkedin-square'></i>
+            <i class='bx bxl-facebook-square'></i>
+            <i class='bx bxl-instagram-alt'></i>
+            <i class='bx bxl-github'></i>
+            <!-- <i>
+              <svg class="svg">
+                <use :xlink:href="'#icon-QQ'"></use>
+              </svg>
+            </i> -->
+          </div>
+        </div>
+        <div class="service__area">
+          <ul class="service__header">
+            <li class="service__name">Information</li>
+            <li>
+              <i>
+                系统标题：{{ info.title }}
+              </i>
+            </li>
+            <li>
+              <i>
+                版权信息：{{ info.copyrightInformation }}
+              </i>
+            </li>
+            <li>
+              <i>
+                备案号：{{ info.recordNumber }}
+              </i>
+            </li>
+            <li>
+              <i>
+                备案信息：{{ info.recordInformation }}
+              </i>
+            </li>
+          </ul>
+          <ul class="service__header">
+            <li class="service__name">Relation</li>
+            <li>
+              <i>
+                邮箱：{{ info.mailbox }}
+              </i>
+            </li>
+            <li>
+              <i>
+                电话：{{ info.phone }}
+              </i>
+            </li>
+            <li>
+              <i>
+                QQ：{{ info.qqNumber }}
+              </i>
+            </li>
+            <li>
+              <i>
+                地址：{{ info.address }}
+              </i>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <hr>
+      <!-- <div class="footer__bottom">
+        <div class="copy__right">
+          <i class='bx bxs-copyright'></i>
+          <span>2024 ayprojex</span>
+        </div>
+        <div class="tou">
+          <i>Term of Use</i>
+          <i>Privacy Policy</i>
+          <i>Cookie</i>
+        </div>
+      </div> -->
+    </div>
+  </footer>
+</template>
+
 <style lang="scss" scoped>
-.footer {
-  background-color: #252527;
-  height: 300px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  ul {
-    width: 600px;
-    height: 200px;
-    display: flex;
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+
+.svg {
+  width: 24px;
+  height: 25px;
+}
+
+.dark__mode {
+  --primary-color: #000;
+  --secondary-color: #fff;
+}
+
+footer {
+  --primary-color: #fff;
+  --secondary-color: #000;
+  background-color: var(--primary-color);
+  box-shadow: 0 16px 70px -8px rgba(0, 0, 0, 0.25);
+  border-radius: 20px 20px 0 0;
+  transition: background 0.3s linear;
+
+  .container {
+    max-width: 1240px;
+    padding: 30px 40px;
+    margin: auto;
+
+    .container__footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1em;
+
+      .profil {
+        .logo__area {
+          display: flex;
+          align-items: center;
+          margin-bottom: 1em;
+
+          .logo__name {
+            font-size: 1.5em;
+            font-weight: 700;
+            margin: 0 1em;
+            color: var(--secondary-color);
+          }
+
+          img {
+            width: 35px;
+            height: 35px;
+            border-radius: 50%;
+            border: 1px solid var(--primary-color);
+          }
+
+          button {
+            border: none;
+            outline: none;
+            background-color: transparent;
+            font-size: 15px;
+            cursor: pointer;
+
+            &.sun {
+              color: #fff;
+            }
+          }
+        }
+
+        .desc__area {
+          max-width: 320px;
+          margin-bottom: 1.25em;
+
+          p {
+            color: #828282;
+            font-weight: 400;
+            line-height: 1.8;
+          }
+        }
+
+        .social__media {
+          // display: flex;
+
+          i {
+            color: #828282;
+            margin-right: 22px;
+            font-size: 24px;
+
+            // &:hover {
+            //   color: #313131;
+            // }
+          }
+        }
+      }
+
+      .service__area {
+        display: flex;
+
+        .service__header {
+          margin-right: 40px;
+
+          li.service__name {
+            color: var(--secondary-color);
+            font-weight: 600;
+          }
+
+          li {
+            margin-bottom: 10px;
+
+            i {
+              color: #828282;
+              margin-bottom: 1px;
+              font-weight: 400;
+
+              // &:hover {
+              //   color: #313131;
+              // }
+            }
+          }
+        }
+      }
+    }
+
+    hr {
+      height: 1px;
+      border: none;
+      background-color: #828282;
+      margin-bottom: 1em;
+    }
+
+    .footer__bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 0.857em;
+
+      .copy__right {
+        color: #828282;
+        display: flex;
+        align-items: center;
+
+        span {
+          margin-left: 8px;
+          font-weight: 400;
+          letter-spacing: 0.135em;
+        }
+      }
+
+      .tou {
+        i {
+          color: #828282;
+          margin-left: 1.5em;
+
+          // &:hover {
+          //   color: #313131;
+          // }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width:768px) {
+
+  .container__footer,
+  .service__area {
+    flex-wrap: wrap;
+    justify-content: left;
+  }
+
+  .service__header {
+    margin-left: 0;
+    margin-right: 40px;
+  }
+
+  .social_media {
+    margin-bottom: 1em;
+  }
+
+  .footer_bottom {
     flex-wrap: wrap;
-    align-items: center;
     justify-content: center;
-    color: #ccc;
-    font-family:'Courier New', Courier, monospace;
-    // background: linear-gradient(white,#38495a);
-    // background-clip: text;
-    // color: transparent;
   }
+}
+
+@media screen and (max-width: 510px) {
+  .service__header {
+    margin-bottom: 8px;
+  }
+
+  .copy__right {
+    margin-bottom: 8px;
+  }
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Rubik", sans-serif;
+  font-size: 16px;
+}
 
+a {
+  text-decoration: none;
 }
 </style>
diff --git a/teaching_integration_platform_template/src/assets/icons/QQ.svg b/teaching_integration_platform_template/src/assets/icons/QQ.svg
new file mode 100644
index 0000000..a8ec801
--- /dev/null
+++ b/teaching_integration_platform_template/src/assets/icons/QQ.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726655680044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2686" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m210.5 612.4c-11.5 1.4-44.9-52.7-44.9-52.7 0 31.3-16.2 72.2-51.1 101.8 16.9 5.2 54.9 19.2 45.9 34.4-7.3 12.3-125.6 7.9-159.8 4-34.2 3.8-152.5 8.3-159.8-4-9.1-15.2 28.9-29.2 45.8-34.4-35-29.5-51.1-70.4-51.1-101.8 0 0-33.4 54.1-44.9 52.7-5.4-0.7-12.4-29.6 9.4-99.7 10.3-33 22-60.5 40.2-105.8-3.1-116.9 45.3-215 160.4-215 113.9 0 163.3 96.1 160.4 215 18.1 45.2 29.9 72.8 40.2 105.8 21.7 70.1 14.6 99.1 9.3 99.7z" p-id="2687" fill="#828282"></path></svg>
\ No newline at end of file
