主页banner

This commit is contained in:
lmj
2022-10-20 16:20:26 +08:00
parent e784669233
commit 3b1cd4c659

View File

@@ -10,8 +10,7 @@
<img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt=""> <img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
</swiper-slide> </swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> <div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div> <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
<div class="swiper-button-next" slot="button-next"></div>
</swiper> </swiper>
</div> </div>
<div class="personal-panel"> <div class="personal-panel">
@@ -1195,10 +1194,9 @@
// background: url('/images/course-banner.png'); // background: url('/images/course-banner.png');
.swiper-button-prev{ .swiper-button-prev{
height: 38px; height: 38px;
// left: 44%; // top:auto;
top:auto;
padding: 0 16px; padding: 0 16px;
background: rgba($color: #000000, $alpha: 0.1) url('../assets/images/icon/ban-left.png') no-repeat; background: rgba($color: #000000, $alpha: 0.8) url('../assets/images/icon/ban-left.png') no-repeat;
background-size: 12px 18px; background-size: 12px 18px;
background-position: 16px 10px; background-position: 16px 10px;
bottom: 66px; bottom: 66px;
@@ -1221,23 +1219,25 @@
bottom: 66px; bottom: 66px;
} }
::v-deep .swiper-pagination{ ::v-deep .swiper-pagination{
height: 38px; line-height: 25px;
line-height: 34px; height: 32px;
background: rgba($color: #000000, $alpha: 0.1); background: rgba(0,0,0,0.5);
border-radius: 19px;
// background: rgba($color: #000000, $alpha: 0.1);
width: auto; width: auto;
left:48%; left:48%;
padding: 0 20px; padding: 0 20px;
border-radius: 19px; border-radius: 19px;
.swiper-pagination-bullet{ .swiper-pagination-bullet{
background: #000; background: #000;
width: 16px; width: 24px;
height: 2px; height: 2px;
background: rgba($color: #fff, $alpha: 0.5); background: rgba($color: #fff, $alpha: 0.5);
border-radius: 2px; border-radius: 2px;
} }
.swiper-pagination-bullet-active{ .swiper-pagination-bullet-active{
height: 2px; height: 2px;
width: 16px; width: 24px;
background: rgba($color: #fff, $alpha: 0.8); background: rgba($color: #fff, $alpha: 0.8);
border-radius: 2px; border-radius: 2px;
} }