|
|
<script setup>
|
|
|
import Head from '@/components/head.vue'
|
|
|
import { ref } from 'vue'
|
|
|
const list = ref(['首页', '课程', '笔记', '消息', '云盘', '通讯录', '账号管理', '班级管理'])
|
|
|
const navigator = () => {}
|
|
|
import router from '@/router/index';
|
|
|
const list = ref([
|
|
|
{ path: '/home', name: '首页' },
|
|
|
{ path: '/', name: '课程' },
|
|
|
{ path: '/note', name: '笔记' },
|
|
|
{ path: '/news', name: '消息' },
|
|
|
{ path: '/disk', name: '云盘' },
|
|
|
{ path: '/address', name: '通讯录' },
|
|
|
{ path: '/account', name: '账号管理' },
|
|
|
{ path: '/manage', name: '班级管理' }
|
|
|
])
|
|
|
const navigator = (path) => {
|
|
|
console.log(path);
|
|
|
router.push(path)
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
...
|
...
|
@@ -17,7 +31,7 @@ const navigator = () => {} |
|
|
</div>
|
|
|
<div class="name">XXX</div>
|
|
|
<div class="cont">
|
|
|
<div class="li" v-for="item in list" :key="item" @click="navigator">{{ item }}</div>
|
|
|
<div class="li" v-for="item in list" :key="item" @click="navigator(item.path)">{{ item.name }}</div>
|
|
|
</div>
|
|
|
<div class="one"></div>
|
|
|
</div>
|
...
|
...
|
@@ -29,7 +43,7 @@ const navigator = () => {} |
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<style lang="scss">
|
|
|
<style lang="scss" scoped>
|
|
|
.counter {
|
|
|
background-color: #f2f2f2;
|
|
|
.banner {
|
...
|
...
|
@@ -38,10 +52,10 @@ const navigator = () => {} |
|
|
.left {
|
|
|
position: relative;
|
|
|
margin: 40px 40px 0;
|
|
|
width: 25%;
|
|
|
width: 15%;
|
|
|
background-color: #6170c3;
|
|
|
color: #fff;
|
|
|
border-radius: 18px;
|
|
|
border-radius: 18px 18px 0 0;
|
|
|
.pic {
|
|
|
margin: 0 auto;
|
|
|
padding-top: 50px;
|
...
|
...
|
@@ -66,11 +80,21 @@ const navigator = () => {} |
|
|
padding-left: 30px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.li:hover {
|
|
|
background-color: #4d5cb6;
|
|
|
}
|
|
|
.active {
|
|
|
background-color: #4d5cb6;
|
|
|
}
|
|
|
}
|
|
|
.one {
|
|
|
background-color: pink;
|
|
|
}
|
|
|
}
|
|
|
.right {
|
|
|
width: 75%;
|
|
|
background-color: #f2f2f2;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
...
|
...
|
|