问题
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
}