<template>
  <!-- 海绵文化 -->
  <div class="SpongeCultureCLass">
    <div class="newsList" v-for="item in tableData" @click="gotoNews(item)" :key="item.id">
      <div class="left">
        <p class="title">{{ item.title }}</p>
        <p>{{ item.address }}</p>
        <p>{{ item.trainTime }}</p>
      </div>
      <div class="right">
        <img v-if="item.filelist.length > 0" :src="item.filelist[0].url" alt="" class="zp" />
        <img v-else src="../assets/images/mrzp.png" alt="" class="zp" />
      </div>
    </div>
  </div>
</template>

<script setup name="SpongeCulture">
import { specialNavList } from '@/api/SpongeCulture.js';
import { useRouter } from 'vue-router';
const router = useRouter();
const tableData = ref([]);

const allData = reactive({
  newslist: [],
});

// 跳转详情
function gotoNews(item) {
  console.log('111');
  router.push({
    path: '/newsdetail',
    query: { id: item.id },
  });
}

/** 获取查询数据列表 */
function getDataList() {
  specialNavList().then((response) => {
    tableData.value = response.data;
  });
}

onMounted(() => {
  getDataList();
});
</script>

<style lang="less">
.SpongeCultureCLass {
  height: calc(100vh - 95px);
  overflow: auto;
  background: #f6f6f6;

  .newsList {
    margin: 15px 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    background: #ffffff;
    .left {
      flex: 1;
      margin-right: 20px;
      overflow: auto;
      p.title {
        height: 35px;
        line-height: 35px;
        overflow: hidden; //超出隐藏
        white-space: nowrap; //不折行
        text-overflow: ellipsis; //溢出显示省略号
        font-size: 28px;
        margin: 15px auto;
      }
    }
    .right {
      width: 250px;
      img {
        width: 250px;
        height: 150px;
      }
    }
  }
}
</style>