root/feiyang-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

飞阳官网

Browse Source
This commit is contained in:
dzj 2024-04-12 18:14:25 +08:00
parent a92f78af56
commit 00fe1a63e0
1 changed files with 35 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/HomeView.vue
View File

@ -3,7 +3,7 @@
<div class="banner" style="height: 581px;"> <div class="banner" style="height: 581px;">
<div class="bd" style="height: 581px;position: relative;"> <div class="bd" style="height: 581px;position: relative;">
<div class="swiper-container"> <div class="swiper-container swiper5">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"><img src="@/assets/images/1.png" style="width: 100%;height:100%;"></div> <div class="swiper-slide"><img src="@/assets/images/1.png" style="width: 100%;height:100%;"></div>
<div class="swiper-slide"><img src="@/assets/images/2.png" style="width: 100%;height:100%;"></div> <div class="swiper-slide"><img src="@/assets/images/2.png" style="width: 100%;height:100%;"></div>
@ -123,11 +123,11 @@
z-index: 2;"> z-index: 2;">
<div class="swiper2" style="max-width: 80vw;overflow: hidden;height: 100%;"> <div class="swiper2" style="max-width: 80vw;overflow: hidden;height: 100%;">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide1"><img src="@/assets/images/index3_1.png"></div> <div class="swiper-slide"><img src="@/assets/images/index3_1.png"></div>
<div class="swiper-slide1"><img src="@/assets/images/index3_2.png"></div> <div class="swiper-slide"><img src="@/assets/images/index3_2.png"></div>
<div class="swiper-slide1"><img src="@/assets/images/index3_3.png"></div> <div class="swiper-slide"><img src="@/assets/images/index3_3.png"></div>
<div class="swiper-slide1"><img src="@/assets/images/index3_2.png"></div> <div class="swiper-slide"><img src="@/assets/images/index3_2.png"></div>
<div class="swiper-slide1"><img src="@/assets/images/index3_3.png"></div> <div class="swiper-slide"><img src="@/assets/images/index3_3.png"></div>
</div> </div>
<div class="swiper-pagination1" style="text-align: center;"></div> <div class="swiper-pagination1" style="text-align: center;"></div>
@ -146,7 +146,7 @@
overflow: hidden; overflow: hidden;
width: 80%; width: 80%;
margin: 0 auto;"> margin: 0 auto;">
<div class="content2-left"> <div class="content2-left" style="width:100%">
<div> <div>
<h3 style=" line-height: 60px; <h3 style=" line-height: 60px;
font-weight: lighter; font-size: 48px">公司荣耀<br>及成就展示</h3> font-weight: lighter; font-size: 48px">公司荣耀<br>及成就展示</h3>
@ -155,15 +155,30 @@
<!-- <h3></h3> --> <!-- <h3></h3> -->
<h5 style="line-height: 20px;">荣获行业诸多奖项<br> <h5 style="line-height: 20px;">荣获行业诸多奖项<br>
拥有一支高素质的专业管理团队 拥有一支高素质的专业管理团队<span style="color:RGB(48, 113, 183);float: right;font-weight: bold;">MORE...</span>
</h5> </h5>
<!-- <h5></h5> --> <!-- <h5></h5> -->
</div> </div>
</div> </div>
</div> </div>
<div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="swiper3 swiper-container" style="width:100%">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="@/assets/images/index3_1.png" style="width: 100%;"></div>
<div class="swiper-slide"><img src="@/assets/images/index3_2.png" style="width:100%"></div>
<div class="swiper-slide"><img src="@/assets/images/index3_3.png"></div>
<div class="swiper-slide"><img src="@/assets/images/index3_2.png"></div>
<div class="swiper-slide"><img src="@/assets/images/index3_3.png"></div>
</div>
<div class="swiper-pagination1" style="text-align: center;"></div>
</div> -->
</div>
</template> </template>
@ -203,7 +218,7 @@ export default {
// 初始化Swiper // 初始化Swiper
new Swiper('.swiper-container', { new Swiper('.swiper5', {
loop: true, loop: true,
autoplay: { autoplay: {
delay: 4100, delay: 4100,
@ -228,6 +243,12 @@ export default {
el: '.swiper-pagination1' el: '.swiper-pagination1'
} }
}) })
new Swiper('.swiper3', {
pagination: {
el: '.swiper-pagination1'
}
})
}, },
beforeDestroy() { beforeDestroy() {
// 在组件销毁之前停止观察器 // 在组件销毁之前停止观察器
@ -277,7 +298,7 @@ export default {
height: 100%; height: 100%;
} }
.swiper-slide1 { .swiper-slide1 {
min-width: calc(26.66666vw - 14px); min-width: calc(26.66666vw - 14px);
max-width: calc(26.66666vw - 14px); max-width: calc(26.66666vw - 14px);
@ -290,8 +311,11 @@ export default {
border-radius: 10px; border-radius: 10px;
} }
.swiper-slide2{
width:100%;
.swiper-slide::after { }
.swiper5 .swiper-slide::after {
content: ''; content: '';
left: 0px; left: 0px;
position: absolute; position: absolute;