inleft
2024-05-18 57e3bead08715d72efaeffe90fafa179b8366473
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>