<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/slider0.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(https://auod-bucket-wms.oss-ap-southeast-2.aliyuncs.com/Upload/Site/slider3.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>
|
|
<!-- Events Start -->
|
<section class="event-detail-area pt-120 pb-115">
|
<div class="container">
|
<el-row :gutter="20">
|
<el-col :span="14" :xs="24">
|
<div class="search-box">
|
<div class="title">企业动态</div>
|
</div>
|
<div class="event-list-wrapper mr-15 ml-10">
|
<div v-for="(item,index) in newList" :key="index" class="event-list margin-bottom-20">
|
<div class="event-date xs">
|
<h2>{{ item.createDate | getDay() }}
|
<span>{{ item.createDate | getMounth() }}</span>
|
</h2>
|
</div>
|
<div class="event-list-content xs">
|
<h2>
|
<router-link :to="'/newsInfo/'+item.content_Id" class="link">
|
{{ item.title }}
|
</router-link>
|
</h2>
|
<i class="zmdi el-icon-yrt-dingwei xs"></i>
|
<p>{{ item.guibance }}</p>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="10" :xs="24">
|
<div class="search-box">
|
<div class="title">上传身份证</div>
|
</div>
|
<img src="/static/user/card/card.png" style="width:100%;">
|
<div class="margin-20 align-center">
|
<el-button type="primary" @click="uploadCard">上传身份证</el-button>
|
</div>
|
<div class="search-box margin-top-50">
|
<div class="title">货物追踪查询</div>
|
</div>
|
<div class="search-region">
|
<div class="title">运单号：</div>
|
<el-input v-model="waybillcode" class="w-100pc margin-bottom-10" @keyup.native.enter.stop="onWaySearch"></el-input>
|
<el-button type="primary" @click="onWaySearch">查询</el-button>
|
</div>
|
|
<div class="service-region">
|
<i class="el-icon-yrt-kefu"></i>
|
<ul>
|
<li>客服热线</li>
|
<li>400-655-6050（中国）</li>
|
<li>02-8710-3969（澳洲）</li>
|
<li>02-8710-6861（澳洲）</li>
|
</ul>
|
</div>
|
|
</el-col>
|
</el-row>
|
</div>
|
</section>
|
<!-- Events 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";
|
import * as moment from "moment";
|
|
export default {
|
components: {
|
pageHeader,
|
pageFooter
|
},
|
filters: {
|
getMounth: function(myInput) {
|
const m = moment(myInput);
|
return m.format("MMM");
|
},
|
getDay: function(myInput) {
|
const m = moment(myInput);
|
return m.format("D");
|
}
|
},
|
data() {
|
return {
|
newList: [], // 新闻列表
|
waybillcode: null
|
};
|
},
|
created() {
|
this.getNewList();
|
},
|
activated() {},
|
methods: {
|
uploadCard() {
|
location.href = "/user.html#/upload-card-id";
|
},
|
onWaySearch() {
|
if (this.waybillcode !== null) {
|
location.href = "/user.html#/way-search/" + this.waybillcode;
|
}
|
},
|
getNewList() {
|
var url = "/api/tms/userSys/client/getNewsList";
|
var params = {};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.newList = res.data;
|
}
|
},
|
true
|
);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
@import "@/styles/user.scss";
|
</style>
|
|
<style lang="scss" scoped>
|
.container {
|
margin-right: auto;
|
margin-left: auto;
|
padding-left: 15px;
|
padding-right: 15px;
|
}
|
|
.el-header {
|
background-color: white;
|
padding: 10px;
|
.header-section {
|
.logo {
|
height: 50px;
|
vertical-align: -webkit-baseline-middle;
|
}
|
.nav {
|
display: inline-block;
|
margin-left: 50px;
|
li {
|
display: inline-block;
|
padding: 0px 15px;
|
}
|
}
|
.nav-right {
|
float: right;
|
padding-top: 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;
|
}
|
|
.event-detail-area {
|
margin-top: 50px;
|
margin-bottom: 50px;
|
.event-date {
|
background: #f1f1f1 none repeat scroll 0 0;
|
float: left;
|
margin-right: 6px;
|
padding: 17px 35px 25px;
|
text-align: center;
|
transition: all 0.3s ease 0s;
|
h2 {
|
font-size: 30px;
|
font-weight: 700;
|
color: #666666;
|
font-family: "open Sans", sans-serif;
|
margin-bottom: 0px;
|
}
|
h2 span {
|
font-size: 18px;
|
text-transform: uppercase;
|
display: block;
|
margin-top: 10px;
|
}
|
}
|
.event-list-content {
|
background: #f1f1f1 none repeat scroll 0 0;
|
overflow: hidden;
|
padding: 10px 20px 20px;
|
transition: all 0.3s ease 0s;
|
h2 {
|
margin-bottom: 7px;
|
a {
|
color: #3f3f3f;
|
font-size: 18px;
|
font-weight: 600;
|
font-family: "open Sans", sans-serif;
|
-webkit-transition: all 0.3s ease 0s;
|
-o-transition: all 0.3s ease 0s;
|
transition: all 0.3s ease 0s;
|
cursor: pointer;
|
}
|
}
|
i {
|
float: left;
|
margin-right: 10px;
|
margin-top: 8px;
|
position: relative;
|
top: 4px;
|
font-size: 18px;
|
color: #3f3f3f;
|
}
|
.zmdi {
|
display: inline-block;
|
font: normal normal normal 14px/1 "Material-Design-Iconic-Font";
|
font-size: inherit;
|
text-rendering: auto;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
}
|
p {
|
display: inline-block;
|
margin: 10px 0;
|
}
|
}
|
.event-list:hover .event-date,
|
.event-list:hover .event-list-content {
|
background: #fff;
|
box-shadow: 0px 0px 12px 0px rgba(6, 6, 6, 0.2);
|
}
|
}
|
|
.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;
|
}
|
.title {
|
width: 100px;
|
text-align: center;
|
}
|
}
|
.search-region {
|
.title {
|
padding: 10px 0;
|
}
|
}
|
.service-region {
|
margin-top: 50px;
|
i {
|
float: left;
|
color: #409eff;
|
font-size: 50px;
|
}
|
ul {
|
margin: 0;
|
padding: 0;
|
margin-left: 70px;
|
li {
|
padding: 5px 0;
|
}
|
}
|
}
|
}
|
|
.el-footer {
|
padding: 0;
|
}
|
/* 手机屏 */
|
@media screen and (max-width: 480px) {
|
.event-date.xs {
|
padding: 5px 5px 15px !important;
|
h2 {
|
font-size: 20px !important;
|
}
|
span {
|
font-size: 12px !important;
|
}
|
}
|
.event-list-content.xs {
|
h2 {
|
font-size: 14px;
|
line-height: 1.5;
|
}
|
.zmdi.xs {
|
display: none;
|
}
|
}
|
}
|
</style>
|
