调整

microserviceUserH5/static/css/springFestivalActivity.css

@@ -72,6 +72,9 @@ ul, li {
   position: absolute;
   top: 4.2rem;
   left: 1.06rem;
+}
+
+.have-buff{
   animation: mymove2 1.6s infinite;
 }
 
@@ -92,6 +95,7 @@ ul, li {
   position: relative;
   background: url(../../static/img/springFestivalActivity/nextBg.png) no-repeat;
   background-size: 100% 100%;
+  margin: auto;
   margin-top: -2.52rem;
 }
 
@@ -167,6 +171,7 @@ ul, li {
 }
 
 .no-join-activity{
+  width: 4.8rem;
   position: absolute;
   bottom: 3.6rem;
   left: 50%;
@@ -221,6 +226,34 @@ ul, li {
   color: rgba(238, 11, 26, 0.6);
 }
 
+.no-times-tip{
+  position: absolute;
+  top: 3.94rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.32rem;
+  font-weight: 600;
+  color: #FFFAA5;
+  line-height: 0.6rem;
+  text-shadow: 0 0 0.1rem rgba(222, 13, 16, 0.7);
+}
+
+.no-times-btn{
+  position: absolute;
+  bottom: 0.54rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4.6rem;
+  height: 1.02rem;
+  line-height: 1.02rem;
+  text-align: center;
+  background: url(../../static/img/springFestivalActivity/noTimes.png) no-repeat;
+  background-size: 100% 100%;
+  font-size: 0.34rem;
+  font-weight: 600;
+  color: #EE0B1A;
+}
+
 .award-record-mask,.rule-mask,.award-mask,.award-result-mask {
   width: 7.5rem;
   height: 100vh;
@@ -244,13 +277,45 @@ ul, li {
   transform: translateX(-50%);
 }
 
+.tab-wrap{
+  width: 4.52rem;
+  height: 0.62rem;
+  background: url(../../static/img/springFestivalActivity/selectedBg.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  margin: auto;
+  margin-top: 1.36rem;
+  font-size: 0.28rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0.3rem;
+}
+
+.receive{
+  width: 1.92rem;
+  height: 0.54rem;
+  line-height: 0.52rem;
+  color: #FFE4BD;
+  background: url(../../static/img/springFestivalActivity/no-selected.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.used{
+  width: 1.92rem;
+  height: 0.54rem;
+  line-height: 0.52rem;
+  color: #EE0B1A;
+  background: url(../../static/img/springFestivalActivity/selected.png) no-repeat;
+  background-size: 100% 100%;
+}
+
 .record-wrap{
-  position: absolute;
-  left: 50%;
-  top: 1.36rem;
-  transform: translateX(-50%);
+  margin: auto;
+  margin-top: 0.2rem;
   width: 5.68rem;
-  height: 6.16rem;
+  /* height: 6.16rem; */
+  height: 5.6rem;
   background: rgba(255, 255, 255, 0);
   border-radius: 0.12rem;
   border: 0.02rem solid rgba(255, 214, 189, 0.7);
@@ -493,6 +558,10 @@ ul, li {
   margin-top: 0.06rem;
 }
 
+.one-result{
+  margin-bottom: 1.2rem;
+}
+
 #toast-container>.toast-error {
   background-image: none !important;
 }
@@ -521,39 +590,4 @@ ul, li {
     min-width: 80px !important;
     width: auto;
   }
-}
-
-#modal-container.six {
-  transform: scale(1);
-}
-#modal-container.six .modal-background {
-  background: transparent;
-  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six .modal-background .modal {
-  background-color: transparent;
-  animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six .modal-background .modal h2, #modal-container.six .modal-background .modal p {
-  opacity: 0;
-  position: relative;
-  animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six .modal-background .modal .modal-svg rect {
-  animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six.out {
-  animation: quickScaleDown 0s .5s linear forwards;
-}
-#modal-container.six.out .modal-background {
-  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six.out .modal-background .modal {
-  animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six.out .modal-background .modal h2, #modal-container.six.out .modal-background .modal p {
-  animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six.out .modal-background .modal .modal-svg rect {
-  animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
 }

microserviceUserH5/vcloud/springFestivalActivity.html

@@ -31,10 +31,10 @@
 			<div class="five-times">抽奖5次</div>
 		</div>
 		<div class="rest-times">
-			<div class="rest-times-text">剩余次数 9999次</div>
+			<div class="rest-times-text">剩余次数 <span class="rest-times-number">0</span>次</div>
 			<div class="get-times">获取次数 >></div>
 		</div>
-		<div class="no-join-activity">使用激活码，星币支付不参与活动</div>
+		<div class="no-join-activity">使用激活码，星币支付及PC端不参与活动</div>
 		<div class="share-wrap">分享至朋友圈、QQ获得“幸运BUFF”</div>
 		<div class="get-award">已获取奖励</div>
 		<div class="activity-time">活动时间 ：2021年1月25日-2月15日</div>
@@ -42,6 +42,10 @@
 	</div>
 	<div class="award-record-mask">
 		<div class="dialog">
+			<div class="tab-wrap">
+				<div class="receive">领取</div>
+				<div class="used">已使用</div>
+			</div>
 			<div class="record-wrap">
 				<div class="title-row">
 					<div class="title-award">奖品</div>
@@ -82,68 +86,31 @@
 				<span class="award-result">参与抽奖有几率获得以下奖励</span>
 				<img class="icon" src="../static/img/springFestivalActivity/right-icon.png" />
 			</div>
-			<div class="card-wrap">
-				<div class="card-item">
-					<img class="card" src="../static/img/springFestivalActivity/day.png" />
-				    <div class="card-text">星曜天卡</div>
-				</div>
-				<div class="card-item">
-					<img class="card" src="../static/img/springFestivalActivity/week.png" />
-				    <div class="card-text">星曜周卡</div>
-				</div>
-				<div class="card-item">
-					<img class="card" src="../static/img/springFestivalActivity/mouth.png" />
-				    <div class="card-text">星曜月卡</div>
-				</div>
-				<div class="card-item">
-					<img class="card" src="../static/img/springFestivalActivity/season.png" />
-				    <div class="card-text">星曜季卡</div>
-				</div>
-				<div class="card-item">
-					<img class="card" src="../static/img/springFestivalActivity/year.png" />
-				    <div class="card-text">星曜年卡</div>
-				</div>
-			</div>
+			<div class="card-wrap"></div>
 		    <img class="award-close" src="../static/img/springFestivalActivity/close.png" />
 		</div>
 	</div>
 	<div class="award-result-mask">
 		<div class="award-result-dialog">
-			<div class="result-tip-row">
-				<div class="award-result-tip">善良的人，好运气最终是会眷顾你</div>
-				<div class="join-result-tip">参与抽奖有几率获得以下奖励</div>
-			</div>
-			<div class="card-wrap award-result-wrap">
-				<!-- <div class="card-item">
-					<img class="one-card" src="../static/img/springFestivalActivity/day.png" />
-				    <div class="card-text">星曜天卡</div>
-				</div> -->
-				<div class="card-item">
-					<img class="card" src="../static/img/springFestivalActivity/day.png" />
-				    <div class="card-text">星曜天卡</div>
+			<div class="have-times-wrap">
+				<div class="result-tip-row">
+					<div class="award-result-tip">善良的人，好运气最终是会眷顾你</div>
+					<div class="join-result-tip">参与抽奖有几率获得以下奖励</div>
 				</div>
-				<div class="card-item">
-					<img class="card" src="../static/img/springFestivalActivity/day.png" />
-				    <div class="card-text">星曜天卡</div>
-				</div>
-				<div class="card-item">
-					<img class="card" src="../static/img/springFestivalActivity/day.png" />
-				    <div class="card-text">星曜天卡</div>
-				</div>
-				<div class="card-item">
-					<img class="card" src="../static/img/springFestivalActivity/day.png" />
-				    <div class="card-text">星曜天卡</div>
-				</div>
-				<div class="card-item">
-					<img class="card" src="../static/img/springFestivalActivity/day.png" />
-				    <div class="card-text">星曜天卡</div>
+				<div class="card-wrap award-result-wrap"></div>
+				<div class="btn-row">
+					<div class="left-btn">再抽<span class="report-times"></span>次</div>
+					<div class="look-btn">查看</div>
 				</div>
+				<div class="times-text">还剩次数：<span class="times-text-number"></span>次</div>
 			</div>
-			<div class="btn-row">
-				<div class="left-btn">再抽5次</div>
-				<div class="look-btn">查看</div>
+			<div class="no-times-wrap">
+				<div class="no-times-tip">
+					<div>意不意外，惊不惊喜！</div>
+					<div>当前抽奖次数不足哦</div>
+				</div>
+				<div class="no-times-btn">购买星曜云手机获取次数</div>
 			</div>
-			<div class="times-text">还剩次数：99999次</div>
 		    <img class="award-result-close" src="../static/img/springFestivalActivity/close.png" />
 		</div>
 	</div>
@@ -152,7 +119,7 @@
 		toastr.options.timeOut = '1500';
 	</script>
 	<script type="text/javascript">
-        // var baseUrl = 'http://14.215.128.96/'
+        // var baseUrl = 'http://192.168.211.34:8044'
 	    let timer,flag = true;
 		var url = window.location.href;
 		url = url.split('/')
@@ -161,11 +128,81 @@
 		    n2 = loc.indexOf("="),//取得=号的位置
 		    id = loc.substr(n2 + 1, n1 - n2),//从=号后面的内容
 			u = navigator.userAgent,
+			ua = navigator.userAgent.toLowerCase(),
 			isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
+			isMiniprogram = false,
 			isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
+		let activityState = 0,
+		    surplus = 0,
+			notReceive = 0;
 		if(id !== ''){
 			operate(3);
 		}
+		if (ua.match(/MicroMessenger/i) == "micromessenger") {
+			//ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
+			wx.miniProgram.getEnv((res) => {
+				if (res.miniprogram) {
+					isMiniprogram = true;
+				} else {
+					isMiniprogram = false;
+				}
+			})
+		} else {
+			isMiniprogram = false;
+		}
+		init();
+		setInterval(() => {
+			init();
+		},30000);
+		//初始化数据
+		function init(times) {
+			$.ajax({
+				url: baseUrl + '/api/user/v1/activity/getSpringFestivalConfig',
+				type: 'get',
+				headers: {
+					'Authorization': id //id
+				},
+				contentType: "application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					if(res.status === 0){
+						let time = `${res.data.startTime.substr(0,4)}年${res.data.startTime.substring(5,7)}月${res.data.startTime.substring(8,10)}日-${res.data.endTime.substring(5,7)}月${res.data.endTime.substring(8,10)}日`;
+						$('.activity-time').eq(0).text(time);
+						let str = '',
+							cardData = [{name: '天',imgName: 'day'},{name: '周',imgName: 'week'},{name: '月',imgName: 'mouth'},
+							{name: '季',imgName: 'season'},{name: '年',imgName: 'year'}],
+							jackpot = res.data.jackpot;
+							cardData = cardData.filter((item) => jackpot.includes(item.name));
+						for (var i = 0; i < cardData.length; i++) {
+							str += `<div class="card-item">
+										<img class="card" src="../static/img/springFestivalActivity/${cardData[i].imgName}.png" />
+										<div class="card-text">星曜${cardData[i].name}卡</div>
+									</div>`
+						}
+						activityState = res.data.activityState;
+						surplus = res.data.surplus;
+						notReceive = res.data.notReceive;
+						$('.rest-times-number').eq(0).text(surplus);
+						$('.times-text-number').eq(0).text(surplus);
+						if(res.data.addition === 1){
+							$('.gift-box')[0].className = 'gift-box have-buff'
+						} else {
+							$('.gift-box')[0].className = 'gift-box'
+						}
+						if(notReceive > 0){
+							
+						}
+						$('.card-wrap').eq(0).append(str)
+					}else{
+						stopManyClick(() =>{
+							toastr.error(res.msg)
+						})
+					}
+					
+				},
+			})
+		}
 		//点击获奖记录
 	    $('.get-award')[0].addEventListener('click',() => {
 			$('.dialog').animate({top: '2.24rem'},"fast");
@@ -207,16 +244,191 @@
 		},false);
 		//点击抽奖
 		$('.once')[0].addEventListener('click',() => {
-			$('.award-result-dialog').animate({top: '1.86rem'},"fast");
-			$('.award-result-mask').show();
-			document.documentElement.style.overflow='hidden';
+			handleAward(1)
 		},false);
+		$('.five-times')[0].addEventListener('click',() => {
+			handleAward(5)
+		},false);
+		//点击再抽
+		$('.left-btn')[0].addEventListener('click',() => {
+			let val = $('.report-times').eq(0).text();
+			handleAward(val,'report')
+		},false);
+		function handleAward(times,type) {
+			if(surplus === 0){
+				$('.have-times-wrap').eq(0).css('display', 'none');
+				$('.no-times-wrap').eq(0).css('display', 'block');
+				$('.award-result-dialog').animate({top: '1.86rem'},"fast");
+				$('.award-result-mask').show();
+				document.documentElement.style.overflow='hidden';
+				return
+			}
+			$.ajax({
+				url: baseUrl + '/api/user/v1/activity/obtainRewards',
+				type: 'post',
+				headers: {
+					'Authorization': id //id
+				},
+				data:JSON.stringify({
+					frequency: times
+				}),
+				contentType: "application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					if(res.status === 0){
+						$('.have-times-wrap').eq(0).css('display', 'block');
+						$('.no-times-wrap').eq(0).css('display', 'none');
+						if(type !== 'report'){
+							$('.award-result-dialog').animate({top: '1.86rem'},"fast");
+							$('.award-result-mask').show();
+							document.documentElement.style.overflow='hidden';
+						}
+						$('.award-result-wrap').eq(0).text('');
+						let str = '',
+							cardObj = {
+								'天': 'day',
+								'周': 'week',
+								'月': 'mouth',
+								'季': 'season',
+								'年': 'year'
+							},
+							list = res.data.list;
+						if(list.length === 1){
+						    $('.report-times').eq(0).text(1);
+							$('.award-result-wrap')[0].className = 'card-wrap award-result-wrap one-result';
+							str = `<div class="card-item">
+										<img class="one-card" src="../static/img/springFestivalActivity/${cardObj[list[0].duration]}.png" />
+										<div class="card-text">星曜${list[0].duration}卡</div>
+									</div> `
+						}else{
+						    $('.report-times').eq(0).text(5);
+							$('.award-result-wrap')[0].className = 'card-wrap award-result-wrap'
+							for (var i = 0; i < list.length; i++) {
+								str += `<div class="card-item">
+											<img class="card" src="../static/img/springFestivalActivity/${cardObj[list[i].duration]}.png" />
+											<div class="card-text">星曜${list[i].duration}卡</div>
+										</div>`
+							}
+						}
+						$('.award-result-wrap').eq(0).append(str);
+						init();
+					}else{
+						stopManyClick(() =>{
+							toastr.error(res.msg)
+						})
+					}
+				},
+			})
+		}
 		//点击抽奖关闭按钮
 		$('.award-result-close')[0].addEventListener('click',() => {
 			$('.award-result-dialog').animate({top: '-10.96rem'},"fast");
 			$('.award-result-mask').hide();
 			document.documentElement.style.overflow='auto';
 		},false);
+		//点击分享按钮
+		$('.share-wrap')[0].addEventListener('click',() => {
+			if (isMiniprogram) { // 小程序
+				wx.miniProgram.navigateTo({
+					url: '/pages/home/home'
+				})
+			} else { // 不是小程序
+				$.ajax({
+					url: baseUrl + '/api/public/v4/actFissionAward/getActDetail',
+					type: 'get',
+					headers: {
+						'Authorization': id //id
+					},
+					contentType: "application/json",
+					dataType: 'json',
+					cache: false,
+					success: function (res) {
+						if (res.status === 0) {
+							const {title, content, gotoUrl, shareImg} = res.data.shareInfo;
+							if (isAndroid) {
+								window.native.share(title, content, gotoUrl, shareImg)
+							} else if (isIOS) {
+								window.webkit.messageHandlers.share.postMessage({
+									title: title,
+									content: content,
+									gotoUrl: gotoUrl,
+									shareImg: shareImg
+								});
+							}
+						} else {
+							stopManyClick(() =>{
+								toastr.error(res.msg)
+							})
+						}
+					},
+				})
+			}
+			$.ajax({
+				url: baseUrl + '/api/user/v1/activity/addBuff',
+				type: 'get',
+				headers: {
+					'Authorization': id //id
+				},
+				contentType: "application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					console.log(res)
+				},
+			})
+			
+		},false);
+		//点击购买星耀获取云机按钮
+		$('.no-times-btn')[0].addEventListener('click',() => {
+			if (isMiniprogram) { // 小程序
+				wx.miniProgram.navigateTo({
+					url: '/packageA/order/buy/index?type=activity'
+				})
+			} else if (isAndroid) { // 安卓
+				window.native.startPurchase(1, 365);
+			} else if (isiOS) {
+				window.webkit.messageHandlers.startPurchase.postMessage({ type: 1, day: 365 });
+			}
+		},false);
+		//点击获取次数
+		$('.get-times')[0].addEventListener('click',() => {
+			if (isMiniprogram) { // 小程序
+				if(notReceive > 0){
+					wx.miniProgram.navigateTo({
+						url: '/packageA/order/renew/index?type=activity'
+					})
+				} else {
+					wx.miniProgram.navigateTo({
+						url: '/packageA/order/buy/index?type=activity'
+					})
+				}
+			} else if (isAndroid) { // 安卓
+				if(notReceive > 0){
+					window.native.startRenew();
+				} else {
+				    window.native.startPurchase(1, 365);
+				}
+			} else if (isiOS) {
+				if(notReceive > 0){
+					window.webkit.messageHandlers.startRenew.postMessage();
+				} else {
+					window.webkit.messageHandlers.startPurchase.postMessage();
+				}
+			}
+		},false);
+		// 点击查看
+		$('.look-btn')[0].addEventListener('click',() => {
+			if (isMiniprogram) { // 小程序
+				wx.miniProgram.navigateTo({
+					url: '/pages/home/home'
+				})
+			} else if (isAndroid) { // 安卓
+				window.native.startMain();
+			} else if (isiOS) {
+				window.webkit.messageHandlers.startMain.postMessage();
+			}
+		},false);
 		//埋点
 		function operate(accessType){
 			$.ajax({
@@ -238,18 +450,6 @@
 				},
 			})
 		}
-		//传递参数给app
-		function sendParm(type) {
-			if (isAndroid) {
-				window.native.toGame(type);
-            }else if(isiOS){
-				window.webkit.messageHandlers.getPackageName.postMessage(type);
-			}else{
-				stopManyClick(() =>{
-					toastr.error('暂不支持当前系统')
-				})
-			}
-		}
 		//防止提示一秒内重复显示
 		function stopManyClick(fn) {
 			if (flag) {

microserviceUserH5/vcloud/test.html

@@ -1,607 +0,0 @@
-
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>7种效果的酷炫弹窗</title>
-<style type="text/css">
-* {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-html, body {
-  min-height: 100%;
-  height: 100%;
-  background-image: url(images/bg.jpg);
-  background-size: cover;
-  background-position: top center;
-  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
-  font-weight: 200;
-}
-html.modal-active, body.modal-active {
-  overflow: hidden;
-}
-
-#modal-container {
-  position: fixed;
-  display: table;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  transform: scale(0);
-  z-index: 1;
-}
-#modal-container.one {
-  transform: scaleY(0.01) scaleX(0);
-  animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.one .modal-background .modal {
-  transform: scale(0);
-  animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.one.out {
-  transform: scale(1);
-  animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.one.out .modal-background .modal {
-  animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.two {
-  transform: scale(1);
-}
-#modal-container.two .modal-background {
-  background: transparent;
-  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.two .modal-background .modal {
-  opacity: 0;
-  animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.two + .content {
-  animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.two.out {
-  animation: quickScaleDown 0s .5s linear forwards;
-}
-#modal-container.two.out .modal-background {
-  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.two.out .modal-background .modal {
-  animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.two.out + .content {
-  animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.three {
-  z-index: 0;
-  transform: scale(1);
-}
-#modal-container.three .modal-background {
-  background: rgba(0, 0, 0, 0.6);
-}
-#modal-container.three .modal-background .modal {
-  animation: moveUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.three + .content {
-  z-index: 1;
-  animation: slideUpLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.three.out .modal-background .modal {
-  animation: moveDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.three.out + .content {
-  animation: slideDownLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.four {
-  z-index: 0;
-  transform: scale(1);
-}
-#modal-container.four .modal-background {
-  background: rgba(0, 0, 0, 0.7);
-}
-#modal-container.four .modal-background .modal {
-  animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.four + .content {
-  z-index: 1;
-  animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.four.out .modal-background .modal {
-  animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.four.out + .content {
-  animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.five {
-  transform: scale(1);
-}
-#modal-container.five .modal-background {
-  background: transparent;
-  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.five .modal-background .modal {
-  transform: translateX(-1500px);
-  animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.five.out {
-  animation: quickScaleDown 0s .5s linear forwards;
-}
-#modal-container.five.out .modal-background {
-  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.five.out .modal-background .modal {
-  animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six {
-  transform: scale(1);
-}
-#modal-container.six .modal-background {
-  background: transparent;
-  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six .modal-background .modal {
-  background-color: transparent;
-  animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six .modal-background .modal h2, #modal-container.six .modal-background .modal p {
-  opacity: 0;
-  position: relative;
-  animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six .modal-background .modal .modal-svg rect {
-  animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six.out {
-  animation: quickScaleDown 0s .5s linear forwards;
-}
-#modal-container.six.out .modal-background {
-  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six.out .modal-background .modal {
-  animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six.out .modal-background .modal h2, #modal-container.six.out .modal-background .modal p {
-  animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.six.out .modal-background .modal .modal-svg rect {
-  animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.seven {
-  transform: scale(1);
-}
-#modal-container.seven .modal-background {
-  background: transparent;
-  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.seven .modal-background .modal {
-  height: 75px;
-  width: 75px;
-  border-radius: 75px;
-  overflow: hidden;
-  animation: bondJamesBond 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.seven .modal-background .modal h2, #modal-container.seven .modal-background .modal p {
-  opacity: 0;
-  position: relative;
-  animation: modalContentFadeIn .5s 1.4s linear forwards;
-}
-#modal-container.seven.out {
-  animation: slowFade .5s 1.5s linear forwards;
-}
-#modal-container.seven.out .modal-background {
-  background-color: rgba(0, 0, 0, 0.7);
-  animation: fadeToRed 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.seven.out .modal-background .modal {
-  border-radius: 3px;
-  height: 162px;
-  width: 227px;
-  animation: killShot 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container.seven.out .modal-background .modal h2, #modal-container.seven.out .modal-background .modal p {
-  animation: modalContentFadeOut 0.5s 0.5 cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-#modal-container .modal-background {
-  display: table-cell;
-  background: rgba(0, 0, 0, 0.8);
-  text-align: center;
-  vertical-align: middle;
-}
-#modal-container .modal-background .modal {
-  background: white;
-  padding: 50px;
-  display: inline-block;
-  border-radius: 3px;
-  font-weight: 300;
-  position: relative;
-}
-#modal-container .modal-background .modal h2 {
-  font-size: 25px;
-  line-height: 25px;
-  margin-bottom: 15px;
-}
-#modal-container .modal-background .modal p {
-  font-size: 18px;
-  line-height: 22px;
-}
-#modal-container .modal-background .modal .modal-svg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  border-radius: 3px;
-}
-#modal-container .modal-background .modal .modal-svg rect {
-  stroke: #fff;
-  stroke-width: 2px;
-  stroke-dasharray: 778;
-  stroke-dashoffset: 778;
-}
-
-.content {
-  min-height: 100%;
-  height: 100%;
-  background: white;
-  position: relative;
-  z-index: 0;
-}
-.content h1 {
-  padding: 75px 0 30px 0;
-  text-align: center;
-  font-size: 30px;
-  line-height: 30px;
-  font-weight: 500;
-}
-.content .buttons {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 0;
-  text-align: center;
-}
-.content .buttons .button {
-  display: inline-block;
-  text-align: center;
-  padding: 10px 15px;
-  margin: 10px;
-  background: red;
-  font-size: 18px;
-  background-color: #efefef;
-  border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-}
-.content .buttons .button:hover {
-  color: white;
-  background: #009bd5;
-}
-
-@keyframes unfoldIn {
-  0% {
-    transform: scaleY(0.005) scaleX(0);
-  }
-  50% {
-    transform: scaleY(0.005) scaleX(1);
-  }
-  100% {
-    transform: scaleY(1) scaleX(1);
-  }
-}
-@keyframes unfoldOut {
-  0% {
-    transform: scaleY(1) scaleX(1);
-  }
-  50% {
-    transform: scaleY(0.005) scaleX(1);
-  }
-  100% {
-    transform: scaleY(0.005) scaleX(0);
-  }
-}
-@keyframes zoomIn {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-@keyframes zoomOut {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-@keyframes fadeIn {
-  0% {
-    background: transparent;
-  }
-  100% {
-    background: rgba(0, 0, 0, 0.7);
-  }
-}
-@keyframes fadeOut {
-  0% {
-    background: rgba(0, 0, 0, 0.7);
-  }
-  100% {
-    background: transparent;
-  }
-}
-@keyframes scaleUp {
-  0% {
-    transform: scale(0.8) translateY(1000px);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1) translateY(0px);
-    opacity: 1;
-  }
-}
-@keyframes scaleDown {
-  0% {
-    transform: scale(1) translateY(0px);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(0.8) translateY(1000px);
-    opacity: 0;
-  }
-}
-@keyframes scaleBack {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0.85);
-  }
-}
-@keyframes scaleForward {
-  0% {
-    transform: scale(0.85);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-@keyframes quickScaleDown {
-  0% {
-    transform: scale(1);
-  }
-  99.9% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-@keyframes slideUpLarge {
-  0% {
-    transform: translateY(0%);
-  }
-  100% {
-    transform: translateY(-100%);
-  }
-}
-@keyframes slideDownLarge {
-  0% {
-    transform: translateY(-100%);
-  }
-  100% {
-    transform: translateY(0%);
-  }
-}
-@keyframes moveUp {
-  0% {
-    transform: translateY(150px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes moveDown {
-  0% {
-    transform: translateY(0px);
-  }
-  100% {
-    transform: translateY(150px);
-  }
-}
-@keyframes blowUpContent {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  99.9% {
-    transform: scale(2);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-@keyframes blowUpContentTwo {
-  0% {
-    transform: scale(2);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-@keyframes blowUpModal {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-@keyframes blowUpModalTwo {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(0);
-    opacity: 0;
-  }
-}
-@keyframes roadRunnerIn {
-  0% {
-    transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
-  }
-  70% {
-    transform: translateX(30px) skewX(0deg) scaleX(0.9);
-  }
-  100% {
-    transform: translateX(0px) skewX(0deg) scaleX(1);
-  }
-}
-@keyframes roadRunnerOut {
-  0% {
-    transform: translateX(0px) skewX(0deg) scaleX(1);
-  }
-  30% {
-    transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
-  }
-  100% {
-    transform: translateX(1500px) skewX(30deg) scaleX(1.3);
-  }
-}
-@keyframes sketchIn {
-  0% {
-    stroke-dashoffset: 778;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-@keyframes sketchOut {
-  0% {
-    stroke-dashoffset: 0;
-  }
-  100% {
-    stroke-dashoffset: 778;
-  }
-}
-@keyframes modalFadeIn {
-  0% {
-    background-color: transparent;
-  }
-  100% {
-    background-color: white;
-  }
-}
-@keyframes modalFadeOut {
-  0% {
-    background-color: white;
-  }
-  100% {
-    background-color: transparent;
-  }
-}
-@keyframes modalContentFadeIn {
-  0% {
-    opacity: 0;
-    top: -20px;
-  }
-  100% {
-    opacity: 1;
-    top: 0;
-  }
-}
-@keyframes modalContentFadeOut {
-  0% {
-    opacity: 1;
-    top: 0px;
-  }
-  100% {
-    opacity: 0;
-    top: -20px;
-  }
-}
-@keyframes bondJamesBond {
-  0% {
-    transform: translateX(1000px);
-  }
-  80% {
-    transform: translateX(0px);
-    border-radius: 75px;
-    height: 75px;
-    width: 75px;
-  }
-  90% {
-    border-radius: 3px;
-    height: 182px;
-    width: 247px;
-  }
-  100% {
-    border-radius: 3px;
-    height: 162px;
-    width: 227px;
-  }
-}
-@keyframes killShot {
-  0% {
-    transform: translateY(0) rotate(0deg);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(300px) rotate(45deg);
-    opacity: 0;
-  }
-}
-@keyframes fadeToRed {
-  0% {
-    box-shadow: inset 0 0 0 rgba(201, 24, 24, 0.8);
-  }
-  100% {
-    box-shadow: inset 0 2000px 0 rgba(201, 24, 24, 0.8);
-  }
-}
-@keyframes slowFade {
-  0% {
-    opacity: 1;
-  }
-  99.9% {
-    opacity: 0;
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-</style>
-</head>
-
-<body>
-<div id="modal-container">
-  <div class="modal-background">
-    <div class="modal">
-      <h2>弹窗标题</h2>
-      <p>弹窗说明文字</p>
-      <svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
-			  <rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
-			</svg>
-    </div>
-  </div>
-</div>
-<div class="content">
-  <h1>7种效果的酷炫弹窗</h1>
-  <div class="buttons">
-    <div id="two" class="button">缩放遮罩</div>
-    <div id="three" class="button">底部滑入</div>
-    <div id="four" class="button">渐隐缩放</div><br>
-    <div id="five" class="button">左进右出</div>
-    <div id="six" class="button">画出窗口</div>
-    <div id="seven" class="button">由圆到方</div>
-  </div>
-</div>
-</body>
-</html>