AIProd/pages/DailyNews/index.vue

<template>
	<div id="normal-container" class="daily-news-content" v-loading.fullscreen.lock="fullscreenLoading">
		<IntegratedLayout>
			<div class="content">
				<div class="gradient-color gradient-title">AI Daily News</div>
				<div class="views-title">AI Daily News</div>
				<div class="views-header flex-between-center">
					<div class="description">Keep up-to-date with the latest AI industry developments. This section provides daily news coverage, focusing on global breakthroughs, frontier research, market movements, and emerging trends across AI sectors.</div>
				</div>
				<div class="container flex justify-between">
					<div class="left-content flex flex-col">
						<div class="card preview-wrapper">
							<img :src="newConfig.imageUrl || ''" alt="" />
						</div>
						<div class="flex-1">
							<NewsList />
						</div>
					</div>
					<div class="right-content">
						<!--轮播图-->
						<div class="card swiper-box">
							<el-carousel :autoplay="false" height="140px">
								<el-carousel-item v-for="(item, i) in banner" :key="i">
									<img :src="item.imageUrl || ''" alt="" style="height: 140px; width: 100%;" />
								</el-carousel-item>
							</el-carousel>
						</div>
						<!--网站导航-->
						<div class="card pop-list">
							<div style="padding: 24px 4px">
								<PopularToolList />
							</div>
						</div>
						<!--文章列表-->
						<div class="card">
							<div style="padding: 24px 4px">
								<div class="clearfix">
									<img src="/logo/hot.png" :style="{marginRight: '6px'}" alt=""/>
									Latest Article
								</div>
								<div class="list-scroll">
									<div class="list">
										<ArticleCardItem v-for="it in latestNewsList" :key="it.id" :item="it" @refresh="goToRelatedNewsDetail" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</IntegratedLayout>
	</div>
</template>

<script>
import ArticleCardItem from "@/pages/DailyNews/components/ArticleCardItem.vue";
import NewsList from "@/pages/DailyNews/NewsList.vue";
import PopularToolList from "@/pages/Home/components/PopularToolList.vue";

export default {
	components: {
		NewsList,
		ArticleCardItem,
		PopularToolList,
	},
	data() {
		return {
			latestNewsList: [],
			fullscreenLoading: false,
			newConfig: {},
		}
	},
	computed: {
		banner() {
			const bannerConfig = this.$store.getters.bannerConfig;
			if (bannerConfig.news && bannerConfig.news.length > 0) {
				return bannerConfig.news;
			}
			return [];
		},
	},
	methods: {
		// 获取最新文章列表
		async getLatestArticleListData() {
			const params = {
				page: 1,
				limit: 20,
				excludeTypes: ['launches'],
				sortField: 'publish_time',
				sortOrder: 'desc',
			};
			const {data: res} = await this.$api.article.getArticleList(params);
			const {code, data} = res;
			if (code === 0 && data.list) {
				this.latestNewsList = data.list;
			}
		},
		// 侧边新闻重新跳转路由
		goToRelatedNewsDetail(item) {
			if (item.slug && item.articleType) {
				this.$router.push('/tools-detail?news_slug=' + item.slug + '&type=' + item.articleType)
			}
		},
		// 获取当前模块信息
		async getModuleConfig() {
			const {data: res} = await this.$api.config.getModuleConfigKey('module');
			const {data, code} = res;
			if (code === 0 && data.module && data.module.news) {
				this.newConfig = data.module.news.length > 0 ? data.module.news[0] : {};
			}
		},
		async onLoad() {
			this.fullscreenLoading = true;
			await this.$store.dispatch('getBannerConfig');
			await this.getModuleConfig();
			await this.getLatestArticleListData();
			this.fullscreenLoading = false;
		}
	},
	mounted() {
		this.onLoad();
	}
}
</script>

<style scoped lang="scss">
.card {
	padding: 16px;
	background-color: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
}

.daily-news-content {
	flex: 1;
	overflow-y: auto;
	position: relative;
	.content {
		padding-top: 87px;
		padding-bottom: 120px;
		.gradient-title {
			font-family: 'Poppins-SemiBold', serif;
			font-size: 18px;
			font-weight: 600;
		}
		.views-title {
			font-family: 'Poppins-Bold', serif;
			font-size: 40px;
			font-weight: 700;
			margin-top: 78px;
		}
		.views-header {
			margin-top: 10px;
			.description {
				margin-right: 350px;
				font-family: 'Poppins-Medium', serif;
				font-size: 18px;
				color: #64748B;
			}
		}
		.container {
			gap: 20px;
			margin-top: 114px;
			.right-content {
				width: 372px;
				display: flex;
				flex-direction: column;
				gap: 20px;
				.list-scroll {
					overflow-y: auto;
					overflow-x: hidden;
					height: 1350px;
				}
				.swiper-box {
					height: 174px;
					::v-deep .el-carousel {
						.el-carousel__arrow {
							opacity: 0 !important;
							transition: none !important;
						}
						.el-carousel__indicators {
							.el-carousel__indicator {
								height: 4px !important;
								width: 12px !important;
								border-radius: 2.66px !important;
								border: 0.66px solid #2563eb !important;
								background: transparent !important;
								margin: 0 3px 0 3px !important;
								padding: 0 !important;

								.el-carousel__button {
									background-color: transparent;
								}

								&.is-active {
									border: none !important;
									width: 20px !important;
									background: linear-gradient(0deg, #2563EB 22%, #7B61FF 73%) !important;
								}

								// 重置其他可能的默认样式
								&:before,
								&:after {
									display: none !important;
								}
							}
						}
					}
				}
				.clearfix {
					display: flex;
					align-items: center;
					font-size: $larg-font-size;
					font-weight: bold;
					font-family: 'Poppins-SemiBold', serif;
				}
				.pop-list {
					.pop-item {
						display: grid;
						grid-auto-rows: 1fr;
						grid-template-columns: repeat(3, auto);
						justify-content: space-between;
						gap: 32px;

						.box {
							display: flex;
							flex-direction: column;
							align-items: center;

							.img-box {
								width: 50px;
								height: 50px;
								background: #FFFFFF;
								border-radius: 12px;
								border: 1px solid #E2E8F0;
								@include flex-center;
								margin-bottom: 12px;

								&:hover {
									transform: scale(1.15);
									cursor: pointer;
									@include gradient-border($linear-gradient-start, $linear-gradient-end);
									box-shadow: 0 5px 7px 0 #00000014;
								}
							}

							.tool-name {
								font-family: 'Poppins-Medium', serif;
								color: #64748B;
							}
						}
					}
				}
				.article-list {
					flex: 1;
				}
			}
			.left-content {
				flex: 1;
				gap: 20px;
				.preview-wrapper {
					height: 320px;
					img {
						width: 100%;
						height: 100%;
						border-radius: 12px;
					}
				}
				.comment-title {
					font-size: 30px;
					font-weight: 600;
					margin-bottom: 30px;
					font-family: 'Poppins-SemiBold', serif;
					color: #1E293B;
					display: flex;
					align-items: center;
					&::before {
						content: '';
						display: inline-block;
						width: 6px;
						height: 26px;
						background: $header-backgroungd;
						margin-right: 8px;
						border-radius: 0 6px 6px 0;
					}
				}
			}
		}
	}
}
</style>