100 lines
3.5 KiB
Vue
100 lines
3.5 KiB
Vue
<template>
|
||
<div class="bg-[#ffffff] pb-[50px]">
|
||
<div class="group_3 flex-col">
|
||
<div class="section_1 flex-col">
|
||
<div class="flex group_7 flex-row">
|
||
<img class="thumbnail_1" referrerpolicy="no-referrer"
|
||
src="public/images/home.png" />
|
||
<span class="text_13">您的位置：首页>系统公告</span>
|
||
</div>
|
||
<div class="text_14">联系我们</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex box_9 flex-row justify-center">
|
||
<div class="flex group_8 flex-col justify-center">
|
||
<div class="flex group_9 flex-row justify-between">
|
||
<div class="flex image-wrapper_1 flex-col">
|
||
<img class="label_1" referrerpolicy="no-referrer"
|
||
src="public/images/k7.png" />
|
||
</div>
|
||
<span class="text_15">医院介绍</span>
|
||
</div>
|
||
<span class="paragraph_1">
|
||
{{ hospitalInfo.description }}
|
||
</span>
|
||
</div>
|
||
<div class="block_2 flex-col relative">
|
||
<img class="w-full mb-4" referrerpolicy="no-referrer" :src="hospitalInfo.image" style=" position: absolute;top: -30px;left: -30px;"/>
|
||
</div>
|
||
</div>
|
||
<div class="z-10 mt-10">
|
||
<div class="font-bold text-center" style="font-size: 32px;">医院位置</div>
|
||
<div>
|
||
<baidu-map @ready="onBaiduMapReady" class="map" ak="OCHRqb6XXcOh9LH7H6c67c6xAoGxznQF" v="3.0" type="API"
|
||
:zoom="18" :center="centerVal">
|
||
<bm-marker @click="isShowInfoWindow = true" :position="{ lng: 114.221199, lat: 32.137085 }">
|
||
</bm-marker>
|
||
<bm-info-window @close="isShowInfoWindow = false" :show="isShowInfoWindow"
|
||
:position="{ lng: 114.221199, lat: 32.137085 }" :width="100" :max-width="300">
|
||
<div>
|
||
信阳第五人民医院
|
||
</div>
|
||
</bm-info-window>
|
||
</baidu-map>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted } from 'vue';
|
||
import { BaiduMap, BmGeolocation, BmControl, BmInfoWindow, BmMarker } from 'vue-baidu-map-3x'
|
||
import $api from '@/service/webRequest'
|
||
const router = useRouter()
|
||
const isShowInfoWindow = ref(true);
|
||
// 百度地图默认定位
|
||
const centerVal = ref({ lng: 114.221199, lat: 32.137085 });
|
||
const onBaiduMapReady = (map: any) => {
|
||
console.log(map);
|
||
}
|
||
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 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/css/common.scss";
|
||
@import "@/assets/css/about.css";
|
||
|
||
.map {
|
||
width: 100%;
|
||
height: 500px;
|
||
padding: 40px 360px;
|
||
}
|
||
@media screen and (max-width: 1440px) {
|
||
.map { padding:40px 30px;}
|
||
}
|
||
</style>
|
||
<style>
|
||
img {
|
||
max-width: none !important;
|
||
}
|
||
</style>
|