feat(SingleLine): fixed SingleLine component

thematters · Jan 8, 2025 · 4afc764 · 4afc764
1 parent 9c7b48b
commit 4afc764
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/views/Home/Channel/SingleLine/index.tsx b/src/views/Home/Channel/SingleLine/index.tsx
@@ -55,6 +55,7 @@ const SingleLine = ({ items }: SingleLineProps) => {
   }, [hash])
 
   return (
+    // <div className={styles.container}>
     <section className={styles.singleLine}>
       {items.map((item) => (
         <a
@@ -72,6 +73,7 @@ const SingleLine = ({ items }: SingleLineProps) => {
         </a>
       ))}
     </section>
+    // </div>
   )
 }
 

diff --git a/src/views/Home/Channel/SingleLine/styles.module.css b/src/views/Home/Channel/SingleLine/styles.module.css
@@ -1,15 +1,26 @@
 /* 频道行样式 */
-.singleLine {
-  @mixin border-bottom-grey;
 
-  position: relative;
+.container {
+  position: fixed;
+  top: 65px;
+  z-index: var(--z-index-sticky-tabs);
+}
+
+.singleLine {
+  position: fixed;
+  top: 65px;
+  right: 0;
+  left: 0;
+  z-index: var(--z-index-sticky-tabs);
   display: flex;
   gap: var(--sp12);
   align-items: center;
-  margin: 0 calc(var(--sp16) * -1);
+
+  /* margin: 0 calc(var(--sp16) * -1); */
   overflow-x: auto; /* horizontal scroll */
   white-space: nowrap;
-  border-bottom-color: var(--color-grey-hover);
+  background-color: var(--color-white);
+  border-bottom: 2px solid var(--color-grey-hover);
   scrollbar-width: none; /* Firefox hide scrollbar */
 
   &::-webkit-scrollbar {