inleft
2022-08-25 c6793e5475b607e83cbb55b7d0ddfb9b81bd7774
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">
19                                 <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
20                                     {{item.title}}
21                                 </router-link>
22                                 <!-- {{item.title}} -->
23                             </h5>
24                             <div class="post_content">
25                                 {{item.introduce}}
26                             </div>
27                         </div>
28                         <div class="entry-meta">
29                             <div class="post-categories">
30                                 <span class="tag vcard">
31                                     <a-icon type="customer-service" />
32                                     <a href="#" rel="category tag"> {{item.articleTypeName}}</a>
33                                 </span>
34                                 <!-- <span class="tag-list">
105729 35                                 <a href="#" rel="tag">影评</a>
I 36                                 <a href="#" rel="tag">电影</a>
37                                 <a href="#" rel="tag">蜘蛛侠</a>
38                             </span> -->
80476f 39                             </div>
I 40                             <div class="post-on">
41                                 <span class="entry-date">
42                                     <a-icon type="calendar" />
43                                     <a href="#" rel="bookmark">
44                                         {{item.publishDate}}
45                                     </a>
46                                 </span>
47                             </div>
105729 48                         </div>
I 49                     </div>
50                 </div>
51             </div>
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 {
80476f 63         platform
105729 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: [],
80476f 79                 img404: myConstant.img404,
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;
80476f 88                 platform({
105729 89                     pageNo: current,
I 90                     pageSize: this.page.pageSize,
80476f 91                     activeKey: this.$attrs.activeKey
105729 92                 }).then((res) => {
I 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     }
80476f 278
1cf6d9 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);
80476f 284
105729 285             .entry-preview {
I 286                 display: block;
287             }
80476f 288
105729 289             .thumbnail_box {
I 290                 min-width: 100%;
291             }
292         }
293     }
294 </style>