之前已经实现了基本的绘本查询的功能的web端页面了：
现在需要去根据UI设计
效果图：
尺寸标注：
去优化UI界面显示。
从上到下，先去优化LOGO的图和文字
再去优化搜索框
【已解决】HTML5的web网站中设置字体类型为PingFangSC-Regular和微软雅黑
然后现在去：
【部分解决】bootstrap 4中如何给输入框右边加上清除叉叉的按钮
然后再去优化查询页的下面的列表
然后用代码：
html
<div class="search_result"> <ul class="list-group list-group-flush" id="search_result_book_list"> </ul> </div>
css
.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：
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
代码：
<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>但是导致图片下移了：
然后用：
.back_home_button{
position: absolute;
}解决了问题：
现在又发现其他特殊情况，图片尺寸不标准，导致显示异常：
搜still，可以发现有个图片异常：
然后去把：
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}">改为：
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