fix: content style

xjh22222228 · Dec 27, 2023 · 2dee2c8 · 2dee2c8 · vercel · Dec 27, 2023
1 parent a472d4a
commit 2dee2c8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/src/views/memorandum/DetailPage.tsx b/src/views/memorandum/DetailPage.tsx
@@ -32,15 +32,16 @@ const DetailPage: FC = () => {
   }
 
   return (
-    <Spin spinning={loading}>
+    <Spin spinning={loading} wrapperClassName="detail-spin">
       <div className="memorandum-detail">
         <div className="tool-bar">
           <LeftOutlined className="icon-left" onClick={goBack} />
+          <h1 className="title">{ title }</h1>
           <Link className="edit" to={`/home/memorandum/update/${id}`}>
             <EditOutlined title="编辑" />
           </Link>
         </div>
-        <h1 className="title">{ title }</h1>
+
         <div
           className="markdown-body tui-editor-contents"
           dangerouslySetInnerHTML={{ __html: content }}

diff --git a/src/views/memorandum/style.scss b/src/views/memorandum/style.scss
@@ -65,17 +65,32 @@
 }
 
 // DetailPage
+.detail-spin {
+  overflow-y: auto !important;
+  .ant-spin-container {
+    height: 100%;
+  }
+}
 .memorandum-detail {
   position: relative;
   padding: 15px 20px;
   background: #fff;
   overflow-y: auto !important;
-  height: calc(100vh - 50px);
-
+  height: 100%;
+  display: flex;
+  flex-direction: column;
   .tool-bar {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 5px;
+    margin-bottom: 15px;
+    align-items: center;
+    border-bottom: .5px solid #e6e6e6;
+    padding-bottom: 12px;
+  }
+  .markdown-body {
+    flex: 1;
+    overflow: hidden;
+    overflow-y: auto;
   }
 
   .icon-left {
@@ -84,9 +99,10 @@
   }
 
   .title {
-    font-size: 36px;
+    padding: 0 12px;
+    font-size: 26px;
     color: #262626;
-    border-bottom: 1px solid #e6e6e6;
+    margin: 0;
   }
 
   .edit {