平台专区部分代码

master
lml 7 months ago
parent c3f1d01ef0
commit bed1e2a5a1

@ -706,7 +706,6 @@ iframe {
======================================*/
.bg-web-desc{
background: url("../images/img-1.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;

@ -45,6 +45,8 @@ i {
font-style: normal;
}
a,
a:hover,
a:focus,
@ -714,7 +716,6 @@ iframe {
======================================*/
.bg-web-desc{
background: url("../images/img-1.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
@ -1359,13 +1360,13 @@ ul.pattern .color8 {
}
/* tabs样式 */
.el-tabs__nav-wrap::after {
.commonUI .el-tabs__nav-wrap::after {
display: none;
}
.el-tabs__active-bar {
.commonUI .el-tabs__active-bar {
display: none;
}
.el-tabs__item {
.commonUI .el-tabs__item {
width: 107px;
height: 40px;
padding: 8px 24px !important;
@ -1382,9 +1383,33 @@ ul.pattern .color8 {
text-align: center;
line-height: 40px;
}
.el-tabs__item.is-active {
.commonUI .el-tabs__item.is-active {
/* display: flex; */
background: #00AFAF;
color: #FFF !important;
}
}
.special .el-tabs__item {
width: 210px;
text-align: center;
color: #4D5563;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 46px; /* 209.091% */
margin-bottom: 10px;
padding-left: 25px;
}
.special .el-tabs__item.is-active {
color: #151E2C;
font-size: 28px;
}
.special .el-tabs__active-bar {
background: #000;
}
.special .el-tabs__header {
padding: 0 100px 40px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 395 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 507 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 273 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 640 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 295 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 269 B

@ -21,13 +21,9 @@
color: #24303E;
border-right: none;
}
.business .button-group {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* 按钮海运下单切换 */
.business .button-group {
/* .business .button-group {
display: flex;
border-radius: 20px;
overflow: hidden;
@ -35,8 +31,21 @@
background-color: #FFE7CE;
margin-left: 25px;
/* width: 312px; */
/* 按钮海运下单切换 */
.button-group {
display: flex;
margin-left: 25px;
/* width: 312px; */
}
.button-group-item {
border-radius: 20px;
overflow: hidden;
z-index:999;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.business .el-button {
flex: 1;
padding: 26px 0;
@ -96,9 +105,8 @@
z-index: 666;
}
.business .service-text i::after {
.business .service-text .serviceNews::after {
content: "";
display: inline-block;
position: absolute; /* Positions the pseudo-element in relation to the .service-text */
bottom: 20px;
right: 43.5%;
@ -276,7 +284,7 @@
padding: 32px 37px;
margin-bottom: 32px;
}
.ServiceLineBox .el-tabs__item {
::v-deep .ServiceLineBox.commonUI .el-tabs__item {
width: 100px;
height: 35px;
border-radius: 4px;

@ -7,19 +7,20 @@
<div class="container" >
<div >
<div class="button-group" style="position: absolute;top:1000px;">
<el-button
v-for="(item, index) in buttons"
:key="index"
:class="{ 'active': activeIndex === index }"
class="flx-center"
@click="setActive(item,index)"
>
<div class="btn-text" style="">
{{ item.label }}
<div class=" button-group">
<div class="button-group-item" style="position: absolute;top:1000px;">
<el-button
v-for="(item, index) in buttons"
:key="index"
:class="{ 'active': activeIndex === index }"
@click="setActive(item,index)"
>
<div class="btn-text" style="">
{{ item.label }}
</div>
</el-button>
</div>
</el-button>
</div>
</div>
</div>
<div class="service">
<div class="service-text" style="padding-top: 70px;margin:130px 0 0 0px;">
@ -39,11 +40,11 @@
<div >自营仓</div><i class="serviceNews"></i></div>
</div>
<div class="container " style="margin-top: 87px;display: flex;position: relative;">
<div class="flx-only-justify-between " >
<div class="flx-only-justify-between " >
<div class="proprietaryImg">
<!-- <img src="@/assets/images/home/news.jpg" alt="" style="width: 100%;"> -->
</div>
<div class="proprietary-buttons">
<div class="proprietary-buttons ">
<el-row>
<el-col
:span="12"
@ -73,7 +74,8 @@
<div class="container">
<div class="service " style="padding: 100px 0;">
<div class="service-text">
<div >服务功能</div><i class="serviceNews"></i></div>
<div >服务功能</div><i class="serviceNews"></i>
</div>
<div class="flx-justify-between" style="margin-top:130px;">
<div class="serviceBoxTitle">
<span><img src="@/assets/images/business/overSea/service/LOGO1.png"></span>
@ -123,8 +125,12 @@
</div>
<!-- 运输流程 -->
<div class="service-text-bg" style="padding-bottom: 180px;">
<div class="service-text" style="padding-top: 100px;margin:100px 0 0 0px;">
<div >运输流程</div><i class="serviceNews"></i></div>
<div class="container " >
<div class="service-text" style="padding-top: 100px;margin:100px 0 0 0px;">
<div >运输流程</div><i class="serviceNews"></i>
</div>
</div>
<div class="container " style="margin-top: 70px;position: relative;">
<el-row>

@ -5,19 +5,20 @@
<div class="business">
<!-- 美通海外仓 -->
<div class="container" >
<div class="button-group" style="position: absolute;top:1000px;">
<el-button
v-for="(item, index) in buttons"
:key="index"
:class="{ 'active': activeIndex === index }"
class="flx-center"
@click="setActive(item,index)"
>
<div class="btn-text" style="">
{{ item.label }}
<div class=" button-group">
<div class="button-group-item" style="position: absolute;top:1000px;">
<el-button
v-for="(item, index) in buttons"
:key="index"
:class="{ 'active': activeIndex === index }"
@click="setActive(item,index)"
>
<div class="btn-text" style="">
{{ item.label }}
</div>
</el-button>
</div>
</el-button>
</div>
</div>
<div class="service">
<div class="service-text" style="padding-top: 70px;margin:130px 0 0 0px;">
<div >美通空运</div><i class="serviceNews"></i></div>
@ -66,7 +67,7 @@
<div >服务线路</div><i class="serviceNews"></i></div>
<el-row style="margin-top: 70px;">
<el-col :span="12">
<div class="ServiceLineBox">
<div class="ServiceLineBox commonUI">
<div class="ServiceLineTitle">美国快线</div>
<el-tabs v-model="activeName" >
<el-tab-pane label="产品渠道" name="first">
@ -91,7 +92,7 @@
</div>
</el-col>
<el-col :span="12">
<div class="ServiceLineBox">
<div class="ServiceLineBox commonUI">
<div class="ServiceLineTitle">美国快线</div>
<el-tabs v-model="activeName" >
<el-tab-pane label="产品渠道" name="first">
@ -106,7 +107,7 @@
</div>
</el-col>
<el-col :span="12">
<div class="ServiceLineBox">
<div class="ServiceLineBox commonUI">
<div class="ServiceLineTitle">美国快线</div>
<el-tabs v-model="activeName" >
<el-tab-pane label="产品渠道" name="first">

@ -5,19 +5,20 @@
<div class="business">
<!-- 美通海外仓 -->
<div class="container" >
<div class="button-group" style="position: absolute;top:1000px;">
<el-button
v-for="(item, index) in buttons"
:key="index"
:class="{ 'active': activeIndex === index }"
class="flx-center"
@click="setActive(item,index)"
>
<div class="btn-text" style="">
{{ item.label }}
<div class=" button-group">
<div class="button-group-item" style="position: absolute;top:1000px;">
<el-button
v-for="(item, index) in buttons"
:key="index"
:class="{ 'active': activeIndex === index }"
@click="setActive(item,index)"
>
<div class="btn-text" style="">
{{ item.label }}
</div>
</el-button>
</div>
</el-button>
</div>
</div>
<div class="service">
<div class="service-text" style="padding-top: 70px;margin:130px 0 0 0px;">
<div >美通卡航</div><i class="serviceNews"></i></div>
@ -66,7 +67,7 @@
<div >服务线路</div><i class="serviceNews"></i></div>
<el-row style="margin-top: 70px;">
<el-col :span="12">
<div class="ServiceLineBox">
<div class="ServiceLineBox commonUI">
<div class="ServiceLineTitle">美国快线</div>
<el-tabs v-model="activeName" >
<el-tab-pane label="产品渠道" name="first">
@ -91,7 +92,7 @@
</div>
</el-col>
<el-col :span="12">
<div class="ServiceLineBox">
<div class="ServiceLineBox commonUI">
<div class="ServiceLineTitle">美国快线</div>
<el-tabs v-model="activeName" >
<el-tab-pane label="产品渠道" name="first">
@ -106,7 +107,7 @@
</div>
</el-col>
<el-col :span="12">
<div class="ServiceLineBox">
<div class="ServiceLineBox commonUI">
<div class="ServiceLineTitle">美国快线</div>
<el-tabs v-model="activeName" >
<el-tab-pane label="产品渠道" name="first">

@ -5,18 +5,19 @@
<div class="business">
<!-- 美通海外仓 -->
<div class="container" >
<div class="button-group" style="position: absolute;top:1000px;">
<el-button
<div class=" button-group">
<div class="button-group-item" style="position: absolute;top:1000px;">
<el-button
v-for="(item, index) in buttons"
:key="index"
:class="{ 'active': activeIndex === index }"
class="flx-center"
@click="setActive(item,index)"
>
<div class="btn-text" style="">
{{ item.label }}
</div>
</el-button>
</div>
</div>
<div class="service">
<div class="service-text" style="padding-top: 70px;margin:130px 0 0 0px;">
@ -69,7 +70,7 @@
<div >服务线路</div><i class="serviceNews"></i></div>
<el-row style="margin-top: 70px;">
<el-col :span="12">
<div class="ServiceLineBox">
<div class="ServiceLineBox commonUI">
<div class="ServiceLineTitle">美国快线</div>
<el-tabs v-model="activeName" >
<el-tab-pane label="产品渠道" name="first">
@ -94,7 +95,7 @@
</div>
</el-col>
<el-col :span="12">
<div class="ServiceLineBox">
<div class="ServiceLineBox commonUI">
<div class="ServiceLineTitle">美国快线</div>
<el-tabs v-model="activeName" >
<el-tab-pane label="产品渠道" name="first">
@ -109,7 +110,7 @@
</div>
</el-col>
<el-col :span="12">
<div class="ServiceLineBox">
<div class="ServiceLineBox commonUI">
<div class="ServiceLineTitle">美国快线</div>
<el-tabs v-model="activeName" >
<el-tab-pane label="产品渠道" name="first">

@ -147,11 +147,10 @@ export default {
<!--START SERVICES-->
<!--START WEBSITE-DESCRIPTION-->
<section
<!-- <section
class="section bg-web-desc"
:style="{'background-image': 'url(' + require('@/assets/images/img-1.jpg') + ')', 'background-size': 'cover','background-position': 'center'}"
>
<!-- <div class="bg-overlay"></div> -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
@ -166,7 +165,7 @@ export default {
</div>
</div>
</div>
</section>
</section> -->
<!--END WEBSITE-DESCRIPTION-->
</div>
</template>

@ -20,7 +20,7 @@ export default {
</div>
</div>
<div class="row margin-t-30">
<!-- <div class="row margin-t-30">
<div class="col-lg-4">
<div class="blog-box margin-t-30">
<img src="@/assets/images/blog/img-1.jpg" class="img-fluid rounded" alt />
@ -83,7 +83,7 @@ export default {
</div>
</div>
</div>
</div>
</div> -->
</div>
</template>

@ -200,7 +200,7 @@
<div class="service-text" style="padding-top: 140px;margin-bottom: 40px;">
<div >Question</div><i class="serviceNews"></i>
</div>
<div >
<div class="commonUI">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="发货前" name="first">
<BeforeDelivery></BeforeDelivery>

@ -21,24 +21,22 @@
color: #24303E;
border-right: none;
}
.platform .button-group {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* 按钮海运下单切换 */
.platform .button-group {
.platform .button-group {
display: flex;
border-radius: 20px;
overflow: hidden;
z-index:999;
background-color: #FFE7CE;
margin-left: 25px;
/* width: 312px; */
}
.button-group-item {
border-radius: 20px;
overflow: hidden;
z-index:999;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
.platform .el-button {
flex: 1;
}
.platform .el-button {
padding: 26px 0;
margin-left: 0px !important;
background: #fff;
@ -46,6 +44,7 @@
border: none; /* 移除单独的按钮边框 */
border-radius: 0px;
transition: all 0.3s ease;
max-width: 400px !important;
/* 为按钮添加右边框 */
}
.platform .btn-text {
@ -326,3 +325,178 @@
font-weight: 600;
line-height: 28px; /* 77.778% */
}
/* 亚马逊仓库地址 */
.platformSearch {
/* min-width: 980px; */
min-height: 92px;
color: rgba(21, 30, 44, 0.50);
font-family: "PingFang SC";
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: 46px; /* 209.091% */
margin-left: 25px;
}
.platTableTitle {
color: #151E2C;
font-family: Montserrat;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 133.333% */
text-align: center;
margin: 106px 0 40px 0;
}
/* 表格头部样式 */
::v-deep .platTable .el-table .el-table__header-wrapper {
border-radius: 4px;
}
::v-deep .platTable .el-table .el-table__cell {
height: 82px;
border-bottom: 1px solid #fff;
line-height: 32px; /* 160% */
font-style: normal;
padding-left: 34px;
}
::v-deep .platTable .el-table thead .el-table__cell {
background: #FAFAFA;
color: #151E2C;
font-family: Montserrat !important;
font-size: 20px;
font-weight: 700;
}
/* 表格边框样式 */
::v-deep .platTable .el-table tbody .el-table__cell {
color: #4D5563;
font-family: Montserrat;
font-size: 20px;
font-weight: 500;
}
.el-table::before {
display: none;
}
/* 仓库地址分布 */
.tab-content {
margin: 172px 0 0 25px;
}
.tab-content .el-button,.tab-content .el-button:hover {
width: 210px;
height: 83px;
flex-shrink: 0;
border-radius: 4px;
background: #FAFAFA;
padding: 0 ;
margin-bottom: 35px;
color: #24303E;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: 30px; /* 136.364% */
}
.tab-content .activeWarehouse,.tab-content .activeWarehouse:hover {
background-color: #00afaf;
color: #fff;
box-shadow:0 10px 33px rgba(0, 0, 0, .1) ;
}
.echartBox {
width: 100%;
height: 660px;
border: 1px dashed #B4B4B4;
padding: 20px;
}
.scrolling-list {
max-width: 286px;
background-color:rgba(246, 246, 246, 0.50);
border-radius: 12px;
overflow-y: auto;
height: 660px; /* 或者具体的像素高度 */
}
.scrolling-list-header {
padding: 32px;
height: 38px;
background-color: #f6f6f6;
color: #24303E;
font-size: 26px;
font-style: normal;
font-weight: 500;
line-height: 160%; /* 41.6px */
}
.scrolling-list-content {
padding: 32px;
}
.group-title {
color: #24303E;
font-family: "DIN Alternate";
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 160%; /* 38.4px */
margin-bottom: 26px;
}
.group-list {
color: #4D5563;
font-family: "DIN Alternate";
font-size: 18px;
font-style: normal;
font-weight: 700;
margin-bottom: 15px;
line-height: 160%; /* 28.8px */
}
/* AMZ注册 */
.AMZBox {
margin-top: 147px;
width: 309px;
height: 100px;
flex-shrink: 0;
border-radius: 12px;
background: #092238;
padding: 35px;
}
.AMZtitle {
color: #FFF;
font-size: 26px;
font-style: normal;
font-weight: 600;
line-height: 46px; /* 176.923% */
}
.AMZcontent {
color: #FFF;
font-family: Montserrat;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 46px; /* 127.778% */
}
/* 关于亚马逊 */
.AMZ-About {
padding: 90px 40px 77px;
}
.AMZ-AboutTitle {
color: #151E2C;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 46px; /* 115% */
margin-bottom: 90px;
}
.AMZ-AboutContent {
color: rgba(21, 30, 44, 0.50);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 42px; /* 210% */
}

@ -1,25 +1,59 @@
<template>
<div class="footerBottom">
<div class="platformBackground"></div>
<div class="platformBackground" ></div>
<div class="platform">
<div class="container" >
<div >
<div class="button-group" style="position: absolute;top:1000px;">
<el-button
<div class=" button-group">
<div class="button-group-item" style="position: absolute;top:1000px;">
<el-button
v-for="(item, index) in buttons"
:key="index"
:class="{ 'active': activeIndex === index }"
class="flx-center"
@click="setActive(item,index)"
>
<div class="btn-text" style="">
{{ item.label }}
</div>
</el-button>
</div>
</div>
</div>
<div style="margin-top: 148px;">
<div class="platformSearch">
<div>
查询方法点开需要查找国家的地址清单按Ctrl+F输入已知信息即可快速找到
</div>
<div>
示例点击美国亚马逊FBA仓库地址清单 按Ctrl+F 在查找框输入PHX3即可找到该地址
</div>
</div>
<div>
<div class="platTableTitle">美国亚马逊仓库地址清单</div>
<div class="platTable flx-center">
<el-table :cell-style="{background:'#fff'}" :data="tableData" style="width: 100%">
<el-table-column prop="fbacode" label="FBA Code" :show-overflow-tooltip="true" ></el-table-column>
<el-table-column prop="address" label="地址" :show-overflow-tooltip="true" ></el-table-column>
<el-table-column prop="city" label="City" :show-overflow-tooltip="true" ></el-table-column>
<el-table-column prop="state" label="State" :show-overflow-tooltip="true" ></el-table-column>
<el-table-column prop="zip" label="Zip" :show-overflow-tooltip="true" ></el-table-column>
</el-table>
</div>
</div>
<div>
<div class="platTableTitle">亚马逊仓库地址清单</div>
<div class="platTable flx-center">
<el-table :cell-style="{background:'#fff'}" :data="tableData" style="width: 100%">
<el-table-column prop="fbacode" label="FBA Code" :show-overflow-tooltip="true" ></el-table-column>
<el-table-column prop="address" label="地址" :show-overflow-tooltip="true" ></el-table-column>
<el-table-column prop="city" label="City" :show-overflow-tooltip="true" ></el-table-column>
<el-table-column prop="state" label="State" :show-overflow-tooltip="true" ></el-table-column>
<el-table-column prop="zip" label="Zip" :show-overflow-tooltip="true" ></el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</div>
@ -43,7 +77,31 @@
{ label: '亚马逊仓库地址',transportMode:'OCEAN' },
{ label: '仓库地址分布图',transportMode:'AIR' },
{ label: 'AMAZON注册',transportMode:'RAIL' }
]
],
tableData: [
{
fbacode: 'PHX3',
address: '6835 W. Buckeye Rd',
city: 'Phoenix',
state: 'AZ',
zip: '85043'
},
{
fbacode: 'PHX3',
address: '6835 W. Buckeye Rd',
city: 'Phoenix',
state: 'AZ',
zip: '85043'
},
{
fbacode: 'PHX3',
address: '6835 W. Buckeye Rd',
city: 'Phoenix',
state: 'AZ',
zip: '85043'
},
// ...
]
}
},
methods: {

@ -3,29 +3,95 @@
<div class="footerBottom">
<div class="platformBackground"></div>
<div class="platform">
<!-- 美通海外仓 -->
<!-- AMZ注册 -->
<div class="container" >
<div class="button-group" style="position: absolute;top:1000px;">
<el-button
<div class=" button-group">
<div class="button-group-item" style="position: absolute;top:1000px;">
<el-button
v-for="(item, index) in buttons"
:key="index"
:class="{ 'active': activeIndex === index }"
class="flx-center"
@click="setActive(item,index)"
>
<div class="btn-text" style="">
{{ item.label }}
</div>
</el-button>
</div>
</div>
<el-row style="padding:0 10px;">
<el-col :span="8" class="flx-center">
<div class="AMZBox flx-justify-between">
<div class=" flx-wrap ">
<div class="AMZtitle"> 亚马逊</div>
<div class="AMZcontent"> TSPN</div>
</div>
<div>
<img src="@/assets/icons/right.png" alt="">
</div>
</div>
</el-col>
<el-col :span="8" class="flx-center">
<div class="AMZBox flx-justify-between">
<div class=" flx-wrap ">
<div class="AMZtitle"> 亚马逊</div>
<div class="AMZcontent"> TSPN</div>
</div>
<div>
<img src="@/assets/icons/right.png" alt="">
</div>
</div>
</el-col>
<el-col :span="8" class="flx-center">
<div class="AMZBox flx-justify-between">
<div class=" flx-wrap ">
<div class="AMZtitle"> 亚马逊</div>
<div class="AMZcontent"> TSPN</div>
</div>
<div>
<img src="@/assets/icons/right.png" alt="">
</div>
</div>
</el-col>
</el-row>
<div>
<div class="AMZ-About">
<div class="AMZ-AboutTitle"> 关于亚马逊</div>
<div class="AMZ-AboutContent">
亚马逊成立于1995年7月总部在美国西雅图2015亚马逊全球开店业务进入中国旨在借助亚马逊全球资源帮助中国卖家抓住跨境电商新机遇发展出口业务拓展全球市场打造国际品牌目前亚马逊美国加拿大墨西哥英国法国德国意大利西班牙荷兰瑞典比利时日本新加坡澳大利亚印度阿联酋沙特波兰和巴西等19大海外站点已面向中国卖家开放吸引数十万中国卖家入驻
</div>
</div>
</div>
</div>
<div style="background: #F8F8F8;">
<div class="container" >
<div class="special" style="padding: 80px 0px 80px 40px;">
<div class="AMZ-AboutTitle">注册准备</div>
<el-tabs v-model="activeRegistar" >
<el-tab-pane label="注册资料" name="first">
<registrateInfo></registrateInfo>
</el-tab-pane>
<el-tab-pane label="其他材料" name="second">
<otherInfo></otherInfo>
</el-tab-pane>
<el-tab-pane label="欧洲KYC" name="third">
<KYC></KYC>
</el-tab-pane>
<el-tab-pane label="账户审核“二审”" name="fourth">
<accountAudit></accountAudit>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import accountAudit from "./components/accountAudit.vue";
import otherInfo from "./components/otherInfo.vue";
import registrateInfo from "./components/registrateInfo.vue";
import KYC from "./components/KYC.vue";
/**
* Index-1 component
@ -33,10 +99,15 @@
export default {
name:"sea",
components: {
KYC,
registrateInfo,
otherInfo,
accountAudit,
},
data(){
return {
activeName:'first',
activeRegistar:'first',
activeIndex: 2, //
buttons: [
{ label: '亚马逊仓库地址',transportMode:'OCEAN' },

@ -0,0 +1,68 @@
<template>
<div >
<el-row class="info-list">
<el-col :span="12" class="info-item" v-for="(item,index) in dataList" :key="index">
<div class="content flx-justify-between " style="margin-right: 30px;">
<div class="title">
<img :src="item.img" alt="">
{{item.title}}
</div>
</div>
</el-col>
<!-- 更多 .info-item -->
</el-row>
</div>
</template>
<script>
/**
* Index-1 component
*/
export default {
name:"KYC",
components: {
},
data(){
return {
dataList:[
{
title:"公司营业执照彩色扫描件",
img:require("@/assets/icons/platform/platformIcon1.png"),
},
{
title:"公司首要联系人和受益人的身份证件",
img:require("@/assets/icons/platform/platformIcon2.png")
},
{
title:"首要联系人和受益人的个人费用账单",
img:require("@/assets/icons/platform/platformIcon1.png"),
},
{
title:"补充材料",
img:require("@/assets/icons/platform/platformIcon2.png")
},
{
title:"公司章程",
img:require("@/assets/icons/platform/platformIcon1.png"),
},
{
title:"银行账户所有人证明",
img:require("@/assets/icons/platform/platformIcon2.png")
},
{
title:"授权函(如首要联系人非公司法人或者受益人时提供)",
img:require("@/assets/icons/platform/platformIcon1.png"),
}
]
}
},
methods: {
}
};
</script>
<style src="./componentsIndex.css" scoped></style>

@ -0,0 +1,45 @@
<template>
<div >
<el-row class="info-list">
<el-col :span="24" class="info-item" v-for="(item,index) in dataList" :key="index">
<div class="content flx-justify-between " style="margin-right: 30px;">
<div class="title">
<img :src="item.img" alt="">
{{item.title}}
</div>
</div>
</el-col>
<!-- 更多 .info-item -->
</el-row>
</div>
</template>
<script>
/**
* Index-1 component
*/
export default {
name:"accountAudit",
components: {
},
data(){
return {
dataList:[
{
title:"公司或法人名 下的公共事业账单(水费、电费、天然气/煤气或互联网服务任一项",
img:require("@/assets/icons/platform/platformIcon1.png"),
},
]
}
},
methods: {
}
};
</script>
<style src="./componentsIndex.css" scoped></style>

@ -0,0 +1,60 @@
.info-list {
padding: 20px;
width: 100%;
margin: 0 auto;
}
.info-item {
display: flex;
height: 159px;
align-items: center;
border-bottom: 1px solid #eaecef;
}
.info-item:last-child {
border-bottom: none;
}
.icon {
font-size: 24px;
margin-right: 10px;
}
.content {
flex-grow: 1;
}
.title {
color: #151E2C;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 42px; /* 210% */
}
.title > img {
margin-right: 10px;
}
#description {
padding-right: 30px;
width: 470px;
color: rgba(21, 30, 44, 0.50);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 177.778% */
word-wrap: break-word; /* 兼容旧版本浏览器 */
overflow-wrap: break-word; /* 标准语法 */
}
.annotationTitle {
color: rgba(21, 30, 44, 0.50);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 155.556% */
}
.annotationContent {
color: rgba(21, 30, 44, 0.50);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}

@ -0,0 +1,66 @@
<template>
<div >
<div class="info-list">
<div class="info-item" v-for="(item,index) in dataList" :key="index">
<div class="content ">
<div class="title" style="margin-bottom: 10px;">
<img :src="item.img" alt="">
{{item.title}}
</div>
<div>
<div id="description" style="width: 100%;">
{{ item.content }}
</div>
</div>
</div>
</div>
<!-- 更多 .info-item -->
</div>
<div style="border-top: 1px solid #eaecef;margin:0 20px;">
<div style="float: right;margin-top: 36.5px;">
<div class="annotationTitle">非必需符合可下大客户链接</div>
<div class="annotationContent">如可提供以上材料登记表单时请上传资料且年销售额选择6000万以上</div>
</div>
</div>
</div>
</template>
<script>
/**
* Index-1 component
*/
export default {
name:"otherInfo",
components: {
},
data(){
return {
dataList:[
{
title:"自有或合作工厂提供工厂质量认证或产品认证",
content:"如ISO, BSCl, CE, FDA等",
img:require("@/assets/icons/platform/platformIcon1.png")
},
{
title:"日标销售国的注册商标",
content:"R标/M回执",
img:require("@/assets/icons/platform/platformIcon2.png")
},
{
title:"非工厂型(有合作工厂)提供与合作工厂间的采购合同或发票",
content:"",
img:require("@/assets/icons/platform/platformIcon3.png")
},
]
}
},
methods: {
}
};
</script>
<style src="./componentsIndex.css" scoped></style>

@ -0,0 +1,69 @@
<template>
<div >
<div class="info-list">
<div class="info-item" v-for="(item,index) in dataList" :key="index">
<div class="content flx-justify-between ">
<div class="title">
<img :src="item.img" alt="">
{{item.title}}
</div>
<div>
<div id="description">
{{ item.content }}
</div>
</div>
</div>
</div>
<!-- 更多 .info-item -->
</div>
</div>
</template>
<script>
/**
* Index-1 component
*/
export default {
name:"registrateInfo",
components: {
},
data(){
return {
dataList:[
{
title:"公司营业执照彩色扫描件",
content:" 必须由中国大陆,香港,台湾出具;营业执照有效期必须距离营业期限到期日超过45天",
img:require("@/assets/icons/platform/platformIcon1.png")
},
{
title:"法定代表人身份证彩色扫描件",
content:"姓名与营业执照法定代表人的姓名、注册亚马逊账户上的姓名一致",
img:require("@/assets/icons/platform/platformIcon2.png")
},
{
title:"可进行国际付款的有效信用卡",
content:"VISA或Mastercard,首选VISA;需确认开通销售国币种的支付功能;",
img:require("@/assets/icons/platform/platformIcon3.png")
},
{
title:"准确且最新的联系方式",
content:"联系人的电子邮箱、电话号码;公司的地址、联系电话",
img:require("@/assets/icons/platform/platformIcon4.png")
},
{
title:"用接收付款的银行账户",
content:"可选用亚马逊全球收款,海外银行账户,第三方收款(已参加“支付服务商计划” 的支付服务商)欧洲站点的收款账户请备对公账户",
img:require("@/assets/icons/platform/platformIcon5.png")
},
]
}
},
methods: {
}
};
</script>
<style src="./componentsIndex.css" scoped></style>

@ -1,275 +0,0 @@
<template>
<div class="footerBottom">
<div class="businessBackground"></div>
<div class="business">
<!-- 美通海外仓 -->
<div class="container" >
<div class="button-group" style="position: absolute;top:1000px;">
<el-button
v-for="(item, index) in buttons"
:key="index"
:class="{ 'active': activeIndex === index }"
class="flx-center"
@click="setActive(item,index)"
>
<div class="btn-text" style="">
{{ item.label }}
</div>
</el-button>
</div>
<div class="service">
<div class="service-text" style="padding-top: 70px;margin:130px 0 0 0px;">
<div >美通海运</div><i class="serviceNews"></i></div>
<div class="flx-center">
<div class="service-content">
美通海运渠道多样与全球各大船东建立战略合作自建海外仓与自有清关团队团队经验丰富专业能力强尾程派送方式多样且灵活时效稳定安全无忧
</div>
</div>
</div>
</div>
<!-- 参考时效 -->
<div class="service-text-bg" style="padding-bottom: 58px;">
<div class="container ">
<div class="service-text" style="padding-top: 70px;margin:130px 0 0 0px;">
<div >参考时效</div><i class="serviceNews"></i></div>
<div class="reference flx-align-start" style="margin-top:70px;">
<span class="referenceContry">美国</span>
<span class="referenceContent">美森特快极致时效12天普船美西20-356大热门仓20-30</span>
</div>
<div class="reference flx-align-start">
<span class="referenceContry">欧盟</span>
<span class="referenceContent">28-35</span>
</div>
<div class="reference flx-align-start">
<span class="referenceContry">英国</span>
<span class="referenceContent">28-35</span>
</div>
<div class="reference flx-align-start">
<span class="referenceContry">加拿大</span>
<span class="referenceContent">派普船45~55快船23~30</span>
</div>
<div class="reference flx-align-start">
<span class="referenceContry">墨西哥</span>
<span class="referenceContent">专线35~45快线21~25</span>
</div>
<div class="reference flx-align-start">
<span class="referenceContry">日本</span>
<span class="referenceContent">快船12-13海派15-18海卡23-25</span>
</div>
</div>
</div>
<!-- 服务线路 -->
<div class="container">
<div class="service " style="padding: 100px 0 0 0;">
<div class="service-text">
<div >服务线路</div><i class="serviceNews"></i></div>
<el-row style="margin-top: 70px;">
<el-col :span="12">
<div class="ServiceLineBox">
<div class="ServiceLineTitle">美国快线</div>
<el-tabs v-model="activeName" >
<el-tab-pane label="产品渠道" name="first">
<div style="width: 520px;height: 1px;background: #E3E3E3;margin:20px 0 32px 0;"></div>
<div class="scrollable-container">
用户管理background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background:background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3; #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;
</div>
</el-tab-pane>
<el-tab-pane label="产品优势" name="second">
<div style="width: 520px;height: 1px;background: #E3E3E3;margin:20px 0 32px 0;"></div>
<div class="scrollable-container">
用户管理background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background:background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3; #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;
</div>
</el-tab-pane>
<el-tab-pane label="产品服务" name="third">
<div style="width: 520px;height: 1px;background: #E3E3E3;margin:20px 0 32px 0;"></div>
<div class="scrollable-container">
用户管理background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background:background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3; #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-col>
<el-col :span="12">
<div class="ServiceLineBox">
<div class="ServiceLineTitle">美国快线</div>
<el-tabs v-model="activeName" >
<el-tab-pane label="产品渠道" name="first">
<div style="width: 520px;height: 1px;background: #E3E3E3;margin:20px 0 32px 0;"></div>
<div class="scrollable-container">
用户管理background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background:background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3; #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;
</div>
</el-tab-pane>
<el-tab-pane label="产品优势" name="second">配置管理</el-tab-pane>
<el-tab-pane label="产品服务" name="third">角色管理</el-tab-pane>
</el-tabs>
</div>
</el-col>
<el-col :span="12">
<div class="ServiceLineBox">
<div class="ServiceLineTitle">美国快线</div>
<el-tabs v-model="activeName" >
<el-tab-pane label="产品渠道" name="first">
<div style="width: 520px;height: 1px;background: #E3E3E3;margin:20px 0 32px 0;"></div>
<div class="scrollable-container">
用户管理background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background:background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3; #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;background: #E3E3E3;
</div>
</el-tab-pane>
<el-tab-pane label="产品优势" name="second">配置管理</el-tab-pane>
<el-tab-pane label="产品服务" name="third">角色管理</el-tab-pane>
</el-tabs>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- 运输流程 -->
<div class="service-text-bg" style="padding-bottom: 180px;">
<div class="container ">
<div class="service-text" style="padding-top: 100px;margin:130px 0 0 0px;">
<div >运输流程</div><i class="serviceNews"></i></div>
</div>
<div class="container " style="margin-top: 70px;position: relative;">
<el-row>
<el-col :span="24" class="flx-align-start">
<div class="transportationProcess flx-align-only-start ">
<img src="@/assets/images/business/overSea/transportation/transportation1.png" alt="">
<div class="">
<div class="transportationProTitle">01</div>
<div class="transportationProContent">客户系统下单</div>
</div>
</div>
<div class="transportationProcess flx-align-only-start ">
<img src="@/assets/images/business/overSea/transportation/transportation2.png" alt="">
<div class="">
<div class="transportationProTitle">05</div>
<div class="transportationProContent">到达监管仓</div>
</div>
</div>
</el-col>
<el-col :span="24" class="flx-align-start">
<div class="transportationProcess flx-align-only-start ">
<img src="@/assets/images/business/overSea/transportation/transportation3.png" alt="">
<div class="">
<div class="transportationProTitle">02</div>
<div class="transportationProContent">包裹装车发送至口岸</div>
</div>
</div>
<div class="transportationProcess flx-align-only-start ">
<img src="@/assets/images/business/overSea/transportation/transportation4.png" alt="">
<div class="">
<div class="transportationProTitle">06</div>
<div class="transportationProContent">监管仓清关</div>
</div>
</div>
</el-col>
<el-col :span="24" class="flx-align-start">
<div class="transportationProcess flx-align-only-start ">
<img src="@/assets/images/business/overSea/transportation/transportation5.png" alt="">
<div class="">
<div class="transportationProTitle">03</div>
<div class="transportationProContent">口岸换装报关</div>
</div>
</div>
<div class="transportationProcess flx-align-only-start ">
<img src="@/assets/images/business/overSea/transportation/transportation6.png" alt="">
<div class="">
<div class="transportationProTitle">07</div>
<div class="transportationProContent">尾程灵活派送</div>
</div>
</div>
</el-col>
<el-col :span="24" class="flx-align-start">
<div class="transportationProcess flx-align-only-start ">
<img src="@/assets/images/business/overSea/transportation/transportation7.png" alt="">
<div class="">
<div class="transportationProTitle">04</div>
<div class="transportationProContent">出境</div>
</div>
</div>
<div class="transportationProcess flx-align-only-start ">
<img src="@/assets/images/business/overSea/transportation/transportation8.png" alt="">
<div class="">
<div class="transportationProTitle">08</div>
<div class="transportationProContent">AMZ仓库第三方海外仓收货并上架</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</template>
<script>
/**
* Index-1 component
*/
export default {
name:"sea",
components: {
},
data(){
return {
activeName:'first',
activeIndex: 1, //
buttons: [
{ label: '海外仓',transportMode:'OCEAN' },
{ label: '头程海运',transportMode:'AIR' },
{ label: '头程卡航',transportMode:'RAIL' },
{ label: '头程空运',transportMode:'ROAD' }
],
activePropsIndex:0,
buttonProps: [
{ contry: '加拿大',capital:'温哥华/多伦多'},
{ contry: '美国',capital:'洛杉矶/芝加哥'},
{ contry: '墨西哥',capital:'墨西哥'},
{ contry: '英国',capital:'伦敦'},
{ contry: '比利时',capital:'烈日'},
{ contry: '德国',capital:'科隆'},
{ contry: '法国',capital:'巴黎'},
{ contry: '日本',capital:'大阪府'},
],
}
},
methods: {
setActive(item,index) {
if(index === 1){
this.$router.push({
name:'sea'
})
}else if(index === 2){
this.$router.push({
name:'road'
})
}else if(index === 3){
this.$router.push({
name:'air'
})
}else {
this.$router.push({
name:'business'
})
}
// this.activeIndex = index;
},
}
};
</script>
<style src="../index.css" scoped>
</style>

@ -5,22 +5,118 @@
<div class="platform">
<!-- 美通海外仓 -->
<div class="container" >
<div class="button-group" style="position: absolute;top:1000px;">
<el-button
<div class=" button-group">
<div class="button-group-item" style="position: absolute;top:1000px;">
<el-button
v-for="(item, index) in buttons"
:key="index"
:class="{ 'active': activeIndex === index }"
class="flx-center"
@click="setActive(item,index)"
>
<div class="btn-text" style="">
{{ item.label }}
</div>
</el-button>
</div>
</div>
<div class="tab-content">
<el-row :gutter="37">
<el-col :span="2.4" v-for="(item, index) in buttonWarehouse" :key="index">
<el-button
:class="{ 'activeWarehouse': activeWarehouseIndex === index }"
class="flx-center"
@click="activeWarehouseIndex = index"
>
<div class="btn-warehouse" style="">
{{ item.label }}
</div>
</el-button>
</el-col>
</el-row>
</div>
<div class="echartBox flx-align-start ">
<div >123</div>
<div >
<div class="scrolling-list">
<div class="scrolling-list-header">慕尼黑</div>
<div class="scrolling-list-content">
<div class="scrolling-list-group">
<div class="group-title">B</div>
<el-row>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
</el-row>
</div>
<div class="scrolling-list-group">
<div class="group-title">B</div>
<el-row>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
<el-col :span="12">
<div class="group-list">B1</div>
</el-col>
</el-row>
</div>
<!-- 重复以上结构以展示更多组 -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@ -42,7 +138,20 @@
{ label: '亚马逊仓库地址',transportMode:'OCEAN' },
{ label: '仓库地址分布图',transportMode:'AIR' },
{ label: 'AMAZON注册',transportMode:'RAIL' }
]
],
activeWarehouseIndex: 1,
buttonWarehouse: [
{ label: '德国',transportMode:'OCEAN' },
{ label: '法国',transportMode:'AIR' },
{ label: '英国',transportMode:'RAIL' },
{ label: '日本',transportMode:'RAIL' },
{ label: '加拿大',transportMode:'RAIL' },
{ label: '西班牙',transportMode:'RAIL' },
{ label: '意大利',transportMode:'RAIL' },
{ label: '波兰',transportMode:'RAIL' },
{ label: '捷克',transportMode:'RAIL' },
{ label: '美国',transportMode:'RAIL' },
],
}
},

Loading…
Cancel
Save