ec.uniapp-master/pages/user/my/chatonline.vue

<template>
	<view>
		<lf-nav :spreadOut="true" :showIcon="true" title="在线咨询"></lf-nav>
		<view class="cu-chat">
			<view class="cu-info round lf-m-t-30">客服在线时间：10:00～22:00，请在工作时间内喜咨询</view>
			<view class="cu-item">
				<view class="lf-row-center lf-m-b-30 lf-font-24 lf-color-777">2021-09-01 18:38:24</view>
				<view class="self-main">
					<view class="cu-avatar radius">
						<image class="lf-w-100 lf-h-100 round-radius" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" ></image>
					</view>
					<view class="main">
						<view class="content shadow">
							客服在线时间：10:00～22:00，请在工作时间内喜咨询请在工作时间内喜咨询
						</view>
					</view>
				</view>
				<!-- <view class="date"> 2021-09-01 18:38:24</view> -->
			</view>
			<view class="cu-item self">
				<view class="lf-row-center lf-m-b-30 lf-font-24 lf-color-777">2021-09-01 18:38:24</view>
				<view class="self-main self-main1">
					<view class="main">
						<view class="content shadow">
							客服在线时间
						</view>
					</view>
					<view class="cu-avatar radius">
						<image class="lf-w-100 lf-h-100 round-radius" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" ></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			apllyBind() {
				uni.showModal({
				    title: '提示',
				    content: '确认联系对方吗?',
					cancelText: '下次一定',
					confirmColor: '#E21196',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        }
				    }
				});
			}
		}
	}
</script>

<style>
	page{
	  padding-bottom: 100upx;
	  background-color: #F5F5F5;
	}
</style>

<style lang="scss" scoped="scoped">
	.self-main1 {
		display: flex;
		justify-content: flex-end;
	}
	.self-main {
		display: flex;
	}
	.round-radius {
		border-radius: 50%;
	}
	.cu-chat {
		display: flex;
		flex-direction: column;
	}
	.cu-chat .cu-item {
		display: flex;
		padding: 30upx;
		position: relative;
		flex-direction: column;
	}
	
	.cu-chat .cu-item>.self-main .cu-avatar {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	
	.cu-chat .cu-item>.self-main .main {
		max-width: calc(100% - 200rpx);
		margin: 0 40upx;
		display: flex;
		align-items: center;
	}
	
	.cu-chat .cu-item>image {
		height: 320upx;
	}
	
	.cu-chat .cu-item>.self-main .main .content {
		padding: 20upx;
		border-radius: 0 20rpx 20rpx 20rpx;
		display: inline-flex;
		max-width: 800rpx;
		align-items: center;
		font-size: 28upx;
		position: relative;
		min-height: 80upx;
		line-height: 40upx;
		text-align: left;
		display: flex;
		flex-direction: column;
	}
	
	.cu-chat .cu-item>.self-main .main .content:not([class*="bg-"]) {
		background-color: #15716E;
		color: white;
	}
	
	.cu-chat .cu-item .date {
		position: absolute;
		font-size: 24upx;
		color: #777;
		width: calc(100% - 320upx);
		bottom: 20upx;
		left: 160upx;
	}
	
	.cu-chat .cu-item .action {
		padding: 0 30upx;
		display: flex;
		align-items: center;
	}
	
	.cu-chat .cu-item>.self-main .main .content::after {
		content: "";
		top: 27upx;
		transform: rotate(45deg);
		position: absolute;
		z-index: 100;
		display: inline-block;
		overflow: hidden;
		width: 24upx;
		height: 24upx;
		left: -12upx;
		right: initial;
		background-color: inherit;
	}
	
	.cu-chat .cu-item.self>.self-main .main .content::after {
		left: auto;
		right: -12upx;
	}
	
	.cu-chat .cu-item>.self-main .main .content::before {
		content: "";
		top: 30upx;
		transform: rotate(45deg);
		position: absolute;
		z-index: -1;
		display: inline-block;
		overflow: hidden;
		width: 24upx;
		height: 24upx;
		left: -12upx;
		right: initial;
		background-color: inherit;
		filter: blur(5upx);
		opacity: 0.3;
	}
	
	.cu-chat .cu-item>.self-main .main .content:not([class*="bg-"])::before {
		background-color: #333333;
		opacity: 0.1;
	}
	
	.cu-chat .cu-item.self>.self-main .main .content::before {
		left: auto;
		right: -12upx;
	}
	
	.cu-chat .cu-item.self {
		justify-content: flex-end;
		text-align: right;
	}
	
	.cu-chat .cu-item.self .content {
		background-color: #E8F1F1!important;
		color: #222!important;
	}
	
	.cu-chat .cu-info {
		display: inline-block;
		margin: 20upx auto;
		font-size: 24rpx;
		padding: 20upx 80rpx;
		background-color: #15716E;
		border-radius: 6upx;
		color: #ffffff;
		max-width: 100%;
		line-height: 1.4;
	}
</style>