<script setup lang="ts">
import {download} from "../../utils/uils";

const DATA = [
    {
        src: 'https://api.ykaaa.cn/static/images/mock-1.jpg',
    },
    {
        src: 'https://api.ykaaa.cn/static/images/mock-2.jpg',
    },
    {
        src: 'https://api.ykaaa.cn/static/images/mock-3.jpg',
    },
    {
        src: 'https://api.ykaaa.cn/static/images/mock-4.jpg',
    },
    {
        src: 'https://api.ykaaa.cn/static/images/mock-5.jpg',
    },
    {
        src: 'https://api.ykaaa.cn/static/images/mock-6.jpg',
    },
    {
        src: 'https://api.ykaaa.cn/static/images/mock-7.jpg',
    },
    {
        src: 'https://api.ykaaa.cn/static/images/mock-8.jpg',
    },
    {
        src: 'https://api.ykaaa.cn/static/images/mock-9.jpg',
    },
];
</script>

<template>
    <view class="grid grid-cols-3 w-full gap-[24rpx] p-[24rpx]">
        <view class="w-full !flex !flex-col items-center gap-[24rpx]" v-for="v in DATA">
            <image class="w-full h-[300rpx] rounded-[24rpx] overflow-hidden" :src="v.src" mode="aspectFill"></image>
            <tui-button width="150rpx" height="60rpx" @click="download([v.src])">下载</tui-button>
        </view>
    </view>
</template>

<style scoped lang="scss">

</style>
