<template> <div class="container"> <div class="line" v-for="(items, index) in list" :key="index"> <div class="item" v-for="(item, index) in items" :key="index"><img :src="'https://picsum.photos/200/300?random='+item.id" /></div> </div> </div> </template> <script lang="ts" setup> import { ref } from 'vue'; const list = ref([] as any); for (let i = 0; i <= 5; i++) { const urlList = new Array(); let startId = i * 11; for (let j = 0; j <= 10; j++) { urlList.push({ id: startId + j }); } list.value.push(urlList); } </script> <style lang="scss" scoped> .container { overflow: hidden; } $n: 9; $size: 100vw / $n; .line { display: flex; margin-top: -$size / 6; &:nth-child(even) { transform: translateX(-$size / 2); } } .item { flex-shrink: 0; width: $size; height: $size; clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); img { object-fit: cover; cursor: pointer; transition: all 0.5s; } img:hover{ transform: scale(1.2); } } </style>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。