web/src/views/win/newsParts/listIndex.vue

<template>
  <el-row class="main animate__animated animate__backInLeft">
    <el-col :span="24" class="info">
      <el-col :span="24" class="tabs">
        <el-col
          :span="6"
          :class="['tabList', item.id == tabActive ? 'tabActiveList' : '']"
          v-for="(item, index) in tabList"
          :key="index"
          @click="tabChange(item)"
        >
          {{ item.title }}
        </el-col>
      </el-col>
      <el-col :span="24" class="infoList">
        <el-col
          :span="24"
          class="list"
          v-for="(item, index) in list"
          :key="index"
          @click="toDetail(item)"
        >
          <el-col :span="3" class="date">
            <el-col :span="24" class="dateInfo">
              <el-col :span="24" class="years"> --{{ dayjs(item.date).format('YYYY') }}-- </el-col>
              <el-col :span="24" class="days">
                {{ dayjs(item.date).format('MM-DD') }}
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="14" class="mess">
            <el-col :span="24" class="title">
              {{ item.title }}
            </el-col>
            <!-- <el-col :span="24" class="brief" v-html="item.brief"> </el-col> -->
            <el-col :span="24" class="brief"> {{ getContent(item.brief) }}</el-col>
            
          </el-col>
          <el-col :span="6" class="imgs">
            <el-image class="images" :src="item.url || defUrl"></el-image>
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="24" class="pages">
        <pages-index :total="total" @search="toSearch" ref="pages"/>
      </el-col>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import getContent from '@/utils/getContent'

/* 分页 */
import pagesIndex from '../../../components/windows/pagesIndex.vue'
import { get } from 'lodash-es'
const defUrl = 'zxzx.jpg'
const pages = ref()
const tabList = ref([
  {
    id: '1',
    title: '党建天地',
    type: 'djtd',
  },
  {
    id: '2',
    title: '政策法规',
    type: 'zcfg',
  },
  {
    id: '3',
    title: '招标采购',
    type: 'zbcg',
  },
  {
    id: '4',
    title: '集团要闻',
    type: 'jtyw',
  },
])
const tabActive = ref('1')

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const list = ref<any[]>([
  {
    id: '1',
    title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
    brief:
      '1月29日，集团召开2021年度安全生产委员会第一次全体（扩大）视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通报了2020年度安全生产工作情况，安排部署下阶段重点工作。集团安保部副部长张凯传达国家、省、市...',
    date: '2024-12-24',
    url: 'news2.png',
  },
  {
    id: '2',
    title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
    brief:
      '1月29日，集团召开2021年度安全生产委员会第一次全体（扩大）视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通报了2020年度安全生产工作情况，安排部署下阶段重点工作。集团安保部副部长张凯传达国家、省、市...',
    date: '2024-12-24',
    url: 'news3.png',
  },
  {
    id: '3',
    title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
    brief:
      '1月29日，集团召开2021年度安全生产委员会第一次全体（扩大）视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通报了2020年度安全生产工作情况，安排部署下阶段重点工作。集团安保部副部长张凯传达国家、省、市...',
    date: '2024-12-24',
    url: 'news4.png',
  },
  {
    id: '4',
    title: '集团召开2021年度安全生产委员会第一次全体（扩大）视频会议',
    brief:
      '1月29日，集团召开2021年度安全生产委员会第一次全体（扩大）视频会议，会议由集团总经理王爽主持。会上，集团副总经理于懿通报了2020年度安全生产工作情况，安排部署下阶段重点工作。集团安保部副部长张凯传达国家、省、市...',
    date: '2024-12-24',
    url: 'news2.png',
  },
])
const total = ref(40)
const tabType = ref('djtd')
/* 选择 */
const tabChange = (event: { id: string }) => {
  tabActive.value = event.id
  const tab = tabList.value.find((f) => f.id == event.id)
  if (!tab) return
  const type = get(tab, 'type')
  if (!type) return
  tabType.value = type
  toSearch()
  console.log(pages)
  pages.value.reset()
}

import { jtxw } from '@/api/api'
/* 查询 */
const toSearch = async ({ skip = 0, limit = 10, ...info } = {}) => {
  const result = await jtxw.query(tabType.value, { skip, limit, ...info })
  if (result.errcode == 0) {
    const resList = get(result, 'data.data', [])
    const resTotal = get(result, 'data.total', 0)
    if (resList.length > 0) {
      list.value = resList
      total.value = resTotal
    }
  }
}
const toDetail = (data: object) => {
  const content_id = get(data, 'content_id')
  window.open(`/newsDetail?content_id=${content_id}`)
}
import { useRoute } from 'vue-router'
const route = useRoute()
/* 初始化 */
onMounted(() => {
  const tag = get(route, 'query.tag')
  if (tag) {
    let e: any = { id: tag }
    tabChange(e)
  } else toSearch()
})
</script>
<style scoped lang="scss">
.main {
  padding: 0 17%;

  .info {
    .tabs {
      display: flex;
      padding: 0 30%;
      margin: 0 0 50px 0;

      .tabList {
        text-align: center;
        color: rgb(102, 102, 102);
        // font-family: '黑体';
        font-size: 18px;
        font-weight: 500;
        line-height: 26px;
        letter-spacing: 0px;
        border-bottom: 4px solid transparent;
      }

      .tabList:hover {
        cursor: pointer;
        color: rgb(25, 25, 26);
        border-bottom: 4px solid rgb(21, 134, 255);
      }
      .tabActiveList {
        color: rgb(25, 25, 26);
        border-bottom: 4px solid rgb(21, 134, 255);
        padding: 0 0 10px 0;
      }
      
    }

    .infoList {
      .list {
        display: flex;
        border-bottom: 1px solid rgb(217, 217, 217);
        margin: 0 0 30px 0;
        padding: 0 0 30px 0;
        cursor: pointer;

        .date {
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;

          .days {
            color: rgb(28, 136, 254);
            font-family: '钉钉进步体';
            font-size: 36px;
            font-weight: 400;
            line-height: 40px;
            letter-spacing: 0px;
          }

          .years {
            color: rgb(28, 136, 254);
            font-family: '钉钉进步体';
            font-size: 20px;
            font-weight: 400;
            line-height: 40px;
            letter-spacing: 0px;
          }
        }

        .mess {
          padding: 0 10px 0 0;

          .title {
            color: rgb(25, 25, 26);
            // font-family: '黑体';
            font-size: 24px;
            font-weight: 500;
            line-height: 35px;
            letter-spacing: 0px;
            margin: 0 0 30px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }

          .brief {
            color: rgb(102, 102, 102);
            // font-family: '黑体';
            font-size: 16px;
            font-weight: 400;
            line-height: 32px;
            letter-spacing: 0px;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }

        .imgs {
          .images {
            width: 100%;
            height: 160px;
          }
        }
      }

      .list:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>