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