xiadongliang/SortMeow
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fronted

Browse Source
This commit is contained in:
夏东亮
2026-07-14 18:01:46 +08:00
parent 35aa9d2d13
commit 9ba28f2f7c
5 changed files with 91 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/History.tsx
+53 -72
View File
@@ -1,6 +1,45 @@
import { useState, useEffect } from 'preact/hooks'
import Pagination from './Pagination'
const historyList = [
{
id: 1,
breeds: '英短&1212',
desc: 'The Maine Coon is a large, friendly cat breed known for its tufted ears.',
img: '../../',
date: 'Jan 15, 2024',
},
{
id: 2,
breeds: '英短&fdfd',
desc: 'The Maine Coon is a large, friendly cat breed known for its tufted ears.',
img: '../../',
date: 'Jan 15, 2024',
},
{
id: 3,
breeds: '英短&11111',
desc: 'The Maine Coon is a large, friendly cat breed known for its tufted ears.',
img: '../../',
date: 'Jan 15, 2024',
},
{
id: 4,
breeds: '英短&4545',
desc: 'The Maine Coon is a large, friendly cat breed known for its tufted ears.',
img: '../../',
date: 'Jan 15, 2024',
},
{
id: 5,
breeds: '英短&fff',
desc: 'The Maine Coon is a large, friendly cat breed known for its tufted ears.',
img: '../../',
date: 'Jan 15, 2024',
},
]
const History = () => {
const [page, setPage] = useState<number>(1)
const [total, setTotal] = useState<number>(50)
@@ -19,80 +58,22 @@ const History = () => {
return (
<div class="app-history">
<div class="history-card">
<div class="card-left">
<img src="../assets/images/0012.jpg" />
</div>
<div class="card-right">
<div class="right-top">
<h3>Maine Coon</h3>
<span>Jan 15, 2024</span>
{historyList.map((item) =>
<div key={item.id} class="history-card">
<div class="card-left">
<img src="../assets/images/0012.jpg" />
</div>
<div class="right-overview">
The Maine Coon is a large, friendly cat breed known for its tufted ears.
<div class="card-right">
<div class="right-top">
<h3>{item.breeds}</h3>
<span>{item.date}</span>
</div>
<div class="right-overview">
{item.desc}
</div>
</div>
</div>
</div>
<div class="history-card">
<div class="card-left">
<img src="../assets/images/0012.jpg" />
</div>
<div class="card-right">
<div class="right-top">
<h3>Maine Coon</h3>
<span>Jan 15, 2024</span>
</div>
<div class="right-overview">
The Maine Coon is a large, friendly cat breed known for its tufted ears.
</div>
</div>
</div>
<div class="history-card">
<div class="card-left">
<img src="../assets/images/0012.jpg" />
</div>
<div class="card-right">
<div class="right-top">
<h3>Maine Coon</h3>
<span>Jan 15, 2024</span>
</div>
<div class="right-overview">
The Maine Coon is a large, friendly cat breed known for its tufted ears.
</div>
</div>
</div>
<div class="history-card">
<div class="card-left">
<img src="../assets/images/0012.jpg" />
</div>
<div class="card-right">
<div class="right-top">
<h3>Maine Coon</h3>
<span>Jan 15, 2024</span>
</div>
<div class="right-overview">
The Maine Coon is a large, friendly cat breed known for its tufted ears.
</div>
</div>
</div>
<div class="history-card">
<div class="card-left">
<img src="../assets/images/0012.jpg" />
</div>
<div class="card-right">
<div class="right-top">
<h3>Maine Coon</h3>
<span>Jan 15, 2024</span>
</div>
<div class="right-overview">
The Maine Coon is a large, friendly cat breed known for its tufted ears.
</div>
</div>
</div>
</div>)
}
<div class="history-pagination">
<Pagination page={page} pagesize={5} total={total} onChange={handlePageChange} />
frontend/src/components/Pagination.tsx
+2 -14
View File
@@ -182,21 +182,9 @@ const Pagination = ({
return (
<div className="div-pagination">
<div className="div-pagination-core unselect">
<span
className="pagination-icon"
onClick={() => handleChangeNum('pre')}
>
{/* <img src="../static/images/page_left.svg" alt="" /> */}
◀
</span>
<span className="pagination-icon" onClick={() => handleChangeNum('pre')}>◀</span>
{seqNums.length < 10 ? calPaginationDom() : calPaginationDomEtc()}
<span
className="pagination-icon"
onClick={() => handleChangeNum('next')}
>
{/* <img src="../static/images/page_right.svg" alt="" /> */}
▶
</span>
<span className="pagination-icon" onClick={() => handleChangeNum('next')}>▶</span>
<span className="pagination-word" style={{ marginLeft: 16 }}>
前往
</span>