123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- <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>
|