blindDate/pages/my/contact.vue

<template>
	<view>
		<view class="cu-chat">
			<view class="cu-info round lf-m-t-30">此小程序是一个半开放的本地陌生人交友相亲平台，请注意文明相亲交友，不违公序良俗!</view>
			<view class="cu-info round">请谨慎沟通，若收到借款，投资，索要礼物等行为，请马上<text style="color: red;">投诉举报</text>，谨防诈骗，平台求证后会做永久封号处理。</view>
			<view class="cu-item lf-m-t-40">
				<view class="cu-avatar radius">
					<image class="lf-w-100 lf-h-100" src="../../static/logo.png" mode="aspectFill" ></image>
				</view>
				<view class="main">
					<view class="content shadow">
						<view class="lf-font-32 lf-color-222 lf-p-b-20 lf-w-100 lf-row-center" style="border-bottom: 1rpx solid #F5F5F5;">需要帮你联系吗?</view>
						<view class="lf-m-t-30 lf-p-b-30" style="border-bottom: 1rpx solid #F5F5F5;">
							<view class="lf-font-28">温馨提示</view>
							<view class="lf-font-28">申请对方联系方式将消耗一条红线</view>
						</view>
						
						<view class="lf-row-round lf-w-100 lf-p-t-20">
							<view class="lf-font-28" style="color: #E21196;" @click="apllyBind()">是的</view>
							<view class="lf-font-28" @click="$toBack()">不了</view>
						</view>
					</view>
				</view>
				<view class="date "> 13:23</view>
			</view>
			<view class="cu-item self">
				<view class="main">
					<view class="action">
						<text class="cuIcon-locationfill text-orange text-xxl"></text>
					</view>
					<view class="content shadow">
						嘉宾xxxx很符合我的期待,我想与Ta尝试配对。
					</view>
				</view>
				<view class="cu-avatar radius">
					<image class="lf-w-100 lf-h-100" src="../../static/logo.png" mode="aspectFill" ></image>
				</view>
				<view class="date">13:23</view>
			</view>
			<view class="cu-item">
				<view class="cu-avatar radius">
					<image class="lf-w-100 lf-h-100" src="../../static/logo.png" mode="aspectFill" ></image>
				</view>
				<view class="main">
					<view class="content shadow">
						嘻嘻,小红娘明白啦!已经将您的爱慕传达给了嘉宾xxx,咋们先等待一下Ta的回复吧
					</view>
					<view class="action text-grey">
						<text class="cuIcon-warnfill text-red text-xxl"></text>
					</view>
				</view>
				<view class="date">13:23</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">
	.cu-chat {
		display: flex;
		flex-direction: column;
	}
	.cu-chat .cu-item {
		display: flex;
		padding: 30upx 30upx 70upx;
		position: relative;
	}
	
	.cu-chat .cu-item>.cu-avatar {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	
	.cu-chat .cu-item>.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>.main .content {
		padding: 20upx;
		border-radius: 6upx;
		display: inline-flex;
		width: 600rpx;
		align-items: center;
		font-size: 30upx;
		position: relative;
		min-height: 80upx;
		line-height: 40upx;
		text-align: left;
		display: flex;
		flex-direction: column;
	}
	
	.cu-chat .cu-item>.main .content:not([class*="bg-"]) {
		background-color: #ffffff;
		color: #333333;
	}
	
	.cu-chat .cu-item .date {
		position: absolute;
		font-size: 24upx;
		color: #8799a3;
		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>.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>.main .content::after {
		left: auto;
		right: -12upx;
	}
	
	.cu-chat .cu-item>.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>.main .content:not([class*="bg-"])::before {
		background-color: #333333;
		opacity: 0.1;
	}
	
	.cu-chat .cu-item.self>.main .content::before {
		left: auto;
		right: -12upx;
	}
	
	.cu-chat .cu-item.self {
		justify-content: flex-end;
		text-align: right;
	}
	
	.cu-chat .cu-info {
		display: inline-block;
		margin: 20upx auto;
		font-size: 24upx;
		padding: 8upx 12upx;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 6upx;
		color: #ffffff;
		max-width: 690rpx;
		line-height: 1.4;
	}
</style>