Skip to content

A
allCampaign
Commit dd93d0ff by Chao Sun
Options

分享按钮

parent 29625d27
Showing with 229 additions and 46 deletions
consulting/css/style.css
...@@ -36,8 +36,41 @@ input,button{ ...@@ -36,8 +36,41 @@ input,button{
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
background: #fff; background: #fff;
overflow: hidden;
position: relative; position: relative;
height:65px;
}
.footer .left{
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
width: 66.66666667%;
}
.footer .right{
width: 33.33333333%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
color: #fff;
font-size: 22px;
background: linear-gradient(270deg,#f10000,#ff4e18);
} }
.footer li{ .footer li{
color: #fe3400; color: #fe3400;
...@@ -46,26 +79,74 @@ input,button{ ...@@ -46,26 +79,74 @@ input,button{
align-items: center; align-items: center;
justify-content:center; justify-content:center;
} }
.footer li:nth-child(1){ .footer li.kefu_Wrapper{
flex: 0 0 18%; position: relative;
width: 80px;
height: 100%;
color: #ff3500;
font-size: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-right: 1px #dcdcdc solid; border-right: 1px #dcdcdc solid;
} }
.footer li:nth-child(2){ .footer li.share{
flex: 0 0 42%; display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 45%;
height: 100%;
color: #ff3500;
margin-right: 0;
border-right: 1px #dcdcdc solid;
font-size: 13px;
} }
.footer li:nth-child(3){ .footer li.peice_wrapper{
flex: 0 0 40%; display: none;
color: #fff; display: -webkit-box;
font-size: 22px; display: -ms-flexbox;
background: linear-gradient(270deg,#f10000,#ff4e18); display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 65%;
height: 100%;
color: #ff3500;
margin-right: 0;
} }
.footer li .icon{ .footer li.share img{
width: 50%; max-width: 45%;
margin-top: 15px;
} }
.footer li .kefu{ .footer li .kefu{
font-size: 13px; font-size: 13px;
margin-bottom: 15px;
color: #fe3400; color: #fe3400;
} }
.footer li .curPrice{ .footer li .curPrice{
......
consulting/index.html
...@@ -14,23 +14,27 @@ ...@@ -14,23 +14,27 @@
<div> <div>
<img src="./images/bg.png"> <img src="./images/bg.png">
</div> </div>
<div> <div class="footer">
<ul class="footer"> <ul class="left">
<li> <li class="kefu_Wrapper">
<a href="http://q.url.cn/abkzV9?_type=wpa&qidian=true" target="_blank" <a href="http://q.url.cn/abkzV9?_type=wpa&qidian=true" target="_blank"
style="display: contents"> style="display: contents">
<img class="icon" src="./images/icon.png" alt="icon" > <img class="icon" src="./images/icon.png" alt="icon" >
<div class="kefu">客服</div> <div class="kefu">客服</div>
</a> </a>
</li> </li>
<li> <li class="share" style="display: none;">
<img src="./images/share1.png" alt="share" />
<div>分享产品</div>
</li>
<li class="peice_wrapper">
<div class="curPrice"><span>￥</span>49</div> <div class="curPrice"><span>￥</span>49</div>
<div class="price">原价:<span>￥</span>199/年</div> <div class="price">原价:<span>￥</span>199/年</div>
</li> </li>
<li class="order">
立即购买
</li>
</ul> </ul>
<div class="right">
立即购买
</div>
</div> </div>
<div class="modalBox"> <div class="modalBox">
<div class='inputBox'> <div class='inputBox'>
......
consulting/js/base.js
...@@ -326,20 +326,23 @@ $(function () { ...@@ -326,20 +326,23 @@ $(function () {
document.getElementById('submit').click() document.getElementById('submit').click()
} }
} }
isWeiXin()
function isWeiXin() { function isWeiXin() {
var ua = window.navigator.userAgent.toLowerCase(); var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') { if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
$('.share').show()
return true; return true;
} else { } else {
$(".share").hide()
return false; return false;
} }
} }
getWxConfig(); // getWxConfig();
// 获取微信分享配置 // 获取微信分享配置
function getWxConfig() { function getWxConfig() {
var url = location.href.split('#')[0]; var url = location.href.split('#')[0];
console.log(1)
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: api + '/api/wxConfig', url: api + '/api/wxConfig',
...@@ -372,4 +375,7 @@ $(function () { ...@@ -372,4 +375,7 @@ $(function () {
} }
}) })
} }
$('.share').click(function(){
getWxConfig()
})
}); });
\ No newline at end of file
consulting1/css/style.css
...@@ -36,8 +36,41 @@ input,button{ ...@@ -36,8 +36,41 @@ input,button{
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
background: #fff; background: #fff;
overflow: hidden;
position: relative; position: relative;
height:65px;
}
.footer .left{
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
width: 66.66666667%;
}
.footer .right{
width: 33.33333333%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
color: #fff;
font-size: 22px;
background: linear-gradient(270deg,#f10000,#ff4e18);
} }
.footer li{ .footer li{
color: #fe3400; color: #fe3400;
...@@ -46,26 +79,74 @@ input,button{ ...@@ -46,26 +79,74 @@ input,button{
align-items: center; align-items: center;
justify-content:center; justify-content:center;
} }
.footer li:nth-child(1){ .footer li.kefu_Wrapper{
flex: 0 0 18%; position: relative;
width: 80px;
height: 100%;
color: #ff3500;
font-size: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-right: 1px #dcdcdc solid; border-right: 1px #dcdcdc solid;
} }
.footer li:nth-child(2){ .footer li.share{
flex: 0 0 42%; display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 45%;
height: 100%;
color: #ff3500;
margin-right: 0;
border-right: 1px #dcdcdc solid;
font-size: 13px;
} }
.footer li:nth-child(3){ .footer li.peice_wrapper{
flex: 0 0 40%; display: none;
color: #fff; display: -webkit-box;
font-size: 22px; display: -ms-flexbox;
background: linear-gradient(270deg,#f10000,#ff4e18); display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 65%;
height: 100%;
color: #ff3500;
margin-right: 0;
} }
.footer li .icon{ .footer li.share img{
width: 50%; max-width: 45%;
margin-top: 15px;
} }
.footer li .kefu{ .footer li .kefu{
font-size: 13px; font-size: 13px;
margin-bottom: 15px;
color: #fe3400; color: #fe3400;
} }
.footer li .curPrice{ .footer li .curPrice{
......
consulting1/index.html
...@@ -14,23 +14,27 @@ ...@@ -14,23 +14,27 @@
<div> <div>
<img src="./images/bg_toutiao.png"> <img src="./images/bg_toutiao.png">
</div> </div>
<div> <div class="footer">
<ul class="footer"> <ul class="left">
<li> <li class="kefu_Wrapper">
<a href="http://q.url.cn/abkzV9?_type=wpa&qidian=true" target="_blank" <a href="http://q.url.cn/abkzV9?_type=wpa&qidian=true" target="_blank"
style="display: contents"> style="display: contents">
<img class="icon" src="./images/icon.png" alt="icon" > <img class="icon" src="./images/icon.png" alt="icon" >
<div class="kefu">客服</div> <div class="kefu">客服</div>
</a> </a>
</li> </li>
<li> <li class="share" style="display: none;">
<img src="./images/share1.png" alt="share" />
<div>分享产品</div>
</li>
<li class="peice_wrapper">
<div class="curPrice"><span>￥</span>49</div> <div class="curPrice"><span>￥</span>49</div>
<div class="price">原价:<span>￥</span>199/年</div> <div class="price">原价:<span>￥</span>199/年</div>
</li> </li>
<li class="order">
立即购买
</li>
</ul> </ul>
<div class="right">
立即购买
</div>
</div> </div>
<div class="modalBox"> <div class="modalBox">
<div class='inputBox'> <div class='inputBox'>
......
consulting1/js/base.js
...@@ -325,16 +325,18 @@ $(function () { ...@@ -325,16 +325,18 @@ $(function () {
document.getElementById('submit').click() document.getElementById('submit').click()
} }
} }
isWeiXin()
function isWeiXin() { function isWeiXin() {
var ua = window.navigator.userAgent.toLowerCase(); var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') { if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
$('.share').show()
return true; return true;
} else { } else {
$(".share").hide()
return false; return false;
} }
} }
getWxConfig(); // getWxConfig();
// 获取微信分享配置 // 获取微信分享配置
function getWxConfig() function getWxConfig()
{ {
...@@ -371,4 +373,7 @@ $(function () { ...@@ -371,4 +373,7 @@ $(function () {
} }
}) })
} }
$('.share').click(function(){
getWxConfig()
})
}); });
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment