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.
699 lines
20 KiB
699 lines
20 KiB
<template>
|
|
<!-- colto-section -->
|
|
<footer class="footer" @click="toggleMenu($event,2)">
|
|
<div class="cszone">
|
|
<a href="javascript:void(0);" @click="scbox()"><img src="../assets/img/home/kefu.png"></a>
|
|
</div>
|
|
|
|
<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.head_logo"
|
|
alt="logo"
|
|
style="width: 200px; height: 100%;max-width: 200px; object-fit: contain;"
|
|
/>
|
|
</div>
|
|
<div style="color: #5B5B5B;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">{{ nativeLang }}</button>
|
|
<div class="lang_menu" id="lang_menu" :class="showMenu?'show':'hide'">
|
|
<div class="item" v-for="(item1, index1) in langList" :key="index1" @click.prevent="chooseNative(item1.value)">
|
|
{{ item1.label }}
|
|
</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: #fff;
|
|
"
|
|
>
|
|
{{ $t("common.service") }}
|
|
</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>
|
|
<!-- <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: #fff;
|
|
"
|
|
>
|
|
{{ $t("common.college") }}
|
|
</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: #fff"
|
|
>
|
|
{{ $t("common.contactUs") }}
|
|
</p>
|
|
<p class="foot_p" style="font-size: 14px;color:#797979;">
|
|
{{ $t("common.email") }}:
|
|
</p>
|
|
<p class="foot_p" style="font-size: 14px;color:#797979;">
|
|
{{ 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.bb39",{name:'Mrbcoin'}) }}</div>
|
|
<router-link class="jump_btn" to="/sign-up" v-if="!isLogin">{{ $t("homeNewText.bb43") }}</router-link>
|
|
<router-link class="jump_btn" to="/exchange" v-else>{{ $t("homeNewText.bb42") }}</router-link>
|
|
<img src="@/assets/img/home/mrb.png" alt="" style="width: 120px;height: 120px;">
|
|
<div style="font-size: 16px; color: #9c9c9c;margin-top: 12px;">{{ $t("homeNewText.bb40",{name:'Mrbcoin'}) }}</div>
|
|
</div>
|
|
|
|
<div class="cspopup" :class='{"hidden":ispopup?"":"none"}'>
|
|
<a href="javascript:void(0);" class="close_btn" @click="closebox();">x</a>
|
|
<iframe width="100%" height="100%" class="my-modal-body" :src="ifurl" frameborder="0" style="border-radius: 10px;background-color: #fff;"></iframe>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
<script>
|
|
import College from "@/api/college";
|
|
import ContactUs from "@/api/contactUs";
|
|
import Member from "@/api/member";
|
|
import { mapState } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
service: [],
|
|
college: [],
|
|
email: "",
|
|
ispopup:false,
|
|
ifurl:"",
|
|
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/en.jpg"),
|
|
},
|
|
{
|
|
value: "kor",
|
|
label: "한국어",
|
|
url: require("../assets/img/kor.jpg"),
|
|
},
|
|
{
|
|
value: "de",
|
|
label: "Deutsch",
|
|
url: require("../assets/img/de.jpg"),
|
|
},
|
|
{
|
|
value: "fra",
|
|
label: "Français",
|
|
url: require("../assets/img/fra.jpg"),
|
|
},
|
|
{
|
|
value: "spa",
|
|
label: "Español",
|
|
url: require("../assets/img/spa.jpg"),
|
|
},
|
|
{
|
|
value: "it",
|
|
label: "Italiano",
|
|
url: require("../assets/img/it.jpg"),
|
|
},
|
|
{
|
|
value: "jp",
|
|
label: "日本語",
|
|
url: require("../assets/img/jp.jpg"),
|
|
},
|
|
{
|
|
value: "pt",
|
|
label: "Português",
|
|
url: require("../assets/img/pt.jpg"),
|
|
},
|
|
{
|
|
value: "tr",
|
|
label: "Turkey",
|
|
url: require("../assets/img/tr.jpg"),
|
|
},
|
|
{
|
|
value: "tw", // zh-TW
|
|
label: "繁体中文",
|
|
url: require("../assets/img/tw.jpg"),
|
|
},
|
|
],
|
|
showMenu: false
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
appConfig: "appConfig",
|
|
}),
|
|
isLogin() {
|
|
return Boolean(localStorage.token);
|
|
},
|
|
// 当前语言
|
|
nativeLang() {
|
|
let UALang;
|
|
// 检测中文简体和翻译
|
|
// if (navigator.language.startsWith("zh")) {
|
|
// UALang = _.trimStart(navigator.language, "zh-").toLowerCase();
|
|
// } else {
|
|
UALang = "en"; // 其余英文
|
|
// }
|
|
let lang = localStorage.lang || UALang;
|
|
if (localStorage.getItem("lang") == null) {
|
|
// let localStorage.getItem("lang") = 'en';
|
|
}
|
|
this.langer = require("../assets/img/" + 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) => {
|
|
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) => {});
|
|
},
|
|
scbox(e){
|
|
// under login
|
|
if (this.isLogin) {
|
|
// get user infomation
|
|
let user_str = localStorage.getItem("auth");
|
|
if(user_str!=""){
|
|
let user = JSON.parse(user_str);
|
|
// 查询对应的推荐人帐号
|
|
Member.getUnameByUid({user_id:user.referrer}).then(rfres=>{
|
|
// query referr uname
|
|
this.ifurl ="https://sc.mrbcoin.com/chat/?toid="+rfres.username+"&room_id="+user.account+"&usid="+user.user_id;
|
|
// show popup
|
|
this.ispopup = ! this.ispopup
|
|
})
|
|
}
|
|
}else{
|
|
console.log("login fisrt!!")
|
|
this.$router.push({ path: '/sign-in' });
|
|
}
|
|
},
|
|
closebox(){
|
|
if(this.ispopup){
|
|
this.ispopup = false
|
|
}
|
|
this.ispopup =false
|
|
}
|
|
},
|
|
created() {
|
|
this.getCollegeLinks();
|
|
this.getServiceLink();
|
|
// console.log(this.service);
|
|
this.getEmial();
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.footer {
|
|
background-color: #121212;
|
|
border-top: none;
|
|
|
|
.cszone{
|
|
width:48px;
|
|
position:fixed;
|
|
bottom:10%;
|
|
right:26px;
|
|
z-index:999;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.cszone img{
|
|
text-align:center;
|
|
width:48px;
|
|
height:48px;
|
|
}
|
|
|
|
.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 #fff;
|
|
font-size: 16px;
|
|
margin: 37px 0px 31px;
|
|
position: relative;
|
|
|
|
.lang_now{
|
|
display: block;
|
|
text-align: center;
|
|
width: 100%;
|
|
line-height: 45px;
|
|
color: #fff;
|
|
background-color: transparent;
|
|
outline: none;
|
|
border: none;
|
|
position: relative;
|
|
|
|
&::before{
|
|
content: '';
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url("../assets/img/home/global_grey.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 #999;
|
|
border-right: 1px solid transparent;
|
|
border-bottom: 1px solid #999;
|
|
transform: rotate(-45deg);
|
|
right: 30px;
|
|
top: 18px;
|
|
}
|
|
}
|
|
.lang_menu{
|
|
position: absolute;
|
|
width: 182px;
|
|
height: 220px;
|
|
background-color: #fff;
|
|
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: 10px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
.item:hover{
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
&.show{
|
|
display: block;
|
|
}
|
|
&.hide{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.footer-upper-section-list {
|
|
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: #101010;
|
|
background-color: #fff;
|
|
border-radius: 50px;
|
|
font-size: 20px;
|
|
padding: 0px 20px;
|
|
box-sizing: border-box;
|
|
margin: 46px 0px 42px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.cspopup{
|
|
position:fixed;
|
|
top:50%;
|
|
left:50%;
|
|
transform: translate(-50%, -50%);
|
|
width:560px;
|
|
height:560px;
|
|
z-index:999;
|
|
|
|
.close_btn{
|
|
width:35px;
|
|
height:35px;
|
|
font-size:20px;
|
|
font-weight:500;
|
|
line-height:30px;
|
|
text-align:center;
|
|
display:block;
|
|
color:#fff;
|
|
background:#553646;
|
|
border-radius:50%;
|
|
position:absolute;
|
|
right:-10px;
|
|
top:-10px;
|
|
z-index:1000;
|
|
}
|
|
}
|
|
.hidden{
|
|
display:none;
|
|
}
|
|
|
|
.serviceText{
|
|
color: #797979;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
-webkit-transition: .4s ease-in;
|
|
transition: .4s ease-in;
|
|
}
|
|
.serviceText:hover{
|
|
color: #b5b5b5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.foot_p {
|
|
color: #b5b5b5;
|
|
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%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|