Skip to content

A
allCampaign
Commit 49895fa0 by Chao Sun
Options

样式修改

parent 4e0d51de
Showing with 292 additions and 139 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,34 @@ img{display:block;border:0;max-width: 100%;} ...@@ -16,31 +16,34 @@ img{display:block;border:0;max-width: 100%;}
html,body{ html,body{
width:100%; width:100%;
height:100%; height:100%;
min-width: 320px;
max-width: 640px;
margin:0 auto; margin:0 auto;
font-size: 16px; font-size: 14px;
} }
.banner{ .banner{
width: 100%;
margin:0 auto; margin:0 auto;
} position: relative;
.btn1,.orderBtn,.testBtn{
width: 70%;
margin: 20px auto auto;
}
.btn1{
margin-bottom: 20px;
} }
.wrapper{ .wrapper{
padding-right: 15px; width: 18%;
padding-left: 15px; position: absolute;
margin-right: auto; right: 18%;
margin-left: auto; top: 7%;
background: #fff;
padding: 1%;
height: 80%;
}
.btn1 {
margin-left: 15%;
margin-bottom: 2%;
} }
.wrapper section{ .wrapper section{
float: left; float: left;
width: 100%; width: 100%;
padding: 0 5%; height: 50px;
line-height: 30px;
position: relative;
} }
.wrapper section label { .wrapper section label {
width: 30%; width: 30%;
...@@ -50,8 +53,8 @@ html,body{ ...@@ -50,8 +53,8 @@ html,body{
.form-control,.wrapper section .item{ .form-control,.wrapper section .item{
float: left; float: left;
width: 70%; width: 70%;
height: 34px; height: 30px;
line-height: 34px; line-height: 30px;
} }
.wrapper section .item .icon{ .wrapper section .item .icon{
margin-right: 5%; margin-right: 5%;
...@@ -59,141 +62,51 @@ html,body{ ...@@ -59,141 +62,51 @@ html,body{
.item .sex_item{ .item .sex_item{
float: left; float: left;
width: 30%; width: 30%;
margin-right: 10%; margin-right: 20%;
} }
.wrapper section .tips{ .wrapper section .tips{
float: right; float: right;
width: 70%; width: 70%;
height: 30px; height: 20px;
line-height: 30px; line-height: 20px;
color:#f81e06; color:#f81e06;
font-size: 12px; font-size: 12px;
} }
.agree{ .agree{
font-size: 13px; font-size: 12px;
width: 100%; width: 100%;
height:25px; height: 25px;
line-height:25px; line-height: 25px;
position: relative;
} }
.agree span{ .agree span{
display: inline-block; display: inline-block;
color:#8a8a8a; color:#8a8a8a;
position: absolute; position: absolute;
cursor: pointer;
} }
.content{ .testBtn{
position: relative; margin-left: 7%;
width: 100%; cursor: pointer;
margin:0 auto;
}
.content #orderBtn,.content #btn3{
position: absolute;
width: 70%;
left: 15%;
}
.content #orderBtn {
top: 66.5%;
} }
.content #btn3 { .content{
top: 83%;
}
footer{
width: 100%; width: 100%;
margin-top:5%;
padding:0 18%;
position: relative; 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{ footer{
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; display: none;
width: 100%;
height:100%;
background-color: rgba(0,0,0,.5);
position: fixed;
bottom: 0;
} }
.toast .toast_wrapper{ .content #orderBtn,.content #btn3{
width: 85%;
height:30%;
background: #fff;
position: absolute; position: absolute;
top:0; width: 30%;
left:0; left: 35%;
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{ .content #orderBtn {
margin-top: 10%; top: 68.5%;
} }
.layui-m-layercont p.service{ .content #btn3 {
height:30px; top: 87%;
line-height:30px;
} }
criticalInsurance-campaign/index.html
...@@ -6,17 +6,15 @@ ...@@ -6,17 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <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/bootstrap.min.css">
<link rel="stylesheet" href="css/iconfont.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" /> <link rel="shortcut icon" href="https://www.ydinsurance.cn/wp-content/uploads/2018/04/favicon.gif" />
<title>重疾险,大病保险-最惠比</title> <title>重疾险,大病保险-最惠比</title>
<meta name="keywords" content="重疾险,重疾险排名，重疾险哪家好" /> <meta name="keywords" content="重疾险,重疾险排名，重疾险哪家好" />
<meta name="description" content="2018畅销款重大疾病保险，保障范围100种重疾.30种轻症，保额50万。" /> <meta name="description" content="2018畅销款重大疾病保险，保障范围100种重疾.30种轻症，保额50万。" />
</head> </head>
<body> <body>
<header class="banner"> <div class="banner">
<img src="images/banner.jpg" alt="banner" /> <img class="pbanner" src="images/banner.jpg" alt="banner" />
</header>
<section class="wrapper"> <section class="wrapper">
<img class="btn1" src="images/btn1.png" /> <img class="btn1" src="images/btn1.png" />
<section> <section>
...@@ -56,7 +54,8 @@ ...@@ -56,7 +54,8 @@
<div class="agreeTips tips"></div> <div class="agreeTips tips"></div>
</section> </section>
</section> </section>
<img src="images/bottom.png"> <img class="bottom" src="images/bottom.png">
</div>
<section class="content"> <section class="content">
<img class="bg" src="images/bg.jpg" /> <img class="bg" src="images/bg.jpg" />
<img id="orderBtn" src="images/btn2.png" alt="预约保险顾问"> <img id="orderBtn" src="images/btn2.png" alt="预约保险顾问">
......
criticalInsurance-campaign/js/base.js
...@@ -10,8 +10,10 @@ $(function(){ ...@@ -10,8 +10,10 @@ $(function(){
hmsr:getQueryString('hmsr'), hmsr:getQueryString('hmsr'),
hmpl:getQueryString('hmpl'), hmpl:getQueryString('hmpl'),
hmcu:getQueryString('hmcu'), hmcu:getQueryString('hmcu'),
hmkw:getQueryString('hmkw') hmkw:getQueryString('hmkw'),
deviceType:''
} }
init() init()
function init(){ function init(){
//点击跳转到首屏 //点击跳转到首屏
...@@ -28,6 +30,7 @@ $(function(){ ...@@ -28,6 +30,7 @@ $(function(){
//选女 //选女
choseFemale(); choseFemale();
} }
var deviceType = checkDeviceType();
function getToken(){ function getToken(){
$.ajax({ $.ajax({
type:"POST", type:"POST",
...@@ -85,10 +88,12 @@ $(function(){ ...@@ -85,10 +88,12 @@ $(function(){
function checkMoney(){ function checkMoney(){
$("#choseMoney").change(function(){ $("#choseMoney").change(function(){
$("#choseMoney").attr("value",this.value); $("#choseMoney").attr("value",this.value);
param.money = $("#choseMoney").attr("value");
}) })
} }
function submitBtn(){ function submitBtn(){
$(".testBtn").click(function(){ $(".testBtn").click(function(){
console.log(param)
//判断性别选没选 //判断性别选没选
if(!param.sex){ if(!param.sex){
$(".sexTips").html('性别不能为空'); $(".sexTips").html('性别不能为空');
...@@ -97,8 +102,6 @@ $(function(){ ...@@ -97,8 +102,6 @@ $(function(){
},3000) },3000)
return false; 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 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}$/; var phonereg = /^(1)\d{10}$/;
//判断姓名 //判断姓名
...@@ -139,7 +142,6 @@ $(function(){ ...@@ -139,7 +142,6 @@ $(function(){
},3000) },3000)
return false;; return false;;
} }
//判断是否同意 //判断是否同意
if(!$(".agree .iconfont").hasClass('on')){ if(!$(".agree .iconfont").hasClass('on')){
$(".agreeTips").html("请同意最惠比用户条款") $(".agreeTips").html("请同意最惠比用户条款")
...@@ -163,7 +165,7 @@ $(function(){ ...@@ -163,7 +165,7 @@ $(function(){
}); });
}else{ }else{
layer.open({ 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: '我知道了' ,btn: '我知道了'
}); });
} }
...@@ -207,4 +209,43 @@ $(function(){ ...@@ -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