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