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 @click="$router.push({ path: '/news/listDetail', query: { col_name: '科技资讯', display: '0' } })">MORE</span>
          </el-col>
          <el-col :span="24" class="list">
            <el-col :span="24" class="oneList" @click.native="zixun(item)" 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 @click="$router.push({ path: '/news/listDetail', query: { col_name: '技术前沿', display: '0' } })">MORE</span>
          </el-col>
          <el-col :span="24" class="list">
            <el-col :span="24" class="oneList" @click.native="jishu(item)" 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 @click="$router.push({ path: '/news/listDetail', query: { col_name: '工作动态', display: '0' } })">MORE</span>
          </el-col>
          <el-col :span="24" class="list">
            <el-col :span="24" class="oneList" @click.native="jobs(item)" 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: {
    async jobs(item) {
      if (item.url) {
        window.open(item.url);
      } else {
        console.log(item);

        this.$router.push({ path: '/news/listDetail', query: { col_name: '工作动态', id: item.id, display: '1' } });
      }
    },

    async zixun(item) {
      if (item.url) {
        window.open(item.url);
      } else {
        this.$router.push({ path: '/news/listDetail', query: { col_name: '科技资讯', id: item.id, display: '1' } });
      }
    },

    async jishu(item) {
      if (item.url) {
        window.open(item.url);
      } else {
        this.$router.push({ path: '/news/listDetail', query: { col_name: '技术前沿', id: 'id', display: '1' } });
      }
    },
  },
  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;
        cursor: pointer;
      }
    }
    .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;
      }
    }
    .oneList:hover span:nth-child(2) {
      cursor: pointer;
      color: #005293;
    }
  }
}
</style>