|
@@ -1,8 +1,13 @@
|
|
|
<template>
|
|
|
<ul class="ant-list">
|
|
|
- <li v-for="item in list.slice((page - 1) * SIZE, page * SIZE)" :key="item.id" class="ant-item" @click="
|
|
|
- $router.push({ name: 'antiquityDetail', params: { id: item.id } })
|
|
|
- ">
|
|
|
+ <li
|
|
|
+ v-for="item in list.slice((page - 1) * SIZE, page * SIZE)"
|
|
|
+ :key="item.id"
|
|
|
+ class="ant-item"
|
|
|
+ @click="
|
|
|
+ $router.push({ name: 'antiquityDetail', params: { id: item.id } })
|
|
|
+ "
|
|
|
+ >
|
|
|
<div class="ant-item-wrap">
|
|
|
<ElImage fit="cover" :src="getEnvImagePath(item.minImg)" />
|
|
|
</div>
|
|
@@ -12,35 +17,41 @@
|
|
|
</ul>
|
|
|
|
|
|
<div class="ant-pagination">
|
|
|
- <ElPagination background :total="list.length" v-model:current-page="page" :page-size="SIZE" layout="pager"
|
|
|
- @change="handlePage" />
|
|
|
+ <ElPagination
|
|
|
+ background
|
|
|
+ :total="list.length"
|
|
|
+ v-model:current-page="page"
|
|
|
+ :page-size="SIZE"
|
|
|
+ layout="pager"
|
|
|
+ @change="handlePage"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, onMounted } from "vue"
|
|
|
-import { getEnvImagePath } from "@lbc/base"
|
|
|
-import { usePaginationStore } from "@/stores/counter"
|
|
|
+import { ref, onMounted } from "vue";
|
|
|
+import { getEnvImagePath } from "@lbc/base";
|
|
|
+import { usePaginationStore } from "@/stores/counter";
|
|
|
|
|
|
defineProps({
|
|
|
list: {
|
|
|
type: Array,
|
|
|
default: [],
|
|
|
},
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
-const SIZE = 8
|
|
|
-const paginationStore = usePaginationStore()
|
|
|
-const page = ref(paginationStore.page)
|
|
|
+const SIZE = 8;
|
|
|
+const paginationStore = usePaginationStore();
|
|
|
+const page = ref(paginationStore.page);
|
|
|
|
|
|
const handlePage = (p) => {
|
|
|
- page.value = p
|
|
|
- paginationStore.setPage(p)
|
|
|
-}
|
|
|
+ page.value = p;
|
|
|
+ paginationStore.setPage(p);
|
|
|
+};
|
|
|
|
|
|
onMounted(() => {
|
|
|
- page.value = paginationStore.page
|
|
|
-})
|
|
|
+ page.value = paginationStore.page;
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -49,6 +60,7 @@ onMounted(() => {
|
|
|
.ant-list {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
+ grid-template-rows: repeat(2, 1fr);
|
|
|
gap: utils.vh-calc(30);
|
|
|
margin: 0 utils.vh-calc(-10);
|
|
|
width: calc(100% + utils.vh-calc(20));
|