71 lines
1.4 KiB
Vue
71 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div class="home-page">
|
||
|
|
<!-- 使用PageHeader组件 -->
|
||
|
|
<PageHeader
|
||
|
|
title="会话列表"
|
||
|
|
:is-back="false"
|
||
|
|
:border-bottom="true"
|
||
|
|
:background="headerBackground"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div class="content-wrapper">
|
||
|
|
<!-- 这里是会话列表内容 -->
|
||
|
|
<div class="placeholder">会话列表内容区域</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 使用TabBar组件 -->
|
||
|
|
<TabBar :currentPath="'/pages/home/index'" @change="handleTabChange" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import TabBar from '@/components/TabBar.vue';
|
||
|
|
import PageHeader from '@/components/PageHeader.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'HomePage',
|
||
|
|
components: {
|
||
|
|
TabBar,
|
||
|
|
PageHeader
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
headerBackground: {
|
||
|
|
background: 'linear-gradient(to right, #e0eafc, #cfdef3)'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleTabChange(path, index) {
|
||
|
|
console.log('切换到标签页:', path, index);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.home-page {
|
||
|
|
height: 100vh;
|
||
|
|
background-color: #f5f6fa;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-wrapper {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 15px;
|
||
|
|
padding-bottom: 60px; /* 为底部导航栏预留空间 */
|
||
|
|
overflow: hidden; /* 防止滚动条出现 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.placeholder {
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 20px;
|
||
|
|
text-align: center;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
</style>
|