|
|
@@ -1,252 +1,106 @@
|
|
|
<template>
|
|
|
<div style="background-color: #f2f6f9">
|
|
|
- <el-carousel height="500px" indicator-position="none" ref="banner">
|
|
|
+ <el-carousel height="500px" indicator-position="none" :interval="5000">
|
|
|
<el-carousel-item>
|
|
|
- <div class="banner-img1">
|
|
|
- </div>
|
|
|
+ <img style="width: 100%;height: 500px;" src="../../assets/banner/BANNER0.png" alt="">
|
|
|
</el-carousel-item>
|
|
|
<el-carousel-item>
|
|
|
- <div class="banner-img2">
|
|
|
- </div>
|
|
|
+ <img style="width: 100%;height: 500px;" src="../../assets/banner/BANNER1.png" alt="">
|
|
|
</el-carousel-item>
|
|
|
<el-carousel-item>
|
|
|
- <div class="banner-img3">
|
|
|
- </div>
|
|
|
+ <img style="width: 100%;height: 500px;" src="../../assets/banner/BANNER3.png" alt="">
|
|
|
+ </el-carousel-item>
|
|
|
+ <el-carousel-item>
|
|
|
+ <img style="width: 100%;height: 500px;" src="../../assets/banner/BANNER4.png" alt="">
|
|
|
+ </el-carousel-item>
|
|
|
+ <el-carousel-item>
|
|
|
+ <img style="width: 100%;height: 500px;" src="../../assets/banner/BANNER5.png" alt="">
|
|
|
</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">-->
|
|
|
-<!-- <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="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>-->
|
|
|
-<!-- <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>-->
|
|
|
-<!-- </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="/ocean">国际海运进出口</router-link></p>-->
|
|
|
-<!-- <div>-->
|
|
|
-<!-- <img src="../../assets/sea/sea1.jpg" width="100%">-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- <div class="right" style="width: 47%">-->
|
|
|
-<!-- <p class="small-title"><router-link to="/custom">报关检查</router-link></p>-->
|
|
|
-<!-- <div>-->
|
|
|
-<!-- <img src="../../assets/sea/sea2.jpg" width="100%">-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </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>-->
|
|
|
-<!-- <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 class="wrapper">
|
|
|
- <div class="container">
|
|
|
- <div>
|
|
|
- <p class="small-title"><router-link to="/ocean">国际货运代理</router-link></p>
|
|
|
- <div>
|
|
|
- <img src="../../assets/sea/sea3.jpg" alt="" width="100%">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p class="small-title"><router-link to="/transport">仓储运输</router-link></p>
|
|
|
- <div>
|
|
|
- <img src="../../assets/SCM/SCM002.jpg" width="100%">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div style="width: 100%;height: 250px;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>
|
|
|
+ <h2>视服务为企业立身之本；爱业，敬业，精益求精</h2>
|
|
|
+ <h3>青岛新世通相信，客户的信任便是我们每位员工的责任，亦是青岛新世通持之以恒的动力。尽职尽责为每位客户的完成国际货运需求，即是对客户信任的回报。</h3>
|
|
|
</div>
|
|
|
- <div class="wrapper">
|
|
|
- <div class="container">
|
|
|
- <div>
|
|
|
- <p class="small-title"><router-link to="/custom">报关报检</router-link></p>
|
|
|
- <div>
|
|
|
- <img src="../../assets/sea/sea2.jpg" alt="" width="100%">
|
|
|
- </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>
|
|
|
+ </div>
|
|
|
+ <div style="width: 80%;height: 200px;display:flex;justify-content:space-around;margin: 0 auto">
|
|
|
+ <div style="width: 500px;height: 170px;">
|
|
|
+ <img src="../../assets/zaixian1.png" alt="" style="width: 100%;height: 170px;">
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <p class="small-title"><router-link to="/project">大型项目物流</router-link></p>
|
|
|
- <div>
|
|
|
- <img src="../../assets/logistics/logistics5.jpg" width="100%">
|
|
|
- </div>
|
|
|
+ <div style="width: 500px;height: 170px;">
|
|
|
+ <img src="../../assets/wuliu1.png" alt="" style="width: 100%;height: 170px;">
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="wrapper">
|
|
|
- <div class="container">
|
|
|
- <div>
|
|
|
- <p class="small-title"><router-link to="/coldChain">供应链管理</router-link></p>
|
|
|
- <div>
|
|
|
- <img src="../../assets/SCM/SCM004.jpg" alt="" width="100%">
|
|
|
- </div>
|
|
|
+ <div style="width: 80%;height: 200px;display:flex;justify-content:space-around;margin: 40px auto">
|
|
|
+<!-- <div style="width: 500px;height: 170px;cursor:pointer" @click="myOrder">-->
|
|
|
+<!-- <img src="../../assets/wode.png" alt="" style="width: 100%;height: 170px;">-->
|
|
|
+<!-- </div>-->
|
|
|
+ <div style="width: 500px;height: 170px;cursor:pointer">
|
|
|
+ <img src="../../assets/wode1.png" alt="" style="width: 100%;height: 170px;">
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <p class="small-title"><router-link to="/railway">中欧铁路物流</router-link></p>
|
|
|
- <div>
|
|
|
- <img src="../../assets/logistics/logistics4.jpg" width="100%">
|
|
|
- </div>
|
|
|
+ <div style="width: 500px;height: 170px;">
|
|
|
+ <img src="../../assets/kefu1.png" alt="" style="width: 100%;height: 170px;">
|
|
|
</div>
|
|
|
</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/xinwen2.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;background-color: #1e4fba;margin-bottom: -10px">
|
|
|
+ <img src="../../assets/xuanchuan2.png" alt="" style="width: 100%;">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'home',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- backgroundDiv: [
|
|
|
- {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'}
|
|
|
- ],
|
|
|
- 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'});
|
|
|
+ methods:{
|
|
|
+ myOrder(){
|
|
|
+ this.$router.push({path: '/myorder'});
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-* {
|
|
|
- font-family: "Microsoft YaHei", Arial, sans-serif, Helvetica;
|
|
|
-}
|
|
|
-a {
|
|
|
- color: #0051a2;
|
|
|
- text-decoration: none;
|
|
|
-}
|
|
|
.el-row {
|
|
|
margin-bottom: 20px;
|
|
|
-
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
-.el-card div {
|
|
|
- font-size: 14px;
|
|
|
- color: #8c939d;
|
|
|
- text-align: left;
|
|
|
- text-indent: 2em;
|
|
|
-}
|
|
|
.el-col {
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
-
|
|
|
.bg-purple-dark {
|
|
|
background: #99a9bf;
|
|
|
}
|
|
|
-
|
|
|
.bg-purple {
|
|
|
background: #d3dce6;
|
|
|
}
|
|
|
-
|
|
|
.bg-purple-light {
|
|
|
background: #e5e9f2;
|
|
|
}
|
|
|
-
|
|
|
.grid-content {
|
|
|
border-radius: 4px;
|
|
|
min-height: 36px;
|
|
|
}
|
|
|
-
|
|
|
.row-bg {
|
|
|
padding: 10px 0;
|
|
|
background-color: #f9fafc;
|
|
|
}
|
|
|
-
|
|
|
.el-carousel__item h3 {
|
|
|
color: #475669;
|
|
|
font-size: 18px;
|
|
|
@@ -254,109 +108,11 @@ a {
|
|
|
line-height: 300px;
|
|
|
margin: 0;
|
|
|
}
|
|
|
-
|
|
|
-//.el-carousel__item:nth-child(2n) {
|
|
|
-// background-color: #99a9bf;
|
|
|
-//}
|
|
|
-//
|
|
|
-//.el-carousel__item:nth-child(2n+1) {
|
|
|
-// background-color: #d3dce6;
|
|
|
-//}
|
|
|
-
|
|
|
-/deep/ .background {
|
|
|
- background-size: 100% !important
|
|
|
-}
|
|
|
-.container {
|
|
|
- width: 70%;
|
|
|
- margin: 0px auto;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-.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;
|
|
|
-}
|
|
|
-.SCM, .logistics {
|
|
|
- width: 100%;
|
|
|
- height: 500px;
|
|
|
- margin-top: 50px;
|
|
|
+.el-carousel__item:nth-child(2n) {
|
|
|
+ background-color: #99a9bf;
|
|
|
}
|
|
|
-.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_N10.jpg") no-repeat center;
|
|
|
- background-size: cover;
|
|
|
-}
|
|
|
-.banner-img2 {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: url("../../assets/banner/banner_ZD1.jpg") no-repeat 100%;
|
|
|
- background-size: cover;
|
|
|
-}
|
|
|
-.banner-img3 {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: url("../../assets/banner/banner_ZD3.jpg") no-repeat center center;
|
|
|
- background-size: cover;
|
|
|
-}
|
|
|
-.small-title {
|
|
|
- font-size: 25px;
|
|
|
- font-weight: 600;
|
|
|
- letter-spacing: 1px;
|
|
|
-}
|
|
|
-.bigTitle {
|
|
|
- font-family: "arial";
|
|
|
-}
|
|
|
-.wrapper {
|
|
|
- width: 100%;
|
|
|
- margin-top: 50px;
|
|
|
+
|
|
|
+.el-carousel__item:nth-child(2n+1) {
|
|
|
+ background-color: #d3dce6;
|
|
|
}
|
|
|
</style>
|
caojunjie
