ContestPortal/src/views/news/index.vue

<template>
  <div class="container">
    <div class="news-list">
      <div class="item" v-for="(item,index) in newsList" :key="item.id">
        <div class="news-title" :id="index.toString()">{{ item.name }}</div>
        <div class="children">
          <div class="son-item" v-for="obj in item.cmsArticleList" :key="obj.id" @click="toNewsDetail(obj.id)">
            <div class="left">
              <div class="title">{{ obj.title }}</div>
              <div class="content">
               {{ obj.info }}
              </div>
              <div class="time"><div>{{ obj.publishTime }}</div> <div style="margin-left: 20px;">发布人：{{ obj.createBy }}</div></div>
            </div>
            <div class="right">
              <img :src="setImageUrl(obj.comimg)" alt=""  v-default-image/>
            </div>
          </div>
          <el-empty description="无新闻" v-if="item.cmsArticleList.length === 0" style="height: 200px;"/>
        </div>
      </div>
    </div>
    <!-- 右侧栏目 -->
  </div>
  <div class="right-coulom">
    <div :class="active === index ? 'item active' : 'item' " @click="scrollById(index)" v-for="(item,index) in columnList" :key="item">{{ item }}</div>

  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getNewsListApi } from '@/api/news'

const router = useRouter()
const newsList = ref<any>([])
const columnList = ref<any>([])
const active = ref(0)
const getNewsListApiEvent = async () => {
  const res:any = await getNewsListApi()
  console.log(res, '212121')
  columnList.value = res.result.map(item => item.name)
  newsList.value = res.result
}
getNewsListApiEvent()
const scrollById = (index: number) => {
  active.value = index
  const targetPosition = (document.getElementById(index.toString()) as HTMLElement).offsetTop - 120;
      window.scrollTo({
        top: targetPosition,
        behavior: 'smooth', // 平滑滚动
      });
}
const toNewsDetail = (id: number) => {
  router.push({
    path: '/detail/' + id
  })
}
const setImageUrl = (url: string) => {
  return import.meta.env.VITE_APP_BASE_API + '/sys/common/static/' + url
}
</script>
<style scoped lang="scss">
.container {
  width: 1200px;
  margin: auto;
  margin-top: 100px;
  .news-list {
    width: 100%;
    // height: 900px;
    // background-color: #f2f3f5;
    padding: 15px;
    border: 1px solid #f2f3f5;
    border-radius: 5px;
    .item {
      .news-title {
        font-size: 24px;
        font-weight: 700;
      }
      .children {
        margin: 20px 0;
        .son-item {
          width: 100%;
          height: 100px;
          background-color: #fff;
          padding: 15px;
          display: flex;
          border-bottom: 1px solid rgba(228, 230, 235, 0.5);
          justify-content: space-between;
          cursor: pointer;
          .left {
            width: 1000px;
            .title {
              font-size: 18px;
              font-weight: 700;
              color: #4f5153;
            }
            .content {
              margin-top: 8px;
              font-size: 13px;
              color: #8a919f;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
            .time {
              margin-top: 8px;
              font-size: 12px;
              color: #8a919f;
              display: flex;
            }
          }
          .right {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            img {
              width: 100%;
              height: 100%;
            }
          }
          &:hover {
            background-color: #f7f8fa;
          }
        }
      }
    }
  }
}
.right-coulom {
  position: fixed;
  left: 200px;
  top: 100px;
  z-index: 999;
  width: 150px;
  // height: 300px;
  background-color: #f2f3f5;
  padding: 10px;
  border-radius: 5px;
  .item {
    height: 45px;
    // text-align: center;
    line-height: 22px;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px 0;
    &:hover {
      background-color: #0bd7c628;
      color: #0bd7c6;
    }
  }
  .active {
    background-color: #0bd7c628;
    color: #0bd7c6;
  }
}
</style>