web-center/src/layout/index/news.vue

<template>
  <div id="news">
    <el-row v-loading="loading">
      <el-col :span="24" class="news">
        <el-col :span="24" class="newsTop">
          <el-col :span="18" class="text">
            {{ newsList.title || title }}
          </el-col>
          <el-col :span="6" class="link">
            <el-link :underline="false" @click="$router.push({ path: path, query: { title: newsList.title } })">
              MORE<i class="el-icon-circle-plus-outline" style="color:#f8b024;font-weight:bold;margin:0 5px;"></i>
            </el-link>
          </el-col>
        </el-col>
        <el-col :span="24" class="info">
          <el-col :span="11" class="block">
            <el-carousel :interval="5000" arrow="always" ref="shubiao">
              <el-carousel-item v-for="(item, index) in infoList" :key="index" :name="`${index}`">
                <el-link :underline="false" @click="$router.push({ path: `/detail?id=${item.id}` })">
                  <el-image style="width:369px;height:242px;" :src="item.pic"></el-image>
                  <el-col :span="24" class="cont">
                    <p>{{ item.title }}</p>
                  </el-col>
                </el-link>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="12" class="content">
            <el-col
              :span="24"
              class="titList"
              @mouseover="shuYi(index)"
              :class="newListActive(item)"
              v-for="(item, index) in infoList"
              :key="index"
              @click.native="$router.push({ path: `/detail?id=${item.id}` })"
            >
              <span class="shu"></span>
              <span class="title">{{ item.title }}</span>
              <span class="time">{{ item.publish_time }}</span>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'news',
  props: {
    newsList: null,
  },
  components: {},
  data: () => ({
    loading: true,
    title: '就业动态',
    infoList: [],
    path: undefined,
  }),
  watch: {
    newsList: {
      handler(val) {
        if (val) this.assignData(val);
      },
    },
  },
  created() {},
  computed: {},
  methods: {
    assignData(data) {
      let columns = _.get(data, 'children');
      let news = [];
      for (const item of columns) {
        if (!this.path) this.path = item.path;
        let newsList = _.get(item, `children`);
        if (newsList) {
          news = news.concat(news, newsList);
        }
      }
      this.$set(this, `infoList`, news);
      this.loading = false;
    },
    shuYi(index) {
      this.$refs.shubiao.setActiveItem(`${index}`);
    },
    newListActive(item) {},
  },
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
/deep/.el-carousel__indicators {
  display: none;
}
.newsTop {
  height: 35px;
  line-height: 35px;
  border-bottom: 2px solid #0656d1;
}
.newsTop .text {
  font-size: 20px;
  color: #0874ee;
  font-weight: 600;
  padding: 0 10px;
}
.newsTop .link {
  text-align: right;
  padding: 0 5px;
}
.info {
  margin: 24px 0 0 0;
}
.block {
  width: 369px;
  height: 242px;
  overflow: hidden;
}
.cont {
  position: absolute;
  bottom: 0;
  height: 40px;
  line-height: 40px;
  background-color: #0656d19f;
}
.cont p {
  font-size: 18px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 15px;
}
/deep/.el-carousel__container {
  height: 242px;
}
.content {
  float: right;
  width: 415px;
}
.titList {
  border-bottom: 1px dashed #ccc;
  padding: 5px 0;
}
.titList .shu {
  display: inline-block;
  width: 2px;
  height: 16px;
  background-color: transparent;
}
.titList .title {
  font-size: 14px;
  color: #5b5b5b;
  display: inline-block;
  width: 270px;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.titList .time {
  font-size: 14px;
  color: #5b5b5b;
  display: inline-block;
  width: 100px;
  overflow: hidden;
  padding: 0 10px;
}
.titList:hover {
  cursor: pointer;
}
.titList:hover .title {
  color: #333333;
}
.titList:hover .shu {
  background-color: #0656d1;
}
/deep/.el-carousel__arrow {
  width: 17px;
  height: 39px;
  border-radius: 0;
  background-color: #0656d1;
}
/deep/.el-carousel__arrow--left {
  left: 0;
}
/deep/.el-carousel__arrow--right {
  right: 0;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>