首页页面布局修改

src/views/home/index.vue

@@ -1,32 +1,44 @@
 <template>
   <div style="background-color: #f2f6f9">
     <el-carousel height="400px" indicator-position="none" ref="banner">
-      <el-carousel-item ref="carouselItem">
-        <div style="display: flex;width: 100%;justify-content: space-between">
-          <div class="banner-img">
-            <img src="../../assets/banner/BANNER_Z2.jpg" width="100%">
-          </div>
-          <div class="banner-img">
-            <img src="../../assets/banner/BANNER_Z1.jpg" alt="" width="100%">
-          </div>
-          <div class="banner-img">
-            <img src="../../assets/banner/BANNER_Z3.jpg" alt="" width="100%">
-          </div>
+      <el-carousel-item>
+        <div class="banner-img1">
         </div>
       </el-carousel-item>
       <el-carousel-item>
-        <div style="display: flex;width: 100%;justify-content: space-between">
-          <div>
-            <img src="../../assets/banner/BANNER_Z4.jpg" alt="" width="100%">
-          </div>
-          <div>
-            <img src="../../assets/banner/BANNER_Z5.jpg" alt="" width="100%">
-          </div>
-          <div>
-            <img src="../../assets/banner/BANNER_Z1.jpg" alt="" width="100%">
-          </div>
+        <div class="banner-img2">
         </div>
       </el-carousel-item>
+      <el-carousel-item>
+        <div class="banner-img3">
+        </div>
+      </el-carousel-item>
+<!--      <el-carousel-item ref="carouselItem">-->
+<!--        <div style="display: flex;width: 100%;justify-content: space-between">-->
+<!--          <div>-->
+<!--            <img src="../../assets/banner/BANNER_Z2.jpg" width="100%">-->
+<!--          </div>-->
+<!--          <div>-->
+<!--            <img src="../../assets/banner/BANNER_Z1.jpg" alt="" width="100%">-->
+<!--          </div>-->
+<!--          <div>-->
+<!--            <img src="../../assets/banner/BANNER_Z3.jpg" alt="" width="100%">-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </el-carousel-item>-->
+<!--      <el-carousel-item>-->
+<!--        <div style="display: flex;width: 100%;justify-content: space-between">-->
+<!--          <div>-->
+<!--            <img src="../../assets/banner/BANNER_Z4.jpg" alt="" width="100%">-->
+<!--          </div>-->
+<!--          <div>-->
+<!--            <img src="../../assets/banner/BANNER_Z5.jpg" alt="" width="100%">-->
+<!--          </div>-->
+<!--          <div>-->
+<!--            <img src="../../assets/banner/BANNER_Z1.jpg" alt="" width="100%">-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </el-carousel-item>-->
     </el-carousel>
 
 <!--    <el-carousel height="400px" indicator-position="none">-->
@@ -41,92 +53,108 @@
 <!--    </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 style="margin-top: 40px">
+      <h1 class="bigTitle" style="margin-bottom: 15px;color: #0051a2;">供应链管理</h1>
+      <p style="color: #333;font-size: 17px;width: 50%;margin: 0 auto;line-height: 1.8">青岛中电国际物流有限公司拥有19年供应链管理经验，物流网络覆盖全国，是客户值得信赖的品牌。</p>
+      <div class="container">
+        <div style="display: flex;justify-content: space-between;">
+          <div class="left" style="width: 47%">
+            <p class="small-title"><router-link to="/transport">仓储运输</router-link></p>
+            <div>
+              <img src="../../assets/SCM/SCM002.jpg" width="100%">
             </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 class="right" style="width: 47%">
+            <p class="small-title"><router-link to="/coldChain">冷链物流</router-link></p>
+            <div>
+              <img src="../../assets/SCM/SCM003.jpg" width="100%">
             </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>
+    </div>
+    <div style="margin-top: 40px">
+      <h1 class="bigTitle" style="margin-bottom: 15px;color: #0051a2">现代物流</h1>
+      <p style="color: #333;font-size: 17px;width: 50%;margin: 0 auto;line-height: 1.8">为了满足客户的需求，我公司通过现代化的物流管理，以最低的成本，通过运输、保管、配送等方式，实现原材料、半成品、成品或相关信息，为客户进行由商品的产地到商品的消费地的计划、实施和管理。</p>
+      <div class="container">
+        <div style="display: flex;justify-content: space-between;">
+          <div class="left" style="width: 47%">
+            <p class="small-title"><router-link to="/project">项目物流</router-link></p>
+            <div>
+              <img src="../../assets/logistics/logistics2.jpg" width="100%">
             </div>
-            <div class="b-right" style="text-align: right">
-              <img src="../../assets/vegetable2.gif" height="220px">
+          </div>
+          <div class="right" style="width: 47%">
+            <p class="small-title"><router-link to="/railway">中欧铁路物流</router-link></p>
+            <div>
+              <img src="../../assets/logistics/logistics3.jpg" width="100%">
             </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>-->
-<!--&lt;!&ndash;        <span style="border-bottom: 3px solid #25c4cd;color: #154477">快捷服务</span>&ndash;&gt;-->
-<!--        <span style="border-bottom: 3px solid #710702;color: #2A328E">快捷服务</span>-->
-<!--      </div>-->
-<!--      <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;">-->
-<!--          </router-link>-->
-<!--        </div>-->
-<!--        <div style="width: 500px;height: 170px;">-->
-<!--          <router-link to="/business">-->
-<!--            <img src="../../assets/wuliu.png" alt="" style="width: 100%;height: 170px;">-->
-<!--          </router-link>-->
+    <!--   供应链管理 -->
+<!--    <div class="SCM">-->
+<!--      <div class="container" style="height: 100%;display: flex;justify-content: space-between;align-items: center">-->
+<!--        <div class="SCM-left" style="text-align: left">-->
+<!--          <div class="pic" id="pic">-->
+<!--            <div class="SCM-left-1" style="margin-bottom: 15px;width: 100%;">-->
+<!--              <img src="../../assets/SCM/SCM001.jpg" height="100%" id="pic1" ref="bug">-->
+<!--            </div>-->
+<!--            <div class="SCM-left-2">-->
+<!--              <img src="../../assets/SCM/SCM002.jpg" height="100%" id="pic2">-->
+<!--            </div>-->
+<!--          </div>-->
 <!--        </div>-->
+<!--        <el-card class="SCM-right" style="display: flex;flex-direction: column;justify-content: space-between">-->
+<!--          <h1 class="SCM-BigTitle" style="margin-bottom: 15px;color: #2A328E;text-align: left;">供应链管理</h1>-->
+<!--          <div>-->
+<!--            <p>青岛中电国际物流有限公司拥有19年供应链管理经验，物流网络覆盖全国，是客户值得信赖的品牌。</p>-->
+<!--          </div>-->
+<!--          <div style="display: flex;justify-content: space-evenly">-->
+<!--            <div>-->
+<!--              <p class="SCM-right-title"><router-link to="/transport">仓储运输</router-link></p>-->
+<!--              &lt;!&ndash;            <div>专业从事国内货物长途整车、零担配载运输、大件运输、货物仓储、仓储管理。</div>&ndash;&gt;-->
+<!--              &lt;!&ndash;            <div>我司每年代理进口及运输20多万吨棉花，10万吨芝麻等货物，并为客户进行仓储管理，所管理的20余个仓库遍布山东省，依托先进的仓储物流平台管理系统，可以给客户提供便捷、安全、随时随地可监控的仓储管理，彻底解决客户的后顾之忧。</div>&ndash;&gt;-->
+<!--            </div>-->
+<!--            <div>-->
+<!--              <p class="SCM-right-title"><router-link to="/coldChain">冷链物流</router-link></p>-->
+<!--              &lt;!&ndash;            <p>冷链物流服务是本公司针对于运送生鲜类货物的客户的一项专属服务。保障了对于配送温度控制方面要求较高的生鲜类、冻品类的商品品质，我们会按照各种生鲜类货物的要求，采取定制化、个性化的方案，竭力满足客户在冷链运输上的所有需求。</p>&ndash;&gt;-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </el-card>-->
 <!--      </div>-->
-<!--      <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;">-->
-<!--          </router-link>-->
-<!--        </div>-->
-<!--        <div style="width: 500px;height: 170px;">-->
-<!--          <img src="../../assets/kefu.png" alt="" style="width: 100%;height: 170px;">-->
+<!--    </div>-->
+<!--&lt;!&ndash;    现代物流&ndash;&gt;-->
+<!--    <div class="logistics">-->
+<!--&lt;!&ndash;      <h1 style="margin-bottom: 15px;color: #2A328E">现代物流</h1>&ndash;&gt;-->
+<!--      <div class="container" style="height: 100%;display: flex;justify-content: space-between;align-items: center">-->
+<!--        <div class="logistics-right" style="text-align: left">-->
+<!--          <h1 class="SCM-BigTitle" style="margin-bottom: 15px;color: #2A328E;text-align: center" :style="{width: titleWidth == 0?'100%':titleWidth+'px'}">现代物流</h1>-->
+<!--          <div class="pic">-->
+<!--            <div style="margin-bottom: 15px">-->
+<!--              <img src="../../assets/logistics/logistics1.jpg" height="100%">-->
+<!--            </div>-->
+<!--            <div>-->
+<!--              <img src="../../assets/logistics/logistics2.jpg" height="100%">-->
+<!--            </div>-->
+<!--          </div>-->
 <!--        </div>-->
+<!--        <el-card class="logistics-left" style="display: flex;flex-direction: column;justify-content: space-between">-->
+<!--          <div>-->
+<!--            <p>为了满足客户的需求，我公司通过现代化的物流管理，以最低的成本，通过运输、保管、配送等方式，实现原材料、半成品、成品或相关信息，为客户进行由商品的产地到商品的消费地的计划、实施和管理。</p>-->
+<!--          </div>-->
+<!--          <div>-->
+<!--            <p class="logistics-left-title"><router-link to="/project">项目物流</router-link></p>-->
+<!--            <p>根据客户需求及行业特点，我司可提供定制化、差异化的解决方案，包括物流服务方案和客户服务方案</p>-->
+<!--          </div>-->
+<!--          <div>-->
+<!--            <p class="logistics-left-title"><router-link to="/railway">中欧铁路物流</router-link></p>-->
+<!--            <p>公司在铁路服务方面也拥有一批高素质、操作经验丰富的专业团队，擅长组织大型项目工程设备、大件、超限货物的运输，从中国内陆运往中国周边国家及欧洲，以及以上地区进口到中国内地的铁路运输。中电物流在国际铁路联运、国际多式联运、国境运输、进出口联运车皮计划、在途货物运行跟踪、门到门服务等方面具有明显优势。</p>-->
+<!--          </div>-->
+<!--        </el-card>-->
 <!--      </div>-->
 <!--    </div>-->
-    <!--    <div style="width: 100%;height: 600px;background-color: #FFFFFF;padding-top: 10px">-->
-    <!--      <div style="margin-bottom: 30px;">-->
-    <!--        <h1 style="margin-bottom: -5px">SERVICE</h1>-->
-    <!--        <span style="border-bottom: 3px solid #25c4cd">新闻资讯</span>-->
-    <!--      </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>-->
-
-    <div style="padding: 50px 0;background-color: #2A328E;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>
 
@@ -142,9 +170,21 @@ export default {
         {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'}
       ],
+      titleWidth: '0',
     };
   },
+  mounted() {
+    // setTimeout(() => {
+    //   this.getWidth()
+    //   console.log(this.$refs.bug)
+    // }, 100)
+
+  },
   methods: {
+    // getWidth() {
+    //   let pic1 = document.getElementById('pic1')
+    //   this.titleWidth = pic1.clientWidth
+    // },
     myOrder() {
       // this.$router.push({path: '/myorder'});
     }
@@ -153,6 +193,13 @@ export default {
 </script>
 
 <style scoped lang="scss">
+* {
+  font-family: "Microsoft YaHei", Arial, sans-serif, Helvetica;
+}
+a {
+  color: #0051a2;
+  text-decoration: none;
+}
 .el-row {
   margin-bottom: 20px;
 
@@ -160,7 +207,12 @@ export default {
     margin-bottom: 0;
   }
 }
-
+.el-card div {
+  font-size: 14px;
+  color: #8c939d;
+  text-align: left;
+  text-indent: 2em;
+}
 .el-col {
   border-radius: 4px;
 }
@@ -207,8 +259,8 @@ export default {
   background-size: 100% !important
 }
 .container {
-  width: 60%;
-  margin: 0 auto;
+  width: 50%;
+  margin: 0px auto;
 }
 .tra-top, .tra-center, .tra-bottom {
   display: flex;
@@ -223,4 +275,74 @@ export default {
   margin-left: 25px;
   line-height: 1.5;
 }
+.SCM, .logistics {
+  width: 100%;
+  height: 500px;
+  margin-top: 50px;
+}
+.SCM-left, .logistics-right {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.SCM-BigTitle {
+  flex-shrink: 0;
+  margin-top: 0;
+}
+.pic {
+  flex: 1;
+}
+.SCM-left div {
+  height: calc((100% - 15px) / 2);
+}
+.logistics-right div {
+  height: calc((100% - 15px) / 2);
+}
+.SCM-right {
+  width: 60%;
+  height: 100%;
+  flex-shrink: 0;
+  margin-left: 30px;
+}
+.logistics-left {
+  width: 60%;
+  height: 100%;
+  flex-shrink: 0;
+  margin-left: 30px;
+}
+.el-card .SCM-right-title, .el-card .logistics-left-title {
+  text-align: left;
+  font-weight: bold;
+  font-size: 22px;
+  letter-spacing: 1px;
+  color: rgba(0, 0, 0, 0.98);
+  text-indent: 0;
+}
+.banner-img1 {
+  width: 100%;
+  height: 100%;
+  background: url("../../assets/banner/BANNER_N1.jpg") no-repeat center center;
+  background-size: cover;
+}
+.banner-img2 {
+  width: 100%;
+  height: 100%;
+  background: url("../../assets/banner/BANNER_N2.jpg") no-repeat center center;
+  background-size: cover;
+}
+.banner-img3 {
+  width: 100%;
+  height: 100%;
+  background: url("../../assets/banner/BANNER_N3.jpg") no-repeat center center;
+  background-size: cover;
+}
+.small-title {
+  font-size: 25px;
+  font-weight: 600;
+  letter-spacing: 1px;
+}
+.bigTitle {
+  font-family: "arial";
+}
 </style>