Merge pull request '下导航' (#12) from zhy into master

Reviewed-on: http://git.luyuan.tk/luyuan/beelink/pulls/12

src/components/NavBottom.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="nav-bottom">
+        <div class="nav-container">
+            <div v-for="(item, index) in navArray" :key="index" class="nav-item">{{ item.name }}</div>
+        </div>
+        <div class="copyright">Beelink公司版权所有  2019—2022</div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'NavBottom',
+    setup(){
+        interface Nav{
+            name: string;
+            route: string;
+        }
+        const navArray: Array<Nav> = [
+            {
+                name: "直播管理",
+                route: ""
+            },
+            {
+                name: "视频管理",
+                route: ""
+            },
+            {
+                name: "订阅者管理",
+                route: ""
+            },
+            {
+                name: "个人中心",
+                route: ""
+            }
+        ]
+        return {
+            navArray
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.nav-bottom {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .nav-container {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        font-size: 10px;
+        font-weight: 500;
+        color: #404040;
+        .nav-item {
+            padding: 0 14px;
+            position: relative;
+            &:not(:last-child)::after {
+                content: "";
+                position: absolute;
+                right: 0px;
+                top: 50%;
+                width: 1px;
+                height: 10px;
+                background: #404040;
+                transform: translate(0, -50%);
+            }
+        }
+    }
+    .copyright {
+        font-size: 9px;
+        font-weight: 500;
+        color: #808080;
+    }
+}
+</style>

src/views/mine/Archives.vue

@@ -172,12 +172,14 @@
             </div>
             <div class="submit-btn" @click="submitInfo">保存信息</div>
         </div>
+        <nav-bottom></nav-bottom>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, reactive } from "vue";
 import { UserOutlined, SmileOutlined, PlaySquareOutlined } from '@ant-design/icons-vue';
+import NavBottom from '@/components/NavBottom.vue';
 
 export default defineComponent({
     name: "Archives",
@@ -185,6 +187,7 @@ export default defineComponent({
         UserOutlined,
         SmileOutlined,
         PlaySquareOutlined,
+        NavBottom
     },
     setup(){
         interface SpeakItem{
@@ -215,6 +218,7 @@ export default defineComponent({
         const formData = reactive(formBasic);
         /**
          * 修改用户名
+         * @return { void }
          */
         function updateUserName (): void {
             console.log('修改');
@@ -222,6 +226,7 @@ export default defineComponent({
         }
         /**
          * 添加我还会说语言
+         * @return { void }
          */
         function addSpeakLang (): void {
             formData.speakLang.push({
@@ -231,6 +236,7 @@ export default defineComponent({
         }
         /**
          * 修改手机号
+         * @return { void }
          */
         function updatePhoneNumber (): void {
             console.log('修改手机号');
@@ -238,6 +244,7 @@ export default defineComponent({
         }
         /**
          * 修改密码
+         * @return { void }
          */
         function updateUserPassword(): void {
             console.log('修改密码');
@@ -245,6 +252,7 @@ export default defineComponent({
         }
         /**
          * 提交表单
+         * @return { void }
          */
         function submitInfo (): void {
             console.log('12');
@@ -265,19 +273,25 @@ export default defineComponent({
 <style lang="scss" scoped>
 .archives {
     width: 100%;
+    min-width: 700px;
     background-color: #ffffff;
     padding: 46px;
+    border-radius: 17px;
     .update-btn {
         font-size: 11px;
         color: #08AE98;
         font-weight: 500;
+        cursor: pointer;
+        user-select: none;
     }
     .user-info {
+        margin-bottom: 42px;
         .avatar {
             display: flex;
             align-items: center;
             justify-content: center;
             flex-direction: column;
+            margin-bottom: 30px;
             .user-name {
                 display: flex;
                 align-items: flex-end;
@@ -401,6 +415,8 @@ export default defineComponent({
             color: #FFFFFF;
             text-align: center;
             line-height: 23px;
+            cursor: pointer;
+            user-select: none;
         }
     }
 }