feat: enhance demo components with consistent styling and info boxes
- Add standardized header and info box components to all demo files - Improve visual consistency with theme colors and spacing - Add max-height and overflow-y for better content containment - Update package.json build script with --force flag - Add .gitignore entries for REFACTORING files - Fix table formatting in audio-intro.md
This commit is contained in:
sanbuphy
@@ -408,14 +408,15 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.animation-demo {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.playback-controls {
|
||||
@@ -426,13 +427,16 @@ onUnmounted(() => {
|
||||
|
||||
.play-btn,
|
||||
.reset-btn {
|
||||
padding: 10px 20px;
|
||||
padding: 0.625rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.25s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
@@ -442,7 +446,8 @@ onUnmounted(() => {
|
||||
|
||||
.play-btn:hover {
|
||||
background: #27ae60;
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
@@ -452,28 +457,35 @@ onUnmounted(() => {
|
||||
|
||||
.reset-btn:hover {
|
||||
background: #7f8c8d;
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(149, 165, 166, 0.4);
|
||||
}
|
||||
|
||||
.animation-selector {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.animation-selector label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.animation-selector select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.animation-selector select:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.parameters {
|
||||
@@ -531,30 +543,35 @@ onUnmounted(() => {
|
||||
.canvas-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 4px;
|
||||
border: 3px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.code-display {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #2c3e50;
|
||||
border-radius: 6px;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.code-display h4 {
|
||||
color: #ecf0f1;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 14px;
|
||||
color: #f8fafc;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-display pre {
|
||||
@@ -562,54 +579,60 @@ canvas {
|
||||
}
|
||||
|
||||
.code-display code {
|
||||
color: #ecf0f1;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: #e2e8f0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.explanation h4 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #2c3e50;
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.explanation ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.explanation li {
|
||||
margin-bottom: 8px;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: 15px;
|
||||
padding: 12px;
|
||||
background: #fff3cd;
|
||||
border-left: 4px solid #ffc107;
|
||||
border-radius: 4px;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #f59e0b;
|
||||
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #856404;
|
||||
font-size: 0.875rem;
|
||||
color: #92400e;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
font-size: 16px;
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,85 +13,89 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="canvas-basics-demo">
|
||||
<div class="control-panel">
|
||||
<div class="shape-selector">
|
||||
<label>Shape / 形状</label>
|
||||
<div class="button-group">
|
||||
<button
|
||||
v-for="shape in shapes"
|
||||
:key="shape.value"
|
||||
:class="{ active: currentShape === shape.value }"
|
||||
@click="currentShape = shape.value"
|
||||
>
|
||||
{{ shape.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="parameters">
|
||||
<div class="param-row">
|
||||
<label>Fill Color / 填充颜色</label>
|
||||
<input type="color" v-model="fillColor" />
|
||||
</div>
|
||||
|
||||
<div class="param-row">
|
||||
<label>Stroke Color / 描边颜色</label>
|
||||
<input type="color" v-model="strokeColor" />
|
||||
</div>
|
||||
|
||||
<div class="param-row">
|
||||
<label>Stroke Width / 描边宽度: {{ strokeWidth }}px</label>
|
||||
<input type="range" v-model.number="strokeWidth" min="1" max="20" />
|
||||
</div>
|
||||
|
||||
<div class="param-row" v-if="currentShape === 'rect'">
|
||||
<label>Size / 大小: {{ rectSize }}px</label>
|
||||
<input type="range" v-model.number="rectSize" min="20" max="200" />
|
||||
</div>
|
||||
|
||||
<div class="param-row" v-if="currentShape === 'circle'">
|
||||
<label>Radius / 半径: {{ circleRadius }}px</label>
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="circleRadius"
|
||||
min="10"
|
||||
max="150"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="param-row" v-if="currentShape === 'line'">
|
||||
<label>Line Length / 线条长度: {{ lineLength }}px</label>
|
||||
<input type="range" v-model.number="lineLength" min="50" max="300" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="draw-btn" @click="draw">
|
||||
<span class="icon">🎨</span>
|
||||
Draw / 绘制
|
||||
</button>
|
||||
|
||||
<button class="clear-btn" @click="clearCanvas">
|
||||
<span class="icon">🗑️</span>
|
||||
Clear / 清除
|
||||
</button>
|
||||
<div class="demo-header">
|
||||
<span class="icon">🎨</span>
|
||||
<span class="title">Canvas 基础</span>
|
||||
<span class="subtitle">用代码画图（通俗说：编程画板）</span>
|
||||
</div>
|
||||
|
||||
<div class="canvas-container">
|
||||
<canvas ref="canvasRef" width="600" height="400"></canvas>
|
||||
</div>
|
||||
<div class="demo-content">
|
||||
<div class="controls">
|
||||
<div class="shape-selector">
|
||||
<label>Shape / 形状</label>
|
||||
<div class="button-group">
|
||||
<button
|
||||
v-for="shape in shapes"
|
||||
:key="shape.value"
|
||||
:class="{ active: currentShape === shape.value }"
|
||||
@click="currentShape = shape.value"
|
||||
>
|
||||
{{ shape.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-display">
|
||||
<h4>Code / 代码</h4>
|
||||
<pre><code>{{ currentCode }}</code></pre>
|
||||
<div class="parameters">
|
||||
<div class="param-row">
|
||||
<label>Fill Color / 填充颜色</label>
|
||||
<input type="color" v-model="fillColor" />
|
||||
</div>
|
||||
|
||||
<div class="param-row">
|
||||
<label>Stroke Color / 描边颜色</label>
|
||||
<input type="color" v-model="strokeColor" />
|
||||
</div>
|
||||
|
||||
<div class="param-row">
|
||||
<label>Stroke Width / 描边宽度: {{ strokeWidth }}px</label>
|
||||
<input type="range" v-model.number="strokeWidth" min="1" max="20" />
|
||||
</div>
|
||||
|
||||
<div class="param-row" v-if="currentShape === 'rect'">
|
||||
<label>Size / 大小: {{ rectSize }}px</label>
|
||||
<input type="range" v-model.number="rectSize" min="20" max="200" />
|
||||
</div>
|
||||
|
||||
<div class="param-row" v-if="currentShape === 'circle'">
|
||||
<label>Radius / 半径: {{ circleRadius }}px</label>
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="circleRadius"
|
||||
min="10"
|
||||
max="150"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="param-row" v-if="currentShape === 'line'">
|
||||
<label>Line Length / 线条长度: {{ lineLength }}px</label>
|
||||
<input type="range" v-model.number="lineLength" min="50" max="300" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="draw-btn" @click="draw">
|
||||
<span class="icon">🎨</span>
|
||||
Draw / 绘制
|
||||
</button>
|
||||
|
||||
<button class="clear-btn" @click="clearCanvas">
|
||||
<span class="icon">🗑️</span>
|
||||
Clear / 清除
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="canvas-container">
|
||||
<canvas ref="canvasRef" width="600" height="400"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="code-display">
|
||||
<h4>Code / 代码</h4>
|
||||
<pre><code>{{ currentCode }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<p>
|
||||
<span class="icon">💡</span>
|
||||
<strong>提示：</strong>
|
||||
Canvas
|
||||
是一个位图画布，所有绘制都是像素操作。绘制后无法修改已有内容，只能覆盖或清除重绘。
|
||||
</p>
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心思想：</strong>Canvas 是一个位图画布，所有绘制都是像素操作。绘制后无法修改已有内容，只能覆盖或清除重绘。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -101,8 +105,8 @@ import { ref, computed, watch, onMounted } from 'vue'
|
||||
|
||||
const canvasRef = ref(null)
|
||||
const currentShape = ref('rect')
|
||||
const fillColor = ref('#3498db')
|
||||
const strokeColor = ref('#2c3e50')
|
||||
const fillColor = ref('#3b82f6')
|
||||
const strokeColor = ref('#1e293b')
|
||||
const strokeWidth = ref(2)
|
||||
const rectSize = ref(100)
|
||||
const circleRadius = ref(50)
|
||||
@@ -231,145 +235,193 @@ onMounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.canvas-basics-demo {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
margin-bottom: 20px;
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.demo-header .icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.875rem;
|
||||
margin-left: 0.75rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.shape-selector {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.shape-selector label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 0.625rem;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 0.625rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.button-group button {
|
||||
padding: 8px 16px;
|
||||
border: 2px solid #ddd;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 0.625rem 1.25rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.button-group button:hover {
|
||||
border-color: #3498db;
|
||||
background: #f0f8ff;
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-bg-soft);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.button-group button.active {
|
||||
border-color: #3498db;
|
||||
background: #3498db;
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.parameters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 15px;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.param-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.param-row label {
|
||||
font-size: 13px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.param-row input[type='range'] {
|
||||
width: 100%;
|
||||
accent-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.param-row input[type='color'] {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: 1px solid #ddd;
|
||||
height: 32px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.draw-btn,
|
||||
.clear-btn {
|
||||
padding: 10px 20px;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
margin-right: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.draw-btn {
|
||||
background: #3498db;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.draw-btn:hover {
|
||||
background: #2980b9;
|
||||
transform: translateY(-1px);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
background: #e74c3c;
|
||||
background: var(--vp-c-danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.clear-btn:hover {
|
||||
background: #c0392b;
|
||||
transform: translateY(-1px);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
border: 3px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
max-width: 100%;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.code-display {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #2c3e50;
|
||||
border-radius: 6px;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.code-display h4 {
|
||||
color: #ecf0f1;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 14px;
|
||||
color: #f8fafc;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-display pre {
|
||||
@@ -377,31 +429,39 @@ canvas {
|
||||
}
|
||||
|
||||
.code-display code {
|
||||
color: #ecf0f1;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: #e2e8f0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: 15px;
|
||||
padding: 12px;
|
||||
background: #fff3cd;
|
||||
border-left: 4px solid #ffc107;
|
||||
border-radius: 4px;
|
||||
margin-top: 1.5rem;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
color: #92400e;
|
||||
border-left: 4px solid #f59e0b;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #856404;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
gap: 0.625rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
font-size: 16px;
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
color: #78350f;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -272,117 +272,140 @@ onMounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.coordinate-demo {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.toggle-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.toggle-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.toggle-option:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.toggle-option input[type='checkbox'] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.info-display {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.info-item .label {
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.info-item .value {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #2c3e50;
|
||||
background: #f0f0f0;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
color: var(--vp-c-text-1);
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 4px;
|
||||
border: 3px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
cursor: crosshair;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.explanation {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.explanation h4 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #2c3e50;
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.explanation ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.explanation li {
|
||||
margin-bottom: 8px;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.code-display {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #2c3e50;
|
||||
border-radius: 6px;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.code-display h4 {
|
||||
color: #ecf0f1;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 14px;
|
||||
color: #f8fafc;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-display pre {
|
||||
@@ -390,31 +413,33 @@ canvas {
|
||||
}
|
||||
|
||||
.code-display code {
|
||||
color: #ecf0f1;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: #e2e8f0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: 15px;
|
||||
padding: 12px;
|
||||
background: #fff3cd;
|
||||
border-left: 4px solid #ffc107;
|
||||
border-radius: 4px;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #f59e0b;
|
||||
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #856404;
|
||||
font-size: 0.875rem;
|
||||
color: #92400e;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
font-size: 16px;
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -491,14 +491,15 @@ onMounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.event-demo {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.mode-selector {
|
||||
@@ -514,53 +515,60 @@ onMounted(() => {
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.button-group button {
|
||||
padding: 8px 16px;
|
||||
border: 2px solid #ddd;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.button-group button:hover {
|
||||
border-color: #3498db;
|
||||
background: #f0f8ff;
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-bg-soft);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.button-group button.active {
|
||||
border-color: #3498db;
|
||||
background: #3498db;
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.instructions {
|
||||
margin-bottom: 15px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.instructions h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #2c3e50;
|
||||
font-size: 14px;
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.instructions ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.instructions li {
|
||||
margin-bottom: 6px;
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
margin-bottom: 0.375rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.813rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.event-log {
|
||||
@@ -635,36 +643,41 @@ onMounted(() => {
|
||||
.canvas-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 4px;
|
||||
border: 3px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
cursor: crosshair;
|
||||
outline: none;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
canvas:focus {
|
||||
border-color: #3498db;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.code-display {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #2c3e50;
|
||||
border-radius: 6px;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.code-display h4 {
|
||||
color: #ecf0f1;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 14px;
|
||||
color: #f8fafc;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-display pre {
|
||||
@@ -672,32 +685,36 @@ canvas:focus {
|
||||
}
|
||||
|
||||
.code-display code {
|
||||
color: #ecf0f1;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: #e2e8f0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.explanation h4 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #2c3e50;
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.explanation ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.explanation li {
|
||||
margin-bottom: 8px;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -378,14 +378,15 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.particle-demo {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.effect-selector {
|
||||
@@ -401,29 +402,33 @@ onUnmounted(() => {
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.button-group button {
|
||||
padding: 8px 16px;
|
||||
border: 2px solid #ddd;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.button-group button:hover {
|
||||
border-color: #3498db;
|
||||
background: #f0f8ff;
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-bg-soft);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.button-group button.active {
|
||||
border-color: #3498db;
|
||||
background: #3498db;
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.parameters {
|
||||
@@ -499,31 +504,36 @@ onUnmounted(() => {
|
||||
.canvas-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 4px;
|
||||
border: 3px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
cursor: crosshair;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.code-display {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #2c3e50;
|
||||
border-radius: 6px;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.code-display h4 {
|
||||
color: #ecf0f1;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 14px;
|
||||
color: #f8fafc;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-display pre {
|
||||
@@ -531,54 +541,60 @@ canvas {
|
||||
}
|
||||
|
||||
.code-display code {
|
||||
color: #ecf0f1;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: #e2e8f0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.explanation h4 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #2c3e50;
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.explanation ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.explanation li {
|
||||
margin-bottom: 8px;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: 15px;
|
||||
padding: 12px;
|
||||
background: #fff3cd;
|
||||
border-left: 4px solid #ffc107;
|
||||
border-radius: 4px;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #f59e0b;
|
||||
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #856404;
|
||||
font-size: 0.875rem;
|
||||
color: #92400e;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
font-size: 16px;
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -553,14 +553,15 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.performance-demo {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.test-selector {
|
||||
@@ -576,29 +577,33 @@ onUnmounted(() => {
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.button-group button {
|
||||
padding: 8px 16px;
|
||||
border: 2px solid #ddd;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.button-group button:hover {
|
||||
border-color: #3498db;
|
||||
background: #f0f8ff;
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-bg-soft);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.button-group button.active {
|
||||
border-color: #3498db;
|
||||
background: #3498db;
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.parameters {
|
||||
@@ -721,28 +726,34 @@ onUnmounted(() => {
|
||||
.canvas-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 4px;
|
||||
border: 3px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.comparison {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.comparison h4 {
|
||||
margin: 0 0 15px 0;
|
||||
color: #2c3e50;
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
@@ -756,29 +767,37 @@ canvas {
|
||||
|
||||
.comparison-table th,
|
||||
.comparison-table td {
|
||||
padding: 10px;
|
||||
padding: 0.625rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.comparison-table th {
|
||||
background: #f8f9fa;
|
||||
background: var(--vp-c-bg-soft);
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.813rem;
|
||||
}
|
||||
|
||||
.comparison-table td {
|
||||
font-size: 0.813rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.code-display {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #2c3e50;
|
||||
border-radius: 6px;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.code-display h4 {
|
||||
color: #ecf0f1;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 14px;
|
||||
color: #f8fafc;
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-display pre {
|
||||
@@ -786,32 +805,36 @@ canvas {
|
||||
}
|
||||
|
||||
.code-display code {
|
||||
color: #ecf0f1;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: #e2e8f0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.25rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.explanation h4 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #2c3e50;
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.explanation ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.explanation li {
|
||||
margin-bottom: 8px;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user