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">
		<image :src="cityInfo.wechat"></image>
	</view>
	<view class="submitBtn">
		立即进群>
		<button open-type="share"></button>
	</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 {
				cityInfo: {}
			}
		},
		onReady() {
			this.cityInfo = uni.getStorageSync("cityInfo")
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
		  return {
		    title: "进社群领取更多福利",
			imageUrl: this.cityInfo.we
		  }
		},
		
		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
		  const app = this
		  // 构建页面参数
		  const params = app.$getShareUrlParams({
		    goodsId: app.goodsId,
		  })
		  return {
		    title: app.goods.goods_name,
		    path: `/pages/goods/detail?${params}`
		  }
		}
	}
</script>

<style lang="scss" scoped>

.jinqun{
	height:100%;
	position: relative;
	background: url(https://www.royaum.com.cn/static/jinqun-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100vh;
	.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; 
		image{
			width: 100%;
			height: 100%;
		}
	}
	.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;
		position: relative;
		button{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
			opacity: 0;
		}
	}
	.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>