Skip to content

V
Vphoto
Commit ac4be63a by 邓丽
Options

图片模式布局修改

parent acdaeb08
Showing with 65 additions and 41 deletions
dist/css/picture-live.min.css.map
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/fonts/iconFont.eot
No preview for this file type
dist/fonts/iconFont.ttf
No preview for this file type
dist/fonts/iconFont.woff
No preview for this file type
src/less/picture-live.less
......@@ -188,9 +188,28 @@ nav{
clear: both;
text-align: center;
}
.dynamic-work>ul>li{
display: block;
.px1rem(margin-bottom,30);
/*图片模式*/
.picture_mode{
.work{
li{
float:left;
.px1rem(margin-right,10);
.px1rem(margin-bottom,10);
.px1rem(width, 240);
.px1rem(height, 240);
&:nth-child(3n+3){
.px1rem(margin-right, 0);
}
}
}
}
/*图文模式*/
.dynamic-work{
display: none;
>ul>li{
display: block;
.px1rem(margin-bottom,30);
}
}
.px1rem(margin-bottom,40);
.prompt{
......@@ -203,7 +222,6 @@ nav{
}
}
.word_details{
display: none;
.px2rem(margin,20,0);
p{
.px1rem(line-height,50);
......@@ -274,22 +292,6 @@ nav{
}
}
/*.twoLi {
width: 100%;
ul {
*//* .px1rem(margin-left,115);*//*
li {
&:last-child{
border-left: 0px !important;
.px1rem(margin-left,20);
}
.pic {
.px1rem(width, 230) !important;
}
}
}
}*/
.appointment{
position: fixed;
/* .px1rem(left,0);*/
......
src/pages/picture-live.ejs
......@@ -49,11 +49,33 @@
<!--九宫图布局-->
<section class="live_content" id="live_content">
<section id="main-container">
<div class="dynamic-work">
<!--图片模式-->
<div class="picture_mode show">
<ul class="work">
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
</ul>
</li>
</ul>
</div>
<!--图文模式-->
<div class="dynamic-work hidden">
<ul>
<li>
<% include ./template/layout.ejs %>
<div class="word_details hidden">
<ul class="work work-4">
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
</ul>
<div class="word_details">
<p>
经过很长时间的准备，会议终于开始，首先登场的是主持人，本次会议担任主持人的是国内知名的主持人朱军和李师师，现在有请两位主持人。
本次会议还邀请了国内知名的企业家作为本场嘉宾，他们分别是柳传志、王石、王健林、马云，有请各位企业家。
......@@ -61,8 +83,14 @@
</div>
</li>
<li>
<% include ./template/layout.ejs %>
<div class="word_details hidden">
<ul class="work work-5">
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
<li class="cover"><img data-node="pic" src="../img/tokyo.png"/></li>
</ul>
<div class="word_details">
<p>
经过很长时间的准备，会议终于开始，首先登场的是主持人，本次会议担任主持人的是国内知名的主持人朱军和李师师，现在有请两位主持人。
本次会议还邀请了国内知名的企业家作为本场嘉宾，他们分别是柳传志、王石、王健林、马云，有请各位企业家。
......@@ -70,12 +98,11 @@
</div>
</li>
</ul>
</div>
</section>
<!-- <div class="prompt">
<p>直播图片正在酝酿中，请先关注哦</p>
</div>-->
</div>
</section>
<!-- <div class="prompt">
<p>直播图片正在酝酿中，请先关注哦</p>
</div>-->
</section>
<!--滚动加载-->
......@@ -92,36 +119,30 @@
<img src="../img/404.jpg" alt=""/>
<p>第一会场</p></div>
</li>
<li>
<li>
<div class="pic">
<img src="../img/head.jpg" alt=""/>
<p>第二会场</p>
</div>
</li>
<li>
<li>
<div class="pic">
<img src="../img/handsome.jpg" alt=""/>
<p>第三会场</p>
</div>
</li>
<li>
<li>
<div class="pic">
<img src="../img/404.jpg" alt=""/>
<p>第四会场</p>
</div>
</li>
<li>
<li>
<div class="pic">
<img src="../img/head.jpg" alt=""/>
<p>第五会场</p>
</div>
</li>
<!-- <li>
<div class="pic">
<img src="../img/handsome.jpg" alt=""/>
<p>第六会场</p>
</div>
</li>-->
</ul>
</section>
......@@ -143,6 +164,7 @@
<script src="../../lib/hammer.js/hammer.min.js"></script>
<script src="../js/picture-live.min.js"></script>
<script>
/*切换排序方式*/
$(".latest").click(function(){
......
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