feat(详情页): 重构详情页头部样式并添加标签展示功能
- 新增精华和推荐图标资源文件 - 修改详情页头部布局,从水平排列改为垂直排列 - 添加标签展示区域,支持分类和标签跳转 - 调整详情区域组件布局,移除部分评论相关功能 - 更新http.js中的开发环境session值 - 添加新的JS脚本引用
This commit is contained in:
@@ -14,22 +14,39 @@
|
||||
}
|
||||
.content .header {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 0 30px;
|
||||
padding: 30px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
font-weight: 650;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 20px;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content .header .views {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
font-weight: 400;
|
||||
.content .header .label {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.content .header .views .eye-icon {
|
||||
margin-right: 5px;
|
||||
.content .header .label .item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 9px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.content .header .label .item.icon {
|
||||
padding: 0;
|
||||
}
|
||||
.content .header .label .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.content .header .label .item.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
.content .left {
|
||||
width: 658px;
|
||||
|
||||
@@ -15,20 +15,42 @@
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 0 30px;
|
||||
padding: 30px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
font-weight: 650;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 20px;
|
||||
justify-content: space-between;
|
||||
.views {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
font-weight: 400;
|
||||
.eye-icon {
|
||||
margin-right: 5px;
|
||||
flex-direction: column;
|
||||
|
||||
.label {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 9px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&.icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
assets/img/essence-icon.png
Normal file
BIN
assets/img/essence-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
assets/img/recommend-icon.png
Normal file
BIN
assets/img/recommend-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Reference in New Issue
Block a user