AIProd/styles/article.scss

.article-content {
	font-family: 'Poppins-Regular', serif;
	color: #64748B;

	h1, h2, h3, h4, h5, h6 {
		font-weight: 600;
		margin-bottom: 20px;
		margin-top: 10px;
		font-family: 'Poppins-SemiBold', serif;
		color: #1E293B;
		display: flex;
		align-items: center;
		line-height: 1.3;

		&::before {
			content: '';
			display: inline-block;
			width: 6px;
			height: 26px;
			background: $header-backgroungd;
			margin-right: 8px;
			border-radius: 0 6px 6px 0;
		}
	}

	// 添加各层级标题的字体大小区分
	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.75rem;
	}

	h3 {
		font-size: 1.5rem;
	}

	h4 {
		font-size: 1.25rem;
	}

	h5 {
		font-size: 1.1rem;
	}

	h6 {
		font-size: 1rem;
	}

	p, li, span {
		color: #64748B;
		font-family: 'Poppins-Regular', serif;
		line-height: 1.7;
	}

	// 段落样式
	p {
		margin-bottom: 16px;
		text-align: justify;
	}

	// 列表样式
	ul, ol {
		margin: 16px 0;
		padding-left: 32px;

		li {
			margin-bottom: 8px;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	ul {
		list-style-type: disc;
	}

	ol {
		list-style-type: decimal;
	}

	// 链接样式
	a {
		color: #7B61FF;
		text-decoration: none;
		border-bottom: 1px dashed #3b82f6;

		&:hover {
			color: #2563eb;
			border-bottom-style: solid;
		}
	}

	// 引用块样式
	blockquote {
		margin: 20px 0;
		padding: 20px;
		border-left: 4px solid $header-backgroungd;
		background-color: #f8fafc;
		border-radius: 0 8px 8px 0;

		p {
			margin: 0;
			font-style: italic;
			color: #64748B;
		}
	}

	// 代码块样式
	pre {
		background-color: #f1f5f9;
		border-radius: 8px;
		padding: 16px;
		overflow-x: auto;
		margin: 20px 0;
		font-family: 'Courier New', monospace;
		font-size: 0.9rem;
		line-height: 1.5;

		code {
			background: none;
			padding: 0;
		}
	}

	// 行内代码样式
	code {
		background-color: #f1f5f9;
		padding: 2px 6px;
		border-radius: 4px;
		font-family: 'Courier New', monospace;
		font-size: 0.9rem;
	}

	// 粗体和斜体
	strong, b {
		font-weight: 600;
		color: #1e293b;
	}

	em, i {
		font-style: italic;
	}

	// 分割线
	hr {
		border: none;
		height: 1px;
		background-color: #cbd5e1;
		margin: 30px 0;
	}

	// 表格样式
	table {
		width: 100%;
		border-collapse: collapse;
		margin: 20px 0;

		th, td {
			padding: 12px 15px;
			text-align: left;
			border-bottom: 1px solid #e2e8f0;
		}

		th {
			background-color: #f1f5f9;
			font-weight: 600;
			color: #1e293b;
		}

		tr:hover {
			background-color: #f8fafc;
		}
	}

	// 图片样式
	img {
		max-width: 100%;
		height: auto;
		border-radius: 8px;
		margin: 10px 0;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}
}