Commit f81a2db0 by Chao Sun

分享

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