yanzong_qianduan/pages/news1/jinqun.vue

<template>
<view class="jinqun">
	<view class="flag">
		<view class="flagContent">
			<image :src="$picUrl+'/static/news1/j1.png'" mode="widthFix"></image>
			<text>京选电器</text>
		</view>
	</view>
	<view class="topicText">
		进群立领120元
	</view>
	<view class="subTopicText">
		京东电器官方福利群
	</view>
	<view class="qcode">
		
	</view>
	<view class="submitBtn">
		立即进群>
	</view>
	<view class="fuli">
		<view class="fuliTitle">
			福利攻略
		</view>
		<view class="fuliContent">
			<view class="fuliItem">
				<image :src="$picUrl+'/static/news1/j2.png'"  mode="heightFix"></image>
				<text>天天抢红包</text>
			</view>
			<view class="fuliItem">
				<image :src="$picUrl+'/static/news1/j3.png'" mode="heightFix"></image>
				<text>周二特价</text>
			</view>
			<view class="fuliItem">
				<image :src="$picUrl+'/static/news1/j4.png'" mode="heightFix"></image>
				<text>品质抢团</text>
			</view>
		</view>
		
	</view>
</view>
</template>

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

<style lang="scss" scoped>
page{
	min-height:100%;
	background: url(https://www.royaum.com.cn/static/news1/jbg.png);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding-bottom: 100upx;
}
.jinqun{
	height:100%;
	position: relative;
	.flag{
		position: absolute;
		top:0;
		left:0;
		.flagContent{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 96px;
				height:auto;
			}
			text{
				position: absolute;
				font-size: 32upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #E92214;
			}
		}
	}
	.topicText{
		font-size: 80upx;
		font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
		font-weight: 400;
		text-align: center;
		background: linear-gradient(180deg, #FFFFFF 0%, #FAE0BC 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		padding-top:150upx;
	}
	.subTopicText{
	
		font-size: 50upx;
		font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		-webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
		margin-top:20upx;
	}
	.qcode{
		width: 400upx;
		height:400upx;
		margin:40upx auto;
		border:1px solid red; 
	}
	.submitBtn{
		width: 340upx;
		height: 90upx;
		background: linear-gradient(180deg, #FEE6A8 0%, #FCC96E 100%);
		border-radius: 39px 39px 39px 39px;
		opacity: 1;
		font-size: 40upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #E92214;
		line-height: 90upx;
		text-align: center;
		margin:0 auto;
	}
	.fuli{
		margin: 60upx;
		background-color: #fff;
		border-radius: 14upx;
		.fuliTitle{
			width: 137px;
			height: 35px;
			background: #3A393E;
			opacity: 1;
			margin: 0 auto;
			border-radius: 0 0 20px 20px;
			color: #FFFFFF;
			text-align: center;
			line-height: 35px;
			font-size: 32upx;
		}
		.fuliContent{
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding:50upx 0;
			
			.fuliItem{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				image{
					height:100upx;
					width: auto;
				}
				text{
					font-size: 28upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #E92214;
					margin-top:12upx;
				}
			}
		}
		
	}
}
</style>