wx_mini_app/components/hotelCard/hotelCard.vue

<template>
<view>
    <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item v-for="item in 4" :key="item.id">
            <div class="card">
				<div class="card-type">
					金卡会员
				</div>
				<div>
					理塘酒店(世界最高城店)
				</div>
				<div class="card-data">
					<div style="margin-right:40px;">
						<div style="font-weight: bold;">余额</div>
						<div>0</div>
					</div>
					<div>
						<div style="font-weight: bold;">积分</div>
						<div>0</div>
					</div>
				</div>
				<div class="card-explain">
					用卡说明
				</div>
            </div>
        </swiper-item>
    </swiper>
	<div class="form-data">
		<div class="form-data-top">填写个人信息</div>
		<div class="form-data-info">
			<div style="width:100px">姓名</div>
			<div style="flex:1">
				<input type="text" placeholder="请输入姓名">
			</div>
		</div>
		<div class="form-data-info">
			<div style="width:100px">身份证</div>
			<div style="flex:1">
				<input type="text" placeholder="请输入身份证">
			</div>
		</div>
		<div class="form-data-info">
			<div style="width:100px">手机号</div>
			<div style="flex:1">
				<input type="text" placeholder="请输入手机号">
			</div>
		</div>
		<div class="form-data-info">
			<div style="width:100px">推荐员工号</div>
			<div style="flex:1">
				<input type="text" placeholder="请输入推荐员工号">
			</div>
		</div>
		<div class="form-data-info">
			<div style="width:100px">微信支付</div>
			<div style="flex:1">
				<input type="text" placeholder="218">
			</div>
		</div>
	</div>
	<u-button type="primary">立即办理</u-button>
</view>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.card {
    width: 96vw;
    margin: auto;
    margin-top: 10px;
	background: #F0F8FF;
	height: 260px;
	padding: 0 20px;
	border-radius: 10px;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}
.card-type{
	margin-top: 30px;
}
.swiper{
	height: 270px;
}
.card-data{
	display: flex;
	// justify-content: space-between;
	margin-top: 15px;
	div{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;	
	}
}
.card-explain{
	position: absolute;
	bottom: 10px;
	right: 10px;
	padding: 5px 10px;
	background: #DCDCDC;
	border-radius: 15px;
}
.form-data{
	width: 96vw;
    margin: auto;
	margin-top: 20px;
}
.form-data-top{
	border-left: #00AAFF 5px solid;
	padding-left: 5px;
}
.form-data-info{
	display: flex;
	align-items: center;
	height: 60px;
}
</style>