这周主要是对首屏的完善和优化,并将团队详情也得展示部分给布局起来。
首屏布局已经大致完成,差一个关于界面主要是战士一些信息,已填充为主。同时做出了一个类似的客服系统以作备用:
主要布局代码如下:
<div class="window pa">
<div class="w">
<ul class="fir">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="sec">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<input type="text" class="pr" />
<button class="pa">发送</button>
</div>
css代码部分如下:
div.service>div.window {
width: 80%;
left: 10%;
top: 50%;
margin: -250px 0 0 0;
height: 500px;
}
div.service>div.window>div {
height: 440px;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 0 10px #999 inset;
overflow-y: scroll;
}
div.service>div.window>div>ul {
width: 50%;
height: 100%;
float: left;
}
div.service>div.window>div>ul.fir>li {
float: left;
margin: 10px 20px 60px;
background-color: #ccc;
}
div.service>div.window>div>ul.sec>li {
float: right;
margin: 60px 20px 10px;
color: white;
background-color: #648b98;
}
div.service>div.window>div>ul>li {
position: relative;
clear: both;
padding: 16px 40px 16px 20px;
border-radius: 10px;
}
div.service>div.window>input {
margin: 10px 0 0 0;
height: 50px;
width: 100%;
border-style: none;
border-radius: 10px;
text-indent: 10px;
font-size: 16px;
}
div.service>div.window>button {
bottom: 0;
right: 0;
background-color: #648b98;
color: white;
float: right;
border-style: none;
line-height: 50px;
font-size: 16px;
height: 50px;
width: 100px;
border-radius: 10px;
cursor: pointer;
}
改动的地方有推荐页、发现页和收藏页,
推荐页放入实际图片之后只有宽度为100%,实际应该是改都为100%,所以将background-size:100%;属性改为cover。
改动之后页面为如下效果:
发现页面连入团队详情页面的话添加了一个高度和宽度都为100%的a标签,target属性为“_blank”。
之后便是没一个链接到详情页面的方法,以其中一各模块的js代码如下:
var synoList = $('synopsis').getElementsByTagName('li');
for(var b = 1; b <= synoList.length; b++){
var obj = synoList[b-1];
obj.index = b;
obj.onclick = function(){
window.open("inner"+this.index+".html");
}
obj.style.backgroundImage = "url(image/synopsis/synopsis"+b+".png)";
}
之后是详情页的布局:
效果图如下
详情页想分为两屏,第一屏为一个完全的展示页面,第二屏为一个进度树和详情介绍。
第一屏布局如上,中间是项目名字,之后加了一个黑色遮罩,这招背后为一个介绍视频或幻灯片,点击可以查看具体视频或图片,下面有一个箭头,鼠标移上去会发亮并引导用户进入下一屏,点击之后就会进入树。树这块比较麻烦可能还需要大概一周的时间,但这周就可以将第一屏的视频和代码方面。上方是一个隐藏的功能键,可以加入自己的收藏夹或直接申请加入团队。