ct/app/components/yuxi/News.vue

<template>
  <div class="container">
    <div class="text-center">
      <div class="blank50"></div>
      <div class="cBlack f_42 line42 marginB10 wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
        开发资讯
      </div>
      <div class="cGray f_18 wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
        NEWS
      </div>
      <div class="blank20"></div>
      <div class="blank20"></div>
    </div>

    <div class="row">
      <div 
        v-for="(newsCategory, index) in newsCategories" 
        :key="index"
        class="col-md-4 firstPageBox3Li wow fadeInDown animated active"
        :data-wow-delay="`${300 + index * 200}ms`"
        style="visibility: visible; animation-delay: 300ms; animation-name: fadeInDown;"
      >
        <div class="title f_22 cBlue text-center pointer" :title="newsCategory.title">
          {{ newsCategory.title }}
        </div>
        <hr>
        <div class="blank20"></div>
        <ul>
          <li v-for="(item, itemIndex) in newsCategory.items" :key="itemIndex">
            <a :href="item.link" :target="item.target">
              {{ item.title }}
            </a>
            <span class="date">{{ item.date }}</span>
          </li>
        </ul>
        <div class="blank50"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 新闻资讯数据
const newsCategories = [
  {
    title: '解决方案',
    items: [
      {
        title: '共享单车解决方案助力城市绿色出行',
        link: '/yuxi/news/solution1',
        target: '_self',
        date: '2024-01-15'
      },
      {
        title: '智能电动车系统提升出行效率',
        link: '/yuxi/news/solution2',
        target: '_self',
        date: '2024-01-10'
      },
      {
        title: '共享陪护床解决医院陪护难题',
        link: '/yuxi/news/solution3',
        target: '_self',
        date: '2024-01-08'
      },
      {
        title: '物联网平台助力智慧城市建设',
        link: '/yuxi/news/solution4',
        target: '_self',
        date: '2024-01-05'
      }
    ]
  },
  {
    title: '开发知识',
    items: [
      {
        title: 'Vue 3 Composition API 最佳实践',
        link: '/yuxi/news/knowledge1',
        target: '_self',
        date: '2024-01-12'
      },
      {
        title: 'Nuxt.js 服务端渲染优化技巧',
        link: '/yuxi/news/knowledge2',
        target: '_self',
        date: '2024-01-09'
      },
      {
        title: 'TypeScript 在大型项目中的应用',
        link: '/yuxi/news/knowledge3',
        target: '_self',
        date: '2024-01-07'
      },
      {
        title: '移动端开发性能优化指南',
        link: '/yuxi/news/knowledge4',
        target: '_self',
        date: '2024-01-04'
      }
    ]
  },
  {
    title: '行业动态',
    items: [
      {
        title: '2024年物联网行业发展趋势分析',
        link: '/yuxi/news/industry1',
        target: '_self',
        date: '2024-01-14'
      },
      {
        title: '共享经济模式创新与挑战',
        link: '/yuxi/news/industry2',
        target: '_self',
        date: '2024-01-11'
      },
      {
        title: '智能硬件市场前景展望',
        link: '/yuxi/news/industry3',
        target: '_self',
        date: '2024-01-06'
      },
      {
        title: '数字化转型助力企业升级',
        link: '/yuxi/news/industry4',
        target: '_self',
        date: '2024-01-03'
      }
    ]
  }
]
</script>

<style scoped>
.container {
  padding: 60px 0;
  background-color: #fafafa;
}

.blank50 {
  height: 50px;
}

.blank20 {
  height: 20px;
}

.cBlack {
  color: #333;
}

.cGray {
  color: #666;
}

.f_42 {
  font-size: 2.5em;
}

.f_22 {
  font-size: 1.4em;
}

.f_18 {
  font-size: 1.1em;
}

.line42 {
  line-height: 1.2;
}

.marginB10 {
  margin-bottom: 10px;
}

.cBlue {
  color: #007bff;
}

.pointer {
  cursor: pointer;
}

.firstPageBox3Li {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  margin-bottom: 30px;
}

.firstPageBox3Li:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.title {
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #007bff;
  position: relative;
}

.title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: #007bff;
}

hr {
  border: none;
  height: 1px;
  background: #e0e0e0;
  margin: 20px 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

ul li:last-child {
  border-bottom: none;
}

ul li:hover {
  background: #f8f9fa;
  padding-left: 10px;
}

ul li a {
  color: #333;
  text-decoration: none;
  font-size: 0.95em;
  line-height: 1.5;
  display: block;
  transition: color 0.3s ease;
}

ul li a:hover {
  color: #007bff;
}

.date {
  display: block;
  color: #999;
  font-size: 0.8em;
  margin-top: 5px;
}

/* 动画效果 */
.wow {
  visibility: hidden;
}

.wow.animated {
  visibility: visible;
}

.fadeInDown {
  animation: fadeInDown 0.8s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUp {
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .f_42 {
    font-size: 2em;
  }
  
  .f_22 {
    font-size: 1.2em;
  }
  
  .firstPageBox3Li {
    margin-bottom: 20px;
    padding: 20px;
  }
  
  .col-md-4 {
    margin-bottom: 20px;
  }
}
</style>