代码结构优化，使用 SCSS 重写部分样式

kobe-koto · Nov 4, 2023 · 545b0f7 · 545b0f7
1 parent 39e016a
commit 545b0f7
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 101 deletions.
diff --git a/src/components/IsFolder.astro b/src/components/IsFolder.astro
@@ -1,95 +1,88 @@
 ---
+import { Icon } from "astro-icon";
 import LinkContainer from "../components/base/LinkContainer.astro"
 import MorePage from "../components/MorePage.astro"
 ---
 
-    <div class="FolderDesc" id="<!--FolderId-->">
-        <div>
-            <!--constStr@File-->
-        </div>
-        <div style="width: 20%;text-align: right;">
-            <!--constStr@EditTime-->
-        </div>
-        <div style="width: 20%;text-align: right;">
-            <!--constStr@Size-->
-        </div>
+<div class="FolderDesc" id="<!--FolderId-->">
+    <div class="FileName">
+        <!--constStr@File-->
     </div>
-
-
-
-    <!--FolderListStart-->
-    <div id="Folders">
-        <LinkContainer href="<!--FileEncodeReplaceUrl-->/">
-            <div class="ListItems">
-                <div data-FileId="<!--FileId-->">
-                    <!--FileEncodeReplaceName-->
-                </div>
-                <div>
-                    <!--lastModifiedDateTime-->
-                </div>
-                <div>
-                    <!--size-->
-                </div>
-            </div>
-        </LinkContainer>
+    <div style="width: 20%;text-align: right;" class="EditTime">
+        <!--constStr@EditTime-->
     </div>
-    <!--FolderListEnd-->
-
+    <div style="width: 20%;text-align: right;" class="Size">
+        <!--constStr@Size-->
+    </div>
+</div>
 
+<!--FolderListStart-->
+<div id="Folders">
+    <LinkContainer href="<!--FileEncodeReplaceUrl-->/">
+        <div class="ListItems">
+            <div data-FileId="<!--FileId-->">
+                <Icon name="heroicons:folder" />
+                <!--FileEncodeReplaceName-->
+            </div>
+            <div>
+                <!--lastModifiedDateTime-->
+            </div>
+            <div>
+                <!--size-->
+            </div>
+        </div>
+    </LinkContainer>
+</div>
+<!--FolderListEnd-->
 
-    <!--FileListStart-->
-    <div id="Files">
-        <LinkContainer href="<!--FileEncodeReplaceUrl-->?preview">
-            <div class="ListItems">
-                <div data-FileId="<!--FileId-->">
-                    <!--FileEncodeReplaceName-->
-                </div>
-
-                <div>
-                    <!--lastModifiedDateTime-->
-                </div>
-
-                <div>
-                    <!--size-->
-                </div>
-
+<!--FileListStart-->
+<div id="Files">
+    <LinkContainer href="<!--FileEncodeReplaceUrl-->?preview">
+        <div class="ListItems">
+            <div data-FileId="<!--FileId-->">
+                <Icon name="heroicons:document" />
+                <!--FileEncodeReplaceName-->
             </div>
-        </LinkContainer>
-    </div>
-    <!--FileListEnd-->
+            <div>
+                <!--lastModifiedDateTime-->
+            </div>
+            <div>
+                <!--size-->
+            </div>
+        </div>
+    </LinkContainer>
+</div>
+<!--FileListEnd-->
 
-    <MorePage />
+<!--MorePageStart-->
+<MorePage />
+<!--MorePageEnd-->
 
 
 
-<style>
-    .ListItems,
+<style lang="scss">
     .FolderDesc {
+        margin: 0 16px;
+    }
+    .FolderDesc,
+    .ListItems {
         display: flex;
         justify-content: space-between;
         align-items: center;
-    }
-
-    .FolderDesc {
-        margin: 0 16px;
-    }
-
-    .ListItems div:nth-child(1),
-    .FolderDesc div:nth-child(1) {
-        text-align: left;
-        width: 50%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-    .ListItems div:nth-child(2),
-    .FolderDesc div:nth-child(2) {
-        width: 30%;
-        text-align: right;
-    }
-    .ListItems div:nth-child(3), 
-    .FolderDesc div:nth-child(3), {
-        width: 20%;
-        text-align: right;
+        div:nth-child(1) {
+            text-align: left;
+            width: 50%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        div:nth-child(2) {
+            width: 30%;
+            text-align: right;
+        }
+        div:nth-child(3) {
+            width: 20%;
+            text-align: right;
+        }
     }
 </style>
diff --git a/src/components/MorePage.astro b/src/components/MorePage.astro
@@ -4,8 +4,6 @@ import ButtonContainer from "./base/ButtonContainer.astro"
 import { Icon } from "astro-icon";
 ---
 
-
-<!--MorePageStart-->
 <form class="MorePage" action="" method="POST" id="nextpageform">
     <input type="hidden" id="pagenum" name="pagenum" value="">
 
@@ -19,11 +17,11 @@ import { Icon } from "astro-icon";
         </div>
         <div class="updated_at">
             <!--MorePageListStart-->
-                            <a onclick="nextpage(<!--PageNum-->);"><!--PageNum--></a>
+                <a onclick="nextpage(<!--PageNum-->);"><!--PageNum--></a>
             <!--MorePageListEnd-->
 
             <!--MorePageListNowStart-->
-                            <a style="font-size: larger;"><!--PageNum--></a>
+                <a style="font-size: larger;"><!--PageNum--></a>
             <!--MorePageListNowEnd-->
     </div>
         <div>
@@ -43,30 +41,31 @@ function nextpage(num) {
     document.getElementById('nextpageform').submit();
 }
 </script>
-<!--MorePageEnd-->
 
-<style>
+<style lang="scss">
     .MorePage {
         margin-top: 20px;
-    }
-    .MorePage > div {
-        width: 100%;
-        text-align: center;
-        display: flex;
-        justify-content: space-between;
-        align-items: center
-    }
-    .MorePage > div div:first-child {
-        float: left;
-        margin-right: 5px;
-    }
-    .MorePage > div div:last-child {
-        float: right;
-        margin-left: 5px;
-    }
-    .MorePage > div div:nth-child(2) {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        div {
+            width: 100%;
+            text-align: center;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            div {
+                &:first-child {
+                    float: left;
+                    margin-right: 5px;
+                }
+                &:last-child {
+                    float: right;
+                    margin-left: 5px;
+                }
+                &:nth-child(2) {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
     }
 </style>