SteelfurnitureWeb/src/views/news/index.vue

<template>
  <div class="bg-F5">
    <div class="container">
      <div class="infoTabDiv">
        <el-tabs v-model="activeName" @tab-click="tabChange">
          <el-tab-pane label="通知公告" name="first">
            <div class="listDiv">
              <ul class="listUl">
                <li v-for="item in tzggArr" :key="item.noticeId">
                  <div class="dateDiv">
                    <div class="day">{{ item.createDay }}</div>
                    <div>{{ item.createMonth }}</div>
                  </div>
                  <router-link class="conDiv" :to="`/home`">
                    <div class="tit">{{ item.noticeTitle }}</div>
                    <div class="detail">
                      <div v-html="item.noticeContent"></div>
                      <span class="xq"
                        >详情<i class="el-icon-d-arrow-right"></i
                      ></span>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="行业资讯" name="second">
            <div class="listDiv">
              <ul class="listUl">
                <li v-for="item in hyzxArr" :key="item.noticeId">
                  <div class="dateDiv">
                    <div class="day">{{ item.createDay }}</div>
                    <div>{{ item.createMonth }}</div>
                  </div>
                  <router-link class="conDiv" :to="`/home`">
                    <div class="tit">{{ item.noticeTitle }}</div>
                    <div class="detail">
                      <div v-html="item.noticeContent"></div>
                      <span class="xq"
                        >详情<i class="el-icon-d-arrow-right"></i
                      ></span>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="家具保养" name="third">
            <div class="listDiv">
              <ul class="listUl">
                <li v-for="item in jjbyArr" :key="item.noticeId">
                  <div class="dateDiv">
                    <div class="day">{{ item.createDay }}</div>
                    <div>{{ item.createMonth }}</div>
                  </div>
                  <router-link
                    class="conDiv"
                    :to="`/news/newsDetail?noticeId=${item.noticeId}`"
                  >
                    <div class="tit">{{ item.noticeTitle }}</div>
                    <div class="detail">
                      <div v-html="item.noticeContent"></div>
                      <span class="xq"
                        >详情<i class="el-icon-d-arrow-right"></i
                      ></span>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-pagination
        class="pageDiv"
        background
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :current-page="currentPage"
        layout="prev, pager, next,total, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
export default {
  name: "app",
  components: {},
  data() {
    return {
      activeName: "first",
      tzggArr: [],
      hyzxArr: [],
      jjbyArr: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    tabChange() {
      var that = this;
      that.currentPage = 1;
      if (that.activeName == "first") {
        that.listAll(1);
      } else if (that.activeName == "second") {
        that.listAll(2);
      } else if (that.activeName == "third") {
        that.listAll(3);
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      if (that.activeName == "first") {
        that.listAll(1);
      } else if (that.activeName == "second") {
        that.listAll(2);
      } else {
        that.listAll(3);
      }
    },
    listAll(noticeType) {
      var that = this;
      that
        .$post("interface/notice/getNoticeListAll", {
          pageNum: that.currentPage1,
          pageSize: that.pageSize1,
          noticeType: noticeType
        })
        .then(function(res) {
          console.log(res);
          if (!res[0]) {
            res[1].rows.forEach(function(item, index) {
              let date = [];
              let dateTime = [];
              if (item.createTime) {
                dateTime = item.createTime.split(" ");
                date = dateTime[0].split("-");
                item.createDay = date[2];
                item.createMonth = date[0] + "-" + date[1];
              }
            });
            that.total = res[1].total;
            if (noticeType == 1) {
              that.tzggArr = res[1].rows;
            } else if (noticeType == 2) {
              that.hyzxArr = res[1].rows;
            } else {
              that.jjbyArr = res[1].rows;
            }
          }
        });
    }
  },
  activated() {
    if (this.$route.query.active) {
      this.activeName = this.$route.query.active;
      this.tabChange();
    }
  },
  mounted() {
    this.listAll(1);
    this.listAll(2);
    this.listAll(3);
  }
};
</script>
<style scoped lang="scss">
.listDiv {
  width: 100%;
  padding-left: 4rem;
  box-sizing: border-box;
}
.listUl {
  list-style: none;
  width: 100%;
  border-left: 0.1rem solid #e5e5e5;
}
.listUl li {
  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: -3.5rem;
    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;

    .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;
      }
    }
  }
}
.pageDiv {
  text-align: right;
  margin-top: 0.5rem;
  padding: 3rem 0;
}
</style>
<style lang="scss">
.infoTabDiv {
  .el-tabs__nav-scroll {
    padding: 0 1.6rem;
    box-sizing: border-box;
  }
  .el-tabs__item {
    height: 5rem;
    line-height: 5rem;
  }
  .el-tabs__item:hover {
    color: #fd5522;
  }
  .el-tabs__item.is-active {
    color: #fd5522;
  }
  .el-tabs__active-bar {
    background-color: #fd5522;
  }
}
</style>