web-common/src/layout/index/chengguo.vue

<template>
  <div id="chengguo">
    <el-row>
      <el-col :span="24" class="news">
        <el-col :span="24" class="topTit">
          <el-col :span="18">
            <span :style="`border-color:${borderColor}`">{{title}}</span>
          </el-col>
          <el-col :span="6" style="text-align:right;">
            <el-link :underline="false" :style="`color:${Color}`"
                     @click="$router.push({ path: `list/${chengguolist[0].id}` })">MORE<i
                 class="el-icon-video-play"></i></el-link>
          </el-col>
        </el-col>
        <!-- chengguolist -->
        <!-- <el-col :span="24" class="newsMain">
           <el-col :span="24" v-for="(tag, index) in chengguolist" :key="index" :type="tag.type">
              <el-col class="chengguolist" :span="24" v-for="(item, index) in tag.children" :key="index">
                <el-col :span="16" @click.native="$router.push({ name: 'detail', params:{id:item.id} })">
                  <p class="textOver">{{ item.title }}</p>
                </el-col>
                <el-col :span="8" style="text-align:right;">
                  {{item.publish_time}}
                </el-col>
              </el-col>
            </el-col>
        </el-col> -->
        <el-col :span="24" class="newsMain">
          <el-col :span="24" v-for="(tag, index) in chengguolist" :key="index" :type="tag.type">
            <el-carousel indicator-position="outside" type="card" :interval="3000">
              <el-carousel-item v-for="(item, index) in tag.children" :key="index">
                <el-col :span="24" class="link" @click.native="$router.push({ name: 'detail', params:{id:item.id} })">
                  <el-col :span="24">
                    <el-image style="width:100%;height:345px;" :src="getPic(index + 1)"></el-image>
                  </el-col>
                  <el-col :span="24" class="title" :unerline="false">
                    <p>{{item.title}}</p>
                  </el-col>
                </el-col>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'chengguo',
  props: {
    chengguolist: null,
  },
  components: {},
  data: () => ({
    borderColor: '#850000',
    Color: '#850000',
    title: '成果展示',
    img1:require('../../assets/cg1.png'),
    img2:require('../../assets/cg2.jpg'),
    img3:require('../../assets/cg3.jpg'),
  }),
  created() {
  },
  computed: {},
  methods: {
    getPic(index) {
      let res= index % 3;
      if(res === 1) return this.img1;
      else if(res === 2) return this.img2;
      else return this.img3
    }
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news {
  padding: 10px;
  height: 399px;
}
.topTit {
  border-bottom: 1px solid #ccc;
}
.topTit span {
  display: inline-block;
  height: 30px;
  border-bottom: 1px solid transparent;
}
.chengguolist {
  padding: 10px 0;
  border-bottom: 1px dashed #ccc;
  margin: 1px;
}
.newsMain {
  padding: 5px 0;
  height: 356px;
}
/deep/.el-carousel__container {
  height: 345px;
}
/deep/.el-carousel__indicators {
  display: none;
}
.newsMain .title {
  position: absolute;
  bottom: 0;
  background: rgba(119, 136, 153, 0.5);
}
.newsMain .title p {
  height: 59px;
  line-height: 60px;
  font-size: 25px;
  padding: 0 10px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.newsMain .link:hover {
  cursor: pointer;
}
.newsMain .link .title:hover p {
  color: #1e90ff;
}
</style>