scancode-miro/pages/lgz/index/winPrize.vue

<template>
	<view class="intro-page common">
		<view class="top-class"></view>
		<view class="title">
			梅山古镇
		</view>
		<view class="head">
			<u-row class="row-class">
				<u-col span="4">
					<image class="logo-img" src="/static/images/common/logo.png" mode="aspectFit" />
				</u-col>
				<u-col span="4">
					<image class="commodity-img" src="/static/images/common/commodity.png" mode="aspectFit" />
				</u-col>
				<u-col span="4">

				</u-col>
			</u-row>
		</view>

		<view class="theme-text">
			<image src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/text.png"
				class="textImage"></image>
		</view>
		<!-- 公司简介内容卡片 -->
		<view class="intro-card">
			<view class="intro-view">
				<view class="intro-content">
					<view>
						<image
							src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/prize/winPrize_1.png"
							mode="heightFix" class="prize_image_1"></image>
					</view>
					<view>
						<image
							src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/prize/winPrize_2.png"
							mode="heightFix" class="prize_image_2"></image>
					</view>
					<view>恭喜你找到爆辣卧底,</view>
					<view>获得一次抽奖机会!</view>
				</view>

			</view>

		</view>

		<!-- 返回按钮 -->
		<view class="footer-btn">
			<view @click="goBack" class="return-button">立即抽奖</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			goBack() {
				uni.redirectTo({
					url: '/pages/lgz/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('../../../static/scss/common.css');

	.row-class {
		height: 80rpx;
	}

	.logo-img {
		background-size: cover;
		/* 确保背景图片自适应填充整个容器 */
		background-position: center;
		/* 背景图片居中显示 */
		background-repeat: no-repeat;
		/* 防止背景图重复 */
		height: 42rpx;
		width: 62%;
	}

	.commodity-img {
		background-size: cover;
		/* 确保背景图片自适应填充整个容器 */
		background-position: center;
		/* 背景图片居中显示 */
		background-repeat: no-repeat;
		/* 防止背景图重复 */
		height: 35rpx;
		width: 100%;
	}

	.theme-text {
		height: 10vh;
		text-align: center;
		line-height: 11vh;

		.textImage {
			height: 80rpx;
			width: 400rpx;
		}
	}

	.prize_image_1 {
		height: 140rpx;
	}

	.prize_image_2 {
		height: 340rpx
	}



	.intro-card {
		margin: 0 32rpx;
		padding: 32rpx 24rpx 24rpx 24rpx;
		background: rgba(131, 100, 71, 0.5);
		border-radius: 10rpx;


		.intro-view {
			border: 1px solid #341B10;
			padding: 10px;
			margin: 10px;
			position: relative;
			height: 56vh;

			.intro-content {
				font-size: 40rpx;
				color: #5c4322;
				line-height: 1.8;
				margin: 20rpx 0px;
				text-align: center;
				color: #9B0000;
				font-weight: 600;
			}

			.company-img {
				width: 100%;
				height: 260rpx;
				border-radius: 12rpx;
				object-fit: cover;
				margin-top: 10rpx;
				background: #eee;
			}
		}

	}
</style>