activity/src/view/AEROSPACE2023/page5.vue

<template>
  <skeleton title="地址导航" titleLine="">
    <div class="location animate__animated animate__backInUp">
      <img src="./img/location.jpg" />
      <div class="head">
        <div class="location_icon" @click="toDaohang">
          <svg
            t="1691454235194"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4917"
            width="22"
            height="22"
          >
            <path
              d="M97.535919 458.060507c-20.485567 9.580193-33.399691 29.584806-33.691333 52.195779-0.290619 22.603811 12.085246 42.944068 32.307823 53.06252l243.028059 121.499192 121.499192 243.013733c9.973142 19.946284 30.007431 32.32215 52.283784 32.32215 22.944572 0 43.256176-12.898775 52.981678-33.69031L960.158485 83.662445l-11.661597-8.16803-8.165983-11.647271L97.535919 458.060507zM93.662705 510.649236c0.145309-11.254322 6.318916-20.813025 16.510022-25.587771l765.934456-358.2595L347.348498 655.567813 109.489158 536.645306C99.429035 531.615757 93.517395 521.896394 93.662705 510.649236zM538.921651 913.824715c-4.833075 10.338463-14.529925 16.511046-25.958208 16.511046-11.08036 0-20.645203-5.910617-25.611308-15.839757L368.430652 676.649967l528.758686-528.751522L538.921651 913.824715z"
              fill="#ffffff"
            ></path>
          </svg>
          <div style="font-size: 12px; height: 1em">路线</div>
        </div>
        <p style="padding: 1.2em 0">西安航天国际会议中心<br />东方红会议厅</p>
      </div>
    </div>

    <div class="bg bg5 animate__animated animate__backInUp">
      <p class="duanluo">联系人：王经理 18991696905</p>
      <p class="duanluo">嘉宾入场时间：8月22日 14:30</p>
      <p class="duanluo">会议中心电话：85832260</p>
      <div class="duanluo">
        <p class="left">地址：</p>
        <p class="right">
          航天基地京东大道和少陵路十字西北角西安航天国际会议中心东方红会议厅
        </p>
      </div>
    </div>
  </skeleton>
</template>
<script setup>
import skeleton from './skeleton.vue';

function toDaohang() {
  if (!window.wx) return;
  window.wx.checkJsApi({
    jsApiList: ['openLocation'],
    success: () => {
      //打开指定位置
      window.wx.openLocation({
        latitude: 34.140384, // 纬度，浮点数，范围为90 ~ -90
        longitude: 108.98944, // 经度，浮点数，范围为180 ~ -180。
        name: '航天基地京东大道和少陵路十字西北角西安航天国际会议中心东方红会议厅', // 位置名
        address: '', // 地址详情说明
        scale: 18, // 地图缩放级别,整型值,范围从1~28。默认为最大
        infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },
  });
}
</script>
<style lang="scss">
// 动画库
@import url(./sass/animation.scss);
@import url(./sass/base.scss);

.location {
  position: relative;
  font-family: PingFangSC-Regular, PingFang SC;
  text-align: center;
  background: #0007461a;
  line-height: 1.5em;
  width: 68vw;
  height: 68vw;
  padding: 10px;
  margin: 0 auto;
  border-radius: 6px;
  border: 1px solid;
  border-image: linear-gradient(
      225deg,
      rgba(50, 197, 255, 1),
      rgba(25, 52, 178, 1)
    )
    1 1;

  img {
    width: 100%;
    border-radius: 6px;
  }

  .head {
    position: absolute;
    width: 100%;
    height: 30%;
    left: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    background-color: #fff;
    color: #000;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;

    .location_icon {
      position: absolute;
      border-radius: 50%;
      right: 10%;
      color: #fff;
      background-color: #1360fc;
      width: 46px;
      height: 46px;
      margin-top: -2.5em;
      line-height: 1.1em;
      text-align: center;
      padding-top: 5px;
    }
  }
}

.bg5 {
  .duanluo {
    text-indent: 0 !important;

    .left,
    .right {
      display: inline-block;
      width: 3.3em;
      vertical-align: top;
    }

    .right {
      width: calc(100% - 3.3em);
    }
  }
}
</style>