mirror of
https://github.com/LiteyukiStudio/LiteyukiBot.git
synced 2024-11-11 12:17:24 +08:00
38 lines
725 B
Vue
38 lines
725 B
Vue
|
<script setup lang="ts">
|
||
|
|
import {ref} from 'vue'
|
||
|
|
import ItemCard from './ItemCard.vue'
|
||
|
|
|
||
|
|
// 从public/assets/resources.json加载插件
|
||
|
|
let items = ref([])
|
||
|
|
fetch('/assets/resources.json')
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
items.value = data
|
||
|
|
})
|
||
|
|
.catch(error => console.error(error))
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<h1>主题/资源商店</h1>
|
||
|
|
<div class="market">
|
||
|
|
<!-- 布局商品-->
|
||
|
|
<ItemCard v-for="item in items" :key="item.id" :item="item" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
h1 {
|
||
|
|
color: #00a6ff;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.market {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
</style>
|