460 lines
11 KiB
Vue
460 lines
11 KiB
Vue
<template>
|
||
<!-- 整体布局：导航 + Banner + 内容 + 页脚 -->
|
||
<div class="page-container">
|
||
<!-- 已有Banner组件（保持设计中的顶部视觉） -->
|
||
<Banner />
|
||
|
||
<!-- 核心内容区 -->
|
||
<div class="news-content">
|
||
<!-- 标签切换（友福动态 / 媒体报道） -->
|
||
<el-tabs v-model="activeTab" class="news-tabs" @tab-click="resetPage">
|
||
<el-tab-pane label="友福动态" name="dynamic"></el-tab-pane>
|
||
<el-tab-pane label="媒体报道" name="report"></el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<!-- 新闻列表 -->
|
||
<div class="news-list">
|
||
<div v-for="(item, idx) in filteredNews" :key="idx" class="news-item">
|
||
<img :src="item.cover" alt="新闻封面" class="news-cover" />
|
||
<div class="news-info">
|
||
<h3 class="news-title">{{ item.title }}</h3>
|
||
<h3 class="news-label">友福新闻</h3>
|
||
<div class="news-wrap">
|
||
<el-button type="primary" class="view-btn" plain color="#1060FF"> 查看详情</el-button>
|
||
<div class="news-date">
|
||
<img
|
||
class="icon"
|
||
src="https://images.health.ufutx.com/202506/13/c5e3552a870fd254610290bbabce5e30.png"
|
||
/>
|
||
<p>{{ item.date }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分页（Element Plus 分页组件） -->
|
||
<div class="pagination-wrap">
|
||
<el-pagination
|
||
:current-page="currentPage"
|
||
:page-sizes="[10, 20, 50]"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="totalCount"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handlePageChange"
|
||
></el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue'
|
||
// 引入已有组件（需确保路径正确）
|
||
import Banner from '@/views/News/sections/Banner.vue'
|
||
|
||
// 模拟新闻数据（根据设计图，友福动态和媒体报道的差异）
|
||
const dynamicNews = [
|
||
{
|
||
cover: 'https://images.health.ufutx.com/202506/13/b604685780bdb4ea4906e751b14590ec.png', // 替换为实际封面图
|
||
title: '体管理年：政策驱动，AI+全利管理重塑健康服务体系...',
|
||
date: '2025-06-02',
|
||
type: 'dynamic'
|
||
},
|
||
{
|
||
cover: 'https://images.health.ufutx.com/202506/13/73e74b753e7fc7c8b00cecc0535a6a91.png',
|
||
title: '权威媒体专访：友福同享的创新健康生态',
|
||
date: '2025-05-30',
|
||
type: 'report'
|
||
}
|
||
]
|
||
const reportNews = [
|
||
{
|
||
cover: 'https://images.health.ufutx.com/202506/13/73e74b753e7fc7c8b00cecc0535a6a91.png',
|
||
title: '媒体报道：友福同享如何用AI颠覆健康管理？',
|
||
date: '2025-06-01',
|
||
type: 'report'
|
||
}
|
||
]
|
||
|
||
// 循环添加数据到两个数组
|
||
for (let i = 0; i < 15; i++) {
|
||
const newsItem = {
|
||
cover: 'https://images.health.ufutx.com/202506/13/b604685780bdb4ea4906e751b14590ec.png',
|
||
title: `友福动态：健康管理服务升级发布会圆满成功 ${i + 1}`,
|
||
date: `2025-05-${28 - i}`,
|
||
type: 'dynamic'
|
||
}
|
||
|
||
// 同时添加到两个数组
|
||
dynamicNews.push(newsItem)
|
||
reportNews.push({ ...newsItem, type: 'report' }) // 复制对象并修改 type
|
||
}
|
||
// 响应式数据
|
||
const activeTab = ref('dynamic') // 默认显示“友福动态”
|
||
const currentPage = ref(1)
|
||
const pageSize = ref(10)
|
||
const totalCount = ref(502) // 设计图中的“共502条”
|
||
|
||
// 计算当前显示的新闻（根据标签切换）
|
||
const filteredNews = computed(() => {
|
||
const list = activeTab.value === 'dynamic' ? dynamicNews : reportNews
|
||
// 模拟分页截取（实际需结合后端接口）
|
||
const start = (currentPage.value - 1) * pageSize.value
|
||
return list.slice(start, start + pageSize.value)
|
||
})
|
||
|
||
// 分页事件
|
||
const handleSizeChange = (val: number) => {
|
||
pageSize.value = val
|
||
currentPage.value = 1
|
||
}
|
||
const handlePageChange = (val: number) => {
|
||
currentPage.value = val
|
||
}
|
||
const resetPage = () => {
|
||
currentPage.value = 1 // 切换标签时重置页码
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '@/styles/global.less';
|
||
|
||
.page-container {
|
||
min-height: 100vh;
|
||
background-color: @bg-color;
|
||
}
|
||
|
||
/* 内容区容器 */
|
||
.news-content {
|
||
max-width: 1920px;
|
||
}
|
||
|
||
/* 标签切换样式（还原设计的蓝色下划线） */
|
||
.news-tabs {
|
||
.pt(50px);
|
||
//align-items: center;
|
||
|
||
:deep(.el-tabs__nav-wrap) {
|
||
//margin-bottom: 1.04167vw;
|
||
&:after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100vw;
|
||
height: 0.3px;
|
||
background-color: #b5b5b5;
|
||
z-index: var(--el-index-normal);
|
||
}
|
||
}
|
||
|
||
:deep(.el-tabs__active-bar) {
|
||
background-color: @primary-dark; // 下划线颜色
|
||
height: 3px;
|
||
bottom: -20px !important;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
:deep(.el-tabs__header) {
|
||
margin: 0;
|
||
.el-tabs__nav {
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
|
||
.el-tabs__item {
|
||
font-size: @font-size-xxl;
|
||
color: @text-color-secondary;
|
||
margin-right: 104px;
|
||
|
||
&.is-active {
|
||
color: @primary-dark; // 激活态文字颜色
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.news-tabs {
|
||
// 关键：让选项卡居中
|
||
:deep(.el-tabs__header) {
|
||
width: 100%; // 占满容器宽度，为居中提供基础
|
||
.el-tabs__nav {
|
||
justify-content: center; // 水平居中对齐
|
||
}
|
||
}
|
||
}
|
||
/* 新闻列表 */
|
||
.news-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 50px;
|
||
.px(192px);
|
||
.pt(100px);
|
||
|
||
.news-item {
|
||
display: flex;
|
||
align-items: center;
|
||
transition: @transition;
|
||
border-bottom: 0.3px solid #b5b5b5;
|
||
.pb(50px);
|
||
&:hover {
|
||
//box-shadow: @shadow-hover;
|
||
//transform: translateY(-2px);
|
||
}
|
||
|
||
.news-cover {
|
||
width: 500px;
|
||
height: 260px;
|
||
object-fit: cover;
|
||
border-radius: @border-radius-md;
|
||
margin-right: 30px;
|
||
}
|
||
.news-info {
|
||
.news-wrap {
|
||
.flex-between();
|
||
}
|
||
width: 100%;
|
||
.pt(20px);
|
||
text-align: left;
|
||
.news-label {
|
||
font-size: @font-size-sm;
|
||
color: @text-color-secondary;
|
||
.mt(13px);
|
||
.mb(76px);
|
||
}
|
||
.news-title {
|
||
font-size: @font-size-lg;
|
||
font-weight: @font-weight-medium;
|
||
color: @text-color;
|
||
margin-bottom: @space-sm;
|
||
}
|
||
|
||
.news-date {
|
||
font-size: @font-size-sm;
|
||
color: @text-color-light;
|
||
display: flex; // 启用 Flex 布局
|
||
align-items: center; // 子元素垂直居中
|
||
gap: 8px;
|
||
.icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
.view-btn {
|
||
width: 100px;
|
||
align-self: flex-start;
|
||
padding: @space-xs @space-md;
|
||
font-size: @font-size-sm;
|
||
background-color: @bg-color;
|
||
color: @primary-dark;
|
||
//padding: 6px 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//// Less 样式
|
||
//.vertical-center {
|
||
// display: flex; // 启用 Flex 布局
|
||
// align-items: center; // 子元素垂直居中
|
||
// gap: 8px; // 图标与文字的间距（替代 margin，更优雅）
|
||
//
|
||
// .center-icon {
|
||
// width: 20px; // 图标尺寸
|
||
// height: 20px;
|
||
// object-fit: contain; // 保持图标比例，避免拉伸
|
||
// }
|
||
//
|
||
// .center-text {
|
||
// font-size: @font-size-sm; // 继承全局变量
|
||
// color: @text-color-light;
|
||
// }
|
||
//}
|
||
|
||
/* 分页样式 */
|
||
.pagination-wrap {
|
||
margin-top: 50px;
|
||
.pb(170px);
|
||
display: flex;
|
||
justify-content: center;
|
||
:deep(.el-pager li.is-active) {
|
||
color: @primary-dark;
|
||
}
|
||
.el-pagination {
|
||
.el-pagination__total {
|
||
color: @text-color-light;
|
||
}
|
||
|
||
.el-pager li {
|
||
&.active {
|
||
background-color: @primary-color;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.el-pagination__sizes {
|
||
margin: 0 @space-md;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 响应式适配（平板以下） */
|
||
//@media (max-width: @tablet-breakpoint) {
|
||
// .news-item {
|
||
// flex-direction: column;
|
||
// align-items: flex-end;
|
||
// .news-cover {
|
||
// width: 100%;
|
||
// height: auto;
|
||
// margin: 0 0 @space-md 0;
|
||
// }
|
||
// }
|
||
//}
|
||
/* 响应式适配（细分平板和手机端） */
|
||
@media (max-width: @tablet-breakpoint) {
|
||
/* 平板端（768px-1024px）适配 */
|
||
.news-content {
|
||
padding: @space-xl @space-md; // 减少两侧边距
|
||
}
|
||
|
||
.news-tabs {
|
||
:deep(.el-tabs__item) {
|
||
margin-right: @space-md; // 减少标签间距
|
||
font-size: @font-size-lg; // 缩小标签字体
|
||
}
|
||
|
||
:deep(.el-tabs__active-bar) {
|
||
bottom: -15px !important; // 调整下划线位置
|
||
}
|
||
}
|
||
|
||
.news-list {
|
||
.px(@space-lg); // 减少新闻列表左右边距
|
||
.pt(@space-xl); // 调整顶部间距
|
||
|
||
.news-item {
|
||
flex-direction: column;
|
||
align-items: flex-start; // 左对齐
|
||
gap: @space-lg; // 增加内容间距
|
||
|
||
.news-cover {
|
||
width: 100%;
|
||
height: auto;
|
||
margin-bottom: @space-lg; // 图片与文字间距
|
||
}
|
||
|
||
.news-info {
|
||
.news-title {
|
||
font-size: @font-size-md; // 缩小标题字体
|
||
}
|
||
|
||
.news-label {
|
||
.mb(@space-md); // 调整标签间距
|
||
}
|
||
|
||
.news-wrap {
|
||
flex-direction: column; // 日期和按钮垂直排列
|
||
gap: @space-sm; // 增加间距
|
||
|
||
.view-btn {
|
||
align-self: flex-start; // 按钮左对齐
|
||
}
|
||
|
||
.news-date {
|
||
order: -1; // 日期显示在按钮上方
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pagination-wrap {
|
||
.el-pagination {
|
||
.el-pagination__sizes {
|
||
margin: 0 @space-sm; // 缩小尺寸选择器间距
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: @mobile-breakpoint) {
|
||
/* 手机端（<768px）适配 */
|
||
.news-content {
|
||
padding: @space-lg; // 进一步减少边距
|
||
}
|
||
|
||
.news-tabs {
|
||
:deep(.el-tabs__item) {
|
||
margin-right: @space-sm; // 标签间距最小化
|
||
font-size: @font-size-md; // 手机端标签字体
|
||
}
|
||
|
||
:deep(.el-tabs__active-bar) {
|
||
bottom: -10px !important; // 调整下划线位置
|
||
}
|
||
}
|
||
|
||
.news-list {
|
||
.px(@space-md); // 最小化左右边距
|
||
gap: @space-xl; // 新闻项间距适中
|
||
|
||
.news-item {
|
||
.pb(@space-lg); // 减少底部边距
|
||
|
||
.news-cover {
|
||
height: 180px; // 固定图片高度
|
||
}
|
||
|
||
.news-info {
|
||
.news-title {
|
||
font-size: @font-size-md; // 标题字体
|
||
}
|
||
|
||
.news-label {
|
||
.mb(@space-md); // 标签间距
|
||
}
|
||
|
||
.news-wrap {
|
||
.view-btn {
|
||
width: 80px; // 缩小按钮宽度
|
||
padding: @space-xs @space-sm; // 按钮内边距
|
||
}
|
||
|
||
.news-date {
|
||
font-size: @font-size-xs; // 最小化日期字体
|
||
.icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 分页组件适配 */
|
||
.pagination-wrap {
|
||
.el-pagination {
|
||
.el-pagination__total {
|
||
font-size: @font-size-xs; // 缩小总条数字体
|
||
}
|
||
|
||
.el-pager li {
|
||
width: 28px;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
font-size: @font-size-xs; // 页码字体
|
||
}
|
||
|
||
.el-pagination__sizes {
|
||
margin: 0 @space-xs; // 尺寸选择器间距
|
||
.el-input {
|
||
font-size: @font-size-xs; // 下拉框字体
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|