整合前端仓库并保留提交历史
This commit is contained in:
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="member-layout">
|
||||
<el-container class="layout-container">
|
||||
<el-header class="layout-header">
|
||||
<Header />
|
||||
</el-header>
|
||||
<el-scrollbar :style="calcHeight(60)" class="main-scrollbar" ref="mainScrollbarRef">
|
||||
<div class="layout-main">
|
||||
<div class="layout-content">
|
||||
<el-row class="layouts-main" justify="center">
|
||||
<el-col class="user-layouts" :span="16" :xs="24">
|
||||
<client-only>
|
||||
<Aside class="hidden-sm-and-down" />
|
||||
</client-only>
|
||||
<el-main class="layout-main-content">
|
||||
<slot />
|
||||
</el-main>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTemplateRef, watch, provide } from 'vue'
|
||||
import Header from './components/header.vue'
|
||||
import Aside from './components/aside.vue'
|
||||
import Footer from './components/footer.vue'
|
||||
const route = useRoute()
|
||||
const mainScrollbarRef = useTemplateRef('mainScrollbarRef')
|
||||
|
||||
// 计算滚动区域高度
|
||||
const calcHeight = (headerHeight: number) => {
|
||||
return {
|
||||
height: `calc(100vh - ${headerHeight}px)`,
|
||||
maxHeight: `calc(100vh - ${headerHeight}px)`
|
||||
}
|
||||
}
|
||||
|
||||
// 路由切换时滚动条滚动至顶部
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
if (!route.meta.disableScrollTo) {
|
||||
mainScrollbarRef.value?.scrollTo(0, 0)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 将滚动条的 ref provide 给子级组件
|
||||
provide('mainScrollbarRef', mainScrollbarRef)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.layout-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.layout-header {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
background-color: var(--ma-bg-color-overlay);
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.main-scrollbar {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.layout-main {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
|
||||
.layout-content {
|
||||
flex: 1;
|
||||
min-height: var(--content-min-height, 500px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layout-footer {
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-layouts {
|
||||
display: flex;
|
||||
padding-top: 15px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.layout-main-content {
|
||||
padding: 0 !important;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--ma-bg-color-overlay);
|
||||
margin-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.layout-main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-main-content-mobile {
|
||||
padding: 0 !important;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--ma-bg-color-overlay);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 组件样式适配 */
|
||||
.layout-header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
:deep(.header-logo) {
|
||||
span {
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.frontend-header-menu) {
|
||||
background: transparent;
|
||||
.el-menu-item,
|
||||
.el-sub-menu .el-sub-menu__title {
|
||||
&.is-active {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
color: var(--el-menu-hover-text-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-footer {
|
||||
color: var(--el-text-color-secondary);
|
||||
background-color: transparent !important;
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* 响应式断点 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.layout-container {
|
||||
.layout-main {
|
||||
.layout-content {
|
||||
--content-min-height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-layouts-mobile {
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.layout-container {
|
||||
.layout-main {
|
||||
.layout-content {
|
||||
--content-min-height: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media screen and (max-width: 1024px) {
|
||||
.layout-container {
|
||||
.main-scrollbar {
|
||||
.layout-main {
|
||||
.layout-content {
|
||||
padding: 0 15px;
|
||||
--content-min-height: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.layout-container {
|
||||
.main-scrollbar {
|
||||
.layout-main {
|
||||
.layout-content {
|
||||
padding: 0 10px;
|
||||
--content-min-height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 650px) {
|
||||
.layout-container {
|
||||
.main-scrollbar {
|
||||
.layout-main {
|
||||
.layout-content {
|
||||
--content-min-height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user