together项目进度报告7

最新推荐文章于 2020-12-21 11:13:42 发布

DesGuan

最新推荐文章于 2020-12-21 11:13:42 发布

阅读量448

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/DesGuan/article/details/72842914

本周工作重点是对首屏进行优化，并初步搭建了团队详情页。完成了首屏的基本布局，实现了一个客服系统的备选方案。同时调整了推荐页等页面的样式，并通过JavaScript实现了跳转至详情页的功能。

这周主要是对首屏的完善和优化，并将团队详情也得展示部分给布局起来。

首屏布局已经大致完成，差一个关于界面主要是战士一些信息，已填充为主。同时做出了一个类似的客服系统以作备用：

主要布局代码如下：

<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)";
    }

之后是详情页的布局：

效果图如下

详情页想分为两屏，第一屏为一个完全的展示页面，第二屏为一个进度树和详情介绍。

第一屏布局如上，中间是项目名字，之后加了一个黑色遮罩，这招背后为一个介绍视频或幻灯片，点击可以查看具体视频或图片，下面有一个箭头，鼠标移上去会发亮并引导用户进入下一屏，点击之后就会进入树。树这块比较麻烦可能还需要大概一周的时间，但这周就可以将第一屏的视频和代码方面。上方是一个隐藏的功能键，可以加入自己的收藏夹或直接申请加入团队。