Skip to content

A
allCampaign
Commit d3b178b1 by Sweet Zhang
Options

适应PC断

parent 2cfa91d3
Showing with 334 additions and 177 deletions
criticalInsurance-campaign/css/mstyle.css 0 → 100644
*{padding: 0;margin: 0;color:#333;font-family: '微软雅黑';-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
ul,ol{
list-style: none;
}
a{
color:#333;
display: block;
text-decoration: none;
}
a:link{
text-decoration:none;
}
img{display:block;border:0;max-width: 100%;}
html,body{
width:100%;
height:100%;
min-width: 320px;
max-width: 640px;
margin:0 auto;
font-size: 16px;
}
.banner{
margin:0 auto;
}
.btn1,.orderBtn,.testBtn{
width: 70%;
margin: 20px auto auto;
}
.btn1{
margin-bottom: 20px;
}
.wrapper{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.wrapper section{
float: left;
width: 100%;
padding: 0 5%;
}
.wrapper section label {
width: 30%;
float: left;
}
.form-control,.wrapper section .item{
float: left;
width: 70%;
height: 34px;
line-height: 34px;
}
.wrapper section .item .icon{
margin-right: 5%;
}
.item .sex_item{
float: left;
width: 30%;
margin-right: 10%;
}
.wrapper section .tips{
float: right;
width: 70%;
height: 30px;
line-height: 30px;
color:#f81e06;
font-size: 12px;
}
.agree{
font-size: 13px;
width: 100%;
height:25px;
line-height:25px;
position: relative;
}
.agree span{
display: inline-block;
color:#8a8a8a;
position: absolute;
}
.content{
position: relative;
width: 100%;
margin:0 auto;
}
.content #orderBtn,.content #btn3{
position: absolute;
width: 70%;
left: 15%;
}
.content #orderBtn {
top: 66.5%;
}
.content #btn3 {
top: 83%;
}
footer{
width: 100%;
position: relative;
bottom:0;
background: #fff;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
}
footer ul{
width: 100%;
border-top:1px #d1d1d1 solid;
}
footer ul li{
width: 50%;
float: left;
height:45px;
line-height:45px;
text-align: center;
border-right:1px #d1d1d1 solid;
}
footer ul li:nth-child(2){
border-right:none;
}
footer ul li.selected{
background: #fc6351;
color: #fff;
}
/* .toast{
display: none;
width: 100%;
height:100%;
background-color: rgba(0,0,0,.5);
position: fixed;
bottom: 0;
}
.toast .toast_wrapper{
width: 85%;
height:30%;
background: #fff;
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
border-radius: 2%;
}
.toast .toast_wrapper .title{
width:100%;
text-align: center;
color:#fff;
background: #299bf3;
margin: 0;
height:80px;
line-height:80px;
}*/
.layui-m-layercont{
position: relative!important;
padding:0!important;
text-align: center!important;
width: 100%!important;
height: 115px!important;
line-height: 115px!important;
}
.totast_content{
width: 100%;
text-align: center;
margin: 0 auto;
height:130px;
position: relative;
}
.totast_content .iconfont{
width: 60px;
height: 60px;
font-size: 60px;
position: relative;
top: 10px;
left: 40%;
line-height:60px;
}
.callBtn{
width: 60px;
text-align: center;
position: relative;
left: 40%;
top: 7%;
height: 40px;
line-height: 40px;
}
.layui-m-layercont .service_item{
margin-top: 10%;
}
.layui-m-layercont p.service{
height:30px;
line-height:30px;
}
criticalInsurance-campaign/css/style.css
......@@ -16,31 +16,33 @@ img{display:block;border:0;max-width: 100%;}
html,body{
width:100%;
height:100%;
min-width: 320px;
max-width: 640px;
margin:0 auto;
font-size: 16px;
font-size: 14px;
}
.banner{
width: 100%;
margin:0 auto;
}
.btn1,.orderBtn,.testBtn{
width: 70%;
margin: 20px auto auto;
}
.btn1{
margin-bottom: 20px;
position: relative;
}
.wrapper{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
width: 18%;
position: absolute;
right: 18%;
top: 7%;
background: #fff;
padding: 1%;
height: 80%;
}
.btn1 {
margin-left: 15%;
margin-bottom: 2%;
}
.wrapper section{
float: left;
width: 100%;
padding: 0 5%;
height: 50px;
line-height: 30px;
}
.wrapper section label {
width: 30%;
......@@ -50,8 +52,8 @@ html,body{
.form-control,.wrapper section .item{
float: left;
width: 70%;
height: 34px;
line-height: 34px;
height: 30px;
line-height: 30px;
}
.wrapper section .item .icon{
margin-right: 5%;
......@@ -59,141 +61,56 @@ html,body{
.item .sex_item{
float: left;
width: 30%;
margin-right: 10%;
margin-right: 20%;
}
.wrapper section .tips{
float: right;
width: 70%;
height: 30px;
line-height: 30px;
height: 25px;
line-height: 25px;
color:#f81e06;
font-size: 12px;
}
.agree{
font-size: 13px;
font-size: 12px;
width: 100%;
height:25px;
line-height:25px;
position: relative;
height: 25px;
line-height: 25px;
position: absolute;
bottom: 2%;
}
.agree span{
display: inline-block;
color:#8a8a8a;
position: absolute;
cursor: pointer;
}
.content{
position: relative;
width: 100%;
margin:0 auto;
}
.content #orderBtn,.content #btn3{
.testBtn{
max-width: 75%;
margin-left: 10%;
cursor: pointer;
position: absolute;
width: 70%;
left: 15%;
}
.content #orderBtn {
top: 66.5%;
bottom: 4%;
}
.content #btn3 {
top: 83%;
}
footer{
.content{
width: 100%;
margin-top:5%;
padding:0 18%;
position: relative;
bottom:0;
background: #fff;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
}
footer ul{
width: 100%;
border-top:1px #d1d1d1 solid;
}
footer ul li{
width: 50%;
float: left;
height:45px;
line-height:45px;
text-align: center;
border-right:1px #d1d1d1 solid;
}
footer ul li:nth-child(2){
border-right:none;
}
footer ul li.selected{
background: #fc6351;
color: #fff;
}
/* .toast{
footer{
display: none;
width: 100%;
height:100%;
background-color: rgba(0,0,0,.5);
position: fixed;
bottom: 0;
}
.toast .toast_wrapper{
width: 85%;
height:30%;
background: #fff;
.content #orderBtn,.content #btn3{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
border-radius: 2%;
}
.toast .toast_wrapper .title{
width:100%;
text-align: center;
color:#fff;
background: #299bf3;
margin: 0;
height:80px;
line-height:80px;
}*/
.layui-m-layercont{
position: relative!important;
padding:0!important;
text-align: center!important;
width: 100%!important;
height: 115px!important;
line-height: 115px!important;
}
.totast_content{
width: 100%;
text-align: center;
margin: 0 auto;
height:130px;
position: relative;
}
.totast_content .iconfont{
width: 60px;
height: 60px;
font-size: 60px;
position: relative;
top: 10px;
left: 40%;
line-height:60px;
width: 30%;
left: 35%;
}
.callBtn{
width: 60px;
text-align: center;
position: relative;
left: 40%;
top: 7%;
height: 40px;
line-height: 40px;
}
.layui-m-layercont .service_item{
margin-top: 10%;
.content #orderBtn {
top: 68.5%;
}
.layui-m-layercont p.service{
height:30px;
line-height:30px;
.content #btn3 {
top: 87%;
}
criticalInsurance-campaign/index.html
......@@ -6,57 +6,56 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/iconfont.css">
<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" />
<title>重疾险,大病保险-最惠比</title>
<meta name="keywords" content="重疾险,重疾险排名，重疾险哪家好" />
<meta name="description" content="2018畅销款重大疾病保险，保障范围100种重疾.30种轻症，保额50万。" />
</head>
<body>
<header class="banner">
<img src="images/banner.jpg" alt="banner" />
</header>
<section class="wrapper">
<img class="btn1" src="images/btn1.png" />
<section>
<label>性别:</label>
<div class="item">
<div class="sex_item"><span class="icon iconfont male on">&#xe684;</span>男</div>
<div class="sex_item"><span class="icon iconfont female">&#xe664;</span>女</div>
</div>
<div class="sexTips tips"></div>
</section>
<section>
<label>保障金额：</label>
<select class="form-control" id="choseMoney">
<option value="1">10万</option>
<option value="2">20万</option>
<option value="3">30万</option>
<option value="4">40万</option>
<option value="5">50万</option>
</select>
<div class="moneyTips tips"></div>
</section>
<section>
<label>姓名：</label>
<input class="form-control username" type="text" placeholder="请输入您的姓名">
<div class="nameTips tips"></div>
</section>
<section>
<label>手机号码：</label>
<input class="form-control userphone" type="text" placeholder="请输入您的手机号码">
<div class="phoneTips tips"></div>
</section>
<img class="testBtn" src="images/btn3.png" alt="保费试算">
<section>
<div class="agree">
<span><i class="iconfont on">&#xe504;</i> 本人同意最惠比联系本人进行精准报价和产品介绍</span>
</div>
<div class="agreeTips tips"></div>
</section>
</section>
<img src="images/bottom.png">
<div class="banner">
<img class="pbanner" src="images/banner.jpg" alt="banner" />
<section class="wrapper">
<img class="btn1" src="images/btn1.png" />
<section>
<label>性别:</label>
<div class="item">
<div class="sex_item"><span class="icon iconfont male on">&#xe684;</span>男</div>
<div class="sex_item"><span class="icon iconfont female">&#xe664;</span>女</div>
</div>
<div class="sexTips tips"></div>
</section>
<section>
<label>保障金额：</label>
<select class="form-control" id="choseMoney">
<option value="1">10万</option>
<option value="2">20万</option>
<option value="3">30万</option>
<option value="4">40万</option>
<option value="5">50万</option>
</select>
<div class="moneyTips tips"></div>
</section>
<section>
<label>姓名：</label>
<input class="form-control username" type="text" placeholder="请输入您的姓名">
<div class="nameTips tips"></div>
</section>
<section>
<label>手机号码：</label>
<input class="form-control userphone" type="text" placeholder="请输入您的手机号码">
<div class="phoneTips tips"></div>
</section>
<img class="testBtn" src="images/btn3.png" alt="保费试算">
<section>
<div class="agree">
<span><i class="iconfont on">&#xe504;</i> 本人同意最惠比联系本人进行精准报价和产品介绍</span>
</div>
<div class="agreeTips tips"></div>
</section>
</section>
<img class="bottom" src="images/bottom.png">
</div>
<section class="content">
<img class="bg" src="images/bg.jpg" />
<img id="orderBtn" src="images/btn2.png" alt="预约保险顾问">
......
criticalInsurance-campaign/js/base.js
......@@ -10,8 +10,10 @@ $(function(){
hmsr:getQueryString('hmsr'),
hmpl:getQueryString('hmpl'),
hmcu:getQueryString('hmcu'),
hmkw:getQueryString('hmkw')
hmkw:getQueryString('hmkw'),
deviceType:''
}
init()
function init(){
//点击跳转到首屏
......@@ -28,6 +30,7 @@ $(function(){
//选女
choseFemale();
}
var deviceType = checkDeviceType();
function getToken(){
$.ajax({
type:"POST",
......@@ -85,10 +88,12 @@ $(function(){
function checkMoney(){
$("#choseMoney").change(function(){
$("#choseMoney").attr("value",this.value);
param.money = $("#choseMoney").attr("value");
})
}
function submitBtn(){
$(".testBtn").click(function(){
console.log(param)
//判断性别选没选
if(!param.sex){
$(".sexTips").html('性别不能为空');
......@@ -97,8 +102,6 @@ $(function(){
},3000)
return false;
}
param.money = $("#choseMoney").attr("value");
var namereg = /(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,48}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,48}[a-zA-Z]{1}$)/
var phonereg = /^(1)\d{10}$/;
//判断姓名
......@@ -139,7 +142,6 @@ $(function(){
},3000)
return false;;
}
//判断是否同意
if(!$(".agree .iconfont").hasClass('on')){
$(".agreeTips").html("请同意最惠比用户条款")
......@@ -163,7 +165,7 @@ $(function(){
});
}else{
layer.open({
content: '<div class="service_item"><p class="service">该活动已结束", </p><p class="service">不会再接受提交问卷</p></div>'
content: '<div class="service_item"><p class="service">该活动已结束, </p><p class="service">不会再接受提交问卷</p></div>'
,btn: '我知道了'
});
}
......@@ -207,4 +209,43 @@ $(function(){
});
})
}
function checkDeviceType() {
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
deviceType = '3';
loadStyle('./css/mstyle.css')
} else {
deviceType = '2';
loadStyle('./css/mstyle.css')
}
} else {
deviceType = '1';
changeImg('1')
loadStyle('./css/style.css')
}
return deviceType;
}
var deviceType = checkDeviceType();
param.deviceType = deviceType;
//加载不同样式
function loadStyle(url){
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);
}
function changeImg(type){
if(type == '1'){
$(".pbanner").attr('src','./images/pbanner.jpg')
$(".btn1").attr('src','./images/pcbtn1.png')
$(".testBtn").attr('src','./images/pcbtn3.png')
$(".bg").attr('src','./images/pcbg_1.png')
$(".bottom").hide();
$("#orderBtn,#btn3").attr('src','./images/pcbtn2.png')
}
}
})
\ 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