问题

1. css background属性连写

background：#fff  url('../assets/images/bgc_book.png') no-repeat right top/359px 257px,
background: url('../assets/images/bgc_pc.png') no-repeat 130px 220px/347px 246px;

background: url("../../assets/images/logo.png") no-repeat 0 0/100% 100% ;

依次的顺序为：背景颜色 背景图片 背景图片是否重复 背景图片的位置（位置可用像素及方位名称）/背景图片的宽高，下一个背景图片的属性

 

2. vue 中的轮播图：使用swiper

 npm i  vue-awesome-swiper@2.6.7 --save

swiper.vue组件

<template>
  <div class="swiper3">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item, index) in giftType" :key="index">
        <div class="gift-type" :data-id="item.id">
          <img :src="item.img" alt="">
          <!--<p>{{item.detail1}}</p>-->
          <p class="point-text" style="height: 0.1rem;">{{item.detail2}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: "inSwiper",
    components: {
      swiper,
      swiperSlide
    },
    data() {
      const vm = this;
      return {
        swiperOption: {
          effect: 'coverflow',
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          loop: true,
          autoplay: false,
          coverflowEffect: {
            rotate: 50,
            stretch: 50,
            depth: 150,
            modifier: 1,
            slideShadows : true
          },
          on: {
            //关键在这儿，通过点击事件拿到对应的元素，从而确定具体index
            tap:function (e) {
              console.log(e,e.target,'click');
              let dom=e.target.parentNode;
              vm.handle(dom.dataset.id);

            }
          }
        },
        giftType:[{
          img: 'https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg',
          detail1:'*10EXP',
          detail2:'  ',
          id:1
        },
          {
            img: 'https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg',
            detail1:'ا1',
            detail2:' ',
            id:2
          },
          {
            img: 'https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg',
            detail1:'*10EXP',
            detail2:' ',
            id:3
          },
          {
            img: 'https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg',
            detail1:'2',
            detail2:'  ',
            id:4
          },
          {
            img: 'https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg',
            detail1:'*10EXP',
            detail2:' ',
            id:5
          },
          {
            img: 'https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg',
            detail1:'11',
            detail2:' ',
            id:6
          },
        ],
      }
    },
    methods:{
      handle(id){
        console.log(id,'点击了');
        //这里写点击的逻辑
      }
    },

  }
</script>

<style scoped lang="scss">

  .swiper-container{
    width:100%;
    margin:0 auto;
    position: relative;
    background-image:linear-gradient(to right, #fef9df, #fae49d,#fef9df);
    height: 120px;
  }
  .swiper-slide{
    width: 315px;
    height: 114px;
    border-radius: 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
    overflow: hidden;
    &:nth-child(3n+1) {

    }

    &:nth-child(3n+2) {

    }
    .gift-type{
      width: 100%;
      height: 100%;
      font-size:0.12rem;
      font-weight: bold;
      color: #366F5E;
      line-height: 0.18rem;
      /* background: #000;*/
      .point-text{
        color:red;
      }
      img{
        width: 100%;
        height: 180px;
      }
      p{
        width: 100%;
        text-align: center;
      }

    }

  }
  .slider-item.slider-active {
    transform:scale(1.0);
    z-index: 999;
  }
  .slider-item.slider-active-copy {
    transform:scale(1.0);
    z-index: 999;
  }
</style>

swiper说明文档：https://www.swiper.com.cn/api/effects/196.html

 

3. vue子组件定义属性 

props

props: []

或者

props: {
  options: {
    type: Object,
    default: _=>{}
  },
  link: String
}