Update: UIKit ImageGallery style

easemob · Oct 8, 2024 · 093c55d · 093c55d
1 parent 8c2efe7
commit 093c55d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/docs/.vuepress/components/ImageGallery.vue b/docs/.vuepress/components/ImageGallery.vue
@@ -11,11 +11,17 @@
 <script>
 export default {
   name: 'ImageGallery',
+  props: {
+    columns: {
+      type: Number,
+      default: 2
+    }
+  },
   computed: {
     imageRows() {
       const rows = []
       const slotsContent = this.$slots.default()
-      const imagesPerRow = 2
+      const imagesPerRow = this.columns
       for (let i = 0; i < slotsContent.length; i += imagesPerRow) {
         rows.push(slotsContent.slice(i, i + imagesPerRow))
       }
@@ -29,13 +35,13 @@ export default {
 .image-gallery {
   display: flex;
   flex-direction: column;
-  gap: 20px; /* 行之间的间距 */
-  padding: 20px;
+  gap: 5px; /* 行之间的间距 */
+  padding: 10px;
 
   .image-row {
     display: flex;
     justify-content: space-between; /* 确保每行两个图片均匀分布 */
-    gap: 15px; /* 图片之间的间距 */
+    gap: 5px; /* 图片之间的间距 */
     // padding: 5px; /* 行的内边距 */
     // border: 1px solid #ccc; /* 行的边框样式 */
     // box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 行的阴影 */
@@ -49,7 +55,7 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center; /* 居中对齐 */
-    border-radius: 6px;
+    border-radius: 8px;
   }
 
   .image-item .image-title {
@@ -58,16 +64,15 @@ export default {
     font-weight: 600;
     background-color: #ebeff5;
     padding: 12px 0;
+    border-radius: 8px;
   }
 
   .image-item img {
-    height: 346px;
+    height: 400px;
     display: block;
     margin-top: 20px;
     margin-bottom: 40px;
-    border-radius: 16px;
-    max-width: 98%;
-    border: 4px solid #dde5ee;
+    max-width: 97%;
   }
 }
 </style>
diff --git a/docs/uikit/chatroomuikit/android/roomfeature_common.md b/docs/uikit/chatroomuikit/android/roomfeature_common.md
@@ -17,6 +17,10 @@ ChatroomUIKit 提供离开聊天室功能。聊天室中的成员可自行离开
 <ImageGallery>
   <ImageItem src="/images/uikit/chatroomfeature/chatroom_create.png" title="聊天室创建" />
   <ImageItem src="/images/uikit/chatroomfeature/chatroom_destroy.png" title="聊天室销毁" />
+  <ImageItem src="/images/uikit/chatroomfeature/chatroom_create.png" title="聊天室创建" />
+  <ImageItem src="/images/uikit/chatroomfeature/chatroom_destroy.png" title="聊天室销毁" />
+  <ImageItem src="/images/uikit/chatroomfeature/chatroom_create.png" title="聊天室创建" />
+  <ImageItem src="/images/uikit/chatroomfeature/chatroom_destroy.png" title="聊天室销毁" />
 </ImageGallery>