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 */
::v-deep {
/* #endif */
page,
view,
label
{
......@@ -16,17 +17,19 @@
margin: 0;
}
page,
view,
label,
swiper-item {
flex-direction: column;
}
page,
view,
image,
input,
scroll-view,
swiper,
scroll-view,
swiper-item,
text,
textarea,
......
pages/chat/chat.vue
浏览文件 @ 4063319c
......@@ -1106,12 +1106,13 @@
<style lang="scss">
@import "@/uni_modules/uni-im/common/baseStyle.scss";
page {
height: 100%;
}
.uni-im-chat {
position: relative;
height: 100vh;
/* #ifdef H5 */
height: calc(100vh - 44px);
/* #endif */
height: 100%;
flex: 1;
background-color: #efefef;
.msg-list {
......
pages/contacts/contacts.vue
浏览文件 @ 4063319c
......@@ -260,16 +260,19 @@
<style lang="scss">
@import "@/uni_modules/uni-im/common/baseStyle.scss";
.contacts-pages {
flex: 1;
height: 100%;
background-color: #FFF;
position: relative;
/* #ifdef H5 */
@media screen and (min-device-width:960px) {
height: 100%;
.user-list-box {
overflow: auto;
.menu-list-box {
.uni-list-item {
cursor: pointer;
&:hover {
background-color: #FBFBFB !important;
}
}
}
/* #endif */
.title {
padding: 8px;
font-size: 14px;
......@@ -348,11 +351,5 @@
.blue {
background-color: #5DBAFF;
}
@media screen and (min-device-width:960px) {
.activeMenu {
background-color: #f5f5f5 !important;
}
}
}
</style>
\ No newline at end of file
pages/index/index.scss
浏览文件 @ 4063319c
.tip{
flex: 1;
}
#center-view{
height: 100vh;
/* #ifdef H5 */
height: calc(100vh - 44px);
/* #endif */
background-color: #f5f5f5 !important;
}
/* #ifdef H5 */
@media screen and (min-device-width:960px){
.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 {
// .tip{
// flex: 1;
// }
page {
height: 100vh;
background-color: #2e2e3e;
/* #ifdef H5 */
@media screen and (min-device-width:960px){
padding: 20px;
.pointer {
cursor: pointer;
}
}
/* #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 {
/* #ifdef H5 */
& > *{
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;
position: relative;
top: -2vh;
background-color: #FFFFFF;
}
#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;
background-color: #fff;
position: absolute;
right: 0;
.dynamic-component-title{
padding-left: 15px;
height: 70px;
padding:0 10px;
justify-content: center;
border: 1px solid #efefef;
}
#search-bar {
flex: 1;
}
#uni-im-contacts-box {
z-index: 10;
height: 95vh;
.system-notice-box{
width: 100%;
position: absolute;
background-color: #f5f5f5;
/* pc端隐藏删除好友的按钮，后续改成长按（右键）可见 */
.delete-btn{
display: none;
}
}
}
#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;
.create-group-box .header-box{
width: 100%;
height: 95vh;
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{
.uni-searchbar {
width: 100%;
.uni-searchbar {
width: 100%;
}
}
}
}
}
#foot {
position: fixed;
bottom: 10px;
}
}
}
#foot {
display: none;
position: fixed;
bottom: 0;
flex-direction: row;
color: #FFFFFF;
.uni-link:hover{
......@@ -192,11 +198,10 @@
}
}
}
}
/* #endif */
}
.windows {
#center-view #conversation-list-box .conversation-list-item .uni-list-chat__container{
padding-right: 10px;
}
}
\ No newline at end of file
#center-view #conversation-list-box .conversation-list-item .uni-list-chat__container {
padding-right: 10px;
}
}
\ No newline at end of file
pages/index/index.vue
浏览文件 @ 4063319c
......@@ -36,7 +36,7 @@
<!-- #ifdef H5 -->
<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-icons class="pointer" @click="beforeJoinGroup" color="#aaa" size="26" type="plus"></uni-icons>
</view>
......@@ -69,17 +69,13 @@
<!-- 聊天窗口 -->
<view id="chat-view-box">
<template v-if="!contactsViewIsShow && currentConversationId">
<view id="chat-header" v-if="!contactsViewIsShow || filteredConversationId">
<uni-icons @click="showChatInfo" class="more" type="more-filled" size="20"></uni-icons>
</view>
<view id="chat-view">
<chat-filtered
v-if="filteredConversationId"
ref="chat-filtered"
@to-chat="toChat($event)"
/>
<chat-view v-else ref="chat-view"></chat-view>
</view>
<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>
</view>
<chat-view class="content" ref="chat-view"></chat-view>
</template>
<view v-if="chatInfoIsShow" class="chatInfoBox" @click.stop="chatInfoIsShow = false">
<view @click.native.stop>
<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.
先完成此消息的编辑！
想要评论请 注册 或