首页静态+部分动画完成

src/App.vue

@@ -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;

src/views/HomeView.vue

@@ -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-wrapper swiper9">
-                <div class="swiper-slide"><img src="@/assets/images/index3_1.png"></div>
+                <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"></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"></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"></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"></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 style="max-width: 80vw;overflow: hidden;height: 100%;margin: auto;">
-    <!-- <div class="swiper3 swiper-container" style="width:100%">
+      <div class="swiper3" >
-              <div class="swiper-wrapper">
+              <div class="swiper-wrapper swiper9" >
-                <div class="swiper-slide"><img src="@/assets/images/index3_1.png" style="width: 100%;"></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 荣誉1.png" style=" width: 100%;margin: auto;"></div>
-                <div class="swiper-slide"><img src="@/assets/images/index3_2.png" style="width:100%"></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"><img src="@/assets/images/index3_3.png"></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"><img src="@/assets/images/index3_2.png"></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 class="swiper-slide"><img src="@/assets/images/index3_3.png"></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>