|
|
|
@ -16,9 +16,17 @@ function go(p: number) { |
|
|
|
|
|
|
|
<template> |
|
|
|
<nav v-if="totalPages > 1" class="pagination"> |
|
|
|
<button class="page-btn" :disabled="page <= 1" @click="go(page - 1)">上一页</button> |
|
|
|
<button class="page-btn" :disabled="page <= 1" title="上一页" aria-label="上一页" @click="go(page - 1)"> |
|
|
|
<svg class="page-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
|
|
|
<polyline points="15 18 9 12 15 6" /> |
|
|
|
</svg> |
|
|
|
</button> |
|
|
|
<span class="page-info">{{ page }} / {{ totalPages }}</span> |
|
|
|
<button class="page-btn" :disabled="page >= totalPages" @click="go(page + 1)">下一页</button> |
|
|
|
<button class="page-btn" :disabled="page >= totalPages" title="下一页" aria-label="下一页" @click="go(page + 1)"> |
|
|
|
<svg class="page-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
|
|
|
<polyline points="9 18 15 12 9 6" /> |
|
|
|
</svg> |
|
|
|
</button> |
|
|
|
</nav> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -32,7 +40,10 @@ function go(p: number) { |
|
|
|
} |
|
|
|
|
|
|
|
.page-btn { |
|
|
|
padding: 6px 14px; |
|
|
|
display: inline-flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 6px 10px; |
|
|
|
border: 1px solid var(--ac-input-border); |
|
|
|
border-radius: var(--song-radius-l); |
|
|
|
background: var(--ac-bg-card); |
|
|
|
@ -42,6 +53,12 @@ function go(p: number) { |
|
|
|
transition: border-color var(--song-dur-1) var(--song-ease), color var(--song-dur-1) var(--song-ease); |
|
|
|
} |
|
|
|
|
|
|
|
.page-icon { |
|
|
|
display: block; |
|
|
|
width: 16px; |
|
|
|
height: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.page-btn:hover:not(:disabled) { |
|
|
|
color: var(--ac-primary-ink); |
|
|
|
border-color: var(--ac-primary); |
|
|
|
|