Skip to content

U
uni-im

DCloud / uni-im

通知 3
Star 2
Fork 0
U
uni-im
提交 4063319c 编写于 作者: DCloud_JSON's avatar DCloud_JSON
浏览文件
操作

优化 web-pc 端样式

上级 6094912c
显示空白变更内容
内联 并排
Showing with 204 addition and 202 deletion
common/baseStyle.scss
浏览文件 @ 4063319c
/* #ifdef H5 */ /* #ifdef H5 */
::v-deep { ::v-deep {
/* #endif */ /* #endif */
page,
view, view,
label label
{ {
...@@ -16,17 +17,19 @@ ...@@ -16,17 +17,19 @@
margin: 0; margin: 0;
} }
page,
view, view,
label, label,
swiper-item { swiper-item {
flex-direction: column; flex-direction: column;
} }
page,
view, view,
image, image,
input, input,
scroll-view,
swiper, swiper,
scroll-view,
swiper-item, swiper-item,
text, text,
textarea, textarea,
......
pages/chat/chat.vue
浏览文件 @ 4063319c
...@@ -1106,12 +1106,13 @@ ...@@ -1106,12 +1106,13 @@
<style lang="scss"> <style lang="scss">
@import "@/uni_modules/uni-im/common/baseStyle.scss"; @import "@/uni_modules/uni-im/common/baseStyle.scss";
page {
height: 100%;
}
.uni-im-chat { .uni-im-chat {
position: relative; position: relative;
height: 100vh; height: 100%;
/* #ifdef H5 */ flex: 1;
height: calc(100vh - 44px);
/* #endif */
background-color: #efefef; background-color: #efefef;
.msg-list { .msg-list {
......
pages/contacts/contacts.vue
浏览文件 @ 4063319c
...@@ -260,16 +260,19 @@ ...@@ -260,16 +260,19 @@
<style lang="scss"> <style lang="scss">
@import "@/uni_modules/uni-im/common/baseStyle.scss"; @import "@/uni_modules/uni-im/common/baseStyle.scss";
.contacts-pages { .contacts-pages {
flex: 1;
position: relative;
/* #ifdef H5 */
@media screen and (min-device-width:960px) {
height: 100%; height: 100%;
.user-list-box { background-color: #FFF;
overflow: auto; position: relative;
.menu-list-box {
.uni-list-item {
cursor: pointer;
&:hover {
background-color: #FBFBFB !important;
} }
} }
/* #endif */ }
.title { .title {
padding: 8px; padding: 8px;
font-size: 14px; font-size: 14px;
...@@ -348,11 +351,5 @@ ...@@ -348,11 +351,5 @@
.blue { .blue {
background-color: #5DBAFF; background-color: #5DBAFF;
} }
@media screen and (min-device-width:960px) {
.activeMenu {
background-color: #f5f5f5 !important;
}
}
} }
</style> </style>
\ No newline at end of file
pages/index/index.scss
浏览文件 @ 4063319c
.tip{ // .tip{
flex: 1; // flex: 1;
} // }
page {
#center-view{
height: 100vh; height: 100vh;
/* #ifdef H5 */ background-color: #2e2e3e;
height: calc(100vh - 44px);
/* #endif */
background-color: #f5f5f5 !important;
}
/* #ifdef H5 */ /* #ifdef H5 */
@media screen and (min-device-width:960px){ @media screen and (min-device-width:960px){
padding: 20px;
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
#page {
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
background-color: #2e2e3e;
min-width:960px;
#left-view,
#center-view,
#right-view {
height: 95vh;
position: relative;
top: -2vh;
background-color: #FFFFFF;
}
#center-view {
#conversation-list-box .conversation-list{
max-height: calc(95vh - 70px);
.conversation-list-item{
margin: 5px;
}
} }
/* #endif */
.uni-im-index {
// border: 1px solid #FFF;
background-color: #ececec;
flex: 1;
height: 100%;
/* #ifdef H5 */
@media screen and (min-device-width:960px){
border-radius: 20px;
} }
/* #endif */
overflow: hidden;
flex-direction: row;
#left-view { #left-view {
/* #ifdef H5 */
& > *{ & > *{
cursor: pointer; cursor: pointer;
margin-top: 36px; margin-top: 36px;
...@@ -51,6 +35,7 @@ ...@@ -51,6 +35,7 @@
box-shadow: 0 0 20px 2px #fefefe; box-shadow: 0 0 20px 2px #fefefe;
border-radius: 10px; border-radius: 10px;
} }
/* #endif */
width:60px; width:60px;
align-items: center; align-items: center;
padding-top: 100px; padding-top: 100px;
...@@ -58,51 +43,53 @@ ...@@ -58,51 +43,53 @@
border-radius: 20px 0 0 20px; border-radius: 20px 0 0 20px;
} }
#center-view{ #center-view{
background-color: #f5f5f5;
width: 100%;
/* #ifdef H5 */
@media screen and (min-device-width:960px){
width:300px; width:300px;
}
/* #endif */
overflow: hidden;
#search-bar-box { #search-bar-box {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 70px; height: 70px;
padding:0 10px; padding:0 10px;
}
#search-bar { #search-bar {
flex: 1; flex: 1;
} }
#uni-im-contacts-box {
z-index: 10;
height: 95vh;
width: 100%;
position: absolute;
background-color: #f5f5f5;
/* pc端隐藏删除好友的按钮，后续改成长按（右键）可见 */
.delete-btn{
display: none;
} }
#conversation-list-box {
height: 100%;
flex: 1;
} }
#uni-im-contacts-box {
position: absolute;
top: 0;
left: 0;
z-index: 9;
width: 100%;
height: 100%;
.contacts-pages ::v-deep {
.user-list-box {
overflow: auto;
} }
.activeMenu {
#right-view { background-color: #f5f5f5 !important;
width: calc(100% - 370px);
border-radius: 0 20px 20px 0;
overflow: hidden;
position: relative;
#chat-view-box {
#ccid-is-null-tip{
height: 95vh;
padding-top: 30vh;
align-items: center;
background-color: #efefef;
.img {
width: 130px;
margin-bottom: 15px;
} }
.text {
color: #999;
} }
} }
} }
#chat-header{ #right-view {
width: 0;
flex-grow: 1;
background-color: #FFFFFF;
#chat-view-box {
flex-grow: 1;
.header {
height: 70px; height: 70px;
background-color: #FFFFFF;
padding:0 20px; padding:0 20px;
flex-direction: row; flex-direction: row;
justify-content: end; justify-content: end;
...@@ -111,26 +98,31 @@ ...@@ -111,26 +98,31 @@
cursor: pointer; cursor: pointer;
} }
} }
#chat-view { .content {
max-height:calc(95vh - 70px); flex: 1;
} ::v-deep {
#chat-view #uni-im-chat{
#web-pc-chat-title #web-pc-chat-title
{ {
position: absolute; position: absolute;
z-index: 9; z-index: 99;
top: -45px; top: -45px;
left: 15px; left: 15px;
} }
.unread_count { .unread_count {
display: none; display: none;
} }
.msg-list .uni-im-list .uni-im-msg{ .msg-list {
padding:0 10px; .uni-im-list {
.uni-im-msg {
padding: 0 10px;
}
}
} }
} }
}
.chatInfoBox { .chatInfoBox {
z-index: 999; z-index: 9;
position: absolute; position: absolute;
right:0; right:0;
top: 70px; top: 70px;
...@@ -138,12 +130,26 @@ ...@@ -138,12 +130,26 @@
height: calc(95vh - 70px); height: calc(95vh - 70px);
align-items: flex-end; align-items: flex-end;
width: 100%; width: 100%;
.group-info-text{ .group-info-text {
max-width: 250px !important; max-width: 250px !important;
text-align: left; text-align: left;
word-break: break-all; word-break: break-all;
} }
} }
}
#ccid-is-null-tip {
height: 95vh;
padding-top: 30vh;
align-items: center;
background-color: #efefef;
.img {
width: 130px;
margin-bottom: 15px;
}
.text {
color: #999;
}
}
#dynamic-component-box { #dynamic-component-box {
z-index: 9; z-index: 9;
width: 100%; width: 100%;
...@@ -169,10 +175,10 @@ ...@@ -169,10 +175,10 @@
} }
} }
} }
#foot { #foot {
display: none;
position: fixed; position: fixed;
bottom: 10px; bottom: 0;
flex-direction: row; flex-direction: row;
color: #FFFFFF; color: #FFFFFF;
.uni-link:hover{ .uni-link:hover{
...@@ -192,11 +198,10 @@ ...@@ -192,11 +198,10 @@
} }
} }
} }
} }
/* #endif */
.windows { .windows {
#center-view #conversation-list-box .conversation-list-item .uni-list-chat__container{ #center-view #conversation-list-box .conversation-list-item .uni-list-chat__container {
padding-right: 10px; padding-right: 10px;
} }
} }
\ No newline at end of file \ No newline at end of file
pages/index/index.vue
浏览文件 @ 4063319c
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<template v-if="isWidescreen"> <template v-if="isWidescreen">
<!-- 搜索会话用户、聊天记录... --> <!-- 搜索会话用户、聊天记录... -->
<view id="search-bar-box"> <view id="search-bar-box" v-show="!contactsViewIsShow">
<uni-search-bar v-model="keyword" id="search-bar" radius="5" placeholder="搜索" clearButton="auto" cancelButton="none"></uni-search-bar> <uni-search-bar v-model="keyword" id="search-bar" radius="5" placeholder="搜索" clearButton="auto" cancelButton="none"></uni-search-bar>
<uni-icons class="pointer" @click="beforeJoinGroup" color="#aaa" size="26" type="plus"></uni-icons> <uni-icons class="pointer" @click="beforeJoinGroup" color="#aaa" size="26" type="plus"></uni-icons>
</view> </view>
...@@ -69,17 +69,13 @@ ...@@ -69,17 +69,13 @@
<!-- 聊天窗口 --> <!-- 聊天窗口 -->
<view id="chat-view-box"> <view id="chat-view-box">
<template v-if="!contactsViewIsShow && currentConversationId"> <template v-if="!contactsViewIsShow && currentConversationId">
<view id="chat-header" v-if="!contactsViewIsShow || filteredConversationId"> <chat-filtered v-if="filteredConversationId" class="content" ref="chat-filtered" @to-chat="toChat($event)"/>
<template v-else>
<view class="header">
<uni-icons @click="showChatInfo" class="more" type="more-filled" size="20"></uni-icons> <uni-icons @click="showChatInfo" class="more" type="more-filled" size="20"></uni-icons>
</view> </view>
<view id="chat-view"> <chat-view class="content" ref="chat-view"></chat-view>
<chat-filtered </template>
v-if="filteredConversationId"
ref="chat-filtered"
@to-chat="toChat($event)"
/>
<chat-view v-else ref="chat-view"></chat-view>
</view>
<view v-if="chatInfoIsShow" class="chatInfoBox" @click.stop="chatInfoIsShow = false"> <view v-if="chatInfoIsShow" class="chatInfoBox" @click.stop="chatInfoIsShow = false">
<view @click.native.stop> <view @click.native.stop>
<uni-im-group-info v-if="currentConversation.group_id" ref="group-info"></uni-im-group-info> <uni-im-group-info v-if="currentConversation.group_id" ref="group-info"></uni-im-group-info>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或