feat(docs): add NavGrid/NavCard components and restructure stage pages
- Add NavGrid.vue and NavCard.vue components for better navigation layout - Restructure stage-0 index pages across languages into intro.md with new navigation components - Remove old stage-0 index.md files and update stage-3 pages similarly - Add new dependencies 'claude' and 'codex' to package.json - Improve code formatting in multiple Vue components for better readability - Update documentation content and structure for better user experience
This commit is contained in:
sanbuphy
@@ -1,468 +1,278 @@
|
||||
<template>
|
||||
<div class="gpt-evolution-demo">
|
||||
<div class="demo-header">
|
||||
<h4>🚀 GPT 进化历程</h4>
|
||||
<p>从 GPT-1 到 GPT-4 的演进之路</p>
|
||||
</div>
|
||||
|
||||
<div class="timeline-container">
|
||||
<div class="timeline-track"></div>
|
||||
|
||||
<div
|
||||
v-for="(model, index) in gptModels"
|
||||
:key="index"
|
||||
class="timeline-item"
|
||||
:class="{ active: activeModel === index }"
|
||||
@click="selectModel(index)"
|
||||
>
|
||||
<div class="timeline-marker">
|
||||
<div class="marker-dot"></div>
|
||||
<el-card shadow="hover" class="main-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="title">🚀 GPT 进化历程</span>
|
||||
<span class="subtitle">从 GPT-1 到 GPT-4 的演进之路</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="model-year">{{ model.year }}</div>
|
||||
<div class="model-name">{{ model.name }}</div>
|
||||
<div class="model-stats">
|
||||
<span class="stat">📊 {{ model.parameters }}</span>
|
||||
<span class="stat">🎯 {{ model.context }}</span>
|
||||
</template>
|
||||
|
||||
<div class="demo-content">
|
||||
<!-- Replace Vertical Timeline with Horizontal Tabs -->
|
||||
<el-tabs v-model="activeModelName" type="card" class="evolution-tabs" @tab-click="handleTabClick">
|
||||
<el-tab-pane
|
||||
v-for="(model, index) in gptModels"
|
||||
:key="index"
|
||||
:label="model.name"
|
||||
:name="model.name"
|
||||
>
|
||||
<div class="model-view">
|
||||
<div class="model-info-header">
|
||||
<el-tag effect="dark" size="large">{{ model.year }}</el-tag>
|
||||
<div class="model-stats">
|
||||
<div class="stat-item">
|
||||
<span class="label">参数量</span>
|
||||
<span class="value">{{ model.parameters }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="label">上下文</span>
|
||||
<span class="value">{{ model.context }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="model-description">
|
||||
<p>{{ model.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="model-milestones">
|
||||
<span class="section-label">🎯 关键能力:</span>
|
||||
<div class="tags-container">
|
||||
<el-tag
|
||||
v-for="(milestone, i) in model.milestones"
|
||||
:key="i"
|
||||
size="small"
|
||||
class="milestone-tag"
|
||||
>
|
||||
{{ milestone }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-divider class="compact-divider">进化趋势</el-divider>
|
||||
|
||||
<div class="evolution-insight">
|
||||
<div class="insight-row">
|
||||
<div class="insight-item">
|
||||
<el-icon><TrendCharts /></el-icon>
|
||||
<div class="insight-text">
|
||||
<span class="label">参数量增长</span>
|
||||
<span class="value">10000倍+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="insight-item">
|
||||
<el-icon><ChatDotSquare /></el-icon>
|
||||
<div class="insight-text">
|
||||
<span class="label">对话能力</span>
|
||||
<span class="value">单轮 → 多轮</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="insight-item">
|
||||
<el-icon><Cpu /></el-icon>
|
||||
<div class="insight-text">
|
||||
<span class="label">逻辑推理</span>
|
||||
<span class="value">弱 → 强</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="fade-slide">
|
||||
<div v-if="activeModel !== null" class="model-details">
|
||||
<div class="details-header">
|
||||
<h5>{{ gptModels[activeModel].name }}</h5>
|
||||
<span class="year-badge">{{ gptModels[activeModel].year }}</span>
|
||||
</div>
|
||||
|
||||
<div class="details-grid">
|
||||
<div class="detail-card">
|
||||
<div class="card-label">参数量</div>
|
||||
<div class="card-value">{{ gptModels[activeModel].parameters }}</div>
|
||||
<div class="card-note">{{ gptModels[activeModel].paramDetail }}</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-card">
|
||||
<div class="card-label">上下文窗口</div>
|
||||
<div class="card-value">{{ gptModels[activeModel].context }}</div>
|
||||
<div class="card-note">{{ gptModels[activeModel].contextDetail }}</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-card">
|
||||
<div class="card-label">主要能力</div>
|
||||
<div class="card-value">{{ gptModels[activeModel].capability }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="model-description">
|
||||
<h6>📝 模型简介</h6>
|
||||
<p>{{ gptModels[activeModel].description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="model-milestones">
|
||||
<h6>🎯 关键里程碑</h6>
|
||||
<ul>
|
||||
<li v-for="(milestone, i) in gptModels[activeModel].milestones" :key="i">
|
||||
{{ milestone }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div class="evolution-insight">
|
||||
<h5>💡 进化趋势</h5>
|
||||
<div class="trend-grid">
|
||||
<div class="trend-item">
|
||||
<div class="trend-icon">📈</div>
|
||||
<div class="trend-text">参数量从 1.17 亿增长到万亿级别</div>
|
||||
</div>
|
||||
<div class="trend-item">
|
||||
<div class="trend-icon">🧠</div>
|
||||
<div class="trend-text">从文本生成到多模态（图像、音频、视频）</div>
|
||||
</div>
|
||||
<div class="trend-item">
|
||||
<div class="trend-icon">🎯</div>
|
||||
<div class="trend-text">上下文窗口从 512 tokens 扩展到 128k+</div>
|
||||
</div>
|
||||
<div class="trend-item">
|
||||
<div class="trend-icon">🌐</div>
|
||||
<div class="trend-text">从单语言到多语言，从通用到专业领域</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TrendCharts, ChatDotSquare, Cpu } from '@element-plus/icons-vue'
|
||||
|
||||
const activeModel = ref(0)
|
||||
const activeModelName = ref('GPT-1')
|
||||
|
||||
const gptModels = ref([
|
||||
const gptModels = [
|
||||
{
|
||||
name: 'GPT-1',
|
||||
year: '2018',
|
||||
parameters: '1.17 亿',
|
||||
paramDetail: '117M',
|
||||
paramDetail: '117 Million',
|
||||
context: '512 tokens',
|
||||
contextDetail: '约 384 英文单词',
|
||||
capability: '文本生成',
|
||||
description: 'OpenAI 发布的首个 GPT 模型，证明了生成式预训练的可行性。它采用"预训练 + 微调"范式，在无标注文本上学习语言模式。',
|
||||
milestones: [
|
||||
'首次验证 Transformer 架构在语言模型中的有效性',
|
||||
'引入生成式预训练方法',
|
||||
'为后续 GPT 系列奠定基础'
|
||||
]
|
||||
contextDetail: '约 1 页文本',
|
||||
capability: '无监督预训练',
|
||||
description: '开创性地使用了 Transformer 解码器进行预训练，证明了无监督学习在 NLP 中的潜力。',
|
||||
milestones: ['预训练+微调范式', 'BookCorpus 数据集', '单向 Transformer']
|
||||
},
|
||||
{
|
||||
name: 'GPT-2',
|
||||
year: '2019',
|
||||
parameters: '15 亿',
|
||||
paramDetail: '1.5B',
|
||||
paramDetail: '1.5 Billion',
|
||||
context: '1024 tokens',
|
||||
contextDetail: '约 768 英文单词',
|
||||
capability: '高质量文本生成',
|
||||
description: 'GPT-2 的规模扩大了 13 倍，能够生成连贯、高质量的文本。由于担心滥用，OpenAI 最初只发布了缩小版本，引发广泛争议。',
|
||||
milestones: [
|
||||
'参数量突破 10 亿级别',
|
||||
'展现出惊人的零样本学习能力',
|
||||
"引发 AI 安全和滥用的讨论",
|
||||
'最终完整版本于 2019 年 11 月发布'
|
||||
]
|
||||
contextDetail: '约 2 页文本',
|
||||
capability: '零样本任务',
|
||||
description: '参数量扩大 10 倍，展示了惊人的零样本（Zero-shot）能力，能生成连贯的文本。',
|
||||
milestones: ['WebText 数据集', 'Zero-shot Learning', '生成长文本']
|
||||
},
|
||||
{
|
||||
name: 'GPT-3',
|
||||
year: '2020',
|
||||
parameters: '1750 亿',
|
||||
paramDetail: '175B',
|
||||
paramDetail: '175 Billion',
|
||||
context: '2048 tokens',
|
||||
contextDetail: '约 1536 英文单词',
|
||||
capability: '少样本学习',
|
||||
description: 'GPT-3 是当时规模最大的语言模型，展现出强大的少样本和零样本学习能力。它证明了"规模就是一切"的假设，只需通过提示词就能完成各种任务。',
|
||||
milestones: [
|
||||
'参数量达到 1750 亿，比 GPT-2 增长 116 倍',
|
||||
'少样本学习能力震惊学术界',
|
||||
'催生了大量基于 API 的应用',
|
||||
'OpenAI 开始提供商业 API 服务'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'GPT-3.5',
|
||||
year: '2022',
|
||||
parameters: '未知',
|
||||
paramDetail: '估计 2000 亿+',
|
||||
context: '4096 tokens',
|
||||
contextDetail: '约 3072 英文单词',
|
||||
capability: '对话系统',
|
||||
description: 'GPT-3.5 在 GPT-3 基础上引入了对话训练和强化学习（RLHF），成为 ChatGPT 的基础模型。它能够进行自然、连贯的多轮对话，是 AI 历史上的重要里程碑。',
|
||||
milestones: [
|
||||
'引入人类反馈强化学习（RLHF）',
|
||||
'ChatGPT 发布，5 天用户破百万',
|
||||
'2 个月月活破亿，创历史记录',
|
||||
'掀起全球 AI 热潮'
|
||||
]
|
||||
contextDetail: '约 4 页文本',
|
||||
capability: '上下文学习 (ICL)',
|
||||
description: '参数量爆炸式增长，涌现出上下文学习能力（In-Context Learning），无需微调即可完成任务。',
|
||||
milestones: ['Few-shot Learning', 'Common Crawl', '能力涌现']
|
||||
},
|
||||
{
|
||||
name: 'GPT-4',
|
||||
year: '2023',
|
||||
parameters: '未知',
|
||||
paramDetail: '估计 1.8 万亿',
|
||||
context: '8192-32768 tokens',
|
||||
contextDetail: '最多 50 页文档',
|
||||
capability: '多模态智能',
|
||||
description: 'GPT-4 是一个多模态大模型，能够处理文本、图像等多种输入。它在各项基准测试中接近人类水平，并在复杂推理、数学、编程等任务上表现出色。',
|
||||
milestones: [
|
||||
'首个大规模多模态模型',
|
||||
'在律师考试、奥数等高难度测试中表现出色',
|
||||
'支持更长上下文（最多 32k tokens）',
|
||||
'推出 GPT-4 Turbo，速度更快、价格更低'
|
||||
]
|
||||
parameters: '1.8 万亿 (推测)',
|
||||
paramDetail: '1.8 Trillion (Est.)',
|
||||
context: '128k tokens',
|
||||
contextDetail: '约 300 页书',
|
||||
capability: '多模态 & 推理',
|
||||
description: '引入多模态能力（识图），逻辑推理和代码能力大幅提升，支持超长上下文。',
|
||||
milestones: ['多模态输入', 'MoE 架构', 'RLHF 对齐', '考试高手']
|
||||
}
|
||||
])
|
||||
]
|
||||
|
||||
const selectModel = (index) => {
|
||||
activeModel.value = index
|
||||
const handleTabClick = (tab) => {
|
||||
// activeModelName updated automatically
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gpt-evolution-demo {
|
||||
margin: 1rem 0;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
border-radius: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.demo-header h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.demo-header p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
position: relative;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.timeline-track {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--vp-c-divider);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
.card-header {
|
||||
display: flex;
|
||||
margin-bottom: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.timeline-item:hover {
|
||||
opacity: 0.9;
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.timeline-item.active .marker-dot {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
width: 44px;
|
||||
flex-shrink: 0;
|
||||
/* Compact Tabs */
|
||||
.evolution-tabs :deep(.el-tabs__header) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.model-view {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.model-info-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.marker-dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--vp-c-divider);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
margin-left: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.timeline-item.active .timeline-content {
|
||||
border-color: var(--vp-c-brand);
|
||||
box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.12);
|
||||
}
|
||||
|
||||
.model-year {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.model-name {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
gap: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.model-stats {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.model-details {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.details-header {
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.details-header h5 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: var(--vp-c-text-1);
|
||||
.stat-item .label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.year-badge {
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.12);
|
||||
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.2);
|
||||
color: var(--vp-c-brand);
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
.stat-item .value {
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.details-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.card-note {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.model-description,
|
||||
.model-milestones {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.model-description h6,
|
||||
.model-milestones h6 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.model-description p {
|
||||
margin: 0;
|
||||
line-height: 1.8;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.model-milestones ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.model-milestones li {
|
||||
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
|
||||
position: relative;
|
||||
line-height: 1.6;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.model-milestones li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--vp-c-green-1, #22c55e);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.evolution-insight {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.evolution-insight h5 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.trend-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.trend-item {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.trend-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trend-text {
|
||||
font-size: 0.875rem;
|
||||
color: var(--vp-c-text-2);
|
||||
.model-description {
|
||||
background-color: #f5f7fa;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.fade-slide-enter-active,
|
||||
.fade-slide-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
.model-milestones {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.fade-slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
.section-label {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
.milestone-tag {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.details-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.trend-grid {
|
||||
grid-template-columns: 1fr;
|
||||
.compact-divider {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.evolution-insight {
|
||||
background-color: #f0f9eb;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.insight-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.insight-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.insight-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.insight-text .label {
|
||||
font-size: 12px;
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.insight-text .value {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.insight-row {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user