@import '../../../../components/style/themes/default.less'; .linear-gradient(@mid-pos, @end-pos) { background: linear-gradient( rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) @mid-pos, rgba(0, 0, 0, 0.65) @end-pos ); } .recommend-block { position: relative; display: block; height: 192px; overflow: hidden; border-radius: 2px; img { position: relative; z-index: -1; width: 100%; height: 100%; vertical-align: top; background-clip: cover; transition: all 0.36s ease-out; } &-loading { background: linear-gradient( 90deg, rgba(207, 216, 220, 0.2), rgba(207, 216, 220, 0.4), rgba(207, 216, 220, 0.2) ); border-radius: 4px; img, &::before { display: none; } } &:hover img { transform: scale(1.04); } &::before { .linear-gradient(40%, 100%); position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.3; transition: all 0.5s; 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 16px 16px; transform: translateY(100%); transition: transform 0.3s; .ant-typography { margin: 0; color: #fff; } h4 { position: absolute; top: 0; right: 0; left: 0; padding: 0 16px 16px; 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; &::before { .linear-gradient(70%, 100%); } } &:hover { &::before { opacity: 1; } .recommend-content { transform: translateY(0); h4 { padding-bottom: 8px; } p { opacity: 1; } } } } }