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" class="list">
          <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" @click="$router.push({ path: `/master/detail/news/${item.id}` })">
                  <el-image style="width:396px;height:280px;" :src="item.pic" class="newsList"></el-image>
                  <el-col :span="24" class="content"><p v-html="item.content"></p></el-col>
                </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="newsTitle"
                v-for="(tag, index) in newsList"
                :key="index"
                :type="tag.type"
                @mouseover="shuYi(index)"
                :class="newListActive(tag)"
                @click="$router.push({ path: `/master/detail/news/${tag.id}` })"
              >
                <span class="qiu"></span>
                <p class="textOver">{{ tag.title }}</p>
              </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;
}
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title {
  height: 90px;
  padding: 50px 0 0 10px;
  color: #333;
  font-size: 24px;
  font-family: 微软雅黑;
}
.list {
  height: 280px;
  background: #eeeeee;
}
/deep/.el-carousel__container {
  height: 280px;
}
/deep/.el-carousel__indicators--horizontal {
  display: none;
}
/deep/.el-carousel__arrow {
  display: none;
}
.content {
  position: absolute;
  bottom: 0;
  height: 50px;
  line-height: 20px;
  padding: 0 10px;
  background-color: rgba(0, 0, 0, 0.5);
}
.content p {
  font-size: 12px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
/deep/.content p p {
  padding: 3px 0 0 0;
  margin: 0;
}
.block {
  width: 396px;
  height: 280px;
}
.newsLi {
  width: 334px;
  height: 280px;
  background-color: #eeeeee;
  overflow: hidden;
}
.listdata {
  height: 32px;
  line-height: 32px;
  border-left: 3px solid #eeeeee;
}
.listdata .el-link {
  color: #999999;
  font-size: 13px;
  font-family: 微软雅黑;
}
.newsTitle {
  height: 32px;
  line-height: 32px;
  border-left: 3px solid transparent;
}
.newsTitle:hover {
  border-left: 3px solid #415285;
  background: #fff;
  cursor: pointer;
}
.newsTitle: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 {
  float: left;
  width: 10px;
  height: 10px;
  background: #d5d5d5;
  border-radius: 90px;
  margin: 11px 15px 0 17px;
}
</style>