fronted

frontend/src/components/History.tsx

@@ -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">
+            {historyList.map((item) => 
+                <div key={item.id} 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>
+                            <h3>{item.breeds}</h3>
-                        <span>Jan 15, 2024</span>
+                            <span>{item.date}</span>
                         </div>
                         <div class="right-overview">
-                        The Maine Coon is a large, friendly cat breed known for its tufted ears.
+                            {item.desc}
-                    </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

@@ -182,21 +182,9 @@ const Pagination = ({
     return (
         <div className="div-pagination">
             <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()}
-                <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>

frontend/src/styles/base.sass

@@ -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

@@ -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

@@ -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
+            width: 0.625rem
-            height: 10px
+            height: 0.625rem
 
         span
-            height: 30px
+            height: 1.875rem
-            line-height: 30px
+            line-height: 1.875rem
-            font-size: 14px
+            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
+            min-width: 1.25rem
-            height: 30px
+            height: 1.875rem
             color: #202020
-            font-size: 12px
+            font-size: 0.8rem
             font-weight: 800
             text-align: center
-            border-radius: 6px
+            border-radius: 0.375rem
-            padding: 0 4px
+            padding: 0 0.25rem
             cursor: pointer
 
         .pagination-num-selected
-            color: #c53048
+            color: var(--primary)
             font-weight: 800
 
         .pagination-etc
-            width: 30px
+            width: 1.875rem
-            height: 30px
+            height: 1.875rem
             color: #333333
             font-weight: 800
             text-align: center
 
         .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
-            width: 20px
+            width: 1.25rem
-            height: 20px
+            height: 1.25rem
             color: #292929
-            // background-color: $transcript-bg
+            font-size: 0.75rem
-            font-size: 12px
             text-align: center
             border: 1px solid #DDDFE6
-            border-radius: 4px
+            border-radius: 0.25rem
-            margin-top: 2px
 
         input:focus
             outline: none