web-common/src/layout/master/index/news.vue

<template>
  <div id="news">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="title">
          <span>{{title}}</span>
        </el-col>
        <el-col :span="24">
          <el-col :span="13" class="block">
            <el-carousel ref="shubiao">
              <el-carousel-item v-for="(item, index) in newsList" :key="index" :name="`${index}`">
                <el-link :underline="false">
                  <el-image style="width:620px;height:350px;" :src="item.picurl" class="newsList"></el-image>
                </el-link>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="11" class="newsLi">
            <ul>
              <li class="listdata"><span class="qiudata"></span>
                <el-link :underline="false">今天（3月8日星期五）</el-link>
              </li>
              <li class="list" v-for="(tag, index) in newsList" :key="index" :type="tag.type" @mouseover="shuYi(index)"
                  :class="newListActive(tag)">
                <span class="qiu"></span>
                <el-link :underline="false" class="newsListTit">{{ tag.title }}</el-link>
              </li>
            </ul>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'news',
  props: {
    newsList: null,
  },
  components: {},
  data: () => ({
    title: '就业新闻',
  }),
  created() { },
  computed: {},
  methods: {
    shuYi(index) {
      this.$refs.shubiao.setActiveItem(`${index}`);
    },
    // eslint-disable-next-line no-unused-vars
    newListActive(item) { },
  },
};
</script>

<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.title {
  color: #333;
  font-size: 24px;
  font-family: 微软雅黑;
  font-weight: bold;
  margin-bottom: 15px;
}
/deep/.el-carousel__indicators--horizontal {
  display: none;
}
/deep/.el-carousel__arrow {
  display: none;
}
/deep/.el-carousel__container {
  height: 350px;
}
.block{
  width:620px;
  height:350px;
}
.newsLi {
  width: 580px;
  height:350px;
  background-color: #eeeeee;
  overflow: hidden;
}
.list {
  height: 50px;
  line-height: 50px;
  border-left: 5px solid #eeeeee;
}
.listdata {
  height: 50px;
  line-height: 50px;
  border-left: 5px solid #eeeeee;
}
.listdata .el-link {
  color: #999999;
  font-size: 20px;
  font-family: 微软雅黑;
}
.list .el-link {
  color: #999999;
  font-size: 20px;
  font-family: 微软雅黑;
}
.list:hover {
  border-left: 5px solid #415285;
  background: #fff;
}
.list:hover .el-link {
  color: #333;
}
.list:hover .qiu{
  background: #415285;
}
.qiudata {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #fff;
  border:1px solid #ccc;
  border-radius: 90px;
  margin: 0 15px;
}
.qiu {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #d5d5d5;
  border-radius: 90px;
  margin: 0 15px;
}
</style>