<script setup>
import {ref, onMounted} from 'vue'
import Swiper from '@/components/Swiper/index.vue'
import Banner from '@/components/Banner/index.vue'
// import Map from './map.vue'

const currentPage = ref(1)

const toCompany = () => {
  window.open(
    'https://www.amap.com/search?query=%E7%87%83%E8%B0%B7%E7%A7%91%E6%8A%80(%E5%8D%97%E4%BA%AC)%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8'
  )
}

onMounted(() => {})
</script>

<template>
  <div class="page">
    <Banner class="banner" img="banner/link.png" />
    <Swiper
      id="one"
      title="联系我们"
      v-model="currentPage"
      :sourceWidth="1200"
      :sourceHeight="400"
      :show-pagination="false"
      :auto-play="false"
      :showHover="false"
    >
      <template #default>
        <div class="my-card flex j-s">
          <div class="title">
            <div class="label">燃谷科技（南京）有限公司</div>
            <div class="label">电话：13222013393</div>
            <div class="label">邮箱：company@rangutech.com</div>
            <div class="label">地址：江苏省南京市鼓楼区万谷硅巷5F</div>
          </div>
          <img class="img" src="/static/images/link/map.png" @click="toCompany"></img>
        </div>
      </template>
    </Swiper>
  </div>
</template>

<style lang="scss" scoped>
.placeholder {
  background-image: url(`./static/logo/link.png`);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.my-card {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  .title {
    text-align: left;
    margin-top: 40px;
    .label {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 20px;
      margin-bottom: 20px;
    }
    .label:nth-child(1) {
      font-family: 'PingFang SC';
      font-weight: 600;
      font-size: 26px;
    }
  }
  .img {
    width: 520px;
    height: 380px;
    cursor: pointer;
  }
}
</style>
