Skip to content

Commit 7d20b8f

Browse files
shanjinghengshanjingheng
committed
Update: UIKit ImageGallery style
1 parent 9fc7c27 commit 7d20b8f

File tree

3 files changed

+79
-34
lines changed

3 files changed

+79
-34
lines changed

‎docs/.vuepress/components/ImageGallery.vue‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ export default {
2020
rows.push(slotsContent.slice(i, i + imagesPerRow))
2121
}
2222
return rows
23-
},
24-
},
23+
}
24+
}
2525
}
2626
</script>
2727

@@ -36,36 +36,38 @@ export default {
3636
display: flex;
3737
justify-content: space-between; /* 确保每行两个图片均匀分布 */
3838
gap: 15px; /* 图片之间的间距 */
39-
padding: 5px; /* 行的内边距 */
40-
border: 1px solid #ccc; /* 行的边框样式 */
41-
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 行的阴影 */
39+
// padding: 5px; /* 行的内边距 */
40+
// border: 1px solid #ccc; /* 行的边框样式 */
41+
// box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 行的阴影 */
4242
}
4343
4444
.image-item {
4545
flex: 1 1 calc(50% - 15px); /* 每行两个图片，减去间距 */
46-
background-color: #fdfdfd; /* 行的背景颜色 */
46+
background-color: #f3f6f9; /* 行的背景颜色 */
4747
box-sizing: border-box;
4848
text-align: center; /* 标题居中 */
4949
display: flex;
5050
flex-direction: column;
5151
align-items: center; /* 居中对齐 */
52-
border: 1px solid #ddd; /* 图片和标题的边框 */
53-
padding: 5px; /* 图片和标题的内边距 */
52+
border-radius: 6px;
5453
}
5554
56-
.image-item h3 {
55+
.image-item .image-title {
5756
width: 100%;
58-
font-size: 18px;
59-
margin-bottom: 10px; /* 标题与图片之间的间距 */
60-
border-bottom: 1px solid #ddd; /* 标题下方的边框 */
61-
padding-bottom: 12px; /* 标题下方的内边距 */
57+
font-size: 14px;
58+
font-weight: 600;
59+
background-color: #ebeff5;
60+
padding: 12px 0;
6261
}
6362
6463
.image-item img {
65-
/* width: 100%; */
66-
height: 350px;
64+
height: 346px;
6765
display: block;
68-
padding-top: 5px; /* 图片上方的内边距 */
66+
margin-top: 20px;
67+
margin-bottom: 40px;
68+
border-radius: 16px;
69+
max-width: 98%;
70+
border: 4px solid #dde5ee;
6971
}
7072
}
7173
</style>

‎docs/.vuepress/components/ImageItem.vue‎

Lines changed: 42 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<h3>{{ title }}</h3>
2+
<div class="image-title">{{ title }}</div>
33
<img :src="imageSrc" :alt="title" />
44
</template>
55

@@ -9,24 +9,55 @@ export default {
99
props: {
1010
src: {
1111
type: String,
12-
required: true,
12+
required: true
1313
},
1414
title: {
1515
type: String,
16-
required: true,
17-
},
16+
required: true
17+
}
1818
},
1919
computed: {
2020
imageSrc() {
2121
return this.src.replace('@static', '')
2222
},
23-
},
24-
methods: {
25-
getUrl(url) {
26-
return new URL(url, import.meta.url).href
27-
},
28-
},
23+
methods: {
24+
getUrl(url) {
25+
return new URL(url, import.meta.url).href
26+
}
27+
}
28+
}
2929
}
3030
</script>
3131
32-
<style></style>
32+
<style>
33+
.container {
34+
background-color: #f3f6f9;
35+
display: flex;
36+
max-width: 286px;
37+
padding: 0 0 36px;
38+
flex-direction: column;
39+
overflow: hidden;
40+
color: #253646;
41+
white-space: nowrap;
42+
text-align: center;
43+
font: 500 14px PingFang SC, -apple-system, Roboto, Helvetica, sans-serif;
44+
}
45+
46+
.header {
47+
background-color: #ebeff5;
48+
width: 100%;
49+
overflow: hidden;
50+
padding: 10px 70px;
51+
}
52+
53+
.image {
54+
aspect-ratio: 0.47;
55+
object-fit: contain;
56+
object-position: center;
57+
width: 168px;
58+
border-radius: 4px;
59+
align-self: center;
60+
margin-top: 24px;
61+
max-width: 100%;
62+
}
63+
</style>

‎docs/uikit/chatroomuikit/android/roomfeature_common.md‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ ChatroomUIKit 提供离开聊天室功能。聊天室中的成员可自行离开
2424

2525
ChatroomUIKit 不提供解散聊天室的功能，你可以[调用即时通讯 IM SDK 的 REST API 解散聊天室](/document/server-side/chatroom.html#解散聊天室)。
2626

27-
![img](/images/uikit/chatroomfeature/chatroom_destroy.png =500x500)
27+
<ImageGallery>
28+
<ImageItem src="/images/uikit/chatroomfeature/chatroom_destroy.png" title="解散聊天室" />
29+
</ImageGallery>
2830

2931
## 发送弹幕
3032

@@ -34,7 +36,9 @@ ChatroomUIKit 不提供解散聊天室的功能，你可以[调用即时通讯 I
3436

3537
用户可以根据业务需要选择显示或隐藏消息发送时间（HH:MM 格式）、用户标识和用户头像。
3638

37-
![img](/images/uikit/chatroomfeature/barrage_send.png =500x500)
39+
<ImageGallery>
40+
<ImageItem src="/images/uikit/chatroomfeature/barrage_send.png" title="发送弹幕" />
41+
</ImageGallery>
3842

3943
## 打赏
4044

@@ -44,7 +48,9 @@ ChatroomUIKit 不提供解散聊天室的功能，你可以[调用即时通讯 I
4448

4549
在 UIKit 中，默认提供了 12 种不同的虚拟礼物。同时，用户可以自定义虚拟礼物的样式、名称和金额。
4650

47-
![img](/images/uikit/chatroomfeature/gift.png =500x500)
51+
<ImageGallery>
52+
<ImageItem src="/images/uikit/chatroomfeature/gift.png " title="打赏" />
53+
</ImageGallery>
4854

4955
## 全局广播
5056

@@ -70,24 +76,30 @@ ChatroomUIKit 不提供解散聊天室的功能，你可以[调用即时通讯 I
7076

7177
若未读消息的数量不超过 99，则未读消息数显示实际的数量，若达到 100 及以上则显示 99+。
7278

73-
![img](/images/uikit/chatroomfeature/message_unread.png =300x600)
79+
<ImageGallery>
80+
<ImageItem src="/images/uikit/chatroomfeature/message_unread.png" title="未读消息数" />
81+
</ImageGallery>
7482

7583
## 已禁言列表
7684

7785
记录被禁止发言用户的列表。当用户违反了聊天室的规则时，聊天室所有者将其禁言，即添加至已禁言列表。被禁言的成员无法在聊天室中发送消息，但仍留在聊天室，可以查看消息。
7886

7987
在 UIKit 中，默认通过点击聊天室界面右上角的成员按钮，触发已禁言列表。用户在列表中查看聊天室被禁言的所有成员，包括成员的身份、头像和昵称，同时可以通过点击成员右端的管理功能按钮，触发解除禁言选项，实现取消禁言的操作。
8088

81-
![img](/images/uikit/chatroomfeature/mute_list.png =300x700)
89+
<ImageGallery>
90+
<ImageItem src="/images/uikit/chatroomfeature/mute_list.png" title="已禁言列表" />
91+
</ImageGallery>
92+
8293

8394
## 暗黑模式
8495

8596
暗黑模式是一种界面设计选择，旨在提供更低对比度和更多暗色调的视觉外观。用户可以根据需要启用或禁用暗黑模式，以实现最佳的使用体验。
8697

8798
UIKit 支持暗黑模式的一键切换。UIKit 默认风格为明亮模式，切换为暗黑模式后，聊天室界面中所有元素将替换为暗黑风格设计，提供用户舒适的视觉体验。
8899

89-
![img](/images/uikit/chatroomfeature/dark_mode.png)
90-
100+
<ImageGallery>
101+
<ImageItem src="/images/uikit/chatroomfeature/dark_mode.png" title="暗黑模式" />
102+
</ImageGallery>
91103

92104

93105

0 commit comments

Comments
 (0)