feat: book_header

dist/index.html

@@ -1 +0,0 @@
-<!doctype html><html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#ffffff"><meta name="application-name" content="Youtube运营"><meta name="format-detection" content="telephone=no,address=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><link rel="apple-touch-icon" href="/static/images/images/youtube192.png"/><link rel="icon" sizes="192x192" href="/static/images/images/youtube192.png"/><title>Youtube运营</title><meta name="description" content="Youtube运营笔记"><meta property="og:description" content="Youtube运营笔记"><meta name="twitter:description" content="Youtube运营笔记"><script>!function(n){function f(){var e=n.document.documentElement,w=e.getBoundingClientRect().width,x=40*w/750;e.style.fontSize=x>=40?"40px":x<=20?"20px":x+"px"}n.addEventListener("resize",(function(){f()})),f()}(window);</script><link rel="icon" href="/youtube.ico"><script defer="defer" src="/js/602.js"></script><script defer="defer" src="/js/app.js"></script><link href="/css/app.css" rel="stylesheet"></head><body><div id="app"></div></body></html>

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,6 +66,7 @@
       // color: red;
       // background-color: #72d572;
     }
+
     .book_right {
       width: 400px;
       height: 100%;

src/pages/book/index.tsx

@@ -140,41 +140,54 @@ const Book = () => {
   };
 
   return (
-    <View className="Book">
+    <>
-      <AtButton
+      <View className="book_header">
-        onClick={() => {
+        <View className="book_header_left">1</View>
-          setshow(!show);
+        <View className="book_header_middle">2</View>
-        }}
+        <View className="book_header_right">
-      >
+          {/* bullet-list */}
-        目录
+          {/* size="30"  */}
-      </AtButton>
+          {/* color="#F00" */}
-      <View
+          <AtIcon value="bullet-list" ></AtIcon>
-        ref={contentRef}
+          {/* <AtButton
-        className="markdown-body" // 添加 GitHub Markdown 主题类
+            onClick={() => {
-        dangerouslySetInnerHTML={{
+              setshow(!show);
-          __html: marked(markText),
+            }}
-          // __html: marked(book == 1 ? bookText : infoText),
+          >
-        }}
+            目录
-      ></View>
+          </AtButton> */}
-
-      <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>
-    </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>
+    </>
   );
 };