轮播图带字(vant)

html

<div class="com_swiperImg"> <van-swipe :autoplay="3000"> <van-swipe-item v-for="(item, index) in images" :key="index"> <img class="swiperImg" :src="item.url"> <span class="imgWord"> <span class="imgWordWidth">{{item.name}}</span> </span> </van-swipe-item> </van-swipe> </div>

js

// 轮播图的列表 images: [ { name: '第一张图片', url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3184090183,1766139173&fm=26&gp=0.jpg' }, { name: '第二张图片', url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593342812507&di=a02821f2c081513699dd3d98cfd5f0c5&imgtype=0&src=http://a2.att.hoodong.com/62/35/01300000165476121384354646686.jpg' }, { name: '第三张图片', url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2135990487,1719991511&fm=26&gp=0.jpg' } ]

css

.com_swiperImg { margin-top: 2vw; } .swiperImg { width: 93vw; height: 45vw; border-radius: 3vw; border: 1px solid ghostwhite; } /* 图片的文字 */ .imgWord { position: absolute; bottom: 1.6vw; left: 3.5vw; width: 91vw; height: 10vw; line-height: 10vw; text-align: left; padding-left: 2vw; border-radius: 0 0 3vw 3vw; background: rgba(22, 22, 22, 0.5); color: #feffff; } /* 文字的宽度 */ .imgWordWidth { position: absolute; bottom: 0vw; left: 3vw; width: 75vw; overflow: hidden; text-overflow: clip; white-space: pre; padding: 0 1vw; } /* 轮播图的指示点 */ .com_swiperImg /deep/ .van-swipe__indicators { bottom: 5vw; left: 90%; } /* 轮播图的指示点（大小） */ .com_swiperImg /deep/ .van-swipe__indicator { width: 2vw; height: 2vw; } /* 轮播图的指示点颜色 */ .com_swiperImg /deep/ .van-swipe__indicator--active { background-color: #fdc034; }