Merge pull request 'xbx' (#7) from xbx into master

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

README.md

@@ -14,5 +14,3 @@
         |- mine 用户个人中心
         |- manage 直播 视频 日历
         |- login 登录与关于我们
-
-

src/App.vue

@@ -1,11 +1,13 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </div>
   <router-view/>
 </template>
 
-<style lang="scss" scoped>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
 
+})
+</script>
+
+<style lang="scss" scoped>
 </style>

src/components/Menu.vue

@@ -0,0 +1,175 @@
+<template>
+    <div class="menu">
+        <div class="user" style="overflow: hidden;">
+            <div class="user" :class="{'seltop': selnum == 0}">
+                <img src="" alt="" class="head">
+                <div class="name">name</div>
+            </div>
+        </div>
+        
+        <div class="list">
+            <div v-for="(i,j) in list" :key="j" style="overflow: hidden;" @click="routeto(j)">
+                <div class="item" :class="{'selitem': j == selnum, 'seltop': j == selnum - 1, 'selbottom': j == selnum + 1}">
+                    <div class="route">
+                        <img src="" alt="" class="icon">
+                        <div class="title">{{i.name}}</div>
+                    </div>
+                    <img src="" alt="" class="right">
+                </div>
+            </div>
+            <div style="overflow: hidden;">
+                <div class="item" :class="{'selbottom': selnum == list.length - 1}"></div>
+            </div>
+            <div class="item loginout">
+                <div class="route">
+                    <img src="" alt="" class="icon">
+                    <div class="title">
+                        帐号退出
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.menu{
+    user-select: none;
+    width: 171px;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(0deg, #0EDCC2, #50DF98, #7EE278, #A2E562);
+    .user{
+        width: 100%;
+        height: 150px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .head{
+            width: 57px;
+            height: 57px;
+            background-color: #0f0;
+            margin-bottom: 15px;
+            border-radius: 50%;
+        }
+        .name{
+            font-size: 15rpx;
+            line-height: 1;
+            color: #fff;
+        }
+
+    }
+    .list{
+        position: relative;
+        display: flex;
+        height: 100%;
+        padding-left: 6px;
+        display: flex;
+        flex-direction: column;
+        .item{
+            display: flex;
+            align-items: center;
+            height: 50px;
+            padding: 0 18px;
+            justify-content: space-between;
+            .route{
+                display: flex;
+                .icon{
+                    width: 15px;
+                    height: 15px;
+                    background-color: #0f0;
+                }
+                .title{
+                    font-size: 13px;
+                    color: #fff;
+                    line-height: 1;
+                    margin-left: 6px;
+                }
+            }
+            .right{
+                width: 5px;
+                height: 10px;
+                background-color: #0f0;
+            }
+        }
+        .loginout{
+            position: absolute;
+            bottom: 10px;
+        }
+    }
+    .seltop{
+        border-radius: 0 0 25px 0;
+        box-shadow: 0 0 0 30px #f5f5f5 ;
+    }
+    .selbottom{
+        border-radius: 0 25px 0 0;
+        box-shadow: 0 0 0 30px #f5f5f5 ;
+    }
+    .selitem{
+        border-radius: 25px 0 0 25px;
+        background-color: #F5F5F5;
+        .title{
+            color: #08AE98 !important;    
+            font-weight: bold;
+        }
+    }
+}
+</style>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+
+export default defineComponent({
+    setup(){
+        interface MenuItem {
+            icon: string;
+            name: string;
+            route: string;
+        }
+        const list: Array<MenuItem> = [
+            {  
+                icon: "",
+                name: "我的档案",
+                route: ""
+            },
+            {  
+                icon: "",
+                name: "发布直播",
+                route: ""
+            },
+            {  
+                icon: "",
+                name: "上传视频",
+                route: ""
+            },
+            {  
+                icon: "",
+                name: "我的钱包",
+                route: ""
+            },
+            {  
+                icon: "",
+                name: "列表统计",
+                route: ""
+            },
+            {  
+                icon: "",
+                name: "关于Beelink",
+                route: ""
+            }
+        ]
+        const selnum = ref(0);
+        const routeto = (index: number) => {
+            console.log(index)
+            selnum.value = index;
+
+        }
+        return{
+            list,
+            routeto,
+            selnum
+        }
+    }
+})
+</script>

src/router/index.ts

@@ -1,11 +1,10 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
-import Home from '../views/Home.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: () => import(/* webpackChunkName: "about" */ '../components/Menu.vue')
   },
   {
     path: '/about',