Commit f81a2db0 by Chao Sun

分享

parent b1dd8f05
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
...@@ -9,9 +10,10 @@ ...@@ -9,9 +10,10 @@
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>獴哥保险诊所</title> <title>獴哥保险诊所</title>
<link rel="stylesheet" href="./css/style.css" /> <link rel="stylesheet" href="./css/style.css" />
<!--Shortcut icon--> <!--Shortcut icon-->
<link rel="shortcut icon" href="https://www.ydinsurance.cn/wp-content/uploads/2018/04/favicon.gif" /> <link rel="shortcut icon" href="https://www.ydinsurance.cn/wp-content/uploads/2018/04/favicon.gif" />
</head> </head>
<body> <body>
<div> <div>
<img src="./images/bg.png"> <img src="./images/bg.png">
...@@ -20,13 +22,13 @@ ...@@ -20,13 +22,13 @@
<ul class="left"> <ul class="left">
<li class="kefu_Wrapper"> <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">
<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 class="share" style="display: none;"> <li class="share" style="display: none;">
<img src="./images/share1.png" alt="share" /> <img src="./images/share1.png" alt="share" />
<div>分享产品</div> <div>分享产品</div>
</li> </li>
<li class="peice_wrapper"> <li class="peice_wrapper">
<div class="curPrice"><span></span>49</div> <div class="curPrice"><span></span>49</div>
...@@ -66,8 +68,8 @@ ...@@ -66,8 +68,8 @@
<div class="guideImgBox"> <div class="guideImgBox">
<img src="./images/tips.png" alt="提示"> <img src="./images/tips.png" alt="提示">
<div class="tipsToast"> <div class="tipsToast">
<p>请点击右上角菜单</p> <p>请点击右上角菜单</p>
<p>分享给朋友</p> <p>分享给朋友</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -98,16 +100,17 @@ ...@@ -98,16 +100,17 @@
<script src="./js/base.js"></script> <script src="./js/base.js"></script>
<script> <script>
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function() { (function () {
const host = window.location.host; const host = window.location.host;
var hm = document.createElement("script"); var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?36b1eb7eec3b5dac9f97d887092b5b27"; hm.src = "https://hm.baidu.com/hm.js?36b1eb7eec3b5dac9f97d887092b5b27";
if(host=='www.ydinsurance.cn'){ if (host == 'www.ydinsurance.cn') {
hm.src = "https://hm.baidu.com/hm.js?73a2215476525c6142927963135662e0"; hm.src = "https://hm.baidu.com/hm.js?73a2215476525c6142927963135662e0";
} }
var s = document.getElementsByTagName("script")[0]; var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s); s.parentNode.insertBefore(hm, s);
})(); })();
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
*{margin:0;padding:0;} * {
html,body{ margin: 0;
width:100%; padding: 0;
height:auto; }
html, body {
width: 100%;
height: auto;
min-width: 320px; min-width: 320px;
max-width: 640px; max-width: 640px;
margin:0 auto; margin: 0 auto;
font-family: -apple-system, font-family: -apple-system,
BlinkMacSystemFont, BlinkMacSystemFont,
"Segoe UI", "Segoe UI",
Roboto, Roboto,
"Helvetica Neue", "Helvetica Neue",
Helvetica, Helvetica,
"PingFang SC", "PingFang SC",
"Hiragino Sans GB", "Hiragino Sans GB",
"Microsoft YaHei", "Microsoft YaHei",
SimSun, SimSun,
sans-serif; sans-serif;
} }
a{
a {
text-decoration: none; text-decoration: none;
} }
img{
max-width:100%; img {
max-width: 100%;
display: block; display: block;
} }
ul,ol,li{
ul, ol, li {
list-style: none; list-style: none;
} }
input,button{
background:none; input, button {
outline:none; background: none;
border:0px; outline: none;
border: 0px;
} }
.footer{
.footer {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
background: #fff; background: #fff;
position: relative; position: relative;
height:65px; height: 65px;
} }
.footer .left{ .footer .left {
-webkit-box-pack: start; -webkit-box-pack: start;
-ms-flex-pack: start; -ms-flex-pack: start;
justify-content: flex-start; justify-content: flex-start;
...@@ -56,7 +65,8 @@ input,button{ ...@@ -56,7 +65,8 @@ input,button{
padding: 0; padding: 0;
width: 66.66666667%; width: 66.66666667%;
} }
.footer .right{
.footer .right {
width: 33.33333333%; width: 33.33333333%;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -70,16 +80,18 @@ input,button{ ...@@ -70,16 +80,18 @@ input,button{
padding: 0; padding: 0;
color: #fff; color: #fff;
font-size: 22px; font-size: 22px;
background: linear-gradient(270deg,#f10000,#ff4e18); background: linear-gradient(270deg, #f10000, #ff4e18);
} }
.footer li{
.footer li {
color: #fe3400; color: #fe3400;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content:center; justify-content: center;
} }
.footer li.kefu_Wrapper{
.footer li.kefu_Wrapper {
position: relative; position: relative;
width: 80px; width: 80px;
height: 100%; height: 100%;
...@@ -100,7 +112,8 @@ input,button{ ...@@ -100,7 +112,8 @@ input,button{
align-items: center; align-items: center;
border-right: 1px #dcdcdc solid; border-right: 1px #dcdcdc solid;
} }
.footer li.share{
.footer li.share {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
...@@ -120,9 +133,10 @@ input,button{ ...@@ -120,9 +133,10 @@ input,button{
margin-right: 0; margin-right: 0;
border-right: 1px #dcdcdc solid; border-right: 1px #dcdcdc solid;
font-size: 13px; font-size: 13px;
} }
.footer li.peice_wrapper{
.footer li.peice_wrapper {
display: none; display: none;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -142,42 +156,49 @@ input,button{ ...@@ -142,42 +156,49 @@ input,button{
color: #ff3500; color: #ff3500;
margin-right: 0; margin-right: 0;
} }
.footer li.share img{
max-width: 45%; .footer li.share img {
max-width: 45%;
} }
.footer li .kefu{
.footer li .kefu {
font-size: 13px; font-size: 13px;
color: #fe3400; color: #fe3400;
text-align: center; text-align: center;
} }
.footer li .curPrice{
.footer li .curPrice {
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
} }
.curPrice span{
.curPrice span {
font-size: 20px; font-size: 20px;
} }
.price span{
font-size: 10px; .price span {
font-size: 10px;
} }
.price{
.price {
position: relative; position: relative;
font-size: 13px; font-size: 13px;
padding: 0 10px; padding: 0 10px;
} }
.price::before{
.price::before {
position: absolute; position: absolute;
top: 55%; top: 55%;
left:0; left: 0;
right: 0; right: 0;
margin:0 auto; margin: 0 auto;
content: ''; content: '';
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: #fe3400; background-color: #fe3400;
} }
.modalBox { .modalBox, .loginInBox {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
...@@ -193,121 +214,133 @@ input,button{ ...@@ -193,121 +214,133 @@ input,button{
max-width: 640px; max-width: 640px;
display: none; display: none;
} }
.inputBox {
width: 90%; .inputBox {
margin: 0 auto; width: 90%;
position: relative; margin: 0 auto;
top: 18%; position: relative;
background: #fff; top: 18%;
padding: 10px; background: #fff;
} padding: 10px;
.inputControl { }
width: 90%;
height: 42px; .inputControl {
border: 1px solid #ada598; width: 90%;
border-radius: 22px; height: 42px;
font-size: 13px; border: 1px solid #ada598;
margin-bottom: 10%; border-radius: 22px;
position: relative; font-size: 13px;
display: flex; position: relative;
margin: 5% auto; display: flex;
} margin: 5% auto 10%;
.inputControl input{ }
font-size: 18px;
color: #757575; .inputControl input {
margin-left: 5%; font-size: 18px;
padding: 3px 0; color: #757575;
} margin-left: 5%;
.inputControl input#phone{ padding: 3px 0;
width:58%; }
}
.getPhoneNumber { .inputControl input#phone {
width: 100%; width: 58%;
height: 42px; }
color: #000;
border-radius: 22px; .getPhoneNumber {
font-size: 14px; width: 100%;
} height: 42px;
.autoGet { color: #000;
width: 40%; border-radius: 22px;
height: 42px; font-size: 14px;
position: absolute; }
right: 0px;
top: 0px; .autoGet {
} width: 40%;
.commonBtn { height: 42px;
/* background: linear-gradient(270deg,#f10000,#ff4e18); */ position: absolute;
background: #ec2d37; right: 0px;
color: #fff; top: 0px;
font-size: 18px; }
}
.goBuyBtn { .commonBtn {
width: 60%; /* background: linear-gradient(270deg,#f10000,#ff4e18); */
height: 45px; background: #ec2d37;
line-height: 45px; color: #fff;
border-radius: 22px; font-size: 18px;
border: 2px solid #ff4e18a1; }
margin: 5% 20%;
font-size: 18px; .goBuyBtn {
} width: 60%;
.closeModal { height: 45px;
position: absolute; line-height: 45px;
right: 5px; border-radius: 22px;
top: 5px; border: 2px solid #ff4e18a1;
color: #fff; margin: 5% 20%;
border: 2px solid #fff; font-size: 18px;
border-radius: 50%; }
width: 30px;
height: 30px; .closeModal {
line-height: 30px; position: absolute;
text-align: center; right: 5px;
cursor: pointer; top: 5px;
font-size: 22px; color: #fff;
} border: 2px solid #fff;
body .layui-m-layer .layui-m-layer-msg { border-radius: 50%;
bottom: 0!important; width: 30px;
} height: 30px;
line-height: 30px;
.markbox { text-align: center;
position: fixed; cursor: pointer;
left: 0; font-size: 22px;
top: 0; }
bottom: 0;
right: 0; body .layui-m-layer .layui-m-layer-msg {
width: 100%; bottom: 0 !important;
height: 100%; }
color: #fff;
display: flex; .markbox {
justify-content: flex-end; position: fixed;
z-index: 100000; left: 0;
background: rgba(0, 0, 0, 0.8); top: 0;
display: none; bottom: 0;
} right: 0;
width: 100%;
.iconfont { height: 100%;
position: absolute; color: #fff;
right: 8%; display: flex;
font-size: 40px; justify-content: flex-end;
top: 2px; z-index: 100000;
font-weight: bold; background: rgba(0, 0, 0, 0.8);
} display: none;
}
.guideImgBox {
margin: 20px auto; .iconfont {
} position: absolute;
.guideImgBox img{ right: 8%;
max-width: 15%; font-size: 40px;
position: relative; top: 2px;
left: 80%; font-weight: bold;
} }
.tipsToast {
margin-top: 20%; .guideImgBox {
} margin: 20px auto;
.tipsToast p { }
font-size: 18px;
margin-top: 10px; .guideImgBox img {
text-align: center; max-width: 15%;
letter-spacing: 1px; position: relative;
} left: 80%;
}
.tipsToast {
margin-top: 20%;
}
.tipsToast p {
font-size: 18px;
margin-top: 10px;
text-align: center;
letter-spacing: 1px;
}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
...@@ -9,8 +10,9 @@ ...@@ -9,8 +10,9 @@
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>獴哥保险诊所</title> <title>獴哥保险诊所</title>
<link rel="stylesheet" href="./css/style.css" /> <link rel="stylesheet" href="./css/style.css" />
<link rel="shortcut icon" href="https://www.ydinsurance.cn/wp-content/uploads/2018/04/favicon.gif" /> <link rel="shortcut icon" href="https://www.ydinsurance.cn/wp-content/uploads/2018/04/favicon.gif" />
</head> </head>
<body> <body>
<div> <div>
<img src="./images/bg_toutiao.png"> <img src="./images/bg_toutiao.png">
...@@ -19,13 +21,13 @@ ...@@ -19,13 +21,13 @@
<ul class="left"> <ul class="left">
<li class="kefu_Wrapper"> <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">
<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 class="share" style="display: none;"> <li class="share" style="display: none;">
<img src="./images/share1.png" alt="share" /> <img src="./images/share1.png" alt="share" />
<div>分享产品</div> <div>分享产品</div>
</li> </li>
<li class="peice_wrapper"> <li class="peice_wrapper">
<div class="curPrice"><span></span>49</div> <div class="curPrice"><span></span>49</div>
...@@ -65,11 +67,31 @@ ...@@ -65,11 +67,31 @@
<div class="guideImgBox"> <div class="guideImgBox">
<img src="./images/tips.png" alt="提示"> <img src="./images/tips.png" alt="提示">
<div class="tipsToast"> <div class="tipsToast">
<p>请点击右上角菜单</p> <p>请点击右上角菜单</p>
<p>分享给朋友</p> <p>分享给朋友</p>
</div> </div>
</div> </div>
</div> </div>
<!-- 登陆弹窗-->
<div class="loginInBox">
<div class='inputBox'>
<!--获取手机号 -->
<div class="mobileNoSection inputControl">
<input id="loginPhone" type='number' maxlength="11" placeholder="手机号" />
<div class='autoGet'>
<button class='getPhoneNumber commonBtn' id="loginCodeBtn">
获取验证码
</button>
</div>
</div>
<!--获取验证码 -->
<div class="codeSection inputControl">
<input id="loginCode" type='number' maxlength="4" placeholder="短信验证码" />
</div>
<!--登陆 -->
<button class='goBuyBtn commonBtn' id="loginIn">登陆</button>
</div>
</div>
<div id="d" hidden></div> <div id="d" hidden></div>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script> <script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
<script src="./js/jquery.min.js"></script> <script src="./js/jquery.min.js"></script>
...@@ -77,16 +99,17 @@ ...@@ -77,16 +99,17 @@
<script src="./js/base.js"></script> <script src="./js/base.js"></script>
<script> <script>
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function() { (function () {
const host = window.location.host; const host = window.location.host;
var hm = document.createElement("script"); var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?36b1eb7eec3b5dac9f97d887092b5b27"; hm.src = "https://hm.baidu.com/hm.js?36b1eb7eec3b5dac9f97d887092b5b27";
if(host=='www.ydinsurance.cn'){ if (host == 'www.ydinsurance.cn') {
hm.src = "https://hm.baidu.com/hm.js?73a2215476525c6142927963135662e0"; hm.src = "https://hm.baidu.com/hm.js?73a2215476525c6142927963135662e0";
} }
var s = document.getElementsByTagName("script")[0]; var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s); s.parentNode.insertBefore(hm, s);
})(); })();
</script> </script>
</body> </body>
</html> </html>
\ 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