You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
3.9 KiB
161 lines
3.9 KiB
<template>
|
|
<div class = "flow-container">
|
|
<div class="forum-home">
|
|
<!-- 左侧主内容区 -->
|
|
<div class="left-section card">
|
|
<!-- 上半部分 -->
|
|
<div class="top-section">
|
|
<div class="carousel-wrapper">
|
|
<Carousel />
|
|
</div>
|
|
<div class="hot-topic-wrapper">
|
|
<h2>📍 今日热点</h2>
|
|
<HotTopic
|
|
v-for="(item, index) in hotTopics"
|
|
:key="index"
|
|
:title="item.title"
|
|
:link="item.link"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<el-divider content-position="right">欢迎来到UniLife</el-divider>
|
|
<!-- 下半部分：帖子 -->
|
|
<div class="posts-section">
|
|
<h2>帖子</h2>
|
|
<PostCard
|
|
v-for="(post, index) in posts"
|
|
:key="index"
|
|
:post="post"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 右侧：今日行程 -->
|
|
<div class="right-section">
|
|
<h2>📅 今日行程</h2>
|
|
<ScheduleCard />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Carousel from '@/components/Carousel.vue'
|
|
import PostCard from '@/components/PostCard.vue'
|
|
import HotTopic from '@/components/HotTopic.vue'
|
|
import ScheduleCard from '@/components/ScheduleCard.vue'
|
|
|
|
const hotTopics = [
|
|
{ title: '这是一个标题，一个热门帖子的标题', link: '/post/1' },
|
|
{ title: '这是一个标题，一个热门帖子的标题', link: '/post/2' },
|
|
{ title: '这是一个标题，一个热门帖子的标题', link: '/post/3' }
|
|
]
|
|
|
|
const posts = [
|
|
{
|
|
id: 1,
|
|
title: '蚂蚁金服设计平台简介',
|
|
tags: ['Ant Design', '设计语言', '蚂蚁金服'],
|
|
excerpt: '段落示意：这是帖子的部分具体内容……',
|
|
link: '/post/1'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '蚂蚁金服设计平台简介',
|
|
tags: ['Ant Design', '设计语言', '蚂蚁金服'],
|
|
excerpt: '段落示意：这是帖子的部分具体内容……',
|
|
link: '/post/2'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '蚂蚁金服设计平台简介',
|
|
tags: ['Ant Design', '设计语言', '蚂蚁金服'],
|
|
excerpt: '段落示意：这是帖子的部分具体内容……',
|
|
link: '/post/3'
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '蚂蚁金服设计平台简介',
|
|
tags: ['Ant Design', '设计语言', '蚂蚁金服'],
|
|
excerpt: '段落示意：这是帖子的部分具体内容……',
|
|
link: '/post/4'
|
|
},
|
|
{
|
|
id: 5,
|
|
title: '蚂蚁金服设计平台简介',
|
|
tags: ['Ant Design', '设计语言', '蚂蚁金服'],
|
|
excerpt: '段落示意：这是帖子的部分具体内容……',
|
|
link: '/post/5'
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.forum-home {
|
|
display: flex;
|
|
width:92%;
|
|
gap: 40px; // 🔧 左右两栏之间间距
|
|
|
|
.left-section {
|
|
flex: 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-right:10%;
|
|
gap: 30px; // 🔧 帖子区块和上半部分间隔加大
|
|
background: linear-gradient(to bottom right, #f7f1ff, #ffffff);
|
|
}
|
|
|
|
.top-section {
|
|
display: flex;
|
|
gap: 24px; // 🔧 跑马灯和热点之间间距
|
|
height: 320px;
|
|
background-color:transparent;
|
|
|
|
.carousel-wrapper {
|
|
flex: 2;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hot-topic-wrapper {
|
|
flex: 1;
|
|
padding: 16px;
|
|
background-color: #fef6ff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
|
|
.posts-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
|
|
h2 {
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.right-section {
|
|
flex: 1;
|
|
position:fixed;
|
|
margin-left:77%;
|
|
height: 830px;
|
|
min-width: 350px;
|
|
padding: 16px;
|
|
background-color: #f9f7ff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
|
background: linear-gradient(to bottom right, #f7f1ff, #ffffff);
|
|
|
|
h2 {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
}
|
|
</style> |