site footer

src/components/layouts/Footer.vue

@@ -1,13 +1,162 @@
+<script setup name="YXFooter">
+import { ref } from "vue"
+
+const vals = ref([
+  {
+    label: '营业执照'
+  },
+  {
+    label: '增值电信业务经营许可证 京B2-20191060',
+  },
+  {
+    label: '京ICP备17068232号-1',
+  },
+  {
+    label: '广播电视节目制作经营许可证',
+  },
+  {
+    label: '网络文化经营许可证京网文[2019]1067-097号',
+  },
+  {
+    label: '京公网安备 11010502036937号',
+  },
+  {
+    label: '食品经营许可证 JY11105052461621',
+  },
+  {
+    label: '出版物经营许可证 新出发京零字朝190063号',
+  }
+])
+</script>
 
 <template>
   <div class="layout-footer-container">
+    <div class="line">
+    </div>
+    <div class="hbox">
+      <img src="https://dummyimage.com/120x70/e3e3e3/fff" alt="">
+    </div>
+    <div class="content flex-row flex-jc-sb">
+      <div class="left">
+        <p>机核从2010年开始一直致力于分享游戏玩家的生活，以及深入探讨游戏相关的文化。我们开发原创的播客以及视频节目，一直在不断寻找民间高质量的内容创作者。</p>
+        <p>我们坚信游戏不止是游戏，游戏中包含的科学，文化，历史等各个层面的知识和故事，它们同时也会辐射到二次元甚至电影的领域，这些内容非常值得分享给热爱游戏的您。</p>
+      </div>
+      <div class="right">
+        <ul>
+          <li v-for="(item, idx) in vals" :key="idx">
+            <a href="#">{{ item.label }}</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer flex-row flex-jc-sb">
+      <div class="navigation">
+        <ul class="flex-row flex-aic">
+          <li>
+            <a href="#">
+              错误反馈
+            </a>
+          </li>
+          <li>
+            <a href="#">
+
+              用户协议
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              隐私政策
+
+            </a>
+          </li>
+          <li>
+            <a href="#">
+
+              开源软件声明
+            </a>
+          </li>
+          <li>
+            <a href="#">
 
+              个人信息收集清单
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              加入忆象
+
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="copyright">
+        copyright © 2009 - 2023 gamecores. all rights reserved
+      </div>
+    </div>
   </div>
 </template>
 
-<script lang="scss" scoped>
+<style lang="scss" scoped>
 .layout-footer-container {
+  .line {
+    margin-top: 20px;
+    height: 2px;
+    background: #e5e5e5;
+    margin-bottom: 40px;
+  }
 
-}
+  .content {
+    padding-bottom: 20px;
+
+    .left {
+      width: 38%;
+      font-size: 16px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 2;
+    }
 
-</script>
+    .right {
+      width: 0;
+      flex: 1;
+      line-height: 34px;
+
+      ul {
+        list-style: none;
+
+        li {
+          text-align: right;
+          font-size: 14px;
+          font-family: SFPro, SFPro;
+          font-weight: 400;
+
+          a {
+            text-decoration: none;
+            color: #666666;
+          }
+        }
+      }
+    }
+  }
+
+  .footer {
+    .navigation {
+      ul {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        column-gap: 14px;
+        font-size: 14px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        line-height: 20px;
+
+        a {
+          color: #444444;
+        }
+      }
+    }
+  }
+
+}
+</style>

src/views/index-content.vue

@@ -2,6 +2,7 @@
 import IndexTitle from "~/components/IndexTitle/index.vue";
 import IndexNews from "~/components/IndexNews/index.vue";
 import IndexSection from "~/components/IndexSection/index.vue";
+import YXFooter from "~/components/layouts/Footer.vue"
 
 </script>
 
@@ -35,7 +36,7 @@ import IndexSection from "~/components/IndexSection/index.vue";
     </div>
     <IndexTitle title="大家在聊" />
     <div class="tags-container flex-row">
-      <template v-for="(item, idx) in 19" :key="idx">
+      <template v-for="(item, idx) in 9" :key="idx">
         <div class="tagbox">
           <span>
             精选视频 {{ item }}
@@ -43,7 +44,8 @@ import IndexSection from "~/components/IndexSection/index.vue";
         </div>
       </template>
     </div>
-    test page.
+
+    <YXFooter />
   </div>
 </template>