Skip to content

Q
qsl_web
Commit 8bd72504 by 邓丽
Options

fixbug

parent 2cd0947d
Showing with 553 additions and 341 deletions
dist/css/index.css
......@@ -268,8 +268,8 @@ header > ul li a {
}
header > ul li.active a {
color: #1dd2af;
border-bottom: 5px solid #1dd2af;
padding-bottom: 21px;
border-bottom: 6px solid #1dd2af;
padding-bottom: 22px;
}
header > .loginWord {
display: inline-block;
......@@ -595,7 +595,7 @@ th {
.slideImg {
margin: 0 auto;
width: 1200px;
height: 556px;
height: 600px;
overflow: hidden;
}
.comIndex {
......@@ -837,7 +837,7 @@ th {
}
.case > ul li div {
width: 100%;
height: 280px;
height: 267px;
overflow: hidden;
margin-bottom: 15px;
opacity: 0.7;
......@@ -852,7 +852,7 @@ th {
font-size: 16px;
color: #999;
padding: 0 20px;
line-height: 30px;
line-height: 37px;
text-align: left;
/* display: -webkit-box;*/
overflow: hidden;
......@@ -894,7 +894,7 @@ th {
}
.case > ul li.active h3 {
color: #fff;
line-height: 25px;
line-height: 30px;
}
.case > ul li.active p {
color: #8899a8;
......@@ -1019,14 +1019,14 @@ th {
article.case {
margin: 0 auto;
width: 1200px;
height: 880px;
height: 900px;
overflow: hidden;
background: #fff;
padding: 100px 140px 30px 140px;
padding: 60px 140px 30px 140px;
}
article.case section ul.lists li {
width: 294px;
height: 215px;
height: 245px;
float: left;
margin: 0px 15px 20px 0px;
overflow: hidden;
......@@ -1043,7 +1043,7 @@ article.case section ul.lists li a {
}
article.case section ul.lists li a .picture {
width: 294px;
height: 215px;
height: 245px;
overflow: hidden;
position: relative;
border-radius: 4px;
......@@ -1057,7 +1057,7 @@ article.case section ul.lists li a .picture img {
}
article.case section ul.lists li a .mask {
width: 294px;
height: 215px;
height: 245px;
background: none;
opacity: 1;
border-radius: 4px;
......@@ -1067,7 +1067,7 @@ article.case section ul.lists li a .mask {
}
article.case section ul.lists li a .mask span {
display: block;
margin: 26% auto;
margin: 35% auto;
}
article.case section ul.lists li a .mask span h4 {
line-height: 28px;
......@@ -1205,7 +1205,7 @@ article.case section:after {
.caseTitle .caseContent div ul li div.img {
margin: 0 auto;
width: 820px;
height: 558px;
height: 547px;
overflow: hidden;
position: relative;
padding: 15px;
......@@ -1268,13 +1268,13 @@ article.case section:after {
}
.gallery .coverSlide {
margin: 0 auto;
width: 935px;
height: 444px;
width: 940px;
height: 470px;
overflow: hidden;
}
.gallery .coverSlide p {
font-size: 44px;
top: 28%;
top: 29%;
}
.gallery .search {
width: 100%;
......@@ -1327,7 +1327,7 @@ article.case section:after {
}
.gallery .searchContent ul.lists li {
width: 294px;
height: 215px;
height: 202px;
float: left;
margin: 0px 15px 20px 0px;
overflow: hidden;
......@@ -1344,7 +1344,7 @@ article.case section:after {
}
.gallery .searchContent ul.lists li a .picture {
width: 294px;
height: 215px;
height: 202px;
overflow: hidden;
position: relative;
border-radius: 4px;
......@@ -1358,7 +1358,7 @@ article.case section:after {
}
.gallery .searchContent ul.lists li a .mask {
width: 304px;
height: 215px;
height: 202px;
background: #37404c;
opacity: 0.6;
border-radius: 4px;
......@@ -1413,9 +1413,11 @@ article.case section:after {
}
.gallery .searchContent ul.lists li {
width: 304px;
height: 202px;
}
.gallery .searchContent ul.lists li a .picture {
width: 304px;
height: 202px;
}
.gallery .searchContent ul.lists li a .mask span {
display: block;
......@@ -1523,7 +1525,7 @@ article.case section:after {
.activeDetails .coverShow .coverImg {
margin: 0 auto;
width: 984px;
height: 348px;
height: 492px;
overflow: hidden;
position: relative;
}
......@@ -1544,8 +1546,7 @@ article.case section:after {
}
.activeDetails .coverShow .intro ul {
display: block;
padding: 0px 160px 20px 160px;
text-align: center;
padding: 0px 100px 0px 100px;
}
.activeDetails .coverShow .intro ul:before,
.activeDetails .coverShow .intro ul:after {
......@@ -1557,9 +1558,15 @@ article.case section:after {
}
.activeDetails .coverShow .intro ul li {
float: left;
padding: 0 20px;
/* min-width: 33%;*/
color: #999;
font-size: 16px;
margin-bottom: 20px;
text-align: center;
padding: 0 20px;
/* &:nth-child(3){
float: right;
}*/
}
.activeDetails .coverShow .intro ul li > i {
display: inline-block;
......@@ -1603,7 +1610,7 @@ article.case section:after {
}
.activeDetails .activeContent ul.lists li {
width: 294px;
height: 215px;
height: 202px;
float: left;
margin: 0px 15px 20px 0px;
overflow: hidden;
......@@ -1620,7 +1627,7 @@ article.case section:after {
}
.activeDetails .activeContent ul.lists li a .picture {
width: 294px;
height: 215px;
height: 202px;
overflow: hidden;
position: relative;
border-radius: 4px;
......@@ -1634,7 +1641,7 @@ article.case section:after {
}
.activeDetails .activeContent ul.lists li a .mask {
width: 304px;
height: 215px;
height: 202px;
background: #37404c;
opacity: 0.6;
border-radius: 4px;
......@@ -1739,18 +1746,16 @@ article.case section:after {
.activity .title .bannerBg {
margin: 0 auto;
width: 1200px;
height: 565px;
height: 600px;
overflow: hidden;
position: relative;
background: #ccc;
/* margin-bottom: 30px;*/
}
.activity .title .bannerBg .bgImg {
position: absolute;
z-index: -1;
margin: 0 auto;
width: 1200px;
height: 565px;
height: 600px;
overflow: hidden;
}
.activity .title .bannerBg .bgImg img {
......@@ -1759,7 +1764,16 @@ article.case section:after {
-o-object-fit: cover;
object-fit: cover;
}
.activity .title .bannerBg .bgImg .maskBg {
position: absolute;
top: 0px;
left: 0px;
}
.activity .title .bannerBg .logo {
position: absolute;
top: 0px;
left: 44%;
z-index: 2;
margin: 0 auto;
width: 140px;
height: 140px;
......@@ -1767,7 +1781,7 @@ article.case section:after {
border-radius: 50%;
background: #dddddd;
border: 4px solid #FFFFFF;
margin-top: 12%;
margin-top: 14%;
}
.activity .title .bannerBg .logo img {
width: 100%;
......@@ -1780,6 +1794,9 @@ article.case section:after {
text-align: center;
line-height: 80px;
color: #FFFFFF;
position: relative;
top: -240px;
z-index: 3;
}
.activity .title .tabs {
height: 120px;
......@@ -1856,8 +1873,8 @@ article.case section:after {
}
.activity .activeSlide ul li .activeCarousel ul li div {
margin: 0 auto;
width: 225px;
height: 120px;
width: 160px;
height: 125px;
overflow: hidden;
}
.activity .activeSlide ul li .activeCarousel ul li h3 {
......@@ -1869,8 +1886,10 @@ article.case section:after {
font-size: 12px;
text-align: left;
padding: 0 10px;
line-height: 17px;
height: 20px;
line-height: 36px;
}
.activity .activeSlide ul li .activeCarousel ul li.active p {
line-height: 28px;
}
.activity .space {
text-align: center;
......
dist/css/jcarousellite.css
......@@ -268,8 +268,8 @@ header > ul li a {
}
header > ul li.active a {
color: #1dd2af;
border-bottom: 5px solid #1dd2af;
padding-bottom: 21px;
border-bottom: 6px solid #1dd2af;
padding-bottom: 22px;
}
header > .loginWord {
display: inline-block;
......@@ -602,14 +602,14 @@ th {
/* Styling for image based carousel content. Only width and height are mandatory */
.cooperation .carousel > ul > li {
width: 160px !important;
height: 171px !important;
line-height: 171px !important;
height: 160px !important;
line-height: 160px !important;
text-align: center;
margin: 50px 20px;
margin: 55px 20px;
}
.cooperation .carousel > ul > li > img {
width: 100%;
height: auto;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
vertical-align: middle;
......
dist/css/largeSlides.css
......@@ -268,8 +268,8 @@ header > ul li a {
}
header > ul li.active a {
color: #1dd2af;
border-bottom: 5px solid #1dd2af;
padding-bottom: 21px;
border-bottom: 6px solid #1dd2af;
padding-bottom: 22px;
}
header > .loginWord {
display: inline-block;
......@@ -677,7 +677,7 @@ h3 {
.callbacks li {
position: absolute;
width: 100%;
height: 555px;
height: 600px;
left: 0;
top: 0;
}
......@@ -685,9 +685,10 @@ h3 {
display: block;
position: relative;
z-index: 1;
height: 555px;
height: 100%;
width: 100%;
border: 0;
overflow: hidden;
}
.callbacks img.maskBg {
position: absolute;
......@@ -702,7 +703,7 @@ h3 {
font-size: 60px;
text-shadow: none;
color: #fff;
top: 35%;
top: 38%;
padding: 10px 20px;
margin: 0;
max-width: none;
......@@ -710,7 +711,7 @@ h3 {
}
.callbacks_nav {
position: absolute;
top: 49%;
top: 50.5%;
left: 38px;
opacity: 0.7;
z-index: 3;
......@@ -767,6 +768,6 @@ li.callbacks_here {
font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.callbacks_nav {
top: 47%;
top: 51%;
}
}
dist/html/gal_activity.html
......@@ -73,8 +73,8 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像1</p>
</a>
</li>
<li>
......@@ -82,8 +82,8 @@
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像2</p>
</a>
</li>
<li>
......@@ -91,7 +91,7 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
......@@ -100,17 +100,41 @@
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
</ul>
</div>
<a href="#" class="next" id="next0"></a>
<div class="clear"></div>
</div>
</li>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称2</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev" id="prev1"></a>
<div class="carousel case activeCarousel" id="activeCarousel1">
<ul>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像1</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<p>企视录影像2</p>
</a>
</li>
<li>
......@@ -118,8 +142,8 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像3</p>
</a>
</li>
<li>
......@@ -127,40 +151,26 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像4</p>
</a>
</li>
</ul>
</div>
<a href="#" class="next" id="next0"></a>
<div class="clear"></div>
</div>
</li>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称2</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev" id="prev1"></a>
<div class="carousel case activeCarousel" id="activeCarousel1">
<ul>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像5</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像6</p>
</a>
</li>
<li>
......@@ -168,40 +178,26 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像7</p>
</a>
</li>
</ul>
</div>
<a href="#" class="next" id="next1"></a>
<div class="clear"></div>
</div>
</li>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称3</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev" id="prev2"></a>
<div class="carousel case activeCarousel" id="activeCarousel2">
<ul>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚1</h3>
<p>企视录影像</p>
<p>企视录影像8</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚2</h3>
<p>企视录影像</p>
<p>企视录影像9</p>
</a>
</li>
<li>
......@@ -209,17 +205,17 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚3</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚6</h3>-->
<p>企视录影像10</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚4</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚7</h3>-->
<p>企视录影像11</p>
</a>
</li>
<li>
......@@ -227,8 +223,8 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚5</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚8</h3>-->
<p>企视录影像12</p>
</a>
</li>
<li>
......@@ -236,8 +232,8 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚6</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚9</h3>-->
<p>企视录影像13</p>
</a>
</li>
<li>
......@@ -245,8 +241,8 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚7</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚10</h3>-->
<p>企视录影像14</p>
</a>
</li>
<li>
......@@ -254,8 +250,8 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚8</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚11</h3>-->
<p>企视录影像15</p>
</a>
</li>
<li>
......@@ -263,17 +259,40 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚9</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚12</h3>-->
<p>企视录影像16</p>
</a>
</li>
</ul>
</div>
<a href="#" class="next" id="next1"></a>
<div class="clear"></div>
</div>
</li>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称3</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev" id="prev2"></a>
<div class="carousel case activeCarousel" id="activeCarousel2">
<ul>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚10</h3>
<p>企视录影像</p>
<p>企视录影像1</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<p>企视录影像2</p>
</a>
</li>
<li>
......@@ -281,8 +300,17 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚11</h3>
<p>企视录影像</p>
<p>企视录影像3</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<p>企视录影像4</p>
</a>
</li>
<li>
......@@ -290,8 +318,26 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚12</h3>
<p>企视录影像</p>
<p>企视录影像5</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<p>企视录影像6</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<p>企视录影像7</p>
</a>
</li>
......@@ -357,10 +403,11 @@
btnNext:next,
btnPrev:prev,
mouseWheel: true,
circular: false,
circular: true,
speed: 800,
visible: 5,
scroll: 5
scroll: 5,
disabledClass: "disabled"
});
/*中间一个添加选中样式*/
......
dist/html/gal_activityDetails.html
......@@ -59,9 +59,9 @@
<li>
<i class="client"></i><span>客户：可以文化</span>
</li>
<li>
<!-- <li>
<i class="view"></i><span>浏览量：235632</span>
</li>
</li>-->
</ul>
<p>
活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介
......
dist/html/index.html
......@@ -210,25 +210,25 @@
<h3>维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚</h3>
<p>企视录提供企业肖像、企业产品、企业广告、会议跟拍、企业宣传片、VR摄影、VR直播等全方位影像服务，可满足企业全面需求，目前企视录合作摄影师覆盖全国主要一二线城市，可在全国范围内提供企业视觉服务，企视录自主开发的SAAS影像管理系统，可以满足企业影像存储、管理、分发、媒体发布等全方位需求，可有效提高企业运营效率。</p>
</a>
</li>
<li class="active" 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/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
</li>
<li class="active" 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/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>-->
</ul>
</section>
<!--影像服务-->
......@@ -250,23 +250,23 @@
<!--合作商家-->
<section class="cooperation">
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev"></a>
<a href="#" class="prev prevBtn"></a>
<div class="carousel">
<ul>
<li><img src="../img/text1.png"></li>
<li><img src="../img/text2.png"></li>
<li><img src="../img/text3.png"></li>
<li><img src="../img/text4.png"></li>
<li><img src="../img/text5.png"></li>
<li><img src="../img/text3.png"></li>
<li><img src="../img/text4.png"></li>
<li><img src="../img/text2.png"></li>
<li><img src="../img/text5.png"></li>
<li><img src="../img/text1.png"></li>
<li><img src="../img/text3.png"></li>
<li><img src="../img/text2.png"></li>
<li><img src="../img/text3.png"></li>
<!-- <li><img src="../img/text4.png"></li>
<li><img src="../img/text5.png"></li>
<li><img src="../img/text3.png"></li>
<li><img src="../img/text4.png"></li>
<li><img src="../img/text2.png"></li>
<li><img src="../img/text5.png"></li>
<li><img src="../img/text1.png"></li>
<li><img src="../img/text3.png"></li>-->
</ul>
</div>
<a href="#" class="next"></a>
<a href="#" class="next nextBtn"></a>
<div class="clear"></div>
</div>
</section>
......@@ -302,18 +302,6 @@
});
});
</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>
......@@ -332,11 +320,63 @@
</script>
<script>
/*案例模块放大效果*/
$(".case ul li").mouseenter(function(){
$(this).addClass("active").siblings().removeClass();
}).mouseleave(function(){
$("#largeShow").addClass("active").siblings().removeClass();
})
window.onload = function() {
var lis = $(".case ul li");
var l=lis.size();
if(l==1){
lis.css("margin-left",37+'%');
lis.mouseenter(function () {
$(this).addClass("active").siblings().removeClass();
}).mouseleave(function () {
$(this).removeClass("active");
})
}else if(l==2){
lis.css("margin-left",13.5+'%');
lis.mouseenter(function () {
$(this).addClass("active").siblings().removeClass();
}).mouseleave(function () {
$(this).addClass("active");
})
}else if(l==3){
lis.mouseenter(function () {
$(this).addClass("active").siblings().removeClass();
}).mouseleave(function () {
$(this).removeClass("active");
lis.eq(1).addClass("active").siblings().removeClass();
})
}
<!--五张图轮播效果-->
var carousel=$(".carousel");
var len = $(".carousel ul li").size();
if(len<=5){
$(".prevBtn").css("display","none");
$(".nextBtn").css("display","none");
$(".mouseWheelButtons .carousel").jCarouselLite({
circular: false,
visible:len
});
if(len==1){
carousel.css("margin-left",39+'%');
}else if(len==2){
carousel.css("margin-left",29+'%');
}else if(len==3){
carousel.css("margin-left",19+'%');
}else if(len==4){
carousel.css("margin-left",9+'%');
}
}else{
$(".mouseWheelButtons .carousel").jCarouselLite({
btnNext: ".mouseWheelButtons .next",
btnPrev: ".mouseWheelButtons .prev",
mouseWheel: true,
circular: true,
speed: 1000,
visible: 5,
scroll: 5
});
}
}
/*表单提交验证*/
var org_people= /^[\u4E00-\uFA29a-zA-Z ]{1,12}$/; //验证昵称 英文、汉字共1-12位;
......
src/less/common/header_footer.less
......@@ -7,9 +7,6 @@ header{
.margin-auto(117px,49px);
margin:26px 51px auto 74px;
float: left;
>img{
}
}
>ul li{
float: left;
......@@ -29,8 +26,8 @@ header{
&.active{
a{
color:#1dd2af;
border-bottom:5px solid #1dd2af;
padding-bottom:21px;
border-bottom:6px solid #1dd2af;
padding-bottom:22px;
}
}
}
......
src/less/common/maskLists.less
......@@ -4,7 +4,7 @@
.maskLists(){
ul.lists li{
width: 294px;
height: 215px;
height: 202px;
float: left;
margin: 0px 15px 20px 0px;
overflow: hidden;
......@@ -19,7 +19,7 @@
position: relative;
.picture{
width: 294px;
height: 215px;
height: 202px;
overflow: hidden;
position: relative;
border-radius: 4px;
......@@ -32,7 +32,7 @@
}
}
.mask{
.mask(304px,215px,#37404c,0.6,4px);
.mask(304px,202px,#37404c,0.6,4px);
span{
display: block;
margin: 41% auto;
......
src/less/index.less
......@@ -2,7 +2,7 @@
@import "./common/base.less";
/*轮播图模块*/
.slideImg{
.margin-auto(1200px,556px);
.margin-auto(1200px,600px);
overflow: hidden;
}
......@@ -189,7 +189,7 @@
background: #f6f6f6;
div{
width:100%;
height: 280px;
height: 267px;
overflow: hidden;
margin-bottom: 15px;
opacity: 0.7;
......@@ -204,7 +204,7 @@
font-size:16px;
color: #999;
padding:0 20px;
line-height: 30px;
line-height: 37px;
text-align: left;
.ellipsis(1);
font-weight:500;
......@@ -230,7 +230,7 @@
}
h3{
color: #fff;
line-height: 25px;
line-height: 30px;
}
p{
color: #8899a8;
......@@ -335,14 +335,14 @@ input[type='button']{
article.case {
margin: 0 auto;
width: 1200px;
height: 880px;
height: 900px;
overflow: hidden;
background: #fff;
padding: 100px 140px 30px 140px;
padding: 60px 140px 30px 140px;
section{
ul.lists li{
width: 294px;
height: 215px;
height: 245px;
float: left;
margin: 0px 15px 20px 0px;
overflow: hidden;
......@@ -357,7 +357,7 @@ article.case {
position: relative;
.picture{
width: 294px;
height: 215px;
height: 245px;
overflow: hidden;
position: relative;
border-radius: 4px;
......@@ -370,11 +370,11 @@ article.case {
}
}
.mask{
.mask(294px,215px,none,1,4px);
.mask(294px,245px,none,1,4px);
top:0px;
span{
display: block;
margin: 26% auto;
margin: 35% auto;
h4{
line-height:28px;
text-align: center;
......@@ -498,7 +498,7 @@ article.case {
margin: 70px auto 30px auto;
}
div.img{
.margin-auto(820px,558px);
.margin-auto(820px,547px);
position: relative;
padding: 15px;
border:1px solid #CCCCCC;
......@@ -545,10 +545,10 @@ article.case {
background: #fff;
padding: 80px 128px 0px 128px;
.coverSlide{
.margin-auto(935px,444px);
.margin-auto(940px,470px);
p{
font-size: 44px;
top: 28%;
top: 29%;
}
}
.search{
......@@ -591,8 +591,10 @@ article.case {
.maskLists();
ul.lists li{
width: 304px;
height: 202px;
a .picture{
width: 304px;
height: 202px;
}
a .mask span {
display: block;
......@@ -689,7 +691,7 @@ article.case {
background: #f4f4f4;
padding-bottom: 30px;
.coverImg{
.margin-auto(984px,348px);
.margin-auto(984px,492px);
position: relative;
img{
.img_middle();
......@@ -704,13 +706,15 @@ article.case {
ul{
display: block;
.clearfix();
padding: 0px 160px 20px 160px;
text-align: center;
padding: 0px 100px 0px 100px;
li{
float: left;
padding: 0 20px;
/* min-width: 33%;*/
color: #999;
font-size: 16px;
margin-bottom: 20px;
text-align: center;
padding: 0 20px;
>i{
display: inline-block;
width: 20px;
......@@ -731,6 +735,9 @@ article.case {
.view{
.sprite(@view);
}
/* &:nth-child(3){
float: right;
}*/
}
}
p{
......@@ -786,28 +793,34 @@ article.case {
text-align: center;
.title{
.bannerBg{
.margin-auto(1200px,565px);
.margin-auto(1200px,600px);
position: relative;
background: #ccc;
/* margin-bottom: 30px;*/
.bgImg{
position: absolute;
z-index: -1;
.margin-auto(1200px,565px);
.margin-auto(1200px,600px);
img{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.maskBg{
position: absolute;
top: 0px;
left: 0px;
}
}
.logo{
position: absolute;
top:0px;
left: 44%;
z-index:2;
.margin-auto(140px,140px);
border-radius: 50%;
background: #dddddd;
border: 4px solid #FFFFFF;
margin-top:12%;
margin-top:14%;
img{
width: 100%;
height: 100%;
......@@ -820,6 +833,9 @@ article.case {
text-align: center;
line-height: 80px;
color: #FFFFFF;
position: relative;
top: -240px;
z-index: 3;
}
}
.tabs{
......@@ -880,7 +896,7 @@ article.case {
top:3px;
ul li{
div{
.margin-auto(225px,120px);
.margin-auto(160px,125px);
}
h3{
font-size: 14px;
......@@ -891,8 +907,12 @@ article.case {
font-size: 12px;
text-align: left;
padding: 0 10px;
line-height: 17px;
height: 20px;
line-height: 36px;
}
&.active{
p{
line-height: 28px;
}
}
}
}
......
src/less/jcarousellite.less
......@@ -14,14 +14,14 @@
/* Styling for image based carousel content. Only width and height are mandatory */
.cooperation .carousel>ul>li {
width: 160px !important;
height: 171px !important;
line-height: 171px !important;
height: 160px !important;
line-height: 160px !important;
text-align: center;
margin: 50px 20px;
margin: 55px 20px;
}
.cooperation .carousel>ul>li>img {
width: 100%;
height: auto;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
vertical-align:middle;
......
src/less/largeSlides.less
......@@ -101,7 +101,7 @@ h3 {
.callbacks li {
position: absolute;
width: 100%;
height: 555px;
height:600px;
left: 0;
top: 0;
}
......@@ -110,9 +110,10 @@ h3 {
display: block;
position: relative;
z-index: 1;
height: 555px;
height:100%;
width: 100%;
border: 0;
overflow: hidden;
}
.callbacks img.maskBg{
position: absolute;
......@@ -127,7 +128,7 @@ h3 {
font-size: 60px;
text-shadow: none;
color: #fff;
top:35%;
top:38%;
padding: 10px 20px;
margin: 0;
max-width: none;
......@@ -136,7 +137,7 @@ h3 {
.callbacks_nav {
position: absolute;
top:49%;
top:50.5%;
left:38px;
opacity: 0.7;
z-index: 3;
......@@ -191,6 +192,6 @@ li.callbacks_here{
font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.callbacks_nav {
top: 47%;
top: 51%;
}
}
src/pages/gal_activity.ejs
......@@ -49,8 +49,8 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像1</p>
</a>
</li>
<li>
......@@ -58,8 +58,8 @@
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像2</p>
</a>
</li>
<li>
......@@ -67,7 +67,7 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
......@@ -76,17 +76,41 @@
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
</ul>
</div>
<a href="#" class="next" id="next0"></a>
<div class="clear"></div>
</div>
</li>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称2</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev" id="prev1"></a>
<div class="carousel case activeCarousel" id="activeCarousel1">
<ul>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像1</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<p>企视录影像2</p>
</a>
</li>
<li>
......@@ -94,8 +118,8 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像3</p>
</a>
</li>
<li>
......@@ -103,40 +127,26 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像4</p>
</a>
</li>
</ul>
</div>
<a href="#" class="next" id="next0"></a>
<div class="clear"></div>
</div>
</li>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称2</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev" id="prev1"></a>
<div class="carousel case activeCarousel" id="activeCarousel1">
<ul>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像5</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像6</p>
</a>
</li>
<li>
......@@ -144,40 +154,26 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
<p>企视录影像7</p>
</a>
</li>
</ul>
</div>
<a href="#" class="next" id="next1"></a>
<div class="clear"></div>
</div>
</li>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称3</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev" id="prev2"></a>
<div class="carousel case activeCarousel" id="activeCarousel2">
<ul>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚1</h3>
<p>企视录影像</p>
<p>企视录影像8</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚2</h3>
<p>企视录影像</p>
<p>企视录影像9</p>
</a>
</li>
<li>
......@@ -185,17 +181,17 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚3</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚6</h3>-->
<p>企视录影像10</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚4</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚7</h3>-->
<p>企视录影像11</p>
</a>
</li>
<li>
......@@ -203,8 +199,8 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚5</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚8</h3>-->
<p>企视录影像12</p>
</a>
</li>
<li>
......@@ -212,8 +208,8 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚6</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚9</h3>-->
<p>企视录影像13</p>
</a>
</li>
<li>
......@@ -221,8 +217,8 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚7</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚10</h3>-->
<p>企视录影像14</p>
</a>
</li>
<li>
......@@ -230,8 +226,8 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚8</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚11</h3>-->
<p>企视录影像15</p>
</a>
</li>
<li>
......@@ -239,17 +235,40 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚9</h3>
<p>企视录影像</p>
<!-- <h3>维多利亚12</h3>-->
<p>企视录影像16</p>
</a>
</li>
</ul>
</div>
<a href="#" class="next" id="next1"></a>
<div class="clear"></div>
</div>
</li>
<li>
<div class="activeTitle">
<h3><span><i></i>2016.6.25</span>活动名称3</h3>
</div>
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev" id="prev2"></a>
<div class="carousel case activeCarousel" id="activeCarousel2">
<ul>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚10</h3>
<p>企视录影像</p>
<p>企视录影像1</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<p>企视录影像2</p>
</a>
</li>
<li>
......@@ -257,8 +276,17 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚11</h3>
<p>企视录影像</p>
<p>企视录影像3</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<p>企视录影像4</p>
</a>
</li>
<li>
......@@ -266,8 +294,26 @@
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<h3>维多利亚12</h3>
<p>企视录影像</p>
<p>企视录影像5</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/testImg.jpg" alt=""/>
</div>
<p>企视录影像6</p>
</a>
</li>
<li>
<a href="../html/gal_activityDetails.html?c=2">
<div>
<img src="../img/case_img.png" alt=""/>
</div>
<p>企视录影像7</p>
</a>
</li>
......@@ -325,10 +371,11 @@
btnNext:next,
btnPrev:prev,
mouseWheel: true,
circular: false,
circular: true,
speed: 800,
visible: 5,
scroll: 5
scroll: 5,
disabledClass: "disabled"
});
/*中间一个添加选中样式*/
......
src/pages/gal_activityDetails.ejs
......@@ -35,9 +35,9 @@
<li>
<i class="client"></i><span>客户：可以文化</span>
</li>
<li>
<!-- <li>
<i class="view"></i><span>浏览量：235632</span>
</li>
</li>-->
</ul>
<p>
活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介
......
src/pages/index.ejs
......@@ -186,25 +186,25 @@
<h3>维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚维多利亚</h3>
<p>企视录提供企业肖像、企业产品、企业广告、会议跟拍、企业宣传片、VR摄影、VR直播等全方位影像服务，可满足企业全面需求，目前企视录合作摄影师覆盖全国主要一二线城市，可在全国范围内提供企业视觉服务，企视录自主开发的SAAS影像管理系统，可以满足企业影像存储、管理、分发、媒体发布等全方位需求，可有效提高企业运营效率。</p>
</a>
</li>
<li class="active" 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/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>
</li>
<li class="active" 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/case_img.png" alt=""/>
</div>
<h3>维多利亚</h3>
<p>企视录影像</p>
</a>
</li>-->
</ul>
</section>
<!--影像服务-->
......@@ -226,23 +226,23 @@
<!--合作商家-->
<section class="cooperation">
<div class="custom-container mouseWheelButtons">
<a href="#" class="prev"></a>
<a href="#" class="prev prevBtn"></a>
<div class="carousel">
<ul>
<li><img src="../img/text1.png"></li>
<li><img src="../img/text2.png"></li>
<li><img src="../img/text3.png"></li>
<li><img src="../img/text4.png"></li>
<li><img src="../img/text5.png"></li>
<li><img src="../img/text3.png"></li>
<li><img src="../img/text4.png"></li>
<li><img src="../img/text2.png"></li>
<li><img src="../img/text5.png"></li>
<li><img src="../img/text1.png"></li>
<li><img src="../img/text3.png"></li>
<li><img src="../img/text2.png"></li>
<li><img src="../img/text3.png"></li>
<!-- <li><img src="../img/text4.png"></li>
<li><img src="../img/text5.png"></li>
<li><img src="../img/text3.png"></li>
<li><img src="../img/text4.png"></li>
<li><img src="../img/text2.png"></li>
<li><img src="../img/text5.png"></li>
<li><img src="../img/text1.png"></li>
<li><img src="../img/text3.png"></li>-->
</ul>
</div>
<a href="#" class="next"></a>
<a href="#" class="next nextBtn"></a>
<div class="clear"></div>
</div>
</section>
......@@ -270,18 +270,6 @@
});
});
</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>
......@@ -300,11 +288,63 @@
</script>
<script>
/*案例模块放大效果*/
$(".case ul li").mouseenter(function(){
$(this).addClass("active").siblings().removeClass();
}).mouseleave(function(){
$("#largeShow").addClass("active").siblings().removeClass();
})
window.onload = function() {
var lis = $(".case ul li");
var l=lis.size();
if(l==1){
lis.css("margin-left",37+'%');
lis.mouseenter(function () {
$(this).addClass("active").siblings().removeClass();
}).mouseleave(function () {
$(this).removeClass("active");
})
}else if(l==2){
lis.css("margin-left",13.5+'%');
lis.mouseenter(function () {
$(this).addClass("active").siblings().removeClass();
}).mouseleave(function () {
$(this).addClass("active");
})
}else if(l==3){
lis.mouseenter(function () {
$(this).addClass("active").siblings().removeClass();
}).mouseleave(function () {
$(this).removeClass("active");
lis.eq(1).addClass("active").siblings().removeClass();
})
}
<!--五张图轮播效果-->
var carousel=$(".carousel");
var len = $(".carousel ul li").size();
if(len<=5){
$(".prevBtn").css("display","none");
$(".nextBtn").css("display","none");
$(".mouseWheelButtons .carousel").jCarouselLite({
circular: false,
visible:len
});
if(len==1){
carousel.css("margin-left",39+'%');
}else if(len==2){
carousel.css("margin-left",29+'%');
}else if(len==3){
carousel.css("margin-left",19+'%');
}else if(len==4){
carousel.css("margin-left",9+'%');
}
}else{
$(".mouseWheelButtons .carousel").jCarouselLite({
btnNext: ".mouseWheelButtons .next",
btnPrev: ".mouseWheelButtons .prev",
mouseWheel: true,
circular: true,
speed: 1000,
visible: 5,
scroll: 5
});
}
}
/*表单提交验证*/
var org_people= /^[\u4E00-\uFA29a-zA-Z ]{1,12}$/; //验证昵称 英文、汉字共1-12位;
......
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