Finish store

src/assets/css/constants.scss

@@ -17,4 +17,5 @@ $SIZE_ICON_XS: 16px;
 $SIZE_ICON_SM: 20px;
 $SIZE_ICON_MD: 24px;
 $SIZE_ICON_LG: 32px;
-$SIZE_ICON_XL: 64px;
+$SIZE_ICON_XL: 64px;
+$SIZE_ICON_XXL: 96px;

src/assets/css/pages/tools/index.scss

@@ -20,8 +20,8 @@
         align-items: center;
 
         > * {
-          flex: 0 0 auto;
           display: block;
+          flex: 0 0 auto;
         }
 
         .version-select {

src/assets/css/pages/tools/source.scss

@@ -0,0 +1,8 @@
+[data-component=tools-source] {
+  padding: 30px;
+
+  .card-box {
+    width: 100%;
+    height: 100%;
+  }
+}

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;
+        }
+      }
+    }
+  }
+}

src/assets/svg/code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M305.6 225.6c-17.6-17.6-43.2-17.6-59.2 0L19.2 460.8c-25.6 30.4-25.6 72 0 97.6l225.6 235.2c8 8 20.8 12.8 30.4 12.8s20.8-4.8 30.4-12.8c17.6-17.6 17.6-43.2 0-59.2L88 512l217.6-225.6c17.6-17.6 17.6-43.2 0-60.8zM1001.6 460.8L774.4 225.6c-17.6-17.6-43.2-17.6-59.2 0s-17.6 43.2 0 59.2L932.8 512 715.2 737.6c-17.6 17.6-17.6 43.2 0 59.2 8 8 17.6 12.8 30.4 12.8 12.8 0 20.8-4.8 30.4-12.8l225.6-235.2c28.8-28.8 28.8-70.4 0-100.8zM612.8 230.4c-20.8-8-46.4 4.8-56 25.6L382.4 742.4c-8 20.8 4.8 46.4 25.6 56 4.8 0 8 4.8 12.8 4.8 17.6 0 33.6-12.8 38.4-30.4l179.2-491.2c8-20.8-4.8-46.4-25.6-51.2z" /></svg>

src/assets/svg/more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M243.2 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /><path d="M512 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /><path d="M780.8 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /></svg>