@@ -61,12 +61,12 @@
-
- 发送
+ 发送
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
- 邀请
-
-
-
- 提交
- 编辑
- 退出群聊
-
-
+
diff --git a/im-web/src/components/chat/ChatInput.vue b/im-web/src/components/chat/ChatInput.vue
index 8f7a449..1494a55 100644
--- a/im-web/src/components/chat/ChatInput.vue
+++ b/im-web/src/components/chat/ChatInput.vue
@@ -70,7 +70,7 @@
line.appendChild(imageElement);
let after = document.createTextNode('\u00A0');
line.appendChild(after);
- this.selectElement(after, 1);
+ this.selectElement(after, 1);
} else {
let asFile = items[i].getAsFile();
if (!asFile) {
@@ -239,7 +239,7 @@
},
onBlur(e) {
this.updateRange();
-
+
},
onMousedown() {
if (this.atIng) {
@@ -331,7 +331,7 @@
let endContainer = range.endContainer;
let parentElement = endContainer.parentElement;
if (parentElement.parentElement === this.$refs.content) {
- divElement.innerHTML = endContainer.textContent.substring(range.endOffset).trim();
+ divElement.innerHTML = endContainer.textContent.substring(range.endOffset).trim();
endContainer.textContent = endContainer.textContent.substring(0, range.endOffset);
// 插入到当前div（当前行）后面
parentElement.insertAdjacentElement('afterend', divElement);
@@ -482,10 +482,10 @@
bottom: 0;
outline: none;
padding: 5px;
- line-height: 30px;
- font-size: 16px;
+ line-height: 1.5;
+ font-size: var(--im-font-size);
text-align: left;
- overflow-y: scroll;
+ overflow-y: auto;
// 单独一行时，无法在前面输入的bug
>div:before {
@@ -544,15 +544,12 @@
.file-size {
font-size: 14px;
font-weight: 600;
- color: black;
}
}
}
.chat-at-user {
color: #00f;
- font-weight: 600;
-
border-radius: 3px;
}
}
@@ -567,4 +564,4 @@
}
}
-
\ No newline at end of file
+
diff --git a/im-web/src/components/chat/ChatItem.vue b/im-web/src/components/chat/ChatItem.vue
index 9c11a1b..e508fb1 100644
--- a/im-web/src/components/chat/ChatItem.vue
+++ b/im-web/src/components/chat/ChatItem.vue
@@ -1,20 +1,20 @@
+
+
+
+
+
+
+
-
{{chat.unreadCount}}
-
+
- 群
-
+ {{chat.showName}}
-
+ 群
+
- {{chat.showName}}
+ {{showTime}}
+ {{showTime}}
- {{atText}}
{{chat.sendNickName+': '}}
@@ -112,34 +112,32 @@
.chat-item {
height: 50px;
display: flex;
- margin-bottom: 1px;
position: relative;
padding: 5px 10px;
align-items: center;
- background-color: white;
+ background-color: var(--im-background);
white-space: nowrap;
- color: black;
cursor: pointer;
&:hover {
- background-color: #F8FAFF;
+ background-color: var(--im-background-active);
}
&.active {
- background-color: #F4F9FF;
+ background-color: var(--im-background-active-dark);
}
.chat-left {
position: relative;
display: flex;
- width: 45px;
- height: 45x;
+ justify-content: center;
+ align-items: center;
.unread-text {
position: absolute;
background-color: #f56c6c;
- right: -5px;
- top: -5px;
+ right: -4px;
+ top: -8px;
color: white;
border-radius: 30px;
padding: 1px 5px;
@@ -161,36 +159,36 @@
.chat-name {
display: flex;
- line-height: 25px;
- height: 25px;
-
- .chat-name-text {
- flex: 1;
- display: flex;
- align-items: center;
- font-size: 15px;
- font-weight: 600;
- white-space: nowrap;
- overflow: hidden;
-
- .el-tag {
- background-color: #2830d3;
- border-radius: 10px;
- border: 0;
- height: 16px;
- line-height: 16px;
- font-size: 10px;
- margin-left: 2px;
- opacity: 0.8;
-
- }
- }
-
+ line-height: 20px;
+ height: 20px;
+
+ .chat-name-text {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ font-size: var(--im-font-size);
+ white-space: nowrap;
+ overflow: hidden;
+
+ .el-tag {
+ min-width: 22px;
+ text-align: center;
+ background-color: #2830d3;
+ border-radius: 10px;
+ border: 0;
+ height: 16px;
+ line-height: 16px;
+ font-size: 10px;
+ margin-left: 2px;
+ opacity: 0.8;
+
+ }
+ }
.chat-time-text {
- font-size: 13px;
+ font-size: var(--im-font-size-smaller);
text-align: right;
- color: #888888;
+ color: var(--im-text-color-light);
white-space: nowrap;
overflow: hidden;
padding-left: 10px;
@@ -203,11 +201,12 @@
.chat-at-text {
color: #c70b0b;
- font-size: 12px;
+ font-size: var(--im-font-size-smaller);
}
.chat-send-name {
- font-size: 13px;
+ font-size: var(--im-font-size-small);
+ color: var(--im-text-color-light);
}
@@ -216,7 +215,8 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- font-size: 13px;
+ font-size: var(--im-font-size-small);
+ color: var(--im-text-color-light);
img {
width: 20px !important;
@@ -228,4 +228,4 @@
}
}
}
-
\ No newline at end of file
+
diff --git a/im-web/src/components/chat/ChatMessageItem.vue b/im-web/src/components/chat/ChatMessageItem.vue
index e64d645..0640a50 100644
--- a/im-web/src/components/chat/ChatMessageItem.vue
+++ b/im-web/src/components/chat/ChatMessageItem.vue
@@ -9,7 +9,7 @@
-
@@ -213,13 +213,14 @@
.chat-msg-tip {
line-height: 50px;
- font-size: 14px;
+ font-size: var(--im-font-size-small);
+ color: var(--im-text-color-light);
}
.chat-msg-normal {
position: relative;
font-size: 0;
- padding-left: 60px;
+ padding-left: 48px;
min-height: 50px;
margin-top: 10px;
@@ -244,8 +245,8 @@
.chat-msg-top {
display: flex;
flex-wrap: nowrap;
- color: #333;
- font-size: 14px;
+ color: var(--im-text-color-light);
+ font-size: var(--im-font-size);
line-height: 20px;
span {
@@ -261,13 +262,11 @@
display: block;
position: relative;
line-height: 26px;
- margin-top: 3px;
- padding: 7px;
- background-color: #eee;
+ //margin-top: 3px;
+ padding: 6px 10px;
+ background-color: var(--im-background);
border-radius: 10px;
- color: black;
- display: block;
- font-size: 14px;
+ font-size: var(--im-font-size);
text-align: left;
white-space: pre-wrap;
word-break: break-all;
@@ -298,9 +297,7 @@
min-height: 150px;
max-width: 400px;
max-height: 300px;
- border: #dddddd solid 1px;
- border: 5px solid #ccc;
- border-radius: 6px;
+ border-radius: 8px;
cursor: pointer;
}
@@ -312,17 +309,15 @@
flex-direction: row;
align-items: center;
cursor: pointer;
- padding-bottom: 5px;
+ margin-bottom: 2px;
.chat-file-box {
display: flex;
flex-wrap: nowrap;
align-items: center;
- min-height: 80px;
- box-shadow: 5px 5px 2px #c0c0c0;
- border: #dddddd solid 1px;
- border-radius: 6px;
- background-color: #eeeeee;
+ min-height: 60px;
+ box-shadow: var(--im-box-shadow-light);
+ border-radius: 4px;
padding: 10px 15px;
.chat-file-info {
@@ -330,21 +325,26 @@
height: 100%;
text-align: left;
font-size: 14px;
+ margin-right: 10px;
.chat-file-name {
display: inline-block;
- min-width: 150px;
- max-width: 300px;
- font-size: 16px;
- font-weight: 600;
- margin-bottom: 15px;
+ min-width: 160px;
+ max-width: 220px;
+ font-size: 14px;
+ margin-bottom: 4px;
white-space: pre-wrap;
word-break: break-all;
}
+
+ .chat-file-size {
+ font-size: var(--im-font-size-smaller);
+ color: var(--im-text-color-light);
+ }
}
.chat-file-icon {
- font-size: 50px;
+ font-size: 44px;
color: #d42e07;
}
}
@@ -384,32 +384,29 @@
.chat-readed {
font-size: 12px;
- color: #888;
- font-weight: 600;
+ color: var(--im-text-color-light);
}
.chat-unread {
- font-size: 12px;
- color: #f23c0f;
- font-weight: 600;
+ font-size: var(--im-font-size-smaller);
+ color: var(--im-color-danger);
}
}
.chat-receipt {
- font-size: 13px;
- color: blue;
+ font-size: var(--im-font-size-smaller);
cursor: pointer;
+ color: var(--im-text-color-light);
.icon-ok {
font-size: 20px;
- color: #329432;
+ color: var(--im-color-sucess);
}
}
.chat-at-user {
padding: 2px 5px;
border-radius: 3px;
- font-weight: 600;
cursor: pointer;
}
}
@@ -419,7 +416,7 @@
&.chat-msg-mine {
text-align: right;
padding-left: 0;
- padding-right: 60px;
+ padding-right: 48px;
.head-image {
left: auto;
@@ -444,9 +441,8 @@
.chat-msg-text {
margin-left: 10px;
- background-color: rgb(88, 127, 240);
+ background-color: var(--im-color-primary-light-2);
color: #fff;
- vertical-align: top;
&:after {
left: auto;
@@ -476,4 +472,4 @@
}
}
-
\ No newline at end of file
+
diff --git a/im-web/src/components/common/Emotion.vue b/im-web/src/components/common/Emotion.vue
index 8414e24..41fc5ff 100644
--- a/im-web/src/components/common/Emotion.vue
+++ b/im-web/src/components/common/Emotion.vue
@@ -1,7 +1,7 @@
-
+
-
+
{{item.name}}
-
@@ -53,22 +52,25 @@
.right-menu {
position: fixed;
- box-shadow: 0px 0px 10px #ccc;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: var(--im-box-shadow-light);
.el-menu {
- border: 1px solid #b4b4b4;
- border-radius: 7px;
+ border-radius: 4px;
overflow: hidden;
-
+
.el-menu-item {
- height: 40px;
- line-height: 40px;
- border-bottom: 1px solid #d0d0d0;
+ height: 36px;
+ line-height: 36px;
+ min-width: 100px;
+ text-align: left;
+ padding: 0 0 0 20px;
- span {
- font-weight: 600;
- }
+ &:hover {
+ background-color: var(--im-background-active);
+ }
}
}
}
-
\ No newline at end of file
+
diff --git a/im-web/src/components/common/UserInfo.vue b/im-web/src/components/common/UserInfo.vue
index e0b4628..cc527bf 100644
--- a/im-web/src/components/common/UserInfo.vue
+++ b/im-web/src/components/common/UserInfo.vue
@@ -100,17 +100,19 @@
\ No newline at end of file
+
diff --git a/im-web/src/components/friend/AddFriend.vue b/im-web/src/components/friend/AddFriend.vue
index 77e1e2f..31bf335 100644
--- a/im-web/src/components/friend/AddFriend.vue
+++ b/im-web/src/components/friend/AddFriend.vue
@@ -1,6 +1,6 @@
-
-
+
+
@@ -8,7 +8,7 @@
@@ -39,26 +39,23 @@
},
computed: {
x() {
- return this.pos.x - 200;
+ return this.pos.x - 22;
},
y() {
- return this.pos.y - 280;
+ return this.pos.y - 234;
}
}
}
\ No newline at end of file
+
diff --git a/im-web/src/components/common/FullImage.vue b/im-web/src/components/common/FullImage.vue
index 444833e..7d85f42 100644
--- a/im-web/src/components/common/FullImage.vue
+++ b/im-web/src/components/common/FullImage.vue
@@ -2,9 +2,9 @@
@@ -37,31 +37,35 @@
position: fixed;
width: 100%;
height: 100%;
-
-
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+
.mask{
position: fixed;
width: 100%;
height: 100%;
background: black;
- opacity: 0.9;
+ opacity: 0.5;
+
}
-
+
.image-box {
position: relative;
width: 100%;
height: 100%;
-
+
img{
position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- max-height: 100%;
- max-width: 100%;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ max-height: 100%;
+ max-width: 100%;
}
}
-
+
.close{
position: fixed;
top: 10px;
@@ -69,10 +73,8 @@
color: white;
font-size: 25px;
cursor: pointer;
-
-
}
}
-
-
-
\ No newline at end of file
+
+
+
diff --git a/im-web/src/components/common/HeadImage.vue b/im-web/src/components/common/HeadImage.vue
index 521e5ac..e7ca1d4 100644
--- a/im-web/src/components/common/HeadImage.vue
+++ b/im-web/src/components/common/HeadImage.vue
@@ -1,16 +1,15 @@
-
diff --git a/im-web/src/components/common/RightMenu.vue b/im-web/src/components/common/RightMenu.vue
index bc5f6eb..f4478d5 100644
--- a/im-web/src/components/common/RightMenu.vue
+++ b/im-web/src/components/common/RightMenu.vue
@@ -4,9 +4,8 @@
- ![]()
+ ![]()
- x
+
- ![]()
+ ![]()
- {{name.substring(0,2).toUpperCase()}}
+ {{name?.substring(0,2).toUpperCase()}}
-
@@ -86,28 +88,24 @@
.friend-item {
height: 50px;
display: flex;
- margin-bottom: 1px;
position: relative;
padding: 5px 10px;
align-items: center;
- background-color: #fafafa;
white-space: nowrap;
cursor: pointer;
- &:hover {
- background-color: #F8FAFF;
- }
-
- &.active {
- background-color: #F4F9FF;
- }
-
+ &:hover {
+ background-color: var(--im-background-active);
+ }
+
+ &.active {
+ background-color: var(--im-background-active-dark);
+ }
+
.friend-avatar {
display: flex;
justify-content: center;
align-items: center;
- width: 45px;
- height: 45px;
}
.friend-info {
@@ -118,21 +116,30 @@
text-align: left;
.friend-name {
- font-size: 15px;
- font-weight: 600;
- line-height: 30px;
+ font-size: var(--im-font-size);
white-space: nowrap;
overflow: hidden;
}
.friend-online {
.online {
+ font-weight: bold;
padding-right: 2px;
- width: 15px;
- height: 15px;
-
+ font-size: 16px;
+ position: relative;
}
+
+ .online-icon{
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 6px;
+ height: 6px;
+ background: limegreen;
+ border-radius: 50%;
+ border: 1px solid white;
+ }
}
}
}
-
\ No newline at end of file
+
diff --git a/im-web/src/components/group/AddGroupMember.vue b/im-web/src/components/group/AddGroupMember.vue
index ada2f7b..4da3c09 100644
--- a/im-web/src/components/group/AddGroupMember.vue
+++ b/im-web/src/components/group/AddGroupMember.vue
@@ -1,166 +1,180 @@
-
-
\ No newline at end of file
+ .el-input__inner {
+ border: unset;
+ border-bottom: var(--im-border);
+ }
+
+ }
+
+ .agm-friend-checkbox {
+ margin-right: 20px;
+ }
+ }
+
+ .agm-arrow {
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ padding: 10px;
+ font-weight: 600;
+ color: var(--im-color-primary);
+ }
+
+ .agm-r-box {
+ flex: 1;
+ border: var(--im-border);
+
+ .agm-select-tip {
+ text-align: left;
+ height: 40px;
+ line-height: 40px;
+ text-indent: 6px;
+ color: var(--im-text-color-light)
+
+ }
+ }
+}
+
diff --git a/im-web/src/components/group/GroupItem.vue b/im-web/src/components/group/GroupItem.vue
index fd2b811..f9bcb2f 100644
--- a/im-web/src/components/group/GroupItem.vue
+++ b/im-web/src/components/group/GroupItem.vue
@@ -1,7 +1,7 @@
-
+
{{ friend.nickName}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已勾选{{checkCount}}位好友
-
-
-
-
-
-
+
{{group.showGroupName}}
@@ -36,27 +36,20 @@
.group-item {
height: 50px;
display: flex;
- margin-bottom: 1px;
position: relative;
padding: 5px 10px;
align-items: center;
- background-color: white;
white-space: nowrap;
cursor: pointer;
-
- &:hover {
- background-color: #F8FAFF;
- }
-
- &.active {
- background-color: #F4F9FF;
- }
-
- .group-avatar {
- width: 45px;
- height: 45px;
- }
-
+
+ &:hover {
+ background-color: var(--im-background-active);
+ }
+
+ &.active {
+ background-color: var(--im-background-active-dark);
+ }
+
.group-name {
padding-left: 10px;
height: 100%;
@@ -64,8 +57,7 @@
line-height: 50px;
white-space: nowrap;
overflow: hidden;
- font-size: 15px;
- font-weight: 600;
+ font-size: var(--im-font-size);
}
}
diff --git a/im-web/src/components/group/GroupMember.vue b/im-web/src/components/group/GroupMember.vue
index 21dfac8..ba20bde 100644
--- a/im-web/src/components/group/GroupMember.vue
+++ b/im-web/src/components/group/GroupMember.vue
@@ -1,12 +1,11 @@
-
@@ -49,10 +48,10 @@
height: 30px;
line-height: 30px;
white-space: nowrap;
- text-overflow:ellipsis;
+ text-overflow:ellipsis;
overflow:hidden
}
-
+
.btn-kick {
display: none;
position: absolute;
@@ -62,7 +61,7 @@
font-size: 20px;
cursor: pointer;
}
-
+
&:hover .btn-kick{
display: block;
color: #ce1818;
diff --git a/im-web/src/components/group/GroupMemberItem.vue b/im-web/src/components/group/GroupMemberItem.vue
index 20e13bd..a49ded4 100644
--- a/im-web/src/components/group/GroupMemberItem.vue
+++ b/im-web/src/components/group/GroupMemberItem.vue
@@ -1,7 +1,7 @@
{{member.showNickName}}
-
-
@@ -40,16 +40,14 @@ export default {
diff --git a/im-web/src/components/group/GroupMemberSelector.vue b/im-web/src/components/group/GroupMemberSelector.vue
index 133b774..163e11f 100644
--- a/im-web/src/components/group/GroupMemberSelector.vue
+++ b/im-web/src/components/group/GroupMemberSelector.vue
@@ -1,5 +1,5 @@
-
+
@@ -53,7 +53,7 @@
props: {
groupId: {
type: Number
- }
+ }
},
methods: {
open(maxSize, checkedIds, lockedIds) {
@@ -118,9 +118,13 @@
.left-box {
width: 48%;
- border: #587FF0 solid 1px;
- border-radius: 5px;
overflow: hidden;
+ border: var(--im-border);
+
+ .el-input__inner {
+ border: none;
+ border-bottom: var(--im-border);
+ }
}
@@ -130,20 +134,19 @@
font-size: 20px;
padding: 10px;
font-weight: 600;
- color: #687Ff0;
+ color: var(--im-color-primary);
}
.right-box {
-
width: 48%;
- border: #587FF0 solid 1px;
- border-radius: 5px;
+ border: var(--im-border);
.select-tip {
text-align: left;
height: 40px;
line-height: 40px;
text-indent: 5px;
+ color: var(--im-text-color-light)
}
.checked-member-list {
@@ -158,4 +161,4 @@
}
}
}
-
\ No newline at end of file
+
diff --git a/im-web/src/components/rtc/RtcPrivateAcceptor.vue b/im-web/src/components/rtc/RtcPrivateAcceptor.vue
index 6ffae6b..2e1410e 100644
--- a/im-web/src/components/rtc/RtcPrivateAcceptor.vue
+++ b/im-web/src/components/rtc/RtcPrivateAcceptor.vue
@@ -1,6 +1,6 @@
-
-
+
-
-
-
- ![]()
-
-
-
-
-
-
-
-
-
- 男
- 女
-
-
-
-
-
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+ 男
+ 女
+
+
+
+
+
-
+
-
diff --git a/im-web/src/main.js b/im-web/src/main.js
index f10f109..2fccb32 100644
--- a/im-web/src/main.js
+++ b/im-web/src/main.js
@@ -2,8 +2,9 @@ import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import './assets/style/im.scss';
import './assets/iconfont/iconfont.css';
+
import httpRequest from './api/httpRequest';
import * as socketApi from './api/wssocket';
import * as messageType from './api/messageType';
@@ -33,3 +34,4 @@ new Vue({
store,
render: h=>h(App)
})
+
diff --git a/im-web/src/view/Chat.vue b/im-web/src/view/Chat.vue
index be1be02..63759a3 100644
--- a/im-web/src/view/Chat.vue
+++ b/im-web/src/view/Chat.vue
@@ -1,104 +1,103 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
\ No newline at end of file
+ .chat-list-header {
+ height: 50px;
+ display: flex;
+ align-items: center;
+ padding: 0 8px;
+ }
+
+ .chat-list-loading {
+ height: 50px;
+ background-color: #eee;
+
+ .el-icon-loading {
+ font-size: 24px;
+ color: var(--im-text-color-light);
+ }
+
+ .el-loading-text {
+ color: var(--im-text-color-light);
+ }
+
+ .chat-loading-box {
+ height: 100%;
+ }
+ }
+
+ .chat-list-items {
+ flex: 1;
+ }
+ }
+}
+
diff --git a/im-web/src/view/Friend.vue b/im-web/src/view/Friend.vue
index 9775edb..4199860 100644
--- a/im-web/src/view/Friend.vue
+++ b/im-web/src/view/Friend.vue
@@ -1,8 +1,8 @@
-
+
@@ -181,13 +181,13 @@
.friend-list-box {
display: flex;
flex-direction: column;
- background: var(--im-background);
+ background: var(--im-background);
.friend-list-header {
- height: 50px;
- display: flex;
- align-items: center;
- padding: 0 8px;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ padding: 0 8px;
.add-btn {
padding: 5px !important;
@@ -207,22 +207,21 @@
flex-direction: column;
.friend-header {
- height: 50px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 12px;
- font-size: var(--im-font-size-larger);
- border-bottom: var(--im-border);
- box-sizing: border-box;
+ height: 50px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 12px;
+ font-size: var(--im-font-size-larger);
+ border-bottom: var(--im-border);
+ box-sizing: border-box;
}
.friend-detail {
display: flex;
padding: 50px 80px 20px 80px;
text-align: center;
-
-
+
.info-item {
margin-left: 20px;
background-color: #ffffff;
@@ -240,4 +239,4 @@
}
}
}
-
+
\ No newline at end of file
diff --git a/im-web/src/view/Group.vue b/im-web/src/view/Group.vue
index fb25c40..813c59a 100644
--- a/im-web/src/view/Group.vue
+++ b/im-web/src/view/Group.vue
@@ -29,8 +29,8 @@
![]()
-
+
发消息
@@ -328,7 +328,7 @@ export default {
}
.avatar-uploader {
- --width: 120px;
+ --width: 160px;
text-align: left;
.el-upload {
diff --git a/im-web/src/view/Home.vue b/im-web/src/view/Home.vue
index 2255b4b..4bc93ad 100644
--- a/im-web/src/view/Home.vue
+++ b/im-web/src/view/Home.vue
@@ -82,7 +82,7 @@ export default {
return {
showSettingDialog: false,
lastPlayAudioTime: new Date().getTime() - 1000,
- isFullscreen: false
+ isFullscreen: true
}
},
methods: {
@@ -409,9 +409,9 @@ export default {
.navi-bar {
--icon-font-size: 22px;
- --width: 56px;
+ --width: 60px;
width: var(--width);
- background: var(--im-color-primary);
+ background: var(--im-color-primary-light-1);
padding-top: 20px;
.navi-bar-box {
From 4f76dc5b2c38f37b393d4c1d59c7b7700c61ccc2 Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Mon, 11 Nov 2024 23:22:37 +0800
Subject: [PATCH 06/15] =?UTF-8?q?=E6=98=BE=E7=A4=BA=E8=81=8A=E5=A4=A9?=
=?UTF-8?q?=E6=B6=88=E6=81=AF=E6=8C=87=E5=90=91=E7=AE=AD=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
im-web/src/components/chat/ChatMessageItem.vue | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/im-web/src/components/chat/ChatMessageItem.vue b/im-web/src/components/chat/ChatMessageItem.vue
index 0640a50..7032499 100644
--- a/im-web/src/components/chat/ChatMessageItem.vue
+++ b/im-web/src/components/chat/ChatMessageItem.vue
@@ -257,7 +257,8 @@
.chat-msg-bottom {
display: inline-block;
padding-right: 300px;
-
+ padding-left: 5px;
+
.chat-msg-text {
display: block;
position: relative;
@@ -276,7 +277,6 @@
position: absolute;
left: -10px;
top: 13px;
- z-index: -1;
width: 0;
height: 0;
border-style: solid dashed dashed;
@@ -437,7 +437,7 @@
.chat-msg-bottom {
padding-left: 180px;
- padding-right: 0;
+ padding-right: 5px;
.chat-msg-text {
margin-left: 10px;
@@ -447,7 +447,7 @@
&:after {
left: auto;
right: -10px;
- border-top-color: rgb(88, 127, 240);
+ border-top-color: var(--im-color-primary-light-2);
}
}
From 817e6b118ba5eac36a01ee89004a9018f630b6dc Mon Sep 17 00:00:00 2001
From: libaogang <237412637@qq.com>
Date: Mon, 11 Nov 2024 22:23:04 +0800
Subject: [PATCH 07/15] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95?=
=?UTF-8?q?=E5=9B=BE=E6=A0=87=E9=A2=9C=E8=89=B2=E8=B7=9F=E9=9A=8F=E4=B8=BB?=
=?UTF-8?q?=E9=A2=98=E5=8F=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
im-web/src/view/Home.vue | 13 ++++++-------
1 file changed, 6 insertions(+), 7 deletions(-)
diff --git a/im-web/src/view/Home.vue b/im-web/src/view/Home.vue
index 2255b4b..6859165 100644
--- a/im-web/src/view/Home.vue
+++ b/im-web/src/view/Home.vue
@@ -385,7 +385,7 @@ export default {
align-items: center;
border-radius: 4px;
overflow: hidden;
- background: #e8f2ff;
+ background: var(--im-color-primary-light-9);
//background-image: url('../assets/image/background.jpg');
.app-container {
@@ -430,7 +430,6 @@ export default {
justify-content: center;
}
- --menu-color: #9DC4FF;
.menu {
height: 200px;
//margin-top: 10px;
@@ -449,12 +448,12 @@ export default {
}
.link:not(.router-link-active) .menu-item:hover {
- color: #fff;
+ color: var(--im-color-primary-light-7);
}
.menu-item {
position: relative;
- color: var(--menu-color);
+ color: var(--im-color-primary-light-4);
width: var(--width);
height: 46px;
display: flex;
@@ -474,7 +473,7 @@ export default {
color: white;
border-radius: 30px;
padding: 0 5px;
- font-size: 12px;
+ font-size: var(--im-font-size-smaller);
text-align: center;
white-space: nowrap;
border: 1px solid #f1e5e5;
@@ -489,7 +488,7 @@ export default {
height: 50px;
width: 100%;
cursor: pointer;
- color: var(--menu-color);
+ color: var(--im-color-primary-light-4);
font-size: var(--icon-font-size);
.icon {
@@ -498,7 +497,7 @@ export default {
&:hover {
font-weight: 600;
- color: #fff;
+ color: var(--im-color-primary-light-7);
}
}
}
From ea510ecf7dc698051db5b9a29755ca76c28e70cc Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Wed, 20 Nov 2024 22:36:41 +0800
Subject: [PATCH 08/15] =?UTF-8?q?fix:=20=E7=BE=A4=E4=B8=BB=E6=B2=A1?=
=?UTF-8?q?=E6=9C=89=E5=A4=B4=E5=83=8F=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../java/com/bx/implatform/service/impl/GroupServiceImpl.java | 1 +
1 file changed, 1 insertion(+)
diff --git a/im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java b/im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java
index ba8389c..fda628a 100644
--- a/im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java
+++ b/im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java
@@ -65,6 +65,7 @@ public class GroupServiceImpl extends ServiceImpl implements
member.setGroupId(group.getId());
member.setUserId(user.getId());
member.setHeadImage(user.getHeadImageThumb());
+ member.setUserNickName(user.getNickName());
member.setRemarkNickName(vo.getRemarkNickName());
member.setRemarkGroupName(vo.getRemarkGroupName());
groupMemberService.save(member);
From b7d447a4204adf629aee3545dcddca051145c1a2 Mon Sep 17 00:00:00 2001
From: libaogang <237412637@qq.com>
Date: Sun, 17 Nov 2024 20:44:10 +0800
Subject: [PATCH 09/15] =?UTF-8?q?uniapp=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
im-uniapp/App.vue | 31 +++-
.../components/chat-at-box/chat-at-box.vue | 24 +--
.../chat-group-readed/chat-group-readed.vue | 5 +-
im-uniapp/components/chat-item/chat-item.vue | 57 ++++---
.../chat-message-item/chat-message-item.vue | 79 +++++-----
.../components/chat-record/chat-record.vue | 32 ++--
.../components/friend-item/friend-item.vue | 21 ++-
.../components/group-item/group-item.vue | 23 +--
.../components/head-image/head-image.vue | 37 +++--
im-uniapp/components/nav-bar/nav-bar.vue | 118 +++++++++++++++
im-uniapp/components/pop-menu/pop-menu.vue | 32 ++--
im-uniapp/im-var.scss | 60 ++++++++
im-uniapp/im.scss | 141 +++++++++++++++++
im-uniapp/pages.json | 7 +-
im-uniapp/pages/chat/chat-box.vue | 61 ++++----
im-uniapp/pages/chat/chat.vue | 31 +---
im-uniapp/pages/common/user-info.vue | 143 ++++++++++--------
im-uniapp/pages/friend/friend-add.vue | 14 +-
im-uniapp/pages/friend/friend.vue | 45 +++---
im-uniapp/pages/group/group-edit.vue | 60 ++++----
im-uniapp/pages/group/group-info.vue | 65 ++++----
im-uniapp/pages/group/group-invite.vue | 33 ++--
im-uniapp/pages/group/group-member.vue | 25 ++-
im-uniapp/pages/group/group.vue | 22 +--
im-uniapp/pages/login/login.vue | 13 +-
im-uniapp/pages/mine/mine-edit.vue | 58 +++----
im-uniapp/pages/mine/mine-password.vue | 32 ++--
im-uniapp/pages/mine/mine.vue | 112 ++++++++------
im-uniapp/pages/register/register.vue | 11 +-
im-uniapp/uni.scss | 46 ++++++
30 files changed, 922 insertions(+), 516 deletions(-)
create mode 100644 im-uniapp/components/nav-bar/nav-bar.vue
create mode 100644 im-uniapp/im-var.scss
create mode 100644 im-uniapp/im.scss
diff --git a/im-uniapp/App.vue b/im-uniapp/App.vue
index e2c7c3a..b594875 100644
--- a/im-uniapp/App.vue
+++ b/im-uniapp/App.vue
@@ -383,6 +383,7 @@
\ No newline at end of file
diff --git a/im-uniapp/components/chat-at-box/chat-at-box.vue b/im-uniapp/components/chat-at-box/chat-at-box.vue
index d9627dd..0273268 100644
--- a/im-uniapp/components/chat-at-box/chat-at-box.vue
+++ b/im-uniapp/components/chat-at-box/chat-at-box.vue
@@ -10,7 +10,7 @@
-
@@ -21,13 +21,13 @@
-
+
{{ m.showNickName}}
-
-
+
+
+
@@ -112,7 +112,7 @@
flex-direction: column;
background-color: white;
padding: 10rpx;
- border-radius: 15rpx;
+ //border-radius: 15rpx;
.chat-at-top {
display: flex;
@@ -148,19 +148,23 @@
overflow: hidden;
.member-item {
- height: 120rpx;
+ height: 110rpx;
display: flex;
position: relative;
padding: 0 30rpx;
align-items: center;
background-color: white;
white-space: nowrap;
+ margin-bottom: 1px;
+
+ &.checked {
+ background-color: $im-color-primary-light-9;
+ }
.member-name {
flex: 1;
padding-left: 20rpx;
- font-size: 30rpx;
- font-weight: 600;
+ font-size: $im-font-size;
line-height: 60rpx;
white-space: nowrap;
overflow: hidden;
diff --git a/im-uniapp/components/chat-group-readed/chat-group-readed.vue b/im-uniapp/components/chat-group-readed/chat-group-readed.vue
index 5a8de75..3359d70 100644
--- a/im-uniapp/components/chat-group-readed/chat-group-readed.vue
+++ b/im-uniapp/components/chat-group-readed/chat-group-readed.vue
@@ -2,7 +2,7 @@
-
@@ -100,7 +100,8 @@
flex-direction: column;
background-color: white;
padding: 10rpx;
- border-radius: 15rpx;
+
+ //border-radius: 15rpx;
.scroll-bar {
height: 800rpx;
}
diff --git a/im-uniapp/components/chat-item/chat-item.vue b/im-uniapp/components/chat-item/chat-item.vue
index 7dcf1c1..dfa6265 100644
--- a/im-uniapp/components/chat-item/chat-item.vue
+++ b/im-uniapp/components/chat-item/chat-item.vue
@@ -3,13 +3,13 @@
-
{{chat.showName}}
-
{{$date.toTimeText(chat.lastSendTime,true)}}
@@ -17,7 +17,7 @@
{{atText}}
{{chat.sendNickName+': '}}
@@ -76,28 +76,29 @@
\ No newline at end of file
diff --git a/im-uniapp/components/friend-item/friend-item.vue b/im-uniapp/components/friend-item/friend-item.vue
index 5a475f5..726fe46 100644
--- a/im-uniapp/components/friend-item/friend-item.vue
+++ b/im-uniapp/components/friend-item/friend-item.vue
@@ -1,7 +1,6 @@
-
{{ friend.nickName}}
@@ -37,7 +36,7 @@
\ No newline at end of file
+
diff --git a/im-uniapp/components/group-item/group-item.vue b/im-uniapp/components/group-item/group-item.vue
index 5bf3f89..087d36f 100644
--- a/im-uniapp/components/group-item/group-item.vue
+++ b/im-uniapp/components/group-item/group-item.vue
@@ -1,7 +1,7 @@
{{ group.showGroupName}}
@@ -33,21 +33,24 @@
.group-item {
height: 100rpx;
display: flex;
- margin-bottom: 1rpx;
+ margin-bottom: 2rpx;
position: relative;
- padding: 10rpx;
- padding-left: 20rpx;
+ padding: 18rpx 20rpx;
align-items: center;
background-color: white;
white-space: nowrap;
- &:hover {
- background-color: #f5f6ff;
- }
- .group-name {
- font-size: 32rpx;
+ &:hover {
+ background-color: $im-bg-active;
+ }
+
+ &.active {
+ background-color: $im-bg-active;
+ }
+
+ .group-name {
+ font-size: $im-font-size;
padding-left: 20rpx;
- font-weight: 600;
text-align: left;
white-space: nowrap;
overflow: hidden;
diff --git a/im-uniapp/components/head-image/head-image.vue b/im-uniapp/components/head-image/head-image.vue
index f8298c2..5a12ed3 100644
--- a/im-uniapp/components/head-image/head-image.vue
+++ b/im-uniapp/components/head-image/head-image.vue
@@ -3,7 +3,7 @@
- {{name.substring(0,1).toUpperCase()}}
+ {{name?.substring(0,1).toUpperCase()}}
@@ -24,20 +24,20 @@
type: Number
},
size: {
- type: Number,
- default: 20
+ type: [Number, String],
+ default: 'default'
},
url: {
type: String
},
name: {
type: String,
- default: "?"
+ default: null
},
online: {
type: Boolean,
default: false
- }
+ },
},
methods: {
showUserInfo(e) {
@@ -49,15 +49,30 @@
}
},
computed: {
+ _size(){
+ if(typeof this.size === 'number'){
+ return this.size;
+ } else if(typeof this.size === 'string'){
+ return {
+ 'default': 96,
+ 'small': 84,
+ 'smaller': 72,
+ 'mini': 60,
+ 'minier': 48,
+ 'lage': 108,
+ 'lager': 120,
+ }[this.size]
+ }
+ },
avatarImageStyle() {
- return `width:${this.size}rpx;
- height:${this.size}rpx;`
+ return `width:${this._size}rpx;
+ height:${this._size}rpx;`
},
avatarTextStyle() {
- return `width: ${this.size}rpx;
- height:${this.size}rpx;
- background-color:${this.textColor};
- font-size:${this.size*0.5}rpx;
+ return `width: ${this._size}rpx;
+ height:${this._size}rpx;
+ background-color:${this.name ? this.textColor : '#fff'};
+ font-size:${this._size*0.5}rpx;
`
},
textColor() {
diff --git a/im-uniapp/components/nav-bar/nav-bar.vue b/im-uniapp/components/nav-bar/nav-bar.vue
new file mode 100644
index 0000000..d928939
--- /dev/null
+++ b/im-uniapp/components/nav-bar/nav-bar.vue
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/im-uniapp/components/pop-menu/pop-menu.vue b/im-uniapp/components/pop-menu/pop-menu.vue
index 9677c9a..e9b2cb4 100644
--- a/im-uniapp/components/pop-menu/pop-menu.vue
+++ b/im-uniapp/components/pop-menu/pop-menu.vue
@@ -6,7 +6,7 @@
- {{item.name}}
@@ -75,7 +75,7 @@
if(item.color){
return `color:${item.color};`
}
- return `color:#4f76e6;`;
+ // return `color:#4f76e6;`;
}
}
}
@@ -90,29 +90,29 @@
bottom: 0;
width: 100%;
height: 100%;
- background-color: #333;
z-index: 999;
- opacity: 0.5;
-
}
.menu {
position: fixed;
- border: 1px solid #b4b4b4;
- border-radius: 7px;
+ border-radius: 4px;
overflow: hidden;
- background-color: #f5f6ff;
+ background-color: #fff;
z-index: 1000;
+ box-shadow: $im-box-shadow-dark;
.menu-item {
- height: 25px;
- min-width: 150rpx;
- line-height: 25px;
- font-size: 18px;
+ height: 28px;
+ min-width: 120rpx;
+ line-height: 28px;
+ font-size: $im-font-size-small;
display: flex;
- padding: 10px;
- justify-content: center;
- border-bottom: 1px solid #d0d0d8;
-
+ padding: 6px 20px;
+ justify-content: flex-start;
+
+ &:hover {
+ background: $im-bg-active;
+ }
+
.menu-icon {
margin-right: 10rpx;
}
diff --git a/im-uniapp/im-var.scss b/im-uniapp/im-var.scss
new file mode 100644
index 0000000..2a06ac2
--- /dev/null
+++ b/im-uniapp/im-var.scss
@@ -0,0 +1,60 @@
+// 颜色
+$im-color-primary: #3e45d7;
+$im-color-primary-light-1: mix(#fff, $im-color-primary, 10%);
+$im-color-primary-light-2: mix(#fff, $im-color-primary, 20%);
+$im-color-primary-light-3: mix(#fff, $im-color-primary, 30%);
+$im-color-primary-light-4: mix(#fff, $im-color-primary, 40%);
+$im-color-primary-light-5: mix(#fff, $im-color-primary, 50%);
+$im-color-primary-light-6: mix(#fff, $im-color-primary, 60%);
+$im-color-primary-light-7: mix(#fff, $im-color-primary, 70%);
+$im-color-primary-light-8: mix(#fff, $im-color-primary, 80%);
+$im-color-primary-light-9: mix(#fff, $im-color-primary, 90%);
+$im-color-primary-dark-1: mix(#000, $im-color-primary, 10%);
+$im-color-primary-dark-2: mix(#000, $im-color-primary, 20%);
+$im-color-primary-dark-3: mix(#000, $im-color-primary, 30%);
+$im-color-primary-dark-4: mix(#000, $im-color-primary, 40%);
+
+$im-color-success: #18bc37;
+$im-color-warning: #f3a73f;
+$im-color-danger: #e43d33;
+$im-color-info: #8f939c;
+
+// 文字颜色
+$im-text-color: #000000;
+$im-text-color-light: #6a6a6a;
+$im-text-color-lighter: #909399;
+$im-text-color-lighter-extra: #c7c7c7;
+
+// 边框颜色
+$im-border: #F0F0F0;
+$im-border-light: #EDEDED;
+$im-border-lighter: #DCDCDC;
+$im-border-lighter-extra: #B9B9B9;
+
+// 文字大小
+$im-font-size: 30rpx;
+$im-font-size-small: 28rpx;
+$im-font-size-smaller: 26rpx;
+$im-font-size-smaller-extra: 24rpx;
+$im-font-size-large: 32rpx;
+$im-font-size-larger: 34rpx;
+$im-font-size-larger-extra: 36rpx;
+
+// 阴影
+$im-box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+$im-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+$im-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
+$im-box-shadow-dark: 0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 背景
+$im-bg: #f7f7f7;
+$im-bg-active: #f1f1f1;
+
+// 标题
+$im-title-size: 26px;
+$im-title-size-1: 22px;
+$im-title-size-2: 18px;
+
+$font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+
+$im-nav-bar-height: 50px;
\ No newline at end of file
diff --git a/im-uniapp/im.scss b/im-uniapp/im.scss
new file mode 100644
index 0000000..212dccf
--- /dev/null
+++ b/im-uniapp/im.scss
@@ -0,0 +1,141 @@
+/** 原生button样式 **/
+uni-button {
+ font-size: $im-font-size !important;
+}
+uni-button[type='primary'] {
+ colo: #fff !important;
+ background-color: $im-color-primary !important;
+}
+
+uni-button[type='primary'][plain] {
+ color: $im-color-primary !important;
+ border: 1px solid $im-color-primary;
+ background-color: transparent;
+}
+
+uni-button[type='warn'] {
+ colo: #fff !important;
+ background-color: $im-color-danger !important;
+}
+
+uni-button[type='warn'][plain] {
+ color: $im-color-danger !important;
+ border: 1px solid $im-color-danger !important;
+ background-color: transparent !important;
+}
+
+uni-button[size='mini'] {
+ font-size: $im-font-size-smaller !important;
+}
+
+.button-hover[type='primary'] {
+ colo: #fff !important;
+ background-color: $im-color-primary-dark-1 !important;
+}
+
+/** uni-ui input激活后边框、图标颜色 **/
+.uni-easyinput__content.is-focused:not(.is-input-error-border) {
+ border-color: $im-color-primary-light-2 !important;
+
+ .content-clear-icon {
+ color: $im-color-primary-light-2 !important;
+ }
+}
+
+/** 底部导航 **/
+.uni-tabbar-bottom .uni-tabbar {
+ box-shadow: $im-box-shadow;
+}
+
+.uni-tabbar-border {
+ display: none;
+}
+
+.segmented-control {
+ border-color: $im-color-primary !important;
+
+ .segmented-control__item--button {
+ border-color: $im-color-primary !important;
+ }
+ .segmented-control__item--button--active {
+ background-color: $im-color-primary !important;
+
+ .segmented-control__text{
+ color: #fff !important;
+ }
+ }
+ .segmented-control__text{
+ color: $im-color-primary !important;
+ }
+}
+
+.uni-radio-input {
+ //border-color: $im-color-primary !important;
+ //background-color: $im-color-primary !important;
+}
+
+.uni-section__content-title {
+ font-size: $im-font-size !important;
+ color: $im-text-color-light;
+}
+
+.uni-forms-item__label {
+ color: $im-text-color;
+ font-size: $im-font-size !important;
+}
+.uni-forms-item {
+ //margin-bottom: 8px !important;
+}
+.uni-easyinput__content-input {
+ font-size: $im-font-size !important;
+}
+.uni-easyinput__placeholder-class {
+ color: $im-text-color-lighter;
+ font-size: $im-font-size !important;;
+}
+.uni-easyinput__content-textarea {
+ font-size: $im-font-size !important;;
+}
+.uni-input-input:disabled {
+ color: $im-text-color-light;
+}
+.uni-forms-item.is-direction-top .uni-forms-item__label {
+ padding: 0 !important;
+}
+.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
+ font-size: $im-font-size !important;
+}
+.uni-card .uni-card__content {
+ color: unset !important;
+ padding: 10px 0 !important;
+}
+.uni-tag-text--small{
+ font-size: 10px !important;
+ font-weight: bolder !important;
+}
+
+.nav-bar {
+ height: 100rpx;
+ padding: 0 20rpx;
+ display: flex;
+ align-items: center;
+ background-color: white;
+ border-bottom: 1px solid $im-border;
+
+ .nav-search {
+ flex: 1;
+ }
+
+ .nav-add {
+ cursor: pointer;
+ }
+}
+
+
+.bottom-btn {
+ margin: 40rpx 40rpx;
+
+ uni-button + uni-button {
+ margin-top: 20rpx;
+ }
+}
\ No newline at end of file
diff --git a/im-uniapp/pages.json b/im-uniapp/pages.json
index 924ff42..1f9613c 100644
--- a/im-uniapp/pages.json
+++ b/im-uniapp/pages.json
@@ -44,10 +44,9 @@
}
],
"globalStyle": {
- "navigationBarTitleText": "盒子IM",
- "navigationBarTextStyle": "black",
- "navigationBarBackgroundColor": "#F0F0F0",
- "backgroundColor": "#fdfdfd"
+ "navigationStyle": "custom",
+ "navigationBarBackgroundColor": "#f7f7f7",
+ "backgroundColor": "#f7f7f7"
},
"tabBar": {
"color": "#000000",
diff --git a/im-uniapp/pages/chat/chat-box.vue b/im-uniapp/pages/chat/chat-box.vue
index affae06..ab8c7e2 100644
--- a/im-uniapp/pages/chat/chat-box.vue
+++ b/im-uniapp/pages/chat/chat-box.vue
@@ -1,9 +1,6 @@
-
- {{title}}
-
+ {{title}}
@@ -21,7 +18,7 @@
-
@@ -779,12 +776,13 @@
padding: 5px;
background-color: #f9f9f9;
line-height: 50px;
- font-size: 36rpx;
+ font-size: $im-font-size-large;
+ box-shadow: $im-box-shadow-lighter;
+ z-index: 1;
.btn-side {
position: absolute;
line-height: 60rpx;
- font-size: 28rpx;
cursor: pointer;
&.right {
@@ -811,9 +809,9 @@
padding: 0 10rpx;
.icon-at {
- font-size: 35rpx;
- color: darkblue;
- font-weight: 600;
+ font-size: $im-font-size-larger;
+ color: $im-color-primary;
+ font-weight: bold;
}
.chat-at-scroll-box {
@@ -833,33 +831,37 @@
}
+ $icon-color: rgba(0,0,0, 0.88);
.send-bar {
display: flex;
align-items: center;
padding: 10rpx;
- margin-bottom: 10rpx;
- border-top: #eee solid 1px;
- background-color: #f7f8fd;
+ //margin-bottom: 10rpx;
+ border-top: $im-border solid 1px;
+ background-color: $im-bg;
height: 80rpx;
+ //box-shadow: $im-box-shadow-lighter;
+ z-index: 1;
.iconfont {
- font-size: 68rpx;
- margin: 6rpx;
+ font-size: 60rpx;
+ margin: 0 10rpx;
+ color: $icon-color;
}
.chat-record {
flex: 1;
-
}
.send-text {
flex: 1;
overflow: auto;
- padding: 20rpx;
+ padding: 14rpx 20rpx;
background-color: #fff;
- border-radius: 20rpx;
- font-size: 30rpx;
+ border-radius: 8rpx;
+ font-size: $im-font-size;
box-sizing: border-box;
+ margin: 0 10rpx;
.send-text-area {
width: 100%;
@@ -875,28 +877,30 @@
.chat-tab-bar {
height: 500rpx;
padding: 20rpx;
- background-color: #f8f8f8;
+ background-color: $im-bg;
.chat-tools {
display: flex;
flex-wrap: wrap;
+ padding-top: 20rpx;
.chat-tools-item {
- width: 140rpx;
+ width: 25%;
padding: 16rpx;
+ box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
.tool-icon {
- padding: 28rpx;
- font-size: 60rpx;
+ padding: 26rpx;
+ font-size: 54rpx;
border-radius: 20%;
background-color: white;
- color: black;
+ color: $icon-color;
- &.active {
- background-color: #ddd;
+ &:active {
+ background-color: $im-bg-active;
}
}
@@ -914,10 +918,11 @@
.emotion-item-list {
display: flex;
flex-wrap: wrap;
+ justify-content: space-between;
.emotion-item {
- width: 40px;
- height: 40px;
+ width: 34px;
+ height: 34px;
text-align: center;
cursor: pointer;
padding: 6px;
diff --git a/im-uniapp/pages/chat/chat.vue b/im-uniapp/pages/chat/chat.vue
index b69f611..692bdc9 100644
--- a/im-uniapp/pages/chat/chat.vue
+++ b/im-uniapp/pages/chat/chat.vue
@@ -1,17 +1,18 @@
+ 消息
消息接收中...
-
+
- 温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
+ 温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
@@ -31,6 +32,7 @@
export default {
data() {
return {
+ showSearch: false,
searchText: "",
menu: {
show: false,
@@ -120,34 +122,16 @@
\ No newline at end of file
+
diff --git a/im-uniapp/pages/friend/friend-add.vue b/im-uniapp/pages/friend/friend-add.vue
index 624bef1..41e3988 100644
--- a/im-uniapp/pages/friend/friend-add.vue
+++ b/im-uniapp/pages/friend/friend-add.vue
@@ -1,16 +1,18 @@
-
+ 添加好友
+
+
{{ user.nickName}}
{{tip}}
@@ -50,9 +50,9 @@
width: 250px;
height: 250px;
padding: 20px;
- background-color: #eeeeee;
- border: #dddddd solid 5px;
- border-radius: 3%;
+ background-color: #fff;
+ box-shadow: var(--im-box-shadow-dark);
+ border-radius: 4px;
.acceptor-text {
padding: 10px;
@@ -123,4 +123,4 @@
}
}
}
-
\ No newline at end of file
+
diff --git a/im-web/src/components/rtc/RtcPrivateVideo.vue b/im-web/src/components/rtc/RtcPrivateVideo.vue
index f7d790d..3e01946 100644
--- a/im-web/src/components/rtc/RtcPrivateVideo.vue
+++ b/im-web/src/components/rtc/RtcPrivateVideo.vue
@@ -1,500 +1,508 @@
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{friend.nickName}}
-
+
+
+
\ No newline at end of file
+ .icon {
+ font-size: 50px;
+ cursor: pointer;
+ }
+ }
+}
+
+
diff --git a/im-web/src/components/setting/Setting.vue b/im-web/src/components/setting/Setting.vue
index 326874f..6303381 100644
--- a/im-web/src/components/setting/Setting.vue
+++ b/im-web/src/components/setting/Setting.vue
@@ -1,144 +1,144 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ friend.nickName }}
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
\ No newline at end of file
+ }
+}
+
diff --git a/im-web/src/view/Home.vue b/im-web/src/view/Home.vue
index 8900315..2255b4b 100644
--- a/im-web/src/view/Home.vue
+++ b/im-web/src/view/Home.vue
@@ -1,431 +1,515 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
@@ -33,16 +33,16 @@
+
\ No newline at end of file
diff --git a/im-web/src/components/common/HeadImage.vue b/im-web/src/components/common/HeadImage.vue
index e7ca1d4..8086d62 100644
--- a/im-web/src/components/common/HeadImage.vue
+++ b/im-web/src/components/common/HeadImage.vue
@@ -1,9 +1,9 @@
+ :url="friend.headImage" :isShowUserInfo="false" radius="0">
diff --git a/im-web/src/view/Friend.vue b/im-web/src/view/Friend.vue
index 4199860..ca23360 100644
--- a/im-web/src/view/Friend.vue
+++ b/im-web/src/view/Friend.vue
@@ -24,7 +24,7 @@
-
@@ -36,7 +36,6 @@
{{ userInfo.sex==0?"男":"女" }}
{{ userInfo.signature }}
-
-
@@ -182,69 +181,56 @@
.friend-list-box {
display: flex;
flex-direction: column;
- border-right: #53a0e79c solid 1px;
- background: white;
+ background: var(--im-background);
.friend-list-header {
- height: 50px;
- display: flex;
- align-items: center;
- padding: 3px 8px;
- border-bottom: 1px #ddd solid;
-
- .el-input__inner {
- border-radius: 10px !important;
- background-color: #F8F8F8;
- }
-
+ height: 50px;
+ display: flex;
+ align-items: center;
+ padding: 0 8px;
+
.add-btn {
padding: 5px !important;
margin: 5px;
- font-size: 20px;
- color: #587FF0;
- border: #587FF0 1px solid;
- background-color: #F0F8FF;
+ font-size: 16px;
border-radius: 50%;
}
}
.friend-list-items {
flex: 1;
- margin: 0 3px;
- background: #F8F8F8;
}
}
.friend-box {
display: flex;
- flex-direction: column;
+ flex-direction: column;
.friend-header {
- padding: 3px;
- height: 50px;
- line-height: 50px;
- font-size: 20px;
- font-weight: 600;
- text-align: center;
- background-color: white;
- border-bottom: 1px #ddd solid;
+ height: 50px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 12px;
+ font-size: var(--im-font-size-larger);
+ border-bottom: var(--im-border);
+ box-sizing: border-box;
}
.friend-detail {
display: flex;
padding: 50px 80px 20px 80px;
text-align: center;
-
-
+
+
.info-item {
margin-left: 20px;
background-color: #ffffff;
- border-radius: 10px ;
border: 1px #ddd solid;
}
.description {
- padding: 20px 20px 0px 20px;
+ padding: 20px 20px 0 20px;
}
}
@@ -254,4 +240,4 @@
}
}
}
-
\ No newline at end of file
+
diff --git a/im-web/src/view/Group.vue b/im-web/src/view/Group.vue
index 6dcf5f3..fb25c40 100644
--- a/im-web/src/view/Group.vue
+++ b/im-web/src/view/Group.vue
@@ -1,422 +1,416 @@
-
-
-
-
-
-
-
-
-
-
- {{activeGroup.showGroupName}}({{groupMembers.length}})
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ![]()
-
-
-
-
- 发消息
-
-
- 保存
- 退出群聊
- 解散群聊
-
-
-
-
-
-
-
-
-
-
- 邀请
-
+
+
+
+
+
+
+
+
+
+ {{ activeGroup.showGroupName }}({{ groupMembers.length }})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+ 发消息
+
+
+
+ 邀请
+ 保存
+ 退出
+ 解散
+
+
+
+
+
+
+
+
+
+
+ 邀请
+
-
-
-
- {{ unreadCount }}
-
-
-
-
+
\ No newline at end of file
+
From 660ea031880cff1a806c7d5b80053683d255c356 Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Mon, 11 Nov 2024 22:47:25 +0800
Subject: [PATCH 05/15] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
im-web/src/components/common/FullImage.vue | 32 +++++------
im-web/src/components/common/HeadImage.vue | 57 ++++++++++---------
im-web/src/components/rtc/RtcPrivateVideo.vue | 2 +-
im-web/src/view/Friend.vue | 35 ++++++------
im-web/src/view/Group.vue | 6 +-
im-web/src/view/Home.vue | 6 +-
6 files changed, 68 insertions(+), 70 deletions(-)
diff --git a/im-web/src/components/common/FullImage.vue b/im-web/src/components/common/FullImage.vue
index 7d85f42..99538e7 100644
--- a/im-web/src/components/common/FullImage.vue
+++ b/im-web/src/components/common/FullImage.vue
@@ -2,7 +2,7 @@
+
+
+
+
+
- ![]()
+ ![]()
- ![]()
+ ![]()
- {{name?.substring(0,2).toUpperCase()}}
+ {{name?.substring(0,2).toUpperCase()}}
+
-
-
+
@@ -47,7 +47,7 @@