-
- 消息
- 消息
- 创建群聊
-
-
-
-
-
- ![]()
+
+
+
+ 消息
+
+
+ 创建群聊
+
+
+
+
+
-
-
+
-
+
- {{ item.name }}
-
+ ![]()
+
+ {{ item.name }}
- 
- 状态设置
-
-
- 状态设置
-
-
-
-
- 
+
+
+
+ 状态设置
-
+ 状态设置
-
-
- 粉丝
+
+
+
+
+
+
-
-
+
+
+
+
+
-
+
-
+ 粉丝
+
+
+ xxx 关注了你
+
- xxx 关注了你
+
-
+
-
-
- 
-
-
-
-
-
- 互动消息
+
+
+
-
-
+
+
+
+
+
-
+
-
+ 互动消息
+
+
+ xxx 赞了你的评论
+
- xxx 赞了你的评论
+
-
+
-
-
-
- 
-
-
-
- 抖音小助手
- 官方
+
+
+
-
-
+
+
+
+
+
-
+
-
+ 抖音小助手
+ 官方
+
+
+ #今天谁请客呢
+
+ 星期四
+
- #今天谁请客呢
-
- 星期四
+
-
+
-
-
-
-
- 
-
-
-
- 系统通知
- 官方
+
+
+
-
-
+
+
+
+
+
-
+
-
+ 系统通知
+ 官方
+
+
+ 协议修订通知
+
+ 08-31
+
- 协议修订通知
-
- 08-31
+
-
+
-
-
-
- 
-
-
-
-
-
- 求更新
- 官方
+
+
+
-
-
+
+
+
+
+
-
+
-
+ 求更新
+ 官方
+
+
+ 你收到过1次求更新
+
+ 10-09
+
- 你收到过1次求更新
-
- 10-09
+
-
+
-
-
-
-
- 
-
-
-
- 任务通知
- 官方
+
+
+
-
-
+
+
+
+
+
-
+
-
+ 任务通知
+ 官方
+
+
+ 发作品得流量
+
+ 05-26
+
- 发作品得流量
-
- 05-26
+
-
+
-
-
-
-
- 
-
-
-
- 直播通知
- 官方
+
+
+
-
-
+
+
+
+
+
-
+
-
+ 直播通知
+ 官方
+
+
+ 举报结果通知
+
+ 05-26
+
- 举报结果通知
-
- 05-26
+
-
+
-
-
-
- 
-
-
-
-
-
- 钱包通知
- 官方
+
+
+
-
-
+
+
+
+
+
-
+
-
+ 钱包通知
+ 官方
+
+
+ 卡券发放提醒
+
+ 05-26
+
- 卡券发放提醒
-
- 05-26
+
-
+
-
-
-
-
- 
-
-
-
-
-
-
-
-
- {{ userinfo.nickname }}
+
+
+
-
+
+
+
+
+
-
+
-
+ {{ userinfo.nickname }}
+
+
+ 哈哈哈哈哈哈
+
+ 10-10
+
- 哈哈哈哈哈哈
-
- 10-10
+
-
+
+
+
+
12
-
-
-
-
12
-
-
-
- 
+
+
+
-
+
+
+
-
+
+
+
+
+
+
+ 
+ 
+
+ {{ item.name }}
+ {{ item.account ? '抖音号:' + item.account : '' }}
+
+
+
+
+
+
+
+ 搜索结果为空
+
+
+ 没有搜索到相关的联系人
+
+
+ 
-
-
+ 已加入的群聊
+
- {{ item.name }}
- {{ item.account ? '抖音号:' + item.account : '' }}
-
-
-
-
- 搜索结果为空
+
+
- Z
+
+ ![]()
+
+ {{ item.name }}
+
+
- 没有搜索到相关的联系人
+
+
+
-
-
-
+ 发起聊天
-
-
+
-
- 已加入的群聊
-
+
+
-
-
Z
-
- ![]()
+
+
-
+
-
-
+
- {{ item.name }}
-
+
+ {{ text.length > 20 ? text.substr(0, 20) + '...' : text }}
+ (3)
+
-
-
- 发起聊天
-
-
-
+
-
-
-
-
-
-
+
+
-
-
-
+
-
+
-
+ 
-
- 
- {{ text.length > 20 ? text.substr(0, 20) + '...' : text }}
- (3)
+ 朋友推荐
+
-
@@ -379,11 +397,12 @@ export default {
data() {
return {
isShowRecommend: false,
+ searchKey: '',
createChatSearchKey: '',
showJoinedChat: false,
loading: false,
createChatDialog: false,
- isShowText: false,
+ isShowRightText: false,
text: 'AAAAAAAAA、BBBBBBBBBBBBB、CCCCCCCC',
// friends: [
// {
@@ -465,9 +484,9 @@ export default {
})
},
mounted() {
- setTimeout(()=>{
+ setTimeout(() => {
// this.isShowRecommend = true
- },1000)
+ }, 1000)
},
methods: {
async loadRecommendData() {
@@ -504,61 +523,24 @@ export default {
padding-bottom: 6rem;
color: white;
- .create-chat-wrapper {
- min-height: 70vh;
- padding-bottom: 6rem;
+ .no-search {
- .joined-chat {
- border-bottom: 1px solid @line-color;
- height: 5rem;
- padding: 0 2rem;
- display: flex;
- align-items: center;
-
- .left {
- width: 2.2rem;
- height: 2.2rem;
- margin-left: 1rem;
- margin-right: 2rem;
- }
+ .create-chat-wrapper {
+ min-height: 70vh;
+ padding-bottom: 6rem;
- .right {
- font-size: 1.4rem;
- flex: 1;
+ .joined-chat {
+ border-bottom: 1px solid @line-color;
+ height: 5rem;
+ padding: 0 2rem;
display: flex;
align-items: center;
- justify-content: space-between;
-
- img {
- height: 1.5rem;
- }
- }
- }
-
- .friend-list {
- padding: 0 2rem;
-
- .index {
- height: 6rem;
- line-height: 6rem;
- font-size: 1.4rem;
- }
-
- .friend-item {
- margin-bottom: 2rem;
- display: flex;
- align-items: center;
- //background: #fff;
-
- &:nth-child(1) {
- margin-top: 1rem;
- }
.left {
- width: 4.8rem;
- height: 4.8rem;
- border-radius: 50%;
- margin-right: 1rem;
+ width: 2.2rem;
+ height: 2.2rem;
+ margin-left: 1rem;
+ margin-right: 2rem;
}
.right {
@@ -569,534 +551,489 @@ export default {
justify-content: space-between;
img {
- height: 2rem;
+ height: 1.5rem;
}
}
}
- }
- .btn-wrapper {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- background: @main-bg;
- //background: red;
- display: flex;
- align-items: center;
- justify-content: center;
+ .friend-list {
+ padding: 0 2rem;
- .btn {
- margin-bottom: 2rem;
- width: calc(100% - 4rem);
- height: 4rem;
- display: flex;
- align-items: center;
- font-size: 1.4rem;
- justify-content: center;
- background: #3f445c;
- border-radius: .2rem;
+ .index {
+ height: 6rem;
+ line-height: 6rem;
+ font-size: 1.4rem;
+ }
+
+ .friend-item {
+ margin-bottom: 2rem;
+ display: flex;
+ align-items: center;
+ //background: #fff;
+
+ &:nth-child(1) {
+ margin-top: 1rem;
+ }
+
+ .left {
+ width: 4.8rem;
+ height: 4.8rem;
+ border-radius: 50%;
+ margin-right: 1rem;
+ }
- &.primary {
- background: @primary-btn-color;
+ .right {
+ font-size: 1.4rem;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ img {
+ height: 2rem;
+ }
+ }
}
}
- }
-
- .search-result {
- padding: 0 2rem;
- .search-result-item {
- margin-bottom: 2rem;
+ .btn-wrapper {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: @main-bg;
+ //background: red;
display: flex;
align-items: center;
+ justify-content: center;
- &:nth-child(1) {
- margin-top: 1rem;
- }
+ .btn {
+ margin-bottom: 2rem;
+ width: calc(100% - 4rem);
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ font-size: 1.4rem;
+ justify-content: center;
+ background: #3f445c;
+ border-radius: .2rem;
- .left {
- width: 4.8rem;
- height: 4.8rem;
- border-radius: 50%;
- margin-right: 1rem;
+ &.primary {
+ background: @primary-btn-color;
+ }
}
+ }
- .right {
- font-size: 1.4rem;
- flex: 1;
+ .search-result {
+ padding: 0 2rem;
+
+ .search-result-item {
+ margin-bottom: 2rem;
display: flex;
align-items: center;
- justify-content: space-between;
- .info {
+ &:nth-child(1) {
+ margin-top: 1rem;
+ }
+
+ .left {
+ width: 4.8rem;
+ height: 4.8rem;
+ border-radius: 50%;
+ margin-right: 1rem;
+ }
+
+ .right {
+ font-size: 1.4rem;
+ flex: 1;
display: flex;
- flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
- .name {
- font-size: 1.4rem;
- }
+ .info {
+ display: flex;
+ flex-direction: column;
- .account {
- font-size: 1.3rem;
- color: @second-text-color;
+ .name {
+ font-size: 1.4rem;
+ }
+
+ .account {
+ font-size: 1.3rem;
+ color: @second-text-color;
+ }
}
- }
- img {
- height: 2rem;
+ img {
+ height: 2rem;
+ }
}
}
}
- }
-
- .no-result {
- height: 50vh;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
-
- .notice-h1 {
- font-size: 1.6rem;
- }
-
- .notice-h2 {
- margin-top: 1rem;
- font-size: 1.4rem;
- color: @second-text-color;
- }
- }
- }
+ .no-result {
+ height: 50vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
- .joined-chat-wrapper {
- min-height: 70vh;
+ .notice-h1 {
+ font-size: 1.6rem;
+ }
- .nav {
- font-size: 1.7rem;
- padding: 2rem;
- display: flex;
- justify-content: space-between;
+ .notice-h2 {
+ margin-top: 1rem;
+ font-size: 1.4rem;
+ color: @second-text-color;
+ }
- img {
- height: 2rem;
}
}
- .chat-list {
- padding: 0 2rem;
+ .joined-chat-wrapper {
+ min-height: 70vh;
- .chat-item {
- margin-bottom: 2rem;
+ .nav {
+ font-size: 1.7rem;
+ padding: 2rem;
display: flex;
- align-items: center;
- position: relative;
- overflow: hidden;
-
- &:nth-last-child(1) {
- margin-bottom: 0;
- }
+ justify-content: space-between;
- &:nth-child(1) {
- margin-top: 1rem;
+ img {
+ height: 2rem;
}
+ }
- .left {
- width: 4.8rem;
- height: 4.8rem;
- border-radius: 50%;
- margin-right: 1rem;
- }
+ .chat-list {
+ padding: 0 2rem;
- .right {
- font-size: 1.4rem;
- flex: 1;
+ .chat-item {
+ margin-bottom: 2rem;
display: flex;
align-items: center;
- justify-content: space-between;
+ position: relative;
+ overflow: hidden;
- .title {
- box-sizing: border-box;
+ &:nth-last-child(1) {
+ margin-bottom: 0;
+ }
+
+ &:nth-child(1) {
+ margin-top: 1rem;
+ }
+
+ .left {
+ width: 4.8rem;
+ height: 4.8rem;
+ border-radius: 50%;
+ margin-right: 1rem;
+ }
+
+ .right {
+ font-size: 1.4rem;
+ flex: 1;
display: flex;
align-items: center;
+ justify-content: space-between;
- .name {
- }
+ .title {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
- .num {
- margin-left: .5rem;
- color: @second-text-color;
+ .name {
+ }
+
+ .num {
+ margin-left: .5rem;
+ color: @second-text-color;
+ }
}
- }
- img {
- height: 1.5rem;
+ img {
+ height: 1.5rem;
+ }
}
}
}
}
- }
- .header {
- position: fixed;
- width: 100vw;
- background: @main-bg;
- z-index: 11;
- height: 6rem;
- display: flex;
- padding: @padding-page;
- box-sizing: border-box;
- align-items: center;
- justify-content: space-between;
- }
+ /deep/ #BaseHeader .header {
+ border-bottom: none;
- .content {
- padding-top: @header-height;
- }
+ .left {
+ opacity: 0;
+ }
+ }
- .friends {
- overflow-x: scroll;
- display: flex;
- font-size: 1.4rem;
+ .content {
+ padding-top: @header-height;
+ }
- .friend {
- &:nth-last-child(1) {
- img {
- margin: 0 1rem;
- padding: 1.7rem;
- background: @second-btn-color-tran;
- width: 3rem;
- height: 3rem;
- border-radius: 50%;
- margin-bottom: .6rem;
+ .friends {
+ overflow-x: scroll;
+ display: flex;
+ font-size: 1.4rem;
+
+ .friend {
+ &:nth-last-child(1) {
+ img {
+ margin: 0 1rem;
+ padding: 1.7rem;
+ background: @second-btn-color-tran;
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+ margin-bottom: .6rem;
+ }
}
- }
- .avatar {
- position: relative;
- margin-bottom: .6rem;
+ .avatar {
+ position: relative;
+ margin-bottom: .6rem;
- img {
- @width: 6.4rem;
- width: @width;
- height: @width;
- border-radius: 50%;
- }
+ img {
+ @width: 6.4rem;
+ width: @width;
+ height: @width;
+ border-radius: 50%;
+ }
- &.on-line::before {
- content: ' ';
- border: .4rem solid black;
- width: 1.8rem;
- height: 1.8rem;
- background: rgb(115, 254, 73);
- border-radius: 50%;
- position: absolute;
- bottom: 0;
- right: 0;
- }
+ &.on-line::before {
+ content: ' ';
+ border: .4rem solid black;
+ width: 1.8rem;
+ height: 1.8rem;
+ background: rgb(115, 254, 73);
+ border-radius: 50%;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ }
- }
+ }
- span {
- width: 6.4rem;
- font-size: 1.2rem;
- color: lightgray;
- display: block;
- text-align: center;
- word-break: break-all;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+ span {
+ width: 6.4rem;
+ font-size: 1.2rem;
+ color: lightgray;
+ display: block;
+ text-align: center;
+ word-break: break-all;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
}
}
- }
- .messages {
+ .messages {
- .message {
- display: flex;
- align-items: center;
+ .message {
+ display: flex;
+ align-items: center;
- &.top {
- background: #353a4f;
- }
+ &.top {
+ background: #353a4f;
+ }
- &:active {
- background: @active-main-bg;
- }
+ &:active {
+ background: @active-main-bg;
+ }
- .avatar {
- position: relative;
+ .avatar {
+ position: relative;
- .head-image {
- margin-left: 2rem;
- margin-right: 1.5rem;
- @width: 4.5rem;
- width: @width;
- height: @width;
- border-radius: 50%;
- }
+ .head-image {
+ margin-left: 2rem;
+ margin-right: 1.5rem;
+ @width: 4.5rem;
+ width: @width;
+ height: @width;
+ border-radius: 50%;
+ }
- &.on-line::before {
- content: ' ';
- border: .3rem solid black;
- width: 1.2rem;
- height: 1.2rem;
- background: rgb(115, 254, 73);
- border-radius: 50%;
- position: absolute;
- bottom: 0;
- right: 1.5rem;
+ &.on-line::before {
+ content: ' ';
+ border: .3rem solid black;
+ width: 1.2rem;
+ height: 1.2rem;
+ background: rgb(115, 254, 73);
+ border-radius: 50%;
+ position: absolute;
+ bottom: 0;
+ right: 1.5rem;
+ }
}
- }
- .content {
- flex: 1;
- display: flex;
- justify-content: space-between;
- @padding: 1.4rem;
- padding: @padding 0 @padding 0;
- border-bottom: 1px solid @line-color2;
+ .content {
+ flex: 1;
+ display: flex;
+ justify-content: space-between;
+ @padding: 1.4rem;
+ padding: @padding 0 @padding 0;
+ border-bottom: 1px solid @line-color2;
- .left {
- .name {
- font-size: 1.4rem;
- color: white;
- display: flex;
- align-items: flex-start;
+ .left {
+ .name {
+ font-size: 1.4rem;
+ color: white;
+ display: flex;
+ align-items: flex-start;
+
+ .tag {
+ margin-left: .5rem;
+ font-size: 1rem;
+ background: @second-btn-color-tran;
+ color: @second-text-color;
+ padding: .2rem .5rem;
+ border-radius: .2rem;
+ }
+ }
- .tag {
- margin-left: .5rem;
- font-size: 1rem;
- background: @second-btn-color-tran;
+ .detail {
color: @second-text-color;
- padding: .2rem .5rem;
- border-radius: .2rem;
+ font-size: 1.2rem;
+ margin-top: .4rem;
+ display: flex;
+ align-items: center;
+
+ .point {
+ display: inline-block;
+ margin-left: .8rem;
+ margin-right: .8rem;
+ border-radius: 50%;
+ width: 1.5px;
+ height: 1.5px;
+ background: @second-text-color;
+ }
+
+ .sent {
+ width: 1rem;
+ height: 1rem;
+ }
}
}
- .detail {
- color: @second-text-color;
- font-size: 1.2rem;
- margin-top: .4rem;
+ .right {
+ margin-right: 3rem;
display: flex;
align-items: center;
- .point {
- display: inline-block;
- margin-left: .8rem;
- margin-right: .8rem;
- border-radius: 50%;
- width: 1.5px;
- height: 1.5px;
- background: @second-text-color;
+ .arrow {
+ width: 1.5rem;
+ height: 1.5rem;
}
- .sent {
- width: 1rem;
- height: 1rem;
+ .camera {
+ width: 2rem;
+ height: 2rem;
}
- }
- }
- .right {
- margin-right: 3rem;
- display: flex;
- align-items: center;
-
- .arrow {
- width: 1.5rem;
- height: 1.5rem;
- }
-
- .camera {
- width: 2rem;
- height: 2rem;
- }
-
- .not-read {
- width: .7rem;
- height: .7rem;
- border-radius: 50%;
- background: yellow;
- }
+ .not-read {
+ width: .7rem;
+ height: .7rem;
+ border-radius: 50%;
+ background: yellow;
+ }
- .badge {
- font-size: 1.2rem;
- display: block;
- color: black;
- padding: 1px .6rem;
- border-radius: 1rem;
- background: yellow;
+ .badge {
+ font-size: 1.2rem;
+ display: block;
+ color: black;
+ padding: 1px .6rem;
+ border-radius: 1rem;
+ background: yellow;
+ }
}
}
- }
-
- }
- .not-more {
- color: @second-text-color;
- text-align: center;
- padding: 2rem;
- }
- }
-
- .recommend {
- .title {
- padding: 2rem 2rem 1rem 2rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .left {
- color: @second-text-color;
-
- img {
- width: 1rem;
- height: 1rem;
- }
}
- .right {
- border-radius: 50%;
- background: @second-text-color;
- padding: .5rem;
- width: 1rem;
- height: 1rem;
+ .not-more {
+ color: @second-text-color;
+ text-align: center;
+ padding: 2rem;
}
}
- .item {
+ .recommend-dialog {
+ position: fixed;
+ z-index: 11;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
display: flex;
align-items: center;
+ justify-content: center;
- &.top {
- background: #353a4f;
- }
-
- &:active {
- background: #353a4f;
- }
-
- .head-image {
- margin-left: 2rem;
- margin-right: 1.5rem;
- width: 4.8rem;
- height: 4.8rem;
- border-radius: 50%;
- }
-
- .content {
- flex: 1;
- display: flex;
- justify-content: space-between;
- padding: 1.5rem 0;
-
- .left {
- .name {
- font-size: 1.8rem;
- color: white;
- }
-
- .detail {
- color: @second-text-color;
- font-size: 1.2rem;
- margin-top: 4px;
- }
- }
+ .dialog-content {
+ position: relative;
+ z-index: 4;
+ background: white;
+ width: 85vw;
+ height: 80vh;
+ border-radius: 1.2rem;
+ overflow: hidden;
- .right {
- margin-right: 2rem;
+ .dialog-header {
+ color: black;
+ border-bottom: 1px solid whitesmoke;
+ padding: @padding-page;
display: flex;
align-items: center;
+ justify-content: space-between;
- .button {
- background: @primary-btn-color;
- margin-left: .8rem;
- padding: .8rem 2rem;
- border-radius: .3rem;
+ .title {
+ display: flex;
+ align-items: center;
- &:nth-last-child(1) {
- background: rgb(58, 58, 67);
+ & > img {
+ margin-left: .3rem;
+ width: 1.5rem;
}
}
- }
- }
-
- }
- }
-
- .recommend-dialog {
- position: fixed;
- z-index: 11;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .dialog-content {
- position: relative;
- z-index: 4;
- background: white;
- width: 85vw;
- height: 80vh;
- border-radius: 1.2rem;
- overflow: hidden;
-
- .dialog-header {
- color: black;
- border-bottom: 1px solid whitesmoke;
- padding: @padding-page;
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- .title {
- display: flex;
- align-items: center;
& > img {
- margin-left: .3rem;
- width: 1.5rem;
+ width: 2rem;
}
- }
- & > img {
- width: 2rem;
}
- }
-
- .dialog-body {
- padding: @padding-page;
- padding-top: 0;
- height: calc(80vh - 5rem);
- overflow: auto;
-
- .scroll {
+ .dialog-body {
+ padding: @padding-page;
+ padding-top: 0;
height: calc(80vh - 5rem);
- }
+ overflow: auto;
- .l-button {
- color: white;
- }
+ .scroll {
+ height: calc(80vh - 5rem);
+ }
- .name {
- color: black !important;
- }
+ .l-button {
+ color: white;
+ }
+
+ .name {
+ color: black !important;
+ }
- /deep/ .People .content .left .name {
- color: black !important;
+ /deep/ .People .content .left .name {
+ color: black !important;
+ }
}
}
}
}
+
+ .searching {
+
+ }
+
}
diff --git a/src/pages/message/Visitors.vue b/src/pages/message/Visitors.vue
index cf209a5..966e6ad 100644
--- a/src/pages/message/Visitors.vue
+++ b/src/pages/message/Visitors.vue
@@ -44,7 +44,7 @@
v-model="isShowSetting"
mode="white"
mask-mode="dark"
- height="25rem"
+ height="27rem"
:show-heng-gang="false"
>
-
+
+
-
-
-
-
- 朋友推荐
-
+
-
-
+
+
+
-
-
-
-
+
+
+
+
+
-
+
+
diff --git a/src/pages/people/FindAcquaintance.vue b/src/pages/people/FindAcquaintance.vue
index 24778d9..2fe94f4 100644
--- a/src/pages/people/FindAcquaintance.vue
+++ b/src/pages/people/FindAcquaintance.vue
@@ -13,16 +13,16 @@
-
+ :is-show-right-text="false"
+ @click="isShowRightText = true">
-
-
+
-
@@ -149,7 +149,7 @@ export default {
moreOptionDialog: false,
outWebImgAccountDialog: false,
indicatorFixed: false,
- isShowText: false,
+ isShowRightText: false,
isSearch: false,
searchKey: '',
@@ -194,8 +194,8 @@ export default {
this.isSearch = true
},
back() {
- if (this.isShowText) {
- this.isShowText = false
+ if (this.isShowRightText) {
+ this.isShowRightText = false
} else {
this.$back()
}
diff --git a/src/pages/people/FollowAndFans.vue b/src/pages/people/FollowAndFans.vue
index 9f56f94..5acd640 100644
--- a/src/pages/people/FollowAndFans.vue
+++ b/src/pages/people/FollowAndFans.vue
@@ -21,7 +21,7 @@