循环遍历的盒子添加不同的背景图片

最新推荐文章于 2024-07-18 20:18:47 发布

爱吃羊的狗

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量180

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/VIVI_CSDN01/article/details/129798078

版权

循环遍历的盒子添加不同的背景图片

<div
            class="num"
            :class="`num ${item.class}`"
            v-for="(item, index) in numList"
            :key="index"
          >
</div>

numList: [
        { name: "1", num: "05", class: "jiejing" },
        { name: "2", num: "02", class: "daiodu" },
        { name: "3", num: "03", class: "run" },
        { name: "4", num: "0", class: "done" },
        { name: "5", num: "06", class: "jiejingtask" },
        { name: "6", num: "02", class: "yingjitask" },
        { name: "7", num: "02", class: "yiliaotask" },
        { name: "8", num: "234", class: "flyhour" },
        { name: "9", num: "123", class: "flyNum" },
      ],

.num {
  width: 147px;
  //   width: 173px;
  height: 98px;
  margin-right: 14px;
  padding: 10px;
  &.jiejing {
    background: url("../../assets/image/xx.png");
    background-size: 100% 100%;
  }
  &.daiodu {
    background: url("../../assets/image/xx.png");
    background-size: 100% 100%;
  }
  &.run {
    background: url("../../assets/image/xx-1.png");
    background-size: 100% 100%;
  }
  &.done {
    background: url("../../assets/image/xx-1.png");
    background-size: 100% 100%;
  }
  &.jiejingtask {
    background: url("../../assets/image/xx.png");
    background-size: 100% 100%;
  }
  &.yingjitask {
    background: url("../../assets/image/xx.png");
    background-size: 100% 100%;
  }
  &.yiliaotask {
    background: url("../../assets/image/xx.png");
    background-size: 100% 100%;
  }
  &.flyhour {
    background: url("../../assets/image/xx.png");
    background-size: 100% 100%;
  }
  &.flyNum {
    background: url("../../assets/image/xx.png");
    background-size: 100% 100%;
  }
}