<template>
|
<el-container>
|
<el-header height="80px">
|
<page-header></page-header>
|
</el-header>
|
<el-main>
|
<el-carousel :interval="8000" height="450px" class="slider-area">
|
<el-carousel-item style="background:url(https://auod-bucket-wms.oss-ap-southeast-2.aliyuncs.com/Upload/Site/slider1.jpg);background-position-y: -150px;">
|
<div class="container">
|
<div class="slide-content-wrapper">
|
<div class="slide-content">
|
<h2>Distance is Nothing </h2>
|
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p> -->
|
<!-- <el-button type="primary" class="banner-btn"><span>我要下单</span></el-button> -->
|
</div>
|
</div>
|
</div>
|
</el-carousel-item>
|
<el-carousel-item style="background:url(/static/user/slider/slider2.png);background-position-y: -150px;">
|
<div class="container">
|
<div class="slide-content-wrapper">
|
<div class="slide-content">
|
<h2>Distance is Nothing</h2>
|
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p> -->
|
<!-- <el-button type="primary" class="banner-btn"><span>我要下单</span></el-button> -->
|
</div>
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
|
<!-- Cowork Start -->
|
<section class="container cowork-area">
|
<el-row :gutter="20">
|
<el-col :span="16" :xs="24">
|
<h2>中澳跨境物流解决方案专家</h2>
|
<p class="line-height-2"><br/>2014年是中国跨境电商业务蓬勃兴起的元年，也是澳德物流的起点。注册成立于悉尼之初我们就致力于中澳跨境物流解决方案的设计与执行。通过整合产业上游的境外电商企业需求，国际航空货运及中国入境口岸的资源，与中国海关总署, 中国邮政, 入境快件口岸等相关政府监管部门展开深入的战略合作，加以便捷的制单发货，正规清关，全程状态追踪等优质服务，澳德物流一直在为满足中澳跨境电商市场及民间的不断增长的需求提供便捷、优质和高效的服务而努力。 <br/>澳德物流在澳大利亚拥有健全的物流企业资质，不仅拥有一级IATA航空货运代理，同时也是2019年第一批获批的澳大利亚RACA安检资质的企业之一。感谢选择澳德物流，让我们的资质与服务为您的业务保驾护航！<br/><br/><br/>
|
</p>
|
</el-col>
|
<!-- <el-col :span="12">
|
<div class="cowork-img">
|
<el-row>
|
<el-col :span="12">
|
<a href="#"><img src="/static/user/co-worker/coworker1.jpg" alt="cowork"></a>
|
</el-col>
|
<el-col :span="12">
|
<a href="#"><img src="/static/user/co-worker/coworker2.jpg" alt="cowork"></a>
|
</el-col>
|
<el-col :span="24">
|
<a href="#"><img src="/static/user/co-worker/coworker3.jpg" alt="cowork"></a>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col> -->
|
</el-row>
|
</section>
|
<!-- Cowork End -->
|
<!-- Fun Start -->
|
<!-- <div class="fun-area align-center">
|
<div class="container">
|
<el-row class="row">
|
<el-col :span="6">
|
<div class="single-fun">
|
<h3 class="counter">450</h3>
|
<p>joined</p>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="single-fun">
|
<h3 class="counter">240</h3>
|
<p>startup</p>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="single-fun">
|
<h3 class="counter">330</h3>
|
<p>mentors</p>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="single-fun">
|
<h3 class="counter">150</h3>
|
<p>awards</p>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div> -->
|
<!-- Fun End -->
|
<!-- Mentor Area Start -->
|
<!-- <div class="mentor-area">
|
<div class="container align-center">
|
<div class="w-550 inline-block">
|
<h2>our mentors</h2>
|
<p class="line-height-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiust tempor incidi ut labore et dolore magna aliqua. Ut enim ad mini veniam quis </p>
|
</div>
|
<el-row class="row">
|
<el-col :span="6">
|
<div class="single-mentor">
|
<div class="mentor-img">
|
<a href="#"><img src="/static/user/team/member1.jpg" alt="member"></a>
|
<div class="mentor-hover">
|
<h5>Jackline Milorina</h5>
|
<h6>DevItems</h6>
|
<ul>
|
<li><a href="#"><i class="zmdi zmdi-facebook"></i></a></li>
|
<li><a href="#"><i class="zmdi zmdi-pinterest"></i></a></li>
|
<li><a href="#"><i class="zmdi zmdi-vimeo"></i></a></li>
|
<li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="single-mentor">
|
<div class="mentor-img">
|
<a href="#"><img src="/static/user/team/member2.jpg" alt="member"></a>
|
<div class="mentor-hover">
|
<h5>Jackline Milorina</h5>
|
<h6>DevItems</h6>
|
<ul>
|
<li><a href="#"><i class="zmdi zmdi-facebook"></i></a></li>
|
<li><a href="#"><i class="zmdi zmdi-pinterest"></i></a></li>
|
<li><a href="#"><i class="zmdi zmdi-vimeo"></i></a></li>
|
<li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="single-mentor">
|
<div class="mentor-img">
|
<a href="#"><img src="/static/user/team/member3.jpg" alt="member"></a>
|
<div class="mentor-hover">
|
<h5>Jackline Milorina</h5>
|
<h6>DevItems</h6>
|
<ul>
|
<li><a href="#"><i class="zmdi zmdi-facebook"></i></a></li>
|
<li><a href="#"><i class="zmdi zmdi-pinterest"></i></a></li>
|
<li><a href="#"><i class="zmdi zmdi-vimeo"></i></a></li>
|
<li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="single-mentor">
|
<div class="mentor-img">
|
<a href="#"><img src="/static/user/team/member4.jpg" alt="member"></a>
|
<div class="mentor-hover">
|
<h5>Jackline Milorina</h5>
|
<h6>DevItems</h6>
|
<ul>
|
<li><a href="#"><i class="zmdi zmdi-facebook"></i></a></li>
|
<li><a href="#"><i class="zmdi zmdi-pinterest"></i></a></li>
|
<li><a href="#"><i class="zmdi zmdi-vimeo"></i></a></li>
|
<li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div> -->
|
<!-- Mentor Area End -->
|
<!-- Partner Area Start -->
|
<!-- <div class="partner-area align-center">
|
<div class="container">
|
<div class="row">
|
<div class="col-xs-12">
|
<div class="section-title">
|
<h2>our partner</h2>
|
</div>
|
</div>
|
</div>
|
<div class="partner-owl owl-carousel">
|
<div class="single-partner">
|
<a href="#"><span><img src="/static/user/partner/partner1.png" alt="partner"></span></a>
|
</div>
|
<div class="single-partner">
|
<a href="#"><span><img src="/static/user/partner/partner2.png" alt="partner"></span></a>
|
</div>
|
<div class="single-partner">
|
<a href="#"><span><img src="/static/user/partner/partner3.png" alt="partner"></span></a>
|
</div>
|
<div class="single-partner">
|
<a href="#"><span><img src="/static/user/partner/partner2.png" alt="partner"></span></a>
|
</div>
|
<div class="single-partner">
|
<a href="#"><span><img src="/static/user/partner/partner4.png" alt="partner"></span></a>
|
</div>
|
<div class="single-partner">
|
<a href="#"><span><img src="/static/user/partner/partner5.png" alt="partner"></span></a>
|
</div>
|
</div>
|
</div>
|
</div> -->
|
<!-- Partner Area End -->
|
</el-main>
|
<el-footer height="auto">
|
<!-- Footer Start -->
|
<page-footer></page-footer>
|
<!-- Footer End -->
|
</el-footer>
|
</el-container>
|
</template>
|
|
<script>
|
import pageHeader from "./components/header.vue";
|
import pageFooter from "./components/footer.vue";
|
|
export default {
|
components: {
|
pageHeader,
|
pageFooter
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
@import "@/styles/user.scss";
|
</style>
|
|
<style lang="scss" scoped>
|
.el-header {
|
background-color: white;
|
padding: 10px;
|
}
|
.el-main {
|
background-color: white;
|
padding: 0px;
|
.slide-content-wrapper {
|
display: inline-table;
|
width: 100%;
|
margin-top: 80px;
|
}
|
.slide-content {
|
display: table-cell;
|
text-align: center;
|
vertical-align: middle;
|
}
|
.slide-content h2 {
|
color: #fff;
|
font-family: "Playfair Display", serif;
|
font-size: 75px;
|
font-weight: 400;
|
margin-bottom: 20px;
|
text-transform: capitalize;
|
-webkit-animation-delay: 0.7s;
|
animation-delay: 0.7s;
|
-webkit-animation-duration: 1s;
|
animation-duration: 1s;
|
-webkit-animation-fill-mode: both;
|
animation-fill-mode: both;
|
-webkit-animation-name: fadeOutDown;
|
animation-name: fadeOutDown;
|
}
|
.slide-content p {
|
color: #fff;
|
font-family: "Lato", sans-serif;
|
font-size: 20px;
|
font-weight: 400;
|
margin-bottom: 30px;
|
-webkit-animation-delay: 0.8s;
|
animation-delay: 0.8s;
|
-webkit-animation-duration: 1s;
|
animation-duration: 1s;
|
-webkit-animation-fill-mode: both;
|
animation-fill-mode: both;
|
-webkit-animation-name: fadeOutDown;
|
animation-name: fadeOutDown;
|
}
|
.slide-content .banner-btn {
|
-webkit-animation-delay: 1.2s;
|
animation-delay: 1.2s;
|
-webkit-animation-duration: 1s;
|
animation-duration: 1s;
|
-webkit-animation-fill-mode: both;
|
animation-fill-mode: both;
|
-webkit-animation-name: fadeOutDown;
|
animation-name: fadeOutDown;
|
}
|
.slider-area .el-carousel__item.is-active .slide-content h2,
|
.slider-area .el-carousel__item.is-active .slide-content p,
|
.slider-area .el-carousel__item.is-active .banner-btn {
|
-webkit-animation-name: fadeInUp;
|
animation-name: fadeInUp;
|
}
|
.slider-area .el-carousel__item.is-active .banner-btn {
|
-webkit-animation-name: fadeInUp;
|
animation-name: fadeInUp;
|
}
|
|
.cowork-area {
|
margin-top: 50px;
|
}
|
.fun-area {
|
margin-top: 50px;
|
background: rgba(0, 0, 0, 0) url(/static/user/banner/fun.jpg) no-repeat
|
fixed center center / cover;
|
padding: 112px 0 116px;
|
.single-fun h3 {
|
font-size: 36px;
|
color: #535353;
|
font-weight: 700;
|
font-family: "open Sans", sans-serif;
|
margin-bottom: 5px;
|
}
|
.single-fun p {
|
font-size: 24px;
|
color: #535353;
|
font-weight: 600;
|
font-family: "open Sans", sans-serif;
|
text-transform: capitalize;
|
margin-bottom: 0;
|
}
|
}
|
.mentor-area {
|
margin-top: 50px;
|
background: none;
|
.mentor-img,
|
.mentor-about-img {
|
box-shadow: 6px 10px 21.6px 2.4px rgba(4, 5, 5, 0.09);
|
height: 100%;
|
position: relative;
|
}
|
.mentor-img > img,
|
.mentor-img > a {
|
line-height: 0px;
|
display: block;
|
}
|
.mentor-hover {
|
content: "";
|
left: 50%;
|
opacity: 0;
|
position: absolute;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
-webkit-transition: all 0.3s ease 0s;
|
-o-transition: all 0.3s ease 0s;
|
transition: all 0.3s ease 0s;
|
width: 100%;
|
z-index: 1;
|
color: white;
|
}
|
.mentor-img:after {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
width: 100%;
|
height: 100%;
|
content: "";
|
background: rgba(255, 255, 255, 0.75);
|
opacity: 0;
|
-webkit-transition: all 0.3s ease 0s;
|
-o-transition: all 0.3s ease 0s;
|
transition: all 0.3s ease 0s;
|
}
|
.mentor-img:hover {
|
&:after {
|
opacity: 1;
|
}
|
.mentor-hover {
|
opacity: 1;
|
}
|
}
|
}
|
.partner-area {
|
margin-top: 50px;
|
margin-bottom: 50px;
|
overflow: hidden;
|
.single-partner {
|
border-top: 1px solid #dcd9d9;
|
border-bottom: 1px solid #dcd9d9;
|
border-left: 1px solid #dcd9d9;
|
float: left;
|
padding: 0 15px;
|
&:last-child {
|
border-right: 1px solid #dcd9d9;
|
}
|
}
|
a {
|
height: 125px;
|
display: inline-table;
|
}
|
span {
|
display: table-cell;
|
vertical-align: middle;
|
}
|
.owl-carousel.owl-drag .owl-item {
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
}
|
}
|
.el-footer {
|
padding: 0;
|
}
|
</style>
|
