Finish store

2024-02-18 17:50:31 +08:00
parent ae16808e1d
commit 3c495cfa16
11 changed files with 362 additions and 41 deletions
--- a/src/assets/css/pages/tools/store.scss
+++ b/src/assets/css/pages/tools/store.scss
@@ -0,0 +1,117 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=tools-store] {
+  .root-content {
+    padding: 30px;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > .card-box {
+      width: 180px;
+      height: 290px;
+      flex: 0 0 auto;
+      cursor: pointer;
+
+      .common-card {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        align-items: center;
+
+        > * {
+          display: block;
+          flex: 0 0 auto;
+        }
+
+
+        .icon {
+          display: flex;
+          padding-top: 40px;
+          padding-bottom: 20px;
+          color: constants.$production-color;
+          font-size: constants.$SIZE_ICON_XL;
+          justify-content: center;
+
+          img {
+            width: constants.$SIZE_ICON_XL;
+          }
+        }
+
+        .version {
+          position: absolute;
+          left: 10px;
+          top: 10px;
+        }
+
+        .info {
+          padding-top: 20px;
+
+          .tool-name {
+            font-weight: bolder;
+            font-size: 1.6em;
+          }
+
+          .tool-desc {
+            margin-top: 10px;
+            color: constants.$font-secondary-color;
+          }
+        }
+
+        .author {
+          display: flex;
+          margin-top: auto;
+          flex-direction: row;
+          justify-content: end;
+          padding-bottom: 10px;
+          gap: 10px;
+
+          .avatar {
+            > * {
+              width: 24px;
+              height: 24px;
+            }
+          }
+
+          .author-name {
+            display: flex;
+            align-items: center;
+          }
+        }
+
+        .operation {
+          position: absolute;
+          top: 6px;
+          right: 12px;
+          font-size: 1.6em;
+
+          >*:hover {
+            color: constants.$font-secondary-color;
+          }
+        }
+      }
+
+      .load-more-card {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        align-items: center;
+
+        .icon {
+          display: flex;
+          font-size: constants.$SIZE_ICON_XXL;
+          color: constants.$production-color;
+          align-items: center;
+          transform: translateY(-20px);
+        }
+
+        .text {
+          position: absolute;
+          top: 60%;
+          font-size: 1.2em;
+          font-weight: bolder;
+        }
+      }
+    }
+  }
+}