question_uniapp/static/im/chat.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;
                // }
            }
        }
    }
}