YangZhouDaYunHeDaDu/src/components/HotspotDialog-1.vue

<template>
  <div
    :class="[
      'hotspot-dialog-1',
      isHYM && 'hym',
      isDDGQ && 'ddgq',
      isDDLS && 'ddls',
      isHC && 'hc',
      isHY && 'hy',
      isQY && 'qy',
    ]"
  >
    <img
      class="back"
      draggable="false"
      src="@/assets/images/btn-return.png"
      @click="close"
    >

    <!-- 曲苑 -->
    <template v-if="isQY">
      <div
        :class="['qy', qyHover && 'hover']"
        @mouseover="qyHover = true"
        @click="qyDetailVisbile = true"
        @mouseout="
          () => {
            if (qyDetailVisbile) return;
            qyHover = false;
          }
        "
      >
        <div class="hotspot-dialog-1__label label">
          戏台
        </div>
      </div>
      <div
        v-if="qyHover"
        class="qy-hover-bg"
      />

      <div
        :class="['ssz', sszHover && 'hover']"
        @mouseover="sszHover = true"
        @click="sszDetailVisbile = true"
        @mouseout="
          () => {
            if (sszDetailVisbile) return;
            sszHover = false;
          }
        "
      >
        <div class="hotspot-dialog-1__label label">
          砂石柱
        </div>
      </div>
      <div
        v-if="sszHover"
        class="ssz-hover-bg"
      />

      <!-- label 详情 -->
      <div
        v-if="qyDetailVisbile"
        :class="['hotspot-dialog-1__info box']"
      >
        <img
          draggable="false"
          src="@/assets/images/icon_cancel-min.png"
          @click="
            () => {
              qyDetailVisbile = false;
              qyHover = false;
            }
          "
        >
        <img
          draggable="false"
          src="@/assets/images/hotspot-relic/Maskgroup-min.jpg"
        >
        <p>戏台藻井</p>
      </div>

      <div
        v-if="sszDetailVisbile"
        :class="['hotspot-dialog-1__info box']"
      >
        <img
          draggable="false"
          src="@/assets/images/icon_cancel-min.png"
          @click="
            () => {
              sszDetailVisbile = false;
              sszHover = false;
            }
          "
        >
        <img
          draggable="false"
          src="@/assets/images/hotspot-relic/image23-min.jpg"
        >
        <p>沙石柱</p>
      </div>
    </template>

    <!-- 航运 -->
    <template v-if="isHY">
      <div
        :class="['hy', hyHover && 'hover']"
        @mouseover="hyHover = true"
        @click="hyDetailVisbile = true"
        @mouseout="
          () => {
            if (hyDetailVisbile) return;
            hyHover = false;
          }
        "
      >
        <div class="hotspot-dialog-1__label label">
          聊城古船
        </div>
      </div>
      <div
        v-if="hyHover"
        class="hy-hover-bg"
      />

      <div
        :class="['hy2', hy2Hover && 'hover']"
        @mouseover="hy2Hover = true"
        @click="hy2DetailVisbile = true"
        @mouseout="
          () => {
            if (hy2DetailVisbile) return;
            hy2Hover = false;
          }
        "
      >
        <div class="hotspot-dialog-1__label label">
          菏泽沉船
        </div>
      </div>
      <div
        v-if="hy2Hover"
        class="hy2-hover-bg"
      />

      <div
        :class="['hy3', hy3Hover && 'hover']"
        @mouseover="hy3Hover = true"
        @click="hy3DetailVisbile = true"
        @mouseout="
          () => {
            if (hy3DetailVisbile) return;
            hy3Hover = false;
          }
        "
      >
        <div class="hotspot-dialog-1__label label">
          磁县漕船
        </div>
      </div>
      <div
        v-if="hy3Hover"
        class="hy3-hover-bg"
      />

      <!-- label 详情 -->
      <div
        v-if="hyDetailVisbile"
        :class="['hotspot-dialog-1__info box']"
      >
        <img
          draggable="false"
          src="@/assets/images/icon_cancel-min.png"
          @click="
            () => {
              hyDetailVisbile = false;
              hyHover = false;
            }
          "
        >
        <img
          draggable="false"
          src="@/assets/images/hotspot-relic/pic_boat3-min.jpg"
        >
        <p>聊城古船</p>
      </div>
      <div
        v-if="hy2DetailVisbile"
        :class="['hotspot-dialog-1__info box']"
      >
        <img
          draggable="false"
          src="@/assets/images/icon_cancel-min.png"
          @click="
            () => {
              hy2DetailVisbile = false;
              hy2Hover = false;
              startBgAudio();
            }
          "
        >
        <video
          autoplay
          controls
          src="@/assets/videos/hotspot-relic/hzcc.mp4"
          @play="stopBgAudio"
          @ended="startBgAudio"
        />
        <p>菏泽沉船</p>
      </div>
      <div
        v-if="hy3DetailVisbile"
        :class="['hotspot-dialog-1__info box']"
      >
        <img
          draggable="false"
          src="@/assets/images/icon_cancel-min.png"
          @click="
            () => {
              hy3DetailVisbile = false;
              hy3Hover = false;
            }
          "
        >
        <img
          draggable="false"
          src="@/assets/images/hotspot-relic/pic_boat2-min.jpg"
        >
        <p>磁县漕船</p>
      </div>

      <!-- <div
        :class="['icon-9', openedBoxList.includes(11) && 'open']"
        @click="goRelicDetail(11)"
      />
      <div
        :class="['icon-10', openedBoxList.includes(12) && 'open']"
        @click="goRelicDetail(12)"
      /> -->
    </template>

    <!-- 河畅 -->
    <template v-if="isHC">
      <div
        :class="['thh', thhHover && 'hover']"
        @mouseover="thhHover = true"
        @click="thhDetailVisbile = true"
        @mouseout="
          () => {
            if (thhDetailVisbile) return;
            thhHover = false;
          }
        "
      >
        <div class="hotspot-dialog-1__label label">
          通惠河
        </div>
      </div>
      <div
        v-if="thhHover"
        class="thh-hover-bg"
      />
      <!-- label 详情 -->
      <div
        v-if="thhDetailVisbile"
        :class="['hotspot-dialog-1__info']"
      >
        <img
          draggable="false"
          src="@/assets/images/icon_cancel-min.png"
          @click="
            () => {
              thhDetailVisbile = false;
              thhHover = false;
              startBgAudio();
            }
          "
        >
        <img
          draggable="false"
          src="@/assets/images/box3-min.png"
        >
        <video
          autoplay
          controls
          src="@/assets/videos/scene-3-hover.mp4"
          style="
            position: absolute;
            top: 50px;
            left: 30px;
            width: calc(100% - 60px);
            height: calc(100% - 80px);
            object-fit: cover;
          "
          @play="stopBgAudio"
          @ended="startBgAudio"
        />
        <p>河畅</p>
      </div>
      <!-- <div
        :class="['icon-7', openedBoxList.includes(9) && 'open']"
        @click="goRelicDetail(9)"
      />
      <div
        :class="['icon-8', openedBoxList.includes(10) && 'open']"
        @click="goRelicDetail(10)"
      /> -->
    </template>

    <!-- 大都揽胜 -->
    <template v-if="isDDLS">
      <div
        :class="['qss', qssHover && 'hover']"
        @mouseover="qssHover = true"
        @click="qssDetailVisbile = true"
        @mouseout="
          () => {
            if (qssDetailVisbile) return;
            qssHover = false;
          }
        "
      >
        <div class="hotspot-dialog-1__label label">
          庆寿寺双塔
        </div>
      </div>
      <div
        v-if="qssHover"
        class="qss-hover-bg"
      />
      <!-- label 详情 -->
      <div
        v-if="qssDetailVisbile"
        class="hotspot-dialog-1__qss"
      >
        <img
          draggable="false"
          src="@/assets/images/icon_cancel-min.png"
          @click="
            () => {
              qssDetailVisbile = false;
              qssHover = false;
            }
          "
        >
        <img
          draggable="false"
          src="@/assets/images/pic_part3-min.png"
        >
      </div>

      <!-- <div
        :class="['icon-5', openedBoxList.includes(6) && 'open']"
        @click="goRelicDetail(6)"
      />
      <div
        :class="['icon-6', openedBoxList.includes(7) && 'open']"
        @click="goRelicDetail(7)"
      /> -->
    </template>

    <!-- 大都宫阙 -->
    <template v-if="isDDGQ">
      <img
        :class="['zmf-back', dmdDetailVisbile && 'move']"
        src="@/assets/images/zhaomengfuback-min.png"
      >

      <div
        :class="['dmd', dmdHover && 'hover']"
        @mouseover="dmdHover = true"
        @click="dmdDetailVisbile = true"
        @mouseout="
          () => {
            if (dmdDetailVisbile) return;
            dmdHover = false;
          }
        "
      >
        <div
          class="hotspot-dialog-1__label label"
        >
          大明殿
        </div>
      </div>
      <div
        v-if="dmdHover"
        class="dmd-hover-bg"
      />
      <!-- label 详情 -->
      <div
        v-if="dmdDetailVisbile"
        :class="['hotspot-dialog-1__info box', dmdDetailVisbile && 'fade-in']"
      >
        <img
          draggable="false"
          src="@/assets/images/icon_cancel-min.png"
          @click="
            () => {
              dmdDetailVisbile = false;
              dmdHover = false;
              startBgAudio();
            }
          "
        >
        <video
          autoplay
          controls
          src="@/assets/videos/scene-2-hover.mp4"
          style="width: 100%"
          @play="stopBgAudio"
          @ended="startBgAudio"
        />
        <p>忽必烈召见赵孟頫</p>
      </div>

      <!-- <div
        :class="['icon-3', openedBoxList.includes(2) && 'open']"
        @click="goRelicDetail(2)"
      />
      <div
        :class="['icon-4', openedBoxList.includes(3) && 'open']"
        @click="goRelicDetail(3)"
      /> -->
    </template>

    <!-- 雄伟帝都 -->
    <template v-if="isHYM">
      <!-- 雄伟帝都-内城门 -->
      <div
        :class="['hym-ncm', hymHover && 'hover']"
        @mouseover="hymHover = true"
        @click="hymDetailVisbile = true"
        @mouseout="
          () => {
            if (hymDetailVisbile) return;
            hymHover = false;
          }
        "
      >
        <div
          class="hotspot-dialog-1__label label"
        >
          和义门
        </div>
      </div>
      <div
        v-if="hymHover"
        class="hym-hover-bg"
      />
      <!-- label 详情 -->
      <div
        v-if="hymDetailVisbile"
        class="hotspot-dialog-1__info"
      >
        <img
          draggable="false"
          src="@/assets/images/icon_cancel-min.png"
          @click="
            () => {
              hymDetailVisbile = false;
              hymHover = false;
            }
          "
        >
        <img
          draggable="false"
          src="@/assets/images/box_2-min.png"
        >
        <p>元大都和义门复原图</p>
      </div>

      <!-- 雄伟帝都-外城门 -->
      <div
        v-if="false"
        :class="['hym-wcm', hymHover2 && 'hover']"
        @mouseover="hymHover2 = true"
        @click="hymDetail2Visbile = true"
        @mouseout="
          () => {
            if (hymDetail2Visbile) return;
            hymHover2 = false;
          }
        "
      >
        <div
          class="hotspot-dialog-1__label label"
        >
          和义门
        </div>
      </div>
      <div
        v-if="hymHover2"
        class="hym2-hover-bg"
      />
      <!-- label 详情 -->
      <div
        v-if="hymDetail2Visbile"
        class="hotspot-dialog-1__cm"
      >
        <img
          draggable="false"
          src="@/assets/images/icon_cancel-min.png"
          @click="
            () => {
              hymDetail2Visbile = false;
              hymHover2 = false;
            }
          "
        >
        <img
          draggable="false"
          src="@/assets/images/box_1-min.png"
        >
      </div>

      <!-- <div
        :class="['icon-1', openedBoxList.includes(1) && 'open']"
        @click="goRelicDetail(1)"
      />
      <div
        :class="['icon-2', openedBoxList.includes(0) && 'open']"
        @click="goRelicDetail(0)"
      /> -->
    </template>

    <MsgContent
      v-if="currentMsg.length"
      v-model:curIndex="curMsgIndex"
      :list="currentMsg"
      @back="close"
    />
  </div>
</template>

<script setup>
import { ref, computed, reactive, inject } from "vue"
import MsgContent from "./MsgContent.vue"
import { useRoute, useRouter } from "vue-router"

const startBgAudio = inject("startBgAudio")
const stopBgAudio = inject("stopBgAudio")
const route = useRoute()
const router = useRouter()
const props = defineProps(["relicInfo"])
const emits = defineEmits(["close", "openRelicDetail"])
const hymHover = ref(false)
const hymDetailVisbile = ref(false)
const hymHover2 = ref(false)
const hymDetail2Visbile = ref(false)

const dmdHover = ref(false)
const dmdDetailVisbile = ref(false)

const qssHover = ref(false)
const qssDetailVisbile = ref(false)

const thhHover = ref(false)
const thhDetailVisbile = ref(false)

const hyHover = ref(false)
const hyDetailVisbile = ref(false)
const hy2Hover = ref(false)
const hy2DetailVisbile = ref(false)
const hy3Hover = ref(false)
const hy3DetailVisbile = ref(false)

const qyHover = ref(false)
const qyDetailVisbile = ref(false)
const sszHover = ref(false)
const sszDetailVisbile = ref(false)

const openedBoxList = reactive([])

// 曲苑
const isQY = computed(() => ["_niQSUEYt"].includes(props.relicInfo.name))
// 河畅
const isHC = computed(() => ["_Kd6Z3CsH"].includes(props.relicInfo.name))
// 航运
const isHY = computed(() =>
  ["_FRCO9MGR", "_L4MKbWoY", "_XanP0Hqt"].includes(props.relicInfo.name)
)
// 雄伟帝都
const isHYM = computed(() =>
  ["_7TQihSnc", "_CigA1HhG"].includes(props.relicInfo.name)
)
// 大都宫阙
const isDDGQ = computed(() => ["_G9zT4Xx9"].includes(props.relicInfo.name))
// 大都揽胜
const isDDLS = computed(() =>
  ["_Frw1X3B8", "_IR4EkN4Z"].includes(props.relicInfo.name)
)

const goRelicDetail = (idx) => {
  emits("openRelicDetail", idx)
  if (!openedBoxList.includes(idx)) {
    openedBoxList.push(idx)
  }
  // router.replace({
  //   name: 'PanoView',
  //   query: {
  //     ...route.query,
  //     hotspot: props.relicInfo.name
  //   }
  // }).then(() => {
  //   router.push({
  //     name: 'RelicDetail',
  //     query: {
  //       sceneIdx: route.query.sceneIdx,
  //       cameraIdx: route.query.cameraIdx,
  //       relicIdx: idx,
  //       hot: 1
  //     }
  //   })
  // })
}

const curMsgIndex = 0
const currentMsg = computed(() => {
  // 曲苑
  if (isQY.value) {
    if (qyDetailVisbile.value) {
      return [
        "从戏台内部观看，顶部藻井全为木质结构，顶部看上去有点像八卦形状，上边两层全为从大到小的八角形，到了最下一层又巧妙地回归到四方四正的四边形，整座戏台没有使用一根钉子，全部由木材榫卯结合而成。",
      ]
    }
    if (qyHover.value) {
      return [
        "戏台建在一个约高一米的砖台上，前面两根石柱，一根刻有“蒙大元国至元二十年岁次癸未季春竖”十六个大字，另一根刻着“维大元国至治元年岁次辛酉孟秋月下旬九日立石”二十一个大字。两侧后1/3及后面有围墙。舞台的左、前、右三面都可以观看演出。石柱和围墙之上有四根相交的大额枋，形成一个方形木框，额枋之上是巨大的斗拱，通过井字形框架撑起单檐歇山顶。",
      ]
    }
    if (sszHover.value || qyDetailVisbile.value) {
      return ["戏台上有元代刻石的砂石柱（蒙大元国至元二十年岁次癸未季春竖"]
    }
    return [
      "17:55方寸戏台演绎人生百态，折射出普通人的情感、精神与现实生活。离开雅集活动现场，赵孟頫来到一座表演元曲的戏台，舞台上大都的著名演员正在进行元曲表演，精彩之处不时引得台下阵阵掌声。",
    ]
  }

  // 河畅
  if (isHC.value) {
    // if (thhDetailVisbile.value) {
    //   return [
    //     '通惠河是元代挖建的漕运河道，由郭守敬主持修建。于至元二十九年（1292）春天动工，至元三十年（1293）工程完成，总长 164 里，沿河设坝闸10 处。从此以后，南来的船舶可直驶到大都城中，作为船舶终点码头的积水潭上登时桅樯如林，热闹非凡。通惠河不但解决了运粮问题，而且促进了南货北销，繁荣了大都城的经济。'
    //   ]
    // }

    return [
      "通惠河是元代挖建的漕运通道，由郭守敬主持修建。于至元二十九年（1292）春天动工，次年工程完工，全长164里，沿线设坝闸10处。从此以后，南来的船舶可直驶到大都城中，作为船舶终点码头的积水潭上登时桅樯如林，热闹非凡。通惠河不但解决了运粮问题，而且促进了南货北销，繁荣了大都城的经济。",
    ]
  }

  // 航运
  if (isHY.value) {
    // if (hyDetailVisbile.value) {
    //   return ['<p>船长126cm* 船宽23cm* 船高80 cm</p><p>隔舱板及肋骨：江西小叶樟</p><p>甲板、船壳外板：柚木、梢木</p><p>船附件：菠萝格、龙眼木</p>']
    // }
    if (hyDetailVisbile.value) {
      return [
        "<p>航行区域：山东（鲁运河流域）</p><p>聊城古船于2002年出土于会通河聊城城区闸口北50米处，残船长17.5米，宽约4米，共11个舱，为元代官府督造的典型漕船。聊城古船于2002年出土于会通河聊城城区闸口北50米处，残船长17.5米，宽约4米，共11个舱，为元代官府督造的典型漕船。</p><p>古船已残，木料为杉木，但船底和结构基本保存，形状还是比较清楚，长条木板拼接成平底船底，两端另结档板，系平底船，具有元代运粮船的特征。</p>",
      ]
    }
    // if (hy2DetailVisbile.value) {
    //   return ['2010 年发现的菏泽元代沉船，向世人展示了一处完整的内河沉船遗迹。该船为木质单桅货船，船型狭长，方首，方尾，平底，共 12 个舱，主体用材为杉木。据专家研究，这艘沉船发现的位置正在元朝的黄河北支上，而黄河北支此时与会通河相接，当时凡从运河北上元大都或南下去往杭州方向的船只，在徐州到济宁段都需要经过这段河道。']
    // }
    // if (hy3DetailVisbile.value) {
    //   return ['<p>船长108cm* 船宽28cm* 船高26cm</p><p>隔舱板、肋骨：江西小叶樟； 甲板、船壳外板：柚木、梢木；</p><p>船附件：菠萝格、龙眼木；</p>']
    // }
    if (hy3DetailVisbile.value) {
      return [
        "<p>元末运粮官船，1975年河北磁县漳河故道附近出土，共六艘，有的船只尾部还烫有“漳河分省粮船”等字。六艘船都已残破，但仍可看出方头平底，分为数舱。其中最大的五号船，残长16.6米，十一舱，也是平衡舵。</p>",
      ]
    }
    return []
  }

  if (hymHover.value || hymHover2.value) {
    if (hymDetail2Visbile.value) {
      return [
        "1969年，拆除北京西直门箭楼时发现了压在明代箭楼之下的元大都和义门瓮城城门，门洞内有元至正十八年（1358年）的题记。城楼建筑已被拆去，只余城门墩台和门洞。",
      ]
    }
    if (hymDetailVisbile.value) {
      // 内城门图文详情
      return [
        "听闻大都城的最高设计者刘秉忠正在和义门，“我”决定前往和义门，当面拜见，向其详细了解大都城的规划设计，并由外及内（外城、皇城、宫城）俯瞰大都城的雄伟壮阔。",
      ]
    }
    if (hymHover.value) {
      // 内城门
      return [
        "1969年，拆除北京西直门箭楼时发现了压在明代箭楼之下的元大都和义门瓮城城门，门洞内有元至正十八年（1358年）的题记。城楼建筑已被拆去，只余城门墩台和门洞。和义门今尚存遗址，位于北京西直门处。城门残存高22米，门洞长9.92米、宽4.62米，内券高6.68米，外券高4.56米。是研究元代城市建设的珍贵资料。",
      ]
    }
    return [
      "1969年，拆除北京西直门箭楼时发现了压在明代箭楼之下的元大都和义门瓮城城门，门洞内有元至正十八年（1358年）的题记。城楼建筑已被拆去，只余城门墩台和门洞。",
    ]
  }

  if (isDDLS.value) {
    // 大都揽胜
    if (qssDetailVisbile.value) {
      return [
        "双塔寺，即大庆寿寺。 金末元初，佛教禅宗中的临济宗上层僧侣海云就长期居住在大庆寿寺（双塔寺）。从元世祖忽必烈到燕京的官员们，都对海云尊崇备至，大都城的设计师刘秉忠也是经由海云推荐成为世祖皇帝的幕僚，先后设计规划了元上都、元大都这两座宏伟的都城。",
      ]
    }
    return [
      "接受完世祖皇帝的召见，“我”走出大明殿。观赏大都建筑之美，游览城内的皇家寺庙，拜访、参观各类官署机构。",
    ]
  }

  if (isDDGQ.value) {
    // 大都宫阙
    if (dmdDetailVisbile.value) {
      return [
        "“我”奉旨进入大明殿内，参见世祖皇帝忽必烈。得到其称许：“果真是一表人才，丰神俊朗，就如那九天之上的仙人啊！朕授予你兵部郎中之职，愿你尽忠职守。”",
      ]
    }
    return [
      "接到诏令，“我”便从和义门下来，自西向东，沿外城、皇城、宫城行进。最后从宫城南部崇天门来到大明殿，接受世祖皇帝忽必烈的召见。",
    ]
  }

  if (isHYM.value) {
    // 雄伟帝都
    return [
      "平地而起的元大都，是“大汗之城”，也是“天下大都”。 元世祖至元四年（1267）正月丁未，元大都城破土动工。刘秉忠以太保兼领中书省而总负新都城兴造之责。至元十一年（1274），元大都宫城建成，世祖皇帝忽必烈御正殿，在此接受皇太子和诸王百官的朝贺。两年之后的至元十三年（1276），元大都城建成。",
    ]
  }
  return []
})

const close = () => {
  router
    .replace({
      name: "PanoView",
      query: {
        ...route.query,
        hotspot: undefined,
      },
    })
    .then(() => {
      emits("close")
    })
}
</script>

<style lang="less" scoped>
.hotspot-dialog-1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;

  .zmf-back {
    position: absolute;
    top: 57%;
    left: 46.5%;
    z-index: 2;

    &.move {
      animation: zmfMoveToDMD linear 1.5s forwards;
    }
  }
  [class^="icon-"] {
    position: absolute;
    cursor: pointer;
    width: 70px;
    height: 70px;
    background-position: center;
    background-size: cover;
    background-image: url("@/assets/images/hotspot-relic/Doticon_close-min.png");
    z-index: 2;

    &:hover {
      animation: flashing linear 1s infinite reverse;
      background-image: url("@/assets/images/hotspot-relic/Doticon_open-min.png");
    }
    &.open {
      background-image: url("@/assets/images/hotspot-relic/Doticon_open-min.png");
    }
  }
  [class$="-hover-bg"] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }
  .icon-1 {
    left: 53%;
    bottom: 40%;
  }
  .icon-2 {
    right: 2.5%;
    bottom: 54%;
  }
  .icon-3 {
    left: 31%;
    bottom: 30%;
  }
  .icon-4 {
    right: 38%;
    bottom: 42.5%;
  }
  .icon-5 {
    left: 40%;
    bottom: 42%;
  }
  .icon-6 {
    bottom: 26.5%;
    right: 18.5%;
  }
  .icon-7 {
    left: 47%;
    bottom: 32%;
  }
  .icon-8 {
    bottom: 34.5%;
    right: 14%;
  }
  .icon-9 {
    left: 28%;
    bottom: 30.5%;
  }
  .icon-10 {
    right: 16%;
    bottom: 36.5%;
  }
  &.qy {
    background: url("@/assets/images/hotspot-relic/bg_quyuan-min.jpg") no-repeat
      center / cover;
  }
  &.hc {
    background: url("@/assets/images/hotspot-relic/bg_hechang-min.jpg")
      no-repeat center / cover;
  }
  &.hy {
    background: url("@/assets/images/hotspot-relic/bg_hangyun-min.jpg")
      no-repeat center / cover;
  }
  &.hym {
    background: url("@/assets/images/bg_part1-1-1-2-min.jpg") no-repeat center /
      cover;
  }
  &.ddgq {
    background: url("@/assets/images/bg_part1-2-min.jpg") no-repeat center /
      cover;

    .fade-in {
      animation: fadeIn linear 1.5s forwards;
    }
  }
  &.ddls {
    background: url("@/assets/images/bg_part1-3-min.jpg") no-repeat center /
      cover;
  }
  .qy {
    position: absolute;
    top: 18%;
    left: 45%;
    width: 29vw;
    height: 31vh;
    z-index: 1;

    .label {
      top: -25%;
      left: 47.5%;
    }
    &.hover {
      .label {
        display: flex;
      }
    }
  }
  .qy-hover-bg {
    background: url("@/assets/images/hotspot-relic/highline_xitai-min.png")
      no-repeat center / cover;
  }
  .ssz {
    position: absolute;
    top: 31%;
    right: 31.3%;
    width: 1.5%;
    height: 18vh;
    z-index: 1;

    .label {
      top: -25%;
      right: -100%;
    }
    &.hover {
      .label {
        display: flex;
      }
    }
  }
  .ssz-hover-bg {
    background: url("@/assets/images/hotspot-relic/highline_zhuzi-min.png")
      no-repeat center / cover;
  }
  .hy {
    position: absolute;
    left: 39%;
    bottom: 35%;
    width: 17vw;
    height: 10vh;
    z-index: 1;
    .label {
      top: -150%;
      left: 48.5%;
    }
    &.hover {
      .label {
        display: flex;
      }
    }
  }
  .hy2 {
    position: absolute;
    left: 55%;
    bottom: 23%;
    width: 19vw;
    height: 11vh;
    z-index: 1;
    .label {
      top: -60%;
      left: 17%;
    }
    &.hover {
      .label {
        display: flex;
      }
    }
  }
  .hy3 {
    position: absolute;
    right: 21%;
    bottom: 33%;
    width: 19vw;
    height: 11vh;
    z-index: 1;

    .label {
      top: -120%;
      right: 18%;
    }
    &.hover {
      .label {
        display: flex;
      }
    }
  }
  .hy-hover-bg {
    background: url("@/assets/images/hotspot-relic/highline_boat2-min.png")
      no-repeat center / cover;
  }
  .hy2-hover-bg {
    background: url("@/assets/images/hotspot-relic/highline_boat1-min.png")
      no-repeat center / cover;
  }
  .hy3-hover-bg {
    background: url("@/assets/images/hotspot-relic/highline_boat3-min.png")
      no-repeat center / cover;
  }
  .bg-hover:hover {
    // cursor: pointer;
  }
  .thh {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 51vh;
    z-index: 1;

    .label {
      top: -15%;
      left: 48.5%;
    }
    &.hover {
      .label {
        display: flex;
      }
    }
  }
  .thh-hover-bg {
    background: url("@/assets/images/hotspot-relic/sign_highline_bg_part2-1-min.png")
      no-repeat center / cover;
  }
  .qss {
    position: absolute;
    top: 5vh;
    left: 48vw;
    right: 30vw;
    height: 45vh;
    z-index: 1;

    .label {
      top: 8%;
      left: 35%;
    }
    &.hover {
      .label {
        display: flex;
      }
    }
  }
  .qss-hover-bg {
    background: url("@/assets/images/sign_highline_part1-3-min.png") no-repeat
      center / cover;
  }
  &__qss {
    position: absolute;
    top: 10vh;
    left: 25%;
    z-index: 3;

    img:first-child {
      position: absolute;
      top: -33px;
      right: -33px;
      cursor: pointer;
    }
  }
  .dmd {
    position: absolute;
    top: 20vh;
    left: 26vw;
    right: 28vw;
    height: 35vh;
    z-index: 1;

    .label {
      top: -28%;
      left: 47%;
    }
    &.hover {
      .label {
        display: flex;
      }
    }
  }
  .dmd-hover-bg {
    background: url("@/assets/images/sign_highline_part1-2-min.png") no-repeat
      center / cover;
  }
  // 外城门
  .hym-wcm {
    position: absolute;
    top: 30vh;
    left: 6vw;
    right: 20vw;
    height: 50vh;
    z-index: 1;

    .label {
      top: 1%;
      left: 35%;
    }
    &.hover {
      .label {
        display: flex;
      }
    }
  }
  // 外城门
  .hym-ncm {
    position: absolute;
    top: 13vh;
    left: 10vw;
    width: 68vw;
    height: 64vh;
    z-index: 2;

    .label {
      top: -10%;
      left: 70%;
    }
    &.hover {
      .label {
        display: flex;
      }
    }
  }
  .hym-hover-bg {
    background: url("@/assets/images/sign_highline_part1-1-2-1.png") no-repeat
      center / cover;
  }
  .hym2-hover-bg {
    background: url("@/assets/images/highline_bg_part1-1-1-2-min.png") no-repeat
      center / cover;
  }
  .back {
    position: absolute;
    top: 64px;
    left: 41px;
    cursor: pointer;
  }
  &__info {
    position: absolute;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;

    &.box {
      padding: 25px 20px;
      border: 1px solid #ffe88b;
      background: rgba(145, 129, 117, 0.25);

      &::after {
        content: "";
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-46%);
        width: 406px;
        height: 50px;
        background: linear-gradient(
          270deg,
          rgba(255, 236, 135, 0) 9%,
          #ffec87 25%,
          #ffec87 50%,
          #ffec87 79%,
          rgba(255, 236, 135, 0) 100%
        );
      }
      p {
        top: -8px;
      }
      img:first-child {
        top: -40px;
      }
    }
    img:first-child {
      position: absolute;
      top: -10px;
      right: -33px;
      cursor: pointer;
      z-index: 2;
    }
    p {
      position: absolute;
      left: 0;
      right: 0;
      top: 2.5%;
      text-align: center;
      color: #724b26;
      font-size: 22px;
      font-family: Source Han Serif CN, Source Han Serif CN;
      font-weight: 800;
      z-index: 1;
    }
  }
  &__cm {
    position: absolute;
    top: 10vh;
    left: calc(32vw + 41px);
    z-index: 3;

    img:first-child {
      position: absolute;
      top: -10px;
      right: 0;
      cursor: pointer;
    }
  }
  &__label {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 41px;
    height: 181px;
    font-size: 18px;
    color: #724b26;
    letter-spacing: 1px;
    writing-mode: vertical-lr;
    font-weight: 800;
    font-family: Source Han Serif CN, Source Han Serif CN;
    cursor: pointer;
    animation: flashing linear 1.5s infinite reverse;
    background: url("@/assets/images/Group-425.png") no-repeat center / contain;
    z-index: 1;
  }
}
.hover {
  &:hover {
    cursor: pointer;
  }
}

@keyframes flashing {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes zmfMoveToDMD {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-35%) scale(0.7);
    opacity: 0.8;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-70%) scale(0.5);
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>