xinyang5yuan-web/pages/phone_about.vue

<template>
    <div class="bg-[#ffffff] pb-5">
        <div class="box_6 flex-col px-4 py-3">
            <div class="group_1">
                <div class="flex section_4 justify-start items-center mb-2">
                    <div>
                        <img class="thumbnail_1 w-6 h-6" referrerpolicy="no-referrer" src="public/images/home.png" />
                    </div>
                    <div class="text_13 text-sm mt-1 sm:mt-0">您的位置：首页>医院概况</div>
                </div>
                <div class="text_14 text-center text-xl font-bold my-3">医院概况</div>
            </div>
        </div>
        <div class="z-10 px-4 mt-4">
            <img class="w-full mb-4" referrerpolicy="no-referrer" :src="hospitalInfo.image" />
            <div>
                <div class="flex flex-row items-center mb-2">
                    <div>
                        <img class="" referrerpolicy="no-referrer" src="public/images/k7.png" />
                    </div>
                    <div class="text-lg font-bold ml-3">医院介绍</div>
                </div>
                <div>
                    {{ hospitalInfo.description }}
                </div>
            </div>
        </div>
        <div class="z-10 px-4 mt-4">
            <div class="text-lg font-bold text-center">医院位置</div>
            <div>
                <BaseMap class="map" ref="mapRef" api-key="OBPBZ-D7ECN-LQPFJ-SZ7WE-VJGTJ-FQFNI" :center="centerVal" :zoom="18">
                    <!-- <MultiMarker ref="markerRef" :geometries="geometries" :styles="styles" :options="options">
                    </MultiMarker> -->
                    <MultiMarker @click="onClick" ref="markerRef" :geometries="geometries" :styles="styles">
                    </MultiMarker>
                    <InfoWindow ref="infoWindowRef"  @Closeclick="visible = false" :visible="visible" :position="centerVal" content="信阳市第五人民医院"
                        :options="{
                            offset: {
                                x: 0,
                                y: -20,
                            }
                        }"></InfoWindow>
                </BaseMap>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { BaseMap, MultiMarker, InfoWindow } from 'tlbs-map-vue';
import $api from '@/service/webRequest'
const router = useRouter()
const isShowInfoWindow = ref(true);
// 百度地图默认定位
const centerVal = ref({ lng: 114.214743, lat: 32.131004 });
const geometries = ref([
    { styleId: 'marker', position: { lng: 114.214743, lat: 32.131004 } },
]);
const infoWindowRef=ref(null);
const styles = ref({
    marker: {
        width: 20,
        height: 30,
        anchor: { x: 10, y: 30 },
    },
});
const visible = ref(true);
onMounted(() => {
    const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (coMobile) {
        router.push('/phone_about')
    } else {
        router.push('/about')
    }
    getHospitalInfo();
});
const onClick = () => {
    console.log('点击了')
    visible.value = true;
}
//医院简介
const hospitalInfo = ref({});
const getHospitalInfo = () => {
    $api.post("/api/Broadcast/hospital_overview")
        .then((res: any) => {
            console.log(res)
            hospitalInfo.value = res.data.data;
        })
        .catch((err) => {
            console.dir(err)
        })
}
</script>
<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
@import "@/assets/css/list.css";

.map {
    width: 100%;
    height: 300px;
}

.box_6,
.box_7 {
    padding: 0px;
}

.text_14 {
    font-size: 1.25rem;
    margin-top: 30px;
    text-align: left;
}

.text_15 {
    font-size: 1rem;
}

.text_16 {
    font-size: 0.875rem;
}

.group_1 {
    padding-left: 30px;
}
</style>
<style>
img {
    max-width: none !important;
}
</style>