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