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; height: 100%;
background-color: #FFF;
position: relative; position: relative;
/* #ifdef H5 */
@media screen and (min-device-width:960px) { .menu-list-box {
height: 100%; .uni-list-item {
.user-list-box { cursor: pointer;
overflow: auto; &: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; background-color: #2e2e3e;
/* #ifdef H5 */ /* #ifdef H5 */
height: calc(100vh - 44px); @media screen and (min-device-width:960px){
/* #endif */ padding: 20px;
background-color: #f5f5f5 !important; .pointer {
} cursor: pointer;
}
/* #ifdef H5 */ }
@media screen and (min-device-width:960px){ /* #endif */
.pointer { .uni-im-index {
cursor: pointer; // border: 1px solid #FFF;
} background-color: #ececec;
#page { flex: 1;
flex-direction: row; height: 100%;
justify-content: center; /* #ifdef H5 */
align-items: center; @media screen and (min-device-width:960px){
height: 100vh; border-radius: 20px;
width: 100vw; }
background-color: #2e2e3e; /* #endif */
min-width:960px; overflow: hidden;
flex-direction: row;
#left-view, #left-view {
#center-view, /* #ifdef H5 */
#right-view { & > *{
cursor: pointer;
margin-top: 36px;
}
& > *:hover{
/* border: 1px solid #fefefe; */
box-shadow: 0 0 20px 2px #fefefe;
border-radius: 10px;
}
/* #endif */
width:60px;
align-items: center;
padding-top: 100px;
background-color: #ececec;
border-radius: 20px 0 0 20px;
}
#center-view{
background-color: #f5f5f5;
width: 100%;
/* #ifdef H5 */
@media screen and (min-device-width:960px){
width:300px;
}
/* #endif */
overflow: hidden;
#search-bar-box {
flex-direction: row;
align-items: center;
height: 70px;
padding:0 10px;
#search-bar {
flex: 1;
}
}
#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 {
background-color: #f5f5f5 !important;
}
}
}
}
#right-view {
width: 0;
flex-grow: 1;
background-color: #FFFFFF;
#chat-view-box {
flex-grow: 1;
.header {
height: 70px;
background-color: #FFFFFF;
padding:0 20px;
flex-direction: row;
justify-content: end;
align-items: center;
.more{
cursor: pointer;
}
}
.content {
flex: 1;
::v-deep {
#web-pc-chat-title
{
position: absolute;
z-index: 99;
top: -45px;
left: 15px;
}
.unread_count {
display: none;
}
.msg-list {
.uni-im-list {
.uni-im-msg {
padding: 0 10px;
}
}
}
}
}
.chatInfoBox {
z-index: 9;
position: absolute;
right:0;
top: 70px;
background-color: rgba(0,0,0,0.2);
height: calc(95vh - 70px);
align-items: flex-end;
width: 100%;
.group-info-text {
max-width: 250px !important;
text-align: left;
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 {
z-index: 9;
width: 100%;
height: 95vh; height: 95vh;
position: relative; background-color: #fff;
top: -2vh; position: absolute;
background-color: #FFFFFF; right: 0;
} .dynamic-component-title{
padding-left: 15px;
#center-view {
#conversation-list-box .conversation-list{
max-height: calc(95vh - 70px);
.conversation-list-item{
margin: 5px;
}
}
}
#left-view {
& > *{
cursor: pointer;
margin-top: 36px;
}
& > *:hover{
/* border: 1px solid #fefefe; */
box-shadow: 0 0 20px 2px #fefefe;
border-radius: 10px;
}
width:60px;
align-items: center;
padding-top: 100px;
background-color: #ececec;
border-radius: 20px 0 0 20px;
}
#center-view{
width:300px;
#search-bar-box {
flex-direction: row;
align-items: center;
height: 70px; height: 70px;
padding:0 10px; justify-content: center;
border: 1px solid #efefef;
} }
#search-bar { .system-notice-box{
flex: 1;
}
#uni-im-contacts-box {
z-index: 10;
height: 95vh;
width: 100%; width: 100%;
position: absolute;
background-color: #f5f5f5;
/* pc端隐藏删除好友的按钮，后续改成长按（右键）可见 */
.delete-btn{
display: none;
}
} }
} .create-group-box .header-box{
#right-view {
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{
height: 70px;
padding:0 20px;
flex-direction: row;
justify-content: end;
align-items: center;
.more{
cursor: pointer;
}
}
#chat-view {
max-height:calc(95vh - 70px);
}
#chat-view #uni-im-chat{
#web-pc-chat-title
{
position: absolute;
z-index: 9;
top: -45px;
left: 15px;
}
.unread_count {
display: none;
}
.msg-list .uni-im-list .uni-im-msg{
padding:0 10px;
}
}
.chatInfoBox {
z-index: 999;
position: absolute;
right:0;
top: 70px;
background-color: rgba(0,0,0,0.2);
height: calc(95vh - 70px);
align-items: flex-end;
width: 100%;
.group-info-text{
max-width: 250px !important;
text-align: left;
word-break: break-all;
}
}
#dynamic-component-box {
z-index: 9;
width: 100%; width: 100%;
height: 95vh; .uni-searchbar {
background-color: #fff;
position: absolute;
right: 0;
.dynamic-component-title{
padding-left: 15px;
height: 70px;
justify-content: center;
border: 1px solid #efefef;
}
.system-notice-box{
width: 100%;
}
.create-group-box .header-box{
width: 100%; width: 100%;
.uni-searchbar {
width: 100%;
}
} }
} }
} }
} }
}
#foot { #foot {
position: fixed; display: none;
bottom: 10px; position: fixed;
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)"/>
<uni-icons @click="showChatInfo" class="more" type="more-filled" size="20"></uni-icons> <template v-else>
</view> <view class="header">
<view id="chat-view"> <uni-icons @click="showChatInfo" class="more" type="more-filled" size="20"></uni-icons>
<chat-filtered </view>
v-if="filteredConversationId" <chat-view class="content" ref="chat-view"></chat-view>
ref="chat-filtered" </template>
@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.
先完成此消息的编辑！
想要评论请 注册 或