blog/blog-facade.git

inleft

2022-08-23 eeef9f3413151bea79690aac4abb737aff0cb6c8

commit \| author \| age
6461f5	1	<template>
eeef9f	2
I	3	<div class="gridClass">
	4	<div class="entry-preview" v-for="item in data">
	5	<div class="thumbnail_box">
	6
	7	<div class="thumbnail" @click="show(item.coverFileURL)">
	8	<img :src="item.coverFileURL" :key="item.id" alt="" loading="lazy">
	9	</div>
	10
	11	</div>
	12	<div class="entry-post">
	13	<div class="entry-header">
	14	<h5 class="entry-title">
	15	<router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
	16	{{item.title}}
	17	</router-link>
	18	<!-- {{item.title}} -->
	19	</h5>
	20	<div class="post_content">
	21	{{item.introduce}}
	22	</div>
	23	</div>
	24	<div class="entry-meta">
	25	<div class="post-categories">
	26	<span class="tag vcard">
	27	<a-icon type="customer-service" />
	28	<a href="#" rel="category tag"> {{item.articleTypeName}}</a>
	29	</span>
	30	<!-- <span class="tag-list">
	31	<a href="#" rel="tag">影评</a>
	32	<a href="#" rel="tag">电影</a>
	33	<a href="#" rel="tag">蜘蛛侠</a>
	34	</span> -->
	35	</div>
	36	<div class="post-on">
	37	<span class="entry-date">
	38	<a-icon type="calendar" />
	39	<a href="#" rel="bookmark">
	40	{{item.publishDate}}
	41	</a>
	42	</span>
	43	</div>
	44	</div>
	45	</div>
	46
	47	</div>
	48
6461f5	49	</div>
eeef9f	50
6461f5	51	</template>
I	52	<script>
	53	import {
	54	api as viewerApi
	55	} from "v-viewer"
	56	export default {
	57	data() {
	58	return {
eeef9f	59	options: {
I	60	'inline': false, // 是否启用inline模式
	61	'button': true, // 是否显示右上角关闭按钮
	62	'navbar': true, // 是否显示缩略图底部导航栏
	63	'title': false, // 是否显示当前图片标题，默认显示alt属性内容和尺寸
	64	'toolbar': false, // 是否显示工具栏
	65	'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true
	66	'fullscreen': true, // 播放时是否全屏，默认true
	67	'loading': true, // 加载图片时是否显示loading图标，默认true
	68	'loop': true, // 是否可以循环查看图片，默认true
	69	'movable': true, // 是否可以拖得图片，默认true
	70	'zoomable': true, // 是否可以缩放图片，默认true
	71	'rotatable': true, // 是否可以旋转图片，默认true
	72	'scalable': true, // 是否可以翻转图片，默认true
	73	'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true
	74	'transition': true, // 使用 CSS3 过度，默认true
	75	'keyboard': true, // 是否支持键盘，默认true
	76	'zoomRatio': 0.2, // 鼠标滚动时的缩放比例，默认0.1
	77	'minZoomRatio': 0.5, // 最小缩放比例，默认0.01
	78	'maxZoomRatio': 2.0, // 最大缩放比例，默认100
	79	// 'url': 'data-source' // 设置大图片的 url
	80	},
	81	data: [{
	82	"id": "1560643564944228354",
	83	"title": "把他们全部驱逐出去,一只不剩!",
	84	"articleFileURL": null,
	85	"coverFileURL": "http://t.inleft.com/blog//cover/1560643556949884929.jpg",
	86	"articleFileType": 3,
	87	"articleTypeId": "10",
	88	"articleTypeName": "前方高能",
	89	"introduce": "出处：进击的巨人第一季第25集\r\n时间点：10分左右",
	90	"lastEditorDate": null,
	91	"publishDate": "2022-08-19",
	92	"updateDate": "2022-08-19",
	93	"isTop": 0,
	94	"authStatus": 1,
	95	"isAllowedComment": 1,
	96	"isAnyUpdate": 0,
	97	"jumpURL": null,
	98	"previousRecord": null,
	99	"nextRecord": null
	100	}, {
	101	"id": "1560637549020446722",
	102	"title": "名场面之兵长砍猴",
	103	"articleFileURL": null,
	104	"coverFileURL": "http://t.inleft.com/blog//cover/1560637517290536962.jpg",
	105	"articleFileType": 3,
	106	"articleTypeId": "10",
	107	"articleTypeName": "前方高能",
	108	"introduce": "出处：进击的巨人第三季第17集\r\n时间点：5分左右",
	109	"lastEditorDate": null,
	110	"publishDate": "2022-08-19",
	111	"updateDate": "2022-08-19",
	112	"isTop": 0,
	113	"authStatus": 1,
	114	"isAllowedComment": 1,
	115	"isAnyUpdate": 0,
	116	"jumpURL": null,
	117	"previousRecord": null,
	118	"nextRecord": null
	119	}, {
	120	"id": "1560251661752991748",
	121	"title": "艾尔文团长的冲锋",
	122	"articleFileURL": null,
	123	"coverFileURL": "http://t.inleft.com/blog//cover/1560331526686638082.jpg",
	124	"articleFileType": 3,
	125	"articleTypeId": "10",
	126	"articleTypeName": "前方高能",
	127	"introduce": "出处：进击的巨人第三季第16集\r\n时间点：21分左右",
	128	"lastEditorDate": null,
	129	"publishDate": "2022-08-18",
	130	"updateDate": "2022-08-18",
	131	"isTop": 0,
	132	"authStatus": 1,
	133	"isAllowedComment": 1,
	134	"isAnyUpdate": 0,
	135	"jumpURL": null,
	136	"previousRecord": null,
	137	"nextRecord": null
	138	}, {
	139	"id": "1560251661752991747",
	140	"title": "我今日就要带她走,我睇下边个敢拦胆我!",
	141	"articleFileURL": null,
	142	"coverFileURL": "http://t.inleft.com/blog//cover/1560332612973625346.jpg",
	143	"articleFileType": 3,
	144	"articleTypeId": "10",
	145	"articleTypeName": "前方高能",
	146	"introduce": "出处：刺客伍六七第一季第9集\r\n时间点：13分左右",
	147	"lastEditorDate": null,
	148	"publishDate": "2022-08-18",
	149	"updateDate": "2022-08-18",
	150	"isTop": 0,
	151	"authStatus": 1,
	152	"isAllowedComment": 1,
	153	"isAnyUpdate": 0,
	154	"jumpURL": null,
	155	"previousRecord": null,
	156	"nextRecord": null
	157	}, {
	158	"id": "1560251661752991746",
	159	"title": "Death Note",
	160	"articleFileURL": null,
	161	"coverFileURL": "http://t.inleft.com/blog//cover/1560251636746551298.jpg",
	162	"articleFileType": 3,
	163	"articleTypeId": "10",
	164	"articleTypeName": "前方高能",
	165	"introduce": "出处：Death Note7集\r\n时间点：12分左右",
	166	"lastEditorDate": null,
	167	"publishDate": "2022-08-18",
	168	"updateDate": "2022-08-18",
	169	"isTop": 0,
	170	"authStatus": 1,
	171	"isAllowedComment": 1,
	172	"isAnyUpdate": 0,
	173	"jumpURL": null,
	174	"previousRecord": null,
	175	"nextRecord": null
	176	}, {
	177	"id": "1560239309611597825",
	178	"title": "罪恶王冠·王的黑化",
	179	"articleFileURL": null,
	180	"coverFileURL": "http://t.inleft.com/blog//cover/1560241671403208705.jpg",
	181	"articleFileType": 3,
	182	"articleTypeId": "10",
	183	"articleTypeName": "前方高能",
	184	"introduce": "出处：罪恶王冠15集\r\n时间点：16分左右\r\n",
	185	"lastEditorDate": null,
	186	"publishDate": "2022-08-18",
	187	"updateDate": "2022-08-18",
	188	"isTop": 0,
	189	"authStatus": 1,
	190	"isAllowedComment": 1,
	191	"isAnyUpdate": 0,
	192	"jumpURL": null,
	193	"previousRecord": null,
	194	"nextRecord": null
	195	}]
6461f5	196	}
I	197	},
	198	methods: {
eeef9f	199	show(param) {
I	200	console.log(111);
	201	viewerApi({
	202	options: this.options,
	203	image: param
6461f5	204	})
I	205	}
	206	}
	207	}
	208	</script>