SteelfurnitureWeb/src/views/news/index.vue

<template>
  <div class="bg-F5">
    <div class="container">
      <tab
        class="tab"
        :titles="`${$t(`page.views.news.details.titles`)}`"
        :currIndex.sync="currIndex"
      />
      <load-more
        url="/interface/notice/getNoticeListAll"
        :params="params"
        v-slot="{ item }"
      >
        <div class="item">
          <div class="dateDiv">
            <div class="day">{{ getDateformat(item.createTime, "dd") }}</div>
            <div>{{ getDateformat(item.createTime, "YYYY-mm") }}</div>
          </div>
          <router-link class="conDiv" :to="`/newsDetail/${item.noticeId}`">
            <div class="tit">{{ item.noticeTitle }}</div>
            <div class="detail">
              <div class="desc">{{ item.noticeOutline }}</div>
              <span class="xq"
                >{{ $t("page.views.news.index.details")
                }}<i class="el-icon-d-arrow-right"></i
              ></span>
            </div>
          </router-link>
        </div>
      </load-more>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import { Dateformat } from "@/utils";
@Component
export default class extends Vue {
  @Prop(String) private index!: string;
  private currIndex: number = 0;
  private params: IAny | null = null;
  @Watch("index", { immediate: true })
  indexChange(index: string) {
    this.currIndex = Number(index) || 0;
    this.currIndexChange();
  }
  @Watch("currIndex")
  currIndexChange() {
    this.params = { noticeType: this.currIndex + 1 };
  }
  getDateformat(date: string, fmt: string) {
    return Dateformat(date, fmt);
  }
}
</script>
<style lang="scss" scoped>
.item {
  width: 100%;
  min-height: 7rem;
  position: relative;
  padding-left: 7rem;
  margin-top: 2rem;
  box-sizing: border-box;

  .dateDiv {
    height: 8rem;
    width: 8rem;
    color: #fff;
    text-align: center;
    background: #fd5522;
    border-radius: 0.5rem;
    position: absolute;
    left: 0;
    top: 0;

    > div {
      font-size: 1.6rem;
      height: 2.8rem;
      line-height: 2.8rem;
    }

    .day {
      height: 5rem;
      line-height: 5rem;
      font-size: 2.5em;
      font-weight: bolder;
      border-bottom: 0.1rem solid #fff;
    }
  }
  .conDiv {
    // width: 100%;
    display: block;
    height: 100%;
    padding: 0 1rem;
    background: #fff;
    box-shadow: 2px 2px 12px #ddd;
    box-sizing: border-box;
    border-radius: 0.3rem;
    margin-left: 3.5rem;
    .tit {
      height: 3rem;
      line-height: 3rem;
      font-size: 1.6rem;
      font-weight: bolder;
    }

    .detail {
      height: 5rem;
      line-height: 1.6rem;
      div {
        height: 3.2rem;
        line-height: 1.6rem;
        font-size: 1.2rem;
        color: #666;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .xq {
        color: #fd5522;
        margin-left: 1rem;
        font-size: 14px;
      }
    }
  }
}
</style>