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-15 17:47:23 +08:00
parent 00fe1a63e0
commit 9d5fe17b0e
10 changed files with 105 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/App.vue
View File

@ -18,7 +18,30 @@
</div>
<router-view/>
<div class="footer">
<div class="content" style="display: flex;justify-content: space-between;text-decoration: none;">
<div class="text" >
<!-- <h3>020-89898233</h3> -->
<p>地址：福建省莆田市荔城区荔园中路西侧50米飞阳建设工程有限公司(香槟国际)</p>
<p>飞阳建筑集团 版权所有</p>
<a href="https://beian.miit.gov.cn/" target="_blank">闽ICP备12004115号-1</a>
</div>
<div class="foot_section" style="display: inline-block;">
<div class="links_list" style="display: inline-block; vertical-align: top;">
<a href="">法律声明</a>
<a href="">隐私政策</a>
<a href="">网站地图</a>
<a href="" target="_blank">设计支持</a>
</div>
<div class="socials_wrap" style="display: inline-block;">
<img src="@/assets/images/微信.png" style="margin-left: 15px;">
<img src="@/assets/images/移动端.png" style="margin-left: 10px;">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -54,6 +77,56 @@ export default{
</script>
<style lang="scss" scoped>
.footer .text p, .footer .text a {
font-weight: bold;
color: #3f3e55;
transition: all .4s;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
font-size: 14px;
color: #95959d;
line-height: 24px;
text-align: justify;
text-decoration: none;
}
.foot_section .links_list a:not(:first-child)::before {
content: '\2022'; /* 使用 Unicode 编码表示小黑点 */
color: #656565;/* 设置黑色 */
display: inline-block; /* 将伪元素转换为块级元素，以便设置宽度和高度 */
width: 3px;
height: 3px;
margin-right: 15px; /* 设置与链接之间的间距 */
}
.foot_section .links_list a{
font-size: 14px;
text-decoration: none;
position: relative;
font-weight: bold;
color: #656565;
line-height: 33px;
padding-left: 10px;
margin-left: 3px;
opacity: .6;
}
.footer {
width: 100%;
padding: 28px 0 37px;
background-color: #f7f6f4;
position: relative;
z-index: 102;
}
.footer .content {
position: relative;
height: 100%;
}
.content {
width: 1280px;
margin: 0 auto;
}
#header{
width: 100%;
min-width: 1280px;

BIN
src/assets/images/4 荣誉1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
src/assets/images/4 荣誉2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
src/assets/images/4 荣誉3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
src/assets/images/4 荣誉4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
src/assets/images/微信.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/微信二维码.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/images/移动端.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 961 B

BIN
src/assets/images/移动端二维码.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

54
src/views/HomeView.vue
View File

@ -122,12 +122,12 @@
margin-right: -14px;
z-index: 2;">
<div class="swiper2" style="max-width: 80vw;overflow: hidden;height: 100%;">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="@/assets/images/index3_1.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 class="swiper-slide"><img src="@/assets/images/index3_2.png"></div>
<div class="swiper-slide"><img src="@/assets/images/index3_3.png"></div>
<div class="swiper-wrapper swiper9">
<div class="swiper-slide"><img src="@/assets/images/index3_1.png" style=" border-radius: 10px;width: 100%;"></div>
<div class="swiper-slide"><img src="@/assets/images/index3_2.png" style=" border-radius: 10px;width: 100%;"></div>
<div class="swiper-slide"><img src="@/assets/images/index3_3.png" style=" border-radius: 10px;width: 100%;"></div>
<div class="swiper-slide"><img src="@/assets/images/index3_2.png" style=" border-radius: 10px;width: 100%;"></div>
<div class="swiper-slide"><img src="@/assets/images/index3_3.png" style=" border-radius: 10px;width: 100%;"></div>
</div>
<div class="swiper-pagination1" style="text-align: center;"></div>
@ -165,19 +165,21 @@
</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 style="max-width: 80vw;overflow: hidden;height: 100%;margin: auto;">
<div class="swiper3" >
<div class="swiper-wrapper swiper9" >
<div class="swiper-slide" style="background-color: rgb(240,246,250);border-radius: 10px;padding: 40px;box-sizing: border-box;"><img src="@/assets/images/4 荣誉1.png" style=" width: 100%;margin: auto;"></div>
<div class="swiper-slide" style="background-color: rgb(240,246,250);border-radius: 10px;padding: 40px;box-sizing: border-box;"><img src="@/assets/images/4 荣誉2.png" style=" width: 100%;margin: auto;"></div>
<div class="swiper-slide" style="background-color: rgb(240,246,250);border-radius: 10px;padding: 40px;box-sizing: border-box;"><img src="@/assets/images/4 荣誉3.png" style=" width: 100%;margin: auto;"></div>
<div class="swiper-slide" style="background-color: rgb(240,246,250);border-radius: 10px;padding: 40px;box-sizing: border-box;"><img src="@/assets/images/4 荣誉4.png" style=" width: 100%;margin: auto;"></div>
</div>
<div class="swiper-pagination1" style="text-align: center;"></div>
</div> -->
</div>
</div>
</div>
</div>
</template>
@ -244,7 +246,9 @@ export default {
}
})
new Swiper('.swiper3', {
slidesPerView: 4,
slidesPerGroup: 1,
spaceBetween: 20,
pagination: {
el: '.swiper-pagination1'
}
@ -306,16 +310,12 @@ export default {
}
.swiper-slide1 img {
width: 100%;
border-radius: 10px;
}
.swiper-slide2{
width:100%;
}
.swiper5 .swiper-slide::after {
.swiper-slide::after {
content: '';
left: 0px;
position: absolute;
@ -418,7 +418,7 @@ h6 {
.index_3 {
padding-top: 140px;
width: 100%;
height: 787px;
height: 604px;
background: url(../assets/images/index3.png) no-repeat center;
background-attachment: fixed;
background-size: cover;
@ -438,4 +438,12 @@ h6 {
color: rgba(255, 255, 255, .5);
font-weight: bold;
}
.swiper9 .swiper-slide::after{
all:initial
}
.swiper-slide9 img {
width: 100%;
}
</style>