guangdongVR_museum/code/src/views/home/mobile.vue

<template>
  <div class="home">
    <div class="map">
      <maps ref="mapsRef"/>
    </div>
    <vaside class="vaside" @changeMap='changeMap'/>
  </div>
</template>

<script setup>
import vaside from "./maside.vue";
import maps from "@/components/maps";
import emitter from "@/mitt/index";
import { ref, defineEmits, onMounted, watch, nextTick } from "vue";

import { Loading } from "@/components/UI";
import { useRouter, useRoute } from "vue-router";


// 得到子组件的切换列表信息

const mapsRef =ref(null);
const changeMap =(id)=>{
  // 把id传给子组件地图
  console.log(mapsRef.value);
  mapsRef.value.changeMap(id)
  // console.log('------------',id);
}


const router = useRouter();

const currentCity = ref('')

emitter.on("handleHover", (data) => {
  currentCity.value = data
});

emitter.on("handleClick", (data) => {
  if (data.num == "&nbsp;0") {
    return
  }
  router.push({ name: 'homelist', params: { id: data.rowid } })
});

onMounted(() => {
  Loading.hide()
});

</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  background-image: url("~@/assets/images/resource/home_bg.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .map {
    width: 100%;
    height: 100%;

    >div {
      width: 100%;
      height: 100%;
    }
  }

  .cityname {
    position: absolute;
    right: calc(6% + 340px);
    bottom: 10%;
    font-size: 20px;
    text-align: right;

    >p {
      &:first-of-type {
        font-size: 64px;
        font-weight: bold;
        color: transparent;
        line-height: 94px;
        -webkit-text-stroke: 2px var(--main-color);
        text-stroke: 2px var(--main-color);
      }

      &:last-of-type {
        font-size: 92px;
        font-weight: bold;
        color: var(--main-color);
      }
    }
  }

  .vaside {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
  }
}

@media screen and (max-width: 1000px) {}
</style>