网页优化

release/SpineViewer站点/style.css

@@ -1,7 +1,6 @@
 /* ==========================================================================
    SpineViewer 插件介绍网站样式
    - 品牌色取自插件图标（红），查看器演示区颜色取自 viewer/spine.html
-   - 零外部依赖，可离线打开
    ========================================================================== */
 
 :root {
@@ -212,6 +211,14 @@ html[data-theme="dark"] .icon-moon { display: none; }
 
 .btn-ghost:hover { border-color: color-mix(in srgb, var(--cyan) 45%, var(--border)); transform: translateY(-1px); }
 
+.btn-download {
+	background: linear-gradient(135deg, #1976d2, #4fc1ff);
+	color: #fff;
+	box-shadow: 0 10px 26px rgba(25, 118, 210, .28);
+}
+
+.btn-download:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(25, 118, 210, .36); }
+
 .btn-sm { padding: 8px 15px; font-size: 13px; border-radius: 9px; }
 
 .link-arrow {
@@ -309,7 +316,7 @@ html[data-theme="dark"] .icon-moon { display: none; }
 .stats {
 	list-style: none;
 	display: grid;
-	grid-template-columns: repeat(4, 1fr);
+	grid-template-columns: repeat(3, 1fr);
 	gap: 12px;
 	padding: 0;
 	margin: 0;
@@ -516,39 +523,9 @@ html[data-theme="dark"] .f-icon { color: color-mix(in srgb, var(--accent) 80%, #
 	font-size: 12.5px;
 }
 
-/* ---------- 实际界面 ---------- */
+/* ---------- 交互演示 ---------- */
 
-.gallery { display: grid; gap: 16px; }
-
-.crop-grid {
-	display: grid;
-	grid-template-columns: minmax(170px, 215px) 1fr;
-	gap: 16px;
-	align-items: start;
-}
-
-.crop.toolbar { grid-column: 1 / -1; }
-
-.crop.animlist { grid-column: 1; }
-
-.crop.timeline { grid-column: 2; }
-
-.crop.animlist img {
-	display: block;
-	width: 100%;
-	max-width: 128px;
-	margin: 18px auto;
-	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
-	border-radius: 6px;
-}
-
-.crop.toolbar img, .crop.timeline img { border-radius: 6px; }
-
-.demo-block { margin-top: 58px; }
-
-.demo-head h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.01em; }
-
-.demo-head p { margin: 0 0 20px; color: var(--text-dim); font-size: 14.5px; line-height: 1.75; max-width: 780px; }
+#interaction { padding-top: 48px; }
 
 /* ---------- 查看器界面复刻（配色与 viewer/spine.html 一致） ---------- */
 
@@ -1153,9 +1130,6 @@ html[data-theme="light"] .viewer {
 @media (max-width: 1020px) {
 	.hero-grid { grid-template-columns: 1fr; gap: 36px; }
 	.stats { grid-template-columns: repeat(2, 1fr); }
-	.crop-grid { grid-template-columns: 1fr; }
-	.crop.toolbar, .crop.animlist, .crop.timeline { grid-column: 1; }
-	.crop.animlist img { max-width: 132px; }
 }
 
 @media (max-width: 880px) {
@@ -1181,7 +1155,7 @@ html[data-theme="light"] .viewer {
 
 @media (max-width: 520px) {
 	.wrap { padding: 0 16px; }
-	.stats { grid-template-columns: 1fr 1fr; gap: 10px; }
+	.stats { grid-template-columns: 1fr; gap: 10px; }
 	.brand-ver { display: none; }
 	.viewer { height: 520px; }
 	.v-tl-labels { min-width: 96px; }