| commit | author | age | ||
| 146176 | 1 | <template> |
| I | 2 | <div class="gridClass"> |
| 3 | <div class="entry-preview"> | |
| 4 | <div class="thumbnail_box" @click="showMyVideo()"> | |
| 5 | <div class="thumbnail"> | |
| 6 | <img src="http://t.inleft.com/share/media_photo/faye_video.png" alt="" loading="lazy"> | |
| 7 | </div> | |
| 8 | </div> | |
| 9 | <div class="entry-post"> | |
| 10 | <div class="entry-header"> | |
| 11 | <h5 class="entry-title"> | |
| 12 | <a href="https://www.thyuu.com/word/note/49306" rel="bookmark">翻奏·Faye's Theme</a> | |
| 13 | </h5> | |
| 14 | <div class="post_content"> | |
| 15 | 出自高瞰/的独立游戏(寻找天堂) | |
| 16 | <br> | |
| 17 | 时间:2020.02某个不眠的深夜 | |
| 18 | <br> | |
| 19 | 音源/录像: es110的内置录音/mi 9的普通摄像 | |
| 20 | <br> | |
| 21 | 剪辑:pr(其实就贴了一张图,一镜到底) | |
| 22 | </div> | |
| 23 | </div> | |
| 24 | <div class="entry-meta"> | |
| 25 | <div class="post-categories"> | |
| 26 | <span class="tag vcard"> | |
| 27 | <a href="https://www.thyuu.com/category/word/note" rel="category tag">随心杂记</a> | |
| 28 | </span> | |
| 29 | <span class="tag-list"> | |
| 30 | <a href="https://www.thyuu.com/tag/%e5%bd%b1%e8%af%84" rel="tag">影评</a> | |
| 31 | <a href="https://www.thyuu.com/tag/%e7%94%b5%e5%bd%b1" rel="tag">电影</a> | |
| 32 | <a href="https://www.thyuu.com/tag/%e8%9c%98%e8%9b%9b%e4%be%a0" rel="tag">蜘蛛侠</a> | |
| 33 | </span> | |
| 34 | </div> | |
| 35 | <div class="post-on"> | |
| 36 | <span class="entry-date"> | |
| 37 | <a href="https://www.thyuu.com/word/note/49306" title="22:13" rel="bookmark"> | |
| 38 | <time datetime="2022-03-22T22:13:02+08:00">5月前</time> | |
| 39 | </a> | |
| 40 | </span> | |
| 41 | </div> | |
| 42 | </div> | |
| 43 | </div> | |
| 44 | ||
| 45 | </div> | |
| 46 | ||
| 47 | <div class="entry-preview"> | |
| 48 | <div class="thumbnail_box"> | |
| 49 | <div class="thumbnail "> | |
| 50 | <img src="http://t.inleft.com/share/media_photo/background.jpg" alt="" loading="lazy"> | |
| 51 | </div> | |
| 52 | </div> | |
| 53 | </div> | |
| 54 | <div class="entry-preview "> | |
| 55 | <div class="thumbnail_box "> | |
| 56 | <div class="thumbnail "> | |
| 57 | <img src="http://t.inleft.com/share/media_photo/cat.png" alt="" loading="lazy"> | |
| 58 | </div> | |
| 59 | </div> | |
| 60 | </div> | |
| 61 | <div class="entry-preview "> | |
| 62 | <div class="thumbnail_box"> | |
| 63 | <div class="thumbnail "> | |
| 64 | <img src="http://t.inleft.com/share/media_photo/faye_video.png" alt="" loading="lazy"> | |
| 65 | </div> | |
| 66 | </div> | |
| 67 | </div> | |
| 68 | <div class="entry-preview "> | |
| 69 | <div class="thumbnail_box"> | |
| 70 | <div class="thumbnail "> | |
| 71 | <img src="http://t.inleft.com/share/media_photo/faye_video.png" alt="" loading="lazy"> | |
| 72 | </div> | |
| 73 | </div> | |
| 74 | </div> | |
| 75 | ||
| 76 | </div> | |
| 77 | </template> | |
| 78 | <script> | |
| 79 | export default { | |
| 80 | methods: { | |
| 81 | showMyVideo() { | |
| 82 | console.log(22); | |
| 83 | this.$emit('showMyVideo') | |
| 84 | } | |
| 85 | } | |
| 86 | } | |
| 87 | </script> | |
| 88 | <style lang="less"> | |
| 89 | @--border-radius: 16px; | |
| 90 | @--s-background: 16px; | |
| 91 | @--animation-mo: margin 1s cubic-bezier(0.62, 0.21, 0.25, 1) 1 backwards, opacity .75s cubic-bezier(0.62, 0.21, 0.25, 1) 1 backwards; | |
| 92 | ||
| 93 | @font-face { | |
| 94 | font-family: "iconfont"; | |
| 95 | /* Project id 2762112 */ | |
| 96 | src: url('http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/iconfont.woff2') format('woff2'); | |
| 97 | } | |
| 98 | ||
| 99 | .gridClass { | |
| 100 | grid-template-columns: repeat(4, 1fr); | |
| 101 | display: grid; | |
| 102 | clear: both; | |
| 103 | gap: 2rem; | |
| 104 | // background-color: #666; | |
| 105 | ||
| 106 | a { | |
| 107 | color: #555; | |
| 108 | } | |
| 109 | ||
| 110 | .item1 { | |
| 111 | grid-column-start: 1; | |
| 112 | grid-column-end: 3; | |
| 113 | } | |
| 114 | ||
| 115 | .entry-preview { | |
| 116 | border-radius: @--border-radius; | |
| 117 | background: @--s-background, white; | |
| 118 | animation: @--animation-mo; | |
| 119 | transition: all .5s; | |
| 120 | box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05); | |
| 121 | // background-color: red; | |
| 122 | ||
| 123 | display: flex; | |
| 124 | } | |
| 125 | ||
| 126 | .thumbnail_box { | |
| 127 | width: 50%; | |
| 128 | min-width: 50%; | |
| 129 | left: 0; | |
| 130 | ||
| 131 | .thumbnail { | |
| 132 | position: relative; | |
| 133 | width: 100%; | |
| 134 | height: 100%; | |
| 135 | border-radius: @--border-radius; | |
| 136 | overflow: hidden; | |
| 137 | background: rgba(0, 0, 0, .05); | |
| 138 | ||
| 139 | img { | |
| 140 | width: 100%; | |
| 141 | height: 100%; | |
| 142 | object-fit: cover; | |
| 143 | transform: scale(1.1); | |
| 144 | transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); | |
| 145 | border-radius: @--border-radius; | |
| 146 | } | |
| 147 | } | |
| 148 | } | |
| 149 | ||
| 150 | header { | |
| 151 | display: block; | |
| 152 | } | |
| 153 | ||
| 154 | .entry-title, | |
| 155 | .post_content { | |
| 156 | margin: 0 0 .5rem 0; | |
| 157 | } | |
| 158 | ||
| 159 | h5 { | |
| 160 | font-size: 1.05rem; | |
| 161 | } | |
| 162 | ||
| 163 | .entry-meta, | |
| 164 | .post_content { | |
| 165 | opacity: .6; | |
| 166 | } | |
| 167 | ||
| 168 | .entry-preview .entry-meta { | |
| 169 | display: flex; | |
| 170 | justify-content: space-between; | |
| 171 | font-size: .5rem; | |
| 172 | padding: .5rem 0 0 0; | |
| 173 | flex-wrap: wrap; | |
| 174 | } | |
| 175 | ||
| 176 | .vcard { | |
| 177 | margin: 0 1em 0 0; | |
| 178 | } | |
| 179 | ||
| 180 | .entry-post { | |
| 181 | padding: 1rem; | |
| 182 | transition: all .5s; | |
| 183 | // height: 100%; | |
| 184 | // padding: calc(70% + 1rem) 1rem 1rem 1rem; | |
| 185 | // display: flex; | |
| 186 | // flex-direction: column; | |
| 187 | // justify-content: space-between; | |
| 188 | } | |
| 189 | ||
| 190 | .tag-list a { | |
| 191 | margin: 0 .5em 0 0; | |
| 192 | font-size: 14px; | |
| 193 | } | |
| 194 | } | |
| 195 | ||
| 196 | .thumbnail_box:hover .thumbnail img { | |
| 197 | transform: scale(1) translate3d(0, 0, 0); | |
| 198 | filter: blur(10px) brightness(.8); | |
| 199 | } | |
| 200 | ||
| 201 | .thumbnail_box:hover .thumbnail:after { | |
| 202 | width: 100%; | |
| 203 | height: 100%; | |
| 204 | opacity: 1; | |
| 205 | } | |
| 206 | ||
| 207 | .thumbnail:before { | |
| 208 | content: "\ec2a"; | |
| 209 | opacity: .1; | |
| 210 | font-size: 3rem; | |
| 211 | } | |
| 212 | ||
| 213 | .thumbnail:after { | |
| 214 | width: 70%; | |
| 215 | border: 1px solid rgba(255, 255, 255, .75); | |
| 216 | opacity: 0; | |
| 217 | height: 70%; | |
| 218 | transition: all .5s; | |
| 219 | z-index: 2; | |
| 220 | color: white; | |
| 221 | border-radius: @--border-radius; | |
| 222 | content: "\e627"; | |
| 223 | font-size: 1rem; | |
| 224 | text-shadow: 0 1px 5px rgb(0 0 0 / 30%); | |
| 225 | } | |
| 226 | ||
| 227 | .thumbnail:before, | |
| 228 | .thumbnail:after { | |
| 229 | display: flex; | |
| 230 | justify-content: center; | |
| 231 | align-items: center; | |
| 232 | font-family: 'iconfont'; | |
| 233 | position: absolute; | |
| 234 | top: 50%; | |
| 235 | left: 50%; | |
| 236 | transform: translate(-50%, -50%); | |
| 237 | overflow: hidden; | |
| 238 | } | |
| 239 | ||
| 240 | @media screen and (max-width:1024px) { | |
| 241 | .gridClass { | |
| 242 | grid-row-gap: 2rem; | |
| 243 | grid-column-gap: 0rem; | |
| 244 | grid-template-columns: repeat(1, 1fr); | |
| 245 | ||
| 246 | .entry-preview { | |
| 247 | display: block; | |
| 248 | } | |
| 249 | ||
| 250 | .thumbnail_box { | |
| 251 | min-width: 100%; | |
| 252 | } | |
| 253 | } | |
| 254 | ||
| 255 | ||
| 256 | } | |
| 257 | ||
| 258 | @media screen and (min-width:1025px) { | |
| 259 | .gridClass { | |
| 260 | grid-template-columns: repeat(2, 1fr); | |
| 261 | } | |
| 262 | } | |
| 263 | </style> | |
