<template>
  <div class="home">
   <nav-bar url="/Hospital"/>
    <div class="bj"></div>
    <div class="nav">
      <router-link to="Hospital_dh1" class="on">院外导航</router-link>
      <router-link to="Hospital_dh">院内展示</router-link>
    </div>

       <!-- <iframe
           src="https://surl.amap.com/eBLiqjLXen1"
  class="kuangjia"
  frameborder="0"
           ></iframe> -->
           <img src="../assets/yw.png" class="kuangjiaimg" @click="goToNavigation"/>
    <!-- <iframe
        src="https://map.qq.com/?addr=%E5%AE%81%E5%A4%8F%E5%9B%9E%E6%97%8F%E8%87%AA%E6%B2%BB%E5%8C%BA%E9%93%B6%E5%B7%9D%E5%B8%82%E5%85%B4%E5%BA%86%E5%8C%BA%E6%B8%85%E5%92%8C%E5%8D%97%E8%A1%97895%E5%8F%B7&isopeninfowin=1&markertype=1&name=%E6%AD%A6%E8%AD%A6%E5%AE%81%E5%A4%8F%E6%80%BB%E9%98%9F%E5%8C%BB%E9%99%A2&pointx=106.286988&pointy=38.438314&ref=pcmap&type=marker"
        class="kuangjia"></iframe> -->
<div class="nav-button">
  <button @click="goToNavigation">一键导航到医院</button>
</div>
  </div>
</template>


<script>
// @ is an alias to /src
export default {
  components: {},
  mounted() {
    console.log(this.$route.meta.title);
    this.title = this.$route.meta.title;
  },
  data() {
    return {
      active: 0,
      title: "",

    };
  },
  methods: {
    selected: function (listt) {
      this.listton = listt;
    },
    showPopup() {
      this.show = true;
    },
     goToNavigation() {
    // 高德地图 Scheme（适用于移动端）
    const gaodeUrl = 'androidamap://viewMap?sourceApplication=appname&poiname=武警宁夏总队医院&lat=38.438314&lon=106.286988&dev=0';
    const gaodeWeb = 'https://uri.amap.com/navigation?to=106.286988,38.438314,武警宁夏总队医院&mode=car';

    // 判断是否安装高德地图 App
    const isAndroid = navigator.userAgent.includes('Android');
    const isIOS = /iPad|iPhone|iPod/.test(navigator.platform);

    if (isIOS || isAndroid) {
      // 尝试唤起 App
      window.location.href = gaodeUrl;

      // 如果没有打开，延迟跳转网页版
      setTimeout(() => {
        window.location.href = gaodeWeb;
      }, 1000);
    } else {
      // PC 端直接打开网页导航
      window.open(gaodeWeb);
    }
  }
  },
};
</script>


<style scoped lang="scss">
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -2;
}

.nav {
  background: #fff;
  display: flex;
  justify-content: center;
  margin: 15px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);

  a {
    font-size: 30px;
    height: 70px;
    line-height: 70px;
    padding: 0 30px;
    margin: 0 50px;
    position: relative;
    color: #666;
    text-decoration: none;
    font-weight: 500;
  }

  a.on {
    color: #3A9FA5;
    font-weight: 700;
  }

  a.on::after {
    content: "";
    width: 100%;
    height: 5px;
    background: #3A9FA5;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 2px 2px 0 0;
  }
}
.kuangjiaimg{
  width: 100%;
  height: auto; /* 高度自适应 */
  display: block; /* 去除图片底部空白 */
  object-fit: cover; /* 保持图片比例并填充容器 */
  margin-top: 100px;
}
.kuangjia {
  width: 100%;
  height: 85vh;
  border: 0px;

  z-index: -1;
}
.nav-button {
  position: fixed; /* 改为fixed定位 */
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%); /* 通过transform实现水平居中 */
  z-index: 100; /* 提高层级确保在最上层 */
}

.nav-button button {
  background: #46c3b0;
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 30px;
  font-size: 28px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  min-width: 300px; /* 设置最小宽度使按钮更明显 */
}
</style>
