web-center/src/layout/member/gaoceng.vue

<template>
  <div id="gaoceng">
    <el-row>
      <el-col :span="24" class="top">
        <el-col :span="10">
          <el-image style="width:100%;height:40px;" :src="left"></el-image>
        </el-col>
        <el-col :span="4" class="topTitle">
          {{ title }}
        </el-col>
        <el-col :span="10">
          <el-image style="width:100%;height:40px;" :src="right"></el-image>
        </el-col>
      </el-col>
      <el-col :span="24" class="info">
        <el-col :span="12" class="carousel" v-loading="loading">
          <el-carousel height="400">
            <el-carousel-item class="infoList" v-for="(item, index) in infoList" :key="index" @click.native="turnTo(item)">
              <el-image style="width:100%;height:400px;" :src="item.pic" v-if="item.pic"></el-image>
              <el-image style="width:100%;height:400px;" :src="noPic" v-else></el-image>
              <span class="textOver">{{ item.title }}</span>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="12" style="height:400px;" v-loading="loading">
          <el-col :span="24" class="newsList" v-for="(item, index) in infosList" :key="index" @click.native="turnTo(item)">
            <el-col :span="20" class="title">
              <p class="textOver">
                <i class="el-icon-s-flag icon"></i><span>{{ item.title }}</span>
              </p>
            </el-col>
            <el-col :span="4" class="date">
              {{ item.publish_time }}
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'gaoceng',
  props: {
    carouselList: null,
    newsList: null,
  },
  components: {},
  data: () => ({
    title: '高层声音',
    left: require('@/assets/messageLeft.jpg'),
    right: require('@/assets/messageRight.jpg'),
    infoList: [],
    infosList: [],
    loading: true,
    noPic: require('@/assets/noPic3.png'),
  }),
  watch: {
    carouselList: {
      handler(val) {
        if (val) {
          this.assignData(val);
        }
      },
    },
    newsList: {
      handler(val) {
        if (val) {
          this.assignDatas(val);
        }
      },
    },
  },
  created() {},
  computed: {},
  methods: {
    assignData(data) {
      let columns = _.get(data, 'children');
      this.$set(this, `infoList`, columns);
      this.loading = false;
    },
    assignDatas(data) {
      let columns = _.get(data, 'children');
      this.$set(this, `infosList`, columns);
      this.loading = false;
    },
    turnTo(item) {
      if (item.url !== undefined) {
        window.location.href = item.url;
      } else {
        let route = this.$route.path;
        this.$router.push({ path: `/memberDetail?id=${item.id}` });
      }
    },
  },
  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;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top {
  height: 40px;
  line-height: 40px;
  margin: 0 0 40px 0;
}
.top .topTitle {
  font-size: 38px;
  color: #bd010b;
  text-align: center;
  font-weight: bold;
  font-family: '微软雅黑';
}
.info {
  height: 400px;
}
.info .carousel {
  height: 400px;
  overflow: hidden;
}
/deep/.el-carousel__indicators {
  display: none;
}
/deep/.el-carousel__container {
  height: 400px;
}
.info .carousel span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  background-color: #0000004f;
  font-size: 16px;
  padding: 0 10px;
}
.newsList {
  padding: 10px 0px 10px 20px;
}
.newsList .title p {
  font-size: 18px;
  color: #5d5d5d;
  padding: 0 15px 0 0;
}
.newsList .title p .icon {
  color: #bd010b;
  margin: 0 15px 0 0;
}
.newsList .date {
  font-size: 18px;
  color: #5d5d5d;
}
.newsList:hover {
  cursor: pointer;
}
.newsList:hover .title p {
  color: #bd010b;
}
.newsList:hover .date {
  color: #bd010b;
}
.infoList:hover {
  cursor: pointer;
}
</style>