web/src/views/news/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__zoomInDown">
        <el-col :span="24" class="zero one">
          <el-col :span="16" class="one_1">
            <el-carousel height="500px">
              <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                <el-image class="image" :src="item.url"></el-image>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="8" class="one_2">
            <el-col :span="24" class="newsList" v-for="(item, index) in newsList" :key="index">
              <el-col :span="24" class="title textOver">{{ item.title }}</el-col>
              <el-col :span="24" class="date">{{ item.date }}</el-col>
              <el-col :span="24" class="brief">{{ item.brief }}</el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="zero two">
          <el-col :span="24" class="common_1">
            <span>新闻资讯</span>
            <span></span>
            <span></span>
          </el-col>
          <el-col :span="24" class="two_1">
            <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
              <el-col :span="2" class="date">
                <p>
                  <span>{{ getDate(item.date, 'day') }}</span>
                  <span>{{ getDate(item.date, 'year') }}</span>
                </p>
              </el-col>
              <el-col :span="2" class="info">
                <el-col :span="24" class="title">{{ item.name }}</el-col>
                <el-col :span="24" class="brief">{{ item.path || '暂无' }}</el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="page">
              <c-page :total="total" :limit="limit" @query="search"></c-page>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('program');
const moment = require('moment');

export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      // 轮播图
      bannerList: [{ url: require('@a/news_1.jpg') }],
      // 新闻
      newsList: [
        {
          title: '软件定义一切 下一个数据中心模式？',
          date: '2023-02-02',
          brief: '虚拟化在数据中心的应用意味着软件定义计算逐渐成为主流，而在软件定义计算的成功摸下下，软件定义存储也迅速获得市场的认.',
        },
        {
          title: '软件定义一切 下一个数据中心模式？',
          date: '2023-02-02',
          brief: '虚拟化在数据中心的应用意味着软件定义计算逐渐成为主流，而在软件定义计算的成功摸下下，软件定义存储也迅速获得市场的认.',
        },
        {
          title: '软件定义一切 下一个数据中心模式？',
          date: '2023-02-02',
          brief: '虚拟化在数据中心的应用意味着软件定义计算逐渐成为主流，而在软件定义计算的成功摸下下，软件定义存储也迅速获得市场的认.',
        },
        {
          title: '软件定义一切 下一个数据中心模式？',
          date: '2023-02-02',
          brief: '虚拟化在数据中心的应用意味着软件定义计算逐渐成为主流，而在软件定义计算的成功摸下下，软件定义存储也迅速获得市场的认.',
        },
      ],
      list: [],
      total: 0,
      limit: 6,
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...mapActions(['query']),
    async search({ skip = 0, limit = this.limit, ...info } = {}) {
      let res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    // 整理时间
    getDate(e, type) {
      if (type == 'day') {
        let day = moment(e).format('DD');
        if (day) return day;
        else '暂无';
      } else if (type == 'year') {
        let year = moment(e).format('YYYY/MM');
        if (year) return year;
        else '暂无';
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .zero {
    margin: 0 0 2vw 0;
    .common_1 {
      margin: 0 0 20px 0;
      span:nth-child(1) {
        color: #ffc001;
        font-size: 18px;
      }
      span:nth-child(2) {
        display: inline-block;
        width: 8px;
        height: 10px;
        background-color: #ffc001;
        margin: 0 10px;
      }
      span:nth-child(3) {
        display: inline-block;
        width: 91%;
        height: 10px;
        background-color: #f1f1f1;
      }
    }
  }
  .one {
    .one_1 {
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .one_2 {
      padding: 0 10px;
      .newsList {
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
        border-bottom: 1px dashed #353535;
        .title {
          font-size: 20px;
          margin: 0 0 5px 0;
          font-weight: bold;
          font-family: cursive;
        }
        .date {
          font-size: 14px;
          margin: 0 0 5px 0;
        }
        .brief {
          font-size: 14px;
          color: #7e7e7e;
          line-height: 1.5;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
      .newsList:last-child {
        border-bottom: none;
        margin: 0;
        padding: 0;
      }
      .newsList:hover {
        cursor: pointer;
        .title {
          color: #ffc001;
        }
        .date {
          color: #ffc001;
        }
      }
    }
  }
  .two {
    .two_1 {
      .list {
        border-bottom: 1px solid #f1f1f1;
        padding: 0 0 20px 0;
        margin: 0 0 10px 0;
        .date {
          p {
            background-color: #f2f2f2;
            padding: 10px;
            text-align: center;
            span {
              display: inline-block;
              font-size: 14px;
              color: #747474;
            }
            span:nth-child(1) {
              font-size: 25px;
            }
          }
        }
        .info {
          padding: 0 0 0 10px;
          .title {
            font-size: 18px;
            margin: 0 0 5px 0;
          }
          .brief {
            font-size: 14px;
            color: #747474;
          }
        }
      }
      .list:last-child {
        border-bottom: none;
      }
      .list:hover {
        cursor: pointer;
        .info {
          .title {
            color: #ffc001;
          }
        }
      }
      .page {
        text-align: center;
      }
    }
  }
}
</style>