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

界面优化

master
xsx 2 years ago
parent
ee570cdbd5
commit
627f17165b
8 changed files with 93 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      im-ui/src/components/chat/ChatMessageItem.vue
  2. 6
      im-ui/src/components/chat/ChatPrivateVideo.vue
  3. 76
      im-ui/src/components/chat/ChatVideoAcceptor.vue
  4. 16
      im-ui/src/components/common/FullImage.vue
  5. 3
      im-ui/src/components/common/HeadImage.vue
  6. 16
      im-uniapp/components/chat-message-item/chat-message-item.vue
  7. 6
      im-uniapp/pages/group/group-edit.vue
  8. 20
      im-uniapp/pages/mine/mine.vue

2
im-ui/src/components/chat/ChatMessageItem.vue
View File

@ -258,7 +258,7 @@
max-width: 400px; max-width: 400px;
max-height: 300px; max-height: 300px;
border: #dddddd solid 1px; border: #dddddd solid 1px;
box-shadow: 2px 2px 2px #c0c0c0; border: 5px solid #ccc;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
} }

6
im-ui/src/components/chat/ChatPrivateVideo.vue
View File

@ -5,8 +5,10 @@
<div class="chat-video-box"> <div class="chat-video-box">
<div class="chat-video-friend" v-loading="loading" element-loading-text="等待对方接听..." <div class="chat-video-friend" v-loading="loading" element-loading-text="等待对方接听..."
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"> element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
<head-image class="friend-head-image" :id="this.friend.id" :size="80" <head-image class="friend-head-image"
:url="this.friend.headImage"></head-image> :id="friend.id" :size="80" :name="friend.nickName"
:url="friend.headImage">
</head-image>
<video ref="friendVideo" autoplay=""></video> <video ref="friendVideo" autoplay=""></video>
</div> </div>
<div class="chat-video-mine"> <div class="chat-video-mine">

76
im-ui/src/components/chat/ChatVideoAcceptor.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="chat-video-acceptor"> <div class="chat-video-acceptor">
<div>
<head-image :size="120" :url="this.friend.headImage" :id="this.friend.id"></head-image> <head-image :id="friend.id" :name="friend.nickName" :url="friend.headImage" :size="100"></head-image>
</div>
<div> <div class="acceptor-text">
{{friend.nickName}} 请求和您进行视频通话... {{friend.nickName}} 请求和您进行视频通话...
</div> </div>
<div class="acceptor-btn-group"> <div class="acceptor-btn-group">
<div class="icon iconfont icon-phone-accept accept" @click="accpet()"></div> <div class="icon iconfont icon-phone-accept accept" @click="accpet()" title="接受"></div>
<div class="icon iconfont icon-phone-reject reject" @click="reject()"></div> <div class="icon iconfont icon-phone-reject reject" @click="reject()" title="拒绝"></div>
</div> </div>
</div> </div>
</template> </template>
@ -103,26 +103,78 @@
<style scoped lang="scss"> <style scoped lang="scss">
.chat-video-acceptor { .chat-video-acceptor {
position: absolute; position: absolute;
right: 1px; display: flex;
bottom: 1px; flex-direction: column;
align-items: center;
right: 5px;
bottom: 5px;
width: 250px; width: 250px;
height: 250px; height: 250px;
padding: 20px; padding: 20px;
text-align: center;
background-color: #eeeeee; background-color: #eeeeee;
border: #dddddd solid 1px; border: #dddddd solid 5px;
border-radius: 3%;
.acceptor-text {
padding: 10px;
text-align: center;
font-size: 16px;
}
.acceptor-btn-group { .acceptor-btn-group {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-top: 20px; margin-top: 20px;
width: 100%;
.icon { .icon {
font-size: 50px; font-size: 60px;
cursor: pointer; cursor: pointer;
border-radius: 50%;
&.accept { &.accept {
color: green; color: green;
animation: anim 2s ease-in infinite, vibration 2s ease-in infinite;
@keyframes anim {
0% {
box-shadow: 0 1px 0 4px #ffffff;
}
10% {
box-shadow: 0 1px 0 8px rgba(255, 165, 0, 1);
}
25% {
box-shadow: 0 1px 0 12px rgba(255, 210, 128, 1), 0 1px 0 16px rgba(255, 201, 102, 1);
}
50% {
box-shadow: 0 2px 5px 10px rgba(255, 184, 51, 1), 0 2px 5px 23px rgba(248, 248, 255, 1);
}
}
@keyframes vibration {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(20deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
} }
&.reject { &.reject {

16
im-ui/src/components/common/FullImage.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<el-dialog width="60%" :visible.sync="visible" :before-close="handleClose" :modal="true"> <el-dialog width="75%" top="30px" :visible.sync="visible" :before-close="handleClose" :modal="true">
<div class="image-box"> <div class="image-box">
<img class="full-img" :src="url" /> <el-image :src="url" :fit="fit"></el-image>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
@ -12,6 +12,7 @@
name: "fullImage", name: "fullImage",
data() { data() {
return { return {
fit: 'cover'
} }
}, },
methods: { methods: {
@ -31,12 +32,11 @@
</script> </script>
<style> <style>
.image-box{ .image-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
</style>
</style>

3
im-ui/src/components/common/HeadImage.vue
View File

@ -32,7 +32,7 @@
}, },
name:{ name:{
type: String, type: String,
default: "X" default: "?"
}, },
online:{ online:{
type: Boolean, type: Boolean,
@ -41,6 +41,7 @@
}, },
methods:{ methods:{
showUserInfo(e){ showUserInfo(e){
console.log(this.id)
if(this.id && this.id>0){ if(this.id && this.id>0){
this.$http({ this.$http({
url: `/user/find/${this.id}`, url: `/user/find/${this.id}`,

16
im-uniapp/components/chat-message-item/chat-message-item.vue
View File

@ -6,12 +6,8 @@
<view class="chat-msg-normal" v-if="msgInfo.type>=0 && msgInfo.type<10" <view class="chat-msg-normal" v-if="msgInfo.type>=0 && msgInfo.type<10"
:class="{'chat-msg-mine':msgInfo.selfSend}"> :class="{'chat-msg-mine':msgInfo.selfSend}">
<head-image class="avatar" :id="msgInfo.sendId" :url="headImage" <head-image class="avatar" :id="msgInfo.sendId" :url="headImage"
:name="showName" :size="80"></head-image> :name="showName" :size="80"></head-image>
<view class="chat-msg-content" @longpress="onShowMenu($event)"> <view class="chat-msg-content" @longpress="onShowMenu($event)">
<view v-if="msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top"> <view v-if="msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
<text>{{showName}}</text> <text>{{showName}}</text>
@ -22,7 +18,7 @@
:nodes="$emo.transform(msgInfo.content)"></rich-text> :nodes="$emo.transform(msgInfo.content)"></rich-text>
<view class="chat-msg-image" v-if="msgInfo.type==$enums.MESSAGE_TYPE.IMAGE"> <view class="chat-msg-image" v-if="msgInfo.type==$enums.MESSAGE_TYPE.IMAGE">
<view class="img-load-box"> <view class="img-load-box">
<image class="send-image" mode="widthFix" :src="JSON.parse(msgInfo.content).thumbUrl" lazy-load="true" <image class="send-image" mode="heightFix" :src="JSON.parse(msgInfo.content).thumbUrl" lazy-load="true"
@click.stop="onShowFullImage()"> @click.stop="onShowFullImage()">
</image> </image>
<loading v-if="loading"></loading> <loading v-if="loading"></loading>
@ -191,6 +187,9 @@
.chat-msg-tip { .chat-msg-tip {
line-height: 60rpx; line-height: 60rpx;
text-align: center; text-align: center;
color: #555;
font-size: 24rpx;
padding: 10rpx;
} }
.chat-msg-normal { .chat-msg-normal {
@ -206,8 +205,6 @@
left: 0; left: 0;
} }
.chat-msg-content { .chat-msg-content {
text-align: left; text-align: left;
@ -263,8 +260,9 @@
.send-image { .send-image {
min-width: 200rpx; min-width: 200rpx;
min-height: 150rpx; min-height: 200rpx;
max-width: 500rpx; max-width: 400rpx;
max-height: 400rpx;
border: 8rpx solid #ebebf5; border: 8rpx solid #ebebf5;
cursor: pointer; cursor: pointer;
} }

6
im-uniapp/pages/group/group-edit.vue
View File

@ -4,7 +4,7 @@
label-width="100%"> label-width="100%">
<uni-forms-item label="群聊头像:" name="headImage"> <uni-forms-item label="群聊头像:" name="headImage">
<image-upload v-show="isOwner" :onSuccess="onUnloadImageSuccess"> <image-upload v-show="isOwner" :onSuccess="onUnloadImageSuccess">
<image :src="group.headImage" class="head-image"></image> <image :src="group.headImage" class="group-image"></image>
</image-upload> </image-upload>
<head-image v-show="!isOwner" :name="group.remark" <head-image v-show="!isOwner" :name="group.remark"
:url="group.headImage" :size="200"></head-image> :url="group.headImage" :size="200"></head-image>
@ -141,9 +141,11 @@
.group-edit { .group-edit {
padding: 20rpx; padding: 20rpx;
.head-image { .group-image {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
border: 1px solid #ccc;
border-radius: 5%;
} }
} }
</style> </style>

20
im-uniapp/pages/mine/mine.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<view class="page mine"> <view class="page mine">
<view class="content" @click="onModifyInfo()"> <view class="content" @click="onModifyInfo()">
<view class="avatar"> <head-image :name="userInfo.nickName"
<image class="head-image" :src="userInfo.headImage" lazy-load="true" mode="aspectFill"></image> :url="userInfo.headImage"
</view> :size="160"></head-image>
<view class="info-item"> <view class="info-item">
<view class="info-primary"> <view class="info-primary">
<text class="info-username"> <text class="info-username">
@ -77,20 +77,6 @@
justify-content: space-between; justify-content: space-between;
padding: 20rpx; padding: 20rpx;
.avatar {
display: flex;
justify-content: center;
align-items: center;
width: 160rpx;
height: 160rpx;
.head-image {
width: 100%;
height: 100%;
border-radius: 10%;
}
}
.info-item { .info-item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;

Write Preview
Loading…
Cancel
Save