La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

会话、群聊、好友提示语优化

master
xsx 6 months ago
parent
45c5648266
commit
8afd425355
5 changed files with 224 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      im-uniapp/pages/chat/chat.vue
  2. 51
      im-uniapp/pages/friend/friend.vue
  3. 56
      im-uniapp/pages/group/group.vue
  4. 102
      im-uniapp/static/icon/iconfont.css
  5. BIN
      im-uniapp/static/icon/iconfont.ttf

48
im-uniapp/pages/chat/chat.vue
View File

@ -18,7 +18,11 @@
</view>
</view>
<view class="chat-tip" v-if="!initializing && !loading && chatStore.chats.length == 0">
温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
<view class="tip-icon">
<text class="iconfont icon-chat"></text>
</view>
<view class="tip-title">还没有聊天</view>
<view class="tip-content">添加好友或创建群聊，开始精彩的对话吧</view>
</view>
<scroll-view class="scroll-bar" v-else scroll-with-animation="true" scroll-y="true">
<view v-for="(chat, index) in chatStore.chats" :key="index">
@ -140,12 +144,48 @@ export default {
.chat-tip {
position: absolute;
top: 400rpx;
padding: 50rpx;
line-height: 50rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
padding: 40rpx;
text-align: center;
width: 80%;
.tip-icon {
width: 120rpx;
height: 120rpx;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid $im-bg-active;
.iconfont {
font-size: 60rpx;
color: $im-text-color-lighter;
}
}
.tip-title {
font-size: $im-font-size-large;
color: $im-text-color;
font-weight: 500;
margin-bottom: 20rpx;
}
.tip-content {
font-size: $im-font-size-smaller;
color: $im-text-color-lighter;
line-height: 1.6;
margin-bottom: 50rpx;
}
}
.chat-loading {
display: block;

51
im-uniapp/pages/friend/friend.vue
View File

@ -9,7 +9,12 @@
</view>
</view>
<view class="friend-tip" v-if="!hasFriends">
温馨提示：您现在还没有任何好友，快点击右上方'+'按钮添加好友吧~
<view class="tip-icon">
<text class="iconfont icon-add-friend"></text>
</view>
<view class="tip-title">还没有好友</view>
<view class="tip-content">添加好友，开始精彩的聊天之旅</view>
<button type="primary" @click="onAddNewFriends">添加好友</button>
</view>
<view class="friend-items" v-else>
<up-index-list :index-list="friendIdx" :sticky="false" :custom-nav-height="customNavHeight">
@ -128,11 +133,49 @@ export default {
.friend-tip {
position: absolute;
top: 400rpx;
padding: 50rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
padding: 60rpx 40rpx;
text-align: center;
line-height: 50rpx;
width: 80%;
max-width: 500rpx;
.tip-icon {
width: 120rpx;
height: 120rpx;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
border: 2rpx solid $im-bg-active;
.iconfont {
font-size: 56rpx;
color: #6c757d;
opacity: 0.8;
}
}
.tip-title {
font-size: $im-font-size-large;
color: $im-text-color;
font-weight: 500;
margin-bottom: 20rpx;
}
.tip-content {
font-size: $im-font-size-smaller;
color: $im-text-color-lighter;
line-height: 1.6;
margin-bottom: 50rpx;
}
}
.friend-items {

56
im-uniapp/pages/group/group.vue
View File

@ -8,7 +8,12 @@
</view>
</view>
<view class="group-tip" v-if="!hasGroups">
温馨提示：您现在还没有加入任何群聊，点击右上方'+'按钮可以创建群聊哦~
<view class="tip-icon">
<text class="iconfont icon-create-group"></text>
</view>
<view class="tip-title">还没有群聊</view>
<view class="tip-content">创建或加入群聊，与朋友们一起畅聊吧</view>
<button type="primary" @click="onCreateNewGroup">创建群聊</button>
</view>
<view class="group-items" v-else>
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
@ -55,12 +60,49 @@ export default {
.group-tip {
position: absolute;
top: 400rpx;
padding: 50rpx;
text-align: left;
line-height: 50rpx;
color: darkblue;
font-size: 30rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
padding: 60rpx 40rpx;
text-align: center;
width: 80%;
max-width: 500rpx;
.tip-icon {
width: 120rpx;
height: 120rpx;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
border: 2rpx solid $im-bg-active;
.iconfont {
font-size: 56rpx;
color: #6c757d;
opacity: 0.8;
}
}
.tip-title {
font-size: $im-font-size-large;
color: $im-text-color;
font-weight: 500;
margin-bottom: 20rpx;
}
.tip-content {
font-size: $im-font-size-smaller;
color: $im-text-color-lighter;
line-height: 1.6;
margin-bottom: 50rpx;
}
}
.group-items {

102
im-uniapp/static/icon/iconfont.css
View File

@ -1,6 +1,6 @@
@font-face {
font-family: "iconfont"; /* Project id 4272106 */
src: url('iconfont.ttf?t=1750317465456') format('truetype');
src: url('iconfont.ttf?t=1759053579007') format('truetype');
}
.iconfont {
@ -11,20 +11,92 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-dnd:before {
content: "\e693";
.icon-chat:before {
content: "\e93e";
}
.icon-privacy-protocol:before {
content: "\e761";
.icon-create-group:before {
content: "\e65b";
}
.icon-create-group-2:before {
content: "\e616";
.icon-refresh:before {
content: "\e64c";
}
.icon-create-group:before {
content: "\e650";
.icon-copy:before {
content: "\e604";
}
.icon-code:before {
content: "\e72c";
}
.icon-username:before {
content: "\e623";
}
.icon-pwd:before {
content: "\e60d";
}
.icon-pwd-hide:before {
content: "\e60c";
}
.icon-username2:before {
content: "\e647";
}
.icon-pwd-show:before {
content: "\e621";
}
.icon-teenager:before {
content: "\eba1";
}
.icon-warning-circle-empty:before {
content: "\e606";
}
.icon-loading2:before {
content: "\e6b6";
}
.icon-complaint:before {
content: "\e612";
}
.icon-about:before {
content: "\e637";
}
.icon-security:before {
content: "\e61d";
}
.icon-personal-info:before {
content: "\e62d";
}
.icon-success:before {
content: "\e649";
}
.icon-wait:before {
content: "\e701";
}
.icon-error:before {
content: "\e62b";
}
.icon-dnd:before {
content: "\e693";
}
.icon-create-group-2:before {
content: "\e616";
}
.icon-qrcode:before {
@ -67,10 +139,6 @@
content: "\e611";
}
.icon-username:before {
content: "\e60f";
}
.icon-chat-muted:before {
content: "\e634";
}
@ -87,18 +155,10 @@
content: "\e63c";
}
.icon-user-protocol:before {
content: "\e61a";
}
.icon-film:before {
content: "\e66b";
}
.icon-chat:before {
content: "\e624";
}
.icon-delete:before {
content: "\e605";
}

BIN
im-uniapp/static/icon/iconfont.ttf
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save