| commit | author | age | ||
| f60b31 | 1 | <template> |
| ec6f20 | 2 | <div> |
| 105729 | 3 | <div class="mySecretSamll" v-if="data==null|| data.length==0"> |
| I | 4 | <p> |
| 5 | <a-icon type="delete" /> 空空如也.. | |
| 6 | </p> | |
| ec6f20 | 7 | </div> |
| 105729 | 8 | <div class="gridClass"> |
| I | 9 | <div class="entry-preview" v-for="item in data"> |
| 10 | <div class="thumbnail_box" @click="showMyVideo(item.id)"> | |
| 11 | <div class="thumbnail"> | |
| 12 | <img :src="item.coverFileURL" alt="" loading="lazy" :onerror="img404"> | |
| 13 | </div> | |
| 14 | </div> | |
| 15 | <div class="entry-post"> | |
| 16 | <div class="entry-header"> | |
| 17 | <h5 class="entry-title"> | |
| 859ec7 | 18 | <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title"> |
| I | 19 | {{item.title}} |
| 20 | </router-link> | |
| 105729 | 21 | </h5> |
| I | 22 | <div class="post_content"> |
| 23 | {{item.introduce}} | |
| 24 | </div> | |
| 25 | </div> | |
| 26 | <div class="entry-meta"> | |
| 27 | <div class="post-categories"> | |
| 28 | <span class="tag vcard"> | |
| 29 | <a-icon type="book" /> | |
| 30 | <a href="#" rel="category tag"> {{item.articleTypeName}}</a> | |
| 31 | </span> | |
| 32 | <!-- <span class="tag-list"> | |
| 33 | <a href="#" rel="tag">影评</a> | |
| 34 | <a href="#" rel="tag">电影</a> | |
| 35 | <a href="#" rel="tag">蜘蛛侠</a> | |
| 36 | </span> --> | |
| 37 | </div> | |
| 38 | <div class="post-on"> | |
| 39 | <span class="entry-date"> | |
| 40 | <a-icon type="calendar" /> | |
| 859ec7 | 41 | <a href="#" rel="bookmark"> |
| 105729 | 42 | {{item.publishDate}} |
| I | 43 | </a> |
| 44 | </span> | |
| 45 | </div> | |
| 46 | </div> | |
| 47 | </div> | |
| 48 | ||
| 49 | </div> | |
| 50 | ||
| 51 | </div> | |
| 52 | <a-row type="flex" justify="center"> | |
| 53 | <div> | |
| 54 | <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current" | |
| 55 | :defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" /> | |
| 56 | </div> | |
| 57 | </a-row> | |
| f60b31 | 58 | </div> |
| I | 59 | </template> |
| 60 | <script> | |
| 105729 | 61 | import { |
| I | 62 | queryBlogArticleList |
| 63 | } from '../../api/blogArticle.js' | |
| 56fe69 | 64 | |
| 105729 | 65 | import myConstant from "../../config/myConstant.js" |
| 859ec7 | 66 | |
| f60b31 | 67 | export default { |
| I | 68 | data() { |
| 69 | return { | |
| 105729 | 70 | page: { |
| I | 71 | size: "small", |
| 72 | total: 1, | |
| 73 | pageSize: 6, | |
| 74 | current: 1, | |
| 75 | defaultPageSize: 6 | |
| 76 | }, | |
| 77 | data: [], | |
| 78 | img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"", | |
| 56fe69 | 79 | } |
| I | 80 | }, |
| 81 | mounted() { | |
| 105729 | 82 | this.onChange(this.page.current); |
| I | 83 | }, |
| 84 | methods: { | |
| 85 | onChange(current) { | |
| 86 | this.page.current = current; | |
| 87 | queryBlogArticleList({ | |
| 88 | pageNo: current, | |
| 89 | pageSize: this.page.pageSize, | |
| 90 | fileType: myConstant.fileTypeVideo | |
| 91 | }).then((res) => { | |
| 92 | this.page.total = Number(res.data.total) | |
| 93 | this.page.pageSize = Number(res.data.size); | |
| 94 | this.data = res.data.records; | |
| 95 | return res | |
| 96 | }) | |
| 97 | }, | |
| 98 | showMyVideo(param) { | |
| 99 | this.$emit('showMyVideo', { | |
| 100 | id: param | |
| 101 | }) | |
| 56fe69 | 102 | } |
| f60b31 | 103 | } |
| I | 104 | } |
| 105 | </script> | |
| 105729 | 106 | <style lang="less"> |
| I | 107 | @--border-radius: 16px; |
| 108 | @--s-background: 16px; | |
| 109 | @--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; | |
| 110 | ||
| 111 | @font-face { | |
| 112 | font-family: "iconfont"; | |
| 113 | /* Project id 2762112 */ | |
| 114 | src: url('http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/iconfont.woff2') format('woff2'); | |
| 115 | } | |
| 116 | ||
| 117 | .gridClass { | |
| 118 | grid-template-columns: repeat(4, 1fr); | |
| 119 | display: grid; | |
| 120 | clear: both; | |
| 121 | gap: 2rem; | |
| 122 | padding-bottom: 20px; | |
| 123 | // background-color: #666; | |
| 124 | ||
| 125 | a { | |
| 126 | color: #555; | |
| 127 | } | |
| 128 | ||
| 129 | .item1 { | |
| 130 | grid-column-start: 1; | |
| 131 | grid-column-end: 3; | |
| 132 | } | |
| 133 | ||
| 134 | .entry-preview { | |
| 135 | border-radius: @--border-radius; | |
| 136 | background: @--s-background, white; | |
| 137 | animation: @--animation-mo; | |
| 138 | transition: all .5s; | |
| 139 | box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05); | |
| 140 | // background-color: red; | |
| 141 | ||
| 142 | display: flex; | |
| 143 | } | |
| 144 | ||
| 145 | .thumbnail_box { | |
| 146 | width: 50%; | |
| 147 | min-width: 50%; | |
| 148 | left: 0; | |
| 149 | ||
| 150 | .thumbnail { | |
| 151 | position: relative; | |
| 152 | width: 100%; | |
| 153 | height: 100%; | |
| 154 | border-radius: @--border-radius; | |
| 155 | overflow: hidden; | |
| 156 | background: rgba(0, 0, 0, .05); | |
| 157 | ||
| 158 | img { | |
| 159 | width: 100%; | |
| 160 | height: 100%; | |
| 161 | object-fit: cover; | |
| 162 | transform: scale(1.1); | |
| 163 | transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); | |
| 164 | border-radius: @--border-radius; | |
| 165 | } | |
| 166 | } | |
| 167 | } | |
| 168 | ||
| 169 | header { | |
| 170 | display: block; | |
| 171 | } | |
| 172 | ||
| 173 | .entry-title, | |
| 174 | .post_content { | |
| 175 | margin: 0 0 .5rem 0; | |
| 176 | } | |
| 177 | ||
| 178 | h5 { | |
| 179 | font-size: 1.05rem; | |
| 180 | } | |
| 181 | ||
| 182 | .entry-meta, | |
| 183 | .post_content { | |
| 184 | opacity: .6; | |
| 185 | } | |
| 186 | ||
| 187 | .post_content { | |
| 188 | ||
| 189 | display: -webkit-box; | |
| 190 | overflow: hidden; | |
| 191 | -webkit-box-orient: vertical; | |
| 192 | /* autoprefixer: off */ | |
| 193 | -webkit-line-clamp: 4; | |
| 194 | /* autoprefixer: on */ | |
| 195 | } | |
| 196 | ||
| 197 | .entry-preview .entry-meta { | |
| 198 | display: flex; | |
| 199 | justify-content: space-between; | |
| 200 | font-size: .5rem; | |
| 201 | padding: .5rem 0 0 0; | |
| 202 | flex-wrap: wrap; | |
| 203 | } | |
| 204 | ||
| 205 | .vcard { | |
| 206 | margin: 0 1em 0 0; | |
| 207 | } | |
| 208 | ||
| 209 | .entry-post { | |
| 210 | padding: 1rem; | |
| 211 | transition: all .5s; | |
| 212 | display: flex; | |
| 213 | flex-direction: column; | |
| 214 | justify-content: space-between; | |
| 215 | // height: 100%; | |
| 216 | // padding: calc(70% + 1rem) 1rem 1rem 1rem; | |
| 217 | ||
| 218 | } | |
| 219 | ||
| 220 | .tag-list a { | |
| 221 | margin: 0 .5em 0 0; | |
| 222 | font-size: 14px; | |
| 223 | } | |
| 224 | } | |
| 225 | ||
| 226 | .thumbnail_box:hover .thumbnail img { | |
| 227 | transform: scale(1) translate3d(0, 0, 0); | |
| 228 | filter: blur(10px) brightness(.8); | |
| 229 | } | |
| 230 | ||
| 231 | .thumbnail_box:hover .thumbnail:after { | |
| 232 | width: 100%; | |
| 233 | height: 100%; | |
| 234 | opacity: 1; | |
| 235 | } | |
| 236 | ||
| 237 | .thumbnail:before { | |
| 238 | content: "\ec2a"; | |
| 239 | opacity: .1; | |
| 240 | font-size: 3rem; | |
| 241 | } | |
| 242 | ||
| 243 | .thumbnail:after { | |
| 244 | width: 70%; | |
| 245 | border: 1px solid rgba(255, 255, 255, .75); | |
| 246 | opacity: 0; | |
| 247 | height: 70%; | |
| 248 | transition: all .5s; | |
| 249 | z-index: 2; | |
| 250 | color: white; | |
| 251 | border-radius: @--border-radius; | |
| 252 | content: "\e627"; | |
| 253 | font-size: 1rem; | |
| 254 | text-shadow: 0 1px 5px rgb(0 0 0 / 30%); | |
| 255 | } | |
| 256 | ||
| 257 | .thumbnail:before, | |
| 258 | .thumbnail:after { | |
| 259 | display: flex; | |
| 260 | justify-content: center; | |
| 261 | align-items: center; | |
| 262 | font-family: 'iconfont'; | |
| 263 | position: absolute; | |
| 264 | top: 50%; | |
| 265 | left: 50%; | |
| 266 | transform: translate(-50%, -50%); | |
| 267 | overflow: hidden; | |
| 268 | } | |
| 269 | ||
| 270 | @media screen and (max-width:1024px) { | |
| 271 | .gridClass { | |
| 272 | grid-row-gap: 2rem; | |
| 273 | grid-column-gap: 0rem; | |
| 274 | grid-template-columns: repeat(1, 1fr); | |
| 275 | ||
| 276 | .entry-preview { | |
| 277 | display: block; | |
| 278 | } | |
| 279 | ||
| 280 | .thumbnail_box { | |
| 281 | min-width: 100%; | |
| 282 | } | |
| 283 | } | |
| 284 | ||
| 285 | ||
| 286 | } | |
| 287 | ||
| 288 | @media screen and (min-width:1025px) { | |
| 289 | .gridClass { | |
| 290 | grid-template-columns: repeat(2, 1fr); | |
| 291 | } | |
| 292 | } | |
| 293 | </style> | |
