blog/blog-facade.git

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>