proxy代理和request修改
parent
13e0850229
commit
c3f1d01ef0
@ -0,0 +1,7 @@
|
|||||||
|
# .env 文件
|
||||||
|
VUE_APP_URL=http://192.168.10.54:9100/v1/v1
|
||||||
|
|
||||||
|
# title
|
||||||
|
VITE_GLOB_APP_TITLE = AAF 美通官网
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
@ -1,8 +1,16 @@
|
|||||||
import { fetch,get } from '@/utils/request.js';
|
import request from '@/utils/request.js';
|
||||||
|
// 请求方法
|
||||||
|
// 'getlist': function (data) {
|
||||||
|
// return request.get('/api/getdata/getlist', data, {}, 'pro')
|
||||||
|
// },
|
||||||
|
// 'getDIST': function (options) {
|
||||||
|
// return request.post('/api/getdata/getDIST', {}, options, 'pro')
|
||||||
|
// },
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @name 首页模块
|
* @name 首页模块
|
||||||
*/
|
*/
|
||||||
// 获取地址列表
|
// 获取地址列表
|
||||||
export const ceshi =(params) => {
|
export const ceshi =(params) => {
|
||||||
return fetch('/sys/baseDict/queryChannleDict',params);
|
return request.get('/sys/baseDict/queryChannleDict',params,{},'pro');
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,233 +0,0 @@
|
|||||||
<script>
|
|
||||||
import Earth from "@/view/home/homeComponents/earth.vue";
|
|
||||||
import Amazon from "@/view/home/homeComponents/Amazon";
|
|
||||||
import beforeDelivery from "@/view/home/homeComponents/beforeDelivery";
|
|
||||||
import DulyReceived from "@/view/home/homeComponents/dulyReceived ";
|
|
||||||
import LocalAdded from "@/view/home/homeComponents/LocalAdded";
|
|
||||||
import ForeignTransport from "@/view/home/homeComponents/foreignTransport";
|
|
||||||
import DomesticCustomsDeclaration from "@/view/home/homeComponents/domesticCustomsDeclaration";
|
|
||||||
import TrunkTransport from "@/view/home/homeComponents/trunkTransport";
|
|
||||||
import Footer from "@/view/home/homeComponents/footer";
|
|
||||||
import Switcher from "@/view/home/homeComponents/switcher";
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Index-1 component
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
Earth,
|
|
||||||
Amazon,
|
|
||||||
beforeDelivery,
|
|
||||||
DulyReceived ,
|
|
||||||
LocalAdded,
|
|
||||||
ForeignTransport,
|
|
||||||
DomesticCustomsDeclaration,
|
|
||||||
TrunkTransport,
|
|
||||||
Footer,
|
|
||||||
Switcher
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/**
|
|
||||||
* Toggle menu
|
|
||||||
*/
|
|
||||||
toggleMenu() {
|
|
||||||
document.getElementById("navbarCollapse").classList.toggle("show");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<!-- STRAT NAVBAR -->
|
|
||||||
<nav
|
|
||||||
class="navbar navbar-expand-lg fixed-top navbar-white navbar-custom sticky sticky-dark"
|
|
||||||
id="navbar"
|
|
||||||
>
|
|
||||||
<div class="container">
|
|
||||||
<!-- LOGO -->
|
|
||||||
<a class="navbar-brand logo text-uppercase" href="/">
|
|
||||||
<i class="mdi mdi-alien"></i>Hiric
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="navbar-toggler"
|
|
||||||
type="button"
|
|
||||||
data-toggle="collapse"
|
|
||||||
data-target="#navbarCollapse"
|
|
||||||
aria-controls="navbarCollapse"
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-label="Toggle navigation"
|
|
||||||
@click="toggleMenu()"
|
|
||||||
>
|
|
||||||
<i class="mdi mdi-menu"></i>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
||||||
<ul
|
|
||||||
class="navbar-nav navbar-center"
|
|
||||||
id="mySidenav"
|
|
||||||
>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a
|
|
||||||
v-scroll-to="{ el:'#home' }"
|
|
||||||
class="nav-link"
|
|
||||||
data-scroll-spy-id="home"
|
|
||||||
href="javascript: void(0);"
|
|
||||||
>Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a
|
|
||||||
v-scroll-to="{ el:'#features', offset: -5 }"
|
|
||||||
class="nav-link"
|
|
||||||
data-scroll-spy-id="features"
|
|
||||||
href="javascript: void(0);"
|
|
||||||
>Features</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a
|
|
||||||
v-scroll-to="{ el:'#services', offset: -5 }"
|
|
||||||
class="nav-link"
|
|
||||||
data-scroll-spy-id="services"
|
|
||||||
href="javascript: void(0);"
|
|
||||||
>Services</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a
|
|
||||||
v-scroll-to="{ el:'#about', offset: -5 }"
|
|
||||||
class="nav-link"
|
|
||||||
data-scroll-spy-id="about"
|
|
||||||
href="javascript: void(0);"
|
|
||||||
>About</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a
|
|
||||||
v-scroll-to="{ el:'#pricing', offset: -5 }"
|
|
||||||
class="nav-link"
|
|
||||||
data-scroll-spy-id="pricing"
|
|
||||||
href="javascript: void(0);"
|
|
||||||
>Pricing</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a
|
|
||||||
v-scroll-to="{ el:'#blog'}"
|
|
||||||
class="nav-link"
|
|
||||||
data-scroll-spy-id="blog"
|
|
||||||
href="javascript: void(0);"
|
|
||||||
>Blog</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a
|
|
||||||
v-scroll-to="{ el:'#contact' }"
|
|
||||||
class="nav-link"
|
|
||||||
data-scroll-spy-id="contact"
|
|
||||||
href="javascript: void(0);"
|
|
||||||
>Contact</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="nav-button ml-auto">
|
|
||||||
<ul class="nav navbar-nav navbar-right">
|
|
||||||
<li>
|
|
||||||
<button type="button" class="btn btn-custom navbar-btn btn-rounded">Try it Free</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<!-- END NAVBAR -->
|
|
||||||
<div v-scroll-spy>
|
|
||||||
<!--START HOME-->
|
|
||||||
<section
|
|
||||||
class="section bg-home home-half"
|
|
||||||
id="home"
|
|
||||||
style="background-size: cover;background-position: center;"
|
|
||||||
:style="{'background': 'url(' + require('@/assets/images/bg-home.jpg') + ')'}"
|
|
||||||
>
|
|
||||||
<!-- <div class="bg-overlay"></div> -->
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-8 offset-lg-2 text-white text-center">
|
|
||||||
<h4 class="home-small-title">Awesome Design</h4>
|
|
||||||
<h1 class="home-title">We love make things amazing and simple</h1>
|
|
||||||
<p class="padding-t-15 home-desc mx-auto">
|
|
||||||
Maecenas class semper class semper sollicitudin lectus lorem
|
|
||||||
iaculis imperdiet aliquam vehicula tempor auctor curabitur pede
|
|
||||||
aenean ornare.
|
|
||||||
</p>
|
|
||||||
<p class="play-shadow margin-l-r-auto">
|
|
||||||
<a v-b-modal.modal class="play-btn video-play-icon">
|
|
||||||
<i class="mdi mdi-play text-center"></i>
|
|
||||||
</a>
|
|
||||||
<b-modal id="modal" hide-footer size="lg" centered header-close-variant="white">
|
|
||||||
<youtube video-id="lG0Ys-2d4MA" ref="youtube" width="900" height="500"></youtube>
|
|
||||||
</b-modal>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!--END HOME-->
|
|
||||||
|
|
||||||
<section class="section-sm bg-light">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="client-images my-3 my-md-0">
|
|
||||||
<img
|
|
||||||
src="@/assets/images/clients/1.png"
|
|
||||||
alt="logo-img"
|
|
||||||
class="mx-auto img-fluid d-block"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="client-images my-3 my-md-0">
|
|
||||||
<img
|
|
||||||
src="@/assets/images/clients/2.png"
|
|
||||||
alt="logo-img"
|
|
||||||
class="mx-auto img-fluid d-block"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="client-images my-3 my-md-0">
|
|
||||||
<img
|
|
||||||
src="@/assets/images/clients/3.png"
|
|
||||||
alt="logo-img"
|
|
||||||
class="mx-auto img-fluid d-block"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="client-images my-3 my-md-0">
|
|
||||||
<img
|
|
||||||
src="@/assets/images/clients/4.png"
|
|
||||||
alt="logo-img"
|
|
||||||
class="mx-auto img-fluid d-block"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<Earth />
|
|
||||||
<Amazon />
|
|
||||||
<beforeDelivery />
|
|
||||||
<dulyReceived />
|
|
||||||
<LocalAdded />
|
|
||||||
<ForeignTransport />
|
|
||||||
<DomesticCustomsDeclaration />
|
|
||||||
<TrunkTransport />
|
|
||||||
<Footer />
|
|
||||||
<Switcher />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import vue from 'vue'
|
||||||
|
// 全局通知事件
|
||||||
|
export default new vue({});
|
||||||
@ -1,157 +1,157 @@
|
|||||||
import axios from 'axios';
|
import axios from 'axios'
|
||||||
|
import Bus from './bus'
|
||||||
|
import util from './util.js';
|
||||||
|
|
||||||
axios.defaults.timeout = 5000;
|
import ViewUI from 'view-design';
|
||||||
axios.defaults.baseURL ='http://192.168.10.53:9100/v1/v1'; //填写域名
|
|
||||||
// axios.defaults.baseURL ='http://47.119.163.201:81/#/'; //填写域名
|
|
||||||
|
|
||||||
//http request 拦截器
|
// http request 拦截器
|
||||||
axios.interceptors.request.use(
|
axios.interceptors.response.use(
|
||||||
config => {
|
response => {
|
||||||
config.data = JSON.stringify(config.data);
|
return response
|
||||||
config.headers = {
|
|
||||||
'Content-Type':'application/x-www-form-urlencoded'
|
|
||||||
}
|
|
||||||
return config;
|
|
||||||
},
|
},
|
||||||
|
//接口错误状态处理，也就是说无响应时的处理
|
||||||
error => {
|
error => {
|
||||||
return Promise.reject(error);
|
if (error.response.status == 403) {
|
||||||
}
|
Bus.$emit('Illegalcalls');
|
||||||
);
|
} else if (error.response.status == 400) {
|
||||||
|
ViewUI.Notice.error({ title: 'Service Error 400', desc: '参数错误，请检查参数信息' });
|
||||||
//响应拦截器即异常处理
|
} else if (error.response.status == 404) {
|
||||||
axios.interceptors.response.use(response => {
|
ViewUI.Notice.error({ title: 'Service Error 404', desc: '未找到接口，请检查链接地址' });
|
||||||
return response
|
} else if (error.response.status == 500) {
|
||||||
}, err => {
|
ViewUI.Notice.error({ title: 'Service Error 500', desc: '服务器出现错误' });
|
||||||
if (err && err.response) {
|
} else if (error.response.status == 502) {
|
||||||
switch (err.response.status) {
|
ViewUI.Notice.error({ title: 'Service Error 502', desc: '服务器响应出现错误' });
|
||||||
case 400:
|
|
||||||
console.log('错误请求')
|
|
||||||
break;
|
|
||||||
case 401:
|
|
||||||
console.log('未授权，请重新登录')
|
|
||||||
break;
|
|
||||||
case 403:
|
|
||||||
console.log('拒绝访问')
|
|
||||||
break;
|
|
||||||
case 404:
|
|
||||||
console.log('请求错误,未找到该资源')
|
|
||||||
break;
|
|
||||||
case 405:
|
|
||||||
console.log('请求方法未允许')
|
|
||||||
break;
|
|
||||||
case 408:
|
|
||||||
console.log('请求超时')
|
|
||||||
break;
|
|
||||||
case 500:
|
|
||||||
console.log('服务器端出错')
|
|
||||||
break;
|
|
||||||
case 501:
|
|
||||||
console.log('网络未实现')
|
|
||||||
break;
|
|
||||||
case 502:
|
|
||||||
console.log('网络错误')
|
|
||||||
break;
|
|
||||||
case 503:
|
|
||||||
console.log('服务不可用')
|
|
||||||
break;
|
|
||||||
case 504:
|
|
||||||
console.log('网络超时')
|
|
||||||
break;
|
|
||||||
case 505:
|
|
||||||
console.log('http版本不支持该请求')
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.log(`连接错误${err.response.status}`)
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
console.log('连接到服务器失败')
|
ViewUI.Notice.error({ title: 'Service Error' + error.response.status, desc: '链接异常，请检查错误信息' });
|
||||||
}
|
}
|
||||||
return Promise.resolve(err.response)
|
return Promise.reject(error) // 返回接口返回的错误信息
|
||||||
})
|
// return Promise.reject(error.response.status) // 返回接口返回的错误信息
|
||||||
|
})
|
||||||
|
|
||||||
|
let AxiosEventCatch = {};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 封装get方法
|
* 隐藏 loading 方法
|
||||||
* @param url
|
*
|
||||||
* @param data
|
* @param {*} id
|
||||||
* @returns {Promise}
|
* @memberof Request
|
||||||
*/
|
*/
|
||||||
|
const hideLoading = function (id) {
|
||||||
export function fetch(url,params={}){
|
delete AxiosEventCatch[id];
|
||||||
return new Promise((resolve,reject) => {
|
if (Object.keys(AxiosEventCatch).length == 0) {
|
||||||
axios.get(url,{
|
Bus.$emit('loading-change', false)
|
||||||
params:params
|
}
|
||||||
})
|
|
||||||
.then(response => {
|
|
||||||
resolve(response.data);
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
reject(err)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const Event = function (options) {
|
||||||
|
console.log(options)
|
||||||
|
var id = util.Guid();
|
||||||
|
if (options.loading !== false) {
|
||||||
|
AxiosEventCatch[id] = '';
|
||||||
|
Bus.$emit('loading-change', true)
|
||||||
|
}
|
||||||
|
var baseUrlPath = ''
|
||||||
|
// if (process.env.NODE_ENV == 'development') {
|
||||||
|
// try {
|
||||||
|
// baseUrlPath = window.WIN_COMFIG.service[options.reqType]
|
||||||
|
// } catch (error) {
|
||||||
|
// baseUrlPath = window.WIN_COMFIG.service.pro
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// baseUrlPath = location.protocol
|
||||||
|
if(options.reqType == 'pro'){
|
||||||
|
console.log('baseUrlPath',process.env.VUE_APP_URL)
|
||||||
|
baseUrlPath = `${process.env.VUE_APP_URL}`
|
||||||
|
}else {
|
||||||
|
baseUrlPath = `${process.env.VUE_APP_URL}`
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
// }
|
||||||
* 封装post请求
|
|
||||||
* @param url
|
|
||||||
* @param data
|
|
||||||
* @returns {Promise}
|
|
||||||
*/
|
|
||||||
|
|
||||||
export function post(url,data = {}){
|
var _url = baseUrlPath + options.url;
|
||||||
return new Promise((resolve,reject) => {
|
if(options.params) {
|
||||||
axios.post(url,data)
|
var _params = JSON.parse(JSON.stringify(options.params));
|
||||||
.then(response => {
|
_url = _url.replace(/\{\w+\}/g, function (i) {
|
||||||
resolve(response.data);
|
var _src = i.replace('{', '').replace('}', '');
|
||||||
},err => {
|
if (_params.hasOwnProperty(_src)) {
|
||||||
reject(err)
|
var _value = _params[_src];
|
||||||
})
|
delete _params[_src];
|
||||||
})
|
return _value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}else {
|
||||||
|
_params = {}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 封装patch请求
|
|
||||||
* @param url
|
|
||||||
* @param data
|
|
||||||
* @returns {Promise}
|
|
||||||
*/
|
|
||||||
|
|
||||||
export function patch(url,data = {}){
|
return axios({
|
||||||
return new Promise((resolve,reject) => {
|
method: options.type,
|
||||||
axios.patch(url,data)
|
url: _url,
|
||||||
.then(response => {
|
params: _params,
|
||||||
resolve(response.data);
|
data: options.data
|
||||||
},err => {
|
}).then(function (res) {
|
||||||
reject(err)
|
if (options.loading !== false) {
|
||||||
})
|
hideLoading(id);
|
||||||
})
|
}
|
||||||
|
return res.data;
|
||||||
|
}).catch(function (err) {
|
||||||
|
if (options.loading !== false) {
|
||||||
|
hideLoading(id);
|
||||||
|
}
|
||||||
|
throw err.response
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 封装put请求
|
* apis 接口调用参数
|
||||||
* @param url
|
*
|
||||||
* @param data
|
* @param {String} url 链接地址
|
||||||
* @returns {Promise}
|
* @param {Object} params Url 传参对象
|
||||||
|
* @param {Object} data PostData 传参对象
|
||||||
|
* @param {String} reqType 开发模式下, 链接地址指向
|
||||||
|
* @param {Blob} loading 是否显示loading 开关
|
||||||
|
* @return {axios} 接口异步对象
|
||||||
*/
|
*/
|
||||||
|
post(url, params, data, reqType, loading) {
|
||||||
export function put(url,data = {}){
|
var _data = {};
|
||||||
return new Promise((resolve,reject) => {
|
_data.type = 'post';
|
||||||
axios.put(url,data)
|
_data.data = data || {};
|
||||||
.then(response => {
|
_data.reqType = reqType;
|
||||||
resolve(response.data);
|
_data.params = params;
|
||||||
},err => {
|
_data.url = url;
|
||||||
reject(err)
|
_data.loading = loading
|
||||||
})
|
return Event(_data)
|
||||||
})
|
},
|
||||||
}
|
get(url, params, data, reqType, loading) {
|
||||||
|
var _data = {};
|
||||||
/**
|
_data.type = 'get';
|
||||||
* 下面是获取数据的接口
|
_data.data = data || {};
|
||||||
*/
|
_data.reqType = reqType;
|
||||||
export const ceshi = {
|
_data.params = params;
|
||||||
exam: function(paramObj){
|
_data.url = url;
|
||||||
return fetch('/sys/baseDict/queryChannleDict',paramObj);
|
_data.loading = loading
|
||||||
|
return Event(_data)
|
||||||
|
},
|
||||||
|
put(url, params, data, reqType, loading) {
|
||||||
|
var _data = {};
|
||||||
|
_data.type = 'put';
|
||||||
|
_data.data = data || {};
|
||||||
|
_data.reqType = reqType;
|
||||||
|
_data.params = params;
|
||||||
|
_data.url = url;
|
||||||
|
_data.loading = loading
|
||||||
|
return Event(_data)
|
||||||
|
},
|
||||||
|
delete(url, params, data, reqType, loading) {
|
||||||
|
var _data = {};
|
||||||
|
_data.type = 'delete';
|
||||||
|
_data.data = data || {};
|
||||||
|
_data.reqType = reqType;
|
||||||
|
_data.params = params;
|
||||||
|
_data.url = url;
|
||||||
|
_data.loading = loading
|
||||||
|
return Event(_data)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -0,0 +1,328 @@
|
|||||||
|
.platformBackground {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 1000px;
|
||||||
|
background: url('../../assets/images/home/background.png') no-repeat center/cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform .el-button:hover {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.platform .el-button.active:hover {
|
||||||
|
background: #00AFAF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform .el-button.active .btn-text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.platform .btn-text {
|
||||||
|
color: #24303E;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
.platform .button-group {
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
/* 按钮海运下单切换 */
|
||||||
|
.platform .button-group {
|
||||||
|
display: flex;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index:999;
|
||||||
|
background-color: #FFE7CE;
|
||||||
|
margin-left: 25px;
|
||||||
|
/* width: 312px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform .el-button {
|
||||||
|
flex: 1;
|
||||||
|
padding: 26px 0;
|
||||||
|
margin-left: 0px !important;
|
||||||
|
background: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none; /* 移除单独的按钮边框 */
|
||||||
|
border-radius: 0px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
/* 为按钮添加右边框 */
|
||||||
|
}
|
||||||
|
.platform .btn-text {
|
||||||
|
/* border-right: 1px solid #FFE7CE; */
|
||||||
|
height: 71px;
|
||||||
|
width: 236px;
|
||||||
|
padding: 0px 82px;
|
||||||
|
line-height: 71px;
|
||||||
|
color: var(--Brand-main-blue-1, #1A1E31);
|
||||||
|
font-family: "DingTalk JinBuTi";
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.platform .el-button:last-child div {
|
||||||
|
border-right: none !important; /* 最后一个按钮不需要右边框 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform .el-button.active {
|
||||||
|
color: white;
|
||||||
|
/* background-color: #3498db; */
|
||||||
|
background: #00AFAF;
|
||||||
|
z-index: 1; /* 为了在激活状态下覆盖相邻按钮的边框 */
|
||||||
|
}
|
||||||
|
.platform .el-button:hover {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* what service do i provice */
|
||||||
|
.platform .service-text-bg {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
z-index:0;
|
||||||
|
}
|
||||||
|
.platform .service-text {
|
||||||
|
position: relative;
|
||||||
|
z-index:0;
|
||||||
|
|
||||||
|
color: #151E2C;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 40px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 86.142px; /* 215.355% */
|
||||||
|
}
|
||||||
|
.platform .service-text div{
|
||||||
|
display: inline-block;
|
||||||
|
z-index: 666;
|
||||||
|
|
||||||
|
}
|
||||||
|
.platform .service-text i::after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute; /* Positions the pseudo-element in relation to the .service-text */
|
||||||
|
bottom: 20px;
|
||||||
|
right: 43.5%;
|
||||||
|
width: 165px;
|
||||||
|
height: 15px;
|
||||||
|
z-index:-1;
|
||||||
|
background-color: #00AFAF; /* Color of the underline */
|
||||||
|
}
|
||||||
|
.platform .service .service-text .serviceNews::after {
|
||||||
|
content: "";
|
||||||
|
right: 43.5%;
|
||||||
|
}
|
||||||
|
.platform .service .service-content {
|
||||||
|
display: flex;
|
||||||
|
width: 709px;
|
||||||
|
height: 172px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: rgba(21, 30, 44, 0.50);
|
||||||
|
text-align: center;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 32px; /* 177.778% */
|
||||||
|
}
|
||||||
|
/* 自营仓 */
|
||||||
|
.buttonPropsBox {
|
||||||
|
width: 305px;
|
||||||
|
height: 30px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border: 1px solid #E7E7E7;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 37px ;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.proprietaryImg {
|
||||||
|
width: 404px;
|
||||||
|
height: 436px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 16px;
|
||||||
|
margin-right: 57px;
|
||||||
|
background: linear-gradient(235deg, rgba(15, 22, 48, 0.00) 0%, rgba(10, 10, 41, 0.90) 95.54%);
|
||||||
|
}
|
||||||
|
.activeContrySpan {
|
||||||
|
color: #151E2C;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 24px; /* 120% */
|
||||||
|
}
|
||||||
|
.activeCapitalSpan {
|
||||||
|
color: #9D9D9D;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 28px; /* 200% */
|
||||||
|
}
|
||||||
|
.proprietary-active {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
/* 服务功能 */
|
||||||
|
.serviceBoxTitle>span{
|
||||||
|
margin-right: 28px;
|
||||||
|
}
|
||||||
|
.serviceBoxTitle span {
|
||||||
|
color: #151E2C;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 86.142px; /* 358.925% */
|
||||||
|
}
|
||||||
|
.serviceBoxContent {
|
||||||
|
display: flex;
|
||||||
|
width: 545px;
|
||||||
|
height: 46px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #151E2C;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 28px; /* 200% */
|
||||||
|
}
|
||||||
|
.serviceBoxLine {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #8D8D8D;
|
||||||
|
opacity: 0.2;
|
||||||
|
margin-top: 58px;
|
||||||
|
}
|
||||||
|
.serviceBoxEnd {
|
||||||
|
width: 740px;
|
||||||
|
height: 70px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #00AFAF;
|
||||||
|
color: #FFF;
|
||||||
|
font-family: "PingFang SC";
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 28px; /* 155.556% */
|
||||||
|
padding: 49px 200px 49px 100px;
|
||||||
|
}
|
||||||
|
.serviceBoxEnd i {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
}
|
||||||
|
/* 运输流程 */
|
||||||
|
.transportationProcess {
|
||||||
|
width: 416px;
|
||||||
|
height: 96px;
|
||||||
|
padding: 40px 17px 0;
|
||||||
|
border-top: 1px solid #e1e3e6;
|
||||||
|
}
|
||||||
|
.transportationProcess img {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
.transportationProTitle {
|
||||||
|
color: #898989;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 24px; /* 100% */
|
||||||
|
opacity: 0.3;
|
||||||
|
margin-bottom: 13px;
|
||||||
|
}
|
||||||
|
.transportationProContent {
|
||||||
|
color: #151E2C;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 20px; /* 100% */
|
||||||
|
}
|
||||||
|
/* sea */
|
||||||
|
/* 参考 */
|
||||||
|
.reference {
|
||||||
|
border-top: 1px solid #e1e3e6;
|
||||||
|
padding: 50px 40px;
|
||||||
|
}
|
||||||
|
.referenceContry {
|
||||||
|
color: #151E2C;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 20px; /* 83.333% */
|
||||||
|
}
|
||||||
|
.referenceContent {
|
||||||
|
color: #4D5563;
|
||||||
|
text-align: center;
|
||||||
|
font-family: "PingFang SC";
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 20px; /* 83.333% */
|
||||||
|
}
|
||||||
|
.ServiceLineBox {
|
||||||
|
width: 520px;
|
||||||
|
height: 227px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: #FAFAFA;
|
||||||
|
padding: 32px 37px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.ServiceLineBox .el-tabs__item {
|
||||||
|
width: 100px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 35px; /* 150% */
|
||||||
|
}
|
||||||
|
.ServiceLineBox .ServiceLineTitle {
|
||||||
|
color: #151E2C;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 24px; /* 109.091% */
|
||||||
|
margin-bottom: 34px;
|
||||||
|
}
|
||||||
|
/* road */
|
||||||
|
.referenceRoad {
|
||||||
|
position: relative;
|
||||||
|
width: 584px;
|
||||||
|
height: 200px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: linear-gradient(235deg, rgba(15, 22, 48, 0.00) 0%, rgba(10, 10, 41, 0.90) 95.54%);
|
||||||
|
}
|
||||||
|
.referenceRoadContry {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 72px;
|
||||||
|
left: 34px;
|
||||||
|
color: #FFF;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 28px; /* 140% */
|
||||||
|
}
|
||||||
|
.referenceRoadContent {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 30px;
|
||||||
|
left: 34px;
|
||||||
|
color: #FFF;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 36px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 28px; /* 77.778% */
|
||||||
|
}
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="footerBottom">
|
||||||
|
<div class="platformBackground"></div>
|
||||||
|
<div class="platform">
|
||||||
|
<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>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Index-1 component
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name:"platform",
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
activeName: 'second',
|
||||||
|
activeIndex: 0, // 默认选中第一个按钮
|
||||||
|
buttons: [
|
||||||
|
{ label: '亚马逊仓库地址',transportMode:'OCEAN' },
|
||||||
|
{ label: '仓库地址分布图',transportMode:'AIR' },
|
||||||
|
{ label: 'AMAZON注册',transportMode:'RAIL' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(tab, event) {
|
||||||
|
console.log(tab, event);
|
||||||
|
},
|
||||||
|
setActive(item,index) {
|
||||||
|
if(index === 0){
|
||||||
|
this.$router.push({
|
||||||
|
name:'platform'
|
||||||
|
})
|
||||||
|
}else if(index === 1){
|
||||||
|
this.$router.push({
|
||||||
|
name:'warehouseMap'
|
||||||
|
})
|
||||||
|
}else if(index === 2){
|
||||||
|
this.$router.push({
|
||||||
|
name:'AMAZON'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// this.activeIndex = index;
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style src="./index.css" scoped></style>
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="footerBottom">
|
||||||
|
<div class="platformBackground"></div>
|
||||||
|
<div class="platform">
|
||||||
|
<!-- 美通海外仓 -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Index-1 component
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name:"sea",
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
activeName:'first',
|
||||||
|
activeIndex: 2, // 默认选中第一个按钮
|
||||||
|
buttons: [
|
||||||
|
{ label: '亚马逊仓库地址',transportMode:'OCEAN' },
|
||||||
|
{ label: '仓库地址分布图',transportMode:'AIR' },
|
||||||
|
{ label: 'AMAZON注册',transportMode:'RAIL' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setActive(item,index) {
|
||||||
|
if(index === 0){
|
||||||
|
this.$router.push({
|
||||||
|
name:'platform'
|
||||||
|
})
|
||||||
|
}else if(index === 1){
|
||||||
|
this.$router.push({
|
||||||
|
name:'warehouseMap'
|
||||||
|
})
|
||||||
|
}else if(index === 2){
|
||||||
|
this.$router.push({
|
||||||
|
name:'AMAZON'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// this.activeIndex = index;
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style src="../index.css" scoped>
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="footerBottom">
|
||||||
|
<div class="platformBackground"></div>
|
||||||
|
<div class="platform">
|
||||||
|
<!-- 美通海外仓 -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</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: 'AMAZON注册',transportMode:'RAIL' }
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setActive(item,index) {
|
||||||
|
if(index === 0){
|
||||||
|
this.$router.push({
|
||||||
|
name:'platform'
|
||||||
|
})
|
||||||
|
}else if(index === 1){
|
||||||
|
this.$router.push({
|
||||||
|
name:'warehouseMap'
|
||||||
|
})
|
||||||
|
}else if(index === 2){
|
||||||
|
this.$router.push({
|
||||||
|
name:'AMAZON'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// this.activeIndex = index;
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style src="../index.css" scoped>
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue