792 lines
17 KiB
Vue
792 lines
17 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="footer_box" v-if="showHomeAndroid == false">
|
||
|
|
<div class="footer_box_left">
|
||
|
|
<div class="footer_box_left_logo">
|
||
|
|
<a href="/"><img src="@/assets/Home_IMG/raylinx.logo.png" alt=""/></a>
|
||
|
|
</div>
|
||
|
|
<div class="footer_box_left_mini">
|
||
|
|
<div class="customerCaseList">
|
||
|
|
<div class="customerCaseList_title">客户案例</div>
|
||
|
|
<div v-for="item in customerCaseList" :key="item.index" class="customerCaseList_title_item">
|
||
|
|
<div class="name">
|
||
|
|
<a href="">
|
||
|
|
<div>{{ item.name }}</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="partnerWebsites">
|
||
|
|
<div class="partnerWebsites_title">合作网站</div>
|
||
|
|
<div v-for="item in partnerWebsites" :key="item.index" class="partnerWebsites_title_item">
|
||
|
|
<div class="name">
|
||
|
|
<a href="">
|
||
|
|
<div>{{ item.name }}</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="footer_box_main">
|
||
|
|
<div class="footer_box_main_title">热门产品</div>
|
||
|
|
<div class="footer_box_main_bar"></div>
|
||
|
|
<div class="footer_box_main_content">
|
||
|
|
<div v-for="item in hotProducts" class="footer_box_main_content_item">
|
||
|
|
<div class="title">{{ item.name }}</div>
|
||
|
|
<span v-for="i in item.chlider" class="a_name"><a :href="i.url">
|
||
|
|
<div>{{ i.name }}</div>
|
||
|
|
</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="footer_box_right">
|
||
|
|
<div class="icon_title">
|
||
|
|
<div class="icon">
|
||
|
|
<img src="@/assets/Home_IMG/phone.png" alt=""/>
|
||
|
|
</div>
|
||
|
|
<div class="title">1 (212) 518-8846</div>
|
||
|
|
</div>
|
||
|
|
<div class="footer_box_right_mini">
|
||
|
|
<div v-for="item in aboutList" class="footer_box_right_mini_content">
|
||
|
|
<div class="title">{{ item.name }}</div>
|
||
|
|
<div v-for="i in item.chlider" class="item"><a :href="i.url" style="color: #333333">{{ i.name }}</a></div>
|
||
|
|
</div>
|
||
|
|
<div class="footer_box_right_contact">
|
||
|
|
<div v-for="item in contactList" class="item">
|
||
|
|
<div class="img"><img :src="item.img" alt=""></div>
|
||
|
|
<div class="title"><a :href="item.url" target="_blank">
|
||
|
|
<div>{{ item.name }}</div>
|
||
|
|
</a></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="footer_box" v-if="showHomeAndroid == true">
|
||
|
|
<div class="footer_box_left">
|
||
|
|
<div class="footer_box_left_logo">
|
||
|
|
<a href="/"><img src="@/assets/Home_IMG/raylinx.logo.png" alt=""/></a>
|
||
|
|
</div>
|
||
|
|
<div class="footer_box_left_mini">
|
||
|
|
<div class="customerCaseList">
|
||
|
|
<div class="customerCaseList_title">客户案例</div>
|
||
|
|
<div v-for="item in customerCaseList" :key="item.index" class="customerCaseList_title_item">
|
||
|
|
<div class="name">
|
||
|
|
<a href="">
|
||
|
|
<div>{{ item.name }}</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="partnerWebsites">
|
||
|
|
<div class="partnerWebsites_title">合作网站</div>
|
||
|
|
<div v-for="item in partnerWebsites" :key="item.index" class="partnerWebsites_title_item">
|
||
|
|
<div class="name">
|
||
|
|
<a href="">
|
||
|
|
<div>{{ item.name }}</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="footer_box_main">
|
||
|
|
<div class="footer_box_main_title">热门产品</div>
|
||
|
|
<div class="footer_box_main_bar" style="width: 95%;"></div>
|
||
|
|
<div class="footer_box_main_content">
|
||
|
|
<div v-for="item in hotProducts" class="footer_box_main_content_item" style="display: block;">
|
||
|
|
<div class="title">{{ item.name }}</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<span v-for="i in item.chlider" class="a_name">
|
||
|
|
|
||
|
|
<a :href="i.url">
|
||
|
|
{{ i.name }}
|
||
|
|
</a>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="footer_box_main_bar" style="width: 95%;"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer_box_right">
|
||
|
|
<div class="icon_title">
|
||
|
|
<div class="icon">
|
||
|
|
<img src="@/assets/Home_IMG/phone.png" alt=""/>
|
||
|
|
</div>
|
||
|
|
<div class="title">1 (212) 518-8846</div>
|
||
|
|
</div>
|
||
|
|
<div class="footer_box_right_mini">
|
||
|
|
|
||
|
|
<div class="footer_box_right_contact" style="display: flex;">
|
||
|
|
<div v-for="item in contactList" class="item">
|
||
|
|
<div class="img"><img :src="item.img" alt=""></div>
|
||
|
|
<div class="title"><a href="">
|
||
|
|
<div>{{ item.name }}</div>
|
||
|
|
</a></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div v-for="item in aboutList2" class="footer_box_right_mini_content2">
|
||
|
|
<!-- <div class="title">{{ item.name }}</div> -->
|
||
|
|
<div v-for="i in item.chlider" class="item">{{ i.name }}|</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showHomeAndroid: false,
|
||
|
|
screenWidth: null,
|
||
|
|
customerCaseList: [
|
||
|
|
{index: "1", name: "Netflix", url: "/contact"},
|
||
|
|
{index: "2", name: "Coinbase", url: "/contact"},
|
||
|
|
{index: "3", name: "NASDAQ", url: "/contact"},
|
||
|
|
{index: "4", name: "Ethereume", url: "/contact"},
|
||
|
|
],
|
||
|
|
partnerWebsites: [
|
||
|
|
{index: "1", name: "AWS官网", url: "/contact"},
|
||
|
|
{index: "2", name: "AWS博客", url: "/contact"},
|
||
|
|
],
|
||
|
|
hotProducts: [
|
||
|
|
{
|
||
|
|
index: "1",
|
||
|
|
name: "服务器",
|
||
|
|
chlider: [
|
||
|
|
{index: "1-1", name: "大带宽服务器", url: "/contact"},
|
||
|
|
{index: "1-2", name: "轻量云服务器", url: "/contact"},
|
||
|
|
{index: "1-3", name: "站群服务器", url: "/contact"},
|
||
|
|
{index: "1-4", name: "高防服务器", url: "/contact"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "2",
|
||
|
|
name: "网络",
|
||
|
|
chlider: [
|
||
|
|
{index: "2-1", name: "CDN", url: "/contact"},
|
||
|
|
{index: "2-2", name: "高防盾(Shield)", url: "/contact"},
|
||
|
|
{index: "2-3", name: "跨境数据传输", url: "/contact"},
|
||
|
|
{index: "2-4", name: "全球骨干网", url: "/contact"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "3",
|
||
|
|
name: "区块链",
|
||
|
|
chlider: [
|
||
|
|
{index: "3-1", name: "区块链搭建", url: "/contact"},
|
||
|
|
{index: "3-2", name: "多种数据库服务", url: "/contact"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "4",
|
||
|
|
name: "存储",
|
||
|
|
chlider: [
|
||
|
|
{index: "4-1", name: "可拓展对象存储", url: "/contact"},
|
||
|
|
{index: "4-2", name: "低成本归档存储", url: "/contact"},
|
||
|
|
{index: "4-3", name: "块存储", url: "/contact"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "5",
|
||
|
|
name: "游戏",
|
||
|
|
chlider: [
|
||
|
|
{index: "5-1", name: "Aomzon GameLife", url: "/contact"},
|
||
|
|
{index: "5-2", name: "Aomzon GameSparks", url: "/contact"},
|
||
|
|
{index: "5-3", name: "AWS游戏套件", url: "/contact"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "6",
|
||
|
|
name: "服务",
|
||
|
|
chlider: [
|
||
|
|
{index: "6-1", name: "账户开通", url: "/contact"},
|
||
|
|
{index: "6-2", name: "账单代付", url: "/contact"},
|
||
|
|
{index: "6-3", name: "账号解封", url: "/contact"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
aboutList: [
|
||
|
|
{
|
||
|
|
index: "1",
|
||
|
|
name: "关于我们",
|
||
|
|
chlider: [
|
||
|
|
{index: "1-1", name: "新闻资讯", url: "/about"},
|
||
|
|
{index: "1-2", name: "联系我们", url: "/contact"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: "2",
|
||
|
|
name: "",
|
||
|
|
chlider: [
|
||
|
|
{index: "2-1", name: "站点地图", url: "/Footer/SiteMap"},
|
||
|
|
{index: "2-2", name: "隐私政策", url: "/Footer/PrivacyPolicy"},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
|
||
|
|
aboutList2: [
|
||
|
|
{
|
||
|
|
index: "1",
|
||
|
|
name: "关于我们",
|
||
|
|
chlider: [
|
||
|
|
{index: "1-1", name: "隐私", url: "/Footer/PrivacyPolicy"},
|
||
|
|
{index: "1-2", name: "网站条款", url: "/contact"},
|
||
|
|
{index: "1-3", name: "Cookie首选项", url: "/contact"},
|
||
|
|
{index: "1-4", name: "2022,Raylinx,lnc,或其脸书公司。保留所有权利", url: "/contact"},
|
||
|
|
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
contactList: [
|
||
|
|
{
|
||
|
|
index: "1",
|
||
|
|
name: "Facebook",
|
||
|
|
img: require("@/assets/Home_IMG/fb.png"),
|
||
|
|
url: "https://www.facebook.com/profile.php?id=61565734855142"
|
||
|
|
},
|
||
|
|
{index: "2", name: "Telegram", img: require("@/assets/Home_IMG/TG.png"), url: "https://t.me/raylinxjim"},
|
||
|
|
{index: "3", name: "whatsApp", img: require("@/assets/Home_IMG/whatsApp1.png"), url: "https://api.whatsapp.com/send/?phone=1332699&text&type=phone_number&app_absent=0"},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
bodyScale() {
|
||
|
|
var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
|
||
|
|
if(devicewidth<=1600){
|
||
|
|
var scale = devicewidth / 1600; // 分母——设计稿的尺寸
|
||
|
|
document.body.style.zoom = scale; //放大缩小相应倍数
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.screenWidth = document.body.clientWidth;
|
||
|
|
window.onresize = () => {
|
||
|
|
return (() => {
|
||
|
|
this.screenWidth = document.body.clientWidth;
|
||
|
|
})();
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
screenWidth: {
|
||
|
|
handler: function (val) {
|
||
|
|
if (val >= 1100) {
|
||
|
|
this.bodyScale();
|
||
|
|
this.showHomeAndroid = false;
|
||
|
|
// console.log( this.showHomeAndroid);
|
||
|
|
} else if (val < 1100) {
|
||
|
|
//
|
||
|
|
this.showHomeAndroid = true;
|
||
|
|
// console.log( this.showHomeAndroid);
|
||
|
|
}
|
||
|
|
// this.$forceUpdate();
|
||
|
|
},
|
||
|
|
immediate: true,
|
||
|
|
deep: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
|
||
|
|
.footer_box_right_mini_content2 {
|
||
|
|
background-color: #e1e1e1;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 35px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
|
||
|
|
div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 300px;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_left_mini {
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.customerCaseList {
|
||
|
|
padding-left: 5%;
|
||
|
|
|
||
|
|
&_title {
|
||
|
|
color: #000;
|
||
|
|
font-size: 20px;
|
||
|
|
margin-top: 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
|
||
|
|
&_item {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-top: 10px;
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #383737;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
color: #898989;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.partnerWebsites {
|
||
|
|
padding-left: 5%;
|
||
|
|
|
||
|
|
&_title {
|
||
|
|
color: #000;
|
||
|
|
font-size: 20px;
|
||
|
|
margin-top: 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
|
||
|
|
&_item {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-top: 10px;
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #383737;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
color: #676767;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_left {
|
||
|
|
width: 100%;
|
||
|
|
// height: 300px;
|
||
|
|
background-color: #d2efff;
|
||
|
|
|
||
|
|
|
||
|
|
&_logo {
|
||
|
|
width: 80%;
|
||
|
|
margin-left: -20px;
|
||
|
|
height: 100px;
|
||
|
|
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 80%;
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_main {
|
||
|
|
|
||
|
|
// height: 400px;
|
||
|
|
|
||
|
|
padding-top: 25px;
|
||
|
|
padding-left: 5%;
|
||
|
|
background-color: #D2EFFF;
|
||
|
|
|
||
|
|
.footer_box_main_content {
|
||
|
|
padding-left: 0%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&_title {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
&_bar {
|
||
|
|
width: 100%;
|
||
|
|
height: 3px;
|
||
|
|
background-color: #0389d1;
|
||
|
|
}
|
||
|
|
|
||
|
|
&_content {
|
||
|
|
margin-top: 3%;
|
||
|
|
padding-left: 5%;
|
||
|
|
|
||
|
|
&_item {
|
||
|
|
// margin-bottom: 20px;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
color: #027AFF;
|
||
|
|
width: 100px;
|
||
|
|
font-weight: 550;
|
||
|
|
font-size: 16px;
|
||
|
|
display: inline;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.a_name {
|
||
|
|
text-align: left;
|
||
|
|
margin-right: 2%;
|
||
|
|
width: 150px;
|
||
|
|
font-size: 13px;
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
color: #676767;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_right {
|
||
|
|
// width: 100%;
|
||
|
|
// height: 300px;
|
||
|
|
background-color: #d2efff;
|
||
|
|
padding-left: 12px;
|
||
|
|
|
||
|
|
.icon_title {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 70px;
|
||
|
|
height: 70px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 70px;
|
||
|
|
height: 70px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
color: #000000;
|
||
|
|
margin-top: 25px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_right_mini {
|
||
|
|
display: flex;
|
||
|
|
margin-top: 10px;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_right_contact {
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
|
||
|
|
.img {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
margin-top: 15px;
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
color: #676767;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_right_mini_content {
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
font-size: 11px;
|
||
|
|
line-height: 35px;
|
||
|
|
}
|
||
|
|
|
||
|
|
// .title {
|
||
|
|
|
||
|
|
// display: flex;
|
||
|
|
|
||
|
|
// color: #000;
|
||
|
|
// font-size: 20px;
|
||
|
|
// font-weight: 600;
|
||
|
|
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
.footer_box_right_mini_content2 {
|
||
|
|
background-color: #e1e1e1;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 35px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.footer_box_right_mini_content {
|
||
|
|
.item {
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 35px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
|
||
|
|
div {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 300px;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_left_mini {
|
||
|
|
width: 80%;
|
||
|
|
margin: 0 auto;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.customerCaseList {
|
||
|
|
margin-left: 10%;
|
||
|
|
|
||
|
|
&_title {
|
||
|
|
color: #000;
|
||
|
|
font-size: 20px;
|
||
|
|
margin-top: 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
|
||
|
|
&_item {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-top: 10px;
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #383737;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
color: #898989;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.partnerWebsites {
|
||
|
|
margin-left: 10%;
|
||
|
|
|
||
|
|
&_title {
|
||
|
|
color: #000;
|
||
|
|
font-size: 20px;
|
||
|
|
margin-top: 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
|
||
|
|
&_item {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-top: 10px;
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #383737;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
color: #676767;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_left {
|
||
|
|
width: 25%;
|
||
|
|
height: 300px;
|
||
|
|
background-color: #d2efff;
|
||
|
|
padding: 12px 12px 12px 55px;
|
||
|
|
|
||
|
|
&_logo {
|
||
|
|
width: 80%;
|
||
|
|
height: 100px;
|
||
|
|
margin: 0 auto;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 80%;
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_main {
|
||
|
|
width: 50%;
|
||
|
|
height: 300px;
|
||
|
|
padding-top: 25px;
|
||
|
|
font-size: 14px;
|
||
|
|
background-color: #d2efff;
|
||
|
|
&_title {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 600;
|
||
|
|
padding-left: 31px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
&_bar {
|
||
|
|
width: 100%;
|
||
|
|
height: 3px;
|
||
|
|
background-color: #6bc7f8;
|
||
|
|
}
|
||
|
|
|
||
|
|
&_content {
|
||
|
|
margin-top: 3%;
|
||
|
|
margin-left: 5%;
|
||
|
|
|
||
|
|
&_item {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
color: #027AFF;
|
||
|
|
display: inline;
|
||
|
|
margin-right: 5%;
|
||
|
|
width: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.a_name {
|
||
|
|
text-align: left;
|
||
|
|
margin-right: 4%;
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
color: #676767;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_right {
|
||
|
|
width: 30%;
|
||
|
|
height: 300px;
|
||
|
|
background-color: #d2efff;
|
||
|
|
padding: 12px 46px 12px 34px;
|
||
|
|
|
||
|
|
.icon_title {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 70px;
|
||
|
|
height: 70px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 70px;
|
||
|
|
height: 70px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
color: #000000;
|
||
|
|
margin-top: 25px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_right_mini {
|
||
|
|
display: flex;
|
||
|
|
margin-top: 10px;
|
||
|
|
|
||
|
|
.footer_box_right_mini_content {
|
||
|
|
.title {
|
||
|
|
width: 100px;
|
||
|
|
height: 40px;
|
||
|
|
color: #000;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
margin-bottom: 13px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_box_right_contact {
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
|
||
|
|
.img {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
margin-top: 15px;
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
color: #676767;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|