check-work/src/views/ItInformation/ItInformation.vue

<!--
  Copyright (c) 2020.
  author: bin
  email: binbin0314@126.com
  -->

<template>
  <div class="box">
    <div :key="item.title" class="info-box" v-for="item in lists">
      <div class="date-box">
        <p class="date-mon">{{ monthEnglish[item.time.split('-')[1] - 1] }}.</p>
        <p class="date-day">{{ item.time.split('-')[2] }}</p>
      </div>
      <!-- 标题 -->
      {{ item.title }}
      <!-- 描述 -->
      {{ item.description }}
      <!-- 内容 -->
      {{ item.content }}
      <!-- 地点 -->
      {{ item.site }}
      <!--  -->
      {{ item.spreadDepartment }}
      <!-- 时间 -->
      {{ item.time }}
    </div>
    <a-pagination
      :current="current"
      :page-size="pageSize"
      :total="total"
      @change="onShowSizeChange"
      class="pagination"
      show-less-items
      show-quick-jumper
      v-show="total > 5"
    />
  </div>
</template>

<script>
import { industryInfo } from 'config/api';
export default {
  name: 'ItInformation',
  data() {
    return {
      str: '这是行业资讯界面',
      lists: [],
      total: 0,
      pageSize: 5,
      current: 1,
      monthEnglish: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const params = {
          param: {
            pageNum: 1,
            pageSize: 5,
          },
        };
        const res = await industryInfo(params);
        const { code, data, msg } = res.data;
        if (code === 200) {
          this.lists = data.list;
          this.total = parseInt(data.total);
          for (var i = 0; i < this.lists.length; i++) {
            // this.lists[i].time = moment(this.lists[i].time).format('YYYY-MM-DD');
            this.lists[i].time = this.$moment(parseInt(this.lists[i].time) * 1000).format('YYYY-MM-DD');
          }
        } else {
          console.log(msg);
        }
      } catch (error) {
        this.$message.error(error);
      }
    },
    onShowSizeChange(current) {
      console.log(current);
    },
  },
};
</script>

<style scoped lang="stylus">
.box {
  width: 1260px;
  min-height: 1037px;
  margin: 80px auto;
  overflow: hidden;
  opacity: 1;
}

.info-box {
  position: relative;
  width: 100%;
  height: 238px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  margin-top: 24px;
  padding: 25px;
}

.pagination {
  margin-top: 68px;
  text-align: right;
}

.date-box {
  height: 188px !important;
  width: 188px !important;
  position: absolute !important;
  top: 0 !important;
  // box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  text-align: center;
  box-shadow: none !important;

  p {
    margin-bottom: 0 !important;
  }
}

.date-mon {
  font-size: 40px;
  height: 40px;
  line-height: 40px;
  font-weight: 500;
  color: #13ACC4;
}

.date-day {
  font-size: 70px;
  height: 80px;
  line-height: 80px;
  font-weight: bold;
  color: #13ACC4;
}
</style>