Web_QiCaiYao/pages/information.vue

<!-- 行业资讯 -->
<template>
  <div class="information_box">
    <div class="bjImg">
      <img src="../assets/images/hxzx.png" alt />
      <div class="label">
        <p>行业资讯</p>
        <span>了解公司及行业最新资讯</span>
      </div>
    </div>
    <div class="wrapper_1200 information">
      <ul>
        <li v-for="(item, index) in informationList" :key="index" @click="clickItem(item)">
          <div class="time">
            <p>{{$dayjs(item.create_time*1000).format('MM/DD')}}</p>
            <!-- <p>12/09</p> -->
            <span>{{$dayjs(item.create_time*1000).format('YYYY年')}}</span>
          </div>
          <div class="cont">
            <div class="img">
              <img :src="imgUrl+item.cover_img" alt />
            </div>
            <div class="contText">
              <p>{{item.article_title}}</p>
              <div class="text">{{item.article_abstract}}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <Page @currentChange="currentChange" :total="total" :pageSize="Page.limit"></Page>
  </div>
</template>

<script>
import Setting from "~/setting";
import loginVue from "./login.vue";
export default {
  name: "information",
  auth: false,
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      imgUrl: Setting.uplodBaseURL,
      // 页码
      Page: { page: 1, limit: 10 },
      total: 4,
      // 列表数据
      informationList: []
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  head() {
    return {
      title: "行业资讯-" + this.$store.state.titleCon
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
  },
  //方法集合
  methods: {
    getList() {
      let obj = {
        page: this.Page.page,
        page_size: this.Page.limit
      };
      this.$axios
        .post(`/article/page`, obj)
        .then(res => {
          this.informationList = res.data.list;
          console.log(res.data.list);
          this.total = res.data.count;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    clickItem(item) {
      this.$router.push({
        path: "/information_details",
        query: {
          article_id: item.article_id
        }
      });
    },
    currentChange(e) {
      this.Page.page = e;
      this.getList();
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang="scss" scoped>
.information {
  background-color: #fff;
  position: relative;
  border-radius: 4px;
  margin-top: -32px;
  ul {
    li:nth-child(1) {
      .cont {
        padding-top: 28px;
      }
    }
    li:last-child {
      .cont {
        padding-bottom: 28px;
      }
    }
    li {
      display: flex;
      cursor: pointer;
      .time {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 107px;
        p {
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #222222;
          margin-bottom: 8px;
          text-align: center;
        }
        span {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          text-align: center;
        }
      }
      .cont {
        width: calc(100% - 107px);
        padding: 16px 30px 16px 0px;
        border-left: 1px solid #efefef;
        display: flex;
        align-items: center;
        .img {
          width: 160px;
          height: 110px;
          margin: 0 32px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .contText {
          width: calc(100% - 224px);
          height: 100%;
          // display: flex;
          // flex-direction: column;
          // justify-content: space-between;

          p {
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            margin-bottom: 20px;
            color: #222222;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            // 必须加不然隐藏不了
            /*! autoprefixer: ignore next */
            -webkit-box-orient: vertical;
          }
          .text {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #585858;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            // 必须加不然隐藏不了
            /*! autoprefixer: ignore next */
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
}
.bjImg {
  width: 100%;
  height: 220px;
  position: relative;
  img {
    width: 100%;

    height: 100%;
  }
  .label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    p {
      font-size: 30px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
      margin-bottom: 10px;
      letter-spacing: 2px;
    }
    span {
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
      letter-spacing: 1px;
    }
  }
}
</style>