el-carousel一屏放多个盒子和修改图标
一排3个
<el-carousel
:loop="false"
:interval="3000"
arrow="never"
indicator-position="outside"
ref="newCarousel"
>
<el-carousel-item v-for="item in newsArr" :key="item.index">
<div class="newsList">
<div
class="news_body"
v-for="el in item"
:key="el.id"
>
<p class="date">
{{ `${el.time.split("-")[1]}.${el.time.split("-")[2]}` }}
</p>
<p class="year">
{{ el.time.split("-")[0].split(":")[1] }}
</p>
<div class="imgBox">
<img
:src="el.content[0].img"
alt=""
width="100%"
height="100%"
/>
</div>
<h3>{{ el.title }}</h3>
<p class="text">{{ el.title }}</p>
</div>
</div>
</el-carousel-item>
<div class="carouselArrow">
<div class="prev" @click="prev('newCarousel')">
<div class="dark"></div>
<div class="light"></div>
</div>
<div class="prev" @click="next('newCarousel')">
<div class="dark"></div>
<div class="light"></div>
</div>
</div>
</el-carousel>
数据 new.js
const newsData = [
{
id: "n001",
type: "公司新闻",
title:
"您的文本,请定制内容!",
subTitle:"阅读次数:899次",
time: "发布时间:2020-03-20",
content: [
{
text: "123",
img: "/imgs/n001.jpg",
title: "123",
},
{
text: "123",
img: "/imgs/n002.jpg",
title: "123",
},
],
},
{
id: "n002",
type: "您的文本,请定制内容!",
title: "您的文本,请定制内容!",
subTitle:
"阅读次数:899次",
time: "发布时间:2020-03-20",
content: [
{
text: "456",
img: "/imgs/n015.jpg",
title: "456",
},
],
},
{
id: "n003",
type: "您的文本,请定制内容!",
title: "您的文本,请定制内容!",
subTitle:
"阅读次数:899次",
time: "发布时间:2020-03-20",
content: [
{
text: "您的文本,请定制内容!",
img: "",
title: "",
},
{
text: "您的文本,请定制内容!?",
img: "",
title: "",
},
{
text: "您的文本,请定制内容!",
img: "/imgs/n003.jpg",
title: "您的文本,请定制内容!",
},
{
text: "您的文本,请定制内容!",
img: "",
title: "",
},
{
text: "您的文本,请定制内容!",
img: "/imgs/n004.jpg",
title: "您的文本,请定制内容!",
},
{
text: "",
img: "/imgs/n005.jpg",
title: "您的文本,请定制内容!",
},
{
text: "",
img: "/imgs/n006.jpg",
title: "您的文本,请定制内容!",
},
{
text: "",
img: "/imgs/n007.jpg",
title: "您的文本,请定制内容!",
},
{
text: "您的文本,请定制内容!",
img: "",
title: "",
},
{
text: "",
img: "/imgs/n008.jpg",
title: "您的文本,请定制内容!",
},
{
text: "您的文本,请定制内容!",
img: "/imgs/n009.jpg",
title: "您的文本,请定制内容!",
},
{
text: "您的文本,请定制内容!",
img: "/imgs/n010.jpg",
title: "您的文本,请定制内容!",
},
{
text: "您的文本,请定制内容!。",
img: "",
title: "",
},
{
text: "您的文本,请定制内容!",
img: "",
title: "",
},
{
text: "您的文本,请定制内容!",
img: "",
title: "",
},
],
},
]
import newsData from "../static/news.js";
newsArr: [],
created() {
this.goNewsRound();
},
方法
// 走马灯数据处理
goNewsRound() {
this.newsArr = newsData.sort((a, b) => {
return a.time > b.time ? -1 : 1;
});
this.newsArr = this.common(this.newsArr, 3);
},
common(arr, num) {
let newDataList = [];
let current = 0;
if (arr && arr.length > 0) {
for (let i = 0; i < arr.length; i++) {
if(i !=0 && i % num == 0) {
current ++;
}
if (!newDataList[current]) {
newDataList.push([arr[i]]);
} else {
newDataList[current].push(arr[i]);
}
}
}
return [...newDataList];
},
// 上一页
prev(dom) {
this.$refs[dom].prev();
},
// 下一页
next(dom) {
this.$refs[dom].next();
},
两行两列(注意:需要两行两列时需要盒子定宽,flex布局可换行,处理数据时换成4条数据放一个数组)
<el-carousel
:loop="false"
:interval="3000"
arrow="never"
indicator-position="outside"
ref="proCarousel"
>
<el-carousel-item v-for="item in product" :key="item.index">
<div class="detailList">
<div v-for="el in item" :key="el.id">
<div class="detailItem">
<div class="detailImg first"></div>
<div class="detailText">
<div class="textTitle">{{ el.fath }}</div>
<div class="detailInfo">
{{ el.fath }}
</div>
<div class="detailInfo more" >
MORE >
</div>
</div>
</div>
</div>
</div>
</el-carousel-item>
<div class="carouselArrow">
<div class="prev" @click="prev('proCarousel')">
<div class="dark"></div>
<div class="light"></div>
</div>
<div class="prev" @click="next('proCarousel')">
<div class="dark"></div>
<div class="light"></div>
</div>
</div>
</el-carousel>
样式
.detailList {
width: 100%;
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.detailItem {
// box-sizing: border-box;
cursor: pointer;
display: flex;
// width: 48%;
width: 585px;
height: 192px;
margin-bottom: 40px;
// margin-bottom: 30px;
border: 3px solid #fff;
&:hover {
// box-sizing: border-box;
border: 3px solid #00468c;
.detailText {
.textTitle {
color: #fff;
}
.detailInfo {
color: #fff;
}
.more {
color: #fff;
}
background-color: #00468c;
}
}
.detailImg {
width: 192px;
// width: 295px;
// height: 220px;
height: 192px;
&.first {
background: url("../assets/imgs/bd.png");
background-size: 100% 100%;
}
&.second {
background: url("../assets/imgs/heliportBeacon.png") no-repeat;
background-size: 100% 100%;
}
&.thrid {
background: url("../../public/imgs/p038-02.jpg") no-repeat;
background-size: 100% 100%;
}
&.fourth {
background: url("../assets/imgs/zsjqjxlxt.jpg") no-repeat;
background-size: 100% 100%;
}
}
.detailText {
box-sizing: border-box;
width: calc(100% - 192px);
height: 192px;
padding-left: 30px;
padding-right: 38px;
.textTitle {
font-size: 24px;
margin-top: 28px;
color: #1b3646;
font-family: Medium;
}
.detailInfo {
font-size: 16px;
margin: 20px 0px 30px 0px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: #646a73;
font-family: Normal;
text-align: justify;
}
.more {
font-size: 18px;
color: #003f85;
font-family: Medium;
}
}
}
}
import proData from "../static/product";
created() {
this.goProductRound();
goProductRound() {
this.product = this.common(proData,4)
},
// 上一页
prev(dom) {
this.$refs[dom].prev();
},
// 下一页
next(dom) {
this.$refs[dom].next();
},
const proData = [
{
id: 'p001',
order:1,
dept: '您的文本,请定制内容!',
fath:'您的文本,请定制内容!',
img:'../assets/imgs/ty1.png',
title:'您的文本,请定制内容!',
msg: "",
class:"day",
content:[
{
xbt:'',
xnr:'您的文本,请定制内容!',
imgArr:[
{
imgOne:'/imgs/p001-01.jpg',
style:'width:53%;',
type:'middle',
},
{
imgOne:'/imgs/p001-02.jpg',
style:'width:46%',
type:'middle'
},
{
imgOne:'/imgs/p001-03.jpg',
style:'width:100%;margin-top:2%',
type:'big'
}
]
}
]
},
{
id: 'p002',
order:2,
dept: '您的文本,请定制内容!',
fath:'航空应急救援装备',
img:'../assets/imgs/hkyjjy.jpg',
title:'您的文本,请定制内容!',
msg: "",
class:"managementSystem",
content:[
{
xbt:'',
xnr:'您的文本,请定制内容!',
imgArr:[
{
imgOne:'/imgs/p002-01.jpg',
style:'width:80%;margin:0 auto 2%',
type:'big'
},
{
imgOne:'/imgs/p002-02.jpg',
style:'width:49.6%;',
type:'middle',
},
{
imgOne:'/imgs/p002-03.jpg',
style:'width:49.6%',
type:'middle'
}
]
}
]
},
{
id: 'p003',
order:3,
dept: '您的文本,请定制内容!',
fath:'航空应急救援装备',
img:'../assets/imgs/hkyjjyzb.jpg',
title:"您的文本,请定制内容!",
msg: "",
class:"rescue",
content:[
{
xbt:'',
xnr:'您的文本,请定制内容!。',
imgArr:[
{
imgOne:'/imgs/p003-11.jpg',
style:'width:49.6%',
type:'middle'
},
{
imgOne:'/imgs/p003-22.jpg',
style:'width:49.6%;',
type:'middle',
},
{
imgOne:'/imgs/p003-03.jpg',
style:'width:49.6%',
type:'middle'
},
{
imgOne:'/imgs/p003-44.jpg',
style:'width:49.6%',
type:'middle'
}
]
}
]
},
{
id: 'p004',
order:4,
dept: '您的文本,请定制内容!',
fath:'航空应急救援装备',
img:'../assets/imgs/ty.jpg',
title: "您的文本,请定制内容!",
msg: "",
class:"medical",
content:[
{
xbt:'',
xnr:您的文本,请定制内容!',
imgArr:[
{
imgOne:'/imgs/p004-01.jpg',
style:'width:63.7%',
type:'middle'
},
{
imgOne:'/imgs/p004-02.jpg',
style:'width:35.7%;',
type:'middle',
}
]
}
]
},
]