fronted
This commit is contained in:
@@ -1,6 +1,45 @@
|
|||||||
import { useState, useEffect } from 'preact/hooks'
|
import { useState, useEffect } from 'preact/hooks'
|
||||||
import Pagination from './Pagination'
|
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 History = () => {
|
||||||
const [page, setPage] = useState<number>(1)
|
const [page, setPage] = useState<number>(1)
|
||||||
const [total, setTotal] = useState<number>(50)
|
const [total, setTotal] = useState<number>(50)
|
||||||
@@ -19,80 +58,22 @@ const History = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="app-history">
|
<div class="app-history">
|
||||||
<div class="history-card">
|
{historyList.map((item) =>
|
||||||
<div class="card-left">
|
<div key={item.id} class="history-card">
|
||||||
<img src="../assets/images/0012.jpg" />
|
<div class="card-left">
|
||||||
</div>
|
<img src="../assets/images/0012.jpg" />
|
||||||
<div class="card-right">
|
|
||||||
<div class="right-top">
|
|
||||||
<h3>Maine Coon</h3>
|
|
||||||
<span>Jan 15, 2024</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="right-overview">
|
<div class="card-right">
|
||||||
The Maine Coon is a large, friendly cat breed known for its tufted ears.
|
<div class="right-top">
|
||||||
|
<h3>{item.breeds}</h3>
|
||||||
|
<span>{item.date}</span>
|
||||||
|
</div>
|
||||||
|
<div class="right-overview">
|
||||||
|
{item.desc}
|
||||||
|
</div>
|
||||||
</div>
|
</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 class="history-pagination">
|
<div class="history-pagination">
|
||||||
<Pagination page={page} pagesize={5} total={total} onChange={handlePageChange} />
|
<Pagination page={page} pagesize={5} total={total} onChange={handlePageChange} />
|
||||||
|
|||||||
@@ -182,21 +182,9 @@ const Pagination = ({
|
|||||||
return (
|
return (
|
||||||
<div className="div-pagination">
|
<div className="div-pagination">
|
||||||
<div className="div-pagination-core unselect">
|
<div className="div-pagination-core unselect">
|
||||||
<span
|
<span className="pagination-icon" onClick={() => handleChangeNum('pre')}>◀</span>
|
||||||
className="pagination-icon"
|
|
||||||
onClick={() => handleChangeNum('pre')}
|
|
||||||
>
|
|
||||||
{/* <img src="../static/images/page_left.svg" alt="" /> */}
|
|
||||||
◀
|
|
||||||
</span>
|
|
||||||
{seqNums.length < 10 ? calPaginationDom() : calPaginationDomEtc()}
|
{seqNums.length < 10 ? calPaginationDom() : calPaginationDomEtc()}
|
||||||
<span
|
<span className="pagination-icon" onClick={() => handleChangeNum('next')}>▶</span>
|
||||||
className="pagination-icon"
|
|
||||||
onClick={() => handleChangeNum('next')}
|
|
||||||
>
|
|
||||||
{/* <img src="../static/images/page_right.svg" alt="" /> */}
|
|
||||||
▶
|
|
||||||
</span>
|
|
||||||
<span className="pagination-word" style={{ marginLeft: 16 }}>
|
<span className="pagination-word" style={{ marginLeft: 16 }}>
|
||||||
前往
|
前往
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -64,6 +64,7 @@ body
|
|||||||
display: flex
|
display: flex
|
||||||
padding: 0 1.5rem
|
padding: 0 1.5rem
|
||||||
color: #7D91B2
|
color: #7D91B2
|
||||||
|
font-size: 0.9375rem
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
@@ -74,8 +75,9 @@ body
|
|||||||
height: 2.6rem
|
height: 2.6rem
|
||||||
margin-left: 1.5rem
|
margin-left: 1.5rem
|
||||||
color: #FFFFFF
|
color: #FFFFFF
|
||||||
|
font-size: 0.9375rem
|
||||||
background-color: var(--primary)
|
background-color: var(--primary)
|
||||||
border-radius: 0.3rem
|
border-radius: 0.5rem
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
.app-main
|
.app-main
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
align-items: center
|
align-items: center
|
||||||
width: 20%
|
width: 18%
|
||||||
height: 100%
|
height: 100%
|
||||||
border-right: 1px solid #9AAAC6
|
border-right: 1px solid #9AAAC6
|
||||||
|
|
||||||
@@ -15,11 +15,12 @@
|
|||||||
display: inline-flex
|
display: inline-flex
|
||||||
height: 2.5rem
|
height: 2.5rem
|
||||||
line-height: 2.5rem
|
line-height: 2.5rem
|
||||||
|
font-size: 0.9375rem
|
||||||
color: #8E8E8E
|
color: #8E8E8E
|
||||||
border-bottom: 1px solid #9AAAC6
|
border-bottom: 1px solid #9AAAC6
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
.dashboard-content
|
.dashboard-content
|
||||||
width: 80%
|
width: 82%
|
||||||
height: 100%
|
height: 100%
|
||||||
// background-color: #555
|
// background-color: #555
|
||||||
@@ -1,29 +1,30 @@
|
|||||||
.div-pagination
|
.div-pagination
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: row
|
|
||||||
justify-content: flex-end
|
justify-content: flex-end
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 30px
|
height: 1.875rem
|
||||||
|
user-select: none
|
||||||
|
|
||||||
.div-pagination-core
|
.div-pagination-core
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: row
|
align-items: center
|
||||||
width: auto
|
width: auto
|
||||||
height: 30px
|
height: 1.875rem
|
||||||
|
|
||||||
img
|
img
|
||||||
width: 10px
|
width: 0.625rem
|
||||||
height: 10px
|
height: 0.625rem
|
||||||
|
|
||||||
span
|
span
|
||||||
height: 30px
|
height: 1.875rem
|
||||||
line-height: 30px
|
line-height: 1.875rem
|
||||||
font-size: 14px
|
font-size: 0.875rem
|
||||||
color: #333333
|
color: #333333
|
||||||
|
|
||||||
.pagination-icon
|
.pagination-icon
|
||||||
height: 100%
|
height: 100%
|
||||||
margin-left: 10px
|
margin-left: 0.625rem
|
||||||
|
font-size: 0.5rem
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: row
|
flex-direction: row
|
||||||
@@ -31,46 +32,45 @@
|
|||||||
align-items: center
|
align-items: center
|
||||||
|
|
||||||
.pagination-icon:first-child
|
.pagination-icon:first-child
|
||||||
margin-right: 10px
|
margin-right: 0.625rem
|
||||||
|
|
||||||
.pagination-num
|
.pagination-num
|
||||||
width: auto
|
width: auto
|
||||||
min-width: 20px
|
min-width: 1.25rem
|
||||||
height: 30px
|
height: 1.875rem
|
||||||
color: #202020
|
color: #202020
|
||||||
font-size: 12px
|
font-size: 0.8rem
|
||||||
font-weight: 800
|
font-weight: 800
|
||||||
text-align: center
|
text-align: center
|
||||||
border-radius: 6px
|
border-radius: 0.375rem
|
||||||
padding: 0 4px
|
padding: 0 0.25rem
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
.pagination-num-selected
|
.pagination-num-selected
|
||||||
color: #c53048
|
color: var(--primary)
|
||||||
font-weight: 800
|
font-weight: 800
|
||||||
|
|
||||||
.pagination-etc
|
.pagination-etc
|
||||||
width: 30px
|
width: 1.875rem
|
||||||
height: 30px
|
height: 1.875rem
|
||||||
color: #333333
|
color: #333333
|
||||||
font-weight: 800
|
font-weight: 800
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
.pagination-word
|
.pagination-word
|
||||||
font-size: 12px
|
font-size: 0.75rem
|
||||||
margin: 0 5px 0 5px
|
font-weight: bold
|
||||||
color: #202020
|
margin: 0 0.3125rem 0 0.3125rem
|
||||||
|
color: #333333
|
||||||
|
|
||||||
input
|
input
|
||||||
width: 20px
|
width: 1.25rem
|
||||||
height: 20px
|
height: 1.25rem
|
||||||
color: #292929
|
color: #292929
|
||||||
// background-color: $transcript-bg
|
font-size: 0.75rem
|
||||||
font-size: 12px
|
|
||||||
text-align: center
|
text-align: center
|
||||||
border: 1px solid #DDDFE6
|
border: 1px solid #DDDFE6
|
||||||
border-radius: 4px
|
border-radius: 0.25rem
|
||||||
margin-top: 2px
|
|
||||||
|
|
||||||
input:focus
|
input:focus
|
||||||
outline: none
|
outline: none
|
||||||
|
|||||||
Reference in New Issue
Block a user