theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
Reviewed-on: http://git.luyuan.tk/luyuan/beelink/pulls/7
This commit is contained in:
luyuan 2020-09-25 15:14:32 +08:00
commit 08948b6b89
4 changed files with 183 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

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

12
src/App.vue
View File

@ -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>

175
src/components/Menu.vue Normal file
View File

@ -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>

3
src/router/index.ts
View File

@ -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',