Vue+element 自定义Carousel 走马灯 PC端手机端适配

<template>
 <div id="jump5">
  <div class="box5">
   <div class="section-04-abs">CUSTOMER SAID</div>
   <div class="box5_title">
    <span>客户说</span>
    <div>听听51大师兄的用户如何评价平台</div>
   </div>
   <div class="box5_carousel">
    <el-carousel :interval="4000" type="card" height="500px" width:="100%">
     <el-carousel-item v-for="(item, index) in data" :key="index">
      <div class="item">
       <div class="medium">
        <div class="medium_text" v-html="item.cuscontent"></div>
       </div>
       <div class="item_photo">
        <img :src="item.image" alt="" />
       </div>
       <div class="item_name">{
   
   { item.cusname }}</div>
       <div class="item_text">{
   
   { item.cuscompany }}</div>
       <div class="item_text">{
   
   { item.cusduty }}</div>
      </div>
     </el-carousel-item>
    </el-carousel>
   </div>
  </div>
 </div>
</template>

<script>
export default {
 data() {
  return {
   data: null,
  };
 },
  mounted () {
    window.scrollTo(0,0);
		let url="/api/index/getCustomerSaid";
		this.axios.get(url).then(res=>{
      this.data=res.data.data
      console.log(this.data);
		})
  },
};
</script>
<style scoped>
@media (max-width: 414px) {
  ::v-deep .el-carousel__button{
    height: 4px !important;
    width: 15px !important;
  }
 .medium_text{font-size: 12px !important;}
 ::v-deep .el-carousel__container {
  height: 370px !important;
 }
}
@media (min-width: 1700px) {
 .box5_carousel { width: 28.5rem;}
}
</style>
<style lang="scss" scoped>
@media (max-width: 414px) {
 li.el-carousel__indicator.el-carousel__indicator--horizontal {
  padding: 0 4px !important;
 }
 .item_text {
  font-size: 12px !important;
 }
 .item_name {
  font-size: 16px !important;
 }
 .box5 {
  width: 100% !important;
  padding: 0.5rem !important;
 }
 .box5_carousel {
  width: 100% !important;
  margin-top: 0 !important;
 }
 .section-04-abs {
  font-size: 0.373rem !important;
  margin-bottom: 0.9rem !important;
 }
 .box5_title span {
  font-size: 0.8rem !important;
 }
 .medium {
  padding: 0.3rem !important;
 }
 .el-carousel__item span {
  font-size: 12px !important;
  line-height: 26px !important;
 }
}

#jump4{width: 100%;}
::v-deep .el-carousel__arrow {
 top: 38% !important;
}
::v-deep .el-carousel__button {
 width: 1rem;
 height: 0.2rem;
}
::v-deep .is-active .el-carousel__button {
 background: #6474e5;
}
.medium {
 border-radius: 0.555556rem;
 padding: 0.4rem;
 height: 6rem;
}
.el-carousel__item span {
 font-size: 20px;
 font-weight: 400;
 font-style: italic;
 line-height: 35px;
 text-align: center;
 width: 100%;
}
.medium:nth-child(2n) {
 background-color: #f3f7ff;
}
.medium:nth-child(2n + 1) {
 background: linear-gradient(90deg, #677af5, #3b4ae5);
 color: #fff;
}
* {
 font-family: PingFang SC;
}
.medium_text{
  font-size: 20px;
}
.box5 {
 width: 90%;
 padding: 1rem;
 margin: 0 auto;
 .box5_carousel {
  margin-top: 0.87037rem;
  margin: 0 auto;
  .item {
   text-align: center;
   .item_photo {
     overflow: hidden;
    background-color: #d7dee1;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    margin: 0 auto;
    border: 0.1rem solid white;
    margin-top: -0.8rem;
    img{
      height: 100%;
    }
   }
   .item_name {
    font-size: 18px;
    font-weight: 800;
    color: #6174f3;
    line-height: 45px;
   }
   .item_text {
    font-size: 14px;
    font-weight: 800;
    font-style: italic;
    color: #7b7b7b;
    line-height: 0.47037rem;
   }
  }
 }
 .section-04-abs {
  text-align: center;
  font-size: 40px;
  font-family: Base 05;
  font-weight: 400;
  color: #ebebeb;
  line-height: 44px;
  margin-bottom: 0.75rem;
 }
 .box5_title {
  text-align: center;
  font-size: 48px;
  font-weight: 800;
  color: #474747;
  line-height: 0.666667rem;
  margin-top: -1.5rem;
  div {
   margin-top: 0.1rem;
   margin-bottom: 0.5rem;
   font-size: 16px;
   font-weight: 400;
   color: #2e4062;
   line-height: 0.666667rem;
  }
 }
}
</style>