向文可
2 years ago
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