hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-16 22:36:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

首页轮播图样式

Browse Source
This commit is contained in:
zhaofang
2022-10-18 20:20:52 +08:00
parent 1b1cbc4f87
commit fce6779a4a
6 changed files with 77 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/views/Index.vue
View File

@@ -10,6 +10,8 @@
<img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
<div class="personal-panel">
@@ -205,7 +207,7 @@
</div>
</div>
<div class="xcontent2-minor">
<div class="portal-ranking ranking-bg" style="margin-top:60px">
<div class="portal-ranking ranking-bg" style="margin-top:60px;padding-right:17px">
<p class="ranking-title">案例排行榜</p>
<ul class="xindex-ranking-case">
<li @click="jumcasedet(item)" class="xindex-ranking-li title-line-ellipsis" v-for="(item, index) in Popularity" :key="index" style="line-height: 22px;">
@@ -308,7 +310,7 @@
</div>
<!--内容块-->
<div class="xcontent2-minor">
<div style="margin-top:80px" class="portal-ranking ranking-bg">
<div style="margin-top:80px;padding-right:17px" class="portal-ranking ranking-bg">
<!-- 排行榜位置 -->
<p class="ranking-title">文章排行榜</p>
<ul class="xindex-ranking-article">
@@ -365,7 +367,7 @@
</div>
<div class="xcontent2-minor">
<!-- 排行榜 -->
<div class="portal-ranking ranking-bg" style="margin-top:80px">
<div class="portal-ranking ranking-bg" style="margin-top:80px;padding-right:17px">
<p class="ranking-title">问答排行榜</p>
<ul class="xindex-ranking-qa">
<li @click="jumpRouter(item)" class="xindex-ranking-li" v-for="(item, index) in answersList" :key="index" style="line-height: 22px;">
@@ -1183,6 +1185,51 @@
.course-banner {
height: 520px;
// background: url('/images/course-banner.png');
.swiper-button-prev{
height: 38px;
left: 44%;
top:auto;
background: url('../assets/images/icon/ban-left.png') no-repeat;
bottom: 66px;
}
.swiper-button-next{
height: 38px;
right: 53%;
bottom: 66px;
top:auto;
background: url('../assets/images/icon/ban-right.png') no-repeat;
}
.swiper-pagination-bullets{
// background: #000;
left: 60px;
bottom: 66px;
}
::v-deep .swiper-pagination{
height: 38px;
line-height: 34px;
background: rgba($color: #000000, $alpha: 0.1);
width: auto;
left:48%;
padding: 0 20px;
border-radius: 19px;
.swiper-pagination-bullet{
background: #000;
width: 16px;
height: 2px;
background: rgba($color: #fff, $alpha: 0.5);
border-radius: 2px;
}
.swiper-pagination-bullet-active{
height: 2px;
width: 16px;
background: rgba($color: #fff, $alpha: 0.8);
border-radius: 2px;
}
.swiper-container{
// background-color: rgba($color: #000000, $alpha: 0.2);
}
}
}
.case-orginfo {