TianHeJianKang/pages/LDY/LDY.vue

<template>
	<view>
		<!-- 上段 -->
		<view class="topImgBox">
			<image src="@/static/LDY/bj1.png" class="img1"></image>
			<view class="tobBox">
				<view class="tex1">
					张家/李家婚宴
				</view>
				<view class="tex1" style="margin-top: 32rpx;">
					2024年7月22日 甲辰年大暑节气第一天
				</view>
			</view>
		</view>
		<!-- 中段 -->
		<view class="topImgBox1">
			<view class="" style="text-align: center;">
				<image src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" class="img1s"></image>
			</view>
			<view class="tobBox">
				<image src="@/static/LDY/bj2.png" class="img1"></image>
			</view>
		</view>
		<!-- 下段 -->
		<view class="bottomImgBox">
			<image src="@/static/LDY/bj3.png" class="img2"></image>
			<view class="bottomBox">
				<!-- 新人信息 -->
				<view class="box1">
					<view class="XianT">
						<!-- 模拟上边框 -->
					</view>
					<view class="box1s">
						
					</view>
					<view class="XianB">
						<!-- 模拟下边框 -->
					</view>
				</view>
				<!-- 领取红包 -->
				<!-- 新人信息 -->
				<view class="box2">
					<view class="XianT">
						<!-- 模拟上边框 -->
					</view>
					<view class="box1s">
						<view class="tex1">
							新郎“杨光志”  新娘“张可”
						</view>
						<view class="tex1" style="margin-top: 20rpx;">
							送您一个花神红包，请点击领取
						</view>
					</view>
					<view class="XianB">
						<!-- 模拟下边框 -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		HTTP
	} from '@/api/http.js'
	import {
		onShow,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		jieqiFn
	} from '@/config' //返回节气样式（a,b),a是节气名称，b是类型，1是返回背景颜色，2是返回边框颜色，3是返回字体颜色
</script>

<style lang="scss" scoped>
	page {
		background: #f6f6f6;
	}
// 上半段
	.topImgBox {
		position: relative;
		font-size: 0;
		.img1 {
			width: 750rpx;
			height: 360rpx;
		}
		.tobBox{
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 360rpx;
			// background: rgba(0, 0, 0, 0.6);
			padding-top: 218rpx;
			.tex1{
				font-weight: 600;
				font-size: 32rpx;
				color: #FFBB46;
				text-align: center;
			}
		
		}
	}
	// 中段
	.topImgBox1{
		position: relative;
		font-size: 0;
		width: 750rpx;
		height: 680rpx;
		.img1s{
			width: 640rpx;
			height: 666rpx;
		}
		.tobBox{
			position: absolute;
			top: 0;
			left: 0;
			.img1{
				width: 750rpx;
				height: 680rpx;
			}
		}
	}
// 下半段
	.bottomImgBox {
		position: relative;
		font-size: 0;
		.img2 {
			width: 750rpx;
			height: 1254rpx;
		}
		.bottomBox{
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 1254rpx;
			background: rgba(0, 0, 0, 0.6);
			padding-top: 38rpx;
		}
	}

// 新人信息框
.box1{
	width: 686rpx;
	height: 294rpx;
	background: #F09455;
	border-radius: 8rpx;
	margin: 0 auto;
	padding-top: 8rpx;
	.XianT{
		width: 654rpx;
		height: 10rpx;
		background: #FFEFC2;
		margin: 0 auto;
		border-radius: 4rpx 4rpx 0 0;
	}
	.box1s{
		width: 670rpx;
		height: 256rpx;
		background: #FFEFC2;
		margin: 0 auto;
		border-radius: 4rpx;
	}
	.XianB{
		width: 654rpx;
		height: 10rpx;
		background: #FFEFC2;
		margin: 0 auto;
		border-radius: 0 0 4rpx 4rpx;
	}
}
// 领取红包
.box2{
	width: 686rpx;
	height: 804rpx;
	background: #F09455;
	border-radius: 8rpx;
	margin: 0 auto;
	padding-top: 8rpx;
	margin-top: 32rpx;
	.XianT{
		width: 654rpx;
		height: 10rpx;
		background: #FFEFC2;
		margin: 0 auto;
		border-radius: 4rpx 4rpx 0 0;
	}
	.box1s{
		width: 670rpx;
		height: 766rpx;
		background: #FFEFC2;
		margin: 0 auto;
		border-radius: 4rpx;
		text-align: center;
		padding-top: 42rpx;
		.tex1{
			font-weight: 600;
			font-size: 36rpx;
			color: #E60000;
		}
	}
	.XianB{
		width: 654rpx;
		height: 10rpx;
		background: #FFEFC2;
		margin: 0 auto;
		border-radius: 0 0 4rpx 4rpx;
	}
}

</style>