From cd9e99ecb364d179d93a9a0141c41162058c2aba Mon Sep 17 00:00:00 2001
From: limingtao <@ming_tao_li>
Date: Mon, 5 Aug 2024 10:47:17 +0800
Subject: [PATCH] 1

---
 components/mp-html/parser.js                  |   3 +-
 .../zeroMarkdownView/zeroMarkdownView.vue     | 392 ++++++++++--------
 2 files changed, 215 insertions(+), 180 deletions(-)

diff --git a/components/mp-html/parser.js b/components/mp-html/parser.js
index e2e7a87..66c9bc5 100644
--- a/components/mp-html/parser.js
+++ b/components/mp-html/parser.js
@@ -979,7 +979,8 @@ Parser.prototype.popNode = function () {
       const table = Object.assign({}, node)
       node.name = 'div'
       node.attrs = {
-        style: 'overflow:auto'
+        style: 'overflow:auto',
+		class: 'scrollbar-container'
       }
       node.children = [table]
       attrs = table.attrs
diff --git a/components/zeroMarkdownView/zeroMarkdownView.vue b/components/zeroMarkdownView/zeroMarkdownView.vue
index 9e77cad..5873618 100644
--- a/components/zeroMarkdownView/zeroMarkdownView.vue
+++ b/components/zeroMarkdownView/zeroMarkdownView.vue
@@ -1,180 +1,214 @@
-<template>
-	<view class="zero-markdown-view">
-		<mp-html :key="mpkey" :selectable="selectable" :scroll-table='scrollTable' :tag-style="tagStyle"
-			:markdown="true" :content="html">
-		</mp-html>
-	</view>
-</template>
-
-<script>
-	import mpHtml from '../mp-html/mp-html';
-
-
-	export default {
-		name: 'zero-markdown-view',
-		components: {
-			mpHtml
-		},
-		props: {
-			markdown: {
-				type: String,
-				default: ''
-			},
-			selectable: {
-				type: [Boolean, String],
-				default: true
-			},
-			scrollTable: {
-				type: Boolean,
-				default: true
-			},
-			themeColor: {
-				type: String,
-				default: '#007AFF'
-			},
-			codeBgColor: {
-				type: String,
-				default: '#2d2d2d'
-			},
-		},
-		data() {
-			return {
-				html: '',
-				tagStyle: '',
-				mpkey: 'zero'
-			};
-		},
-		watch: {
-			markdown: function(val) {
-				this.html = this.markdown
-			}
-		},
-		created() {
-			this.initTagStyle();
-		},
-		mounted() {
-
-			this.html = this.markdown
-		},
-		methods: {
-
-			initTagStyle() {
-				const themeColor = this.themeColor
-				const codeBgColor = this.codeBgColor
-				let zeroStyle = {
-					//letter-spacing:0.2em;
-					p: `
-				margin:5px 5px;
-				font-size: 15px;
-				line-height:1.75;
-				word-spacing:0.1em;
-				`,
-					// 一级标题
-					h1: `
-				margin:25px 0;
-				font-size: 24px;
-				text-align: center;
-				font-weight: bold;
-				color: ${themeColor};
-				padding:3px 10px 1px;
-				border-bottom: 2px solid ${themeColor};
-				border-top-right-radius:3px;
-				border-top-left-radius:3px;
-				`,
-					// 二级标题
-					h2: `
-				margin:40px 0 20px 0;	
-				font-size: 20px;
-				text-align:center;
-				color:${themeColor};
-				font-weight:bolder;
-				padding-left:10px;
-				// border:1px solid ${themeColor};
-				`,
-					// 三级标题
-					h3: `
-				margin:30px 0 10px 0;
-				font-size: 18px;
-				color: ${themeColor};
-				padding-left:10px;
-				border-left:3px solid ${themeColor};
-				`,
-					// 引用
-					blockquote: `
-				margin:15px 0;
-				font-size:15px;
-				color: #777777;
-				border-left: 4px solid #dddddd;
-				padding: 0 10px;
-				 `,
-					// 列表 
-					ul: `
-				margin: 10px 0;
-				color: #555;
-				`,
-					li: `
-				margin: 5px 0;
-				color: #555;
-				`,
-					// 链接
-					a: `
-				// color: ${themeColor};
-				`,
-					// 加粗
-					strong: `
-				font-weight: border;
-				color: ${themeColor};
-				`,
-					// 斜体
-					em: `
-				color: ${themeColor};
-				letter-spacing:0.3em;
-				`,
-					// 分割线
-					hr: `
-				height:1px;
-				padding:0;
-				border:none;
-				// border-top:medium solid #333;
-				text-align:center;
-				background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
-				`,
-					// 表格
-					table: `
-				border-spacing:0;
-				overflow:auto;
-				min-width:100%;
-				margin:10px 0;
-				border-collapse: collapse;
-				`,
-					th: `
-				border: 1px solid #202121;
-				color: #555;
-				font-size: 14px;
-				font-weight: 500;
-				`,
-					td: `
-				color:#555;
-				border: 1px solid #555555;
-				font-size: 14px;
-				`,
-					pre: `
-				border-radius: 5px;
-				white-space: pre;
-				background: ${codeBgColor};
-				font-size:12px;
-				position: relative;
-				`,
-				}
-				this.tagStyle = zeroStyle
-			},
-		}
-	};
-</script>
-
-<style lang="scss">
-	.zero-markdown-view {
-		padding: 15rpx;
-		position: relative;
-	}
+<template>
+	<view class="zero-markdown-view">
+		<mp-html :key="mpkey" :selectable="selectable" :scroll-table='scrollTable' :tag-style="tagStyle"
+			:markdown="true" :content="html">
+		</mp-html>
+	</view>
+</template>
+
+<script>
+	import mpHtml from '../mp-html/mp-html';
+
+
+	export default {
+		name: 'zero-markdown-view',
+		components: {
+			mpHtml
+		},
+		props: {
+			markdown: {
+				type: String,
+				default: ''
+			},
+			selectable: {
+				type: [Boolean, String],
+				default: true
+			},
+			scrollTable: {
+				type: Boolean,
+				default: true
+			},
+			themeColor: {
+				type: String,
+				default: '#007AFF'
+			},
+			codeBgColor: {
+				type: String,
+				default: '#2d2d2d'
+			},
+		},
+		data() {
+			return {
+				html: '',
+				tagStyle: '',
+				mpkey: 'zero'
+			};
+		},
+		watch: {
+			markdown: function(val) {
+				this.html = this.markdown
+			}
+		},
+		created() {
+			this.initTagStyle();
+		},
+		mounted() {
+
+			this.html = this.markdown
+		},
+		methods: {
+
+			initTagStyle() {
+				const themeColor = this.themeColor
+				const codeBgColor = this.codeBgColor
+				let zeroStyle = {
+					//letter-spacing:0.2em;
+					p: `
+				margin:5px 5px;
+				font-size: 15px;
+				line-height:1.75;
+				word-spacing:0.1em;
+				`,
+					// 一级标题
+					h1: `
+				margin:25px 0;
+				font-size: 24px;
+				text-align: center;
+				font-weight: bold;
+				color: ${themeColor};
+				padding:3px 10px 1px;
+				border-bottom: 2px solid ${themeColor};
+				border-top-right-radius:3px;
+				border-top-left-radius:3px;
+				`,
+					// 二级标题
+					h2: `
+				margin:40px 0 20px 0;	
+				font-size: 20px;
+				text-align:center;
+				color:${themeColor};
+				font-weight:bolder;
+				padding-left:10px;
+				// border:1px solid ${themeColor};
+				`,
+					// 三级标题
+					h3: `
+				margin:30px 0 10px 0;
+				font-size: 18px;
+				color: ${themeColor};
+				padding-left:10px;
+				border-left:3px solid ${themeColor};
+				`,
+					// 引用
+					blockquote: `
+				margin:15px 0;
+				font-size:15px;
+				color: #777777;
+				border-left: 4px solid #dddddd;
+				padding: 0 10px;
+				 `,
+					// 列表 
+					ul: `
+				margin: 10px 0;
+				font-size: 15px;
+				line-height:1.75;
+				word-spacing:0.1em;
+				`,
+					li: `
+				margin: 5px 0;
+				font-size: 15px;
+				line-height:1.75;
+				word-spacing:0.1em;
+				`,
+					// 链接
+					a: `
+				// color: ${themeColor};
+				`,
+					// 加粗
+					strong: `
+				font-weight: border;
+				color: ${themeColor};
+				`,
+					// 斜体
+					em: `
+				color: ${themeColor};
+				letter-spacing:0.3em;
+				`,
+					// 分割线
+					hr: `
+				height:1px;
+				padding:0;
+				border:none;
+				// border-top:medium solid #333;
+				text-align:center;
+				background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
+				`,
+					// 表格
+					table: `
+				border-spacing:0;
+				overflow:auto;
+				min-width:100%;
+				margin:10px 0;
+				border-collapse: collapse;
+				`,
+					th: `
+				border: 1px solid #202121;
+				// color: #555;
+				font-size: 14px;
+				font-weight: 500;
+				`,
+					td: `
+				// color:#555;
+				border: 1px solid #555555;
+				font-size: 14px;
+				`,
+					pre: `
+				border-radius: 5px;
+				white-space: pre;
+				background: ${codeBgColor};
+				font-size:12px;
+				position: relative;
+				`,
+				}
+				this.tagStyle = zeroStyle
+			},
+		}
+	};
+</script>
+
+<style lang="scss">
+	.zero-markdown-view {
+		padding: 15rpx;
+		position: relative;
+	}
+	//  /deep/ .scrollbar-container{
+	// 	display: none;
+	// }
+	/* 设置滚动条的宽度和背景色 */
+	 /deep/ .scrollbar-container::-webkit-scrollbar {
+	    width: 3px!important; /* 滚动条宽度 */
+	    height: 3px!important; /* 对于垂直滚动条，设置高度 */
+	    background-color: #f9f9f9!important; /* 滚动条背景色 */
+	}
+	 
+	/* 设置滚动条滑块的样式 */
+	/deep/  .scrollbar-container::-webkit-scrollbar-thumb {
+	    border-radius: 10px; /* 滑块圆角 */
+	    background-color: #c1c1c1; /* 滑块颜色 */
+	}
+	 
+	/* 设置滚动条滑块hover样式 */
+	/deep/  .scrollbar-container::-webkit-scrollbar-thumb:hover {
+	    background-color: #a8a8a8; /* 滑块hover颜色 */
+	}
+	 
+	/* 设置滚动条轨道的样式 */
+	/deep/  .scrollbar-container::-webkit-scrollbar-track {
+	    border-radius: 10px; /* 轨道圆角 */
+	    box-shadow: inset 0 0 5px grey; /* 轨道阴影 */
+	    background-color: #f0f0f0; /* 轨道颜色 */
+	}
+	/deep/  .md-table {
+		margin-bottom: 10rpx!important; 
+	}
 </style>
\ No newline at end of file