弹框提示

pages/home.vue

@@ -72,6 +72,45 @@
 				</div>
 			</div>
 		</div>
+		<div class="new-user-free adffcacjc" v-if="newUserFreeShow">
+			<div class="new-user-free-box1">
+				<div class="new-user-free-box1-text">PERILL评估</div>
+				<div class="new-user-free-box1-text" style="margin-top: 8rpx;">基础版免费体验1次</div>
+			</div>
+			<div class="new-user-free-box2 adffcac">
+				<div class="new-user-free-box2-price adfacjb">
+					<div class="new-user-free-box2-price-left adffc">
+						<div class="new-user-free-box2-price-left-title">仅限个人创建使用</div>
+						<div class="new-user-free-box2-price-left-tip">领取后1年有效</div>
+					</div>
+					<div class="new-user-free-box2-price-right adffcac">
+						<div class="new-user-free-box2-price-right-top">1次</div>
+						<div class="new-user-free-box2-price-right-bottom">原价99</div>
+					</div>
+				</div>
+				<div class="new-user-free-box2-btn">免费体验</div>
+			</div>
+			<image class="new-user-free-close" :src="imgBase+'new_free_close.png'" @click="newUserFreeShow=false"></image>
+		</div>
+		<div class="kind-reminder adffcacjc" v-if="teamKindShow">
+			<div class="kr-box adffcac">
+				<image :src="imgBase+'remind_close.png'" @click="teamKindShow=false"></image>
+				<div class="kr-title">温馨提示</div>
+				<div class="kr-p" style="margin-top: 32rpx;">您尚未加入<span>(问卷ID：{{87999}})</span>的团队</div>
+				<div class="kr-p">因此无法填写此问卷</div>
+				<div class="kr-p">请联系问卷创建者<span>{{'刘怡然'}}</span>将您加入团队</div>
+				<div class="kr-btn" @click="teamKindShow=false">我知道了</div>
+			</div>
+		</div>
+		<div class="kind-reminder adffcacjc" v-if="questionnaireKindShow">
+			<div class="kr-box adffcac">
+				<image :src="imgBase+'remind_close.png'" @click="questionnaireKindShow=false"></image>
+				<div class="kr-title">温馨提示</div>
+				<div class="kr-p" style="margin-top: 32rpx;">您有一份<span>“PERILL团队评估初级”</span>问卷待完成，请及时填写，</div>
+				<div class="kr-p">以便我们为您提供精准分析</div>
+				<div class="kr-btn" @click="handleToFill">去填写</div>
+			</div>
+		</div>
 		<Tabbar :tabbarIndex="0"></Tabbar>
 	</view>
 </template>
@@ -87,7 +126,10 @@
 					this.$imgBase+'home_lb.png',
 					this.$imgBase+'home_lb.png',
 					this.$imgBase+'home_lb.png'
-				]
+				],
+				newUserFreeShow:false,
+				teamKindShow:false,
+				questionnaireKindShow:false,
 			}
 		},
 		onLoad(options) {
@@ -127,6 +169,9 @@
 					if(res.data.code!==0) return
 					this.reportCount = res.data.data.length;
 				})
+			},
+			handleToFill(){
+				this.questionnaireKindShow = false;
 			}
 		}
 	}
@@ -317,5 +362,158 @@
 				}
 			}
 		}
+	
+		.new-user-free{
+			position: fixed;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			background: rgba(0, 0, 0, .6);
+			z-index: 1000;
+			&-box1{
+				width: calc(100% - 180rpx);
+				height: 280rpx;
+				background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/new_free_title.png') no-repeat;
+				background-size: 100% 100%;
+				padding-left: 53rpx;
+				&-text{
+					font-family: SourceHanSansCN, SourceHanSansCN;
+					font-weight: bold;
+					font-size: 36rpx;
+					color: #874016;
+					line-height: 54rpx;
+					margin-top: 140rpx;
+				}
+			}
+			&-box2{
+				width: calc(100% - 140rpx);
+				background: #FFFFFF;
+				border-radius: 24rpx;
+				padding: 45rpx 25rpx 42rpx;
+				box-sizing: border-box;
+				&-price{
+					width: 100%;
+					height: 132rpx;
+					background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/new_free_price.png') no-repeat;
+					background-size: 100% 100%;
+					padding: 27rpx 34rpx 27rpx 30rpx;
+					box-sizing: border-box;
+					&-left{
+						&-title{
+							font-family: PingFang-SC, PingFang-SC;
+							font-weight: bold;
+							font-size: 28rpx;
+							color: #5E2E11;
+							line-height: 36rpx;
+						}
+						&-tip{
+							font-family: PingFangSC, PingFang SC;
+							font-weight: 400;
+							font-size: 24rpx;
+							color: #808080;
+							line-height: 32rpx;
+							margin-top: 10rpx;
+						}
+					}
+					&-right{
+						&-top{
+							font-family: PingFang-SC, PingFang-SC;
+							font-weight: bold;
+							font-size: 48rpx;
+							color: #FF5A09;
+							line-height: 67rpx;
+						}
+						&-bottom{
+							font-family: PingFangSC, PingFang SC;
+							font-weight: 400;
+							font-size: 24rpx;
+							color: #612D11;
+							line-height: 33rpx;
+							margin-top: 3rpx;
+						}
+					}
+				}
+				&-btn{
+					width: calc(100% - 170rpx);
+					height: 80rpx;
+					border-radius: 40rpx;
+					background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/new_free_btn.png') no-repeat;
+					background-size: 100% 100%;
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #5E2E11;
+					line-height: 80rpx;
+					text-align: center;
+					letter-spacing: 2rpx;
+					margin-top: 38rpx;
+				}
+			}
+			&-close{
+				width: 64rpx;
+				height: 64rpx;
+				margin-top: 48rpx;
+			}
+		}
+	
+		.kind-reminder{
+			position: fixed;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			z-index: 1000;
+			background: rgba(0, 0, 0, .6);
+			.kr-box{
+				width: calc(100% - 100rpx);
+				padding: 54rpx 60rpx 48rpx;
+				box-sizing: border-box;
+				background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/remind_bg.png') no-repeat;
+				background-size: 100% 100%;
+				position: relative;
+				image{
+					width: 48rpx;
+					height: 48rpx;
+					position: absolute;
+					top: 40rpx;
+					right: 30rpx;
+				}
+				.kr-title{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 36rpx;
+					color: #002846;
+					line-height: 56rpx;
+					text-align: center;
+				}
+				.kr-p{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 30rpx;
+					color: #002846;
+					line-height: 48rpx;
+					text-align: center;
+					span{
+						font-weight: bold;
+						margin: 0 10rpx;
+					}
+				}
+				.kr-btn{
+					width: calc(100% - 80rpx);
+					height: 88rpx;
+					background: #904A87;
+					border-radius: 44rpx;
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #FFFFFF;
+					line-height: 88rpx;
+					text-align: center;
+					letter-spacing: 2rpx;
+					margin-top: 66rpx;
+				}
+			}
+		}
 	}
 </style>