<template>
|
<el-container>
|
<el-header height="80px">
|
<page-header></page-header>
|
</el-header>
|
<el-main>
|
<el-carousel :interval="8000" height="250px" class="slider-area">
|
<el-carousel-item style="background:url(https://auod-bucket-wms.oss-ap-southeast-2.aliyuncs.com/Upload/Site/slider0.jpg);background-position-y: -150px;">
|
<div class="container">
|
<div class="slide-content-wrapper">
|
<div class="slide-content">
|
<h2>上传身份证号 </h2>
|
<p>请在发货后12小时内上传收货人身份证正反两面清晰扫描件，以便及时办理相关通关手续。 </p>
|
</div>
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
|
<!-- Cowork Start -->
|
<section class="container cowork-area">
|
<el-row>
|
<el-col :span="6" :xs="24" class="card-left">
|
<div class="search-box">
|
<div class="title">货物追踪查询</div>
|
</div>
|
<div class="search-region">
|
<div class="title">运单号：</div>
|
<el-input v-model="waybillcode" class="w-100pc margin-bottom-10"></el-input>
|
<el-button type="primary" @click="onWaySearch()">查询</el-button>
|
</div>
|
|
</el-col>
|
<el-col :span="18" :xs="24" class="card-main">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>产品与业务</el-breadcrumb-item>
|
</el-breadcrumb>
|
<div class="split-line"></div>
|
<div class="remark">
|
<h2>专线运输</h2>
|
<img src="/static/user/card/business.png" alt="专线运输" class="biz-img">
|
<p>以上专线均为双清关门到门服务</p>
|
<h2>代理服务</h2>
|
<p>澳洲各口岸空运、海运、清关、仓储、派送等代理服务，欢迎来电咨询：0061 2 8710 6861</p>
|
</div>
|
</el-col>
|
</el-row>
|
</section>
|
<!-- Cowork 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
|
},
|
data() {
|
return {
|
// 身份证正面URL
|
cardPositive: null,
|
// 身份证反面URL
|
cardNegative: null,
|
// 识别数据
|
formData: {},
|
// 步骤
|
step: 1,
|
// step1隐藏
|
hiddenStep1: false,
|
// step2隐藏
|
hiddenStep2: true,
|
// step3隐藏
|
hiddenStep3: true,
|
waybillcode: null
|
};
|
},
|
methods: {
|
handleCardSuccess() {},
|
beforeCardUpload() {},
|
// 查询运单
|
onWaySearch() {
|
if (this.waybillcode !== null) {
|
location.href = "/user.html#/way-search/" + this.waybillcode;
|
} else {
|
this.$message.error("运单号不能为空");
|
}
|
}
|
}
|
};
|
</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: 50px;
|
}
|
.slide-content {
|
display: table-cell;
|
text-align: center;
|
vertical-align: middle;
|
}
|
.slide-content h2 {
|
color: #fff;
|
font-family: "Playfair Display", serif;
|
font-size: 40px;
|
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;
|
}
|
|
.card-left {
|
padding: 20px 20px 50px;
|
border-right: 1px solid #e4e7ed;
|
.search-box {
|
border-bottom: 2px solid #e4e7ed;
|
padding-top: 2px;
|
padding-bottom: 13px;
|
margin-bottom: 10px;
|
position: relative;
|
&:after {
|
content: " ";
|
position: absolute;
|
bottom: -2px;
|
width: 100px;
|
border-bottom: 2px solid #409eff;
|
}
|
}
|
.search-region {
|
.title {
|
padding: 10px 0;
|
}
|
}
|
}
|
.card-main {
|
padding: 20px 20px 50px;
|
h2 {
|
font-size: 25px;
|
}
|
.biz-img {
|
width: 100%;
|
}
|
}
|
}
|
.el-footer {
|
padding: 0;
|
}
|
/* 手机屏 */
|
@media screen and (max-width: 480px) {
|
.container {
|
padding-left: 0px;
|
padding-right: 0px;
|
}
|
.el-main {
|
.card-left {
|
padding: 20px 20px 10px;
|
}
|
.card-main {
|
padding: 20px 20px 50px;
|
border-left: 0px solid #e4e7ed;
|
}
|
}
|
}
|
</style>
|
