Преглед изворни кода

1、优化ai图片、视频、植物等页面最下排按钮的尺寸自适应

liyanbo пре 3 месеци
родитељ
комит
568263b7eb

+ 35 - 6
src/components/ai/image/ImageToImage.vue

@@ -653,15 +653,27 @@ const download = (event, activeIndex) => {
   display: flex;
   padding: rpx(10);
   gap: rpx(5);
+  align-items: center;
+  align-content: center;
+  flex-wrap: nowrap;
+  min-height: rpx(30);
+  
+  > * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: rpx(20);
+    box-sizing: border-box;
+  }
+  
   .speech-btn {
     padding: rpx(5) rpx(10);
     background: #fff;
     border: 1px solid #ffce1b;
     border-radius: rpx(5);
     cursor: pointer;
-    display: flex;
-    align-items: center;
     gap: rpx(4);
+    height: 100%;
     &.recording {
       background: #ffeeba;
       border-color: #ffc107;
@@ -679,24 +691,41 @@ const download = (event, activeIndex) => {
       transition: transform 0.3s ease;
     }
   }
+  
   // 终止按钮样式
   .stop-btn {
     cursor: pointer;
-    display: flex;
-    align-items: center;
+    height: 100%;
     img {
       width: rpx(20);
       height: rpx(20);
     }
   }
+  
+  // 确保图片上传组件垂直居中
+  :deep(.el-upload) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  // 确保语音输入组件垂直居中
+  :deep(.voice-input-container) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
+
 .input-section input {
   flex: 1;
   padding: rpx(5);
   font-size: rpx(7);
   border: 1px solid #ccc;
   border-radius: rpx(5);
+  min-width: rpx(50);
 }
+
 .input-section button {
   padding: rpx(5) rpx(15);
   background: linear-gradient(
@@ -709,8 +738,8 @@ const download = (event, activeIndex) => {
   font-size: rpx(7);
   border-radius: rpx(5);
   cursor: pointer;
-    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
-
+  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
+  white-space: nowrap;
 }
 
 .image-upload-section {

+ 35 - 6
src/components/ai/video/ImageToVideo.vue

@@ -534,14 +534,26 @@ const inProgressTimerFun = () => {
   display: flex;
   padding: rpx(10);
   gap: rpx(5);
+  align-items: center;
+  align-content: center;
+  flex-wrap: nowrap;
+  min-height: rpx(30);
+  
+  > * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: rpx(20);
+    box-sizing: border-box;
+  }
+  
   .speech-btn {
     padding: rpx(5) rpx(10);
     background: #fff;
     border: 1px solid #ffce1b;
     border-radius: rpx(5);
     cursor: pointer;
-    display: flex;
-    align-items: center;
+    height: 100%;
     &.recording {
       background: #ffeeba;
       border-color: #ffc107;
@@ -555,24 +567,41 @@ const inProgressTimerFun = () => {
       color: #666;
     }
   }
+  
   // 终止按钮样式
   .stop-btn {
     cursor: pointer;
-    display: flex;
-    align-items: center;
+    height: 100%;
     img {
       width: rpx(20);
       height: rpx(20);
     }
   }
+  
+  // 确保图片上传组件垂直居中
+  :deep(.el-upload) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  // 确保语音输入组件垂直居中
+  :deep(.voice-input-container) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
+
 .input-section input {
   flex: 1;
   padding: rpx(5);
   font-size: rpx(7);
   border: 1px solid #ccc;
   border-radius: rpx(5);
+  min-width: rpx(50);
 }
+
 .input-section button {
   padding: rpx(5) rpx(15);
   background: linear-gradient(
@@ -585,8 +614,8 @@ const inProgressTimerFun = () => {
   font-size: rpx(7);
   border-radius: rpx(5);
   cursor: pointer;
-    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
-
+  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
+  white-space: nowrap;
 }
 
 .image-upload-section {

+ 36 - 4
src/components/ai/vision/VisionThink.vue

@@ -498,16 +498,28 @@ const imageList = ref([]) // image 列表
 
 .input-section {
   display: flex;
+  align-items: center;
+  align-content: center;
   padding: rpx(10);
   gap: rpx(5);
+  flex-wrap: nowrap;
+  min-height: rpx(30);
+  
+  // 确保所有子组件容器也垂直居中
+  > * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: rpx(20);
+    box-sizing: border-box;
+  }
+  
   .speech-btn {
     padding: rpx(5) rpx(10);
     background: #fff;
     border: 1px solid #ffce1b;
     border-radius: rpx(5);
     cursor: pointer;
-    display: flex;
-    align-items: center;
     &.recording {
       background: #ffeeba;
       border-color: #ffc107;
@@ -521,24 +533,28 @@ const imageList = ref([]) // image 列表
       color: #666;
     }
   }
+  
   // 终止按钮样式
   .stop-btn {
     cursor: pointer;
-    display: flex;
-    align-items: center;
     img {
       width: rpx(20);
       height: rpx(20);
     }
   }
 }
+
 .input-section input {
   flex: 1;
+  min-width: rpx(50);
   padding: rpx(5);
   font-size: rpx(7);
   border: 1px solid #ccc;
   border-radius: rpx(5);
+  height: rpx(20);
+  box-sizing: border-box;
 }
+
 .input-section button {
   padding: rpx(5) rpx(15);
   background: linear-gradient(
@@ -552,7 +568,23 @@ const imageList = ref([]) // image 列表
   border-radius: rpx(5);
   cursor: pointer;
   box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);
+  white-space: nowrap;
+}
 
+// 图片上传组件的容器样式
+.input-section :deep(.el-upload) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: rpx(20);
+}
+
+// 语音输入组件的容器样式
+.input-section :deep(.voice-input-container) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: rpx(20);
 }
 
 .image-upload-section {