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>
|