You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
663 lines
19 KiB
663 lines
19 KiB
<template>
|
|
<!-- colto-section -->
|
|
<footer class="footer" @click="toggleMenu($event,2)">
|
|
<div class="content">
|
|
<div class="footer-upper-section">
|
|
<!-- logo -->
|
|
<div class="footer-upper-section-top">
|
|
<div class="footer-logo">
|
|
<div style="width: 89px; height: 44px">
|
|
<img
|
|
:src="appConfig.foot_logo"
|
|
alt="logo"
|
|
style="width: 200px; height: 100%;max-width: 200px; object-fit: contain;"
|
|
/>
|
|
</div>
|
|
<div style="color: #000;font-size: 16px;margin-top: 10px;">{{ appConfig.copyright }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-upper-section-lang">
|
|
<!-- <button class="navbar-toggler lang_now" type="button"
|
|
data-toggle="collapse" data-target="#lang_menu"
|
|
aria-controls="lang_menu" aria-expanded="false" aria-label="Toggle navigation">{{ nativeLang }}
|
|
</button> -->
|
|
|
|
<button class="lang_now" @click="toggleMenu">
|
|
<img :src="langer" style="border-radius: 20px;width:24px;height:24px;" />
|
|
{{ nativeLang }}
|
|
</button>
|
|
|
|
<div class="lang_menu" id="lang_menu" :class="showMenu?'show':'hide'">
|
|
<div class="item" v-for="(item, index) in langList" :key="index" @click.prevent="chooseNative(item.value)">
|
|
<div class="flag-img"><img :src="item.url" mode=""/></div>
|
|
<div class="txt">{{ item.label }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-upper-section-list">
|
|
<!-- service -->
|
|
<div class="service" v-if="service.length>0">
|
|
<div class="item" style="width: 100%;text-align: left">
|
|
<p class="item_p" style="font-size: 20px;color: #000;">{{ $t("common.service") }}</p>
|
|
<p class="foot_p" v-for="(items,index) in service" :key="index">
|
|
<span class="serviceText" @click="Jump(items.url)">{{items.label}}</span>
|
|
</p>
|
|
<!-- <p class="foot_p" >
|
|
<span class="serviceText" @click="Jump(service[0].url)">{{service[0].label}}</span>
|
|
</p>
|
|
<p class="foot_p" >
|
|
<span class="serviceText" @click="Jump(service[1].url)">{{service[1].label}}</span>
|
|
</p>
|
|
<p class="foot_p" >
|
|
<span class="serviceText" @click="Jump(service[2].url)">{{service[2].label}}</span>
|
|
</p> -->
|
|
<!-- <p class="foot_p" >
|
|
<span class="serviceText" @click="Jump(service[3].url)">{{service[3].label}}</span>
|
|
</p> -->
|
|
<!-- <p class="foot_p" >
|
|
<span class="serviceText" @click="Jump(service[4].url)">{{service[4].label}}</span>
|
|
</p> -->
|
|
<!-- <router-link :to="service[0].url">{{
|
|
service[0].label
|
|
}}</router-link>
|
|
</p>
|
|
<p class="foot_p" >
|
|
<router-link :to="service[1].url">{{
|
|
service[1].label
|
|
}}</router-link>
|
|
</p>
|
|
<p class="foot_p" >
|
|
<router-link :to="service[2].url">{{
|
|
service[2].label
|
|
}}</router-link> -->
|
|
<!-- <router-link :to="service[3].url">{{ service[3].label }}</router-link> -->
|
|
</p>
|
|
<!-- <p class="foot_p" >
|
|
<router-link :to="service[3].url">{{
|
|
service[3].label
|
|
}}</router-link>
|
|
</p> -->
|
|
</div>
|
|
</div>
|
|
<!-- college -->
|
|
<div class="college" style="margin:0 119px;" v-if="college.length>0">
|
|
<div class="item item1" style="width: 100%;text-align: left">
|
|
<p class="item_p" style="font-size: 20px;color: #000;">{{ $t("common.college") }}</p>
|
|
<p class="foot_p" v-for="(item,index) in college" :key="index">
|
|
<span class="serviceText" @click="Jump(item.url)">{{item.label}}</span>
|
|
</p>
|
|
<!-- <p class="foot_p">
|
|
<span class="serviceText" @click="Jump(college[0].url)">{{college[0].label}}</span>
|
|
</p>
|
|
<p class="foot_p">
|
|
<span class="serviceText" @click="Jump(college[1].url)">{{college[1].label}}</span>
|
|
</p>
|
|
<p class="foot_p">
|
|
<span class="serviceText" @click="Jump(college[2].url)">{{college[2].label}}</span>
|
|
</p>
|
|
<p class="foot_p">
|
|
<span class="serviceText" @click="Jump(college[3].url)">{{college[3].label}}</span>
|
|
</p> -->
|
|
<!-- <p class="foot_p" >
|
|
<router-link :to="college[0].url">{{
|
|
college[0].label
|
|
}}</router-link>
|
|
</p>
|
|
<p class="foot_p" >
|
|
<router-link :to="college[1].url">{{
|
|
college[1].label
|
|
}}</router-link>
|
|
</p>
|
|
<p class="foot_p" >
|
|
<router-link :to="college[2].url">{{
|
|
college[2].label
|
|
}}</router-link>
|
|
</p>
|
|
<p class="foot_p" >
|
|
<router-link :to="college[3].url">{{
|
|
college[3].label
|
|
}}</router-link>
|
|
</p> -->
|
|
</div>
|
|
</div>
|
|
<!-- email -->
|
|
<div class="item">
|
|
<p class="item_p" style="text-align: left; font-size: 20px; color: #000">{{ $t("common.contactUs") }}</p>
|
|
<p class="foot_p" style="font-size: 14px;color: #5B5B5B;">{{ $t("common.email") }}:</p>
|
|
<p class="foot_p" style="font-size: 14px;color: #5B5B5B;">{{ email }}</p>
|
|
</div>
|
|
|
|
<!-- <div class="logo"> -->
|
|
<!-- <img src="../assets/img/logo1.png" alt="logo" style="width:208px;height:68px" /> -->
|
|
<!-- <div style="width: 90px; height: 91px">
|
|
<img
|
|
:src="appConfig.head_logo"
|
|
alt="logo"
|
|
style="width: 100%; height: 100%; object-fit: contain"
|
|
/>
|
|
</div> -->
|
|
<!-- <span>{{$t('common.footerTips1')}}</span> -->
|
|
<!-- </div> -->
|
|
<!-- <span>{{ $t('common.footerTips1') }}</span> -->
|
|
<!-- <p class="foot_p">{{ $t('common.footerTips2', {name: appConfig.name}) }}</p> -->
|
|
<!-- <p class="foot_p">{{$t('appConfig.name')}}</p> -->
|
|
<!-- <p class="foot_p">{{ $t('common.footerTips3') }}</p> -->
|
|
</div>
|
|
|
|
<!-- email -->
|
|
<!-- <div class="item" style="width:30%;margin-top: 74px;">
|
|
<p class="item_p" style="text-align: start; font-size:16px;">{{ $t("common.contactUs") }}</p>
|
|
<p class="foot_p" style="text-align: start; font-size:16px;">
|
|
{{ $t("common.email") }}:{{ email }}
|
|
</p>
|
|
<div class="icon_foot">
|
|
<img src="../assets/img/chat.png">
|
|
<div class="icon_img" v-for="(item,index) in list" :key="item">
|
|
<img :src="item.src"/>
|
|
</div>
|
|
</div>
|
|
<p class="foot_p" style="width:100%">
|
|
{{email}}
|
|
</p>
|
|
</div> -->
|
|
<!-- <div class="container">
|
|
<div class="row"> -->
|
|
<!-- <div class="col-lg-2 col-md-3 mb-4">
|
|
<div class="footer-logo">
|
|
<a href="#">
|
|
<img :src="logo.imgurl" alt="img" class="img-responsive" />
|
|
<img :src="appConfig.foot_logo" alt="logo" />
|
|
</a>
|
|
</div>
|
|
</div> -->
|
|
<!-- 服务列表 -->
|
|
<!-- <div class="col-lg-1 col-md-3 mb-4">
|
|
<div class="footer-info-list">
|
|
<h4>{{ $t("common.service") }}</h4>
|
|
<ul>
|
|
<li v-for="(item, index) in service" :key="index">
|
|
<router-link :to="item.url">{{ item.label }}</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div> -->
|
|
<!-- 学院列表 -->
|
|
<!-- <div class="col-lg-1 col-md-3 mb-4">
|
|
<div class="footer-info-list">
|
|
<h4>{{ $t("common.college") }}</h4>
|
|
<ul>
|
|
<li v-for="item in college" :key="item.id">
|
|
<router-link :to="item.url">{{ item.label}}</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div> -->
|
|
<!-- 联系我们 -->
|
|
<!-- <div class="col-lg-2 col-md-6">
|
|
<div class="footer-info-list">
|
|
<h4>{{$t('common.contactUs')}}</h4>
|
|
<ul class="contact-info">
|
|
<li>
|
|
{{ $t("common.email") }}:
|
|
<span>{{email}}</span>
|
|
</li>
|
|
<li>
|
|
Phone: <span>{{contactinfo.mobile}}</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="social-style-two">
|
|
<li>
|
|
<a href="#">
|
|
<i class="fab fa-facebook-f"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fab fa-google-plus-g"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fab fa-github"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fab fa-linkedin-in"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div> -->
|
|
<!-- <div class="col-lg-4 col-md-6 border-left">
|
|
<div class="pl-2 ">
|
|
<div class="mb-2">
|
|
{{$t('common.footerTips1')}}
|
|
</div>
|
|
<div class="mb-2"> {{$t('common.footerTips2',{name:appConfig.name})}}</div>
|
|
<div class="mb-2">{{$t('common.footerTips3')}}</div>
|
|
</div>
|
|
</div> -->
|
|
<!-- </div> -->
|
|
<!-- </div> -->
|
|
</div>
|
|
<div class="footer-right">
|
|
<div style="font-size: 20px;">{{ $t("homeNewText.hh44",{name:"Iwebpal"}) }}</div>
|
|
<router-link class="jump_btn" to="/sign-up" v-if="!isLogin">{{ $t("homeNewText.hh48") }}</router-link>
|
|
<router-link class="jump_btn" to="/exchange" v-else>{{ $t("homeNewText.hh45") }}</router-link>
|
|
<img src="@/assets/img/home/iweb.png" alt="" style="width: 120px;height: 120px;background-color: #ccc;">
|
|
<div style="font-size: 16px; color: #9C9C9C;margin-top: 12px;text-align: center;">{{ $t("homeNewText.hh46",{name:"Iwebpal"}) }}</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
<script>
|
|
import College from "@/api/college";
|
|
import ContactUs from "@/api/contactUs";
|
|
import { mapState } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
service: [],
|
|
college: [],
|
|
email: "",
|
|
list: [
|
|
{ src: "https://www.rsncoin.com/static/flag/discord.png" },
|
|
{ src: "https://www.rsncoin.com/static/flag/telegram.png" },
|
|
{ src: "https://www.rsncoin.com/static/flag/tiktok.png" },
|
|
{ src: "https://www.rsncoin.com/static/flag/twitter.png" },
|
|
{ src: "https://www.rsncoin.com/static/flag/reddit.png" },
|
|
{ src: "https://www.rsncoin.com/static/flag/ins.png" },
|
|
{ src: "https://www.rsncoin.com/static/flag/cap.jpg" },
|
|
{ src: "https://www.rsncoin.com/static/flag/vk.png" },
|
|
{ src: "https://www.rsncoin.com/static/flag/youtube.jpg" },
|
|
],
|
|
langList: [
|
|
// {
|
|
// value: "cn", // zh-CN
|
|
// label: "简体中文"
|
|
// },
|
|
{
|
|
value: "en",
|
|
label: "English",
|
|
url: require("../assets/img/flag/en.jpg"),
|
|
},
|
|
{
|
|
value: "kor",
|
|
label: "한국어",
|
|
url: require("../assets/img/flag/kor.jpg"),
|
|
},
|
|
{
|
|
value: 'de',
|
|
label: 'Deutsch',
|
|
url: require("../assets/img/flag/de.jpg"),
|
|
},
|
|
{
|
|
value: 'fra',
|
|
label: 'Français',
|
|
url: require("../assets/img/flag/fra.jpg"),
|
|
},
|
|
{
|
|
value: 'spa',
|
|
label: 'Español',
|
|
url: require("../assets/img/flag/spa.jpg"),
|
|
},
|
|
{
|
|
value: 'it',
|
|
label: 'Italiano',
|
|
url: require("../assets/img/flag/it.jpg"),
|
|
},
|
|
// {
|
|
// value: 'ukr',
|
|
// label: 'УкраїнськаName'
|
|
// },
|
|
// {
|
|
// value: 'swe',
|
|
// label: 'Svenska'
|
|
// },
|
|
// {
|
|
// value: 'fin',
|
|
// label: 'Suomi'
|
|
// },
|
|
{
|
|
value: "jp",
|
|
label: "日本語",
|
|
url: require("../assets/img/flag/jp.jpg"),
|
|
},
|
|
// {
|
|
// value: 'pl',
|
|
// label: 'Polski'
|
|
// },
|
|
{
|
|
value: 'pt',
|
|
label: 'Português',
|
|
url: require("../assets/img/flag/pt.jpg"),
|
|
},
|
|
{
|
|
value: 'tr',
|
|
label: 'Turkey',
|
|
url: require("../assets/img/flag/tr.jpg"),
|
|
},
|
|
{
|
|
value: "tw", // zh-TW
|
|
label: "繁体中文",
|
|
url: require("../assets/img/flag/tw.jpg")
|
|
}
|
|
],
|
|
showMenu: false,
|
|
langer: ''
|
|
};
|
|
},
|
|
computed: {
|
|
isLogin() {
|
|
return Boolean(localStorage.token);
|
|
},
|
|
...mapState({
|
|
appConfig: "appConfig",
|
|
}),
|
|
// 当前语言
|
|
nativeLang() {
|
|
let UALang;
|
|
// 检测中文简体和翻译
|
|
// if (navigator.language.startsWith("zh")) {
|
|
// UALang = _.trimStart(navigator.language, "zh-").toLowerCase();
|
|
// } else {
|
|
UALang = "en"; // 其余英文
|
|
// }
|
|
|
|
let lang = localStorage.lang || UALang;
|
|
this.langer = require("../assets/img/flag/" + lang + ".jpg");
|
|
return this.langList.find(item => item.value == lang).label;
|
|
},
|
|
},
|
|
methods: {
|
|
Jump(vle){
|
|
this.$router.push(vle);
|
|
},
|
|
toggleMenu(e, type){
|
|
e.stopPropagation();
|
|
if(type===2){
|
|
this.showMenu = false;
|
|
}else{
|
|
this.showMenu = !this.showMenu;
|
|
}
|
|
},
|
|
chooseNative(native) {
|
|
// 设置语言
|
|
localStorage.setItem("lang", native);
|
|
// 刷新页面
|
|
this.$router.go(0);
|
|
},
|
|
getCollegeLinks() {
|
|
College.getCategoryList()
|
|
.then((list) => {
|
|
list.forEach((item) => {
|
|
this.college.push({
|
|
url: `/college/list/${item.id}`,
|
|
label: item.name,
|
|
});
|
|
});
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
getServiceLink() {
|
|
College.getServiceList()
|
|
.then((list) => {
|
|
// console.log(list);
|
|
list.forEach((item) => {
|
|
this.service.push({
|
|
url: `/service/${item.id}`,
|
|
label: item.name,
|
|
});
|
|
});
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
getEmial() {
|
|
ContactUs.contact()
|
|
.then((data) => {
|
|
this.email = data.contact;
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
},
|
|
created() {
|
|
this.getCollegeLinks();
|
|
this.getServiceLink();
|
|
// console.log(this.service);
|
|
this.getEmial();
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.footer {
|
|
background-color: #fff;
|
|
border-top: none;
|
|
color: #000;
|
|
|
|
.content{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 1200px;
|
|
height: 560px;
|
|
margin: 0px auto;
|
|
}
|
|
.footer-upper-section {
|
|
padding: 0px;
|
|
|
|
.footer-upper-section-lang{
|
|
width: 182px;height: 49px;
|
|
border-radius: 11px;
|
|
border: 1px solid #808080;
|
|
font-size: 16px;
|
|
margin: 37px 0px 0px;
|
|
position: relative;
|
|
|
|
.lang_now{
|
|
display: block;
|
|
text-align: center;
|
|
width: 100%;
|
|
line-height: 45px;
|
|
color: #000;
|
|
background-color: transparent;
|
|
outline: none;
|
|
border: none;
|
|
position: relative;
|
|
|
|
// &::before{
|
|
// content: '';
|
|
// position: absolute;
|
|
// width: 24px;
|
|
// height: 24px;
|
|
// background-image: url("../assets/img/home/global.png");
|
|
// background-size: 100%;
|
|
// left: 24px;
|
|
// top: 12px;
|
|
// }
|
|
|
|
&::after{
|
|
content: '';
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-top: 1px solid transparent;
|
|
border-left: 1px solid #808080;
|
|
border-right: 1px solid transparent;
|
|
border-bottom: 1px solid #808080;
|
|
transform: rotate(-45deg);
|
|
right: 30px;
|
|
top: 18px;
|
|
}
|
|
}
|
|
.lang_menu{
|
|
position: absolute;
|
|
width: 182px;
|
|
height: 220px;
|
|
background-color: #fff;
|
|
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.13);
|
|
border-radius: 10px;
|
|
overflow: scroll;
|
|
color: #101010;
|
|
|
|
&::-webkit-scrollbar { width: 0; height: 0; background-color: transparent;}
|
|
&::-webkit-scrollbar-track { background-color: transparent;}
|
|
&::-webkit-scrollbar-thumb { background-color: transparent;}
|
|
|
|
.item{
|
|
padding: 15px;
|
|
cursor: pointer;
|
|
// text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 70px;
|
|
|
|
.flag-img{
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.item:hover{
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
&.show{
|
|
display: block;
|
|
}
|
|
&.hide{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.footer-upper-section-list {
|
|
margin-top: 100px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.footer-upper-section-top {
|
|
.footer-logo {
|
|
|
|
}
|
|
}
|
|
|
|
.item_left {
|
|
width: 454px;
|
|
// margin-right: 300px;
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #172636;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.footer-right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.jump_btn{
|
|
display: inline-block;
|
|
min-width: 200px;
|
|
height: 56px;
|
|
line-height: 56px;
|
|
text-align: center;
|
|
color: #fff;
|
|
background-color: #000;
|
|
border-radius: 50px;
|
|
font-size: 20px;
|
|
padding: 0px 20px;
|
|
box-sizing: border-box;
|
|
margin: 46px 0px 42px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.serviceText{
|
|
color: #5B5B5B;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
-webkit-transition: .4s ease-in;
|
|
transition: .4s ease-in;
|
|
}
|
|
.serviceText:hover{
|
|
color: #b5b5b5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.foot_p {
|
|
color: #000;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
|
|
|
|
// a:hover {
|
|
// color: #b5b5b5;
|
|
// }
|
|
|
|
// a:visited {
|
|
// color: #b5b5b5;
|
|
// }
|
|
}
|
|
|
|
.icon_foot {
|
|
margin-top: 5px;
|
|
height: 130px;
|
|
width: 180px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.icon_img {
|
|
height: 30px;
|
|
width: 30px;
|
|
margin: 0px 5px;
|
|
|
|
img {
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
.flag-img{
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-right: 8px;
|
|
margin-left: 6px;
|
|
img{
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width:1200px){
|
|
.content{
|
|
width: 100% !important;
|
|
padding: 0px 50px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:835px){
|
|
.footer .footer-upper-section{
|
|
width: 100%;
|
|
}
|
|
|
|
.footer .footer-right{
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|