<template>
  <div class="business">


    
    <div class="swiper-container" id="swiper2">
      <div class="swiper-wrapper">



        <div class="swiper-slide swiper-no-swiping sw" v-for="(item,index) in service" :key="index">
          <div>
            <img :src="item.serviceImageUrl"  />
            <div>
              <h4>{{item.labelName}}</h4>
              <p class="text-left">
                
              </p>
            </div>
          </div>
        </div>
      
    

     
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <!-- <div class="contanier st">
      <div class="col-xs-6 col-md-3">
        <img src="../assets/image/home/service_brand.jpg" width="100%" height="100%" alt="..." />
        <div>
          <h4>品牌服务</h4>
          <p class="text-left">
            品牌咨询
            <br />品牌策划
            <br />CIS/VIS
            <br />logo设计
            <br />
          </p>
        </div>
      </div>

      <div class="col-xs-6 col-md-3">
        <img src="../assets/image/home/service_plan.jpg" width="100%" height="100%" alt="..." />
        <div class="caption">
          <h4>营销与策划</h4>
          <p class="text-left">
            营销创意
            <br />广告创意
            <br />活动策划与执行
          </p>
        </div>
      </div>
      <div class="col-xs-6 col-md-3">
        <img src="../assets/image/home/service_design.jpg" width="100%" height="100%" alt="..." />
        <div class="caption">
          <h4>创意设计</h4>
          <p class="text-left">
            平面设计
            <br />平面设计
            <small>(海报/展架/画册/包装...)</small>
            <br />数字媒体
            <small>(H5/短视频/小程序...)</small>
            <br />动画制作
            <br />视觉设计
            <small>(app/网站)</small>
            <br />空间设计
            <small>(美陈/展厅/店面/导视)</small>
            <br />视频包装
          </p>
        </div>
      </div>
      <div class="col-xs-6 col-md-3">
        <img src="../assets/image/home/service_make.jpg" width="100%" height="100%" alt="..." />
        <div class="caption">
          <h4>制作与传播</h4>
          <p class="text-left">
            物料制作
            <br />传统媒介
            <br />网络制作
          </p>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
// @ is an alias to /src
//  import Swiper from "swiper";
// import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import request from '../../utils/request'
import apis from '../config/api';

export default {
  name: "business",
  data () {
    return {
      show: true,
      service:[]
    };
  },
  components: {},

  mounted () {
    // new Swiper("#swiper2", {
    //   // loop: true,
    //   slidesPerView: 4,
    //   spaceBetween: 60,
    //   // slidesOffsetBefore: 100,
    //   // slidesOffsetAfter: 100,
    //   navigation: {
    //     nextEl: ".swiper-button-next",
    //     prevEl: ".swiper-button-prev"
    //   }
    // });
  },
  created () {

   
   
    
//http://localhost:8080/pc/service/list
    request({
      ...apis.service.list,
      
      
    }).then(con => {
      // console.log(con,"124")
       this.service = con;
      // window.console.log(this.service, "543");
    })

   
  }

  

 
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.st {
  padding-left: 10%;
  padding-right: 10%;
  margin: 0;
}

h4 {
  font-size: 24px;
  padding: 10px;
  background-color: red;
  color: #fff;
  margin: 0;
  height: 43px;
}
</style>
