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