<template>
	<el-scrollbar class="news-image-background">
		<div class="common-page">
			<el-space direction="vertical" class="full-width">
				<div class="text-title-0-show" style="margin-top: 50px;">新闻速览</div>
				<search-box placeholder="请输入关键词" style="margin-top: 19px;margin-bottom: 42px;"></search-box>
				<news-main></news-main>
				<!-- <Headlines v-if="showPage === 'headlines'" @type="showPage" @back="changePage" />
				<Subject v-if="showPage === 'subject'" @back="changePage" /> -->
			</el-space>
		</div>
	</el-scrollbar>
</template>

<script setup>
import { ref, onMounted } from "vue";
import '@/styles/container.scss';
import { useRoute } from "vue-router";
import Headlines from "./Headlines.vue";
import Subject from "./Subject.vue";
import { ElInput, ElSpace, ElImage, ElDivider, ElCol, ElRow } from "element-plus";
import AreaTag from '@/components/base/AreaTag/index.vue'
import CommonText from "@/components/base/texts/CommonText.vue";
import NewsMain from "./NewsMain.vue";
import SearchBox from "@/components/base/SearchBox/index.vue";


//顶部数据搜索
const searchInput = ref("");





//当前页面显示
const showPage = ref("home");
const changePage = page => {
	console.log(page);
	showPage.value = page;
};



</script>
<style lang="scss" scoped>
@import url("./style.css");

.search-container {
	margin: 0 auto;
}

.search-input {
	width: 800px;
	height: 48px;

	//水平居中
	margin: 0 auto;
	display: block; // 强制设置为块级元素
}
</style>
