效果图:

图片路径均为假地址,需自行替换,1rem=100px,可自行转换成px
<template>
<div class="exhibitors page-item-blue-bg">
<comItemTitle :titleInfo="titleInfo"> </comItemTitle>
<div class="exhibitors-cont">
<el-carousel
class="exhibitors-swiper"
:interval="2500"
indicator-position="none"
arrow="always"
>
<!-- 循环所有数组的集合 -->
<el-carousel-item
class="exhibitors-item"
v-for="(itmData, idx) in exhibitorsSwiper"
:key="idx"
>
<div class="exhibitors-item-box flex-center-center">
<!-- 循环每个el-carousel-item要展示的数组 -->
<section
class="exhibitors-item-section"
v-for="(item, index) in itmData"
:key="index"
>
<img class="exhibitors-item-img" :src="item.img" alt="" />
<div class="exhibitors-item-text">
<div class="exhibitors-item-title text-overflow-num1">
{
{ item.title }}
</div>
<div class="exhibitors-item-cont text-overflow-num">
{
{ item.cont }}
</div>
</div>
</section>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<script>
import comItemTitle from "@/components/common/com-item-title.vue";
export default {
name: "exhibitors",
components: {
comItemTitle,
},
data() {
return {
titleInfo: { titleCn: "大会展商", titleEn: "Exhibitors" },
exhibitorsData: [
{
img: "https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/digital_system/4ce32a5ee1314238ad535cf5df2b8189.jpg",
title: "展商名称",
cont: "产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介",
},
{
img: "https://tuoluohuodong.oss-cn-shangzhen.aliyuncs.com/digital_system/09367a6ab9ac426da20bea994a9bc948.jpg",

最低0.47元/天 解锁文章
6295

被折叠的 条评论
为什么被折叠?



