123 lines
2.1 KiB
Plaintext
123 lines
2.1 KiB
Plaintext
@import '@/styles/common.less';
|
|
@import '@/styles/variables.less';
|
|
|
|
.page-message-chat {
|
|
height: 100vh;
|
|
background: #FFFFFF;
|
|
|
|
&__loading {
|
|
position: fixed;
|
|
top: 0;
|
|
background: #F5F6FA;
|
|
z-index: 999;
|
|
}
|
|
|
|
&__header {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 120px;
|
|
.flex-row();
|
|
padding: 0 32px;
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
|
|
&__reject {
|
|
.button(@height: 72px; @fontSize: 28px; @borderRadius: 48px; @highlight: 0);
|
|
flex: 1;
|
|
margin-right: 26px;
|
|
|
|
&.highlight {
|
|
color: @blColorG1;
|
|
background: #F7F7F7;
|
|
}
|
|
}
|
|
|
|
&__exchange {
|
|
.button(@height: 72px; @fontSize: 28px; @borderRadius: 48px;);
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
&__chat {
|
|
width: 100%;
|
|
height: calc(100vh - 120px - 112px - env(safe-area-inset-bottom));
|
|
background: #F5F6FA;
|
|
margin-top: 120px;
|
|
padding-top: 20px;
|
|
padding-bottom: 30px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
&__chat-list {
|
|
height: 100%;
|
|
}
|
|
|
|
&__footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
&__input-container {
|
|
.flex-row();
|
|
padding: 20px 32px;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
&__expand-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-right: 32px;
|
|
}
|
|
|
|
&__input {
|
|
min-height: 40px;
|
|
font-size: 28px;
|
|
line-height: 40px;
|
|
font-weight: 400;
|
|
padding: 16px;
|
|
color: @blColor;
|
|
background: #F7F7F8;
|
|
border-radius: 16px;
|
|
box-sizing: border-box;
|
|
white-space: wrap;
|
|
}
|
|
|
|
&__send-button {
|
|
.button(@width: 120px; @height: 64px; @fontSize: 28px; @borderRadius: 48px;);
|
|
margin-left: 32px;
|
|
}
|
|
|
|
&__more {
|
|
.flex-row();
|
|
padding: 12px 32px 32px;
|
|
background: #FFFFFF;
|
|
|
|
&__item {
|
|
.flex-column();
|
|
|
|
&__icon-wrapper {
|
|
width: 124px;
|
|
height: 124px;
|
|
.flex-row();
|
|
justify-content: center;
|
|
background: #F3F3F5;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
&__icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
}
|
|
|
|
&__text {
|
|
font-size: 24px;
|
|
line-height: 34px;
|
|
font-weight: 400;
|
|
color: @blColor;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
} |