parent
170d05b005
commit
45564d6643
@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<el-breadcrumb separator="/">
|
||||||
|
<el-breadcrumb-item :to="{ path: '/' }">课程管理</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item><a href="/">课程列表</a></el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item>添加课程</el-breadcrumb-item>
|
||||||
|
</el-breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup></script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.el-breadcrumb {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-left: @layout-space-super;
|
||||||
|
:deep(.el-breadcrumb__item) {
|
||||||
|
.el-breadcrumb__inner {
|
||||||
|
color: @layout-header-fc;
|
||||||
|
a {
|
||||||
|
color: @layout-header-fc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<XIcon name="menu-fold-fill" size="16" />
|
||||||
|
<LayoutBreakcrumb />
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<LayoutOperation />
|
||||||
|
<LayoutProfile />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import LayoutBreakcrumb from './breakcrumb.vue';
|
||||||
|
import LayoutProfile from './profile.vue';
|
||||||
|
import LayoutOperation from './operation.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.layout-header {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: @layout-header-bgc;
|
||||||
|
color: @layout-header-fc;
|
||||||
|
box-shadow: @layout-shadow;
|
||||||
|
.header-left,
|
||||||
|
.header-right {
|
||||||
|
height: @layout-header-height;
|
||||||
|
padding: 0 @layout-space-large;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.x-icon {
|
||||||
|
border-radius: @layout-border-radius;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout-operation">
|
||||||
|
<el-button type="text" @click="handleFullscreen">
|
||||||
|
<XIcon :name="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" />
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const isFullscreen = ref(!!document.fullscreenElement);
|
||||||
|
const handleFullscreen = () => {
|
||||||
|
if (isFullscreen.value) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
isFullscreen.value = false;
|
||||||
|
} else {
|
||||||
|
isFullscreen.value = true;
|
||||||
|
let fn =
|
||||||
|
document.body.requestFullscreen ||
|
||||||
|
document.body.webkitRequestFullscreen ||
|
||||||
|
document.body.mozRequestFullscreen ||
|
||||||
|
document.body.msRequestFullscreen;
|
||||||
|
document.fullscreenEnabled && fn?.call(document.body);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.layout-operation {
|
||||||
|
height: @layout-header-height;
|
||||||
|
padding: 0 @layout-space-large;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.el-avatar {
|
||||||
|
margin-right: @layout-space;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout-profile">
|
||||||
|
<el-avatar />
|
||||||
|
<el-dropdown size="middle">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
<span>管理员</span>
|
||||||
|
<XIcon class="el-icon--right" name="ArrowDown" />
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||||
|
<el-dropdown-item>退出登录</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup></script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.layout-profile {
|
||||||
|
height: @layout-header-height;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.el-avatar {
|
||||||
|
margin-right: @layout-space;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout-tabs"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup></script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.layout-tabs {
|
||||||
|
width: 100%;
|
||||||
|
height: @layout-tabs-height;
|
||||||
|
border-top: 1px solid @color-ghost-white;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-shadow: @layout-shadow;
|
||||||
|
background-color: @layout-header-bgc;
|
||||||
|
color: @layout-header-fc;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<router-view v-slot="{ Component }">
|
||||||
|
<transition mode="out-in" name="fade-transform">
|
||||||
|
<keep-alive>
|
||||||
|
<component :is="Component" />
|
||||||
|
</keep-alive>
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup></script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
Loading…
Reference in new issue