<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>
