webnew-count/src/layout/news/infoList.vue

<template>
  <div id="infoList">
    <el-row>
      <el-col :span="24" class="info">
        <el-col :span="24" class="one">
          <el-col :span="24" class="top">
            <span></span>
            <span>科技资讯</span>
            <span>MORE</span>
          </el-col>
          <el-col :span="24" class="list">
            <el-col :span="24" class="oneList" v-for="(item, index) in oneList" :key="index">
              <span></span>
              <span class="textOver">{{ item.title }}</span>
              <span>{{ item.date }}</span>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="one">
          <el-col :span="24" class="top">
            <span></span>
            <span>技术前沿</span>
            <span>MORE</span>
          </el-col>
          <el-col :span="24" class="list">
            <el-col :span="24" class="oneList" v-for="(item, index) in twoList" :key="index">
              <span></span>
              <span class="textOver">{{ item.title }}</span>
              <span>{{ item.date }}</span>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="one">
          <el-col :span="24" class="top">
            <span></span>
            <span>工作动态</span>
            <span>MORE</span>
          </el-col>
          <el-col :span="24" class="list">
            <el-col :span="24" class="oneList" v-for="(item, index) in threeList" :key="index">
              <span></span>
              <span class="textOver">{{ item.title }}</span>
              <span>{{ item.date }}</span>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'infoList',
  props: {
    oneList: null,
    twoList: null,
    threeList: null,
  },
  components: {},
  data: function() {
    return {};
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.info {
  padding: 0 20px;
  .one {
    height: 330px;
    overflow: hidden;
    margin: 0 0 20px 0;
    .top {
      height: 35px;
      margin: 20px 0;
      border-bottom: 1px dashed #ccc;
      span:first-child {
        display: inline-block;
        width: 4px;
        height: 20px;
        background: #005293;
        margin: 0 10px -3px 0;
      }
      span:nth-child(2) {
        font-size: 20px;
        color: #005293;
        font-weight: bold;
      }
      span:last-child {
        float: right;
        font-size: 15px;
        color: #005293;
      }
    }
    .oneList {
      padding: 0 0 7px 0;
      span:first-child {
        display: inline-block;
        width: 4px;
        height: 4px;
        background: #ccc;
        margin: 0px 10px 7px 0px;
      }
      span:nth-child(2) {
        display: inline-block;
        font-size: 16px;
        color: #555555;
        font-family: '微软雅黑';
        width: 85%;
        margin: 0 30px 0 0;
      }
      span:last-child {
        display: inline-block;
        width: 90px;
        font-size: 16px;
        color: #a8abb7;
        font-family: '微软雅黑';
        text-align: right;
      }
    }
  }
}
</style>