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

@@ -38,6 +38,7 @@
                             style="width: 171px"
                             size="small"
                             ref="select"
+                            :getPopupContainer="triggerNode => triggerNode.parentNode"
                         >
                             <a-select-option v-for="(item, index) in ['英语', '法语']" :key="index" :value="item">
                                 {{ item }}
@@ -54,6 +55,7 @@
                                         style="width: 171px"
                                         size="small"
                                         ref="select"
+                                        :getPopupContainer="triggerNode => triggerNode.parentNode"
                                     >
                                         <a-select-option v-for="(item, index) in ['英语', '法语']" :key="index" :value="item">
                                             {{ item }}
@@ -79,6 +81,7 @@
                             style="width: 171px"
                             size="small"
                             ref="select"
+                            :getPopupContainer="triggerNode => triggerNode.parentNode"
                         >
                             <a-select-option v-for="(item, index) in ['英语', '法语']" :key="index" :value="item">
                                 {{ item }}
@@ -137,6 +140,7 @@
                             style="width: 171px"
                             size="small"
                             ref="select"
+                            :getPopupContainer="triggerNode => triggerNode.parentNode"
                         >
                             <a-select-option v-for="(item, index) in ['北京 GMT +08:00']" :key="index" :value="item">
                                 {{ item }}
@@ -150,6 +154,7 @@
                             style="width: 171px"
                             size="small"
                             ref="select"
+                            :getPopupContainer="triggerNode => triggerNode.parentNode"
                         >
                             <a-select-option v-for="(item, index) in ['人民币']" :key="index" :value="item">
                                 {{ item }}
@@ -163,6 +168,7 @@
                             style="width: 171px"
                             size="small"
                             ref="select"
+                            :getPopupContainer="triggerNode => triggerNode.parentNode"
                         >
                             <a-select-option v-for="(item, index) in ['英语', '中文']" :key="index" :value="item">
                                 {{ item }}
@@ -173,12 +179,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",
@@ -186,6 +194,7 @@ export default defineComponent({
         UserOutlined,
         SmileOutlined,
         PlaySquareOutlined,
+        NavBottom
     },
     setup(){
         interface SpeakItem{
@@ -216,13 +225,14 @@ export default defineComponent({
         const formData = reactive(formBasic);
         /**
          * 修改用户名
+         * @return { void }
          */
         function updateUserName (): void {
             console.log('修改');
-            
         }
         /**
          * 添加我还会说语言
+         * @return { void }
          */
         function addSpeakLang (): void {
             formData.speakLang.push({
@@ -232,6 +242,7 @@ export default defineComponent({
         }
         /**
          * 修改手机号
+         * @return { void }
          */
         function updatePhoneNumber (): void {
             console.log('修改手机号');
@@ -239,6 +250,7 @@ export default defineComponent({
         }
         /**
          * 修改密码
+         * @return { void }
          */
         function updateUserPassword(): void {
             console.log('修改密码');
@@ -246,11 +258,13 @@ export default defineComponent({
         }
         /**
          * 提交表单
+         * @return { void }
          */
         function submitInfo (): void {
             console.log('12');
             
         }
+
         return {
             formData,
             updateUserName,
@@ -266,20 +280,26 @@ export default defineComponent({
 <style lang="scss" scoped>
 .archives {
     width: 100%;
+    min-width: 700px;
     background-color: #ffffff;
     padding: 46px;
+    border-radius: 17px;
     position: relative;
     .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;
@@ -322,6 +342,12 @@ export default defineComponent({
                         border: 1px solid #DCDFE0;
                         font-size: 11px;
                     }
+                    .ant-select {
+                        font-size: 12px;
+                    }
+                    .select-down {
+                        font-size: 12px;
+                    }
                 }
                 .speak-lang {
                     .speak-array {
@@ -403,6 +429,8 @@ export default defineComponent({
             color: #FFFFFF;
             text-align: center;
             line-height: 23px;
+            cursor: pointer;
+            user-select: none;
         }
     }
 }

src/views/mine/ReleaseWebcast.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="webcast">
+        <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-form-item label="Activity name">
+            <a-input v-model:value="form.name" />
+            </a-form-item>
+            <a-form-item label="Activity zone">
+            <a-select v-model:value="form.region" placeholder="please select your zone">
+                <a-select-option value="shanghai">
+                Zone one
+                </a-select-option>
+                <a-select-option value="beijing">
+                Zone two
+                </a-select-option>
+            </a-select>
+            </a-form-item>
+            <a-form-item label="Activity time">
+            <a-date-picker
+                v-model:value="form.date1"
+                show-time
+                type="date"
+                placeholder="Pick a date"
+                style="width: 100%;"
+            />
+            </a-form-item>
+            <a-form-item label="Instant delivery">
+            <a-switch v-model:checked="form.delivery" />
+            </a-form-item>
+            <a-form-item label="Activity type">
+            <a-checkbox-group v-model:value="form.type">
+                <a-checkbox value="1" name="type">
+                Online
+                </a-checkbox>
+                <a-checkbox value="2" name="type">
+                Promotion
+                </a-checkbox>
+                <a-checkbox value="3" name="type">
+                Offline
+                </a-checkbox>
+            </a-checkbox-group>
+            </a-form-item>
+            <a-form-item label="Resources">
+            <a-radio-group v-model:value="form.resource">
+                <a-radio value="1">
+                Sponsor
+                </a-radio>
+                <a-radio value="2">
+                Venue
+                </a-radio>
+            </a-radio-group>
+            </a-form-item>
+            <a-form-item label="Activity form">
+            <a-input v-model:value="form.desc" type="textarea" />
+            </a-form-item>
+            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
+            <a-button type="primary" @click="onSubmit">
+                Create
+            </a-button>
+            <a-button style="margin-left: 10px;">
+                Cancel
+            </a-button>
+            </a-form-item>
+        </a-form>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+    name: 'ReleaseWebcast',
+    setup() {
+        function onSubmit(): void {
+
+        }
+        return {
+            labelCol: { span: 4 },
+            wrapperCol: { span: 14 },
+            form: {
+                name: '',
+                region: undefined,
+                date1: undefined,
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: '',
+            },
+            onSubmit
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+</style>