eric/gitlab-instance-0a899031_nomadcna
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: book

Browse Source
This commit is contained in:
hackrobot
2025-04-03 08:26:36 -05:00
parent 3ebfeb407a
commit 36f9885f3a
4 changed files with 87 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.scss
View File

@@ -0,0 +1,4 @@
.taro_page {
// 禁止页面切换动画
transition: none !important; // 去除页面跳转动画
}

60
src/pages/book/index.scss
View File

@@ -1,26 +1,50 @@
// 在 src/index.scss 中引入 GitHub Markdown 主题
@import 'github-markdown-css/github-markdown.css';
@import "github-markdown-css/github-markdown.css";
.Book {
padding: 40px;
// font-size: 30px !important;
// color: #666;
.markdown-body{
font-size: 30px !important;
}
img {
max-width: 100%;
height: auto; /* 保持图像的纵横比 */
}
.formCode {
font-size: 40px;
.BookItems {
display: flex;
flex-direction: row;
.codeBtn {
background-color: aquamarine;
// height: 80px;
// color: red;
align-items: center;
// justify-content: space-around;
// background-color: yellow;
flex-wrap: wrap;
padding: 40px;
gap: 40px;
.BookItem {
flex-grow: 1; /* 自动增长填充空间 */
flex-basis: 300px; /* 基本宽度为 300px，元素数量随可用空间调整 */
max-width: 320px;
height: 350px;
background-color: greenyellow;
// margin-right: 100px;
margin-bottom: 40px;
}
}
}
@media (min-width: 1536px) {
.Book {
font-size: 20px;
.BookItems {
display: flex;
flex-direction: row;
align-items: center;
// justify-content: space-around;
// background-color: yellow;
flex-wrap: wrap;
padding: 40px;
gap: 60px;
.BookItem {
flex-grow: 1; /* 自动增长填充空间 */
flex-basis: 240px; /* 基本宽度为 300px，元素数量随可用空间调整 */
max-width: 260px;
height: 350px;
background-color: green;
// margin-right: 100px;
margin-bottom: 40px;
}
}
}
}

70
src/pages/book/index.tsx
View File

@@ -15,28 +15,12 @@ import { AtList, AtListItem } from "taro-ui";
import { AtForm, AtMessage } from "taro-ui";
import { marked } from "marked";
import markdownText from "./text.md";
// import Nav from "@/pages/components/Nav/index.tsx";
// import Nav from "../componments/Nav/index";
import Nav from "@/pages/componments/Nav/index";
import elevenImage from "@/images/book/11.jpg";
import elevenImage2 from "@/images/book/22.jpg";
marked.setOptions({
breaks: true, // 是否回车换行
gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
// pedantic: true, //严格模式
// highlight(code:any, lang:any) {
// // 语法高亮
// let val = code;
// if (lang) {
// val = hljs.highlight(lang, code).value;
// } else {
// val = hljs.highlightAuto(code).value;
// }
// return val;
// },
});
// const renderer = new marked.Renderer();
// // 使用拓展
// marked.use({ renderer });
// export default class Index extends Component {
const Book = () => {
const [markText, setmarkText] = useState();
@@ -51,17 +35,41 @@ const Book = () => {
return (
<View className="Book">
{/* 渲染markdown */}
{/* <View
className="markdown-body" // 添加 GitHub Markdown 主题类
dangerouslySetInnerHTML={{ __html: marked(markdownText) }}
></View> */}
<View>分类</View>
{/* 导航 */}
<Nav></Nav>
<View className="BookItems">
<View className="BookItem">列表1</View>{" "}
<View className="BookItem">列表2</View>{" "}
<View className="BookItem">列表3</View>
{[
{ imagePath: elevenImage, text: "列表1" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
{ imagePath: elevenImage2, text: "列表2" },
].map((item, index) => {
return (
<View className="BookItem">
<Image
src={item?.imagePath}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
/>
</View>
);
})}
</View>
</View>
);

6
src/pages/index/index.scss
View File

@@ -42,14 +42,14 @@
.nomadcna {
color: aqua !important;
}
.AvatarView{
.AvatarView {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
// align-items: center;
// justify-content: space-between;
.Avatar{
.Avatar {
width: 40px;
height: 40px;
margin-right: -10px;
@@ -58,7 +58,6 @@
}
}
.upjonNomad {
margin-top: 40px;
width: 100%;
@@ -124,7 +123,6 @@
}
}
.items {
height: 100%;
padding: 20px;