ant-design/site/theme/template/Home/RecommendPage.less

105 lines
1.7 KiB
Plaintext
Raw Normal View History

2019-12-26 15:27:52 +08:00
@import '../../../../components/style/themes/default.less';
.recommend-block {
position: relative;
display: block;
height: 192px;
overflow: hidden;
border-radius: 2px;
img {
width: 100%;
height: 100%;
vertical-align: top;
background-clip: cover;
}
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0, 0.25) 30%,
rgba(0, 0, 0, 0.5) 100%
);
content: '';
pointer-events: none;
}
.recommend-popularize {
position: absolute;
top: 0;
left: 0;
padding: 0 8px;
color: #314659;
line-height: 28px;
background: #ffd75a;
border-radius: 0 0 4px 0;
}
.recommend-content {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0 20px 24px;
transform: translateY(100%);
transition: transform 0.3s;
.ant-typography {
margin: 0;
color: #fff;
}
h4 {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 0 20px 24px;
transform: translateY(-100%);
transition: padding 0.3s;
}
p {
color: rgba(255, 255, 255, 0.85);
opacity: 0;
transition: opacity 0.3s, margin 0.3s;
}
}
}
@media (max-width: @screen-sm-min) {
.recommend-block {
h4.ant-typography {
padding: 0 16px 16px;
font-size: 18px;
}
}
}
@media (min-width: @screen-sm-min) {
.recommend-block {
&-main {
height: 408px;
}
&:hover {
.recommend-content {
transform: translateY(0);
h4 {
padding-bottom: 8px;
}
p {
opacity: 1;
}
}
}
}
}