123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- /* 15寸和32寸 公共样式*/
- #app {
- height: 100%;
- width: 100%;
- /* background-color: #f5f5f5; */
- position: fixed;
- bottom: 20px;
- }
- /* --- 标题 --- */
- .head {
- display: flex;
- height: 5vh;
- text-align: end;
- line-height: 5vh;
- /* background-color: #f5f5f5; */
- font-size: 18px;
- justify-content: center;
- margin-top: 20px;
- }
- .head text {
- flex: 1;
- }
- .head .switch {
- padding-right: 100rpx;
- flex: 1;
- }
- .pageView {
- display: flex;
- /* background-color: #f5f5f5; */
- }
- .body {
- display: flex;
- flex-direction: column;
- }
- /* --- 主内容区 --- */
- .list-wrap {
- flex-grow: 1;
- position: relative;
- }
- .list-wrap .scrollview {
- position: absolute;
- height: 100%;
- }
- .list-wrap .scrollview .scrollview-item {
- display: flex;
- flex-direction: column;
- }
- .list-wrap .scrollview .scrollview-item .item {
- display: flex;
- margin: 0 24rpx 50rpx;
- }
- .list-wrap .scrollview .scrollview-item .item .avtar {
- display: flex;
- width: 78rpx;
- height: 78rpx;
- border-radius: 50rpx;
- overflow: hidden;
- }
- .list-wrap .scrollview .scrollview-item .item .content {
- position: relative;
- max-width: 1050rpx;
- /* background-color: #fff; */
- margin: 40rpx 24rpx 0;
- border-radius: 5px;
- font-size: 32rpx;
- line-height: 42rpx;
- padding: 24rpx;
- word-wrap: break-word;
- }
- .list-wrap .scrollview .scrollview-item .other {
- justify-content: flex-end;
- }
- /* 底部发送框 */
- .chat-bottom {
- /* height: 300rpx; */
- margin: 50rpx;
- margin-left: 0;
- position: relative;
- }
- /* 快捷标签输入 */
- .chat-bottom .uni-label {
- display: flex;
- height: 100rpx;
- margin-bottom: 20rpx;
- }
- .chat-bottom .uni-label label {
- flex: 1;
- text-align: center;
- line-height: 100rpx;
- border-radius: 100rpx;
- /* background-color: #fff; */
- margin-right: 10rpx;
- border: 1px solid rgb(30, 144, 255);
- }
- .chat-bottom .send-msg {
- display: flex;
- }
- .chat-bottom .send-msg .uni-textarea {
- border-radius: 40rpx;
- flex: 1;
- }
- .chat-bottom .send-msg .send-btn {
- align-items: center;
- justify-content: center;
- width: 320rpx;
- height: 320rpx;
- border-radius: 50rpx;
- font-size: 35rpx;
- font-weight: 500;
- color: #fff;
- line-height: 320rpx;
- z-index: 1;
- }
- .chat-bottom .send-msg .uni-textarea textarea {
- width: 96%;
- height: 270rpx;
- border-radius: 40rpx;
- line-height: 1.5;
- padding: 25rpx;
- right: 50rpx;
- /* background-color: #fff; */
- margin-left: 50rpx;
- }
- .chat-bottom .send-msg .uni-textarea textarea ::-webkit-scrollbar {
- display: none;
- }
- /* --- 左右两边占位调节、图片占位 --- */
- .sidebar-left {
- width: 5vw;
- }
- /* 去除导航条 */
- .scrollview ::-webkit-scrollbar {
- display: none;
- }
- /* 聊天框数据加载 图标距离头像的间距 */
- .loadingPoint {
- margin-right: 30px;
- }
- /* 右边 */
- .sidebar-right {
- width: 32vw;
- /* display: flex;
- flex-direction: column;
- justify-content: end; */
- position: relative;
- /* background-color: red; */
-
- }
- .sidebar-right .video {
- width: 100%;
- /* align-items: end; */
- }
- .sidebar-right .active {
- mix-blend-mode: screen;
- }
- /deep/ .uni-video-container {
- background-color: transparent;
- }
|