feat: book_header

This commit is contained in:
WLT\Eric.hu
2025-03-28 09:28:40 +08:00
parent 423ad11dda
commit 3152cb4547
4 changed files with 81 additions and 39 deletions

1
dist/index.html vendored
View File

@@ -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>

File diff suppressed because one or more lines are too long

View File

@@ -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;
}
}
}
}

View File

@@ -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>
</>
);
};