界面优化

2 years ago · 627f17165b
8 changed files with 93 additions and 52 deletions
--- a/im-ui/src/components/chat/ChatMessageItem.vue
+++ b/im-ui/src/components/chat/ChatMessageItem.vue
@ -258,7 +258,7 @@
 							max-width: 400px;
 							max-height: 300px;
 							border: #dddddd solid 1px;
-							box-shadow: 2px 2px 2px #c0c0c0;
+							border: 5px solid #ccc;
 							border-radius: 6px;
 							cursor: pointer;
 						}
--- a/im-ui/src/components/chat/ChatPrivateVideo.vue
+++ b/im-ui/src/components/chat/ChatPrivateVideo.vue
@ -5,8 +5,10 @@
 			<div class="chat-video-box">
 				<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)">
-					<head-image class="friend-head-image" :id="this.friend.id" :size="80"
-						:url="this.friend.headImage"></head-image>
+					<head-image class="friend-head-image" 
+						:id="friend.id" :size="80" :name="friend.nickName"
+						:url="friend.headImage">
+					</head-image>
 					<video ref="friendVideo" autoplay=""></video>
 				</div>
 				<div class="chat-video-mine">
--- a/im-ui/src/components/chat/ChatVideoAcceptor.vue
+++ b/im-ui/src/components/chat/ChatVideoAcceptor.vue
@ -1,14 +1,14 @@
 <template>
 	<div class="chat-video-acceptor">
-		<div>
-			<head-image :size="120" :url="this.friend.headImage" :id="this.friend.id"></head-image>
-		</div>
-		<div>
+
+		<head-image :id="friend.id" :name="friend.nickName" :url="friend.headImage" :size="100"></head-image>
+
+		<div class="acceptor-text">
 			{{friend.nickName}} 请求和您进行视频通话...
 		</div>
 		<div class="acceptor-btn-group">
-			<div class="icon iconfont icon-phone-accept accept" @click="accpet()"></div>
-			<div class="icon iconfont icon-phone-reject reject" @click="reject()"></div>
+			<div class="icon iconfont icon-phone-accept accept" @click="accpet()" title="接受"></div>
+			<div class="icon iconfont icon-phone-reject reject" @click="reject()" title="拒绝"></div>
 		</div>
 	</div>
 </template>
@ -103,26 +103,78 @@
 <style scoped lang="scss">
 	.chat-video-acceptor {
 		position: absolute;
-		right: 1px;
-		bottom: 1px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		right: 5px;
+		bottom: 5px;
 		width: 250px;
 		height: 250px;
 		padding: 20px;
-		text-align: center;
 		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 {
 			display: flex;
 			justify-content: space-around;
 			margin-top: 20px;
+			width: 100%;

 			.icon {
-				font-size: 50px;
+				font-size: 60px;
 				cursor: pointer;
-
+				border-radius: 50%;
 				&.accept {
 					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 {
--- a/im-ui/src/components/common/FullImage.vue
+++ b/im-ui/src/components/common/FullImage.vue
@ -1,9 +1,9 @@
 <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">
-			<img class="full-img" :src="url" />
+			<el-image :src="url" :fit="fit"></el-image>
 		</div>
-		
+
 	</el-dialog>
 </template>

@ -12,6 +12,7 @@
 		name: "fullImage",
 		data() {
 			return {
+				fit: 'cover'
 			}
 		},
 		methods: {
@ -31,12 +32,11 @@
 </script>

 <style>
-	.image-box{
+	.image-box {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		
-		
+
+
 	}
-	
-</style>
+</style>
--- a/im-ui/src/components/common/HeadImage.vue
+++ b/im-ui/src/components/common/HeadImage.vue
@ -32,7 +32,7 @@
 			},
 			name:{
 				type: String,
-				default: "X"
+				default: "?"
 			},
 			online:{
 				type: Boolean,
@ -41,6 +41,7 @@
 		},
 		methods:{
 			showUserInfo(e){
+				console.log(this.id)
 				if(this.id && this.id>0){
 					this.$http({
 						url: `/user/find/${this.id}`,
--- a/im-uniapp/components/chat-message-item/chat-message-item.vue
+++ b/im-uniapp/components/chat-message-item/chat-message-item.vue
@ -6,12 +6,8 @@
 		
 		<view class="chat-msg-normal" v-if="msgInfo.type>=0 && msgInfo.type<10"
 			:class="{'chat-msg-mine':msgInfo.selfSend}">
-			
 			<head-image class="avatar" :id="msgInfo.sendId" :url="headImage"
 			:name="showName" :size="80"></head-image>
-			
-			
-
 			<view class="chat-msg-content" @longpress="onShowMenu($event)">
 				<view v-if="msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
 					<text>{{showName}}</text>
@ -22,7 +18,7 @@
 						:nodes="$emo.transform(msgInfo.content)"></rich-text>
 					<view class="chat-msg-image" v-if="msgInfo.type==$enums.MESSAGE_TYPE.IMAGE">
 						<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()">
 							</image>
 							<loading v-if="loading"></loading>
@ -191,6 +187,9 @@
 		.chat-msg-tip {
 			line-height: 60rpx;
 			text-align: center;
+			color: #555;
+			font-size: 24rpx;
+			padding: 10rpx;
 		}

 		.chat-msg-normal {
@ -206,8 +205,6 @@
 				left: 0;
 			}

-
-
 			.chat-msg-content {
 				text-align: left;

@ -263,8 +260,9 @@

 							.send-image {
 								min-width: 200rpx;
-								min-height: 150rpx;
-								max-width: 500rpx;
+								min-height: 200rpx;
+								max-width: 400rpx;
+								max-height: 400rpx;
 								border: 8rpx solid #ebebf5;
 								cursor: pointer;
 							}
--- a/im-uniapp/pages/group/group-edit.vue
+++ b/im-uniapp/pages/group/group-edit.vue
@ -4,7 +4,7 @@
 			label-width="100%">
 			<uni-forms-item label="群聊头像:" name="headImage">
 				<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>
 				<head-image  v-show="!isOwner" :name="group.remark" 
 					:url="group.headImage" :size="200"></head-image>
@ -141,9 +141,11 @@
 	.group-edit {
 		padding: 20rpx;

-		.head-image {
+		.group-image {
 			width: 200rpx;
 			height: 200rpx;
+			border: 1px solid #ccc;
+			border-radius: 5%;
 		}
 	}
 </style>
--- a/im-uniapp/pages/mine/mine.vue
+++ b/im-uniapp/pages/mine/mine.vue
@ -1,9 +1,9 @@
 <template>
 	<view class="page mine">
 		<view class="content" @click="onModifyInfo()">
-			<view class="avatar">
-				<image class="head-image" :src="userInfo.headImage" lazy-load="true" mode="aspectFill"></image>
-			</view>
+			<head-image :name="userInfo.nickName"  
+				:url="userInfo.headImage"
+				:size="160"></head-image>
 			<view class="info-item">
 				<view class="info-primary">
 					<text class="info-username">
@ -77,20 +77,6 @@
 			justify-content: space-between;
 			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 {
 				display: flex;
 				align-items: flex-start;