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>
frontend/src/styles/base.sass
+3 -1
View File
@@ -64,6 +64,7 @@ body
display: flex
padding: 0 1.5rem
color: #7D91B2
font-size: 0.9375rem
cursor: pointer
&:hover
@@ -74,8 +75,9 @@ body
height: 2.6rem
margin-left: 1.5rem
color: #FFFFFF
font-size: 0.9375rem
background-color: var(--primary)
border-radius: 0.3rem
border-radius: 0.5rem
cursor: pointer
.app-main
frontend/src/styles/dashboard.sass
+3 -2
View File
@@ -7,7 +7,7 @@
display: flex
flex-direction: column
align-items: center
width: 20%
width: 18%
height: 100%
border-right: 1px solid #9AAAC6
@@ -15,11 +15,12 @@
display: inline-flex
height: 2.5rem
line-height: 2.5rem
font-size: 0.9375rem
color: #8E8E8E
border-bottom: 1px solid #9AAAC6
cursor: pointer
.dashboard-content
width: 80%
width: 82%
height: 100%
// background-color: #555
frontend/src/styles/pagination.sass
+29 -29
View File
@@ -1,29 +1,30 @@
.div-pagination
display: flex
flex-direction: row
justify-content: flex-end
width: 100%
height: 30px
height: 1.875rem
user-select: none
.div-pagination-core
display: flex
flex-direction: row
align-items: center
width: auto
height: 30px
height: 1.875rem
img
width: 10px
height: 10px
width: 0.625rem
height: 0.625rem
span
height: 30px
line-height: 30px
font-size: 14px
height: 1.875rem
line-height: 1.875rem
font-size: 0.875rem
color: #333333
.pagination-icon
height: 100%
margin-left: 10px
margin-left: 0.625rem
font-size: 0.5rem
cursor: pointer
display: flex
flex-direction: row
@@ -31,46 +32,45 @@
align-items: center
.pagination-icon:first-child
margin-right: 10px
margin-right: 0.625rem
.pagination-num
width: auto
min-width: 20px
height: 30px
min-width: 1.25rem
height: 1.875rem
color: #202020
font-size: 12px
font-size: 0.8rem
font-weight: 800
text-align: center
border-radius: 6px
padding: 0 4px
border-radius: 0.375rem
padding: 0 0.25rem
cursor: pointer
.pagination-num-selected
color: #c53048
color: var(--primary)
font-weight: 800
.pagination-etc
width: 30px
height: 30px
width: 1.875rem
height: 1.875rem
color: #333333
font-weight: 800
text-align: center
.pagination-word
font-size: 12px
margin: 0 5px 0 5px
color: #202020
font-size: 0.75rem
font-weight: bold
margin: 0 0.3125rem 0 0.3125rem
color: #333333
input
width: 20px
height: 20px
width: 1.25rem
height: 1.25rem
color: #292929
// background-color: $transcript-bg
font-size: 12px
font-size: 0.75rem
text-align: center
border: 1px solid #DDDFE6
border-radius: 4px
margin-top: 2px
border-radius: 0.25rem
input:focus
outline: none