修改静态样式校验问题和动态样式

master
lml 6 months ago
parent 83462bd4cb
commit a30392f26c

Binary file not shown.

@ -11,10 +11,14 @@
.navbar-custom.navbar-white .navbar-nav li a:focus,
.navbar-custom.navbar-white .navbar-nav li a:active,
.play-btn,.blog-title:hover,.social-icon:hover i{
color: white !important;
color: #fff !important;
}
.navbar-custom.navbar-white .navbar-nav li a:active {
border-bottom: 2px solid #fff;
}
.router-link-active {
border-bottom: 2px solid #fff;
}
.section-title-border, .bg-custom, .btn-custom,.features-item-list li:before,.process-left-icon-1 i,
.process-left-icon-2 i{

@ -415,7 +415,7 @@ iframe {
.navbar-custom.navbar-white .navbar-nav li a,
.navbar-custom.navbar-white .navbar-brand,
.navbar-white .navbar-toggle {
color: #fff !important;
color: #cdcdcd ;
}
@ -1389,17 +1389,20 @@ ul.pattern .color8 {
color: #FFF !important;
}
.special .el-tabs__item {
min-width: 210px !important;
min-width: 180px !important;
text-align: center !important;
color: #4D5563 !important;
font-size: 22px !important;
font-style: normal !important;
font-weight: 600 !important;
line-height: 46px !important; /* 209.091% */
line-height: 46px !important;
margin-bottom: 10px !important;
padding-left: 25px !important;
/* padding-left: 25px !important; */
}
/* .special .el-tabs__item:first-child {
padding-left: 0px !important;
} */
.special .el-tabs__item.is-active {
color: #151E2C !important;
font-size: 28px !important;
@ -1409,7 +1412,7 @@ ul.pattern .color8 {
background: #000 !important;
}
.special .el-tabs__header {
padding: 0 100px 40px !important;
padding: 0 100px 4px !important;
}
.allSet {
@ -1420,6 +1423,11 @@ ul.pattern .color8 {
left: calc(50% - 680px);
top: 740px;
border-radius: 10px;
box-shadow: 0 4px 20px 0 rgba(210, 210, 210, 0.2);
}
.el-tabs__nav-wrap {
border-radius: 10px;
overflow: hidden;
}
.allSet .el-tabs__item {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 446 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 565 KiB

After

Width:  |  Height:  |  Size: 587 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 592 B

After

Width:  |  Height:  |  Size: 947 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 862 B

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 444 B

After

Width:  |  Height:  |  Size: 775 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

@ -2,7 +2,7 @@
<template>
<div>
<!--START FOOTER-->
<footer class="footer" >
<footer class="footer" v-if="!show">
<div class="container">
<div class="flx-align">
<div class="">
@ -30,6 +30,29 @@
</div>
</div>
</footer>
<footer class="footer" v-else>
<div class="container">
<div class="flx-justify-around" style="margin-top: 72px;padding: 0 140px;">
<div>
<img style=" width:135px;height: 135px;" src="@/assets/images/platform/publicAccount.png" alt="">
<div style="text-align:center;font-size: 16px;color: #fff;font-weight: 500;margin-top:17px">美通公众号</div>
</div>
<div>
<img style=" width:135px;height: 135px;" src="@/assets/images/platform/videoQrcode.png" alt="">
<div style="text-align:center;font-size: 16px;color: #fff;font-weight: 500;margin-top:17px">美通视频号</div>
</div>
<div >
<img style=" width: 135px;height: 135px;" src="@/assets/images/platform/tiktokQrcode.png" alt="">
<div style="text-align:center;font-size: 16px;color: #fff;font-weight: 500;margin-top:17px">美通抖音号</div>
</div>
<div>
<img style=" width:135px;height: 135px;" src="@/assets/images/platform/redBook.png" alt="">
<div style="text-align:center;font-size: 16px;color: #fff;font-weight: 500;margin-top:17px">美通小红书</div>
</div>
</div>
</div>
</footer>
<!--END FOOTER-->
<!--START FOOTER ALTER-->
@ -56,7 +79,23 @@
* Footer component
*/
export default {
name: 'Footer'
name: 'Footer',
data(){
return {
show:true
}
},
watch: {
'$route'(to, from) {
//
if(to.path ==='/about') {
this.show = true;
}else {
this.show = false;
}
//
}
}
}
</script>
<style scoped>

@ -8,7 +8,7 @@
<!-- LOGO -->
<div>
<a href="/home">
<img src="../../assets/images/home/logo_small.png" />
<img style="width: 150px;" src="../../assets/images/home/logo_small.png" />
</a>
<!-- <button style="margin-top: 100px;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
@ -158,7 +158,6 @@
watch: {
'$route'(to, from) {
//
console.log('路由变化了', to.path,this.color);
if(to.path ==='/home') {
this.color = 'white';
}else {
@ -169,8 +168,6 @@
}else {
this.show = false;
}
console.log('路由变化了', to.path,this.color);
//
}
}

@ -12,6 +12,7 @@
}
.navbar-custom.navbar-white, .navbar-custom.nav-white {
margin-top: 0px;
height: 24px;
padding: 26px 89px 26px 96px !important;
}
.navbar-custom.navbar-white {
@ -20,7 +21,7 @@
.navbarHeight {
position: relative;
width: 100%;
height: 1000px;
height: 700px;
background: url('../../../assets/images/home/background.png') no-repeat center/cover;
}
.navbarHeightWhite {
@ -35,7 +36,7 @@
border-bottom: 2px solid #000;
}
.titleImages {
/* .titleImages {
position: absolute;
top: 213px;
left: 0px;
@ -58,4 +59,4 @@
width: 558px;
height: 44px;
background: url('../../../assets/images/home/font.png') no-repeat center/cover;
}
} */

@ -29,9 +29,14 @@
</div>
</div>
<div style="background: #F8F8F8;">
<div style="background: #fff;">
<div class="container flx-center" style="padding: 70px 0 150px 0 ">
<div class="circle4 flx-center">
<video autoplay loop muted playsinline>
<!-- 视频源指向你的 mp4 文件 -->
<source src="@/assets/video/aboutMT.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- <div class="circle4 flx-center">
<div class="circle3 flx-center">
<div class="circle2 flx-center">
<div class="circle-container">
@ -44,9 +49,9 @@
</div>
</div>
</div>
</div> -->
<div style="margin-left: 200px;" v-if="activePropsIndex === 0">
<!-- <div style="margin-left: 200px;" v-if="activePropsIndex === 0">
<img src="@/assets/icons/about/about1.png" alt="">
<div class="circle-title">一站式</div>
<div class="circle-content">设立多个分子公司为全国各地客户进行本地化服务</div>
@ -60,7 +65,7 @@
<img src="@/assets/icons/about/about1.png" alt="">
<div class="circle-title">一条龙</div>
<div class="circle-content">以高质量的运营能力实现门到门端到端服务</div>
</div>
</div> -->
</div>
</div>
@ -128,9 +133,9 @@
</div>
</div>
</div>
<div class="container" style="margin-top: 140px;margin-bottom: 70px;">
<div class="main-title">美通媒体平台</div>
<div class="flx-justify-around" style="margin-top: 72px;">
<!-- <div class="container" style="margin-top: 140px;margin-bottom: 70px;"> -->
<!-- <div class="main-title">美通媒体平台</div> -->
<!-- <div class="flx-justify-around" style="margin-top: 72px;">
<div>
<img src="@/assets/images/platform/publicAccount.png" alt="">
<div style="text-align:center;font-size: 20px;color: #151E2C;font-weight: 500;margin-top:17px">美通公众号</div>
@ -147,8 +152,8 @@
<img style="border:1px dashed #A7A7A7;width:190px;height:190px;padding:15px" src="@/assets/images/platform/redBook.png" alt="">
<div style="text-align:center;font-size: 20px;color: #151E2C;font-weight: 500;margin-top:17px">美通小红书</div>
</div>
</div>
</div>
</div> -->
<!-- </div> -->
</div>
</div>
</template>

@ -411,7 +411,7 @@
z-index: 999;
position: absolute;
bottom: 139px;
right: 300px;
left: 1400px;
width: 213px;
height: 117px;
flex-shrink: 0;
@ -428,6 +428,8 @@
line-height: 160px;
padding-left:60px ;
margin-bottom: 32px;
border-radius: 10px;
}
.inviteBox span {
color: #151E2C;
@ -437,8 +439,10 @@
line-height: 46px; /* 164.286% */
margin-left: 24px;
}
.invite-active {
border-radius: 10px;
/* .invite-active {
box-shadow: 8px 20px 41.6px 0px rgba(0, 0, 0, 0.08);
} */
.inviteBox:hover {
box-shadow: 8px 20px 41.6px 0px rgba(0, 0, 0, 0.08);
}

@ -12,7 +12,7 @@
.business .business-imgRight {
position: absolute;
right: 0%;
top:30%;
top:20%;
}
.business .business-imgLeft img {
width: 120px;
@ -58,8 +58,8 @@
border-radius: 20px;
overflow: hidden;
z-index:999;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); */
box-shadow: 0 4px 20px 0 rgba(210, 210, 210, 0.2);
}
.business .el-button {
flex: 1;
@ -182,6 +182,15 @@
font-weight: 600;
line-height: 28px; /* 200% */
}
.buttonPropsBox:hover {
border: 1px solid #fff;
flex-shrink: 0;
border-radius: 10px;
background: #FFF;
box-shadow: -25px 47px 66px 0px rgba(0, 0, 0, 0.08);
margin-left: 20px;
transition: all 0.2s ease-in-out;
}
.proprietary-active {
border: 1px solid #fff;
flex-shrink: 0;
@ -194,6 +203,7 @@
.serviceBoxTitle>span{
margin-right: 28px;
}
.serviceBoxTitle span {
color: #151E2C;
font-family: Montserrat;
@ -223,8 +233,8 @@
margin-top: 58px;
}
.serviceBoxEnd {
width: 712px;
height: 70px;
width: 800px;
height: 100px;
flex-shrink: 0;
border-radius: 12px;
/* background: #00AFAF; */

@ -1,6 +1,6 @@
<template>
<div class="footerBottom">
<div class="">
<div class="business">
<!-- 美通海外仓 -->
<div class="flx-center">
@ -72,6 +72,8 @@
<div
@click="activePropsIndex = index"
class="flx-justify-between"
@mouseenter="hoverIndex = false"
v-if="hoverIndex"
:class="['buttonPropsBox', { 'proprietary-active': activePropsIndex === index}]"
>
<div class="flx-center">
@ -81,6 +83,19 @@
<span class="activeCapitalSpan">{{ button.capital }}</span>
</div>
<div
@click="activePropsIndex = index"
class="flx-justify-between"
v-else
:class="['buttonPropsBox']"
>
<div class="flx-center">
<img style="width: 32px;margin-right: 16px;" :src="button.icon" alt="icon" />
<span class="activeContrySpan">{{ button.contry }}</span>
</div>
<span class="activeCapitalSpan">{{ button.capital }}</span>
</div>
</el-col>
</el-row>
</div>
@ -91,12 +106,13 @@
</div>
<!-- 服务功能 -->
<div class="container">
<div class="container" >
<div class="service " style="padding: 100px 0;">
<div class="service-text">
<div >服务功能</div><i class="serviceNews"></i>
</div>
<div class="flx-justify-between" style="margin-top:130px;">
<div style="padding:0 100px;">
<div class="flx-justify-between serviceBox" style="margin-top:130px;">
<div class="serviceBoxTitle">
<span><img src="@/assets/images/business/overSea/service/LOGO1.png"></span>
<span>暂存中转服务</span>
@ -106,7 +122,7 @@
</div>
</div>
<div class="serviceBoxLine"></div>
<div class="flx-justify-between" style="margin-top:60px;">
<div class="flx-justify-between serviceBox" style="margin-top:60px;">
<div class="serviceBoxTitle">
<span><img src="@/assets/images/business/overSea/service/LOGO2.png"></span>
<span>一件代发</span>
@ -116,7 +132,7 @@
</div>
</div>
<div class="serviceBoxLine"></div>
<div class="flx-justify-between" style="margin-top:60px;">
<div class="flx-justify-between serviceBox" style="margin-top:60px;">
<div class="serviceBoxTitle">
<span><img src="@/assets/images/business/overSea/service/LOGO3.png"></span>
<span>增值服务</span>
@ -126,7 +142,7 @@
</div>
</div>
<div class="serviceBoxLine"></div>
<div class="flx-justify-between" style="margin-top:60px;">
<div class="flx-justify-between serviceBox" style="margin-top:60px;">
<div class="serviceBoxTitle">
<span><img src="@/assets/images/business/overSea/service/LOGO4.png"></span>
<span>退件服务</span>
@ -145,11 +161,12 @@
</div>
</div>
</div>
</div>
<!-- 运输流程 -->
<div class="service-text-bg" style="padding-bottom: 180px;">
<div class="service-text-bg" style="padding-bottom: 80px;">
<div class="container " >
<div class="service-text" style="padding-top: 100px;margin:100px 0 0 0px;">
<div class="service-text" style="padding-top: 100px;margin:0 0 0 0px;">
<div >运输流程</div><i class="serviceNews"></i>
</div>
</div>
@ -242,6 +259,7 @@ export default {
},
data(){
return {
hoverIndex: true,
activeName: 'second',
activeIndex: 0, //
buttons: [

@ -91,7 +91,7 @@
<div class="ServiceLineTitle">
<img style="width: 32px;margin-right: 16px;" :src="item.icon" alt="icon" />{{item.title}}
</div>
<el-tabs v-model="activeName" >
<el-tabs v-model="item.activeName" @tab-click="handleClick(item,index)">
<el-tab-pane label="产品渠道" name="first">
<div style="width: 520px;height: 1px;background: #E3E3E3;margin:20px 0 32px 0;"></div>
<div class="scrollable-container">
@ -235,31 +235,37 @@ export default {
serviceList:[
{
title:'美国快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/US.png'),
channelData:'美森特快极致时效12自然日签收快递时效稳定在13自然日提取普船优选OA联盟优势航线美西20-35自然日签收六大热门仓OA优选整柜直送时效20-30个自然日签收无丢货无额外费'
},
{
title:'欧盟快线',
activeName:'second',
icon:require('@/assets/images/business/overSea/OM.jpg'),
channelData:'开船到提取28-35个自然日'
},
{
title:'英国快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/GB.png'),
channelData:'开船到提取28-35个自然日'
},
{
title:'加拿大快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/CA.png'),
channelData:'海派普船45~55自然日美森快船23~30自然日'
},
{
title:'墨西哥快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/MX.png'),
channelData:'海运专线35~45自然日海运快线21~25自然日'
},
{
title:'日本快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/JP.png'),
channelData:'快船截单后12-13自然日签收 海派开船后15-18自然日签收海卡开船后23-25日签收'
},
@ -267,6 +273,9 @@ export default {
}
},
methods: {
handleClick(item,index){
},
setActive(item,index) {
if(index === 1){
this.$router.push({

@ -91,7 +91,7 @@
<div class="ServiceLineTitle">
<img style="width: 32px;margin-right: 16px;" :src="item.icon" alt="icon" />{{item.title}}
</div>
<el-tabs v-model="activeName" >
<el-tabs v-model="item.activeName" @tab-click="handleClick(item,index)">
<el-tab-pane label="产品渠道" name="first">
<div style="width: 520px;height: 1px;background: #E3E3E3;margin:20px 0 32px 0;"></div>
<div class="scrollable-container">
@ -235,34 +235,41 @@ export default {
serviceList:[
{
title:'美国快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/US.png'),
channelData:'美森特快极致时效12自然日签收快递时效稳定在13自然日提取普船优选OA联盟优势航线美西20-35自然日签收六大热门仓OA优选整柜直送时效20-30个自然日签收无丢货无额外费'
},
{
title:'欧盟快线',
activeName:'second',
icon:require('@/assets/images/business/overSea/OM.jpg'),
channelData:'开船到提取28-35个自然日'
},
{
title:'英国快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/GB.png'),
channelData:'开船到提取28-35个自然日'
},
{
title:'加拿大快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/CA.png'),
channelData:'海派普船45~55自然日美森快船23~30自然日'
},
{
title:'墨西哥快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/MX.png'),
channelData:'海运专线35~45自然日海运快线21~25自然日'
},
{
title:'日本快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/JP.png'),
channelData:'快船截单后12-13自然日签收 海派开船后15-18自然日签收海卡开船后23-25日签收'
}]
},
]
}
},
methods: {

@ -95,7 +95,7 @@
<div class="ServiceLineTitle">
<img style="width: 32px;margin-right: 16px;" :src="item.icon" alt="icon" />{{item.title}}
</div>
<el-tabs v-model="activeName" >
<el-tabs v-model="item.activeName" @tab-click="handleClick(item,index)">
<el-tab-pane label="产品渠道" name="first">
<div style="width: 520px;height: 1px;background: #E3E3E3;margin:20px 0 32px 0;"></div>
<div class="scrollable-container">
@ -239,34 +239,41 @@
serviceList:[
{
title:'美国快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/US.png'),
channelData:'美森特快极致时效12自然日签收快递时效稳定在13自然日提取普船优选OA联盟优势航线美西20-35自然日签收六大热门仓OA优选整柜直送时效20-30个自然日签收无丢货无额外费'
},
{
title:'欧盟快线',
activeName:'second',
icon:require('@/assets/images/business/overSea/OM.jpg'),
channelData:'开船到提取28-35个自然日'
},
{
title:'英国快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/GB.png'),
channelData:'开船到提取28-35个自然日'
},
{
title:'加拿大快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/CA.png'),
channelData:'海派普船45~55自然日美森快船23~30自然日'
},
{
title:'墨西哥快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/MX.png'),
channelData:'海运专线35~45自然日海运快线21~25自然日'
},
{
title:'日本快线',
activeName:'first',
icon:require('@/assets/images/business/overSea/JP.png'),
channelData:'快船截单后12-13自然日签收 海派开船后15-18自然日签收海卡开船后23-25日签收'
}]
},
]
}
},
methods: {

@ -87,54 +87,60 @@ export default {
},
toolTipData : [
{
name: '湖南',
name: '湖南',
value: `<br><h5>tsefgsdf</h5><br>213`,
areas: ["长沙", "株洲", "益阳"]
areas: ["长沙", "株洲", "益阳"],
},
{
name: '安徽',
name: '安徽',
value: 3,
areas: ["合肥", "芜湖"]
areas: ["合肥", "芜湖"],
},
{
name: '山东',
name: '山东',
value: 80,
areas: ["济南", "青岛", "淄博", "烟台", "威海", "临沂"]
areas: ["济南", "青岛", "淄博", "烟台", "威海", "临沂"],
},
{
name: '四川',
name: '四川',
value: 35,
areas: ["成都", "攀枝花", "乐山", "泸州"]
areas: ["成都", "攀枝花", "乐山", "泸州"],
},
{
name: '云南',
name: '云南',
value: 27,
areas: ["昆明", "玉溪", "丽江", "普洱", "临沧"]
areas: ["昆明", "玉溪", "丽江", "普洱", "临沧"],
},
{
name: '黑龙江',
name: '黑龙江',
value: 13,
areas: ["哈尔滨", "鹤岗", "黑河", "绥化", "大庆", "佳木斯"]
areas: ["哈尔滨", "鹤岗", "黑河", "绥化", "大庆", "佳木斯"],
},
{
name: '甘肃',
name: '甘肃',
value: 42,
areas: ["兰州", "嘉峪关", "天水", "酒泉"]
areas: ["兰州", "嘉峪关", "天水", "酒泉"],
},
{
name: '西藏',
name: '西藏自治区',
value: 74,
areas: []
areas: [],
}
]
],
colorMap : {
areaColor: 'rgba(0, 175, 175, 0.15)',
borderColor: '#00AFAF'
},
flowData:[],
emphasisData:[]
};
},
mounted() {
let myChart = echarts.init(document.querySelector("#chinaMap"));
let _this = this
this.getRegions()
this.initChart(myChart,this.toolTipData)
myChart.showLoading();
let mapFeatures = echarts.getMap(this.mapName).geoJson.features;
myChart.hideLoading();
@ -217,7 +223,8 @@ export default {
fontWeight: "bold"
}
},
geo: [{
geo: [
{
layoutCenter: ['35%', '65%'],//
layoutSize: '180%',//
show: true,
@ -225,11 +232,12 @@ export default {
roam: false,
zoom: 0.65,
aspectScale: 0.8,
regions: this.flowData,
label: {
normal: {
show: false,
textStyle: {
color: '#d9f3f3'
color: '#f8f8f8'
}
},
emphasis: {
@ -240,24 +248,16 @@ export default {
}
},
select: {
label: {
show: false,
color: '#80d7d7'
color: '#fafafa'
},
itemStyle: {
areaColor: '#80d7d7'
areaColor: '#fafafa'
}
},
itemStyle: {
normal: {
areaColor: {
type: "linear",
@ -276,26 +276,26 @@ export default {
},
borderColor: "#A6A6A6",
borderWidth: 1,
},
emphasis: {
show: true,
color: 'd9f3f3', //
areaColor: "#d9f3f3",
color: '#fafafa', //
// areaColor: "#d9f3f3",
areaColor: "#fafafa",
itemStyle: {
areaColor: "black", //
areaColor: "#fafafa", //
borderWidth: 1, //
},
textStyle: {
color: '#d9f3f3'
color: '#fafafa'
}
// borderWidth: 0
}
}
}],
}
],
series: [
{
type: 'map',
@ -317,7 +317,6 @@ export default {
show: false,
},
},
itemStyle: {
normal: {
areaColor: {
@ -347,13 +346,75 @@ export default {
},
data: this.data,
}
],
};
// 使
myChart.setOption(option);
},
getRegions (){
this.flowData = this.toolTipData.map(element => {
const { name} = element;
return {
name,
label: {
normal: {
show: true,
textStyle: {
color: '#00AFAF'
}
},
emphasis: {
show: true,
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
olor: '#00AFAF'
}
},
areaColor: 'rgba(0, 175, 175, 0.15)',
borderColor: '#00AFAF',
borderWidth: 0.5,
// shadowBlur: 10,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
emphasis: { // emphasis
areaColor: "00AFAF",
itemStyle: {
areaColor: "#00AFAF", //
borderColor: "#4D4D4D", //
borderWidth: 0.5, //
},
label: {
show: true,
color: '#d9f3f3'
}
},
select: {
label: {
show: true,
color: '#fff'
},
itemStyle: {
areaColor: '#00afaf'
}
},
};
})
// console.log(res)
// console.log(this.flowData)
},
setOptionData(params,myChart){
if (params.componentType === 'series' && params.seriesType === 'map') {

@ -47,7 +47,12 @@
<el-row>
<el-col v-for="(item,index) in overCompanyList" :key="index" :span="12">
<div class="companyBox ">
<div class="companyTitle">{{item.title}}</div>
<div class="companyTitle">
<div v-if="item.contentList[0].content !== ''"> {{item.title}}</div>
<div v-else class="flx-justify-between " style="line-height:90px">
<span>{{item.title}}</span>
</div>
</div>
<div class="overCompanyContent">
<div v-for="(itemData,indexData) in item.contentList" :key="indexData"> {{itemData.content}}</div>
</div>
@ -100,6 +105,8 @@
contentList:[
{
content:'深圳市龙岗区坂田五和大道南路49号金方华电商产业园9栋105',
},
{
content:'深圳市龙岗区雅园路26号坂银谷A1001-A1004',
}
]

@ -1,8 +1,8 @@
<template>
<div class="container" style="padding: 0;">
<el-row class="faq-container" >
<div class="container" style="margin-top: 42px;">
<el-row class="faq-container" style="padding:0 110px 48px 0;">
<el-col v-for="(faq, index) in faqs" :key="index" :span="12">
<div class="faq-item" >
<h3>{{ faq.question }}</h3>

@ -298,7 +298,7 @@ export default {
series: [
//
{
//name: 'bar3D',
name: '',
type: "bar3D",
coordinateSystem: 'globe',
barSize: 0.5, //
@ -313,375 +313,16 @@ export default {
show: false,
formatter: '{b}'
},
data: this.convertData([{
// data: this.convertData(
data:
[{
name: "海门",
value: (Math.random() * 300).toFixed(2)
}, {
name: "鄂尔多斯",
value: (Math.random() * 300).toFixed(2)
}, {
name: "招远",
value: (Math.random() * 300).toFixed(2)
}, {
name: "舟山",
value: (Math.random() * 300).toFixed(2)
}, {
name: "齐齐哈尔",
value: (Math.random() * 300).toFixed(2)
}, {
name: "盐城",
value: (Math.random() * 300).toFixed(2)
}, {
name: "赤峰",
value: (Math.random() * 300).toFixed(2)
}, {
name: "青岛",
value: (Math.random() * 300).toFixed(2)
}, {
name: "南通",
value: (Math.random() * 300).toFixed(2)
}, {
name: "拉萨",
value: (Math.random() * 300).toFixed(2)
}, {
name: "云浮",
value: (Math.random() * 300).toFixed(2)
}, {
name: "梅州",
value: (Math.random() * 300).toFixed(2)
}, {
name: "文登",
value: (Math.random() * 300).toFixed(2)
}, {
name: "上海",
value: (Math.random() * 300).toFixed(2)
}, {
name: "攀枝花",
value: (Math.random() * 200).toFixed(2)
}, {
name: "威海",
value: (Math.random() * 200).toFixed(2)
}, {
name: "福州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "瓦房店",
value: (Math.random() * 200).toFixed(2)
}, {
name: "即墨",
value: (Math.random() * 200).toFixed(2)
}, {
name: "抚顺",
value: (Math.random() * 200).toFixed(2)
}, {
name: "玉溪",
value: (Math.random() * 200).toFixed(2)
}, {
name: "常熟",
value: (Math.random() * 200).toFixed(2)
}, {
name: "东莞",
value: (Math.random() * 200).toFixed(2)
}, {
name: "河源",
value: (Math.random() * 200).toFixed(2)
}, {
name: "淮安",
value: (Math.random() * 200).toFixed(2)
}, {
name: "泰州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "南宁",
value: (Math.random() * 200).toFixed(2)
}, {
name: "营口",
value: (Math.random() * 200).toFixed(2)
}, {
name: "惠州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "江阴",
value: (Math.random() * 200).toFixed(2)
}, {
name: "蓬莱",
value: (Math.random() * 200).toFixed(2)
}, {
name: "韶关",
value: (Math.random() * 200).toFixed(2)
}, {
name: "嘉峪关",
value: (Math.random() * 200).toFixed(2)
}, {
name: "广州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "延安",
value: (Math.random() * 200).toFixed(2)
}, {
name: "太原",
value: (Math.random() * 200).toFixed(2)
}, {
name: "清远",
value: (Math.random() * 200).toFixed(2)
}, {
name: "中山",
value: (Math.random() * 200).toFixed(2)
}, {
name: "昆明",
value: (Math.random() * 200).toFixed(2)
}, {
name: "寿光",
value: (Math.random() * 200).toFixed(2)
}, {
name: "盘锦",
value: (Math.random() * 200).toFixed(2)
}, {
name: "长治",
value: (Math.random() * 300).toFixed(2)
}, {
name: "深圳",
value: (Math.random() * 200).toFixed(2)
}, {
name: "珠海",
value: (Math.random() * 200).toFixed(2)
}, {
name: "宿迁",
value: (Math.random() * 300).toFixed(2)
}, {
name: "咸阳",
value: (Math.random() * 300).toFixed(2)
}, {
name: "铜川",
value: (Math.random() * 300).toFixed(2)
}, {
name: "平度",
value: (Math.random() * 300).toFixed(2)
}, {
name: "佛山",
value: (Math.random() * 300).toFixed(2)
}, {
name: "海口",
value: (Math.random() * 300).toFixed(2)
}, {
name: "江门",
value: (Math.random() * 200).toFixed(2)
}, {
name: "章丘",
value: (Math.random() * 200).toFixed(2)
}, {
name: "肇庆",
value: (Math.random() * 300).toFixed(2)
}, {
name: "大连",
value: (Math.random() * 200).toFixed(2)
}, {
name: "临汾",
value: (Math.random() * 300).toFixed(2)
}, {
name: "吴江",
value: (Math.random() * 200).toFixed(2)
}, {
name: "石嘴山",
value: (Math.random() * 200).toFixed(2)
}, {
name: "沈阳",
value: (Math.random() * 200).toFixed(2)
}, {
name: "苏州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "茂名",
value: (Math.random() * 200).toFixed(2)
}, {
name: "嘉兴",
value: (Math.random() * 200).toFixed(2)
}, {
name: "长春",
value: (Math.random() * 300).toFixed(2)
}, {
name: "胶州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "银川",
value: (Math.random() * 200).toFixed(2)
}, {
name: "张家港",
value: (Math.random() * 200).toFixed(2)
}, {
name: "三门峡",
value: (Math.random() * 200).toFixed(2)
}, {
name: "锦州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "南昌",
value: (Math.random() * 200).toFixed(2)
}, {
name: "柳州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "三亚",
value: (Math.random() * 300).toFixed(2)
}, {
name: "自贡",
value: (Math.random() * 200).toFixed(2)
}, {
name: "吉林",
value: (Math.random() * 200).toFixed(2)
}, {
name: "阳江",
value: (Math.random() * 200).toFixed(2)
}, {
name: "泸州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "西宁",
value: (Math.random() * 200).toFixed(2)
}, {
name: "宜宾",
value: (Math.random() * 200).toFixed(2)
}, {
name: "呼和浩特",
value: (Math.random() * 200).toFixed(2)
}, {
name: "成都",
value: (Math.random() * 200).toFixed(2)
}, {
name: "大同",
value: (Math.random() * 200).toFixed(2)
}, {
name: "镇江",
value: (Math.random() * 100).toFixed(2)
}, {
name: "桂林",
value: (Math.random() * 200).toFixed(2)
}, {
name: "张家界",
value: (Math.random() * 200).toFixed(2)
}, {
name: "宜兴",
value: (Math.random() * 200).toFixed(2)
}, {
name: "北海",
value: (Math.random() * 200).toFixed(2)
}, {
name: "西安",
value: (Math.random() * 200).toFixed(2)
}, {
name: "金坛",
value: (Math.random() * 200).toFixed(2)
},
{
name: "包头",
value: (Math.random() * 200).toFixed(2)
}, {
name: "绵阳",
value: (Math.random() * 200).toFixed(2)
}, {
name: "乌鲁木齐",
value: (Math.random() * 200).toFixed(2)
}, {
name: "枣庄",
value: (Math.random() * 200).toFixed(2)
}, {
name: "杭州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "淄博",
value: (Math.random() * 200).toFixed(2)
}, {
name: "鞍山",
value: (Math.random() * 200).toFixed(2)
}, {
name: "溧阳",
value: (Math.random() * 200).toFixed(2)
}, {
name: "库尔勒",
value: (Math.random() * 200).toFixed(2)
}, {
name: "安阳",
value: (Math.random() * 200).toFixed(2)
}, {
name: "开封",
value: (Math.random() * 200).toFixed(2)
}, {
name: "济南",
value: (Math.random() * 100).toFixed(2)
}, {
name: "德阳",
value: (Math.random() * 200).toFixed(2)
}, {
name: "温州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "九江",
value: (Math.random() * 100).toFixed(2)
}, {
name: "邯郸",
value: (Math.random() * 200).toFixed(2)
}, {
name: "临安",
value: (Math.random() * 100).toFixed(2)
}, {
name: "兰州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "沧州",
value: (Math.random() * 200).toFixed(2)
},
{
name: "秦皇岛",
value: (Math.random() * 200).toFixed(2)
}, {
name: "株洲",
value: (Math.random() * 200).toFixed(2)
}, {
name: "石家庄",
value: (Math.random() * 200).toFixed(2)
}, {
name: "莱芜",
value: (Math.random() * 200).toFixed(2)
}, {
name: "常德",
value: (Math.random() * 200).toFixed(2)
}, {
name: "保定",
value: (Math.random() * 200).toFixed(2)
}, {
name: "湘潭",
value: (Math.random() * 100).toFixed(2)
}, {
name: "金华",
value: (Math.random() * 200).toFixed(2)
}, {
name: "岳阳",
value: (Math.random() * 200).toFixed(2)
}, {
name: "长沙",
value: (Math.random() * 100).toFixed(2)
}, {
name: "衢州",
value: (Math.random() * 200).toFixed(2)
}, {
name: "廊坊",
value: (Math.random() * 200).toFixed(2)
}, {
name: "菏泽",
value: (Math.random() * 100).toFixed(2)
}, {
name: "合肥",
value: (Math.random() * 200).toFixed(2)
}, {
name: "武汉",
value: (Math.random() * 200).toFixed(2)
}, {
name: "大庆",
value: (Math.random() * 200).toFixed(2)
value: '666'
}
]),
],
},
{
name: 'lines3D',
@ -733,7 +374,8 @@ export default {
]
};
for (let i = 0; i < 50; i++) {
option.series[1].data = option.series[1].data.concat(this.rodamData())
// option.series[1].data = option.series[1].data.concat(this.rodamData())
option.series[1].data = option.series[1].data
}
@ -761,7 +403,7 @@ export default {
var geoCoord = this.geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
// name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
@ -777,7 +419,7 @@ export default {
width: 35vw;
height: 80vh;
}
::v-deep .canvas{
::v-deep canvas{
width: 400px;
}
</style>

@ -4,6 +4,8 @@
border-radius: 20px;
overflow: hidden;
background-color: #FFE7CE;
position: relative;
border: 1px solid #ECECEC;
}
#buttonddd {
@ -16,13 +18,16 @@
#follower {
position: absolute;
width: 312px;
height: 100%;
z-index: 0;
width: 313px;
height: 120px;
background: linear-gradient(180deg, #FFFBF8 0%, #FFEDDF 100%);
transition: transform 0.1s linear; /* Smooth transition for movement */
transform: translate(-470px);
}
.home .el-button {
flex: 1;
height: 68px;
padding: 26px 0;
margin-left: 0px !important;
background: #FFFBF8;
@ -30,12 +35,14 @@
border: none; /* 移除单独的按钮边框 */
border-radius: 0px;
transition: all 0.3s ease;
position: relative;
/* 为按钮添加右边框 */
}
.home .btn-text {
position: relative;
z-index: 1;
border-right: 1px solid #FFE7CE;
height: 88px;
width: 148px;
padding: 0px 82px;
line-height: 88px;
@ -49,8 +56,9 @@
.btn-text span,.btn-text img {
position: relative;
z-index: 101;
}
.btn-text span {
font-family: "DingTalk JinBuTi" !important;
}
.btn-text img {
margin-right: 12px;
@ -58,14 +66,16 @@
.home .el-button:last-child div {
border-right: none !important; /* 最后一个按钮不需要右边框 */
}
#follower-button .buttonChange4 .btn-text{
border-right: none !important; /* 最后一个按钮不需要右边框 */
}
.home .el-button.active {
/* color: white;
background: linear-gradient(180deg, #FFFBF8 0%, #FFEDDF 100%);
z-index: 1; */
}
.home .el-button:hover {
background: linear-gradient(180deg, #FFFBF8 0%, #FFEDDF 100%);
/* background: linear-gradient(180deg, #FFFBF8 0%, #FFEDDF 100%); */
}
.home .el-button:hover span {
@ -75,12 +85,14 @@
.home .el-button:hover img {
transform: scale(1.2);
}
.hover-effect {
.hover-effect {
position: absolute;
width: 50px;
height: 50px;
transition: transform 0.1s linear; /* Smooth transition for movement */
}
width: 100px; /* Or the size of your choice */
height: 30px; /* Or the size of your choice */
background: #ccc; /* Example background */
transition: transform 0.5s ease; /* Smooth transition for 0.5 seconds */
transform: translateX(-100%); /* Initial position - out of view */
}
/* what service do i provice */
.home .service-text-bg {
background-color: #fcfcfc;
@ -121,7 +133,7 @@
/* 美通空运样式 */
.home .cardBox {
width: 226px; /* 调整宽度 */
height: 296px;
height: 240px;
position: relative;
padding: 30px;
margin-right: 35px;
@ -130,6 +142,9 @@
cursor: pointer;
transition: background-color 0.3s ease;
}
.home .cardBox:hover {
background-color: #eee;
}
.home .cardBox:nth-child(2) {
margin-top: 44px;
}
@ -139,7 +154,7 @@
}
.home .card-active {
background-color: #092238; /* 激活状态背景色 */
background-color: #092238 !important; /* 激活状态背景色 */
color: #fff; /* 激活状态文字色 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@ -147,6 +162,15 @@
.home .card-active .card-description{
color: rgba(255, 255, 255, 0.70);
}
/* .home .cardBox:hover {
background-color: #F6F6F6;
color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.home .cardBox:hover .card-description{
color: rgba(255, 255, 255, 0.70);
} */
.home .card-icon {
/* 图标样式 */
position: absolute;
@ -162,7 +186,9 @@
text-align: center;
line-height: 62px;
}
.home .card-icon img {
width: 36px;
}
.home .card-title {
position: absolute;
bottom: 118px;
@ -194,10 +220,13 @@
margin-bottom: 107px;
}
.home .hotLinePadding {
position: relative;
z-index: 999;
padding-left: 40px;
}
.home .toggle-buttons {
width: 46%;
z-index: 999;
}
.home .toggle-buttons .el-col {
margin-bottom: 64px;
@ -221,7 +250,7 @@
/* 统计项 公司员工等等 */
.home .card-padding {
padding: 75px 116px;
padding: 50px 16px;
margin-top: 120px;
}
.home .statistic-item {
@ -310,20 +339,28 @@
opacity: 0;
}
/* .new-active,.newsSmall:hover { */
.home .new-active {
.newsSmall:hover {
margin-left: 30px;
transition: all .4s ease;
border-radius: 10px;
background: #FFF;
border: none;
box-shadow: -25px 47px 66px 0px rgba(0, 0, 0, 0.08);
}
/* .home .new-active {
margin-left: 30px;
border-radius: 10px;
background: #FFF;
border: none;
box-shadow: -25px 47px 66px 0px rgba(0, 0, 0, 0.08);
} */
/* .new-active .smallTitle,.newsSmall:hover .smallTitle { */
.home .new-active .smallTitle {
.newsSmall:hover .smallTitle {
color: #00AFAF;
font-weight: 500;
}
/* .newsSmallTag .new-active img,.newsSmall:hover img{ */
.home .newsSmallTag .new-active img{
.home .newsSmall:hover img{
opacity: 1;
}
@ -348,6 +385,8 @@
flex-shrink: 0;
border-radius: 24px;
background: #7ED7E1;
overflow: hidden;
}
.home .NewsTrends .NewsTrendsTitle {
color: #FFF;
@ -385,6 +424,13 @@
bottom: 0;
left: 107px;
}
.home .NewsTrends img {
transition: all .3s ease;
transform: scale(1);
}
.home .NewsTrends:hover img {
transform: scale(1.1);
}
.home .gray-box {
position: absolute;
background: gray;

@ -1,42 +1,46 @@
<template>
<div class="footerBottom">
<div >
<div class="home">
<!-- <div class="bg-overlay"></div> -->
<div class="container" >
<div class="button-group " style="position: absolute;top:930px; z-index: 100;">
<div style="position: absolute;left:0" >
<div class="button-group " style="position: absolute;top:630px; z-index: 100;">
<!-- <div style="position: absolute;left:0" >
<div id="buttonddd" >
<div id="follower" class="hover-effect" v-show="hoverActive"></div>
</div>
<div id="follower" class="hover-effect" ></div>
</div>
</div> -->
<div class="flx-center">
<!-- :class="{ 'active': activeIndex === index,[`buttonChange${index + 1}`]: true}" -->
<div class="flx-center" id="follower-button">
<el-button
v-for="(item, index) in buttons"
:key="index"
:class="{ 'active': activeIndex === index,[`buttonChange${index + 1}`]: true}"
class="flx-center "
@click="setActive(item,index)"
>
<div class="btn-text"
style=""
@mouseenter="hoverActive = false"
@mouseleave="hoverActive = true">
@mouseover="moveFollower($event, index)"
>
<img :src="item.icon" alt="" class="button-icon" />
<span>{{ item.label }}</span>
</div>
</el-button>
<div id="follower" class="hover-effect" ></div>
</div>
</div>
</div>
<div class="container" style="margin-top: 120px;margin-bottom: 50px;">
<div class="container" style="margin-top: 100px;margin-bottom: 40px;">
<div class="flx-justify-around" style="width: 100%;">
<img src="@/assets/images/home/internetImages/title1.png" alt="">
@ -47,7 +51,7 @@
</div>
</div>
<div class="service-text-bg" style="padding-bottom: 58px;">
<div class="service-text-bg" style="">
<div class="service-text" style="padding-top: 70px;margin-bottom: 70px;">
What <div class="service">service</div> do I provide<i></i>
</div>
@ -98,7 +102,7 @@
</div>
<!-- 地球 -->
<div style="position: absolute;right: 0;top: 0;">
<div style="position: absolute;right: 0;top: 0;z-index:1;">
<Earth />
</div>
@ -158,7 +162,7 @@
</div>
<div class="container card " >
<div class="service-text" style="padding-top: 70px;margin-bottom: 70px;">
<div class="service-text" style="padding-top: 50px;margin-bottom: 70px;">
<div >News</div><i class="serviceNews"></i>
</div>
<div class="flx">
@ -193,7 +197,7 @@
<div class="NewsTrends flx-only-justify-between " style="margin-top: 80px;padding: 45px 165px 65px 107px;">
<div class="flx-column-justify-around ">
<div class="NewsTrendsTitle">新闻动态</div>
<div class="NewsTrendsTag">Tag</div>
<!-- <div class="NewsTrendsTag">Tag</div> -->
<div class="NewsTrendsDetail">See Detail Project</div>
</div>
<div>
@ -205,9 +209,9 @@
<img src="@/assets/images/home/NewsTrends2.png" alt="">
</div>
<div></div>
<div class="flx-column-justify-around ">
<div class="flx-column-justify-around " style="margin-right: 190px;">
<div class="NewsTrendsTitle">干货分享</div>
<div class="NewsTrendsTag">Tag</div>
<!-- <div class="NewsTrendsTag">Tag</div> -->
<div class="NewsTrendsDetail">See Detail Project</div>
</div>
</div>
@ -292,18 +296,9 @@ export default {
// Switcher
},
mounted() {
document.getElementById('buttonddd').addEventListener('mousemove', function(e) {
var follower = document.getElementById('follower');
// Get the mouse position relative to the container
var rect = this.getBoundingClientRect();
console.log(rect);
var mouseX = e.clientX - rect.left - (follower.offsetWidth / 2); // Center the follower
var mouseY = e.clientY - rect.top - (follower.offsetHeight / 2); // Center the follower
// Update the position of the follower
follower.style.transform = `translate(${mouseX}px)`;
});
},
created() {
this.toTotal();
@ -313,12 +308,15 @@ export default {
ceshi(paramObj).then((data) => {
console.log(data);
});
console.log(localStorage.getItem("newsIndex"),'newsIndex');
this.newIndex = +localStorage.getItem("newsIndex") || 0;
// console.log(localStorage.getItem("newsIndex"),'newsIndex');
// this.newIndex = +localStorage.getItem("newsIndex") || 0;
},
data() {
return {
event:'',
index:null,
hoverActive: false,
translateX_hover:0,
num1:770,
num2:0,
num3:0,
@ -361,10 +359,48 @@ export default {
};
},
methods: {
moveFollower(event, index) {
// console.log(event, index);
const follower = document.getElementById('follower');
const button = event.currentTarget; // hover
// console.log(event,'button')
const rect = button.getBoundingClientRect();
// console.log(index,'rect')
// 使 follower
const followerX = rect.left - button.offsetWidth/2 - follower.offsetWidth*2-120;
if(index==0){
follower.style.transform = `translate(-469px)`;
}else if(index==1){
follower.style.transform = `translate(-157px)`;
}
else if(index==2){
follower.style.transform = `translate(157px)`;
}else {
follower.style.transform = `translate(469px)`;
}
// follower
},
// hoverActiveHover(){
// this.hoverActive = !this.hoverActive
// document.getElementById('buttonddd').addEventListener('mousemove', function(e) {
// var follower = document.getElementById('follower');
// // Get the mouse position relative to the container
// var rect = this.getBoundingClientRect();
// console.log(rect);
// var mouseX = e.clientX - rect.left - (follower.offsetWidth / 2); // Center the follower
// this.translateX_hover =mouseX
// // Update the position of the follower
// // follower.style.transform = `translate(${mouseX}px)`;
// });
// },
setNewsActive(item,index) {
console.log(item,index);
this.newIndex = index;
localStorage.setItem('newsIndex',index);
// this.newIndex = index;
// localStorage.setItem('newsIndex',index);
this.$router.push({
name: 'newsDetail',
query:{
@ -377,8 +413,8 @@ export default {
console.log(item.transportMode,index);
this.activeIndex = index;
setTimeout(() => {
// window.location.href= `http://47.119.163.201/#/home/index?companyType=company&companyTransportMode=${item.transportMode}`
window.location.href= `http://192.168.10.54:9081/#/home/index?companyType=company&companyTransportMode=${item.transportMode}`
window.location.href= `http://47.119.163.201/#/home/index?companyType=company&companyTransportMode=${item.transportMode}`
// window.location.href= `http://192.168.10.54:9081/#/home/index?companyType=company&companyTransportMode=${item.transportMode}`
}, 200);

@ -33,7 +33,7 @@
border-radius: 20px;
overflow: hidden;
z-index:999;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 20px 0 rgba(210, 210, 210, 0.2);
}
.platform .el-button {
@ -359,6 +359,7 @@
font-style: normal;
padding-left: 34px;
}
::v-deep .platTable .el-table thead .el-table__cell {
background: #FAFAFA;
color: #151E2C;
@ -408,6 +409,7 @@
border: 1px dashed #B4B4B4;
padding: 20px 20px 20px 20px;
overflow: hidden;
margin-top: 55px;
}
.scrolling-list {
max-width: 286px;
@ -465,6 +467,16 @@
background: #092238;
padding: 35px;
}
.AMZBox img {
opacity: 0;
margin-right: 20px;
transition: all 0.2s ease-in-out;
}
.AMZBox:hover img {
opacity: 1;
margin-right: 0px;
}
.AMZtitle {
color: #FFF;
font-size: 26px;
@ -499,7 +511,9 @@
font-weight: 400;
line-height: 42px; /* 210% */
}
::v-deep .special .el-tabs__header {
margin-bottom: 0;
}
/* 注册流程 */
.flowBox {
width: 200px;

File diff suppressed because it is too large Load Diff

@ -58,7 +58,7 @@
</el-row>
<div>
<div class="AMZ-About">
<div class="AMZ-AboutTitle"> 关于亚马逊</div>
<div class="AMZ-AboutTitle" style="margin-bottom: 40px;"> 关于亚马逊</div>
<div class="AMZ-AboutContent">
亚马逊成立于1995年7月总部在美国西雅图2015亚马逊全球开店业务进入中国旨在借助亚马逊全球资源帮助中国卖家抓住跨境电商新机遇发展出口业务拓展全球市场打造国际品牌目前亚马逊美国加拿大墨西哥英国法国德国意大利西班牙荷兰瑞典比利时日本新加坡澳大利亚印度阿联酋沙特波兰和巴西等19大海外站点已面向中国卖家开放吸引数十万中国卖家入驻
</div>
@ -67,7 +67,7 @@
</div>
<div style="background: #F8F8F8;">
<div class="container" >
<div class="special" style="padding: 80px 0px 80px 40px;">
<div class="special" style="padding: 80px 0px 30px 40px;">
<div class="AMZ-AboutTitle">注册准备</div>
<el-tabs v-model="activeRegistar" >
<el-tab-pane label="注册资料" name="first">
@ -100,9 +100,10 @@
<el-tooltip popper-class="flowContentTipCommonUI" class="flowContentTip" effect="light" placement="top-end">
<img style="width: 20px;height: 20px;" src="@/assets/icons/platform/tips.png" alt="">
<div slot="content">
若收到亚马逊大客户运营经理邮件<br>
需额外补充资料信息请尽快按照要求回复<br>
齐全井符合要求后发放注册链接
<div style="color: #1C1F35;font-size: 20px;font-weight: 500;line-height: 22px; margin-bottom:13px">提示</div>
若收到亚马逊大客户运营经理邮件需额外补充资料信息<br>
请尽快按照要求回复齐全井符合要求后发放注册链接
</div>
</el-tooltip>
</div>
@ -114,6 +115,7 @@
<el-tooltip popper-class="flowContentTipCommonUI" class="flowContentTip" effect="light" placement="top-end">
<img style="width: 20px;height: 20px;" src="@/assets/icons/platform/tips.png" alt="">
<div slot="content">
<div style="color: #1C1F35;font-size: 20px;font-weight: 500;line-height: 22px; margin-bottom:13px">提示</div>
账户创建的邮箱与申请登记时提供的邮箱保持一致<br>
</div>
</el-tooltip>
@ -220,7 +222,9 @@
<style >
.flowContentTipCommonUI {
border: 1px solid #fff !important;
box-shadow: 0px 4px 81.7px #DDD;
filter: drop-shadow(0px 4px 81.7px #DDD);
width: 356px;
/* box-shadow: 0px 4px 81.7px #DDD; */
}
.flowContentTipCommonUI .popper__arrow{
border-top-color: #fff !important;
@ -230,6 +234,9 @@
border-top-color: #fff !important;
border-bottom-color: #fff !important;
}
.el-tooltip__popper {
padding: 28px !important;
}
</style>
<style src="../index.css" scoped>

@ -158,7 +158,7 @@
</div>
</div>
<div style="background-color: #fcfcfc;padding: 80px 0px 70px 36px;" >
<div class="container" style="margin-bottom: 70px;">
<div class="container" style="">
<div class="TSDN-Box-mainTitle" style="margin-bottom: 29px;padding-bottom: 30px;">Amazon SEND空运服务可满足哪些头程需求</div>
<div class="amazon-Box">
<div class="amazon-title">新品测试</div>
@ -168,7 +168,7 @@
<div class="amazon-title">紧急补货</div>
<div class="amazon-content">Amazon SEND空运派送英国站平均8.5派送德国站平均11-13天即可送达可以帮忙卖家在大促期间等情况下紧急补货</div>
</div>
<div class="amazon-Box " style="height: 210px;padding: 60px 0 60px 135px;">
<div class="amazon-Box " style="height: 210px;padding: 60px 0 60px 135px;margin-bottom:0;" >
<el-row class="">
<el-col :span="12" class="flx-justify-between " style="margin-bottom: 70px;">
<div class="flx-justify-between " style="width: 340px">

@ -14,6 +14,7 @@
display: flex;
height: 159px;
align-items: center;
padding-bottom: 2px;
border-bottom: 1px solid #eaecef;
}
.info-item:last-child {

@ -51,8 +51,8 @@ svg:hover path {
left: calc(72% + 2.5px);
}
.Germany .svg7 {
top: calc(32% - 3px);
left: calc(24% );
top: calc(32% - 2px);
left: calc(24% + 1px );
}
.Germany .svg8 {
top: calc(42% + 1px);
@ -72,14 +72,14 @@ svg:hover path {
}
.Germany .svg12 {
top: calc(66% - 4px);
left: calc(27% + 3px);
left: calc(27% + 5px);
}
.Germany .svg13 {
top: calc(64% );
left: calc(35% + 1px);
}
.Germany .svg14 {
top: calc(55% );
top: calc(55% - 1px );
left: calc(44% + 10px);
}
.France .svg1 {
@ -115,8 +115,8 @@ svg:hover path {
left: calc(70% + 1px);
}
.France .svg9 {
top: calc(22% - 1px);
left: calc(5% - 3px);
top: calc(22% - 3px);
left: calc(5% - 1px);
}
.France .svg10 {
top: calc(24.5% - 1px);
@ -127,7 +127,7 @@ svg:hover path {
left: calc(32% - 3px);
}
.France .svg12 {
top: calc(27% - 5px);
top: calc(27% - 7px);
left: calc(48% - 3px);
}
.France .svg13 {
@ -149,7 +149,7 @@ svg:hover path {
}
.France .svg17 {
top: calc(44% - 2px);
left: calc(52% + 3px);
left: calc(52% + 4px);
}
.France .svg18 {
top: calc(51% + 2px);
@ -160,16 +160,16 @@ svg:hover path {
left: calc(21% + 3px);
}
.France .svg19 {
top: calc(57% + 2px);
left: calc(29% + 3px);
top: calc(57% + 0px);
left: calc(29% + 4px);
}
.France .svg20 {
top: calc(57% + 6px);
left: calc(40% + 8px);
}
.France .svg21 {
top: calc(55% + 8px);
left: calc(54.5% + 8px);
top: calc(55% + 10px);
left: calc(54.5% + 9px);
}
.France .svg22 {
top: calc(80% );
@ -181,7 +181,7 @@ svg:hover path {
}
.Britain .svg2 {
top: calc(52% );
left: calc(60% );
left: calc(60% - 2px );
}
.Britain .svg3 {
top: calc(58% );
@ -196,32 +196,32 @@ svg:hover path {
left: calc(46% - 4px );
}
.Britain .svg6 {
top: calc(77% + 0px );
left: calc(57% - 0px );
top: calc(77% - 1px );
left: calc(57% + 2px );
}
.Britain .svg7 {
top: calc(74% - 4px );
left: calc(63% + 4px );
top: calc(74% - 6px );
left: calc(63% + 3px );
}
.Britain .svg8 {
top: calc(88% - 4px );
top: calc(88% - 6px );
left: calc(41% + 2px );
}
.Britain .svg9 {
top: calc(87% - 4px );
top: calc(87% - 6px );
left: calc(63% + 6px );
}
.Britain .svg10 {
top: calc(80% - 5px );
top: calc(80% - 7px );
left: calc(69% + 8px );
}
.Britain .svg14 {
top: calc(92% - 5px );
top: calc(92% - 7px );
left: calc(70% + 8px );
}
.Britain .svg11 {
top: calc(50% - 5px );
left: calc(25% + 8px );
left: calc(25% + 6px );
z-index: 1;
}
@ -243,30 +243,30 @@ svg:hover path {
}
.Japan .svg2 {
top: 37%;
left: 72%;
left: calc(72% - 2px);
}
.Japan .svg3 {
top: 47%;
left: calc(71% + 2px);
left: calc(71% + 0px);
}
.Japan .svg4 {
top: calc(48% - 3px);
left: calc(76% - 2px);
left: calc(76% - 3px);
}
.Japan .svg5 {
top: calc(60% - 0px);
left: calc(70% + 4px);
left: calc(70% + 2px);
}
.Japan .svg6 {
top: calc(62% - 3px);
left: calc(73% + 7px);
top: calc(62% - 5px);
left: calc(73% + 5px);
}
.Japan .svg7 {
top: calc(65% - 0px);
left: calc(61% + 4px);
left: calc(61% + 2px);
}
.Japan .svg8 {
top: calc(70% + 6px);
top: calc(70% + 4px);
left: calc(68% + 5px);
}
.Japan .svg9 {
@ -278,7 +278,7 @@ svg:hover path {
left: calc(57% + 0px);
}
.Japan .svg10 {
top: calc(78% + 7px);
top: calc(78% + 9px);
left: calc(59% + 7px);
}
.Japan .svg11 {
@ -286,7 +286,7 @@ svg:hover path {
left: calc(64% + 7px);
}
.Japan .svg12 {
top: calc(77.5% + 7px);
top: calc(77.5% + 5px);
left: calc(68.5% + 7px);
}
.Japan .svg13 {
@ -326,11 +326,11 @@ svg:hover path {
left: calc(52% + 4px);
}
.Japan .svg22 {
top: calc(94% + 0px);
left: calc(56% + 7px);
top: calc(94% - 2px);
left: calc(56% + 6px);
}
.Japan .svg23 {
top: calc(92% - 3px);
top: calc(92% - 5px);
left: calc(60% + 4px);
}
.Japan .svg24 {
@ -347,10 +347,10 @@ svg:hover path {
}
.Japan .svg27 {
top: calc(98% - 4px);
left: calc(49% + 4px);
left: calc(49% + 5px);
}
.Japan .svg28 {
top: calc(103% - 4px);
top: calc(103% - 2px);
left: calc(49% + 4px);
}
.Japan .svg29 {
@ -366,12 +366,12 @@ svg:hover path {
left: calc(41% - 0px);
}
.Japan .svg32 {
top: calc(85% - 4px);
left: calc(33.5% - 0px);
top: calc(85% - 3px);
left: calc(33.5% + 2px);
}
.Japan .svg33 {
top: calc(96.5% - 4px);
left: calc(35% - 0px);
left: calc(35% + 1px);
}
.Japan .svg34 {
top: calc(99% - 4px);
@ -426,7 +426,7 @@ svg:hover path {
left: 35%;
}
.Canada .svg2 {
top: 24%;
top: calc(24% + 1px);
left: 23%;
}
.Canada .svg3 {
@ -439,7 +439,7 @@ svg:hover path {
}
.Canada .svg5 {
top: 73%;
left: 35%;
left: calc(35% + 1px);
}
.Canada .svg6 {
top: 73%;
@ -494,7 +494,7 @@ svg:hover path {
left: calc(46% - 2px);
}
.America .svg6 {
top: calc(24.5% + 1px);
top: calc(24.5% + 2px);
left: calc(12.5% - 0px);
}
.America .svg7 {
@ -514,8 +514,8 @@ svg:hover path {
left: calc(47% - 1px);
}
.America .svg11 {
top: calc(32% + 0px);
left: calc(11% - 0px);
top: calc(32% + 1px);
left: calc(11% + 1px);
}
.America .svg12 {
top: calc(33.5% + 1px);
@ -582,7 +582,7 @@ svg:hover path {
left: calc(53% - 2px);
}
.America .svg28 {
top: calc(35.5% - 0px);
top: calc(35.5% + 1px);
left: calc(58% - 2px);
}
.America .svg29 {
@ -619,7 +619,7 @@ svg:hover path {
}
.America .svg37 {
top: calc(43% - 8px);
left: calc(65.5% - 8px);
left: calc(65.5% - 10px);
}
.America .svg38 {
top: calc(38.5% - 5px);
@ -631,7 +631,7 @@ svg:hover path {
}
.America .svg40 {
top: calc(37% - 7px);
left: calc(69% - 0px);
left: calc(69% - 2px);
}
.America .svg41 {
top: calc(33.5% - 7px);
@ -671,11 +671,11 @@ svg:hover path {
}
.Spain .svg1 {
top: calc(30% - 0px);
left: calc(10% - 0px);
left: calc(10% + 1px);
}
.Spain .svg2 {
top: calc(31% - 0px);
left: calc(23% - 0px);
top: calc(31% + 2px);
left: calc(23% + 2px);
}
.Spain .svg3 {
top: calc(32.5% - 0px);
@ -720,7 +720,7 @@ svg:hover path {
}
.Spain .svg13 {
top: calc(34.5% - 1px);
left: calc(52.5% - 1px);
left: calc(52.5% - 2px);
}
.Spain .svg14 {
top: calc(40.5% - 0px);
@ -728,7 +728,7 @@ svg:hover path {
}
.Spain .svg15 {
top: calc(33% - 0px);
left: calc(46.5% - 3px);
left: calc(46.5% - 2px);
}
.Spain .svg16 {
top: calc(60.5% - 0px);
@ -753,11 +753,11 @@ svg:hover path {
z-index: 1;
}
.Italy .svg5 {
top: calc(13% - 1px);
left: calc(43.5% - 1px);
top: calc(13% - 0px);
left: calc(43.5% - 2px);
}
.Italy .svg6 {
top: calc(13% - 1px);
top: calc(13% + 2px);
left: calc(53.5% - 1px);
}
.Italy .svg7 {

Loading…
Cancel
Save