185 lines
4.3 KiB
SCSS
185 lines
4.3 KiB
SCSS
|
||
@import "./global.scss";
|
||
page{
|
||
background-color: #eee;
|
||
font-size: 28rpx;
|
||
}
|
||
.container{
|
||
height: calc(100vh - var(--window-top));
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-content: center;
|
||
justify-content: space-between;
|
||
align-items: stretch;
|
||
}
|
||
|
||
/* 加载数据提示 */
|
||
.tips{
|
||
position: fixed;
|
||
left: 0;
|
||
top:var(--window-top);
|
||
width: 100%;
|
||
z-index: 9;
|
||
background-color: rgba(0,0,0,0.15);
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
transform:translateY(-80rpx);
|
||
transition: transform 0.3s ease-in-out 0s;
|
||
|
||
&.show{
|
||
transform:translateY(0);
|
||
}
|
||
}
|
||
|
||
.box-1{
|
||
width: 100%;
|
||
height: 0;
|
||
flex: 1 0 auto;
|
||
box-sizing: content-box;
|
||
}
|
||
.box-2{
|
||
height: auto;
|
||
z-index: 2;
|
||
border-top: #e5e5e5 solid 1px;
|
||
box-sizing: content-box;
|
||
background-color: #F6F6F6;
|
||
|
||
/* 兼容iPhoneX */
|
||
padding-bottom: 0;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
>.flex-col{
|
||
gap: 20rpx;
|
||
}
|
||
>view{
|
||
padding: 0 20rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.input{
|
||
// height: 64rpx;
|
||
// padding: 0 20rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.send{
|
||
background-color: #42b983;
|
||
color: #fff;
|
||
height: 64rpx;
|
||
margin-left: 20rpx;
|
||
border-radius: 32rpx;
|
||
padding: 0;
|
||
width: 120rpx;
|
||
line-height: 62rpx;
|
||
|
||
&:active{
|
||
background-color: #5fc496;
|
||
}
|
||
}
|
||
}
|
||
|
||
.talk-list{
|
||
padding-bottom: 20rpx;
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
flex-wrap: nowrap;
|
||
align-content: flex-start;
|
||
justify-content: flex-end;
|
||
align-items: stretch;
|
||
|
||
// 添加弹性容器，让内容自动在顶部
|
||
&::before{
|
||
content: '.';
|
||
display: inline;
|
||
visibility: hidden;
|
||
line-height: 0;
|
||
font-size: 0;
|
||
flex: 1 0 auto;
|
||
height: 1px;
|
||
}
|
||
|
||
|
||
/* 消息项，基础类 */
|
||
.item{
|
||
padding: 20rpx 20rpx 0 20rpx;
|
||
align-items:flex-start;
|
||
align-content:flex-start;
|
||
color: #333;
|
||
|
||
.pic{
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
border-radius: 50%;
|
||
border: #fff solid 1px;
|
||
}
|
||
.nickname{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 36rpx;
|
||
margin: auto 30rpx 10rpx 30rpx;
|
||
}
|
||
|
||
.content{
|
||
padding: 24rpx;
|
||
border-radius: 4px;
|
||
max-width: 500rpx;
|
||
word-break: break-all;
|
||
position: relative;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
/* 收到的消息 */
|
||
&.pull{
|
||
.content{
|
||
margin-left: 32rpx;
|
||
background-color: #fff;
|
||
|
||
// &::after{
|
||
// content: '';
|
||
// display: block;
|
||
// width: 0;
|
||
// height: 0;
|
||
// border-top: 16rpx solid transparent;
|
||
// border-bottom: 16rpx solid transparent;
|
||
// border-right: 20rpx solid #fff;
|
||
// position: absolute;
|
||
// top: 30rpx;
|
||
// left: -18rpx;
|
||
// }
|
||
}
|
||
}
|
||
|
||
/* 发出的消息 */
|
||
&.push{
|
||
/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
|
||
flex-direction: row-reverse;
|
||
.nickname{
|
||
text-align: right;
|
||
}
|
||
|
||
.content{
|
||
margin-right: 32rpx;
|
||
background-color: #BBD8FF;
|
||
|
||
// &::after{
|
||
// content: '';
|
||
// display: block;
|
||
// width: 0;
|
||
// height: 0;
|
||
// border-top: 16rpx solid transparent;
|
||
// border-bottom: 16rpx solid transparent;
|
||
// border-left: 20rpx solid #BBD8FF;
|
||
// position: absolute;
|
||
// top: 30rpx;
|
||
// right: -18rpx;
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
} |