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