remind/components/call.vue

<template>
	<view class="content">
		<view class="callbox">
			<view class="call">
				<view class="callTop">
					<view class="callTitle">电话提醒</view>
					<image src="../static/img/gb.png" mode="" class="callGb"></image>
				</view>
				<view class="txtBox">
					<textarea placeholder-style="color:#999999" placeholder="请输入跟进内容，200字以内~" class="textarea"/>
				</view>
				<view class="shortcut">
					<view class="shortcutTitle">快捷输入</view>
					<view class="shortcutBox">
						<view style="display: flex;padding-top: 16rpx;">
							<view class="shortcutLine">这是快捷输入这是快捷输入</view>
						</view>
						<view style="display: flex;padding-top: 16rpx;">
							<view class="shortcutLine">这是快捷输入这是这是快捷输入这是快捷输入快捷输入</view>
						</view>
						<view style="display: flex;padding-top: 16rpx;">
							<view class="shortcutLine">这是快捷输入这是这是快捷输入这是快捷输入这是快捷输入这是快捷输入快捷输入</view>
						</view>
						
						
					</view>
				</view>
				
				<view class="callBottom">
					<view class="callcancellation">取消</view>
					<view class="calltx">已提醒</view>
				</view>
				
			</view>
		
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
		
        
		}
	}
</script>

<style scoped>
.callbox{
	width: 100vw;height: 100vh;
	position: fixed;top: 0;left: 0;
	background: rgba(0,0,0,0.4);
	display: flex;
	align-items: center;
}
.callcancellation{
	width: 319rpx;border-right:1px solid #EEEEEE ;line-height: 80rpx;
	text-align: center;color: #999999;font-size: 32rpx;
}
.calltx{
	text-align: center;color: #3F90F7;font-size: 32rpx;line-height: 80rpx;width: 316rpx;
}
.callBottom{
	border-top: 1px solid #EEEEEE;display: flex;
}
.call{
	width: 638rpx;
	height: 727rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	margin-left: 56rpx;
}
.callTitle{
	font-weight: 500;line-height: 30rpx;
	color: #3C3C3C;
	font-size: 28rpx;
}
.callGb{
	width: 26rpx;height: 26rpx;
}
.callTop{
	padding: 30rpx 20rpx;display: flex;justify-content: space-between;
}
.shortcut{
	padding: 20rpx;
}
.shortcutTitle{
	color: #999999;font-size: 24rpx;
}
.shortcutLine{
	color: #3C3C3C;font-size: 24rpx;
	height: 60rpx;line-height: 60rpx;
	border-radius: 10rpx;padding: 0 24rpx;
	border: 1px solid #EEEEEE;
	max-width: 662rpx;
	overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
	text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
	white-space: nowrap;     /*文本不换行*/

}
.txtBox{
	padding: 6rpx 20rpx;
}
.callbox .textarea{
	height: 180rpx;font-size: 28rpx;
	background: #F4F5F7;padding: 26rpx 30rpx;
	border-radius: 10rpx;
	width: 538rpx;
}
</style>
<!-- 

 -->