首页添加新模块

src/views/home/index.vue

@@ -41,13 +41,48 @@
 <!--    </el-carousel>-->
     <!--    浮动块-->
     <!--    <div style="width: 60%;height: 300px;background-color: #e32121;margin: 100px auto"></div>-->
+<!--  运输模块  -->
+    <div class="transport">
+      <div>
+        <h1 style="margin-bottom: 15px;color: #2A328E">国际海洋运输</h1>
+        <div class="container">
+          <div class="tra-top">
+            <div class="t-left">
+              <img src="../../assets/sea1.gif">
+            </div>
+            <div class="t-right" style="text-align: left">
+              承办各类进出口货物的海洋运输订舱、集中托运、港口交接、集装箱运输、集装箱中转及拆拼箱、散货运输、仓储分拨，并可代客户承办海洋运输保险、理货、报关、报检、结算运杂费等业务。
+            </div>
+          </div>
+          <hr style="border: 1px dashed #2A328E">
+          <div class="tra-center">
+            <div class="c-left">
+              <img src="../../assets/sea2.gif">
+            </div>
+            <div class="c-right" style="height: 100%;text-align: right">
+              <img src="../../assets/sea3.gif" height="220px">
+            </div>
+          </div>
+          <hr style="border: 1px dashed #2A328E">
+          <p style="text-align: left;font-size: 14px">保鲜、冷藏集装箱物流服务</p>
+          <div class="tra-bottom">
+            <div class="b-left">
+              <img src="../../assets/vegetable1.gif" alt="">
+            </div>
+            <div class="b-right" style="text-align: right">
+              <img src="../../assets/vegetable2.gif" height="220px">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div style="width: 100%;background-color: #f2f6f9;padding-top: 10px;padding-bottom: 10px">
       <div style="margin-bottom: 30px">
         <h1 style="margin-bottom: -5px;color: #2A328E">SERVICE</h1>
 <!--        <span style="border-bottom: 3px solid #25c4cd;color: #154477">快捷服务</span>-->
         <span style="border-bottom: 3px solid #710702;color: #2A328E">快捷服务</span>
       </div>
-      <div style="width: 80%;height: 200px;display:flex;justify-content:space-around;margin: 0 auto">
+      <div style="width: 60%;height: 200px;display:flex;justify-content:space-between;margin: 0 auto">
         <div style="width: 500px;height: 170px;">
           <router-link to="/management">
             <img src="../../assets/zaixian.png" alt="" style="width: 100%;height: 170px;">
@@ -59,7 +94,7 @@
           </router-link>
         </div>
       </div>
-      <div style="width: 80%;height: 200px;display:flex;justify-content:space-around;margin: 40px auto">
+      <div style="width: 60%;height: 200px;display:flex;justify-content:space-between;margin: 40px auto">
         <div style="width: 500px;height: 170px;cursor:pointer" @click="myOrder">
           <router-link to="/stock">
             <img src="../../assets/wode.png" alt="" style="width: 100%;height: 170px;">
@@ -171,8 +206,21 @@ export default {
 /deep/ .background {
   background-size: 100% !important
 }
-//.banner-img {
-//  float: left;
-//  width: calc(100% / 3);
-//}
+.container {
+  width: 60%;
+  margin: 0 auto;
+}
+.tra-top, .tra-center, .tra-bottom {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+}
+.t-left img, .c-left img, .b-left img {
+  height: 220px;
+}
+.t-right, .c-right, .b-right {
+  width: 100%;
+  margin-left: 25px;
+  line-height: 1.5;
+}
 </style>