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

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">地址：江苏省南京市鼓楼区万谷硅巷9F</div>
          </div>
          <div class="img">
            <Map />
          </div>
        </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;
    .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: 500px;
    height: 300px;
  }
}
</style>
