为每个图像应用固定的像素单位

<template>
<div class=“tripack”>
<img:style=“‘left':-index*30”v-for=“index in 30”:key=“index”src=“./../assets/images/cardthemes/blue.png”alt=“>
&L/DIV & GT;
</template>

脚本& GT;
导出默认值{
}
& /脚本& GT;

<style lang=“scss”>
TrpACK {
显示:Flex;
IMG{
宽度:80px;
高度:100px;
职位:相对;
}
}
&风格/风格;
< /代码> 



I want something like this:




谢谢你们。

问题是,当我对图像卡应用左位置时,它对所有卡应用相同的左位置,因此没有重叠位置。

所以我有这样的东西:

<template>
  <div class="triPack">
    <img :style="{'left': -index * 30}" v-for="index in 30" :key="index" src="../../assets/images/cardThemes/blue.png" alt="">
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
  .triPack {
    display: flex;
    img {
      width: 80px;
      height: 100px;
      position: relative;
    }
  }
</style>




我想要这样的东西:



谢谢大家。