💄 Add more styles to footer and modify the content

wibus-wee-ac · Jul 4, 2021 · da88822 · da88822
1 parent 764f29b
commit da88822
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 20 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -39,7 +39,9 @@
     <el-main>
       <router-view />
     </el-main>
-    <Footer />
+    <el-footer>
+      <Footer />
+    </el-footer>
   </el-container>
 </template>
 

diff --git a/src/assets/备案图标.png b/src/assets/备案图标.png
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -1,8 +1,17 @@
 <template>
-  <el-footer>
-    <code>ICP</code>&nbsp;&nbsp;浙B2-20080101&nbsp;&nbsp;|&nbsp;&nbsp;<span class="main_name">学生博客联盟</span
-    >&nbsp;&nbsp;|&nbsp;&nbsp;<code>公安</code> 11010502030143
-  </el-footer>
+  <div class="container">
+    <span>
+      <code>粤ICP备</code>
+      <el-link href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"> 2021069486号-1 </el-link>
+    </span>
+    <el-divider direction="vertical"></el-divider>
+    <span class="main-name">学生博客联盟</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>
+      <code><img src="../assets/备案图标.png" alt="备案图标" />蒙公网安备</code>
+      <el-link href="http://www.beian.gov.cn/portal/registerSystemInfo" target="_blank"> 15012102000207号 </el-link>
+    </span>
+  </div>
 </template>
 
 <script lang="ts">
@@ -14,33 +23,26 @@ export default defineComponent({
 </script>
 
 <style>
-.el-footer {
-  font-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC',
-    'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN', 'Microsoft YaHei', 'Wenquanyi Micro Hei',
-    'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
+.container {
   font-size: 14px;
   display: flex;
-  border-radius: 13px;
-  background: #e0e0e0;
-  box-shadow: 5px 5px 5px #bebebe;
   justify-content: center;
   align-items: center;
 }
-.main_name {
+.main-name {
   font-size: 15px;
-  font-family: -apple-system, serif, Segoe UI, Roboto, Helvetica Neue, Arial, 'Noto Serif SC', PingFang SC, Microsoft Yahei UI,
-    Microsoft Yahei;
 }
-.el-footer code {
-  margin: 0;
+.container code {
+  margin-right: 4px;
   padding: 5px;
   font-size: 85%;
   border-radius: 3px;
-  font-family: mononoki, Consolas, Liberation Mono, Menlo, Courier, monospace, Apple Color Emoji, Segoe UI Emoji,
-    Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
   word-break: break-word;
   background-size: 20px 20px;
-  white-space: pre-wrap;
   background-color: rgba(186, 204, 209, 0.877);
 }
+.container img {
+  margin-right: 5px;
+  margin-bottom: -5px;
+}
 </style>