feiniao-farm-h5/src/views/old_mini/home/index.vue

<template>
    <div class="home-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
        <!-- 地图 -->
        <div class="map-container" ref="mapContainer"></div>
        <!-- 天气遮罩 -->
        <div class="weather-mask" v-show="isExpanded"></div>
        <!-- 天气 -->
        <weather-info class="weather-info" @weatherExpanded="weatherExpanded"></weather-info>
        <!-- 浮动面板 -->
        <farm-floating-panel class="farm-floating-panel"></farm-floating-panel>
    </div>
</template>

<script setup>
import IndexMap from "./map/index.js";
import { onMounted, computed, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import weatherInfo from "@/components/weatherInfo.vue";
import farmFloatingPanel from "./components/farmFloatingPanel.vue";
const router = useRouter();

const store = useStore();
const tabBarHeight = computed(() => store.state.home.tabBarHeight);


const indexMap = new IndexMap();
const mapContainer = ref(null);
onMounted(() => {
    indexMap.initMap("POINT (113.61702297075017 23.584863449735067)", mapContainer.value);
});

const isExpanded = ref(false);
const weatherExpanded = (isExpandedValue) => {
    isExpanded.value = isExpandedValue;
}
</script>

<style lang="scss" scoped>
.home-index {
    position: relative;
    width: 100%;
    height: calc(100vh - 50px);
    overflow: hidden;
    .map-container {
        width: 100%;
        height: 100%;
    }
    .weather-mask{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.52);
    }
    .weather-info {
        position: absolute;
        top: 12px;
        left: 12px;
        width: calc(100% - 24px);
    }
    .farm-floating-panel{
        position: absolute;
        bottom: 0;
        left: 12px;
        width: calc(100% - 24px);
    }
}

</style>

<style lang="scss">
.marsGreenGradientPnl {
    color: #FFFFFF;
    padding: 4px 12px 4px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
}
</style>