feat: book_header

src/pages/book/index.scss

@@ -1,8 +1,21 @@
 // 在 src/index.scss 中引入 GitHub Markdown 主题
 @import "github-markdown-css/github-markdown.css";
 
+
+.book_header{
+  width: 100%;
+  height: 80px;
+  background-color: aquamarine;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 30px;
+  padding-right: 30px;
+}
 .Book {
   padding: 40px;
+
   .markdown-body {
     font-size: 30px;
     // color: #72d572;
@@ -10,8 +23,24 @@
 
   img {
     max-width: 100%;
-    height: auto; /* 保持图像的纵横比 */
+    height: auto;
+    /* 保持图像的纵横比 */
   }
+
+  .at-drawer__content {
+    .at-list {
+      .at-list__item {
+        font-size: 30px;
+
+        // background-color: aqua;
+        .at-list__item-container {
+          .at-list__item-content {}
+        }
+      }
+    }
+  }
+
+
 }
 
 @media (min-width: 1536px) {
@@ -26,9 +55,10 @@
     // background-color: yellow;
     .book_left {
       width: 400px;
-      height:100%;
+      height: 100%;
       background-color: red;
     }
+
     .markdown-body {
       width: 100%;
       max-width: 1400px;
@@ -36,10 +66,11 @@
       // color: red;
       // background-color: #72d572;
     }
+
     .book_right {
       width: 400px;
       height: 100%;
       background-color: greenyellow;
     }
   }
-}
+}

src/pages/book/index.tsx

@@ -140,41 +140,54 @@ const Book = () => {
   };
 
   return (
-    <View className="Book">
-      <AtButton
-        onClick={() => {
-          setshow(!show);
-        }}
-      >
-        目录
-      </AtButton>
-      <View
-        ref={contentRef}
-        className="markdown-body" // 添加 GitHub Markdown 主题类
-        dangerouslySetInnerHTML={{
-          __html: marked(markText),
-          // __html: marked(book == 1 ? bookText : infoText),
-        }}
-      ></View>
-
-      <AtDrawer
-        show={show}
-        mask
-        // items={headers}
-        // onItemClick={(index) => {
-        //   handleJump(headers[index]);
-        // }}
-        onClose={() => {
-          setshow(false);
-        }}
-      >
-        {/* <View className="drawer-item">优先展示items里的数据</View> */}
-        {/* <View className="drawer-item">如果items没有数据就会展示children</View> */}
-        <View className="drawer-item">
-          这是自定义内容 <AtIcon value="home" size="20" />
+    <>
+      <View className="book_header">
+        <View className="book_header_left">1</View>
+        <View className="book_header_middle">2</View>
+        <View className="book_header_right">
+          {/* bullet-list */}
+          {/* size="30"  */}
+          {/* color="#F00" */}
+          <AtIcon value="bullet-list" ></AtIcon>
+          {/* <AtButton
+            onClick={() => {
+              setshow(!show);
+            }}
+          >
+            目录
+          </AtButton> */}
         </View>
-      </AtDrawer>
-    </View>
+      </View>
+      <View className="Book">
+        <View
+          ref={contentRef}
+          className="markdown-body" // 添加 GitHub Markdown 主题类
+          dangerouslySetInnerHTML={{
+            __html: marked(markText),
+            // __html: marked(book == 1 ? bookText : infoText),
+          }}
+        ></View>
+
+        <AtDrawer
+          className="book_AtDrawer"
+          show={show}
+          mask
+          items={headers}
+          onItemClick={(index) => {
+            handleJump(headers[index]);
+          }}
+          onClose={() => {
+            setshow(false);
+          }}
+        >
+          <View className="drawer-item">优先展示items里的数据</View>
+          {/* <View className="drawer-item">如果items没有数据就会展示children</View> */}
+          {/* <View className="drawer-item">
+          这是自定义内容 <AtIcon value="home" size="20" />
+        </View> */}
+        </AtDrawer>
+      </View>
+    </>
   );
 };