Diff is too large to be shown
设置了部分半透明，不过被注释了，请自行打开
No changes
| @@ -0,0 +1,97 @@ | |||
| 1 | + | /*请自己找到这个位置*/ | |
| 2 | + | .volantis-flink-list | |
| 3 | + | display: flex | |
| 4 | + | flex-wrap: wrap | |
| 5 | + | justify-content: flex-start | |
| 6 | + | margin: -0.5 * 16px | |
| 7 | + | align-items: stretch | |
| 8 | + | .site-card | |
| 9 | + | @extend .cardHover | |
| 10 | + | margin: 16px * 0.5 | |
| 11 | + | width: "calc(100% / 4 - %s)" % 16px | |
| 12 | + | @media screen and (min-width: 2048px) | |
| 13 | + | width: "calc(100% / 5 - %s)" % 16px | |
| 14 | + | @media screen and (max-width: 768px) | |
| 15 | + | width: "calc(100% / 3 - %s)" % 16px | |
| 16 | + | @media screen and (max-width: 500px) | |
| 17 | + | width: "calc(100% / 2 - %s)" % 16px | |
| 18 | + | display: block | |
| 19 | + | height: 210px !important | |
| 20 | + | line-height: 1.4 | |
| 21 | + | height 100% | |
| 22 | + | .img | |
| 23 | + | position: relative | |
| 24 | + | object-fit: cover | |
| 25 | + | margin: 0 !important | |
| 26 | + | width: 100% | |
| 27 | + | height 60% | |
| 28 | + | overflow: hidden | |
| 29 | + | transition: all .6s!important | |
| 30 | + | filter: blur(0) | |
| 31 | + | img | |
| 32 | + | width: 100% | |
| 33 | + | height 100% | |
| 34 | + | margin: 0 !important | |
| 35 | + | border-radius: 12px 12px 0 0 !important | |
| 36 | + | pointer-events:none; | |
| 37 | + | // trans(.75s) | |
| 38 | + | transition: background .6s,height .6s | |
| 39 | + | object-fit: cover | |
| 40 | + | ||
| 41 | + | .info | |
| 42 | + | position: relative | |
| 43 | + | height: 40% | |
| 44 | + | transition: background .6s,height .6s | |
| 45 | + | img | |
| 46 | + | position: absolute | |
| 47 | + | width: 100px | |
| 48 | + | height: 100px | |
| 49 | + | pointer-events:none | |
| 50 | + | background-size: cover | |
| 51 | + | border-radius: 50% !important | |
| 52 | + | top: -32px | |
| 53 | + | left: -32px | |
| 54 | + | transform: scale(.2) | |
| 55 | + | transition: all .6s !important | |
| 56 | + | #text | |
| 57 | + | position: relative | |
| 58 | + | top: 0px | |
| 59 | + | display: flex | |
| 60 | + | flex-direction: column | |
| 61 | + | padding-right: 10px | |
| 62 | + | margin-left: 35px | |
| 63 | + | transition: all .6s; | |
| 64 | + | .title | |
| 65 | + | max-width: 100% | |
| 66 | + | font-size: 16px | |
| 67 | + | line-height: 26px | |
| 68 | + | font-weight: 700 | |
| 69 | + | color: var(--liushen-text) | |
| 70 | + | text-overflow: ellipsis | |
| 71 | + | white-space: nowrap | |
| 72 | + | overflow: hidden | |
| 73 | + | .desc | |
| 74 | + | font-size: var(--global-font-size) | |
| 75 | + | line-height: 26px | |
| 76 | + | color: var(--liushen-secendtext) | |
| 77 | + | overflow: hidden | |
| 78 | + | font-size: small | |
| 79 | + | margin-bottom: 10px | |
| 80 | + | max-height: 52px | |
| 81 | + | -webkit-line-clamp: 2 | |
| 82 | + | &:hover | |
| 83 | + | .img | |
| 84 | + | height: 35% | |
| 85 | + | filter: blur(3px) | |
| 86 | + | .info | |
| 87 | + | height: 66% | |
| 88 | + | background: #f2b94b | |
| 89 | + | color: #fff | |
| 90 | + | img | |
| 91 | + | left: -10px | |
| 92 | + | top: -50px | |
| 93 | + | transform: rotate(-35deg) rotateX(1turn) rotateY(1turn) scale(.6) | |
| 94 | + | #text | |
| 95 | + | top: 26px | |
| 96 | + | margin-left: 10px | |
| 97 | + | /*下面的不用动，为#article-container的定义*/ | |