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
209
210
211
212
213
214
215
216
217
218
219
220
221
<script setup lang="ts">
import { onMounted } from 'vue';
import Swiper from 'swiper/bundle';
onMounted(() => {
// init Swiper:
new Swiper('.mySwiper', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
modifier: 2,
slideShadows: true,
},
loop: false,
});
});
</script>
<template>
<div class="content fit center">
<div class="section">
<!-- Slider main container -->
<div class="swiper mySwiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="mycard">
<div class="item">
<p>
远游越山川，山川修且广。 <br />
振策陟崇丘，案辔遵平莽。<br />
夕息抱影寐，朝徂衔思往。 <br />
顿辔倚嵩岩，侧听悲风响。<br />
清露坠素辉，明月一何朗。 <br />
抚枕不能寐，振衣独长想。
</p>
<div class="details">
<h3>
<span>晋⋅ 陆机</span><br />
赴洛道中作二首 · 其二
</h3>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="mycard">
<div class="item">
<p>
韶华争肯偎人住？已是滔滔去。 <br />
西风无赖过江来，<br />
历尽千山万水几时回？ <br />
秋声带叶萧萧落，莫响城头角！<br />
浮云遮月不分明， <br />
谁挽长江一洗放天青？
</p>
<div class="details">
<h3>
<span>清⋅ 董士锡</span><br />
虞美人 · 韶华争肯偎人住
</h3>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="mycard">
<div class="item">
<p>
秦孝公据崤函之固，拥雍州之地， <br />
君臣固守以窥周室，<br />
有席卷天下，包举宇内， <br />
囊括四海之意，并吞八荒之心。<br />
当是时也，商君佐之，<br />
内立法度，务耕织，<br />
修守战之具；<br />
外连衡而斗诸侯。<br />
于是秦人拱手而取西河之外。<br />
</p>
<div class="details">
<h3>
<span>汉⋅ 贾谊</span><br />
过秦论
</h3>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="mycard">
<div class="item">
<p>
秦孝公据崤函之固，拥雍州之地， <br />
君臣固守以窥周室，<br />
有席卷天下，包举宇内， <br />
囊括四海之意，并吞八荒之心。<br />
当是时也，商君佐之，<br />
内立法度，务耕织，<br />
修守战之具；<br />
外连衡而斗诸侯。<br />
于是秦人拱手而取西河之外。<br />
</p>
<div class="details">
<h3>
<span>汉⋅ 贾谊</span><br />
过秦论
</h3>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="mycard">
<div class="item">
<p>
有一美人兮，见之不忘。 <br />
一日不见兮，思之如狂。<br />
凤飞翱翔兮，四海求凰。 <br />
无奈佳人兮，不在东墙。<br />
将琴代语兮，聊写衷肠。<br />
何日见许兮，慰我彷徨。<br />
愿言配德兮，携手相将。<br />
不得於飞兮，使我沦亡。<br />
</p>
<div class="details">
<h3>
<span>汉⋅ 司马相如</span><br />
凤求凰
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.content {
// :deep(.swiper-3d .swiper-slide-shadow-left) {
// background-image: none;
// }
// :deep(.swiper-3d .swiper-slide-shadow-right) {
// background-image: none;
// }
:deep(.swiper-slide-active) {
// filter: blur(0);
background-color: #fff;
}
}
.section {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #9f6b65;
}
.swiper {
width: 100%;
padding-top: 40px;
padding-bottom: 40px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 280px;
height: 370px;
overflow: hidden;
background-color: #d1ebff;
border-radius: 10px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
// filter: blur(4px);
}
.mycard {
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
padding: 20px;
color: #999;
display: grid;
align-items: center;
.details {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 10px;
h3 {
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: #9f6b65;
line-height: 1.1em;
text-align: right;
margin-bottom: 0px;
span {
font-size: 12px;
color: #666;
}
}
}
}
</style>