智能绘图图片和实例横屏样式优化

src/components/ai/image/TextToImage.vue

@@ -71,7 +71,7 @@
                 <el-image
                     v-for="(image, index) in demoImageList"
                     :key="index"
-                    style=" width: fit-content; height: 180px; margin: 10px;"
+                    class="demo-image"
                     :src="image"
                     :preview-src-list="demoImageList"
                     fit="cover"
@@ -562,7 +562,15 @@ const download = (activeIndex) => {
 
 .image-list {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.demo-image {
+  width: fit-content;
+  height: rpx(80);
+  margin: rpx(5);
 }
 
 

src/views/AIPage/AIPainting.vue

@@ -32,7 +32,6 @@
       <div class="img-box">
         <p>
           <img
-              style=" width: fit-content; height: 180px; margin: 10px;"
               src="@/assets/images/color.png"
               class="avatar user"
           />
@@ -199,9 +198,9 @@ const toggleDrawer = () => {
   background-color: #ece9fd;
 }
 .left-group2 img {
-  width: rpx(110);
-  height: auto;
-  margin-top: rpx(30);
+  width: fit-content;
+  height: rpx(100);
+  margin: rpx(5);
 }
 .title-box {
   height: rpx(50);