61 lines
2.0 KiB
Plaintext
61 lines
2.0 KiB
Plaintext
<!-- CSR 碳中和 -->
|
|
<script setup lang="tsx">
|
|
import AppBlock from '@/components/AppBlock.vue'
|
|
import HomeHead from '@/views/home/components/HomeHead.vue'
|
|
import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
|
|
import CSRSide from './CSRSide.vue'
|
|
import CSRContent from './CSRContent.vue'
|
|
import CSRContent1 from './CSRContent1.vue'
|
|
import CSRContent2 from './CSRContent2.vue'
|
|
import CSRContent22 from './CSRContent22.vue'
|
|
import CSRContent23 from './CSRContent23.vue'
|
|
import { Content2, Content3 } from './CSRData'
|
|
|
|
const Navs = [{ name: '集团*部门方针' }, { name: '年度活动日程表' }, { name: '其他链接' }, { name: '紧急联络' }, { name: 'CN/JP' }]
|
|
const Content = [
|
|
{ key: '1-1', component: () => <CSRContent /> },
|
|
{ key: '1-2', component: () => <CSRContent22/> },
|
|
{ key: '1-3', component: () => <CSRContent23 /> },
|
|
// { key: '1-4', component: () => <CSRContent2 items={Content3} /> },
|
|
{ key: '1-4', component: () => <CSRContent2 /> },
|
|
]
|
|
|
|
const activeNav = ref('1-4')
|
|
const activeContent = computed(() => {
|
|
const nav = unref(activeNav)
|
|
const curContent = Content.find((i) => nav.includes(i.key))
|
|
console.log(curContent,1111)
|
|
return curContent?.component || null
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<HomeHead class="top">
|
|
<!-- <template #content>
|
|
<HomeHeadSearch />
|
|
</template> -->
|
|
</HomeHead>
|
|
<div class="h-full relative flex flex-col">
|
|
<div class="flex flex-end ml10px mt27px">
|
|
<div class="flex-1"></div>
|
|
<!-- <div class="px16px py8px cursor-pointer text-20px" v-for="nav in Navs" :key="nav.name">{{ nav.name }}</div> -->
|
|
</div>
|
|
<div class="flex-1 mt30px text-#142142 flex gap-30px h-825px">
|
|
<AppBlock class="shrink-0 h-full w241px box !b-0">
|
|
<div class="overflow-y-auto h-full">
|
|
<CSRSide v-model:activeNav="activeNav" />
|
|
</div>
|
|
</AppBlock>
|
|
<component v-if="activeContent" :is="activeContent" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.top {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: -92px;
|
|
}
|
|
</style>
|