mabao/pages/service_packs/packs_details.vue

<template>
	<view style="width: 100%;height: 100%;background-color: #ececec;">
		<!-- 卡券 -->
		<view class="card">
			<view>
				<!-- 放图片 标题 -->
				<view class="title">
					<image src="../../static/横占位图.png" class="img"></image>
				</view>
				<!-- 放描述 -->
				<view class="describe"></view>
			</view>
		</view>
		<view class="round" style="position:absolute;top: 20vh;right:0;"></view>
		<view class="round" style="position:absolute;top: 20vh;"></view>
		<!-- 底部按钮 -->
		<view class="footer">
			<view class="cu-bar bg-white tabbar border shop" style="width: 100%;">
				<button class="action" open-type="contact" style="width: 33%;">
					<view class="cuIcon-service text-green">
					</view>
					客服
				</button>
				<view class="submit" @click="next" style="background-color: #0B73B9; color: #FFFFFF;">选购服务包</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.footer {
		width: 100%;
		height: auto;
		display: flex;
		position: fixed;
		bottom: 0;
	}

	.round {
		height: 50rpx;
		width: 50rpx;
		border-radius: 50%;
		background-color: #ececec;
	}

	.card {
		padding: 30rpx 30rpx;
		box-sizing: border-box;

		view {
			width: 100%;
			background-color: #ffffff;
			border-radius: 15rpx;
			.title {
				width: 100%;
				height: 20vh;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				.img{
					width: 85%;
					height: 90%;
				}
			}
			.describe {
				width: 100%;
				height: 80vh;

			}
		}
	}
</style>