滚动条样式

NeutronStarDAO · Dec 9, 2023 · 08e5bd2 · 08e5bd2
1 parent 7a6be68
commit 08e5bd2
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 79 deletions.
diff --git a/frontend/src/components/comment.tsx b/frontend/src/components/comment.tsx
@@ -4,6 +4,7 @@ export default function Comment() {
   return (
     <Flex
       vertical
+      className={"content"}
     >
       <Space>
         <Avatar
@@ -21,7 +22,7 @@ export default function Comment() {
         This is Comment;This is Comment;This is Comment;
         This is Comment;This is Comment;This is Comment;
       </Typography.Paragraph>
-      <Divider />
+      <Divider style={{marginBottom:"0"}}/>
     </Flex>
   )
 }
diff --git a/frontend/src/components/post.tsx b/frontend/src/components/post.tsx
@@ -8,7 +8,7 @@ import {
 export default function Post() {
 
   return (
-    <div style={{
+    <div className={"content"} style={{
       padding: "12px",
       border: "1px solid rgba(0,0,0,0.2)",
       borderRadius: "20px",

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -37,3 +37,7 @@ code {
     border-radius: 3px;
     background: rgba(0, 0, 0, 0.12);
 }
+
+.content:hover {
+    background: rgba(0, 0, 0, 0.02);
+}
diff --git a/frontend/src/routes/content.tsx b/frontend/src/routes/content.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import {Layout} from "antd";
+import Post from "../components/post";
+import Comment from "../components/comment";
+
+export const Content = React.memo(()=>{
+  return <>
+    <Layout.Content className={"posts"} style={{
+      backgroundColor: "white",
+      overflowY: 'auto',
+      scrollbarWidth: 'thin',
+      width: '200px',
+      borderRight: '1px solid rgba(0,0,0,0.2)',
+      padding:"40px 20px"
+    }}>
+      <Post/>
+      <Post/>
+      <Post/>
+      <Post/>
+      <Post/>
+      <Post/>
+      <Post/>
+    </Layout.Content>
+    <Layout.Content className={"posts"} style={{
+      backgroundColor: 'white',
+      overflowY: 'auto',
+      scrollbarWidth: 'thin',
+      padding:"40px 20px"
+    }}>
+      <Comment/>
+      <Comment/>
+      <Comment/>
+      <Comment/>
+      <Comment/>
+      <Comment/>
+      <Comment/>
+      <Comment/>
+    </Layout.Content>
+  </>
+})
diff --git a/frontend/src/routes/explore.tsx b/frontend/src/routes/explore.tsx
@@ -1,40 +1,6 @@
-import { Layout } from 'antd';
-import Post from '../components/post';
-import Comment from '../components/comment';
+import {Content} from "./content";
+import React from "react";
 
 export default function Explore() {
-    return (
-       <>
-         <Layout.Content style={{
-           backgroundColor: "white",
-           overflowY: 'auto',
-           scrollbarWidth: 'thin',
-           width: '200px',
-           borderRight: '1px solid',
-         }}>
-           <Post/>
-           <Post/>
-           <Post/>
-           <Post/>
-           <Post/>
-           <Post/>
-           <Post/>
-         </Layout.Content>
-
-         <Layout.Content style={{
-           backgroundColor : 'white',
-           overflowY: 'auto',
-           scrollbarWidth: 'thin',
-         }}>
-           <Comment />
-           <Comment />
-           <Comment />
-           <Comment />
-           <Comment />
-           <Comment />
-           <Comment />
-           <Comment />
-         </Layout.Content>
-       </>
-      );
+  return <Content/>
 }
diff --git a/frontend/src/routes/home.tsx b/frontend/src/routes/home.tsx
@@ -1,40 +1,7 @@
 import React from "react";
-import {Layout} from "antd";
-import Post from "../components/post";
-import Comment from "../components/comment";
 
-export const Home = React.memo(()=>{
-  return <>
-    <Layout.Content className={"posts"} style={{
-      backgroundColor: "white",
-      overflowY: 'auto',
-      scrollbarWidth: 'thin',
-      width: '200px',
-      borderRight: '1px solid rgba(0,0,0,0.2)',
-      padding:"40px 20px"
-    }}>
-      <Post/>
-      <Post/>
-      <Post/>
-      <Post/>
-      <Post/>
-      <Post/>
-      <Post/>
-    </Layout.Content>
-    <Layout.Content className={"posts"} style={{
-      backgroundColor: 'white',
-      overflowY: 'auto',
-      scrollbarWidth: 'thin',
-      padding:"40px 20px"
-    }}>
-      <Comment/>
-      <Comment/>
-      <Comment/>
-      <Comment/>
-      <Comment/>
-      <Comment/>
-      <Comment/>
-      <Comment/>
-    </Layout.Content>
-  </>
+import {Content} from "./content";
+
+export const Home = React.memo(() => {
+  return <Content/>
 })
diff --git a/frontend/src/routes/profile.tsx b/frontend/src/routes/profile.tsx
@@ -49,16 +49,16 @@ export default function UserProfile() {
 
   return (
     <>
-      <Layout.Content style={{
+      <Layout.Content className={"posts"} style={{
         backgroundColor: "white",
-        // paddingLeft: '3px',
-        // paddingRight: '3px',
+        padding:"0 20px",
         width: '200px',
         overflowY: 'auto',
         scrollbarWidth: 'thin',
         borderRight: '1px solid',
       }}>
         <Image
+          style={{borderRadius:"5px"}}
           src='https://infura-ipfs.mora.host/ipfs/QmbEN76wm4PExViLVmUbKf4vDfx3XkpnYvm6qr3JKCSPDT'
           alt='Profile Bakcground Picture'
         />
@@ -95,6 +95,7 @@ export default function UserProfile() {
         </Flex>
         <div style={{
           paddingLeft: '20px',
+          marginBottom:"20px"
         }}>
           <Space size='large'>
             <Typography.Text>Education : {userProfile?.education}</Typography.Text>