115 lines
2.9 KiB
Vue
115 lines
2.9 KiB
Vue
<template>
|
||
<div class="category-detail-layout">
|
||
<Head>
|
||
<Title>{{ selectedCategory.title }}</Title>
|
||
<Meta type="keywords" :content="siteConfig.keywords"/>
|
||
<Meta type="description" :content="siteConfig.description"/>
|
||
</Head>
|
||
<header>
|
||
<WebHeader :categories="categories"/>
|
||
<!-- 栏目树 d-none d-sm-block：在xs(默认宽度576px)隐藏 -->
|
||
<div class="d-none d-sm-block">
|
||
<Categories :categories="categories"/>
|
||
</div>
|
||
</header>
|
||
<main>
|
||
<!-- 修改el语言为中文 -->
|
||
<el-config-provider :locale="zhCn">
|
||
<div class="content-wrap category-detail-wrap">
|
||
<!-- 页面面包屑 -->
|
||
<PageBreadCrumb :data="breadcrumbs"/>
|
||
<div class="detail-wrap__body row">
|
||
<!-- 栏目树 d-none d-sm-block：在xs(默认宽度576px)隐藏 -->
|
||
<div class="d-none d-sm-block detail-wrap__categories col-4 col-lg-3">
|
||
<CategoryTree :data="subCategories" :selected="selectedCategory.uid"/>
|
||
</div>
|
||
<!-- 主要内容 -->
|
||
<div class="detail-wrap__content col-12 col-lg-9">
|
||
<slot></slot>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-config-provider>
|
||
</main>
|
||
<footer>
|
||
<WebFooter/>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import WebHeader from '@/components/layout/WebHeader'
|
||
import WebFooter from '@/components/layout/WebFooter'
|
||
import Categories from '@/components/layout/Categories'
|
||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||
import CategoryTree from '@/components/cms/CategoryTree';
|
||
import PageBreadCrumb from '@/components/common/PageBreadCrumb'
|
||
|
||
export default {
|
||
components: { Categories, WebFooter, WebHeader, CategoryTree, PageBreadCrumb},
|
||
props: {
|
||
// 栏目树
|
||
categories: {
|
||
required: true
|
||
},
|
||
// 子栏目树
|
||
subCategories: {
|
||
required: true
|
||
},
|
||
// 选中的子栏目
|
||
selectedCategory: {
|
||
required: true
|
||
},
|
||
// 面包屑
|
||
breadcrumbs: {
|
||
required: true
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
zhCn,
|
||
siteConfig: {
|
||
title: import.meta.env.VITE_SITE_TITLE,
|
||
keywords: import.meta.env.VITE_SEO_KEYWORDS,
|
||
description: import.meta.env.VITE_SEO_DESCRIPTION
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
// 栏目详情
|
||
.category-detail-wrap {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
.detail-wrap__body {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
// 栏目树
|
||
.detail-wrap__categories {
|
||
height: auto;
|
||
width: 275px;
|
||
flex-shrink: 0;
|
||
align-self: flex-start;
|
||
position: sticky;
|
||
top: 20px;
|
||
}
|
||
// 内容
|
||
.detail-wrap__content {
|
||
flex-grow: 1;
|
||
padding: 0 var(--gap) 10px 0;
|
||
overflow: hidden;
|
||
&.col-12 {
|
||
padding: 0 10px;
|
||
}
|
||
& > h2 {
|
||
font-size: var(--font-size-large);
|
||
margin: 0;
|
||
color: var(--primary-color);
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|