榆钱落尽槿花稀
ac3d0a1205
2.地图服务整合，新增腾讯地图接入功能 3.信息查询模块升级，实现详情页同步适配（含手机端） 4.接口数据优化，同步调整页面图片展示效果 5.文章内容扩容，提升页面视觉展示效果 6.顶部导航栏优化，实现PC端与手机端自适应调整
132 lines
3.9 KiB
Vue
132 lines
3.9 KiB
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>
|