消息箭头
.container { height: 100vh; overflow: hidden; } /* #ifdef H5 */ .container { height: calc(100vh - 88upx); } /* #endif */ .status_bar, .container, .header, .emoji, .file { background-color: #f3f3f3; } .header { border-bottom: 2upx solid #eee; .center { font-weight: bold; } } .map { width: 60%; height: 300upx; background-color: #fff !important; &::before { border-right: 30upx solid #fff !important; } .title { height: 80upx; font-size: 28upx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .box { width: 100%; height: 170upx; margin-top: 10upx; } } .emoji { height: 400upx; padding: 0 0 20upx 20upx; position: relative; .list { width: 100%; height: 400upx; padding: 20upx 0; overflow-y: auto; .item { float: left; display: block; height: 60upx; line-height: 60upx; width: calc(100% / 12); margin-right: 20upx; } } } .file { padding: 30upx 20upx; .list { overflow: hidden; padding-left: 10upx; justify-content: flex-start; } .item { float: left; width: 110upx; height: 110upx; border-radius: 10upx; margin-right: 40upx; background-color: #fff; .icon { width: 50upx; } .text { font-size: 24upx; margin-top: 4upx; } } } .oper { height: 110upx; padding: 0 20upx; box-sizing: border-box; border-top: 2upx solid #eee; border-bottom: 2upx solid #eee; .input { height: 68upx; line-height: 68upx; padding: 0 20upx; font-size: 28upx; border-radius: 10upx; background-color: #fff; width: calc(100% - 120upx - 20upx - 40upx - 60upx); } .icon { width: 60upx; height: 60upx; } .btn { color: #fff; width: 90upx; height: 52upx; font-size: 24upx; line-height: 52upx; text-align: center; border-radius: 10upx; background-color: #2ba245; } } .scroll { overflow-y: auto; transition: all 0.1s ease; height: calc(100vh - 88upx - 110upx - var(--status-bar-height)); /* #ifdef MP-WEIXIN */ height: calc(100vh - 88upx - var(--status-bar-height)); /* #endif */ /* #ifdef H5 */ height: calc(100vh - 88upx - 110upx - var(--status-bar-height)); /* #endif */ .item-space { height: 30upx; } .time { color: #666; font-size: 24upx; text-align: center; margin-bottom: 20upx; } .cancel { width: 100%; height: 40upx; text-align: center; margin-bottom: 30upx; .text { color: #999; font-size: 24upx; } } .item { margin: 0 30upx 30upx; align-items: flex-start; justify-content: flex-start; .face { width: 80upx; height: 80upx; border-radius: 10upx; } .content { color: #000; font-size: 32upx; min-height: 80upx; border-radius: 10upx; padding: 20upx 24upx; background-color: #fff; word-break: break-all; word-wrap: break-word; max-width: calc(100% - 100upx - 120upx); position: relative; &::before { content: ""; width: 0; height: 0; border-right: 30upx solid #fff; border-top: 20upx solid transparent; border-bottom: 20upx solid transparent; position: absolute; top: 24upx; } .voice-icon { width: 32upx; height: 40upx; margin-right: 180upx; margin-bottom: -8upx; } } &.left { .face { margin-right: 30upx; } .content::before { left: -20upx; } } &.right { flex-direction: row-reverse; .face { margin-left: 30upx; } .content { background-color: #a0ea6f; &::before { right: -20upx; transform: rotate(180deg); border-right: 30upx solid #a0ea6f; } .voice-icon { margin-right: 0; margin-left: 180upx; transform: rotate(180deg); } } } } #bottom { height: 0; } }
本文来自博客园,作者:zjxgdq,转载请注明原文链接:https://www.cnblogs.com/zjxzhj/p/18280125