样式调整

im-web/src/components/common/FullImage.vue

@@ -2,7 +2,7 @@
 	<div class="full-image" v-show="visible" :before-close="onClose" :modal="true">
 		<div class="mask"></div>
 		<div class="image-box">
-			<img :src="url"/>
+			<img :src="url" />
 		</div>
 		<div class="close" @click="onClose"><i class="el-icon-close"></i></div>
 	</div>
@@ -33,16 +33,16 @@
 </script>
 
 <style lang="scss">
-	.full-image{
+	.full-image {
 		position: fixed;
 		width: 100%;
 		height: 100%;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		right: 0;
 
-		.mask{
+		.mask {
 			position: fixed;
 			width: 100%;
 			height: 100%;
@@ -56,17 +56,17 @@
 			width: 100%;
 			height: 100%;
 
-			img{
+			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{
+		.close {
 			position: fixed;
 			top: 10px;
 			right: 10px;
@@ -75,6 +75,4 @@
 			cursor: pointer;
 		}
 	}
-
-
-</style>
+</style>

im-web/src/components/common/HeadImage.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="head-image" @click="showUserInfo($event)" :style="{cursor : isShowUserInfo ? 'pointer': null}">
-		<img class="avatar-image" v-show="url" :src="url"
-			:style="avatarImageStyle" loading="lazy" />
+		<img class="avatar-image" v-show="url" :src="url" :style="avatarImageStyle" loading="lazy" />
 		<div class="avatar-text" v-show="!url" :style="avatarTextStyle">
-			{{name?.substring(0,2).toUpperCase()}}</div>
+			{{name?.substring(0,2).toUpperCase()}}
+		</div>
 		<div v-show="online" class="online" title="用户当前在线"></div>
 		<slot></slot>
 	</div>
@@ -14,13 +14,14 @@
 		name: "headImage",
 		data() {
 			return {
-				colors: ["#5daa31", "#c7515a", "#e03697",  "#85029b",
-					"#c9b455",  "#326eb6"]
+				colors: ["#5daa31", "#c7515a", "#e03697", "#85029b",
+					"#c9b455", "#326eb6"
+				]
 
 			}
 		},
 		props: {
-			id:{
+			id: {
 				type: Number
 			},
 			size: {
@@ -33,41 +34,41 @@
 			height: {
 				type: Number
 			},
-			radius:{
+			radius: {
 				type: String,
 				default: "50%"
 			},
 			url: {
 				type: String
 			},
-			name:{
+			name: {
 				type: String,
 				default: null
 			},
-			online:{
+			online: {
 				type: Boolean,
-				default:false
+				default: false
 			},
-      isShowUserInfo: {
-        type: Boolean,
-        default: true
-      }
+			isShowUserInfo: {
+				type: Boolean,
+				default: true
+			}
 		},
-		methods:{
-			showUserInfo(e){
-        if(!this.isShowUserInfo) return;
-				if(this.id && this.id>0){
+		methods: {
+			showUserInfo(e) {
+				if (!this.isShowUserInfo) return;
+				if (this.id && this.id > 0) {
 					this.$http({
 						url: `/user/find/${this.id}`,
 						method: 'get'
 					}).then((user) => {
-						this.$store.commit("setUserInfoBoxPos",e);
-						this.$store.commit("showUserInfoBox",user);
+						this.$store.commit("setUserInfoBoxPos", e);
+						this.$store.commit("showUserInfoBox", user);
 					})
 				}
 			}
 		},
-		computed:{
+		computed: {
 			avatarImageStyle() {
 				let w = this.width ? this.width : this.size;
 				let h = this.height ? this.height : this.size;
@@ -84,12 +85,12 @@
 					border-radius: ${this.radius};
 					`
 			},
-			textColor(){
+			textColor() {
 				let hash = 0;
-				for (var i = 0; i< this.name.length; i++) {
+				for (var i = 0; i < this.name.length; i++) {
 					hash += this.name.charCodeAt(i);
 				}
-				return this.colors[hash%this.colors.length];
+				return this.colors[hash % this.colors.length];
 			}
 		}
 	}
@@ -106,16 +107,16 @@
 			display: block;
 		}
 
-		.avatar-text{
+		.avatar-text {
 			color: white;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			//border: 1px solid #ccc;
-      //box-shadow: var(--im-box-shadow);
+			//box-shadow: var(--im-box-shadow);
 		}
 
-		.online{
+		.online {
 			position: absolute;
 			right: -5px;
 			bottom: 0;
@@ -126,4 +127,4 @@
 			border: 2px solid white;
 		}
 	}
-</style>
+</style>

im-web/src/components/rtc/RtcPrivateVideo.vue

@@ -15,7 +15,7 @@
           <div class="rtc-video-friend" v-loading="!isChating" element-loading-text="等待对方接听..."
                element-loading-background="rgba(0, 0, 0, 0.1)">
             <head-image class="friend-head-image" :id="friend.id" :size="80" :name="friend.nickName"
-                        :url="friend.headImage" :isShowUserInfo="false">
+                        :url="friend.headImage" :isShowUserInfo="false" radius="0">
             </head-image>
             <video ref="remoteVideo" autoplay=""></video>
           </div>

im-web/src/view/Friend.vue

@@ -24,7 +24,7 @@
 			</div>
 			<div v-show="userInfo.id">
 				<div class="friend-detail">
-					<head-image :size="120" :name="userInfo.nickName" :url="userInfo.headImage"
+					<head-image :size="160" :name="userInfo.nickName" :url="userInfo.headImage" radius="10%"
 						@click.native="showFullImage()"></head-image>
 					<div>
 						<div class="info-item">
@@ -47,7 +47,7 @@
 						</div>
 					</div>
 				</div>
-<!--				<el-divider content-position="center"></el-divider>-->
+				<!--				<el-divider content-position="center"></el-divider>-->
 
 			</div>
 		</el-container>
@@ -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 @@
 			}
 		}
 	}
-</style>
+</style>

im-web/src/view/Group.vue

@@ -29,8 +29,8 @@
                 <img v-if="activeGroup.headImage" :src="activeGroup.headImage" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </file-upload>
-              <head-image v-show="!isOwner" class="avatar" :size="120" :url="activeGroup.headImage"
-                          :name="activeGroup.showGroupName">
+              <head-image v-show="!isOwner" class="avatar" :size="160" :url="activeGroup.headImage"
+                          :name="activeGroup.showGroupName" radius="10%">
               </head-image>
               <el-button class="send-btn" icon="el-icon-position" type="primary"
                          @click="onSendMessage()">发消息
@@ -328,7 +328,7 @@ export default {
         }
 
         .avatar-uploader {
-          --width: 120px;
+          --width: 160px;
           text-align: left;
 
           .el-upload {

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 {