---
title: 照片类作品示例
author: Plume Theme
createTime: 2024/08/17 14:30:23
permalink: /article/30995vcd/
---

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([])

onMounted(async () => {
  const res = await fetch('https://api.pengzhanbo.cn/wallpaper/bing/list/zh/').then((res) => res.json())
  list.value = res.map(item => ({
    title: item.title,
    image: item.url,
    author: item.copyright.replace('© ', '').split('/')?.[0].trim(),
    description: item.description,
    date: item.ssd.replace(/(\d{4})(\d{2})(\d{2})_(\d{2})(\d{2})/, (_, y, m, d, h, mm) => `${y}/${m}/${d} ${h}:${mm}`),
    href: item.url
  }))
})
</script>

## 单列照片

```md :no-line-numbers
<ImageCard v-for="item in list" :key="item.image" v-bind="item" />
```

<ImageCard v-for="item in list" :key="item.image" v-bind="item" />

## 双列照片

```md :no-line-numbers
<CardGrid cols="2">
  <ImageCard v-for="item in list" :key="item.image" v-bind="item" />
</CardGrid>
```

<CardGrid cols="2">
  <ImageCard v-for="item in list" :key="item.image" v-bind="item" />
</CardGrid>

## 三列照片

```md :no-line-numbers
<CardGrid cols="3">
  <ImageCard v-for="item in list" :key="item.image" v-bind="item" />
</CardGrid>
```

<CardGrid cols="3">
  <ImageCard v-for="item in list" :key="item.image" v-bind="item" />
</CardGrid>

## 不同尺寸设备适配

调整窗口大小以观察效果

```md :no-line-numbers
<CardGrid :cols="{ sm: 2, md: 3, lg: 3 }">
  <ImageCard v-for="item in list" :key="item.image" v-bind="item" />
</CardGrid>
```

<CardGrid :cols="{ sm: 2, md: 3, lg: 3 }">
  <ImageCard v-for="item in list" :key="item.image" v-bind="item" />
</CardGrid>
