Browse Source

样式调整

master
xsx 1 year ago
parent
commit
660ea03188
  1. 2
      im-web/src/components/common/FullImage.vue
  2. 9
      im-web/src/components/common/HeadImage.vue
  3. 2
      im-web/src/components/rtc/RtcPrivateVideo.vue
  4. 3
      im-web/src/view/Friend.vue
  5. 6
      im-web/src/view/Group.vue
  6. 6
      im-web/src/view/Home.vue

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

@ -75,6 +75,4 @@
cursor: pointer;
}
}
</style>

9
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>
@ -15,7 +15,8 @@
data() {
return {
colors: ["#5daa31", "#c7515a", "#e03697", "#85029b",
"#c9b455", "#326eb6"]
"#c9b455", "#326eb6"
]
}
},

2
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>

3
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">
@ -222,7 +222,6 @@
padding: 50px 80px 20px 80px;
text-align: center;
.info-item {
margin-left: 20px;
background-color: #ffffff;

6
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 {

6
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 {

Loading…
Cancel
Save