feat: 收口组件样式并调整移动端侧栏

src/features/production/components/ShotProductionAssets.vue

@@ -523,3 +523,46 @@ async function inspectSpecs() {
         />
     </section>
 </template>
+
+<style>
+/* 本组件专属布局与 Naive 内部结构覆盖。 */
+@reference "../../../styles/styles.css";
+.production-stage {
+    @apply py-5 px-0;
+}
+.production-stage:first-of-type {
+    @apply border-t-0;
+}
+.production-stage-heading {
+    @apply flex items-start justify-between gap-4;
+}
+.keyframe-grid {
+    @apply grid grid-cols-[repeat(3,_minmax(0,_1fr))] gap-3;
+}
+.keyframe-card {
+    @apply overflow-hidden rounded-none bg-(--app-subtle);
+}
+.keyframe-card .asset-image {
+    @apply aspect-video rounded-none;
+}
+.video-record {
+    @apply flex overflow-hidden rounded-none bg-(--app-subtle);
+}
+.production-video {
+    @apply w-[min(44%,390px)] min-h-[170px] bg-ink object-contain;
+}
+@media (max-width: 760px) {
+    .keyframe-grid {
+        @apply grid-cols-[repeat(2,_minmax(0,_1fr))];
+    }
+    .video-record {
+        @apply block;
+    }
+    .production-video {
+        @apply w-full;
+    }
+}
+.production-video {
+    @apply bg-[#080808];
+}
+</style>