feat: 对接各个视频数据

src/components/Guide/StepNavigation.vue

@@ -210,6 +210,9 @@ onMounted(() => {
   background: rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(8px);
   animation: fadeIn 0.3s ease-out;
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* padding: 100px 0; */
 }
 
 .drawer-container {
@@ -237,13 +240,19 @@ onMounted(() => {
     rgba(20, 30, 45, 0.85) 100%
   ); */
   width: 648px;
+  height: 1080px;
   background-image: url('@/assets/images/vlog/专业剖析侧边.png');
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
   backdrop-filter: blur(20px);
   display: flex;
   flex-direction: column;
   /* border-left: 1px solid rgba(255, 255, 255, 0.1); */
-  border-radius: 12px 0 0 12px;
-  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
+  /* border-radius: 12px 0 0 12px;
+  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3); */
+
+  padding: 100px 0;
 }
 
 .close-button {
@@ -356,17 +365,26 @@ onMounted(() => {
 }
 
 .step-label--planning {
-  background: linear-gradient(135deg, #f97316, #ea580c);
+  background: linear-gradient(135deg, #e38872, #e38872);
   box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
 }
 
-.step-label--post {
+/* 蓝色 */
+.step-label--blue {
   background: linear-gradient(135deg, #0ea5e9, #0284c7);
   box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
 }
 
+/* 天蓝色 */
+.step-label--post {
+  /* background: linear-gradient(180deg, #9ed5ee, #0ea5e9); */
+  background-color: #70c7ef;
+  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
+}
+
 .step-label--other {
-  background: linear-gradient(135deg, #a855f7, #9333ea);
+  /* background: linear-gradient(135deg, #a855f7, #9445de); */
+  background-color: #5f15d7;
   box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
 }