Update: UIKit ImageGallery style

easemob · Oct 8, 2024 · 7d20b8f · 7d20b8f
1 parent 9fc7c27
commit 7d20b8f
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 34 deletions.
diff --git a/docs/.vuepress/components/ImageGallery.vue b/docs/.vuepress/components/ImageGallery.vue
@@ -20,8 +20,8 @@ export default {
         rows.push(slotsContent.slice(i, i + imagesPerRow))
       }
       return rows
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -36,36 +36,38 @@ export default {
     display: flex;
     justify-content: space-between; /* 确保每行两个图片均匀分布 */
     gap: 15px; /* 图片之间的间距 */
-    padding: 5px; /* 行的内边距 */
-    border: 1px solid #ccc; /* 行的边框样式 */
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 行的阴影 */
+    // padding: 5px; /* 行的内边距 */
+    // border: 1px solid #ccc; /* 行的边框样式 */
+    // box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 行的阴影 */
   }
 
   .image-item {
     flex: 1 1 calc(50% - 15px); /* 每行两个图片，减去间距 */
-    background-color: #fdfdfd; /* 行的背景颜色 */
+    background-color: #f3f6f9; /* 行的背景颜色 */
     box-sizing: border-box;
     text-align: center; /* 标题居中 */
     display: flex;
     flex-direction: column;
     align-items: center; /* 居中对齐 */
-    border: 1px solid #ddd; /* 图片和标题的边框 */
-    padding: 5px; /* 图片和标题的内边距 */
+    border-radius: 6px;
   }
 
-  .image-item h3 {
+  .image-item .image-title {
     width: 100%;
-    font-size: 18px;
-    margin-bottom: 10px; /* 标题与图片之间的间距 */
-    border-bottom: 1px solid #ddd; /* 标题下方的边框 */
-    padding-bottom: 12px; /* 标题下方的内边距 */
+    font-size: 14px;
+    font-weight: 600;
+    background-color: #ebeff5;
+    padding: 12px 0;
   }
 
   .image-item img {
-    /* width: 100%; */
-    height: 350px;
+    height: 346px;
     display: block;
-    padding-top: 5px; /* 图片上方的内边距 */
+    margin-top: 20px;
+    margin-bottom: 40px;
+    border-radius: 16px;
+    max-width: 98%;
+    border: 4px solid #dde5ee;
   }
 }
 </style>
diff --git a/docs/.vuepress/components/ImageItem.vue b/docs/.vuepress/components/ImageItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <h3>{{ title }}</h3>
+  <div class="image-title">{{ title }}</div>
   <img :src="imageSrc" :alt="title" />
 </template>
 
@@ -9,24 +9,55 @@ export default {
   props: {
     src: {
       type: String,
-      required: true,
+      required: true
     },
     title: {
       type: String,
-      required: true,
-    },
+      required: true
+    }
   },
   computed: {
     imageSrc() {
       return this.src.replace('@static', '')
     },
-  },
-  methods: {
-    getUrl(url) {
-      return new URL(url, import.meta.url).href
-    },
-  },
+    methods: {
+      getUrl(url) {
+        return new URL(url, import.meta.url).href
+      }
+    }
+  }
 }
 </script>
 
-<style></style>
+<style>
+.container {
+  background-color: #f3f6f9;
+  display: flex;
+  max-width: 286px;
+  padding: 0 0 36px;
+  flex-direction: column;
+  overflow: hidden;
+  color: #253646;
+  white-space: nowrap;
+  text-align: center;
+  font: 500 14px PingFang SC, -apple-system, Roboto, Helvetica, sans-serif;
+}
+
+.header {
+  background-color: #ebeff5;
+  width: 100%;
+  overflow: hidden;
+  padding: 10px 70px;
+}
+
+.image {
+  aspect-ratio: 0.47;
+  object-fit: contain;
+  object-position: center;
+  width: 168px;
+  border-radius: 4px;
+  align-self: center;
+  margin-top: 24px;
+  max-width: 100%;
+}
+</style>
diff --git a/docs/uikit/chatroomuikit/android/roomfeature_common.md b/docs/uikit/chatroomuikit/android/roomfeature_common.md
@@ -24,7 +24,9 @@ ChatroomUIKit 提供离开聊天室功能。聊天室中的成员可自行离开
 
 ChatroomUIKit 不提供解散聊天室的功能，你可以[调用即时通讯 IM SDK 的 REST API 解散聊天室](/document/server-side/chatroom.html#解散聊天室)。
 
-![img](/images/uikit/chatroomfeature/chatroom_destroy.png =500x500)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatroomfeature/chatroom_destroy.png" title="解散聊天室" />
+</ImageGallery>
 
 ## 发送弹幕
 
@@ -34,7 +36,9 @@ ChatroomUIKit 不提供解散聊天室的功能，你可以[调用即时通讯 I
 
 用户可以根据业务需要选择显示或隐藏消息发送时间（HH:MM 格式）、用户标识和用户头像。
 
-![img](/images/uikit/chatroomfeature/barrage_send.png =500x500)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatroomfeature/barrage_send.png" title="发送弹幕" />
+</ImageGallery>
 
 ## 打赏
 
@@ -44,7 +48,9 @@ ChatroomUIKit 不提供解散聊天室的功能，你可以[调用即时通讯 I
 
 在 UIKit 中，默认提供了 12 种不同的虚拟礼物。同时，用户可以自定义虚拟礼物的样式、名称和金额。
 
-![img](/images/uikit/chatroomfeature/gift.png =500x500)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatroomfeature/gift.png " title="打赏" />
+</ImageGallery>
 
 ## 全局广播
 
@@ -70,24 +76,30 @@ ChatroomUIKit 不提供解散聊天室的功能，你可以[调用即时通讯 I
 
 若未读消息的数量不超过 99，则未读消息数显示实际的数量，若达到 100 及以上则显示 99+。
 
-![img](/images/uikit/chatroomfeature/message_unread.png =300x600)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatroomfeature/message_unread.png" title="未读消息数" />
+</ImageGallery>
 
 ## 已禁言列表
 
 记录被禁止发言用户的列表。当用户违反了聊天室的规则时，聊天室所有者将其禁言，即添加至已禁言列表。被禁言的成员无法在聊天室中发送消息，但仍留在聊天室，可以查看消息。
 
 在 UIKit 中，默认通过点击聊天室界面右上角的成员按钮，触发已禁言列表。用户在列表中查看聊天室被禁言的所有成员，包括成员的身份、头像和昵称，同时可以通过点击成员右端的管理功能按钮，触发解除禁言选项，实现取消禁言的操作。
 
-![img](/images/uikit/chatroomfeature/mute_list.png =300x700)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatroomfeature/mute_list.png" title="已禁言列表" />
+</ImageGallery>
+
 
 ## 暗黑模式
 
 暗黑模式是一种界面设计选择，旨在提供更低对比度和更多暗色调的视觉外观。用户可以根据需要启用或禁用暗黑模式，以实现最佳的使用体验。
 
 UIKit 支持暗黑模式的一键切换。UIKit 默认风格为明亮模式，切换为暗黑模式后，聊天室界面中所有元素将替换为暗黑风格设计，提供用户舒适的视觉体验。
 
-![img](/images/uikit/chatroomfeature/dark_mode.png)
-
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatroomfeature/dark_mode.png" title="暗黑模式" />
+</ImageGallery>