✨ feat:完成了layout布局
This commit is contained in:
sundongyu
parent
f8fe7d6b23
commit
12fbc3ef97
5
env.d.ts
vendored
5
env.d.ts
vendored
|
|
@ -1 +1,6 @@
|
|||
/// <reference types="vite/client" />
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
|
|
|||
85
src/App.vue
85
src/App.vue
|
|
@ -1,85 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
||||
|
||||
<div class="wrapper">
|
||||
<HelloWorld msg="You did it!" />
|
||||
|
||||
<nav>
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/about">About</RouterLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<RouterView />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 0 1rem;
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
nav a:first-of-type {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: left;
|
||||
margin-left: -1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
92
src/layout/components/AsideIndex.vue
Normal file
92
src/layout/components/AsideIndex.vue
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<t-aside style="border-top: 1px solid var(--component-border); height: 100vh">
|
||||
<t-menu
|
||||
v-model:expanded="expanded"
|
||||
theme="light"
|
||||
default-value="3-2"
|
||||
expand-mutex
|
||||
:collapsed="collapsed"
|
||||
>
|
||||
<template #logo>
|
||||
<img :src="iconUrl" alt="logo" :width="collapsed ? 35 : 136" />
|
||||
</template>
|
||||
<t-submenu value="3">
|
||||
<template #icon>
|
||||
<t-icon name="mail" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>消息区</span>
|
||||
</template>
|
||||
<t-submenu value="3-1" title="二级菜单">
|
||||
<t-menu-item value="3-1-1"> 三级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-1-2"> 三级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-1-3"> 三级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<t-submenu value="3-5" title="二级菜单">
|
||||
<t-menu-item value="3-5-1"> 三级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-5-2"> 三级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-5-3"> 三级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<t-menu-item value="3-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-3"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-4"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<t-menu-item value="user-circle">
|
||||
<template #icon>
|
||||
<t-icon name="user-circle" />
|
||||
</template>
|
||||
个人中心
|
||||
</t-menu-item>
|
||||
<t-submenu value="4">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>视频区</span>
|
||||
</template>
|
||||
<t-menu-item value="4-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="4-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="4-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<t-menu-item value="edit1">
|
||||
<template #icon>
|
||||
<t-icon name="edit-1" />
|
||||
</template>
|
||||
资源编辑
|
||||
</t-menu-item>
|
||||
<template #operations>
|
||||
<t-button variant="text" shape="square" @click="changeCollapsed">
|
||||
<template #icon><t-icon name="view-list" /></template>
|
||||
</t-button>
|
||||
</template>
|
||||
</t-menu>
|
||||
</t-aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { MenuProps, ButtonProps } from 'tdesign-vue-next'
|
||||
const collapsed = ref(false)
|
||||
const iconUrl = ref(
|
||||
'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png'
|
||||
)
|
||||
const changeCollapsed: ButtonProps['onClick'] = () => {
|
||||
collapsed.value = !collapsed.value
|
||||
iconUrl.value = collapsed.value
|
||||
? 'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png'
|
||||
: 'https://tdesign.gtimg.com/site/baseLogo-light.png'
|
||||
}
|
||||
|
||||
const expanded = ref<MenuProps['expanded']>(['2', '3'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.t-demo-collapse-btn {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: #4b4b4b;
|
||||
border-color: transparent;
|
||||
--ripple-color: #383838;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
14
src/layout/components/ContentIndex.vue
Normal file
14
src/layout/components/ContentIndex.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<t-layout>
|
||||
<t-content><RouterView /></t-content>
|
||||
<t-footer>Footer</t-footer>
|
||||
</t-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
36
src/layout/components/HeaderIndex.vue
Normal file
36
src/layout/components/HeaderIndex.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div class="box" :style="{ width: '800px' }">
|
||||
<t-button variant="text" shape="square">
|
||||
<template #icon><t-icon name="search" /></template>
|
||||
</t-button>
|
||||
<t-button variant="text" shape="square">
|
||||
<template #icon><t-icon name="mail" /></template>
|
||||
</t-button>
|
||||
<t-button variant="text" shape="square">
|
||||
<template #icon><t-icon name="user" /></template>
|
||||
</t-button>
|
||||
<t-button variant="text" shape="square">
|
||||
<template #icon><t-icon name="ellipsis" /></template>
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.t-menu__operations {
|
||||
.t-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.t-demo-menu--dark {
|
||||
.t-button {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: #4b4b4b;
|
||||
border-color: transparent;
|
||||
--ripple-color: #383838;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,27 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<div class="box">
|
||||
<t-layout>
|
||||
<t-aside><AsideIndex /></t-aside>
|
||||
<t-layout>
|
||||
<t-header><HeaderIndex /></t-header>
|
||||
<t-content><ContentIndex /></t-content>
|
||||
<!-- <t-footer>Footer</t-footer> -->
|
||||
</t-layout>
|
||||
</t-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import AsideIndex from '@/layout/components/AsideIndex.vue'
|
||||
import HeaderIndex from './components/HeaderIndex.vue'
|
||||
import ContentIndex from './components/ContentIndex.vue'
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
|
|
|
|||
7
src/papes/ShiYan.vue
Normal file
7
src/papes/ShiYan.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<div>1</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import Layout from '@/layout/index.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
|
|
@ -7,15 +7,14 @@ const router = createRouter({
|
|||
{
|
||||
path: '/',
|
||||
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')
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '/ad',
|
||||
name: 'ad',
|
||||
component: () => import('@/papes/ShiYan.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@ pre {
|
|||
.back-color {
|
||||
background-color: #f5f7fb;
|
||||
padding: 16px 24px;
|
||||
height: calc(96vh - 64px);
|
||||
height: calc(91vh - 64px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,31 +4,31 @@
|
|||
|
||||
// 滚动条外观样式
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
width: 10px;
|
||||
border-radius: 10px;
|
||||
width: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background: @base-scrollbar-color;
|
||||
border-radius: 8px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background: @base-scrollbar-color;
|
||||
}
|
||||
|
||||
.t-default-menu__inner .t-menu--scroll {
|
||||
background-image: linear-gradient(#fff, rgba(146, 146, 255, 0.2));
|
||||
background-image: linear-gradient(#fff, rgba(146, 146, 255, 0.2));
|
||||
}
|
||||
|
||||
// 主体背景颜色以及大小
|
||||
.back-color {
|
||||
background-color: #f5f7fb;
|
||||
padding: 16px 24px;
|
||||
height: calc(96vh - 64px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: #f5f7fb;
|
||||
padding: 16px 24px;
|
||||
height: calc(91vh - 64px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// 去除a标签默认样式
|
||||
|
|
@ -37,24 +37,24 @@ a:link,
|
|||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// 改变文字按钮的颜色
|
||||
.t-button--variant-text .t-button__text {
|
||||
color: @base-text-color;
|
||||
color: @base-text-color;
|
||||
}
|
||||
|
||||
// 改变文字按钮移入的颜色
|
||||
.t-button--variant-text .t-button__text:hover {
|
||||
color: #8799a3;
|
||||
color: #8799a3;
|
||||
}
|
||||
// 禁用的颜色
|
||||
.t-is-disabled .t-button__text{
|
||||
color: #d3d3d3 !important;
|
||||
.t-is-disabled .t-button__text {
|
||||
color: #d3d3d3 !important;
|
||||
}
|
||||
|
||||
// 查询框宽度
|
||||
.form-item-width {
|
||||
width: 100%;
|
||||
}
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,4 +11,4 @@
|
|||
// text按钮的颜色
|
||||
@base-text-color: #0052d9;
|
||||
// 滚动条的颜色
|
||||
@base-scrollbar-color: rgb(229, 229, 229);
|
||||
@base-scrollbar-color: rgb(229, 229, 229);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user