拍照样式调整

frontend/src/views/Photography/shot.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="photography-page flex-col">
-    <div class="main-container flex-col">
+    <div class="main-container">
       <div class="content-wrapper flex-row">
+        <img class="camera-image" referrerpolicy="no-referrer" src="@/assets/images/Photography/camera-icon.png" />
         <div class="step-number flex-col"><span class="text_22">1</span></div>
         <div class="step-one flex-col justify-between">
           <div class="step-header flex-row">
@@ -41,6 +42,7 @@
               src="@/assets/images/Photography/remote-control.png" />
           </div>
         </div>
+        <div class="step-number flex-col"><span class="text_22">2</span></div>
         <div class="step-two flex-col justify-between">
           <span class="step-title">第二步：启动拍摄（根据左右脚按遥控器左右键启动）</span>
           <div class="shooting-container flex-col">
@@ -62,7 +64,9 @@
             <span class="right-foot-text">遥控器右键：控制右脚鞋启动拍摄</span>
           </div>
         </div>
-        <div class="history-section flex-col">
+    
+      </div>
+      <div class="history-section flex-col">
           <span class="history-title">拍摄历史</span>
           <img class="divider-line" referrerpolicy="no-referrer" src="@/assets/images/Photography/divider-line.png" />
           <div class="history-warp">
@@ -180,9 +184,7 @@
           <div @click="loading = !loading" class="next-step button--primary1 flex-col"><span
               class="next-step-text">拍摄完毕，进入下一步处理</span></div>
         </div>
-      </div>
-      <img class="camera-image" referrerpolicy="no-referrer" src="@/assets/images/Photography/camera-icon.png" />
-      <div class="step-number-two flex-col"><span class="step-text">2</span></div>
+   
     </div>
   </div>
 </template>
@@ -202,9 +204,18 @@ const test_image_url = ref('https://shadow.elemecdn.com/app/element/hamburger.9c
   position: relative;
   .main-container {
     position: relative;
-    margin-bottom: 1px;
+    display: flex;
     .content-wrapper {
-      margin-left: 20px;
+      flex-grow: 1 ;
+      position: relative;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin:  auto;
+      justify-content: center;
+
+  
       .step-number {
         background-color: rgba(22, 119, 255, 1);
         border-radius: 50%;
@@ -541,10 +552,46 @@ const test_image_url = ref('https://shadow.elemecdn.com/app/element/hamburger.9c
         }
       }
 
-      .history-section {
+    
+    }
+
+    .camera-image {
+      position: absolute;
+      left: 620px;
+      top: 220px;
+      width: 111px;
+      height: 111px;
+    }
+
+    .step-number-two {
+      background-color: rgba(22, 119, 255, 1);
+      border-radius: 50%;
+      height: 32px;
+      width: 32px;
+      position: absolute;
+      left: 450px;
+      top: 51px;
+
+      .step-text {
+        width: 9px;
+        height: 22px;
+        overflow-wrap: break-word;
+        color: rgba(255, 255, 255, 1);
+        font-size: 14px;
+        font-weight: NaN;
+        text-align: right;
+        white-space: nowrap;
+        line-height: 22px;
+        margin: 5px 0 0 12px;
+      }
+    }
+  }
+}
+
+.history-section {
         background-color: rgba(234, 236, 237, 1);
         width: 332px;
-        height: 738px;
+        height: 100vh;
 
         .history-title {
           width: 64px;
@@ -614,40 +661,6 @@ const test_image_url = ref('https://shadow.elemecdn.com/app/element/hamburger.9c
           }
         }
       }
-    }
-
-    .camera-image {
-      position: absolute;
-      left: 304px;
-      top: 212px;
-      width: 111px;
-      height: 111px;
-    }
-
-    .step-number-two {
-      background-color: rgba(22, 119, 255, 1);
-      border-radius: 50%;
-      height: 32px;
-      width: 32px;
-      position: absolute;
-      left: 450px;
-      top: 51px;
-
-      .step-text {
-        width: 9px;
-        height: 22px;
-        overflow-wrap: break-word;
-        color: rgba(255, 255, 255, 1);
-        font-size: 14px;
-        font-weight: NaN;
-        text-align: right;
-        white-space: nowrap;
-        line-height: 22px;
-        margin: 5px 0 0 12px;
-      }
-    }
-  }
-}
 </style>
 
 <style lang="scss" scoped></style>