sanbuphy
d174ceea32
- Add new interactive components for frontend routing, browser rendering pipeline, and database transactions - Improve existing demos with better visuals, explanations, and examples - Update documentation structure and content for better clarity - Add new utility scripts and update package.json with new commands - Fix formatting and alignment in documentation tables
776 lines
18 KiB
Vue
776 lines
18 KiB
Vue
<!--
|
||
RenderingStrategyDemo.vue - 渲染策略对比
|
||
用"餐厅上菜"的比喻来解释 CSR、SSR、SSG 三种渲染方式
|
||
-->
|
||
<template>
|
||
<div class="rendering-demo">
|
||
<!-- 故事引入 -->
|
||
<div class="story-box">
|
||
<div class="story-emoji">🍽️👨🍳⚡</div>
|
||
<h4 class="story-title">小美的餐厅</h4>
|
||
<p class="story-text">
|
||
小美开了家餐厅，有三种上菜方式：<br>
|
||
<strong>CSR（客户端渲染）</strong>：给你半成品食材包，你自己做 <br>
|
||
<strong>SSR（服务端渲染）</strong>：厨房做好菜端给你 <br>
|
||
<strong>SSG（静态生成）</strong>：提前做好所有菜放保温柜
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 模式选择 -->
|
||
<div class="mode-tabs">
|
||
<button
|
||
v-for="strategy in strategies"
|
||
:key="strategy.id"
|
||
class="tab-btn"
|
||
:class="{ active: activeStrategy === strategy.id }"
|
||
@click="activeStrategy = strategy.id"
|
||
>
|
||
<span class="tab-icon">{{ strategy.icon }}</span>
|
||
<span class="tab-name">{{ strategy.name }}</span>
|
||
<span class="tab-sub">{{ strategy.sub }}</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 演示区域 -->
|
||
<div class="demo-container">
|
||
<!-- 客户区 -->
|
||
<div class="customer-area">
|
||
<div class="customer-icon">🧑🦰</div>
|
||
<div class="customer-label">用户（浏览器）</div>
|
||
<div class="table">
|
||
<div v-if="activeStrategy === 'csr'" class="table-content">
|
||
<div class="ingredients-pack">
|
||
<div class="pack-label">📦 食材包</div>
|
||
<div class="pack-content">
|
||
<div class="ingredient">🥬 菜叶</div>
|
||
<div class="ingredient">🥩 肉片</div>
|
||
<div class="ingredient">🧂 调料</div>
|
||
</div>
|
||
<div class="instruction">↑ 请自己烹饪</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="table-content ready">
|
||
<div class="dish">{{ currentStrategy.dish }}</div>
|
||
<div class="dish-status">{{ currentStrategy.readyStatus }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 传输区 -->
|
||
<div class="transfer-area">
|
||
<div v-if="isAnimating" class="transfer-animation">
|
||
<div class="transfer-content">{{ currentStrategy.transferItem }}</div>
|
||
<div class="transfer-arrow">→</div>
|
||
</div>
|
||
<div v-else class="transfer-info">
|
||
<div class="info-label">{{ currentStrategy.transferLabel }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 厨房/服务器 -->
|
||
<div class="kitchen-area">
|
||
<div class="kitchen-icon">👨🍳</div>
|
||
<div class="kitchen-label">{{ currentStrategy.serverLabel }}</div>
|
||
<div class="kitchen-content">
|
||
<div v-if="activeStrategy === 'csr'" class="server-station">
|
||
<div class="station-icon">📡</div>
|
||
<div class="station-label">配送站</div>
|
||
<div class="station-desc">只管配送，不做菜</div>
|
||
</div>
|
||
<div v-else-if="activeStrategy === 'ssr'" class="server-kitchen">
|
||
<div class="chef-action">{{ chefAction }}</div>
|
||
<div class="cooking-pot" v-if="isCooking">🍳</div>
|
||
</div>
|
||
<div v-else class="server-cabinet">
|
||
<div class="cabinet-icon">🗄️</div>
|
||
<div class="cabinet-label">保温柜</div>
|
||
<div class="cabinet-desc">{{ currentStrategy.cabinetDesc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 性能指标 -->
|
||
<div class="metrics-panel">
|
||
<div class="metric-item">
|
||
<div class="metric-label">首屏速度</div>
|
||
<div class="metric-bar">
|
||
<div class="metric-fill" :style="{ width: currentStrategy.firstScreenScore + '%', background: currentStrategy.color }"></div>
|
||
</div>
|
||
<div class="metric-value" :style="{ color: currentStrategy.color }">{{ currentStrategy.firstScreenText }}</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-label">交互体验</div>
|
||
<div class="metric-bar">
|
||
<div class="metric-fill" :style="{ width: currentStrategy.interactionScore + '%', background: currentStrategy.color }"></div>
|
||
</div>
|
||
<div class="metric-value" :style="{ color: currentStrategy.color }">{{ currentStrategy.interactionText }}</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-label">SEO 友好度</div>
|
||
<div class="metric-bar">
|
||
<div class="metric-fill" :style="{ width: currentStrategy.seoScore + '%', background: currentStrategy.color }"></div>
|
||
</div>
|
||
<div class="metric-value" :style="{ color: currentStrategy.color }">{{ currentStrategy.seoText }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="controls">
|
||
<button class="btn btn-primary" @click="startDemo" :disabled="isAnimating">
|
||
{{ isAnimating ? '演示中...' : '开始演示' }}
|
||
</button>
|
||
<button class="btn btn-secondary" @click="resetDemo">
|
||
重置
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 详细对比表 -->
|
||
<div class="comparison-table">
|
||
<div class="table-title">📊 三种渲染方式详细对比</div>
|
||
<div class="table-content">
|
||
<div class="comparison-row header">
|
||
<div class="col-feature">特点</div>
|
||
<div class="col-csr">CSR</div>
|
||
<div class="col-ssr">SSR</div>
|
||
<div class="col-ssg">SSG</div>
|
||
</div>
|
||
<div class="comparison-row">
|
||
<div class="col-feature">比喻</div>
|
||
<div class="col-csr">给半成品食材包，自己做</div>
|
||
<div class="col-ssr">厨房做好菜端给你</div>
|
||
<div class="col-ssg">提前做好放保温柜</div>
|
||
</div>
|
||
<div class="comparison-row">
|
||
<div class="col-feature">首屏速度</div>
|
||
<div class="col-csr">慢（要等 JS）</div>
|
||
<div class="col-ssr">快（直接给 HTML）</div>
|
||
<div class="col-ssg">最快（直接给 HTML）</div>
|
||
</div>
|
||
<div class="comparison-row">
|
||
<div class="col-feature">交互体验</div>
|
||
<div class="col-csr">流畅（已在浏览器）</div>
|
||
<div class="col-ssr">较流畅（交互仍需 JS）</div>
|
||
<div class="col-ssg">较流畅（交互仍需 JS）</div>
|
||
</div>
|
||
<div class="comparison-row">
|
||
<div class="col-feature">SEO 友好度</div>
|
||
<div class="col-csr">差（搜不到内容）</div>
|
||
<div class="col-ssr">好（完整 HTML）</div>
|
||
<div class="col-ssg">好（完整 HTML）</div>
|
||
</div>
|
||
<div class="comparison-row">
|
||
<div class="col-feature">服务器压力</div>
|
||
<div class="col-csr">小（只传 JS）</div>
|
||
<div class="col-ssr">大（每次都渲染）</div>
|
||
<div class="col-ssg">最小（预渲染好）</div>
|
||
</div>
|
||
<div class="comparison-row">
|
||
<div class="col-feature">适合场景</div>
|
||
<div class="col-csr">后台系统、工具应用</div>
|
||
<div class="col-ssr">新闻网站、电商首页</div>
|
||
<div class="col-ssg">博客、文档站</div>
|
||
</div>
|
||
<div class="comparison-row">
|
||
<div class="col-feature">代表框架</div>
|
||
<div class="col-csr">React SPA、Vue SPA</div>
|
||
<div class="col-ssr">Next.js SSR、Nuxt SSR</div>
|
||
<div class="col-ssg">Next.js SSG、Nuxt SSG</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心要点 -->
|
||
<div class="key-takeaway">
|
||
<div class="takeaway-icon">🎯</div>
|
||
<div class="takeaway-content">
|
||
<strong>如何选择？</strong><br>
|
||
<strong>CSR</strong>：适合需要复杂交互、不关心 SEO 的应用（如后台管理系统）<br>
|
||
<strong>SSR</strong>：适合需要首屏快、SEO 好的动态内容网站（如新闻、电商）<br>
|
||
<strong>SSG</strong>：适合内容固定的静态网站（如博客、文档站）<br>
|
||
<strong>现代方案</strong>：混合渲染，首页用 SSG/SSR，后续页面用 CSR，兼顾速度和体验。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
|
||
const activeStrategy = ref('ssg')
|
||
const isAnimating = ref(false)
|
||
const isCooking = ref(false)
|
||
const chefAction = ref('👨🍳 准备中...')
|
||
|
||
const strategies = {
|
||
csr: {
|
||
id: 'csr',
|
||
name: 'CSR',
|
||
sub: '客户端渲染',
|
||
icon: '📦',
|
||
dish: '⚠️ 还没做',
|
||
readyStatus: '等待用户自己烹饪',
|
||
transferItem: '📦 食材包',
|
||
transferLabel: '配送食材包',
|
||
serverLabel: '服务器（配送站）',
|
||
firstScreenScore: 40,
|
||
firstScreenText: '慢',
|
||
interactionScore: 100,
|
||
interactionText: '流畅',
|
||
seoScore: 20,
|
||
seoText: '差',
|
||
color: '#f44336',
|
||
cabinetDesc: ''
|
||
},
|
||
ssr: {
|
||
id: 'ssr',
|
||
name: 'SSR',
|
||
sub: '服务端渲染',
|
||
icon: '👨🍳',
|
||
dish: '🍲 刚做好的菜',
|
||
readyStatus: '热腾腾，直接吃',
|
||
transferItem: '🍲 做好的菜',
|
||
transferLabel: '现做现送',
|
||
serverLabel: '服务器（厨房）',
|
||
firstScreenScore: 90,
|
||
firstScreenText: '快',
|
||
interactionScore: 85,
|
||
interactionText: '较流畅',
|
||
seoScore: 100,
|
||
seoText: '好',
|
||
color: '#2196f3',
|
||
cabinetDesc: ''
|
||
},
|
||
ssg: {
|
||
id: 'ssg',
|
||
name: 'SSG',
|
||
sub: '静态生成',
|
||
icon: '🗄️',
|
||
dish: '🍲 提前做好的菜',
|
||
readyStatus: '保温中，直接吃',
|
||
transferItem: '🍲 预制的菜',
|
||
transferLabel: '直接取',
|
||
serverLabel: '服务器（保温柜）',
|
||
firstScreenScore: 100,
|
||
firstScreenText: '最快',
|
||
interactionScore: 85,
|
||
interactionText: '较流畅',
|
||
seoScore: 100,
|
||
seoText: '好',
|
||
color: '#4caf50',
|
||
cabinetDesc: '所有菜都提前做好了'
|
||
}
|
||
}
|
||
|
||
const currentStrategy = computed(() => strategies[activeStrategy.value])
|
||
|
||
// 开始演示
|
||
const startDemo = async () => {
|
||
if (isAnimating.value) return
|
||
|
||
isAnimating.value = true
|
||
|
||
if (activeStrategy.value === 'csr') {
|
||
// CSR: 传送食材包
|
||
await sleep(1000)
|
||
} else if (activeStrategy.value === 'ssr') {
|
||
// SSR: 厨房做菜
|
||
isCooking.value = true
|
||
chefAction.value = '👨🍳 正在做菜...'
|
||
await sleep(800)
|
||
chefAction.value = '🍳 烹饪中...'
|
||
await sleep(800)
|
||
chefAction.value = '✅ 做好了！'
|
||
isCooking.value = false
|
||
await sleep(400)
|
||
} else {
|
||
// SSG: 直接取菜
|
||
await sleep(600)
|
||
}
|
||
|
||
isAnimating.value = false
|
||
}
|
||
|
||
// 重置演示
|
||
const resetDemo = () => {
|
||
isAnimating.value = false
|
||
isCooking.value = false
|
||
chefAction.value = '👨🍳 准备中...'
|
||
}
|
||
|
||
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
|
||
</script>
|
||
|
||
<style scoped>
|
||
.rendering-demo {
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 16px;
|
||
background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%);
|
||
padding: 24px;
|
||
margin: 20px 0;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
|
||
/* 故事框 */
|
||
.story-box {
|
||
text-align: center;
|
||
margin-bottom: 24px;
|
||
padding: 20px;
|
||
background: linear-gradient(135deg, #fff8e1, #ffecb3);
|
||
border-radius: 16px;
|
||
border: 2px dashed #ffc107;
|
||
}
|
||
|
||
.story-emoji {
|
||
font-size: 48px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.story-title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #8b4513;
|
||
margin: 0 0 8px 0;
|
||
}
|
||
|
||
.story-text {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin: 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 模式选项卡 */
|
||
.mode-tabs {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-bottom: 24px;
|
||
background: white;
|
||
padding: 8px;
|
||
border-radius: 12px;
|
||
border: 2px solid #e0e0e0;
|
||
}
|
||
|
||
.tab-btn {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 16px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tab-btn:hover {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.tab-btn.active {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: white;
|
||
}
|
||
|
||
.tab-icon {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.tab-name {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tab-sub {
|
||
font-size: 12px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 演示容器 */
|
||
.demo-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
background: white;
|
||
border-radius: 16px;
|
||
border: 2px solid #e0e0e0;
|
||
padding: 20px;
|
||
min-height: 300px;
|
||
}
|
||
|
||
.customer-area,
|
||
.kitchen-area {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.customer-icon,
|
||
.kitchen-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.customer-label,
|
||
.kitchen-label {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.table,
|
||
.kitchen-content {
|
||
background: #f5f5f5;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
min-height: 160px;
|
||
}
|
||
|
||
/* 食材包 */
|
||
.ingredients-pack {
|
||
text-align: center;
|
||
}
|
||
|
||
.pack-label {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #f44336;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.pack-content {
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.ingredient {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.instruction {
|
||
font-size: 12px;
|
||
color: #f44336;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 做好的菜 */
|
||
.table-content.ready {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.dish {
|
||
font-size: 64px;
|
||
}
|
||
|
||
.dish-status {
|
||
font-size: 14px;
|
||
color: #4caf50;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 厨房区域 */
|
||
.server-station,
|
||
.server-kitchen,
|
||
.server-cabinet {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.station-icon,
|
||
.cabinet-icon {
|
||
font-size: 48px;
|
||
}
|
||
|
||
.station-label,
|
||
.cabinet-label {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.station-desc,
|
||
.cabinet-desc {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
.chef-action {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #2196f3;
|
||
}
|
||
|
||
.cooking-pot {
|
||
font-size: 64px;
|
||
animation: cook 0.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes cook {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.1); }
|
||
}
|
||
|
||
/* 传输区域 */
|
||
.transfer-area {
|
||
flex: 0 0 120px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.transfer-animation {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
animation: slideRight 1s ease-in-out;
|
||
}
|
||
|
||
@keyframes slideRight {
|
||
0% { transform: translateX(-20px); opacity: 0; }
|
||
50% { opacity: 1; }
|
||
100% { transform: translateX(20px); opacity: 0; }
|
||
}
|
||
|
||
.transfer-content {
|
||
font-size: 40px;
|
||
}
|
||
|
||
.transfer-arrow {
|
||
font-size: 32px;
|
||
color: #4caf50;
|
||
}
|
||
|
||
.transfer-info {
|
||
font-size: 12px;
|
||
color: #666;
|
||
text-align: center;
|
||
}
|
||
|
||
.info-label {
|
||
padding: 8px 16px;
|
||
background: #e0e0e0;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* 性能指标 */
|
||
.metrics-panel {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.metric-item {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
border: 2px solid #e0e0e0;
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: 13px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.metric-bar {
|
||
height: 12px;
|
||
background: #f5f5f5;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.metric-fill {
|
||
height: 100%;
|
||
transition: width 0.5s ease;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 控制按钮 */
|
||
.controls {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn:hover:not(:disabled) {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: white;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
}
|
||
|
||
/* 对比表格 */
|
||
.comparison-table {
|
||
background: white;
|
||
border-radius: 16px;
|
||
border: 2px solid #e0e0e0;
|
||
overflow: hidden;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.table-title {
|
||
padding: 16px;
|
||
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #1565c0;
|
||
text-align: center;
|
||
}
|
||
|
||
.table-content {
|
||
padding: 0;
|
||
}
|
||
|
||
.comparison-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||
gap: 12px;
|
||
padding: 16px;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.comparison-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.comparison-row.header {
|
||
background: #f5f5f5;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.col-feature {
|
||
color: #666;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.col-csr {
|
||
color: #f44336;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.col-ssr {
|
||
color: #2196f3;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.col-ssg {
|
||
color: #4caf50;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.comparison-row.header .col-csr,
|
||
.comparison-row.header .col-ssr,
|
||
.comparison-row.header .col-ssg {
|
||
color: #333;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 核心要点 */
|
||
.key-takeaway {
|
||
display: flex;
|
||
gap: 16px;
|
||
padding: 20px;
|
||
background: linear-gradient(135deg, #d4edda, #c3e6cb);
|
||
border-radius: 12px;
|
||
border-left: 4px solid #28a745;
|
||
}
|
||
|
||
.takeaway-icon {
|
||
font-size: 32px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.takeaway-content {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: #155724;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
/* 响应式 */
|
||
@media (max-width: 768px) {
|
||
.mode-tabs {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.demo-container {
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.transfer-area {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.metrics-panel {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.comparison-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
}
|
||
|
||
.comparison-row.header {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|