libo
/
print-website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

no message

master
xpz2018 3 years ago
parent
d4df371680
commit
67b6d01a07
13 changed files with 221 additions and 30 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 106
      src/index.html
  2. 111
      src/skin/css/main.css
  3. BIN
      src/skin/images/close-bg.png
  4. BIN
      src/skin/images/close-d.png
  5. BIN
      src/skin/images/dialog-bg.png
  6. BIN
      src/skin/images/msg.png
  7. BIN
      src/skin/images/phone-bg.png
  8. BIN
      src/skin/images/phone.png
  9. BIN
      src/skin/images/success.png
  10. BIN
      src/skin/images/top.png
  11. BIN
      src/skin/images/wx-code.png
  12. BIN
      src/skin/images/wx.png
  13. 34
      src/skin/js/custom.js

106
src/index.html
View File

@ -168,7 +168,7 @@ jQuery(document).ready(function($){
<section class="no-padding" id="index-slider">
<div class="master-slider ms-skin-default has-thumbnails" id="main-slider">
<div class="ms-slide bg-pattern-clean" data-delay="7">
<div class="ms-slide bg-pattern-clean" data-delay="3">
<img src="./skin/images/blank.gif" data-src="./uploads/180512/1-1P512091151O7.png" alt="包装印刷以新、奇、特为特色"/>
<!-- <div class="ms-layer ms-layer-3 ms-text-1" data-type="text" data-effect="front(300)" data-duration="2000" data-ease="easeInOutQuint">
<div class="container text-center">
@ -180,7 +180,7 @@ jQuery(document).ready(function($){
</div> -->
<!-- <div class="ms-thumb"><img alt="智能包装一站式可视化交付平台" src="./uploads/180512/1-1P51209161D30.png"/></div> -->
</div>
<div class="ms-slide bg-pattern-clean" data-delay="7">
<div class="ms-slide bg-pattern-clean" data-delay="3">
<img src="./skin/images/blank.gif" data-src="./uploads/180512/1-1P51209161D30.png" alt="免费设计 免费打样 出货快 价格优"/>
<!-- <div class="ms-layer ms-layer-3 ms-text-1" data-type="text" data-effect="front(300)" data-duration="2000" data-ease="easeInOutQuint">
<div class="container text-center">
@ -264,14 +264,14 @@ jQuery(document).ready(function($){
<div role="tabpanel" class="tab-pane fade" id="tab2-content">
<a href="./skin/images/adv-2.jpg" data-lightbox="service-img2">
<img class="img-full" alt="先进的印刷设备" src="./skin/images/adv-1.png">
<img class="img-full" style="width: 470px;height: 530px;" alt="高品质印刷工厂" src="./skin/images/adv-1.png"/>
</a>
<!-- <p class="description"> 我们的印刷设备， 所有材料和油墨已经通过SGS环保认证，整个生产过程严格监控 ，确保产品的质量，减少经济成本，缩短交货周期，引进先进的生产设备 </p> -->
</div>
<div role="tabpanel" class="tab-pane fade" id="tab3-content">
<a href="./skin/images/adv-3.jpg" data-lightbox="service-img3">
<img class="img-full" alt="优质高效的一站式服务" src="./skin/images/adv-1.png">
<img class="img-full" style="width: 470px;height: 530px;" alt="高品质印刷工厂" src="./skin/images/adv-1.png"/>
</a>
<!-- <p class="description"> 在竞争激烈的市场中，我们秉持以, 诚信为导向，以质量和服务为核心 来赢得市场。 </p> -->
</div> </div>
@ -295,16 +295,16 @@ jQuery(document).ready(function($){
</div>
<div class="container">
<ul id="gallery-filter" class="list-filter" style="display: flex;">
<li style="font-size: 18px;padding-right:20px"><a href="./product/p1/index.html">茶叶包装</a></li>
<li style="font-size: 18px;padding:0px 15px 0px 5px"><a href="./product/p2/index.html">酒类包装</a></li>
<li style="font-size: 18px;padding:0px 5px 0px 15px"><a href="./product/p3/index.html">医疗保健包装</a></li>
<li style="font-size: 18px;padding:0px 5px 0px 15px"><a href="./product/p4/index.html">美妆护肤包装</a></li>
<li style="font-size: 18px;padding-right:20px"><a href="./product/index.html">茶叶包装</a></li>
<li style="font-size: 18px;padding:0px 15px 0px 5px"><a href="./product/index.html">酒类包装</a></li>
<li style="font-size: 18px;padding:0px 5px 0px 15px"><a href="./product/index.html">医疗保健包装</a></li>
<li style="font-size: 18px;padding:0px 5px 0px 15px"><a href="./product/index.html">美妆护肤包装</a></li>
</ul>
<ul id="gallery-filter" class="list-filter" style="display: flex">
<li style="font-size: 18px;padding-right:20px"><a href="./product/p1/index.html">3C数码包装</a></li>
<li style="font-size: 18px;padding:0px 15px 0px 5px"><a href="./product/p2/index.html">节日礼盒/礼品袋</a></li>
<li style="font-size: 18px;padding:0px 5px 0px 15px"><a href="./product/p3/index.html">纸箱包装</a></li>
<li style="font-size: 18px;padding:0px 5px 0px 15px"><a href="./product/p4/index.html">书刊画册</a></li>
<li style="font-size: 18px;padding-right:20px"><a href="./product/index.html">3C数码包装</a></li>
<li style="font-size: 18px;padding:0px 15px 0px 5px"><a href="./product/index.html">节日礼盒/礼品袋</a></li>
<li style="font-size: 18px;padding:0px 5px 0px 15px"><a href="./product/index.html">纸箱包装</a></li>
<li style="font-size: 18px;padding:0px 5px 0px 15px"><a href="./product/index.html">书刊画册</a></li>
</ul>
<div id="gallery" class="row gallery">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 grid-sizer"></div>
@ -314,8 +314,7 @@ jQuery(document).ready(function($){
<div class="gallery-item-detail-inner">
<div class="gallery-item-detail-content">
<div class="margin-40 gal-mtop"></div>
<h4><a class="bottom-line bottom-line-hover no-hover" href="../product/p1/26.html" title="产品名称五">产品名称五</a></h4>
<p class="iport-cate"><a href="../product/p1/">彩妆产品</a></p>
<h4><a class="bottom-line bottom-line-hover no-hover" href="../product/p1/26.html" title="茶叶包装">茶叶包装</a></h4>
</div>
</div>
</div>
@ -328,8 +327,7 @@ jQuery(document).ready(function($){
<div class="gallery-item-detail-inner">
<div class="gallery-item-detail-content">
<div class="margin-40 gal-mtop"></div>
<h4><a class="bottom-line bottom-line-hover no-hover" href="./product/p1/10.html" title="产品名称一">产品名称一</a></h4>
<p class="iport-cate"><a href="./product/p1/index.html">彩妆产品</a></p>
<h4><a class="bottom-line bottom-line-hover no-hover" title="产品名称一">酒类包装</a></h4>
</div>
</div>
</div>
@ -342,8 +340,8 @@ jQuery(document).ready(function($){
<div class="gallery-item-detail-inner">
<div class="gallery-item-detail-content">
<div class="margin-40 gal-mtop"></div>
<h4><a class="bottom-line bottom-line-hover no-hover" href="./product/p1/25.html" title="产品名称四">产品名称四</a></h4>
<p class="iport-cate"><a href="./product/p1/index.html">彩妆产品</a></p>
<h4><a class="bottom-line bottom-line-hover no-hover" title="产品名称四">医疗保健包装</a></h4>
<!-- <p class="iport-cate"><a href="./product/p1/index.html">彩妆产品</a></p> -->
</div>
</div>
</div>
@ -356,8 +354,7 @@ jQuery(document).ready(function($){
<div class="gallery-item-detail-inner">
<div class="gallery-item-detail-content">
<div class="margin-40 gal-mtop"></div>
<h4><a class="bottom-line bottom-line-hover no-hover" href="./product/p1/24.html" title="产品名称三">产品名称三</a></h4>
<p class="iport-cate"><a href="./product/p1/index.html">彩妆产品</a></p>
<h4><a class="bottom-line bottom-line-hover no-hover" title="产品名称三">美妆护肤包装</a></h4>
</div>
</div>
</div>
@ -370,8 +367,7 @@ jQuery(document).ready(function($){
<div class="gallery-item-detail-inner">
<div class="gallery-item-detail-content">
<div class="margin-40 gal-mtop"></div>
<h4><a class="bottom-line bottom-line-hover no-hover" href="../product/p1/23.html" title="产品名称二">产品名称二</a></h4>
<p class="iport-cate"><a href="./product/p1/index.html">彩妆产品</a></p>
<h4><a class="bottom-line bottom-line-hover no-hover" title="产品名称二">纸箱包装</a></h4>
</div>
</div>
</div>
@ -384,8 +380,7 @@ jQuery(document).ready(function($){
<div class="gallery-item-detail-inner">
<div class="gallery-item-detail-content">
<div class="margin-40 gal-mtop"></div>
<h4><a class="bottom-line bottom-line-hover no-hover" href="../product/p1/29.html" title="产品名称八">产品名称八</a></h4>
<p class="iport-cate"><a href="./product/p1/index.html">彩妆产品</a></p>
<h4><a class="bottom-line bottom-line-hover no-hover" title="产品名称八">书刊画册</a></h4>
</div>
</div>
</div>
@ -398,8 +393,7 @@ jQuery(document).ready(function($){
<div class="gallery-item-detail-inner">
<div class="gallery-item-detail-content">
<div class="margin-40 gal-mtop"></div>
<h4><a class="bottom-line bottom-line-hover no-hover" href="../product/p1/30.html" title="产品名称九">产品名称九</a></h4>
<p class="iport-cate"><a href="./product/p1/index.html">彩妆产品</a></p>
<h4><a class="bottom-line bottom-line-hover no-hover" title="产品名称九">3C数码包装</a></h4>
</div>
</div>
</div>
@ -412,8 +406,7 @@ jQuery(document).ready(function($){
<div class="gallery-item-detail-inner">
<div class="gallery-item-detail-content">
<div class="margin-40 gal-mtop"></div>
<h4><a class="bottom-line bottom-line-hover no-hover" href="../product/p1/28.html" title="产品名称七">产品名称七</a></h4>
<p class="iport-cate"><a href="./product/p1/index.html">彩妆产品</a></p>
<h4><a class="bottom-line bottom-line-hover no-hover" title="产品名称七">节日礼盒/礼品袋</a></h4>
</div>
</div>
</div>
@ -784,6 +777,63 @@ jQuery(document).ready(function($){
</div>
</footer>
</div>
<div class="scroll-tip">
<div id="wx-tip" style="display: flex;align-items: center; justify-content: center;width: 112px;height: 80px;background-color: white">
<img src="./skin/images/wx.png" width="43px" height="35px" />
<span style="margin-left:10px;font-size: 14px;"> 微信<br />咨询</span>
</div>
<div style="width: 112px;height: 1px;background-color: #0824F8;transform: scaleY(0.5);"></div>
<div id="phone-tip" style="display: flex;align-items: center; justify-content: center;width: 112px;height: 80px;background-color: white">
<img src="./skin/images/phone.png" width="35px" height="35px" />
<span style="margin-left:14px;font-size: 14px;"> 电话<br />咨询</span>
</div>
<div style="width: 112px;height: 1px;background-color: #0824F8;transform: scaleY(0.5);"></div>
<div id="zx-tp" style="display: flex;align-items: center; justify-content: center;width: 112px;height: 80px;background-color: white">
<img src="./skin/images/msg.png" width="35px" height="35px" />
<span style="margin-left:14px;font-size: 14px;"> 在线<br />咨询</span>
</div>
<div style="width: 112px;height: 1px;background-color: #0824F8;transform: scaleY(0.5);"></div>
<div id="tp-top" style="display: flex;align-items: center; justify-content: center;width: 112px;height: 80px;background-color: white">
<img src="./skin/images/top.png" width="35px" height="35px" />
<span style="margin-left:14px;font-size: 14px;"> 回到<br />顶部</span>
</div>
</div>
<div id="phone-toast" class="scroll-phone">153 6063 1530</div>
<div id="wx-toast" class="scroll-wx">
<img src="./skin/images/wx-code.png" width="323px" height="323px" />
</div>
<div id="dialog-tip" class="dialog-tip">
<div class="tp-dialog">
<div id="tp-close" class="tp-close">
<img src="./skin/images/close-d.png" width="20px" height="20px" />
</div>
<div id="tp-tip" class="tp-tip">
<img src="./skin/images/success.png" width="60px" height="60px" />
<div style="margin-top:18px">提交成功</div>
</div>
<div style="position: absolute;width: 420px;left: 248px;top: 60px;display: flex;align-items: center; justify-content: center;flex-direction: column;">
<div style="font-size:24px;line-height:20px;">在线咨询，获取优惠报价</div>
<div style="display: flex;margin-top: 36px;">
<div style="font-size: 18px;width: 80px;line-height: 45px;text-align:center;">姓名：</div>
<input type="text" placeholder="请输入" style="border: 1px solid #eaeaea;width: 360px;height: 45px;font-size: 16px"/>
</div>
<div style="display: flex;margin-top:0px;">
<div style="font-size: 18px;width: 80px;line-height: 45px;text-align:center;">电话：</div>
<input type="text" placeholder="请输入" style="border: 1px solid #eaeaea;width: 360px;height: 45px;font-size: 16px" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')"/>
</div>
<div style="display: flex;margin-top: 0px;">
<div style="font-size: 18px;width: 80px;line-height: 45px;text-align:center;">需求：</div>
<!-- <textarea placeholder="请输入" style="border: 1px solid #eaeaea;width: 360px;height: 45px;font-size: 16px"/> -->
<textarea class="tp-textarea" name="sign" rows="5" cols="30" placeholder="请输入"></textarea>
</div>
<div id="tp-submit" class="tp-submit">提交</div>
</div>
</div>
</div>
<script type="text/javascript" src="./skin/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="./skin/js/lightbox.min.js"></script>
<script type="text/javascript" src="./skin/js/jquery.easing.min.js"></script>

111
src/skin/css/main.css
View File

@ -3379,4 +3379,113 @@ textarea {
.pagess ul li.thisclass {display: inline-block;border: 1px solid #ccc;padding: 2px 9px;margin: 0 3px;background: #ccc;color: #fff;}
.pagess ul li.thisclass a {color: #fff;}
.pagess ul li a{ display:block;color:#999}
.pagess ul li a:hover {color: #fff;}
.pagess ul li a:hover {color: #fff;}
.scroll-phone{
position:fixed;
bottom: 282px;
right: 112px;
z-index: 100;
width: 328px;
height: 80px;
line-height: 80px;
background-color: #fff;
/* background-image: url('../images/phone-bg.png'); */
text-align: center;
font-size: 32px;
box-shadow:0px 3px 6px rgba(0, 0, 0, 0.16);
display: none;
}
.scroll-wx{
position:fixed;
bottom: 120px;
right: 112px;
z-index: 100;
background-color: #fff;
box-shadow:0px 3px 6px rgba(0, 0, 0, 0.16);
display: none;
}
.scroll-tip{
position:fixed;
bottom: 120px;
right: 0;
z-index: 100;
box-shadow:0px 3px 6px rgba(0, 0, 0, 0.16);
padding-left: 1px;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.dialog-tip{
width: 100vw;
height: 100vh;
z-index: 120;
position: fixed;
top: 0;
display: none;
align-items: center;
justify-content: center;
flex-direction:column;
}
.tp-dialog{
width: 918px;
height: 518px;
background-image: url('../images/dialog-bg.png');
position: relative;
}
.tp-close{
width: 63px;
height: 63px;
line-height: 63px;
position: absolute;
right: 20px;
top: 20px;
background-color: #fff;
background-image: url('../images/close-bg.png');
/* text-align: center; */
display: flex;
/* align-items: center; */
justify-content: center;
padding-top: 20px;
/* box-shadow:0px 3px 6px rgba(0, 0, 0, 0.16); */
}
.tp-textarea{
border: 1px solid #eaeaea;
width: 360px;
font-size: 16px;
max-width: 360px;
min-width: 360px;
max-height: 140px;
min-height: 140px;
}
.tp-submit{
font-size:20px;line-height:60px;border-radius:30px;background-color:#0824f8;color:white;width: 360px;text-align:center;margin-top: 16px;
}
.tp-tip{
color: white;
background-color: #99999999;
width: 160px;
height: 160px;
text-align: center;
border-radius: 15px;
font-size: 18px;
position: absolute;
left: 379px;
top: 120px;
z-index: 1000;
display:flex;
align-items: center;
justify-content: center;
flex-direction: column;
display: none;
}

BIN
src/skin/images/close-bg.png
View File

Before After
Width: 63  |  Height: 63  |  Size: 2.0 KiB

BIN
src/skin/images/close-d.png
View File

Before After
Width: 23  |  Height: 23  |  Size: 481 B

BIN
src/skin/images/dialog-bg.png
View File

Before After
Width: 918  |  Height: 518  |  Size: 12 KiB

BIN
src/skin/images/msg.png
View File

Before After
Width: 65  |  Height: 65  |  Size: 1.5 KiB

BIN
src/skin/images/phone-bg.png
View File

Before After
Width: 186  |  Height: 418  |  Size: 3.3 KiB

BIN
src/skin/images/phone.png
View File

Before After
Width: 65  |  Height: 65  |  Size: 1.8 KiB

BIN
src/skin/images/success.png
View File

Before After
Width: 128  |  Height: 128  |  Size: 4.6 KiB

BIN
src/skin/images/top.png
View File

Before After
Width: 65  |  Height: 65  |  Size: 1.6 KiB

BIN
src/skin/images/wx-code.png
View File

Before After
Width: 418  |  Height: 418  |  Size: 75 KiB

BIN
src/skin/images/wx.png
View File

Before After
Width: 65  |  Height: 53  |  Size: 1.8 KiB

34
src/skin/js/custom.js
View File

@ -239,11 +239,43 @@ $(document).ready(function(e) {
}
google.maps.event.addDomListener(window, 'load', mapInitialize);
}
});
$(window).load(function() {
$("#phone-tip").hover(function(){
$("#phone-toast").css("display", "block");
},function(){
$("#phone-toast").css("display", "none");
});
$("#wx-tip").hover(function(){
$("#wx-toast").css("display", "block");
},function(){
$("#wx-toast").css("display", "none");
});
$("#zx-tp").click(function(){
$("#dialog-tip").css("display", "flex");
});
$("#tp-close").click(function(){
$("#dialog-tip").css("display", "none");
});
$('#tp-top').click(function(){
$('body,html').animate({scrollTop:0}, 1000);
})
$('#tp-submit').click(function(){
$("#tp-tip").css("display", "flex");
setTimeout(function(){
$("#tp-tip").css("display", "none");
$("#dialog-tip").css("display", "none");
}, 800)
})
//remove page loader
$('#page-loader').removeClass('active');

Write Preview
Loading…
Cancel
Save