✨feat(视频): 加标签

Author: snownstone

src/pages/projects/index.js

@@ -157,6 +157,16 @@ function Projects() {
         <div className={clsx(styles.titleSec, 'cover')}>
             <h1 className={clsx(styles.fancytitle2, 'stack')}>在玩乐中创作与表达</h1>
         </div>
+        <div className={clsx(styles.navContainer)}>
+          <div className={clsx(styles.filter)}>
+            <button className={clsx(styles.tag1)}>全部</button>
+            <button className={clsx(styles.tags)}>魔法</button>
+            <button className={clsx(styles.tags)}>DynamicTable</button>
+            <button className={clsx(styles.tags)}>机器人</button>
+            <button className={clsx(styles.tags)}>物联网</button>
+            <button className={clsx(styles.tags)}>开源硬件</button>
+          </div>
+        </div>
         <main className={clsx(styles.newContainer)}>
           <VideoRow title="" videos={videos['横版视频']}/>
           <VideoRow title="" videos={videos['竖版视频']}/>

src/pages/projects/styles.module.css

@@ -48,7 +48,7 @@
   padding-top:5vh;
   display: block;
   background-color: black;
-  margin-bottom:5vh;
+  margin-bottom:2vh;
   text-align:center;
   padding-bottom: 2vh;
 }
@@ -131,3 +131,36 @@
   padding-left: 3.75rem;
   padding-right: 3.75rem;
 }
+
+.navContainer {
+  padding-right: 4rem;
+  padding-left: 4rem;
+  margin-right: auto;
+  margin-left: auto;
+  margin-bottom: 3rem;
+}
+
+.filter {
+  display: flex;
+  justify-content: center;
+}
+
+.tags {
+  color: white;
+  padding: 0.5rem 1rem;
+  border: solid white 1.5px;
+  border-radius: 2.5rem;
+  margin:0 1rem;
+  background-color:black;
+  font-size:1.5rem;
+}
+
+.tag1 {
+  color: white;
+  padding: 0.5rem 1rem;
+  border: solid white 1.5px;
+  border-radius: 2.5rem;
+  margin:0 1rem;
+  background-color: #ffb81e;
+  font-size: 1.5rem;
+}