el-carousel一屏放多个盒子和修改图标

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"><divclass="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',}]}]},
]