zh_UnionPay/pages/index/index.vue

<template>
	<view class="index-box box-border-box flex-common-css">
		<view class="flex-justify-space box-border-box plr-32">
			<image class="logo-img" src="@/static/img/c-logo.png" mode="scaleToFill"></image>
			<image class="music-img" src="@/static/img/c-music.png" mode="scaleToFill"></image>
		</view>
		<swiper class="swiper" :vertical='true'>
			<!-- 邀请函 -->
			<swiper-item>
				<view class="swiper-item index-1">
					<image class="img-text" src="@/static/img/yqh-text.png" mode="scaleToFill"></image>
					<view class="fs-48 fc-f text-align-center mb-16">振合网科技集团实体联盟</view>
					<view class="fs-32 fc-f text-align-center mb-72">未来已来   一触即发</view>
					<image class="img-xian" src="@/static/img/xian.png" mode="scaleToFill"></image>
					<image class="name-text" src="@/static/img/name-text.png" mode="scaleToFill"></image>
					<image class="time-text" src="@/static/img/time-text.png" mode="scaleToFill"></image>
					<image class="up-icon" src="@/static/img/c-up-icon.png" mode="scaleToFill"></image>
				</view>
			</swiper-item>
			<!-- 诚挚邀请 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="index-2">
						<image class="text-img" src="@/static/img/czyq-text.png" mode="scaleToFill"></image>
						<view class="fs-32 fc-F2D4A9 fw-b mb-24">尊敬的用户</view>
						<view class="fs-32 fc-F2D4A9 text-box">
							您好！感谢百忙之中阅读此邀请函。
							我们诚挚的邀请您参加于10月20日振合
							科技集团举办的2024年度招商说明会。
							我们深知在发展的道路上离不开您的信
							任与支持，我们取得的成绩中有您的辛
							勤付出。此次盛会邀请多位行业专家共
							聚一堂，特此诚邀您出席盛会，期待与
							您共话友情、 展望末来、共创属于我们
							新的商业传奇。
						</view>
						<view class="fc-F2D4A9 fw-b fs-32 text-align-right mt-32">振合网科技集团</view>
						<view class="fs-28 fc-F2D4A9 text-align-right">2024年10月20日</view>
					</view>
					<image class="up-icon" src="@/static/img/c-up-icon.png" mode="scaleToFill"></image>
				</view>
			</swiper-item>
			<!-- 活动地址 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="index-2">
						<image class="text-img-1" src="@/static/img/hdtd-text.png" mode="scaleToFill"></image>
						<image class="img-1" src="@/static/img/h-1.png" mode="scaleToFill"></image>
						
						<view class="flex-justify-space">
							<image class="img-2" src="@/static/img/h-2.png" mode="scaleToFill"></image>
							<image class="img-2" src="@/static/img/h-3.png" mode="scaleToFill"></image>
						</view>
						
						<view class="fc-F2D4A9 fs-40 text-align-center mb-16">重庆丽星君顿酒店</view>
						<view class="fs-28 fc-F2D4A9 text-align-center">地址：重庆市渝北区服装城大道48号</view>
					</view>
					<image class="up-icon" src="@/static/img/c-up-icon.png" mode="scaleToFill"></image>
				</view>
			</swiper-item>
			<!-- 地址导航 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="index-2">
						<image class="text-img" src="@/static/img/dzdh-text.png" mode="scaleToFill"></image>
						<view class="b-f">
							<image class="img-3" src="@/static/img/map.png" mode="scaleToFill"></image>
							<view class="b-c">开始导航</view>
						</view>
						<view class="fc-F2D4A9 fs-36 text-align-center mb-16">会议地址</view>
						<view class="fc-F2D4A9 fs-28 text-align-center mb-32">重庆丽星君顿酒店</view>
						<view class="fc-F2D4A9 fs-36 text-align-center mb-16">会议时间</view>
						<view class="fc-F2D4A9 fs-28 text-align-center mb-32">10月20日早 上08:30</view>
						<view class="fc-F2D4A9 fs-36 text-align-center mb-16">联系方式</view>
						<view class="fc-F2D4A9 fs-28 text-align-center mb-32">023-67491176</view>
					</view>
					<image class="up-icon" src="@/static/img/c-up-icon.png" mode="scaleToFill"></image>
				</view>
			</swiper-item>
			<!-- 参与预约 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="index-2">
						<image class="text-img-2" src="@/static/img/cyyy-text.png" mode="scaleToFill"></image>
						<view class="mb-32">
							<view class="fc-F2D4A9 fs-32 mb-16">您的姓名<span class="fc-ED301D fs-32">*</span></view>
							<input type="text" placeholder="请输入您的姓名">
						</view>
						<view class="mb-32">
							<view class="fc-F2D4A9 fs-32 mb-16">您的手机号<span class="fc-ED301D fs-32">*</span></view>
							<input type="number" placeholder="请输入您的手机号">
						</view>
						<view class="mb-32">
							<view class="fc-F2D4A9 fs-32 mb-16">您的公司名称</view>
							<input type="text" placeholder="请输入您的公司名称">
						</view>
						<view class="mb-72">
							<view class="fc-F2D4A9 fs-32 mb-16">邀请人</view>
							<input type="text" placeholder="请输入您的邀请人">
						</view>
						
						<view class="save-box">提交</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>

</template>
<script>
	import tools from "@/service/tools";
	export default {
		components: {},
		data() {
			return {

			}
		},
		mounted() {
			
		},
		methods: {
			
		},
	}
</script>
<style lang="scss" scoped>
	.index-box{
		background-image: url('@/static/img/c-bg.png');
		background-size: 100% 100%;
	}
	.up-icon{
		width: 64rpx;
		height: 64rpx;
		margin: 0 auto;
	}
	.swiper{
		flex: 1;
		width: 100%;
		height: 100%;
		.swiper-item{
			width: 100%;
			height: 100%;
		}
	}
	.logo-img{
		width: 136rpx;
		height: 79rpx;
		margin-top: 8rpx;
	}
	.music-img{
		margin-top: 16rpx;
		width: 56rpx;
		height: 56rpx;
	}
	.index-1{
		.img-text{
			width: 384rpx;
			height: 232rpx;
			margin: 76rpx auto 36rpx auto;
		}
		.img-xian{
			width: 10rpx;
			height: 174rpx;
			margin: 0 auto 154rpx auto;
		}
		.name-text{
			width: 288rpx;
			height: 32rpx;
			margin: 0 auto 10rpx auto;
		}
		.time-text{
			width: 274rpx;
			height: 37rpx;
			margin: 0 auto 140rpx auto;
		}
	}
	.index-2{
		width: 686rpx;
		min-height: 1032rpx;
		background: rgba(23,49,74,0.51);
		border-radius: 12rpx;
		border: 2rpx solid rgba(51,121,163,0.8);
		margin: 40rpx auto;
		box-sizing: border-box;
		padding: 32rpx;
		input{
			width: 622rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			font-size: 28rpx;
		}
		.save-box{
			width: 622rpx;
			height: 80rpx;
			background: linear-gradient( 90deg, #EBC795 0%, #E3BB83 100%);
			border-radius: 10rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 38rpx;
			font-weight: 600;
			color: #3A2E1C;
		}
		.text-img{
			width: 302rpx;
			height: 116rpx;
			margin: 0 auto 44rpx auto;
		}
		.text-box{
			line-height: 68rpx;
			letter-spacing: 4rpx;
		}
		.text-img-1{
			width: 224rpx;
			height: 116rpx;
			margin: 0 auto 44rpx auto;
		}
		.text-img-2{
			width: 214rpx;
			height: 116rpx;
			margin: 0 auto 44rpx auto;
		}
		.img-1{
			width: 622rpx;
			height: 328rpx;
			border-radius: 10rpx;
			margin-bottom: 24rpx;
		}
		.img-2{
			width: 300rpx;
			height: 214rpx;
			margin-bottom: 60rpx;
		}
		.img-3{
			width: 622rpx;
			height: 354rpx;
			border-radius: 10rpx;
			margin-bottom: 40rpx;
		}
		.b-f{
			position: relative;
			.b-c{
				position: absolute;
				right: 24rpx;
				bottom: 22rpx;
				
				width: 172rpx;
				height: 56rpx;
				background: #2F80ED;
				border-radius: 4rpx;
				text-align: center;
				line-height: 56rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

</style>