Merge pull request #9 from ElapsingDreams/main

💄Beautification!
LiteyukiStudio · Aug 10, 2024 · c4f8ca7 · c4f8ca7
2 parents 867eed3 + cb06ab9
commit c4f8ca7
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 13 deletions.
diff --git a/public/data_source.json b/public/data_source.json
@@ -35,7 +35,7 @@
                 "link": "https://mtr.lite.ac.cn"
             },
             {
-                "text": "Liteyuki StarMap 轻雪星图",
+                "text": "LiteyukiBot StarMap 轻雪星图",
                 "link": "https://starmap.liteyuki.icu/"
             }
         ]
@@ -80,4 +80,4 @@
             }
         ]
     }
-]
+]
diff --git a/src/components/CollectionComp.vue b/src/components/CollectionComp.vue
@@ -9,13 +9,55 @@ defineProps({
 
 <template>
     <div class="collection-name">{{collection?.["collectionName"]}}</div>
-    <LinkButton v-for="item in collection?.['contents']" :link="item?.['link']" :text="item?.['text']" :owner="item?.['owner']"></LinkButton>
+    <div class="grid-container">
+        <LinkButton v-for="item in collection?.['contents']" :link="item?.['link']" :text="item?.['text']"
+            :owner="item?.['owner']"></LinkButton>
+    </div>
 </template>
 
 <style scoped>
+
 .collection-name {
     font-size: 20px;
     font-weight: bold;
-    margin: 20px;
+    margin: 20px 0;
+}
+
+.grid-container {
+    display: grid;
+    column-gap: 2vw;
+    row-gap:1vh;
+    justify-content: center;
+    margin: 0 auto;
+    padding: 2vw;
+}
+
+@media (min-width: 1080px) {
+    .grid-container {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1079px) {
+    .grid-container {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+@media (min-width: 576px) and (max-width: 767px) {
+    .grid-container {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (min-width: 480px) and (max-width: 575px) {
+    .grid-container {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 479px) {
+    .grid-container {
+        grid-template-columns: 1fr;
+    }
 }
 </style>
diff --git a/src/components/LinkButton.vue b/src/components/LinkButton.vue
@@ -24,6 +24,7 @@ if(props.owner){
 
 <style scoped>
 a.button {
+    box-sizing: border-box;
     align-content: center;
     display: flex;
     align-items: center;
@@ -32,20 +33,31 @@ a.button {
     padding: 15px 15px;
     color: #fff;
     text-decoration: none;
+    position: relative;
     background-color: #a2d8f4;
-    border-radius: 80px;
+    border-radius: 5px;
     transition: background-color .3s ease;
-    max-width: 100%
+    width: 100%;
+    z-index: 1;
 }
 
-a.button:hover {
-    background-color: #d0e9ff
+a.button::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    background-color: #d0e9ff;
+    transform: scaleY(0);
+    transform-origin: bottom;
+    transition: transform 0.3s ease;
+    z-index: -1;
 }
-
-@media (max-width: 1080px) {
-    a.button {
-        width:calc(100% - 20px)
-    }
+a.button:hover::after {
+    transform: scaleY(1);
+    
 }
 
 </style>