feat: 2.0
This commit is contained in:
mozzie
parent
16f602a40f
commit
782697d2f5
8
apps/web/components.d.ts
vendored
8
apps/web/components.d.ts
vendored
|
|
@ -10,7 +10,15 @@ export {}
|
|||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
AButton: typeof import('@arco-design/web-vue')['Button']
|
||||
ACol: typeof import('@arco-design/web-vue')['Col']
|
||||
AInput: typeof import('@arco-design/web-vue')['Input']
|
||||
AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
|
||||
ALink: typeof import('@arco-design/web-vue')['Link']
|
||||
AMenu: typeof import('@arco-design/web-vue')['Menu']
|
||||
AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
|
||||
ARow: typeof import('@arco-design/web-vue')['Row']
|
||||
ASpace: typeof import('@arco-design/web-vue')['Space']
|
||||
ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
|
||||
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
||||
IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
|
||||
IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
@import 'normalize.css';
|
||||
|
||||
html,
|
||||
body {
|
||||
position: relative;
|
||||
background: var(--color-neutral-2);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'bs';
|
||||
src: url('./backset.woff');
|
||||
|
|
|
|||
|
|
@ -1,10 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
import Nav from './Nav.vue';
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<Nav />
|
||||
<RouterView />
|
||||
</template>
|
||||
<main>
|
||||
<RouterView />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
main {
|
||||
position: absolute;
|
||||
left: calc((100% - 1120px) / 2);
|
||||
right: calc((100% - 1120px) / 2);
|
||||
padding: 100px 0 40px 0;
|
||||
}
|
||||
</style>
|
||||
98
apps/web/src/layout/LeftMenu.vue
Normal file
98
apps/web/src/layout/LeftMenu.vue
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<script lang="ts" setup>
|
||||
import {
|
||||
IconNotification,
|
||||
IconBook,
|
||||
IconMessage,
|
||||
} from '@arco-design/web-vue/es/icon';
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
const onMenuItemClick = (key: string) => {
|
||||
console.log(key)
|
||||
router.push(key)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="left-menu">
|
||||
<a-menu auto-open showCollapseButton @menu-item-click="onMenuItemClick">
|
||||
<a-menu-item key="/">
|
||||
<template #icon><icon-notification /></template>
|
||||
公告
|
||||
</a-menu-item>
|
||||
<a-menu-item key="course">
|
||||
<template #icon><icon-book /></template>
|
||||
课程
|
||||
</a-menu-item>
|
||||
<a-menu-item key="topic">
|
||||
<template #icon><icon-message /></template>
|
||||
讨论
|
||||
</a-menu-item>
|
||||
<!-- <a-sub-menu key="3">
|
||||
<template #icon><icon-bulb></icon-bulb></template>
|
||||
<template #title>讨论</template>
|
||||
<a-menu-item key="3_0">宏观经济</a-menu-item>
|
||||
<a-menu-item key="3_1">指标编写</a-menu-item>
|
||||
</a-sub-menu> -->
|
||||
</a-menu>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.left-menu {
|
||||
position: fixed;
|
||||
left: calc((100% - 1120px) / 2);
|
||||
top: 100px;
|
||||
bottom: 40px;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-neutral-2);
|
||||
}
|
||||
|
||||
.left-menu .arco-menu {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.left-menu .arco-menu :deep(.arco-menu-collapse-button) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-menu .arco-menu:not(.arco-menu-collapsed) :deep(.arco-menu-collapse-button) {
|
||||
right: 0;
|
||||
bottom: 8px;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
.left-menu .arco-menu:not(.arco-menu-collapsed)::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: inherit;
|
||||
border-radius: 50%;
|
||||
box-shadow: -4px 0 2px var(--color-bg-2), 0 0 1px rgba(0, 0, 0, 0.3);
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
.left-menu .arco-menu.arco-menu-collapsed {
|
||||
width: 48px;
|
||||
height: auto;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 138px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.left-menu .arco-menu.arco-menu-collapsed :deep(.arco-menu-collapse-button) {
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,9 +15,10 @@ import Search from '@vicons/carbon/Search'
|
|||
<span>Backset</span>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="search">
|
||||
<a-input-search :style="{ width: '320px' }" placeholder="搜索" />
|
||||
</div>
|
||||
<router-link to="course">学习</router-link>
|
||||
<router-link to="topic">讨论</router-link>
|
||||
<router-link to="blog">博客</router-link>
|
||||
<a-input-search :style="{ width: '160px' }" placeholder="搜索" />
|
||||
</div>
|
||||
<div class="end">
|
||||
<span>注册</span>
|
||||
|
|
@ -29,6 +30,10 @@ import Search from '@vicons/carbon/Search'
|
|||
|
||||
<style lang="less" scoped>
|
||||
header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1994;
|
||||
height: 60px;
|
||||
background: #24292f;
|
||||
color: #d7d7d7;
|
||||
|
|
@ -42,13 +47,14 @@ header {
|
|||
.start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
font-size: 20px;
|
||||
font-family: 'bs';
|
||||
|
|
@ -56,9 +62,22 @@ header {
|
|||
}
|
||||
|
||||
.middle {
|
||||
text-align: right;
|
||||
.arco-input-search{
|
||||
border: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color: #d7d7d7;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
margin-right: 30px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.arco-input-search {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +86,7 @@ header {
|
|||
|
||||
span {
|
||||
cursor: pointer;
|
||||
margin-left: 30px;
|
||||
margin-left: 32px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -9,14 +9,11 @@ const router = createRouter({
|
|||
name: 'home',
|
||||
component: HomeView
|
||||
},
|
||||
// {
|
||||
// path: '/about',
|
||||
// name: 'about',
|
||||
// // route level code-splitting
|
||||
// // this generates a separate chunk (About.[hash].js) for this route
|
||||
// // which is lazy-loaded when the route is visited.
|
||||
// component: () => import('../views/AboutView.vue')
|
||||
// }
|
||||
{
|
||||
path: '/course',
|
||||
name: 'course',
|
||||
component: () => import('../views/Course/index.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
|
|
|||
5
apps/web/src/views/Course/index.vue
Normal file
5
apps/web/src/views/Course/index.vue
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
course
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -2,7 +2,38 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
home
|
||||
</main>
|
||||
<div>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
<h1>home</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
Loading…
Reference in New Issue
Block a user