diff --git a/im-uniapp/App.vue b/im-uniapp/App.vue
index e2c7c3a7f2cbffd61262b4203556af1f187406e7..b59487533cc0f6eed5de593ec8db60feec2ca417 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 d9627ddec3a4523b79619378f0a9dca37b984517..0273268b1f46a61a68ec818bc4a13c227ebe99a7 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 @@
-
+
+ size="small">
{{ 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 5a8de759810d2b691c3e5c20224613901e444a54..3359d70e8a0bd850977eb50521104f3984d7ed5d 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 7dcf1c11490ace9e364e750fb5600c87d9b4aab1..dfa6265a8db8368c305fdaabfdfda00aafedd2f2 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 5a475f5d910226b017d27331c12a22247fa8d28e..726fe4677da95029a8ded222201c4c1157b34620 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 5bf3f89ddc465468271f8ea14683d0731e90aa60..087d36ff2be56be1ad606938f4829b9f0838f3eb 100644
--- a/im-uniapp/components/group-item/group-item.vue
+++ b/im-uniapp/components/group-item/group-item.vue
@@ -1,7 +1,7 @@
+ :url="group.headImage">
{{ 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 f8298c2131d9a1ff41c71f320a36788a7961ce77..5a12ed3f0b611a2dceef83966ef5ad9449aa35a4 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 0000000000000000000000000000000000000000..d92893920cd7f77252dbb9c5c1711b594ff82018
--- /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 9677c9a3b511a009e0ccdcf7c8fcdaff92770a20..e9b2cb460d8d4df002887ad4bae8cd819bf6e07a 100644
--- a/im-uniapp/components/pop-menu/pop-menu.vue
+++ b/im-uniapp/components/pop-menu/pop-menu.vue
@@ -6,7 +6,7 @@
@@ -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 0000000000000000000000000000000000000000..2a06ac2b274c554f5cb62add5bdd86c66bd007a6
--- /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 0000000000000000000000000000000000000000..212dccfc3e2e96d2e845ee4e21784cc2b74eccd0
--- /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 924ff4236d85065f501d04b7ec5ebd95dafd4572..1f9613c4cb93141d9c155d656617f05ee45767c0 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 affae0677053b141e0f1b8e3a08adbda14c4aba3..ab8c7e27662496bd3fc90ab2d6b4974fad56f73d 100644
--- a/im-uniapp/pages/chat/chat-box.vue
+++ b/im-uniapp/pages/chat/chat-box.vue
@@ -1,9 +1,6 @@
-
+ {{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 b69f611f69cf69fad5d1a1215c8a23eb2303e069..692bdc94dc2e400e599cd3a78b421526d44bff7e 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 624bef1547ebf52cd924b0fb040e4b4128395274..41e3988f4a78893a27a79acfeb5ca22b9b3419d7 100644
--- a/im-uniapp/pages/friend/friend-add.vue
+++ b/im-uniapp/pages/friend/friend-add.vue
@@ -1,16 +1,18 @@
-
+ 添加好友
+
+
+
+ :online="user.online" :url="user.headImage">
{{ user.nickName}}