移动app
This commit is contained in:
312
uni-im示例/uni_modules/uni-im/pages/index/index.scss
Normal file
312
uni-im示例/uni_modules/uni-im/pages/index/index.scss
Normal file
@@ -0,0 +1,312 @@
|
||||
/* #ifdef APP */
|
||||
.group-icon {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left:55px;
|
||||
background-color: #ea4938;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP */
|
||||
/* #ifdef VUE3 */
|
||||
#center-view ::v-deep .slot-header .group-icon
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef VUE2 */
|
||||
#center-view ::v-deep .group-icon
|
||||
/* #endif */
|
||||
{
|
||||
position: relative;
|
||||
top: -5px;
|
||||
left: -10px;
|
||||
margin-right: -20px;
|
||||
background-color: #ea4938;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.tip{
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.user-list {
|
||||
flex:1;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
#center-view{
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef H5 */
|
||||
@media screen and (min-width:960px){
|
||||
#page {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #2e2e3e;
|
||||
}
|
||||
|
||||
#about {
|
||||
position: fixed;
|
||||
bottom: 4vh;
|
||||
flex-direction: row;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
#about .uni-link:hover{
|
||||
color: #00aa55 !important;
|
||||
}
|
||||
|
||||
#left-view,
|
||||
#center-view,
|
||||
#right-view{
|
||||
height: 85vh;
|
||||
position: relative;
|
||||
top: -2vh;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
#left-view *,#left-view ::v-deep *,
|
||||
#center-view *,#center-view ::v-deep *,
|
||||
#right-view *,#right-view ::v-deep *{
|
||||
max-height: 85vh;
|
||||
}
|
||||
|
||||
#center-view ::v-deep #user-list-box{
|
||||
max-height: calc(85vh - 70px);
|
||||
}
|
||||
|
||||
#left-view > *{
|
||||
cursor: pointer;
|
||||
margin-top: 36px;
|
||||
}
|
||||
#left-view > *:hover{
|
||||
/* border: 1px solid #fefefe; */
|
||||
box-shadow: 0 0 20px 2px #fefefe;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#left-view{
|
||||
width:60px;
|
||||
align-items: center;
|
||||
padding-top: 100px;
|
||||
background-color: #ececec;
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
#center-view{
|
||||
width:300px;
|
||||
}
|
||||
#center-view *,#center-view ::v-deep *{
|
||||
max-width:300px;
|
||||
}
|
||||
|
||||
#center-view #search-bar-box {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 70px;
|
||||
}
|
||||
#center-view #search-bar {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#center-view #user-list-box .user-list-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#center-view #user-list-box .tip{
|
||||
/* background-color: #FFFFFF;*/
|
||||
}
|
||||
|
||||
#center-view #user-list-box .user-list-item ::v-deep .uni-list-chat__content-title{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#center-view #user-list-box .user-list-item.activeConversation {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
|
||||
#right-view{
|
||||
width:700px;
|
||||
border-radius: 0 20px 20px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
#right-view *,#right-view ::v-deep *{
|
||||
max-width:700px;
|
||||
}
|
||||
|
||||
#right-view #chat-header{
|
||||
height: 70px;
|
||||
padding:0 20px;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
#right-view #chat-header .more{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#right-view #chat-view,
|
||||
#right-view #chat-view *,
|
||||
#right-view #chat-view ::v-deep *
|
||||
{
|
||||
max-height:calc(85vh - 70px);
|
||||
}
|
||||
|
||||
#right-view #chat-view ::v-deep .page * {
|
||||
/* display: none; */
|
||||
}
|
||||
|
||||
#right-view #chat-view ::v-deep .page {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
#right-view #chat-view ::v-deep .unread_count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#right-view #chat-view ::v-deep .msg-list .uni-im-list .scroll-view{
|
||||
height: calc(85vh - 330px);
|
||||
}
|
||||
#right-view #chat-view ::v-deep .msg-list .uni-im-list .uni-im-msg{
|
||||
width: 100%;
|
||||
padding:0 10px;
|
||||
}
|
||||
|
||||
#right-view #chat-view ::v-deep .msg-list .uni-im-list .uni-im-msg .cite-box{
|
||||
max-width:500px;
|
||||
}
|
||||
|
||||
#right-view #chat-view ::v-deep .msg-list .uni-im-list .uni-im-msg .exceed,
|
||||
#right-view #chat-view ::v-deep .msg-list .uni-im-list .uni-im-msg .rich-text-box,
|
||||
#right-view #chat-view ::v-deep .msg-list .uni-im-list .uni-im-msg .rich-text-box rich-text{
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
|
||||
#right-view #chat-view ::v-deep .chat-foot{
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#right-view #chat-view ::v-deep .chat-foot .pc{
|
||||
display: flex;
|
||||
height: 260px;
|
||||
width: 700px;
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
#right-view #chat-view ::v-deep .chat-foot .pc .tool-bar,
|
||||
#right-view #chat-view ::v-deep .chat-foot .pc .tool-bar .icons,
|
||||
#right-view #chat-view ::v-deep .chat-foot .pc .tool-bar .code-model{
|
||||
flex-direction: row;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
#right-view #chat-view ::v-deep .chat-foot .pc .tool-bar .icons .uni-im-icons{
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
#right-view #chat-view ::v-deep .chat-foot .pc .answer-msg{
|
||||
padding: 6px 10px;
|
||||
width: 670px;
|
||||
margin: 0 15px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
#right-view #chat-view ::v-deep .chat-foot .pc .answer-msg-text{
|
||||
font-size: 14px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
#right-view #chat-view ::v-deep .chat-foot .pc .textarea{
|
||||
width: 700px;
|
||||
height: 200px;
|
||||
padding:0 15px;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
#right-view .chatInfoBox {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
right:0;
|
||||
top: 70px;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
height: calc(85vh - 70px);
|
||||
width: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#right-view .chatInfoBox ::v-deep .introduction{
|
||||
max-width: 560px !important;
|
||||
}
|
||||
|
||||
#uni-im-contacts-box {
|
||||
z-index: 10;
|
||||
height: 85vh;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* pc端隐藏删除好友的按钮，后续改成长按（右键）可见 */
|
||||
#uni-im-contacts-box ::v-deep .delete-btn{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#ccid-is-null-tip{
|
||||
height: 85vh;
|
||||
padding-top: 15vh;
|
||||
align-items: center;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
#dynamic-component-box {
|
||||
width: 700px;
|
||||
z-index: 99;
|
||||
height: 85vh;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#dynamic-component-box .dynamic-component-title{
|
||||
padding-left: 15px;
|
||||
height: 70px;
|
||||
justify-content: center;
|
||||
border: 1px solid #efefef;
|
||||
}
|
||||
|
||||
#right-view #dynamic-component-box .system-notice-box{
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
#right-view ::v-deep #dynamic-component-box .create-group-box .header-box{
|
||||
top: calc(7vh + 55px);
|
||||
}
|
||||
|
||||
/* 处理特殊情况 */
|
||||
#page ::v-deep .uni-popup * {
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
Reference in New Issue
Block a user