最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【记录】优化绘本查询系统的UI

查询 crifan 1357浏览 0评论
之前已经实现了基本的绘本查询的功能的web端页面了:
现在需要去根据UI设计
效果图:
尺寸标注:
去优化UI界面显示。
从上到下,先去优化LOGO的图和文字
再去优化搜索框
【已解决】HTML5的web网站中设置字体类型为PingFangSC-Regular和微软雅黑
然后现在去:
【部分解决】bootstrap 4中如何给输入框右边加上清除叉叉的按钮
然后再去优化查询页的下面的列表
然后用代码:
html
1
2
3
4
    <div class="search_result">
      <ul class="list-group list-group-flush" id="search_result_book_list">
      </ul>
    </div>
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
.xxx_bkg_color {
    background-color: #61D2B3;
}
 
.logo{
    /* width: 162px;
    height: 144px; */
    /* width: 81px;
    height: 72px; */
    /* padding: 10px 2%; */
    padding-top: 24px;
    padding-bottom: 25px;
}
 
h2{
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    font-family:  "PingFangSC-Regular", "苹方", "Microsoft Yahei", "微软雅黑", "Heiti SC";
}
 
h4{
    text-align: center;
    margin-top: 0px;
    margin-bottom: 20px;
}
 
form {
    text-align: center;
}
 
.input_query {
    padding-left: 39px;
    padding-right: 39px;
}
 
.single_storybook_item {
    font-family: "PingFangSC-Medium", "Microsoft Yahei", "微软雅黑", "Heiti SC";
    font-size: 14px;
    color: #666666;
}
 
.book_list_text_row{
    margin-bottom: 10px;
}
 
/* p.single_storybook_item {
    margin-bottom: 10px;
} */
 
.book_list_cover_image {
    border-radius: 8px;
    margin-right: 22px;
}
 
.book_list_title{
    font-size: 18px;
    color: #333333;
    margin-bottom: 10px;
}
 
.book_list_keys{
    color: #333333;
}
 
.list-group-item {
    /* padding: 0.75rem 0.75rem; */
    /* padding: 0 0; */
    /* padding-top: 0;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 15px; */
    padding: 0 0 15px 0;
 
    border: none;
}
 
.mr-2, .mx-2 {
    margin-right: 0.75rem !important;
}
 
.search_result {
    padding-top: 28px;
    padding-left: 15px;
    /* padding-right: 15px; */
}
相关js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
    if (!isEmptyObj(bookDictList)) {
        for(var eachBookDict of bookDictList){
            console.log('eachBookDict=', eachBookDict)
            var eachBookHtml = generateBookItemHtml(eachBookDict)
            $(bookSelectStr).append(eachBookHtml)
        }    
    }
 
 
function generateTagsHtml(tags){
    console.log("generateTagsHtml: tags=%o", tags)
    var tagsHtml = ""
    const BadgeType = "badge-secondary"
    const BadgeBillType = "badge-pill " + BadgeType + " xxx_bkg_color"
    for(var eachTag of tags){
        // eachTagHtml = `<span class="badge ${BadgeType}">${eachTag}</span>`
        eachTagHtml = `<span class="badge ${BadgeBillType}">${eachTag}</span>`
        tagsHtml += eachTagHtml
    }
    console.log("tagsHtml=", tagsHtml)
    return tagsHtml
}
 
function generateBookItemHtml(curBookDict){
    console.log("generateBookItemHtml: curBookDict=%o", curBookDict)
 
    var coverImgUrl = curBookDict["coverImgUrl"]
    console.log("coverImgUrl=", coverImgUrl)
    if (!coverImgUrl){
        coverImgUrl = "img/cover_img_default.png"
        console.log("default coverImgUrl=", coverImgUrl)
    }
    var title = curBookDict["title"]
    console.log("title=", title)
    var imgAltStr = ""
    if (coverImgUrl) {
        imgAltStr = title
    } else {
        imgAltStr = ""
    }
    console.log("imgAltStr=", imgAltStr)
    // var authorsStr = listToStr(curBookDict["authors"])
    var authorsStr = listToStr(curBookDict["author"]["bookAuthors"])
    console.log("authorsStr=", authorsStr)
    // var illustratorsStr = listToStr(curBookDict["illustrators"])
    var illustratorsStr = listToStr(curBookDict["author"]["illustrators"])
    console.log("illustratorsStr=", illustratorsStr)
    var gradesStr = listToStr(curBookDict["grades"])
    console.log("gradesStr=", gradesStr)
    var tagsHtml = generateTagsHtml(curBookDict["tags"])
    console.log("tagsHtml=", tagsHtml)
 
    // <img class="cover_image align-self-center mr-2" width="100" height="140" src="${coverImgUrl}" alt="${imgAltStr}">
    // <h5 class="mt-0">${title}</h5>
    // <p><strong>作者: </strong>${authorsStr}</p>
    // <p><strong>兰斯指数: </strong>${curBookDict["grading"]["lexile"]}</p>
    // <p><strong>参考年龄: </strong>${gradesStr}</p>
 
    // <p><span class="book_list_keys">作者:</span>${authorsStr}</p>
    // <p><span class="book_list_keys">兰斯指数:</span>${curBookDict["grading"]["lexile"]}</p>
    // <p><span class="book_list_keys">参考年龄:</span>${gradesStr}</p>
 
    var curBookItemHtml = `
        <li class="list-group-item single_storybook_item">
            <div class="media">
                <img class="book_list_cover_image align-self-center" width="100" height="140" src="${coverImgUrl}" alt="${imgAltStr}">
                <div class="media-body">
                    <h5 class="book_list_title">${title}</h5>
                    <div hidden><strong>ID: </strong><div id="book_id">${curBookDict["id"]}</div></div>
                    <p class="book_list_text_row"><span class="book_list_keys">作者:</span>${authorsStr}</p>
                    <p class="book_list_text_row"><span class="book_list_keys">兰斯指数:</span>${curBookDict["grading"]["lexile"]}</p>
                    <p class="book_list_text_row"><span class="book_list_keys">参考年龄:</span>${gradesStr}</p>
                    ${tagsHtml}
                </div>
            </div>
        </li>`
 
    console.log('curBookItemHtml=', curBookItemHtml)
    return curBookItemHtml
}
效果是:
再去优化详情页的内容
现在是:
希望优化为:
【已解决】html中独立出通用部分css供其他css文件导入
然后继续优化详情页布局。
【已解决】bootstrap 4中给图片左右居中对齐和上下加边距
然后再去想办法画出列表:
【已解决】Bootstrap 4中实现键值对的列表
然后再去加上返回按钮:
bootstrap img back left
bootstrap back button img
代码:
1
2
3
4
5
6
7
  <div class="single_book_detail">
      <button class="back_home_button" id="back_home">
          <img width="22px" height="22px" src="img/back_to_home.png">
      </button>
      <div class="text-center book_detail_cover_img_parent">
          <img class="book_detail_cover_img" src="${coverImgUrl}" alt="${imgAltStr}">
      </div>
但是导致图片下移了:
然后用:
1
2
3
.back_home_button{
    position: absolute;
}
解决了问题:
现在又发现其他特殊情况,图片尺寸不标准,导致显示异常:
搜still,可以发现有个图片异常:
然后去把:
1
2
3
4
    var curBookItemHtml = `
        <li class="list-group-item single_storybook_item">
            <div class="media">
                <img class="book_list_cover_image" width="100" height="140" src="${coverImgUrl}" alt="${imgAltStr}">
改为:
1
2
3
4
5
6
    var curBookItemHtml = `
        <li class="list-group-item single_storybook_item">
            <div class="media">
                <div class="text-center">
                    <img class="book_list_cover_image" width="100" height="140" src="${coverImgUrl}" alt="${imgAltStr}">
                </div>
即,给img的parent加上text-center,即可让图片正常居中显示了:
目前显示效果基本还不错了:
不过简介还是全部显示的,需要再去优化为:
继续之前的:
【基本解决】bootstrap中实现默认显示一段内容点击more后显示全部
【部分解决】bootstrap 4中如何给输入框右边加上清除叉叉的按钮
【部分解决】HTML中如何获取输入框的输入法的搜索或完成按钮的事件
然后继续

转载请注明:在路上 » 【记录】优化绘本查询系统的UI

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
80 queries in 0.200 seconds, using 22.17MB memory