hjyd-mobile/src/components/News.vue

<template>
  <div class="news_container">
    <HeadLine title="新闻/NEWS" line1="获取行业最新咨询" />
    <div class="card_wrap">
      <div class="card" v-for="(item, index) in newsList" :key="item.id">
        <div :class="activeTab == item.id ? 'header active' : 'header'">
          <div class="wrap" @click="changeActiveWrap(item.id)">
            <img class="icon" :src="item.icon" />
            <p class="font">{{ item.title }}</p>
          </div>
        </div>
        <img class="img" :src="getList()[index].pic" />
        <div class="bottom">
          <p class="title">{{ getList()[index].productTitle }}</p>
          <p class="desc">{{ getList()[index].desc }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import HeadLine from 'cpns/HeadLine'
import { newsList } from '@/mock'
import { ref } from 'vue'
const activeTab = ref(1)
const changeActiveWrap = id => {
  activeTab.value = id
}

const getList = () => {
  const arr = newsList.filter(item => item.id == activeTab.value)
  return arr[0].list
}
</script>

<style lang="scss" scoped>
.news_container {
  background: #fff;
  .card_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 7px;
    box-sizing: border-box;
    border-radius: 3px;
    overflow: hidden;
    .card {
      flex: 1;
      background: #ededed;
      .header {
        display: flex;
        align-items: center;
        justify-content: center;

        .wrap {
          display: flex;
          align-items: center;
          padding: 7px 0;
          box-sizing: border-box;
          .icon {
            min-width: 13px;
            min-height: 13px;
          }
          .font {
            font-size: 16px;
            transform: scale(0.5);
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            white-space: nowrap;
            width: 200%;
          }
        }
      }
      .active {
        background: #f94622;
        color: #ffffff;
      }
      .img {
        width: 100%;
        height: auto;
      }
      .bottom {
        padding: 8px;
        box-sizing: border-box;
        .title {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #262626;
          transform: scale(0.5);
          transform-origin: 0 center;
          max-width: 100px;
          white-space: nowrap;
        }
        .desc {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #afafaf;
          transform: scale(0.5);
          transform-origin: 0 center;
          white-space: nowrap;
          max-width: 100px;
        }
      }
    }
  }
}
</style>