动态引入背景图片：background动态传参

最新推荐文章于 2024-02-29 06:24:39 发布

小达不溜儿

最新推荐文章于 2024-02-29 06:24:39 发布

阅读量1.6k

点赞数

分类专栏： Html/Css

本文链接：https://blog.csdn.net/liuhp123/article/details/115317825

版权

Html/Css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<template>
<fin-carousel height="530px" class="carousel" arrow="never">
     <fin-carousel-item
      v-for="(item,index) in templateInfo.templateData.list" :key="index">
      <div :class="['item','banner-bg-'+(index%3+1)]">
        <div class="title">{{title(item.bannerName)}}</div>
        <div class="content">{{content(item.bannerName)}}</div>
      </div>
     </fin-carousel-item>
   </fin-carousel>
</template>
<style lang="less" xcoped>
.banner-bg(@index) {
  background: url(~'./banner-bg@{index}.png') no-repeat;
  background-size: 100% 100%;
}  
</style>