hi-ucs/front/src/views/newHome/components/WorkDynList.vue

<template>
  <div class="work-dyn-main-content">
    <home-header></home-header>
    <a-breadcrumb>
      <a-breadcrumb-item>
        <router-link to="/home">门户首页</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>工作动态</a-breadcrumb-item>
    </a-breadcrumb>
    <div id="work-dyn-list">
      <a-list item-layout="vertical" size="large" :data-source="listData">
        <template #header>
          <div class="total-num-content">
            <div class="total-main-text">
              共
              <span class="num-text">{{ total }}</span>
              条信息
            </div>
            <div class="index-page-text">当前第{{ page }}页</div>
          </div>
        </template>
        <template #renderItem="{ item }">
          <a-list-item key="item.title">
            <a-tooltip>
              <template #title>{{ item.note1 || item.content }}</template>
              <a-list-item-meta
                ellipsis="true"
                :description="
                  item.note1 ? `摘要：${item.note1 || ''}` : item.content
                "
              >
                <template #title>
                  <a class="title-content" @click="goToDetails(item.id)">
                    {{ item.title }}
                  </a>
                </template>
                <template #avatar>
                  <a-image
                    width="100"
                    height="100"
                    alt="暂无图片"
                    :src="item.imageUrl"
                    :fallback="imgSrc"
                  />
                </template>
              </a-list-item-meta>
            </a-tooltip>
            <div class="pulish-time">发布时间：{{ item.createDate }}</div>
            <!-- <template #extra>
              <a-image
                width="100"
                height="100"
                alt="暂无图片"
                :src="item.imageUrl"
                :fallback="imgSrc"
              />
            </template>
            <a-list-item-meta>
              <template #title>
                <a @click="goToDetails(item.id)">{{ item.title }}</a>
              </template>
            </a-list-item-meta>
            {{ item.content }} -->
          </a-list-item>
        </template>
      </a-list>
      <a-pagination
        v-model:current="page"
        :total="total"
        show-quick-jumper
        show-less-items
        @change="getList"
      />
    </div>
    <home-footer></home-footer>
  </div>
</template>

<script setup>
  import HomeHeader from '@/views/home/components/header'
  import HomeFooter from '@/views/newHome/components/Footer'
  import { ref } from 'vue'
  import { gongZuoZhuangTai } from '@/api/home'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const listData = ref([])
  const limit = ref(4)
  const page = ref(1)
  const total = ref(0)
  const imgSrc = ref(require('@/assets/newHome/zw.png'))

  const getList = () => {
    gongZuoZhuangTai({ limit: limit.value, page: page.value }).then((res) => {
      console.log('获取工作动态=============>', res.data.data)
      listData.value = res.data.data.list
      total.value = res.data.data.total
    })
  }
  const goToDetails = (id) => {
    router.push({
      path: '/WorkDynDetails',
      query: {
        id: id,
      },
    })
  }
  getList()
  console.log(listData.value)
</script>

<style scoped lang="less">
  .work-dyn-main-content {
    .ant-breadcrumb {
      margin: 90px auto 0;
      padding: 5px 400px;
      background-color: #f5f8fc;
    }
    #work-dyn-list {
      background-color: #ffffff;
      height: 100%;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      // align-items: center;
      padding: 0 400px;
      flex-direction: column;
      :deep(.ant-list-header) {
        border-bottom: none;
        .total-num-content {
          font-size: 14px;
          color: #212121;
          border-bottom: 1px solid #dddee1;
          height: 35px;
          display: flex;
          align-items: center;
          .total-main-text {
            flex: 1;
            .num-text {
              font-size: 18px;
              color: #0058e1;
            }
          }
        }
      }
      :deep(.ant-list-item) {
        width: 1300px;
        padding: 30px 0;
        position: relative;
        border-bottom: #dddee1 solid 1px;
        .ant-list-item-meta {
          margin: 0;
        }
        .ant-list-item-meta-title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 16px;
          .title-content {
            font-size: 20px;
          }
        }
        .ant-list-item-meta-description {
          font-size: 14px;
          color: rgba(33, 33, 33, 0.8);
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
        .pulish-time {
          position: absolute;
          left: 196px;
          bottom: 35px;
          color: #212121;
        }
        .ant-image-img {
          width: 180px;
          min-height: 120px;
        }

        &:hover {
          padding-left: 20px;
          border: #0058e1 1px solid;
          box-shadow: 0px 0px 20px rgba(0, 88, 225, 0.3);
          width: 100%;
          .pulish-time {
            left: 216px;
          }
        }
      }
      .ant-pagination {
        width: 100%;
        margin: 20px 0;
      }
    }
  }
</style>
<style>
  body,
  html {
    height: unset;
  }
</style>