首页布局(轮播图、颜色)更改

src/views/home/index.vue

@@ -1,21 +1,63 @@
 <template>
   <div style="background-color: #f2f6f9">
-    <el-carousel height="600px" indicator-position="none">
-      <el-carousel-item v-for="(item,index) in backgroundDiv" :key="index">
-        <div
-          class="background"
-          style="width: 100%;height: 600px;"
-          :style="item"
-        >
-        </div>
-      </el-carousel-item>
-    </el-carousel>
+    <div class="banner">
+      <div class="banner-img">
+        <img src="../../assets/banner/BANNER_Z1.jpg" width="100%">
+      </div>
+      <div class="banner-img">
+        <img src="../../assets/banner/BANNER_Z2.jpg" width="100%">
+      </div>
+      <div class="banner-img">
+        <img src="../../assets/banner/BANNER_Z3.jpg" width="100%">
+      </div>
+      <div class="banner-img">
+        <img src="../../assets/banner/BANNER_Z4.jpg" width="100%">
+      </div>
+      <div class="banner-img">
+        <img src="../../assets/banner/BANNER_Z5.jpg" width="100%">
+      </div>
+    </div>
+<!--    <div class="top-background">-->
+<!--      <div class="top" style="width: 100%;display: flex;justify-content: space-between">-->
+<!--        <div style="height: 300px">-->
+<!--          <img src="../../assets/banner/BANNER_Z1.jpg" height="100%">-->
+<!--        </div>-->
+<!--        <div style="height: 300px">-->
+<!--          <img src="../../assets/banner/BANNER_Z2.jpg" height="100%">-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="center" style="margin: -20px 0;z-index: 10">-->
+<!--        <div style="height: 300px">-->
+<!--          <img src="../../assets/banner/BANNER_Z3.jpg" height="100%">-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="bottom" style="width: 100%;display: flex;justify-content: space-between">-->
+<!--        <div style="height: 300px">-->
+<!--          <img src="../../assets/banner/BANNER_Z4.jpg" height="100%">-->
+<!--        </div>-->
+<!--        <div style="height: 300px">-->
+<!--          <img src="../../assets/banner/BANNER_Z5.jpg" height="100%">-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+
+<!--    <el-carousel height="400px" indicator-position="none">-->
+<!--      <el-carousel-item v-for="(item,index) in backgroundDiv" :key="index">-->
+<!--        <div-->
+<!--          class="background"-->
+<!--          style="width: 100%;height: 400px;"-->
+<!--          :style="item"-->
+<!--        >-->
+<!--        </div>-->
+<!--      </el-carousel-item>-->
+<!--    </el-carousel>-->
     <!--    浮动块-->
     <!--    <div style="width: 60%;height: 300px;background-color: #e32121;margin: 100px auto"></div>-->
     <div style="width: 100%;background-color: #f2f6f9;padding-top: 10px;padding-bottom: 10px">
       <div style="margin-bottom: 30px">
-        <h1 style="margin-bottom: -5px">SERVICE</h1>
-        <span style="border-bottom: 3px solid #25c4cd">快捷服务</span>
+        <h1 style="margin-bottom: -5px;color: #154477">SERVICE</h1>
+<!--        <span style="border-bottom: 3px solid #25c4cd;color: #154477">快捷服务</span>-->
+        <span style="border-bottom: 3px solid #D42C2C;color: #154477">快捷服务</span>
       </div>
       <div style="width: 80%;height: 200px;display:flex;justify-content:space-around;margin: 0 auto">
         <div style="width: 500px;height: 170px;">
@@ -41,8 +83,20 @@
     <!--      </div>-->
     <!--      <img src="../../assets/xinwen.png" alt="">-->
     <!--    </div>-->
-    <div style="width: 100%;background-color: #1e4fba;margin-bottom: -10px">
-      <img src="../../assets/xuanchuan.png" alt="" style="width: 100%;">
+
+<!--    <div style="width: 100%;background-color: #1e4fba;margin-bottom: -10px">-->
+<!--      <img src="../../assets/xuanchuan.png" alt="" style="width: 100%;">-->
+<!--    </div>-->
+
+    <div style="padding: 50px 0;background-color: #0d4dc9;color: #fff;margin-top: 50px">
+      <div style="width: 70%;margin: 0 auto">
+        <h1>我们的优势</h1>
+        <div style="line-height: 1.5">
+          青岛中电国际物流有限公司，于2005-04-01在青岛注册成立，属于交通运输、仓储和邮政业，主营
+          行业未交通运输、仓储和邮政业，我公司以商业服务的模式经营，对外经贸部批准，由国家工商局注册
+          的一级国际货运代理企业。
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -53,12 +107,19 @@ export default {
   data() {
     return {
       backgroundDiv: [
-        {background: 'transparent url(' + require('../../assets/banner/BANNER_Z1.jpg') + ') no-repeat 0px -680px'},
-        {background: 'transparent url(' + require('../../assets/banner/BANNER_Z2.jpg') + ') no-repeat 0px -480px'},
-        {background: 'transparent url(' + require('../../assets/banner/BANNER_Z3.jpg') + ') no-repeat 0px -480px'},
-        {background: 'transparent url(' + require('../../assets/banner/BANNER_Z4.jpg') + ') no-repeat 0px -480px'},
-        {background: 'transparent url(' + require('../../assets/banner/BANNER_Z5.jpg') + ') no-repeat 0px -480px'}
-      ]
+        {background: 'transparent url(' + require('../../assets/banner/BANNER_Z1.jpg') + ') no-repeat 0px -670px'},
+        {background: 'transparent url(' + require('../../assets/banner/BANNER_Z2.jpg') + ') no-repeat 0px -680px'},
+        {background: 'transparent url(' + require('../../assets/banner/BANNER_Z3.jpg') + ') no-repeat 0px -450px'},
+        {background: 'transparent url(' + require('../../assets/banner/BANNER_Z4.jpg') + ') no-repeat 0px -530px'},
+        {background: 'transparent url(' + require('../../assets/banner/BANNER_Z5.jpg') + ') no-repeat 0px -540px'}
+      ],
+      backgroundImage: [
+        {src: "../../assets/banner/BANNER_Z1.jpg"},
+        {src: "../../assets/banner/BANNER_Z2.jpg"},
+        {src: "../../assets/banner/BANNER_Z3.jpg"},
+        {src: "../../assets/banner/BANNER_Z4.jpg"},
+        {src: "../../assets/banner/BANNER_Z5.jpg"},
+      ],
     };
   },
   methods: {
@@ -123,4 +184,17 @@ export default {
 /deep/ .background {
   background-size: 100% !important
 }
+.top-background {
+  width: 60%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+.banner {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
 </style>