136 lines
3.7 KiB
Vue
136 lines
3.7 KiB
Vue
<template>
|
|
<div class="part-building">
|
|
<div class="screen2">
|
|
<div class="wrapper1130">
|
|
<div
|
|
v-for="(item, index) in contacts"
|
|
:key="index"
|
|
>
|
|
<div class="title">
|
|
{{ item.title }}
|
|
</div>
|
|
<div>
|
|
<div
|
|
v-for="link in item.children"
|
|
:key="link.title"
|
|
style="margin-bottom: 20rem;"
|
|
>
|
|
<p
|
|
:title="link.title"
|
|
style="white-space: nowrap;color: #000000;font-size: 18rem;display: inline-block;"
|
|
>
|
|
<img
|
|
:src="link.src"
|
|
style="width: 18rem;height: 18rem;"
|
|
>
|
|
<span style="padding-left: 12rem">{{ link.title }}</span>
|
|
<span>{{ link.value }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<FootBar theme="dark"></FootBar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import FootBar from '@/components/FootBar.vue';
|
|
|
|
export default {
|
|
components: {
|
|
FootBar,
|
|
},
|
|
data () {
|
|
return {
|
|
screen2: {
|
|
offsets: [300],
|
|
offsetLevel: -1,
|
|
title: '',
|
|
contentCn: ``,
|
|
},
|
|
contacts: [
|
|
{
|
|
title: '联系我们',
|
|
children: [
|
|
{ title: '服务热线：', value: '+86.400-001-6725', src: '/static/img/contactUs/phone.png' },
|
|
{ title: '公司网址：', value: 'www.Fshg.cc', src: '/static/img/contactUs/website.png' },
|
|
{ title: '公司邮箱：', value: 'Info@Fshg.cc', src: '/static/img/contactUs/email.png' },
|
|
{ title: '公众号：', value: 'FutureStarHolding', src: '/static/img/contactUs/publicAccount.png' },
|
|
{ title: '服务时间：', value: '周一至周五AM 09:00-12:00 PM 01:00-06:00', src: '/static/img/contactUs/serviceTime.png' },
|
|
{ title: '公司地址：', value: '海南省三亚市天涯区育春路七巷九号', src: '/static/img/contactUs/address.png' },
|
|
{ title: '邮编：', value: '572022', src: '/static/img/contactUs/postcode.png' },
|
|
{ title: '北京地址：', value: '北京市朝阳区霄云路36号国航大厦3/7楼', src: '/static/img/contactUs/address.png' },
|
|
{ title: '邮编：', value: '100027', src: '/static/img/contactUs/postcode.png' },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
scrollTop: state => state.scroll.scrollTop,
|
|
webScale: state => state.web.scale,
|
|
}),
|
|
},
|
|
watch: {
|
|
scrollTop (val) {
|
|
const v = val / this.webScale;
|
|
if (v < 50) {
|
|
this.$event.$emit('nav-theme', 'light', {
|
|
bgColor: '#ffffff00',
|
|
shadow: false,
|
|
});
|
|
} else {
|
|
this.$event.$emit('nav-theme', 'light');
|
|
}
|
|
const i2 = this.screen2.offsetLevel + 1;
|
|
if (v >= this.screen2.offsets[i2]) {
|
|
this.screen2.offsetLevel = i2;
|
|
}
|
|
},
|
|
},
|
|
created () {
|
|
this.$event.$emit('nav-theme', 'light', {
|
|
bgColor: '#ffffff00',
|
|
shadow: false,
|
|
});
|
|
},
|
|
methods: { },
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.part-building {
|
|
width: 100%;
|
|
}
|
|
|
|
.screen2 {
|
|
padding: 200rem 0;
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
}
|
|
.screen2 .title {
|
|
font-family: MicrosoftYaHei;
|
|
font-weight: 400;
|
|
font-size: 36rem;
|
|
color: #000000;
|
|
margin-bottom: 70rem;
|
|
white-space: pre-line;
|
|
line-height: 72rem;
|
|
}
|
|
.screen2 .list-wrapper .content-cn {
|
|
width: 1160rem;
|
|
font-family: MicrosoftYaHeiLight;
|
|
font-weight: 300;
|
|
font-size: 18rem;
|
|
color: #000000;
|
|
line-height: 36rem;
|
|
letter-spacing:2.8rem;
|
|
text-align: justify;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|