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

样式调整

master
xsx 1 year ago
parent
ab1b36d869
commit
660ea03188
6 changed files with 68 additions and 70 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. 32
      im-web/src/components/common/FullImage.vue
  2. 57
      im-web/src/components/common/HeadImage.vue
  3. 2
      im-web/src/components/rtc/RtcPrivateVideo.vue
  4. 35
      im-web/src/view/Friend.vue
  5. 6
      im-web/src/view/Group.vue
  6. 6
      im-web/src/view/Home.vue

32
im-web/src/components/common/FullImage.vue
View File

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

57
im-web/src/components/common/HeadImage.vue
View File

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

2
im-web/src/components/rtc/RtcPrivateVideo.vue
View File

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

35
im-web/src/view/Friend.vue
View File

@ -24,7 +24,7 @@
</div> </div>
<div v-show="userInfo.id"> <div v-show="userInfo.id">
<div class="friend-detail"> <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> @click.native="showFullImage()"></head-image>
<div> <div>
<div class="info-item"> <div class="info-item">
@ -47,7 +47,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <el-divider content-position="center"></el-divider>--> <!-- <el-divider content-position="center"></el-divider>-->
</div> </div>
</el-container> </el-container>
@ -181,13 +181,13 @@
.friend-list-box { .friend-list-box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--im-background); background: var(--im-background);
.friend-list-header { .friend-list-header {
height: 50px; height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 8px; padding: 0 8px;
.add-btn { .add-btn {
padding: 5px !important; padding: 5px !important;
@ -207,22 +207,21 @@
flex-direction: column; flex-direction: column;
.friend-header { .friend-header {
height: 50px; height: 50px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 12px; padding: 0 12px;
font-size: var(--im-font-size-larger); font-size: var(--im-font-size-larger);
border-bottom: var(--im-border); border-bottom: var(--im-border);
box-sizing: border-box; box-sizing: border-box;
} }
.friend-detail { .friend-detail {
display: flex; display: flex;
padding: 50px 80px 20px 80px; padding: 50px 80px 20px 80px;
text-align: center; text-align: center;
.info-item { .info-item {
margin-left: 20px; margin-left: 20px;
background-color: #ffffff; background-color: #ffffff;
@ -240,4 +239,4 @@
} }
} }
} }
</style> </style>

6
im-web/src/view/Group.vue
View File

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

6
im-web/src/view/Home.vue
View File

@ -82,7 +82,7 @@ export default {
return { return {
showSettingDialog: false, showSettingDialog: false,
lastPlayAudioTime: new Date().getTime() - 1000, lastPlayAudioTime: new Date().getTime() - 1000,
isFullscreen: false isFullscreen: true
} }
}, },
methods: { methods: {
@ -409,9 +409,9 @@ export default {
.navi-bar { .navi-bar {
--icon-font-size: 22px; --icon-font-size: 22px;
--width: 56px; --width: 60px;
width: var(--width); width: var(--width);
background: var(--im-color-primary); background: var(--im-color-primary-light-1);
padding-top: 20px; padding-top: 20px;
.navi-bar-box { .navi-bar-box {

Write Preview
Loading…
Cancel
Save