ufutx-pc-website/src/views/News/News.vue

<template>
  <!-- 整体布局：导航 + Banner + 内容 + 页脚 -->
  <div class="page-container">
    <!-- 已有Banner组件（保持设计中的顶部视觉） -->
    <BannerCarousel />

    <!-- 核心内容区 -->
    <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" @click="goToArticle">
              <div class="view-btn">查看详情</div>
              <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 BannerCarousel from '@/views/News/sections/BannerCarousel.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)
})
import { useRouter } from 'vue-router'

// 1. 初始化路由实例
const router = useRouter()

// 2. 跳转方法（命名路由方式，需提前配置路由）
const goToArticle = () => {
  router.push({
    path: '/news/12' // 也可直接写路径
  })
}
// 分页事件
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.5px;
      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 {
        display: flex;
        padding: 6px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: @primary-dark;
        border-radius: 4px;
        border: 1px solid var(--1060-ff, #1060ff);
      }
    }
  }
}
//// 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>