<template>
<div class="swiper-box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in slides" :key="index">
<img :src="item" :data-index="index">
</div>
</div>
</div>
<div class="swiper-add" >
.swiper-box {
position: relative;
width: 408px;
height: 248px;
background: url('../../assets/left/bg.png') no-repeat;
background-size: 100% auto;
}
.swiper-container {
width: 300px;
margin-left: 50px;
}
.swiper-slide {
text-align: center;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-add {
position: absolute;
right: 12px;
top: 82px;
}
.swiper-add img {
width: 40px;
height: 42px;
}

.swiper-text {
color: #ffffff;
text-align: center;
line-height:32px;
position: absolute;
left: 50%;
top: 78%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.swiper-text div:last-child {
color: #43FFD2;
font-size: 18px;
vertical-align: middle;
}
.swiper-text span:first-child {
display: inline-block;
width: 23px;
height: 26px;
margin: 0 4px 0 12px;
vertical-align: middle;
background: url('../../assets/left/level.png') no-repeat;
background-size: 100% auto;
}
.swiper-text span:last-child {
font-size: 12px;
vertical-align: middle;
}
.swiper-wrapper {
padding-top: 44px;
height: 110px;
}

.swiper-slide img {
width: 80px;
height: 80px;
}
.swiper-slide-active img {
width: 110px;
height: 110px;
}

</style>

相关文章:

  • 2022-12-23
  • 2021-05-29
  • 2022-12-23
  • 2021-12-01
  • 2021-12-18
  • 2021-12-13
  • 2021-08-03
猜你喜欢
  • 2022-12-23
  • 2021-11-16
  • 2021-05-22
  • 2022-12-23
  • 2021-09-28
  • 2022-12-23
  • 2021-08-23
相关资源
相似解决方案