网站首页面:尾部

src/Layout/footer/index.vue

@@ -1,23 +1,77 @@
 <template>
   <div class="footer">
-    <h1>FOOTER</h1>
+    <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>
+        备案信息:
+        备案信息
+      </li>
+    </ul>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {} from 'vue'
+import useAdminInfoStore from '@/store/module/adminInfo'
+const adminInfoStore = useAdminInfoStore()
+console.log(adminInfoStore);
+
 </script>
 
 <style lang="scss" scoped>
 .footer {
-  // position: fixed;
-  // bottom: 0;
-  height: 300px;
-  width: 100%;
   background-color: #252527;
+  height: 300px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
+
+  ul {
+    width: 600px;
+    height: 200px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    color: #ccc;
+  }
+
 }
 </style>