mirror/typecho-joe
2
0
Fork 0
mirror of https://dl.bcrjl.com/ghg/HaoOuBa/Joe.git synced 2026-02-17 13:10:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
杜恒
2021-01-21 13:29:50 +08:00
parent 5ecfb5979b
commit 956c528b48
11 changed files with 378 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/joe.global.css
View File

File diff suppressed because one or more lines are too long

9
assets/css/joe.global.scss
View File

@@ -682,11 +682,14 @@
bottom: 100%;
}
.link {
display: block;
max-width: 100%;
white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
color: var(--minor);
font-size: 13px;
font-weight: 500;

1
assets/css/joe.index.css Normal file
View File

@@ -0,0 +1 @@
.joe_index{border-radius:8px;padding:0 15px;background:var(--background);box-shadow:var(--box-shadow);margin-bottom:15px}.joe_index__banner{padding-top:15px;display:flex}.joe_index__banner-recommend{width:270px;margin-left:15px;display:flex;flex-direction:column}.joe_index__banner-recommend.noswiper{width:100%;flex-direction:row;margin-left:0}.joe_index__banner-recommend.noswiper .item:first-child{margin-bottom:0;margin-right:7.5px}.joe_index__banner-recommend.noswiper .item:last-child{margin-left:7.5px}.joe_index__banner-recommend .item{position:relative;width:100%;height:160px;margin-bottom:15px;border-radius:5px;overflow:hidden}.joe_index__banner-recommend .item:last-child{margin-bottom:0}.joe_index__banner-recommend .item .thumbnail{display:block;width:100%;height:100%;transition:opacity 0.35s}.joe_index__banner-recommend .item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_index__banner-recommend .item .thumbnail:hover{opacity:0.85}.joe_index__banner-recommend .item .information{display:flex;align-items:center;position:absolute;z-index:1;bottom:0;left:0;right:0;padding:8px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));color:#fff;line-height:20px}.joe_index__banner-recommend .item .information_type{background-image:linear-gradient(to right, #fc712a, #f84c39);background-color:#f84c39;padding:0 5px;height:20px;border-radius:2px;margin-right:5px;font-size:12px}.joe_index__banner-recommend .item .information_title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-size:14px}.swiper-container{min-width:0;flex:1;height:335px;--swiper-theme-color: #fff;border-radius:5px}.swiper-container .item{display:block;height:335px;border-radius:5px}.swiper-container .item .thumbnail{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity 0.35s}.swiper-container .item .thumbnail:hover{opacity:0.85}.swiper-container .item .title{position:absolute;z-index:1;left:0;right:0;bottom:0;text-align:center;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.45));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:15px;padding:10px;font-weight:normal}.swiper-container .item .icon{position:absolute;z-index:1;top:10px;left:10px;width:18px;height:18px;fill:#fff;opacity:0.5}.swiper-container.swiper-container-horizontal .swiper-pagination-bullets{bottom:unset;left:unset;width:auto;right:10px;top:10px}

140
assets/css/joe.index.scss Normal file
View File

@@ -0,0 +1,140 @@
.joe_index {
border-radius: 8px;
padding: 0 15px;
background: var(--background);
box-shadow: var(--box-shadow);
margin-bottom: 15px;
&__banner {
padding-top: 15px;
display: flex;
&-recommend {
width: 270px;
margin-left: 15px;
display: flex;
flex-direction: column;
&.noswiper {
width: 100%;
flex-direction: row;
margin-left: 0;
.item:first-child {
margin-bottom: 0;
margin-right: 7.5px;
}
.item:last-child {
margin-left: 7.5px;
}
}
.item {
position: relative;
width: 100%;
height: 160px;
margin-bottom: 15px;
border-radius: 5px;
overflow: hidden;
&:last-child {
margin-bottom: 0;
}
.thumbnail {
display: block;
width: 100%;
height: 100%;
transition: opacity 0.35s;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
&:hover {
opacity: 0.85;
}
}
.information {
display: flex;
align-items: center;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
right: 0;
padding: 8px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
color: #fff;
line-height: 20px;
&_type {
background-image: linear-gradient(to right, #fc712a, #f84c39);
background-color: #f84c39;
padding: 0 5px;
height: 20px;
border-radius: 2px;
margin-right: 5px;
font-size: 12px;
}
&_title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
font-size: 14px;
}
}
}
}
}
}
.swiper-container {
min-width: 0;
flex: 1;
height: 335px;
--swiper-theme-color: #fff;
border-radius: 5px;
.item {
display: block;
height: 335px;
border-radius: 5px;
.thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.35s;
&:hover {
opacity: 0.85;
}
}
.title {
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
text-align: center;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
font-size: 15px;
padding: 10px;
font-weight: normal;
}
.icon {
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
width: 18px;
height: 18px;
fill: #fff;
opacity: 0.5;
}
}
&.swiper-container-horizontal {
.swiper-pagination-bullets {
bottom: unset;
left: unset;
width: auto;
right: 10px;
top: 10px;
}
}
}