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;
        font-weight: 500;
        color: #9B0000;
			}

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

	}
	

</style>