lilei 4 лет назад
Родитель
Сommit
e38a4e1a81

BIN
新模板/开业活动39.9/example.jpg


BIN
新模板/开业活动39.9/hdthem.zip


BIN
新模板/开业活动39.9/img/activeBg.jpg


BIN
新模板/开业活动39.9/img/hdnr.png


BIN
新模板/开业活动39.9/img/headBg.jpg


+ 115 - 45
新模板/开业活动39.9/index.html

@@ -29,38 +29,55 @@
 							<p>[<span>长青二路店</span>]</p>
 						</div>
 						<div class="active-time">
-							活动时间:2020-11-28 至 2020-12-28
+							活动时间:2020年11月28日 — 2020年12月28日
 						</div>
 					</div>
 				</div>
 				<div class="zy-h5-main-active">
 					<!-- 活动内容 -->
 					<div class="zy-h5-active">
-						<div class="img-hdnr">套餐活动价:<span>39.9</span>元</div>
-						<div class="active-content">
-							<div class="active-item">
-								<div>顶级打蜡一次</div>
-								<div>门店价:<span>45</span>元</div>
-							</div>
-							<div class="active-item">
-								<div>精致洗车一次</div>
-								<div>门店价:<span>125</span>元</div>
+						<div class="img-hdnr">
+						  <img src="./img/hdnr.png">
+						  <div class="hdnr-text">
+							<div class="a-text">
+								<div class="a-text-1">原价563元</div>
+								<div class="a-text-2">抢购价</div>
 							</div>
-							<div class="active-item">
-								<div>内饰深度清洁</div>
-								<div>门店价:<span>120</span>元</div>
+							<div class="b-text">
+								<span>39.9</span>元
 							</div>
-							<div class="active-item">
-								<div>节气门清洗一次</div>
-								<div>门店价:<span>120</span>元</div>
+						  </div>
+						</div>
+						<div class="active-content">
+							<div class="ac-list">
+								<div class="active-item">
+									<div>顶级打蜡一次</div>
+									<div>原价<span>45</span>元</div>
+								</div>
+								<div class="active-item">
+									<div>精致洗车一次</div>
+									<div>原价<span>125</span>元</div>
+								</div>
+								<div class="active-item">
+									<div>内饰深度清洁</div>
+									<div>原价<span>120</span>元</div>
+								</div>
+								<div class="active-item">
+									<div>节气门清洗一次</div>
+									<div>原价<span>120</span>元</div>
+								</div>
+								<div class="active-item">
+									<div>26项安全检测一次</div>
+									<div>原价<span>158</span>元</div>
+								</div>
 							</div>
-							<div class="active-item">
-								<div>26项安全检测一次</div>
-								<div>门店价:<span>158</span>元</div>
+							<div class="ac-list-price">
+								<div class="price-a1">原价563元</div>
+								<div class="price-a2">抢购价39.9元</div>
 							</div>
 						</div>
-						<div class="active-zy">注:所有活动最终解释权归门店所有</div>
 					</div>
+					<div class="active-zy">注:所有活动最终解释权归门店所有</div>
 				</div>
 			</div>
 			 
@@ -276,7 +293,7 @@
 			margin: 0 0.2em;
 		}
 		.active-time{
-			width: 65%;
+			width: 75%;
 			margin:0 auto;
 			background: #ff7f00;
 			color: #ffff;
@@ -286,58 +303,105 @@
 		}
 		.zy-h5-main-active{
 			background: #c01b39 url('./img/activeBg.jpg') no-repeat left top;
+			background-size: 100%;
 		}
 		.zy-h5-active{
 			width:100%;
 			color: #fff;
 			position:relative;
-			padding-top: 1.5em;
 		}
 		.img-hdnr{
+			position: relative;
+			width: 42%;
+		}
+		.img-hdnr > img{
+			width:100%;
+		}
+		.img-hdnr > div{
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			position: absolute;
 			left: 0;
 			top: 0;
-			background-image: linear-gradient(45deg,#fcc32c,#ff7f00);
-			border-radius: 0 100px 100px 0;
+		}
+		.hdnr-text{
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			padding: 0.3em 1.5em 0.3em 1em;
-			box-shadow: 0.1em 0.2em 0.3em #96172c;
+			width: 100%;
+			padding-top:0.1em;
+			font-weight:900;
+		}
+		.a-text-1{
+			font-size:0.6em;
 		}
-		.img-hdnr span{
-			font-size: 1.6em;
+		.a-text-2{
+			font-size:1.2em;
+			text-align: right;
+		}
+		.b-text{
+			font-weight:900;
+		}
+		.b-text span{
+			font-size:2em;
 		}
 		.active-content {
-			padding: 2em 2em 1em;
-			border: 0.3em solid #f39501;
-			width: 75%;
-			margin: 0 auto;
+			border: 0.3em solid #c96177;
+			width: 80%;
+			margin: 0.5em auto 0;
 			border-radius: 1em;
+			display: flex;
+			align-items: center;
+			background: #da919e;
+			color: #000;
+		}
+		.ac-list{
 			font-size: 0.8em;
+			flex-grow:1;
 		}
-		.active-content .active-item{
+		.ac-list .active-item{
 			display: flex;
 			align-items:center;
+			border-bottom: 1px solid #b31d38;
+		}
+		.ac-list .active-item:last-child{
+			border:0;
+		}
+		.ac-list .active-item > div{
+			border-right: 1px solid #b31d38;
+			text-align:center;
+			height: 2.5em;
+			line-height: 2.5em;
 		}
-		.active-content .active-item > div:first-child{
+		.ac-list .active-item > div:first-child{
 			width: 60%;
-			padding: 0.3em 0.5em;
-			font-size: 1.2em;
 		}
-		.active-content .active-item > div:last-child{
+		.ac-list .active-item > div:last-child{
 			width:40%;
 		}
-		.active-content .active-item > div:last-child span{
-			font-size: 1.3em;
-			color: #fdcc72;
+		.ac-list .active-item > div:last-child span{
 			margin-right:0.1em;
 		}
-		.active-zy{
+		.ac-list-price{
+			padding: 0.5em;
 			text-align:center;
-			padding: 1em 0;
+			font-weight: 900;
+		}
+		.price-a1{
 			font-size: 0.8em;
 		}
+		.price-a2{
+			font-size: 1em;
+			color: #b31d38;
+			margin-top:0.2em;
+		}
+		.active-zy{
+			text-align:center;
+			padding: 1.2em 0 2em;
+			font-size: 0.6em;
+			color: #fff;
+		}
 		 
 		/*门店信息样式*/
 		.zy-h5-store-info{
@@ -552,14 +616,20 @@
 			top: 25px!important;
 		}
 		
-		@media screen and (max-width: 360px) and (min-width: 321) {
+		
+		@media screen and (max-width: 375px) {
 		    body{font-size: 14px}
+			.active-content{
+				width: 85%;
+			}
 		}
-		
 		@media screen and (max-width: 320px) {
 		    body{font-size: 12px}
 			.active-time{
-				width: 80%;
+				width: 85%;
+			}
+			.active-content{
+				width: 90%;
 			}
 		}
 	</style>

+ 1 - 1
新模板/开业活动39.9/script.js

@@ -250,7 +250,7 @@ window.onload = function(){
 			success: function (res) {
 				if(res.status == 200){
 					const data = res.data.list
-					let html = `<div class="kh-list-tr">
+					let html = `<div class="kh-list-tr kh-list-tr-head">
 							<div class="kh-list-td">手机号</div>
 							<div class="kh-list-td">报名状态</div>
 						</div>`

+ 217 - 179
新模板/开业活动39.9/tpl.html

@@ -7,14 +7,14 @@
 		<meta http-equiv="pragram" content="no-cache">
 		<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
 		<meta http-equiv="expires" content="0">
-		<title>${active.name!}</title>
+		<title></title>
 	</head>
 	<body>
 		<div class="wrapper">
 			<!-- 模板 -->
 			<div class="zy-h5-page">
 				<!-- 倒计时 -->
-				<div class="countdown-box" id="dateShow1" data-date="2020-12-20 23:59:59">
+				<div class="countdown-box" id="dateShow1" data-date="2020-12-28 23:59:59">
 					<span class="countdown-des">距离活动结束还有:</span><span class="date-time d">00</span>天
 					<span class="date-time h">00</span>时
 					<span class="date-time m">00</span>分
@@ -26,42 +26,52 @@
 					<div class="zy-h5-title">
 						<img class="img-title" src="${active.staticMouldTheme.basePath}/img/title.png">
 						<div class="store-name">
-							<p>[<span id="store-head">XXX汽车服务中心</span>]</p>
+							<p>[<span id="store-head">--</span>]</p>
 						</div>
 						<div class="active-time">
-							活动时间:2020-11-20 至 2020-12-20
+							活动时间:2020年11月28日 — 2020年12月28日
 						</div>
 					</div>
+				</div>
+				<div class="zy-h5-main-active">
+					<#list active.parentItemList as parentItem>	
 					<!-- 活动内容 -->
 					<div class="zy-h5-active">
-						<img class="img-hdnr" src="${active.staticMouldTheme.basePath}/img/hdnr.png">
+						<div class="img-hdnr">
+						  <img src="${active.staticMouldTheme.basePath}/img/hdnr.png">
+						  <div class="hdnr-text">
+							<div class="a-text">
+								<div class="a-text-1">原价${parentItem.itemSrcPrice!}元</div>
+								<div class="a-text-2">抢购价</div>
+							</div>
+							<div class="b-text">
+								<span>${parentItem.itemActivePrice!}</span>元
+							</div>
+						  </div>
+						</div>
 						<div class="active-content">
-							<p>1.首次进店洗车15元;</p>
-							<p>2.首次进店保养就送一次
-								<#list active.parentItemList as parentItem>
-									<#list parentItem.children as childItem>
-										<#if childItem_index gt 0>+</#if>${childItem.itemName!}
-									</#list>
-								</#list>;
-							</p>
-							<p>3.办套餐卡就送60元保养代金券;</p>
-							<p>4.转介绍3个新客户,享受免费车内清洁一次;介绍5个以上客户,享受免费顶级打蜡一次;</p>
-							<p>5.全场所有项目均8.5折;</p>
+							<div class="ac-list">
+								<#list parentItem.children as childItem>
+									<div class="active-item">
+										<div>${childItem.itemName!}${childItem.itemNum}次</div>
+										<div>原价<span>${childItem.itemSrcPrice!}</span>元</div>
+									</div>
+								</#list>
+							</div>
+							<div class="ac-list-price">
+								<div class="price-a1">原价${parentItem.itemSrcPrice!}元</div>
+								<div class="price-a2">抢购价${parentItem.itemActivePrice!}元</div>
+							</div>
 						</div>
-						<div class="active-zy">注:所有活动最终解释权归门店所有</div>
 					</div>
+					</#list>
+					<div class="active-zy">注:所有活动最终解释权归门店所有</div>
 				</div>
 			</div>
 
 			<!--门店信息-->
 			<div class="zy-h5-store-info">
 				<div class="store-info-cont">
-					<div class="store-info-box">
-						<span>活动时间:</span>
-						<span id="activeTime">
-							2020-11-20 至 2020-12-20
-						</span>
-					</div>
 					<div class="store-info-box">
 						<span>门店名称:</span>
 						<span id="store">XXX汽车服务中心</span>
@@ -196,245 +206,271 @@
 		</div>
 	</body>
 	<style>
-		* {
+		*{
 			padding: 0;
 			margin: 0;
+	    }
+		body{
+			font: 16px/1.231 "Microsoft Yahei","Helvetica Neue",Helvetica Neue,Helvetica,Arial,Lantinghei SC,Hiragino Sans GB,sans-serif,Times New Roman;
 		}
-
-		@media screen and (max-width: 360px) and (min-width: 321) {
-			body {
-				font-size: 14px
-			}
-		}
-
-		@media screen and (max-width: 320px) {
-			body {
-				font-size: 12px
-			}
-		}
-
-		.wrapper {
+		
+		.wrapper{
 			position: relative;
 		}
-
 		/*模板样式*/
-		.countdown-box {
+		.countdown-box{
 			color: #fff;
 			text-align: center;
 			padding: 10px 0;
-			background: crimson;
+			background: #bc1c38;
 		}
-
-		.countdown-des {
+		.countdown-des{
 			font-size: 13px;
 		}
-
-		.zy-h5-main {
+		.zy-h5-main{
 			position: relative;
-			padding-bottom: 7em;
+			overflow: hidden;
 			background: #c01b39;
 		}
-
-		.zy-h5-bgimg {
+		.zy-h5-bgimg{
 			width: 100%;
+			float:left;
 		}
-
-		.zy-h5-title {
+		.zy-h5-title{
 			position: absolute;
-			left: 0;
-			top: 8%;
-			text-align: center;
+			left:0;
+			top:8%;
+			text-align:center;
 			width: 100%;
 			color: #fff;
 		}
-
-		.img-title {
-			width: 58%;
+		.img-title{
+			width: 50%;
 		}
-
-		.store-name {
+		.store-name{
 			font-size: 1em;
-			display: flex;
+			display:flex;
 			align-items: center;
-			text-align: center;
+			text-align:center;
 			justify-content: center;
-			margin-bottom:0.5em;
-			margin-top: 0em;
-			font-weight: bold;
+			margin-bottom:1em;
+			margin-top: 0.3em;
+			font-weight:bold;
 		}
-
-		.store-name span {
+		.store-name span{
 			font-size: 1.2em;
 			margin: 0 0.2em;
 		}
-
-		.active-time {
-			width: 70%;
-			margin: 0 auto;
+		.active-time{
+			width: 75%;
+			margin:0 auto;
 			background: #ff7f00;
 			color: #ffff;
 			padding: 0.3em;
 			border-radius: 0.3em;
 			font-size: 0.8em;
 		}
-
-		.zy-h5-active {
-			width: 100%;
-			position: absolute;
-			left: 0;
-			bottom: 1em;
+		.zy-h5-main-active{
+			background: #c01b39 url('${active.staticMouldTheme.basePath}/img/activeBg.jpg') no-repeat left top;
+			background-size: 100%;
+		}
+		.zy-h5-active{
+			width:100%;
 			color: #fff;
-			padding-top: 1.4em;
+			position:relative;
 		}
-
-		.img-hdnr {
-			width: 35%;
+		.img-hdnr{
+			position: relative;
+			width: 42%;
+		}
+		.img-hdnr > img{
+			width:100%;
+		}
+		.img-hdnr > div{
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			position: absolute;
 			left: 0;
 			top: 0;
 		}
-
+		.hdnr-text{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			padding-top:0.1em;
+			font-weight:900;
+		}
+		.a-text-1{
+			font-size:0.6em;
+		}
+		.a-text-2{
+			font-size:1.2em;
+			text-align: right;
+		}
+		.b-text{
+			font-weight:900;
+		}
+		.b-text span{
+			font-size:2em;
+		}
 		.active-content {
-			padding: 1em 2em 0.5em;
-			border: 0.3em solid #f39501;
-			width: 75%;
-			margin: 0 auto;
+			border: 0.3em solid #c96177;
+			width: 80%;
+			margin: 0.5em auto 0;
 			border-radius: 1em;
-			font-size: 0.9em;
+			display: flex;
+			align-items: center;
+			background: #da919e;
+			color: #000;
 		}
-
-		.active-content p {
-			margin: 0.8em 0;
+		.ac-list{
+			font-size: 0.8em;
+			flex-grow:1;
 		}
-
-		.active-zy {
-			text-align: center;
-			padding: 1em 0;
+		.ac-list .active-item{
+			display: flex;
+			align-items:center;
+			border-bottom: 1px solid #b31d38;
+		}
+		.ac-list .active-item:last-child{
+			border:0;
+		}
+		.ac-list .active-item > div{
+			border-right: 1px solid #b31d38;
+			text-align:center;
+			height: 2.5em;
+			line-height: 2.5em;
+		}
+		.ac-list .active-item > div:first-child{
+			width: 60%;
+		}
+		.ac-list .active-item > div:last-child{
+			width:40%;
+		}
+		.ac-list .active-item > div:last-child span{
+			margin-right:0.1em;
+		}
+		.ac-list-price{
+			padding: 0.5em;
+			text-align:center;
+			font-weight: 900;
+		}
+		.price-a1{
 			font-size: 0.8em;
 		}
-
+		.price-a2{
+			font-size: 1em;
+			color: #b31d38;
+			margin-top:0.2em;
+		}
+		.active-zy{
+			text-align:center;
+			padding: 1.2em 0 2em;
+			font-size: 0.6em;
+			color: #fff;
+		}
+		 
 		/*门店信息样式*/
-		.zy-h5-store-info {
+		.zy-h5-store-info{
 			/* display: none; */
 		}
-
-		.zy-h5-store-info>.store-info-cont {
+		.zy-h5-store-info > .store-info-cont{
 			padding: 1em;
 			font-size: 15px;
 		}
-
-		.zy-h5-store-info>.store-info-cont>.store-info-box {
+		.zy-h5-store-info > .store-info-cont > .store-info-box{
 			padding: 0.5em 0;
 			border-bottom: 0.1em solid #eee;
 			display: flex;
 			align-items: center;
 		}
-
-		.zy-h5-store-info>.store-info-cont>.store-info-box span:first-child {
-			font-weight: bold;
+		.zy-h5-store-info > .store-info-cont > .store-info-box span:first-child{
+			font-weight:bold;
 			width: 80px;
 		}
-
-		.zy-h5-store-info>.store-info-cont>.store-info-box span:last-child {
+		.zy-h5-store-info > .store-info-cont > .store-info-box span:last-child{
 			line-height: 1.5em;
 			display: flex;
 			align-items: center;
 		}
-
-		.zy-h5-store-info>.store-info-cont>.store-info-box span:last-child a {
+		.zy-h5-store-info > .store-info-cont > .store-info-box span:last-child a{
 			color: #000;
 			text-decoration: none;
 		}
-
-		.zy-h5-gz {
+		.zy-h5-gz{
 			padding: 0.5em;
 			border-top: 0.6em solid #ededed;
 		}
-
-		.zy-h5-gz>div:first-child {
+		.zy-h5-gz > div:first-child{
 			font-size: 0.8em;
 		}
-
-		.zy-headPhoto-list {
+		.zy-headPhoto-list{
 			padding: 0.5em 0.2em;
 			overflow: hidden;
 		}
-
-		.zy-headPhoto-list>div {
-			width: 2em;
-			height: 2em;
-			overflow: hidden;
+		.zy-headPhoto-list > div{
+			width: 35px;
+			height: 35px;
+			overflow:hidden;
 			border-radius: 10em;
 			margin: 0.2em;
 			float: left;
 		}
-
-		.zy-headPhoto-list>div img {
+		.zy-headPhoto-list > div img{
 			width: 100%;
 			height: 100%;
 		}
-
-		.zy-h5-store-info>.qg-cont {
+		.zy-h5-store-info >.qg-cont{
 			padding: 0.5em;
 			border-top: 0.6em solid #ededed;
 		}
-
-		.zy-h5-store-info .header-con {
+		.zy-h5-store-info .header-con{
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			background: #f8f8f8;
 		}
-
-		.zy-h5-store-info .header-con>p {
+		.zy-h5-store-info .header-con > p{
 			font-size: 1.2em;
 			margin: 0;
 			padding: 10px 0 8px;
 		}
-
-		.zy-h5-store-info .header-con>p:first-child {
+		.zy-h5-store-info .header-con > p:first-child{
 			font-weight: bold;
 			position: relative;
 			padding-left: 10px;
-		}
-
-		.zy-h5-store-info .header-con>p:first-child span {
+		} 
+		.zy-h5-store-info .header-con > p:first-child span{
 			color: red;
 		}
-
-		.kh-list {
-			padding: 0 0.5em;
+		
+		.kh-list{
+			padding:0 0.5em;
 		}
-
-		.kh-list-tr {
+		.kh-list-tr{
 			display: flex;
-			align-items: center;
+			align-items:center;
 			justify-content: center;
 			border-bottom: 0.1em solid #eee;
 		}
-
-		.kh-list-td {
+		.kh-list-td{
 			width: 50%;
 			padding: 0.8em 0.5em;
 			text-align: center;
 		}
-
-		.kh-list-tr-head {
-			font-weight: bold;
-		}
-
-		.zy-h5-store-info #tel {
+		 
+		.zy-h5-store-info #tel{
 			font-style: initial;
 		}
-
 		/*底部栏样式*/
-		.zy-h5-fx-bar {
+		.zy-h5-fx-bar{
 			height: 7em;
 		}
-
-		.zy-h5-bf-bar {
+		.zy-h5-bf-bar{
 			width: 100%;
-			padding: 0.5em;
+			padding:0.5em;
 			background: #fff;
 			display: flex;
 			align-items: center;
@@ -445,8 +481,7 @@
 			z-index: 1000;
 			box-sizing: border-box;
 		}
-
-		.zy-h5-bf-bar>span {
+		.zy-h5-bf-bar > span{
 			flex-grow: 1;
 			padding: 0.8em 0.6em;
 			font-size: 1em;
@@ -458,38 +493,33 @@
 			justify-content: center;
 			min-width: 76px;
 		}
-
-		.zy-h5-bf-bar>span span {
+		.zy-h5-bf-bar > span span{
 			margin-right: 0.5em;
 		}
-
 		.zy-h5-yuyue {
 			color: #fff;
 			background: #32CD32;
 			border-radius: 100px;
 			text-align: center;
 		}
-
 		.zy-h5-share {
 			color: #fff;
 			background: #ff5500;
 			border-radius: 100px;
 			text-align: center;
 		}
-
 		/*预约弹框样式*/
-		.zy-h5-fix-z {
+		.zy-h5-fix-z{
 			width: 100%;
 			height: 100%;
 			position: fixed;
 			top: 0;
 			left: 0;
-			background: rgba(0, 0, 0, 0.5);
+			background: rgba(0,0,0,0.5);
 			display: none;
 			z-index: 5000;
 		}
-
-		.zy-h5-modal {
+		.zy-h5-modal{
 			background: #fff;
 			border-radius: 5px;
 			overflow: hidden;
@@ -502,23 +532,19 @@
 			border: 1px solid #eee;
 			display: none;
 		}
-
-		.zy-h5-modal-title {
+		.zy-h5-modal-title{
 			padding: 10px;
 			text-align: center;
 			border-bottom: 1px solid #EEEEEE;
 		}
-
-		.zy-h5-modal-content {
+		.zy-h5-modal-content{
 			padding: 15px;
 			text-align: center;
 		}
-
-		.zy-h5-modal-form {
+		.zy-h5-modal-form{
 			margin: 10px 0 30px;
 		}
-
-		.zy-h5-modal-form input {
+		.zy-h5-modal-form input{
 			padding: 10px;
 			border: 1px solid #eee;
 			width: 90%;
@@ -526,28 +552,24 @@
 			font-size: 13px;
 			line-height: 1.5em;
 		}
-
-		.zy-h5-modal-content p button {
+		.zy-h5-modal-content p button{
 			border-radius: 10px;
 			padding: 7px 25px;
 			margin: 0 18px;
 			font-size: 1em;
 		}
-
-		.zy-h5-modal-submit {
+		.zy-h5-modal-submit{
 			background: #378BEA;
 			color: #fff;
 			border: 1px solid #378BEA;
 		}
-
-		.zy-h5-modal-cansel {
+		.zy-h5-modal-cansel{
 			background: #ffffff;
 			color: #666;
 			border: 1px solid #eee;
 		}
-
 		/* 加载中 */
-		#foo {
+		#foo{
 			width: 50px;
 			height: 50px;
 			position: fixed;
@@ -556,10 +578,26 @@
 			margin: -25px 0 0 -25px;
 			z-index: 5001;
 		}
-
-		.spinner {
-			left: 25px !important;
-			top: 25px !important;
+		.spinner{
+			left: 25px!important;
+			top: 25px!important;
+		}
+		
+		
+		@media screen and (max-width: 375px) {
+		    body{font-size: 14px}
+			.active-content{
+				width: 85%;
+			}
+		}
+		@media screen and (max-width: 320px) {
+		    body{font-size: 12px}
+			.active-time{
+				width: 85%;
+			}
+			.active-content{
+				width: 90%;
+			}
 		}
 	</style>
 	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

BIN
新模板/开业活动39.9/海报生成分享图11.jpg