Commit 53564bb5 by 邓丽

icon

parent 328cbd97
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="screen-orientation" content="horizontal">
<meta content="telephone=no" name="format-detection" />
<meta name="keywords" content="企业肖像,企业产品,企业广告,会议跟拍,企业宣传,VR摄影,VR直播,全方位影像服务">
<meta name="description" content="企视录提供企业肖像、企业产品、企业广告、会议跟拍、企业宣传片、VR摄影、VR直播等全方位影像服务,可满足企业全面需求,目前企视录合作摄影师覆盖全国主要一二线城市,可在全国范围内提供企业视觉服务,企视录自主开发的SAAS影像管理系统,可以满足企业影像存储、管理、分发、媒体发布等全方位需求,可有效提高企业运营效率。">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content=”IE=edge,chrome=1″ />
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
<title>企视录官网</title>
<link href="logo_128.ico" rel="Shortcut Icon">
<link rel="stylesheet" href="../css/index.css">
</head>
<body id="body">
<!--引入公用头部-->
<header>
<div class="logo">
<img src="../img/logo.png" alt=""/>
</div>
<ul>
<li >
<a href="" class="active">首页</a>
</li>
<!-- <li>
<a href="">直播间</a>
</li>-->
<li>
<a href="">案列</a>
</li>
<li>
<a href="">图库</a>
</li>
</ul>
<a class="login">
登录
</a>
</header>
<article class="caseTitle">
<section class="intro">
<h2>宴会·展览</h2>
<div>
<h4><span></span>务介绍</h4>
<p>服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容</p>
</div>
</section>
</article>
<!--引入公用版权部分-->
<footer>
<p>©北京约拍啦网络科技有限公司旗下网站-<a href="http://www.yuepai365.cn">企视录</a> <a href="http://www.miibeian.gov.cn/">蜀ICP备14015734号-5</a></p>
<ul>
<li><a href="">隐私条款</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">工作机会</a></li>
<li><a href="">关于我们</a></li>
</ul>
</footer>
<!--<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../js/jquery-1.11.1.js"></script>
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="screen-orientation" content="horizontal">
<meta content="telephone=no" name="format-detection" />
<meta name="keywords" content="企业肖像,企业产品,企业广告,会议跟拍,企业宣传,VR摄影,VR直播,全方位影像服务">
<meta name="description" content="企视录提供企业肖像、企业产品、企业广告、会议跟拍、企业宣传片、VR摄影、VR直播等全方位影像服务,可满足企业全面需求,目前企视录合作摄影师覆盖全国主要一二线城市,可在全国范围内提供企业视觉服务,企视录自主开发的SAAS影像管理系统,可以满足企业影像存储、管理、分发、媒体发布等全方位需求,可有效提高企业运营效率。">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content=”IE=edge,chrome=1″ />
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
<title>企视录官网</title>
<link href="logo_128.ico" rel="Shortcut Icon">
<link rel="stylesheet" href="../css/index.css">
</head>
<body id="body">
<!--引入公用头部-->
<header>
<div class="logo">
<img src="../img/logo.png" alt=""/>
</div>
<ul>
<li >
<a href="" class="active">首页</a>
</li>
<!-- <li>
<a href="">直播间</a>
</li>-->
<li>
<a href="">案列</a>
</li>
<li>
<a href="">图库</a>
</li>
</ul>
<a class="login">
登录
</a>
</header>
<article class="caseTitle">
<section class="intro">
<h2>案例标题</h2>
<div>
<h4><i></i>2016.9.12</h4>
<p>服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容</p>
</div>
</section>
<section class="htmlContent">
</section>
</article>
<!--引入公用版权部分-->
<footer>
<p>©北京约拍啦网络科技有限公司旗下网站-<a href="http://www.yuepai365.cn">企视录</a> <a href="http://www.miibeian.gov.cn/">蜀ICP备14015734号-5</a></p>
<ul>
<li><a href="">隐私条款</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">工作机会</a></li>
<li><a href="">关于我们</a></li>
</ul>
</footer>
<!--<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../js/jquery-1.11.1.js"></script>
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="screen-orientation" content="horizontal">
<meta content="telephone=no" name="format-detection" />
<meta name="keywords" content="企业肖像,企业产品,企业广告,会议跟拍,企业宣传,VR摄影,VR直播,全方位影像服务">
<meta name="description" content="企视录提供企业肖像、企业产品、企业广告、会议跟拍、企业宣传片、VR摄影、VR直播等全方位影像服务,可满足企业全面需求,目前企视录合作摄影师覆盖全国主要一二线城市,可在全国范围内提供企业视觉服务,企视录自主开发的SAAS影像管理系统,可以满足企业影像存储、管理、分发、媒体发布等全方位需求,可有效提高企业运营效率。">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content=”IE=edge,chrome=1″ />
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
<title>企视录官网</title>
<link href="logo_128.ico" rel="Shortcut Icon">
<link rel="stylesheet" href="../css/style-demo.css">
<link rel="stylesheet" href="../css/index.css">
</head>
<body id="body">
<!--引入公用头部-->
<header>
<div class="logo">
<img src="../img/logo.png" alt=""/>
</div>
<ul>
<li >
<a href="" class="active">首页</a>
</li>
<!-- <li>
<a href="">直播间</a>
</li>-->
<li>
<a href="">案列</a>
</li>
<li>
<a href="">图库</a>
</li>
</ul>
<a class="login">
登录
</a>
</header>
<article class="activity">
<!--title-->
<section class="title">
<h2>企业名称</h2>
<!-- <div>
<a class="active">活动</a><a>直播</a>
</div>-->
</section>
<!--合作商家-->
<section class="cooperation activeSlide">
<ul>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev"></a>
<div class="carousel case activeCarousel">
<ul>
<li>
<a href="">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li class="active largeShow" id="largeShow">
<a href="">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
</ul>
</div>
<a href="#" class="next"></a>
<div class="clear"></div>
</div>
</li>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev"></a>
<div class="carousel case activeCarousel">
<ul>
<li>
<a href="">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li class="active largeShow" id="largeShow">
<a href="">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
</ul>
</div>
<a href="#" class="next"></a>
<div class="clear"></div>
</div>
</li>
</ul>
</section>
</article>
<!--引入公用版权部分-->
<footer>
<p>©北京约拍啦网络科技有限公司旗下网站-<a href="http://www.yuepai365.cn">企视录</a> <a href="http://www.miibeian.gov.cn/">蜀ICP备14015734号-5</a></p>
<ul>
<li><a href="">隐私条款</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">工作机会</a></li>
<li><a href="">关于我们</a></li>
</ul>
</footer>
<!--<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../js/jquery-1.11.1.js"></script>
<script src="../js/jquery.mousewheel-3.1.12.js"></script>
<script src="../js/jquery.jcarousellite.min.js"></script>
<!--五张图轮播效果-->
<script type="text/javascript">
$(".mouseWheelButtons .carousel").jCarouselLite({
btnNext: ".mouseWheelButtons .next",
btnPrev: ".mouseWheelButtons .prev",
mouseWheel: true,
circular: true,
speed: 1000,
visible: 5,
scroll: 5
});
</script>
<script>
/*案例模块放大效果*/
$(".activeCarousel ul li").mouseenter(function(){
$(this).addClass("active").siblings().removeClass("active");
}).mouseleave(function(){
$("#largeShow").addClass("active").siblings().removeClass("active");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="screen-orientation" content="horizontal">
<meta content="telephone=no" name="format-detection" />
<meta name="keywords" content="企业肖像,企业产品,企业广告,会议跟拍,企业宣传,VR摄影,VR直播,全方位影像服务">
<meta name="description" content="企视录提供企业肖像、企业产品、企业广告、会议跟拍、企业宣传片、VR摄影、VR直播等全方位影像服务,可满足企业全面需求,目前企视录合作摄影师覆盖全国主要一二线城市,可在全国范围内提供企业视觉服务,企视录自主开发的SAAS影像管理系统,可以满足企业影像存储、管理、分发、媒体发布等全方位需求,可有效提高企业运营效率。">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content=”IE=edge,chrome=1″ />
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
<title>企视录官网</title>
<link href="logo_128.ico" rel="Shortcut Icon">
<link rel="stylesheet" href="../css/index.css">
</head>
<body id="body">
<!--引入公用头部-->
<header>
<div class="logo">
<img src="../img/logo.png" alt=""/>
</div>
<ul>
<li >
<a href="" class="active">首页</a>
</li>
<!-- <li>
<a href="">直播间</a>
</li>-->
<li>
<a href="">案列</a>
</li>
<li>
<a href="">图库</a>
</li>
</ul>
<a class="login">
登录
</a>
</header>
<article class="gallery activeDetails">
<!--头部封面-->
<section class="coverShow">
<div class="coverImg">
<img src="../img/coverImg.jpg" alt=""/>
</div>
<div class="intro">
<h3>活动名称</h3>
<ul>
<li>
<i></i><span>2016.9.12</span>
</li>
<li>
<i></i><span>品牌:米拍</span>
</li>
<li>
<i></i><span>客户:可以文化</span>
</li>
<li>
<i></i><span>浏览量:235632</span>
</li>
</ul>
<p>
活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介
</p>
</div>
</section>
<section>
<div class="activeContent">
<!--引入遮罩图片列表-->
<ul class="lists">
<li>
<a href="">
<div class="picture">
<img src="../img/testImg.jpg" alt=""/>
</div>
<div class="mask">
<span>
<h4>LOGO</h4>
<p>雷迪波尔</p>
</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
</div>
<div class="mask">
<span>
<h4>LOGO</h4>
<p>雷迪波尔</p>
</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
</div>
<div class="mask">
<span>
<h4>LOGO</h4>
<p>雷迪波尔</p>
</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
</div>
<div class="mask">
<span>
<h4>LOGO</h4>
<p>雷迪波尔</p>
</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
</div>
<div class="mask">
<span>
<h4>LOGO</h4>
<p>雷迪波尔</p>
</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
</div>
<div class="mask">
<span>
<h4>LOGO</h4>
<p>雷迪波尔</p>
</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
</div>
<div class="mask">
<span>
<h4>LOGO</h4>
<p>雷迪波尔</p>
</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
</div>
<div class="mask">
<span>
<h4>LOGO</h4>
<p>雷迪波尔</p>
</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
</div>
<div class="mask">
<span>
<h4>LOGO</h4>
<p>雷迪波尔</p>
</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
</div>
<div class="mask">
<span>
<h4>LOGO</h4>
<p>雷迪波尔</p>
</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
</div>
<div class="mask">
<span>
<h4>LOGO</h4>
<p>雷迪波尔</p>
</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
</div>
<div class="mask">
<span>
<h4>LOGO</h4>
<p>雷迪波尔</p>
</span>
</div>
</a>
</li>
</ul>
</div>
<div class="pageDiv"></div>
</section>
</article>
<!--引入公用版权部分-->
<footer>
<p>©北京约拍啦网络科技有限公司旗下网站-<a href="http://www.yuepai365.cn">企视录</a> <a href="http://www.miibeian.gov.cn/">蜀ICP备14015734号-5</a></p>
<ul>
<li><a href="">隐私条款</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">工作机会</a></li>
<li><a href="">关于我们</a></li>
</ul>
</footer>
<!--<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../js/jquery-1.11.1.js"></script>
<script src="../js/responsiveslides.min.js"></script>
<script src="../js/jquery.page.js"></script>
<script>
/*大轮播效果*/
$(function () {
$("#slider").responsiveSlides({
auto: false,
nav: true,
speed: 500,
pager: true,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!--分页参数配置-->
<script type="text/javascript">
$(function(){$(".pageDiv").createPage({
pageCount:9,//总页数
current:1,//当前页
turndown:'true',//是否显示跳转框,显示为true,不现实为false,一定记得加上引号...
backFn:function(p){
console.log(p);
}
});
})
</script>
</body>
</html>
......@@ -68,7 +68,7 @@
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
<img src="../img/testImg.jpg" alt=""/>
</div>
<div class="mask">
<span>
......
......@@ -234,8 +234,8 @@
<section class="appoint">
<form action="http://www.baidu.com" id="form">
<span>预约服务</span>
<label for="">姓名</label> <input type="text" value="" placeholder="12位字符内的英文或汉字" id="name" onblur="regValidation(this,0,org_people)"/>
<label for="">电话</label> <input type="text" value="" placeholder="请输入11位手机号" id="tel" onblur="regValidation(this,0,phones)"/>
<label for="">姓名</label> <input type="text" value="" placeholder="12位字符内的英文或汉字" id="name" onchange="regValidation(this,0,org_people)"/>
<label for="">电话</label> <input type="text" value="" placeholder="请输入11位手机号" id="tel" onchange="regValidation(this,0,phones)"/>
<input type="button" value="提交" id="submitBtn"/>
<small class="_regular"></small>
</form>
......@@ -277,7 +277,7 @@
<!--<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../js/jquery-1.11.1.js"></script>
<script src="../js/validate.js"></script>
<!--<script src="../js/validate.js"></script>-->
<script src="../js/responsiveslides.min.js"></script>
<script src="../js/jquery.mousewheel-3.1.12.js"></script>
<script src="../js/jquery.jcarousellite.min.js"></script>
......@@ -291,13 +291,13 @@
nav: true,
speed: 500,
pager: true,
namespace: "callbacks",
before: function () {
namespace: "callbacks"
/* before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
}*/
});
});
</script>
......@@ -320,7 +320,38 @@
}).mouseleave(function(){
$("#largeShow").addClass("active").siblings().removeClass();
})
/*表单提交验证*/
var org_people= /^[\u4E00-\uFA29a-zA-Z ]{1,12}$/; //验证昵称 英文、汉字共1-12位;
var phones=/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8]))\d{8}$/; //只限11位手机号码
function regValidation(obj,n,regName){
var i=$('.regular').eq(n);
var p=$('._regular').eq(n);
var This=$(obj);
if(regName.test(This.val())&&This.val()!=''){
p.text("");
if(regName==phones){
$("#tel").css("border","none");
}else if(regName=org_people){
$("#name").css("border","none");
}
return true;
}else{
p.css({
"color":"red",
"margin-left":"0.5rem"
})
if(regName==phones){
$("#tel").css("border","1px solid red");
p.text("手机号格式错误");
}else if(regName=org_people){
$("#name").css("border","1px solid red");
p.text("姓名格式错误");
}
return false;
}
}
$("#submitBtn").click(function(){
if(regValidation($("#name"),0,org_people)&&regValidation($("#tel"),0,phones)){
$("#form").submit();
......
......@@ -10,6 +10,7 @@
"browser-sync": "^2.15.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-buffer": "0.0.2",
"gulp-ejs": "^2.2.0",
"gulp-html-import": "0.0.2",
"gulp-imagemin": "^3.0.3",
......
......@@ -14,14 +14,14 @@ header{
>ul li{
float: left;
font-size:16px;
margin:40px 15px auto 15px;
margin:35px 15px auto 15px;
line-height: 50px;
a{
color: #FFFFFF;
&.active{
color:#1dd2af;
border-bottom:4px solid #1dd2af;
padding-bottom: 15px;
border-bottom:5px solid #1dd2af;
padding-bottom:21px;
}
}
}
......@@ -30,7 +30,7 @@ header{
color:#ffffff;
float: right;
font-size: 12px;
margin: 62px 62px auto auto;
margin: 50px 62px auto auto;
}
}
......@@ -42,6 +42,8 @@ footer{
>p{
color:#4f626f;
font-size:14px;
float: left;
margin-top: 13px;
a{
color:#4f626f;
font-size:14px;
......@@ -49,6 +51,7 @@ footer{
}
>ul li{
float: right;
margin-top: 10px;
>a{
color:#ffffff;
margin: 0 15px;
......
......@@ -24,7 +24,11 @@
position: relative;
border-radius: 4px;
img{
.img_middle();
/* .img_middle();*/
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
}
.mask{
......
......@@ -63,6 +63,7 @@
.button(@width,@height,@bg,@color){
width:@width;
height:@height;
line-height:@height;
background: @bg;
color: @color;
outline: none;
......
......@@ -155,6 +155,7 @@
line-height: 20px;
height: 40px;
width: 94%;
text-align: left;
.ellipsis(2);
}
}
......@@ -299,10 +300,21 @@ article.case {
line-height: 50px;
margin-bottom: 40px;
}
h4{
font-size: 16px;
text-align: center;
line-height: 30px;
margin-bottom: 20px;
font-weight: 500;
>i{
display: inline-block;
}
}
p{
font-size: 14px;
line-height: 30px;
text-indent: 32px;
letter-spacing: 2px;
}
}
.caseContent{
......@@ -352,6 +364,10 @@ article.case {
}
}
}
.htmlContent{
.margin-auto(1200px,auto);
padding: 20px;
}
}
/*图库页面*/
.gallery{
......@@ -474,3 +490,180 @@ article.case {
}
}
}
/*活动详情页*/
.activeDetails{
.margin-auto(1200px,auto);
background: #e4e4e2;
padding: 80px 100px;
.coverShow{
.margin-auto(1000px,auto);
border: 1px solid #EEEEEE;
padding: 5px;
background: #fff;
padding-bottom: 30px;
.coverImg{
.margin-auto(984px,348px);
position: relative;
img{
.img_middle();
}
}
.intro{
h3{
text-align: center;
font-size: 26px;
line-height: 80px;
}
ul{
display: block;
.clearfix();
padding: 0px 160px 20px 160px;
text-align: center;
li{
float: left;
padding: 0 20px;
color: #d0d3d7;
font-size: 16px;
>i{
display: inline-block;
width: 20px;
height: 20px;
margin-right:10px;
vertical-align: middle;
}
}
}
p{
padding: 0px 100px;
line-height: 30px;
font-size: 16px;
}
}
}
.activeContent{
margin-top: 100px;
.maskLists();
ul.lists li{
width: 225px;
height: 225px;
padding: 5px;
margin: 0px 32px 32px 0px;
background: #ffffff;
border: 1px solid #EEEEEE;
&:nth-child(3),
&:nth-child(6),
&:nth-child(9),
&:nth-child(12){
margin: 0px 32px 32px 0px;
}
&:nth-child(4),
&:nth-child(8),
&:nth-child(12),
&:nth-child(16){
margin: 0px 0px 32px 0px;
}
a .picture{
width: 225px;
img{
width: 94.5%;
height: 98.5%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0px;
}
}
a .mask {
.mask(223px, 223px, #37404c, 0.6, 4px);
border: 5px solid #1dd2af;
margin: -5px;
}
}
}
}
/*活动也界面*/
.activity{
.margin-auto(1200px,auto);
text-align: center;
padding: 70px 0;
.title{
h2{
font-size: 28px;
text-align: center;
line-height: 60px;
}
div{
height: 120px;
line-height: 120px;
a{
display: inline-block;
font-size: 14px;
.button(63px,34px,#ebeef2,#000);
border-radius:0px;
}
a.active{
.button(63px,34px,#1dd2af,#fff);
border-radius:0px;
}
}
}
.activeSlide{
height:auto;
ul li{
display: block;
float: none;
height: auto;
width: 100%;
.activeTitle{
height: 80px;
line-height: 80px;
text-align: center;
margin-bottom: -20px;
margin-top: 20px;
h3{
position: relative;
text-align: center;
font-size: 20px;
span{
position: absolute;
top: 5%;
left: 82px;
font-size: 18px;
font-weight:500;
i{
display: inline-block;
width:32px;
height: 32px;
margin-right: 10px;
vertical-align: middle;
}
}
}
}
.activeCarousel{
height: 260px;
padding: 0;
ul li{
div{
.margin-auto(225px,120px);
}
h3{
font-size: 14px;
padding: 0 10px;
line-height: 25px;
}
p{
font-size: 12px;
text-align: left;
padding: 0 10px;
line-height: 17px;
height: 20px;
}
}
}
/* .prev,
.next{
top:28%
}*/
}
}
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="screen-orientation" content="horizontal">
<meta content="telephone=no" name="format-detection" />
<meta name="keywords" content="企业肖像,企业产品,企业广告,会议跟拍,企业宣传,VR摄影,VR直播,全方位影像服务">
<meta name="description" content="企视录提供企业肖像、企业产品、企业广告、会议跟拍、企业宣传片、VR摄影、VR直播等全方位影像服务,可满足企业全面需求,目前企视录合作摄影师覆盖全国主要一二线城市,可在全国范围内提供企业视觉服务,企视录自主开发的SAAS影像管理系统,可以满足企业影像存储、管理、分发、媒体发布等全方位需求,可有效提高企业运营效率。">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content=”IE=edge,chrome=1″ />
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
<title>企视录官网</title>
<link href="logo_128.ico" rel="Shortcut Icon">
<link rel="stylesheet" href="../css/index.css">
</head>
<body id="body">
<!--引入公用头部-->
<% include ./common/header.ejs %>
<article class="caseTitle">
<section class="intro">
<h2>案例标题</h2>
<div>
<h4><i></i>2016.9.12</h4>
<p>服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容服务介绍相关内容</p>
</div>
</section>
<section class="htmlContent">
</section>
</article>
<!--引入公用版权部分-->
<% include ./common/footer.ejs %>
<!--<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../js/jquery-1.11.1.js"></script>
<script>
</script>
</body>
</html>
......@@ -2,7 +2,7 @@
<li>
<a href="">
<div class="picture">
<img src="../img/text4.png" alt=""/>
<img src="../img/testImg.jpg" alt=""/>
</div>
<div class="mask">
<span>
......
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="screen-orientation" content="horizontal">
<meta content="telephone=no" name="format-detection" />
<meta name="keywords" content="企业肖像,企业产品,企业广告,会议跟拍,企业宣传,VR摄影,VR直播,全方位影像服务">
<meta name="description" content="企视录提供企业肖像、企业产品、企业广告、会议跟拍、企业宣传片、VR摄影、VR直播等全方位影像服务,可满足企业全面需求,目前企视录合作摄影师覆盖全国主要一二线城市,可在全国范围内提供企业视觉服务,企视录自主开发的SAAS影像管理系统,可以满足企业影像存储、管理、分发、媒体发布等全方位需求,可有效提高企业运营效率。">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content=”IE=edge,chrome=1″ />
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
<title>企视录官网</title>
<link href="logo_128.ico" rel="Shortcut Icon">
<link rel="stylesheet" href="../css/style-demo.css">
<link rel="stylesheet" href="../css/index.css">
</head>
<body id="body">
<!--引入公用头部-->
<% include ./common/header.ejs %>
<article class="activity">
<!--title-->
<section class="title">
<h2>企业名称</h2>
<!-- <div>
<a class="active">活动</a><a>直播</a>
</div>-->
</section>
<!--合作商家-->
<section class="cooperation activeSlide">
<ul>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev"></a>
<div class="carousel case activeCarousel">
<ul>
<li>
<a href="">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li class="active largeShow" id="largeShow">
<a href="">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
</ul>
</div>
<a href="#" class="next"></a>
<div class="clear"></div>
</div>
</li>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev"></a>
<div class="carousel case activeCarousel">
<ul>
<li>
<a href="">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li class="active largeShow" id="largeShow">
<a href="">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
<li>
<a href="">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
</ul>
</div>
<a href="#" class="next"></a>
<div class="clear"></div>
</div>
</li>
</ul>
</section>
</article>
<!--引入公用版权部分-->
<% include ./common/footer.ejs %>
<!--<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../js/jquery-1.11.1.js"></script>
<script src="../js/jquery.mousewheel-3.1.12.js"></script>
<script src="../js/jquery.jcarousellite.min.js"></script>
<!--五张图轮播效果-->
<script type="text/javascript">
$(".mouseWheelButtons .carousel").jCarouselLite({
btnNext: ".mouseWheelButtons .next",
btnPrev: ".mouseWheelButtons .prev",
mouseWheel: true,
circular: true,
speed: 1000,
visible: 5,
scroll: 5
});
</script>
<script>
/*案例模块放大效果*/
$(".activeCarousel ul li").mouseenter(function(){
$(this).addClass("active").siblings().removeClass("active");
}).mouseleave(function(){
$("#largeShow").addClass("active").siblings().removeClass("active");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="screen-orientation" content="horizontal">
<meta content="telephone=no" name="format-detection" />
<meta name="keywords" content="企业肖像,企业产品,企业广告,会议跟拍,企业宣传,VR摄影,VR直播,全方位影像服务">
<meta name="description" content="企视录提供企业肖像、企业产品、企业广告、会议跟拍、企业宣传片、VR摄影、VR直播等全方位影像服务,可满足企业全面需求,目前企视录合作摄影师覆盖全国主要一二线城市,可在全国范围内提供企业视觉服务,企视录自主开发的SAAS影像管理系统,可以满足企业影像存储、管理、分发、媒体发布等全方位需求,可有效提高企业运营效率。">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content=”IE=edge,chrome=1″ />
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
<title>企视录官网</title>
<link href="logo_128.ico" rel="Shortcut Icon">
<link rel="stylesheet" href="../css/index.css">
</head>
<body id="body">
<!--引入公用头部-->
<% include ./common/header.ejs %>
<article class="gallery activeDetails">
<!--头部封面-->
<section class="coverShow">
<div class="coverImg">
<img src="../img/coverImg.jpg" alt=""/>
</div>
<div class="intro">
<h3>活动名称</h3>
<ul>
<li>
<i></i><span>2016.9.12</span>
</li>
<li>
<i></i><span>品牌:米拍</span>
</li>
<li>
<i></i><span>客户:可以文化</span>
</li>
<li>
<i></i><span>浏览量:235632</span>
</li>
</ul>
<p>
活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介
</p>
</div>
</section>
<section>
<div class="activeContent">
<!--引入遮罩图片列表-->
<% include ./common/maskLists.ejs %>
</div>
<div class="pageDiv"></div>
</section>
</article>
<!--引入公用版权部分-->
<% include ./common/footer.ejs %>
<!--<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../js/jquery-1.11.1.js"></script>
<script src="../js/responsiveslides.min.js"></script>
<script src="../js/jquery.page.js"></script>
<script>
/*大轮播效果*/
$(function () {
$("#slider").responsiveSlides({
auto: false,
nav: true,
speed: 500,
pager: true,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!--分页参数配置-->
<script type="text/javascript">
$(function(){$(".pageDiv").createPage({
pageCount:9,//总页数
current:1,//当前页
turndown:'true',//是否显示跳转框,显示为true,不现实为false,一定记得加上引号...
backFn:function(p){
console.log(p);
}
});
})
</script>
</body>
</html>
......@@ -213,8 +213,8 @@
<section class="appoint">
<form action="http://www.baidu.com" id="form">
<span>预约服务</span>
<label for="">姓名</label> <input type="text" value="" placeholder="12位字符内的英文或汉字" id="name" onblur="regValidation(this,0,org_people)"/>
<label for="">电话</label> <input type="text" value="" placeholder="请输入11位手机号" id="tel" onblur="regValidation(this,0,phones)"/>
<label for="">姓名</label> <input type="text" value="" placeholder="12位字符内的英文或汉字" id="name" onchange="regValidation(this,0,org_people)"/>
<label for="">电话</label> <input type="text" value="" placeholder="请输入11位手机号" id="tel" onchange="regValidation(this,0,phones)"/>
<input type="button" value="提交" id="submitBtn"/>
<small class="_regular"></small>
</form>
......@@ -248,7 +248,7 @@
<!--<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../js/jquery-1.11.1.js"></script>
<script src="../js/validate.js"></script>
<!--<script src="../js/validate.js"></script>-->
<script src="../js/responsiveslides.min.js"></script>
<script src="../js/jquery.mousewheel-3.1.12.js"></script>
<script src="../js/jquery.jcarousellite.min.js"></script>
......@@ -262,13 +262,13 @@
nav: true,
speed: 500,
pager: true,
namespace: "callbacks",
before: function () {
namespace: "callbacks"
/* before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
}*/
});
});
</script>
......@@ -291,7 +291,38 @@
}).mouseleave(function(){
$("#largeShow").addClass("active").siblings().removeClass();
})
/*表单提交验证*/
var org_people= /^[\u4E00-\uFA29a-zA-Z ]{1,12}$/; //验证昵称 英文、汉字共1-12位;
var phones=/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8]))\d{8}$/; //只限11位手机号码
function regValidation(obj,n,regName){
var i=$('.regular').eq(n);
var p=$('._regular').eq(n);
var This=$(obj);
if(regName.test(This.val())&&This.val()!=''){
p.text("");
if(regName==phones){
$("#tel").css("border","none");
}else if(regName=org_people){
$("#name").css("border","none");
}
return true;
}else{
p.css({
"color":"red",
"margin-left":"0.5rem"
})
if(regName==phones){
$("#tel").css("border","1px solid red");
p.text("手机号格式错误");
}else if(regName=org_people){
$("#name").css("border","1px solid red");
p.text("姓名格式错误");
}
return false;
}
}
$("#submitBtn").click(function(){
if(regValidation($("#name"),0,org_people)&&regValidation($("#tel"),0,phones)){
$("#form").submit();
......
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