caimei-authentic-website-ross/pages/contact/index.vue

<template>
  <div>
    <!-- banner区域 start -->
    <div class="swiper-container banner" id="banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="/img/contact-banner.jpg" alt="" />
        </div>
      </div>
    </div>
    <!-- banner区域 end -->

    <div class="main">
      <div class="tabbar">
        <div class="container">
          <template v-for="(tab, index) in tabList">
            <div class="tab" :class="{ on: tab.id === current }" :key="tab.en" @click="onTabChange(tab)">
              <div class="name" v-text="tab.name"></div>
              <div class="en" v-text="tab.en"></div>
            </div>
            <div class="line" :key="index" v-if="index < 2"></div>
          </template>
        </div>
      </div>

      <div class="tab-content container">
        <!-- 联系方式 -->
        <div class="tab-item contact">
          <div class="section-title">
            <img src="/img/contact-title-contact.png" alt="联系方式" />
            <h3>联系方式</h3>
          </div>
          <div class="content">
            <div class="section">
              <div class="contact-logo"><img src="/img/contact-logo.png" alt="acebelle生物科技（深圳）有限公司" /></div>
              <div class="name">ACEBELLE生物科技（深圳）有限公司</div>
              <div class="subname">（ROS'S中国区总代理）</div>
              <ul>
                <li><div class="address">深圳市罗湖区东晓街道独树社区布心路3008号水贝珠宝总部大厦B座6B01</div></li>
                <li>
                  <a href="tel:0755-23769340" class="phone">0755-23769340<span>（点击拨号）</span></a>
                </li>
                <li><div class="website">http://www.spainross.com</div></li>
              </ul>
            </div>
            <div class="map" v-show="showMap"><img src="/img/contact-map.png" alt="acebelle生物科技（深圳）有限公司" /></div>
            <div class="map" id="map" v-show="!showMap">地图区域</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: '首页-艾斯佰丽官网-联系方式',
      script: [{ src: 'https://webapi.amap.com/loader.js' }],
    }
  },
  data() {
    return {
      tabList: [],
      current: 1,
      showMap: false,
    }
  },
  asyncData() {
    return {
      tabList: [
        {
          id: 1,
          name: '联系方式',
          en: 'contact',
          url: '/contact.html',
        },
        {
          id: 2,
          name: '人才招聘',
          en: 'join us',
          url: '/contact/job.html',
        },
        {
          id: 3,
          name: '在线咨询',
          en: 'chat with us',
          url: '/contact/consult.html',
        },
      ],
    }
  },
  mounted() {
    new Swiper('#banner', {
      loop: false, // 循环模式选项
      showMapInfo: false,
    })
    this.initMap()
  },
  methods: {
    onTabChange(tab) {
      window.open(tab.url, '_self')
    },
    initMap() {
      console.log(window.AMapLoader)
      window.AMapLoader.load({
        key: 'ed0e0c030a16414f2a07cfbe350cb14a', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        Loca: {
          version: '2.0', // Loca 版本
        },
      })
        .then((AMap) => {
          const lnglat = new AMap.LngLat(114.124524, 22.574422)
          const map = new AMap.Map('map', {
            zoom: 17, //级别
            center: lnglat, //中心点坐标
          })
          const toolbar = new AMap.ToolBar()
          const scale = new AMap.Scale()
          map.addControl(toolbar)
          map.addControl(scale)
          const marker = new AMap.Marker({
            position: lnglat,
            title: '深圳市罗湖区东晓街道独树社区布心路3008号水贝珠宝总部大厦B座6B01',
          })
          map.add(marker)
        })
        .catch((e) => {
          console.error(e) //加载错误提示
          this.showMap = true
        })
    },
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .main {
    .tabbar {
      background: #eeeeee;
      height: 100px;

      .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
      }

      .line {
        height: 46px;
        width: 3px;
        background: #aaaaaa;
      }

      .tab {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        height: 100%;
        width: 16%;
        user-select: none;
        .name {
          font-size: 29px;
          font-weight: 400;
          color: #000000;
          text-align: center;
        }
        .en {
          font-size: 17px;
          font-weight: 300;
          color: #000000;
          text-align: center;
          margin-top: 10px;
          text-transform: uppercase;
        }

        &:hover {
          cursor: pointer;
        }

        &::after {
          content: '';
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 12px 8px 12px;
          border-color: transparent transparent #f3920d transparent;
          bottom: 0;
        }

        &.on {
          &::after {
            opacity: 1;
          }
          .name,
          .en {
            color: #f3920d;
          }
        }
      }
    }

    .tab-content {
      .contact {
        .content {
          display: flex;
          justify-content: space-between;
          .contact-logo {
            margin-bottom: 180px;
            img {
              display: block;
              width: 279px;
              height: 63px;
            }
          }

          .map {
            position: relative;
            width: 657px;
          }

          .name {
            font-size: 31px;
            font-weight: bold;
            color: #050001;
          }
          .subname {
            font-size: 25px;
            color: #050001;
            margin-top: 8px;
          }

          ul {
            margin-top: 40px;
            li {
              font-size: 20px;
              margin: 6px 0;

              .phone {
                span {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .main {
    .tabbar {
      background: #eeeeee;
      padding: 0 0.6rem;
      height: 0.8rem;

      .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
      }

      .line {
        height: 0.4rem;
        width: 0.02rem;
        background: #aaaaaa;
      }

      .tab {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        height: 100%;
        width: 24%;
        user-select: none;
        .name {
          font-size: 0.26rem;
          font-weight: 400;
          color: #000000;
          text-align: center;
        }
        .en {
          display: none;
        }

        &:hover {
          cursor: pointer;
        }

        &::after {
          content: '';
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 0.12rem 0.08rem 0.12rem;
          border-color: transparent transparent #f3920d transparent;
          bottom: 0;
        }

        &.on {
          &::after {
            opacity: 1;
          }
          .name,
          .en {
            color: #f3920d;
          }
        }
      }
    }

    .tab-content {
      .contact {
        .content {
          width: 6.7rem;
          margin: 0 auto;
          .contact-logo {
            margin-bottom: 0.6rem;
            img {
              display: block;
              width: 2.8rem;
              height: 0.63rem;
            }
          }

          font-size: 0;

          .name {
            font-size: 0.32rem;
            font-weight: bold;
            color: #050001;
            display: inline;
            line-height: 0.48rem;
          }
          .subname {
            font-size: 0.32rem;
            font-weight: bold;
            color: #050001;
            display: inline;
            line-height: 0.48rem;
          }

          ul {
            margin-top: 0.4rem;
            margin-bottom: 0.4rem;
            li {
              font-size: 0.28rem;
              line-height: 0.48rem;

              .phone {
                span {
                  color: #f3920d;
                }
              }
            }
          }

          .map {
            position: relative;
            height: 6rem;
            img {
              display: block;
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>