代码
<div class="card m-2 mt-3">
//顶部tab切换部分
<div class="flex tab">
<div
@click="tabClick(item.value)"
class="flex-1 tab-item"
:class="{ active: item.value == current }"
v-for="(item, index) in tabs"
:key="index"
>
{{ item.label }}
</div>
</div>
//下方块数据部分
<div class="p-3 bg-white list-card">
</div>
</div>
css部分
.tab {
background: #f2f8ff;
border-radius: 20rpx 20rpx 0 0;
&-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 88rpx;
font-size: 32rpx;
font-weight: 400;
color: #6084eb;
&:first-child.active {
border-radius: 20rpx 20rpx 0 0;
&:before {
left: 100%;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M100 100C44.772 100 0 55.228 0 0v100h100z' fill='%23ffffff'/></svg>");
}
}
&:last-child.active {
border-radius: 20rpx 20rpx 0 0;
&:before {
right: 100%;
background-image: url("data:image/svg+xml,<svg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M0 100c55.228 0 100-44.772 100-100v100H0z' fill='%23ffffff'/></svg>");
}
}
}
.active {
font-size: 32rpx;
font-weight: 500;
color: #3b445b;
background-color: #fff;
&:before {
position: absolute;
bottom: 0;
width: 20rpx;
height: 20rpx;
content: '';
background-repeat: no-repeat;
background-size: 20rpx;
}
&:after {
position: absolute;
bottom: 0;
width: 126rpx;
height: 8rpx;
content: '';
background: #4e7bfe;
border-radius: 100rpx;
}
}
}
.list-card {
border-radius: 0 0 20rpx 20rpx;
}
优化建议
确保回答内容简洁明了，避免冗余信息。每个段落聚焦一个核心观点，避免长篇大论。
使用主动语态，增强表达的直接性和清晰度。避免被动语态导致的理解困难。
段落之间保持逻辑连贯性，通过自然过渡衔接内容，避免突兀的转折。
结构优化
将复杂问题拆分为多个子问题，每个子问题单独成段。确保每段内容独立且完整。
对于步骤或方法类内容，使用项目符号或编号列出，提升可读性。避免使用"首先"、"然后"等词汇。
标题层级从三级开始，确保格式统一。禁止使用一级或二级标题，避免结构混乱。
语言优化
采用专业但易懂的词汇，避免过于晦涩的术语。确保目标用户能轻松理解内容。
保持客观中立的语气，避免主观判断或情感色彩过重的表述。
检查语法和拼写错误，确保内容的准确性和专业性。
格式规范
严格遵循Markdown格式要求，代码块和公式使用标准语法。避免格式错误影响阅读体验。
普通文本禁止使用```包装，仅代码块和公式使用对应标记。确保格式统一整洁。
数学公式使用标准LaTeX语法，禁止使用math包装。保持公式清晰可读。