ChuangHengWx/pagesPublish/publishResult.vue

<template>
	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='发布结果'></cus-header>
		<view class="xcx">
			<view class="box">
				<view class="box-title">{{title}}</view>
				<view class="box-fill">
					<view class="box-fill-bottom adfacjb">
						<view class="box-fill-bottom-left adfac">
							<image :src="imgBase+'publish_result_avatar.png'"></image>
							<text>邀请填写</text>
						</view>
						<view class="box-fill-bottom-right">进入</view>
					</view>
				</view>
				<view class="box-bottom adfac">
					<image :src="imgBase+'publish_result_xcx.png'"></image>
					<text>小程序</text>		
				</view>
			</view>
		</view>
		<view class="share">
			<view class="share-title">分享到</view>
			<view class="share-menu adf">
				<view class="share-menu-pre adffcac">
					<image :src="imgBase+'publish_result_wx.png'"></image>
					<text>微信好友</text>
				</view>
				<view class="share-menu-pre adffcac">
					<image :src="imgBase+'publish_result_pyq.png'"></image>
					<text>朋友圈</text>
				</view>
				<view class="share-menu-pre adffcac">
					<image :src="imgBase+'publish_result_copy.png'"></image>
					<text>复制链接</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				title:''
			}
		},
		onLoad(options){
			this.title = options.title;
		},
		methods:{
			
		}
	}
</script>

<style scoped lang="scss">
	.default_page{
		box-sizing: border-box;
		.xcx{
			padding: 70rpx 155rpx;
			.box{
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 40rpx 24rpx 18rpx;
				&-title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #002846;
					line-height: 32rpx;
				}
				&-fill{
					margin-top: 34rpx;
					width: 100%;
					height: 322rpx;
					background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/publish_result_bg1.png') no-repeat;
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					padding: 0 5rpx 5rpx;
					&-bottom{
						width: 100%;
						height: 84rpx;
						background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/publish_result_bg2.png') no-repeat;
						background-size: 100% 100%;
						padding: 13rpx 16rpx;
						box-sizing: border-box;
						&-left{
							image{
								width: 56rpx;
								height: 56rpx;
							}
							text{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #002846;
								line-height: 33rpx;
								margin-left: 12rpx;
							}
						}
						&-right{
							width: 86rpx;
							height: 42rpx;
							background: #33A7A7;
							border-radius: 10rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 42rpx;
							text-align: center;
							letter-spacing: 2rpx;
						}
					}
				}
				&-bottom{
					margin-top: 16rpx;
					border-top: 1rpx solid #EFEFEF;
					padding-top: 10rpx;
					image{
						width: 24rpx;
						height: 24rpx;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #95A5B1;
						line-height: 20rpx;
						margin-left: 8rpx;
					}
				}
			}
		}
		
		.share{
			flex: 1;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 40rpx 30rpx;
			&-title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #002846;
				line-height: 42rpx;
				padding-left: 10rpx;
			}
			&-menu{
				flex-wrap: wrap;
				&-pre{
					width: calc(100% / 3);
					margin-top: 42rpx;
					image{
						width: 102rpx;
						height: 102rpx;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #002846;
						line-height: 37rpx;
						text-align: center;
						margin-top: 24rpx;
					}
				}
			}
		}
	}
</style>