|
|
@@ -0,0 +1,555 @@
|
|
|
+<template>
|
|
|
+ <div class="main_box2">
|
|
|
+ <div class="bread">
|
|
|
+ <div class="bread_left">
|
|
|
+ <div class="gray">您现在所在位置：</div>
|
|
|
+ <el-breadcrumb separator=">>">
|
|
|
+ <el-breadcrumb-item :to="{ path: '/home' }"><span class="gray">首页</span></el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item><span class="red">养老政策查询</span></el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top_box">
|
|
|
+ <div class="left_img flex_center">
|
|
|
+ <div class="conten">
|
|
|
+ <swiper
|
|
|
+ :style="{ '--swiper-navigation-color': '#fff','--swiper-pagination-color': '#fff',}"
|
|
|
+ :loop="true"
|
|
|
+ :spaceBetween="10"
|
|
|
+ :navigation="true"
|
|
|
+ :thumbs="{ swiper: thumbsSwiper }"
|
|
|
+ :modules="modules"
|
|
|
+ ref="swiperTop"
|
|
|
+ class="mySwiper2">
|
|
|
+ <swiper-slide>
|
|
|
+ <img src="https://swiperjs.com/demos/images/nature-1.jpg"/>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <img src="https://swiperjs.com/demos/images/nature-2.jpg"/>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <img src="https://swiperjs.com/demos/images/nature-3.jpg"/>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <img src="https://swiperjs.com/demos/images/nature-4.jpg"/>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <img src="https://swiperjs.com/demos/images/nature-5.jpg"/>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <img src="https://swiperjs.com/demos/images/nature-6.jpg"/>
|
|
|
+ </swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img
|
|
|
+ src="https://swiperjs.com/demos/images/nature-7.jpg"/></swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img
|
|
|
+ src="https://swiperjs.com/demos/images/nature-8.jpg"/></swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img
|
|
|
+ src="https://swiperjs.com/demos/images/nature-9.jpg"/></swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img src="https://swiperjs.com/demos/images/nature-10.jpg"
|
|
|
+ /></swiper-slide>
|
|
|
+ </swiper>
|
|
|
+ <swiper
|
|
|
+ @swiper="setThumbsSwiper"
|
|
|
+ :loop="true"
|
|
|
+ :spaceBetween="10"
|
|
|
+ :slidesPerView="4"
|
|
|
+ :freeMode="true"
|
|
|
+ :watchSlidesProgress="true"
|
|
|
+ :modules="modules"
|
|
|
+ class="mySwiper"
|
|
|
+ ref="swiperThumbs"
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img
|
|
|
+ src="https://swiperjs.com/demos/images/nature-1.jpg"/></swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img
|
|
|
+ src="https://swiperjs.com/demos/images/nature-2.jpg"/></swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img
|
|
|
+ src="https://swiperjs.com/demos/images/nature-3.jpg"/></swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img
|
|
|
+ src="https://swiperjs.com/demos/images/nature-4.jpg"/></swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img
|
|
|
+ src="https://swiperjs.com/demos/images/nature-5.jpg"/></swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img
|
|
|
+ src="https://swiperjs.com/demos/images/nature-6.jpg"/></swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img
|
|
|
+ src="https://swiperjs.com/demos/images/nature-7.jpg"/></swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img
|
|
|
+ src="https://swiperjs.com/demos/images/nature-8.jpg"/></swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img
|
|
|
+ src="https://swiperjs.com/demos/images/nature-9.jpg"/></swiper-slide
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ ><img src="https://swiperjs.com/demos/images/nature-10.jpg"
|
|
|
+ /></swiper-slide>
|
|
|
+ </swiper>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right_box flex_center">
|
|
|
+ <div class="conten">
|
|
|
+ <div class="title">
|
|
|
+ 吉林顾村和平养老院
|
|
|
+ </div>
|
|
|
+ <div class="font_style1 align_center mt35">
|
|
|
+ <el-tooltip placement="top" effect="light">
|
|
|
+ <template #content>
|
|
|
+ 养老机构等级评定说明：评定等
|
|
|
+ <br/>
|
|
|
+ 级分为一至五级，级数越高表示
|
|
|
+ <br/>
|
|
|
+ 机构等级越高，设施设备更加完
|
|
|
+ <br/>
|
|
|
+ 善、服务项目更加全面、服务质
|
|
|
+ <br/>
|
|
|
+ 量和管理水平更高。即五级高于
|
|
|
+ <br/>
|
|
|
+ 四级，四级高于三级，三级高于
|
|
|
+ <br/>
|
|
|
+ 二级，二级高于一级。
|
|
|
+ </template>
|
|
|
+ <el-rate
|
|
|
+ v-model="form.dj"
|
|
|
+ disabled
|
|
|
+ text-color="#ff9900"
|
|
|
+ />
|
|
|
+
|
|
|
+ </el-tooltip>
|
|
|
+ ({{selectDictLabel(CZ015,form.pddj)}})
|
|
|
+ </div>
|
|
|
+ <div class="flex mt24 font_style1">
|
|
|
+ <div class="title_box font_style1">成立时间：2016-03-09</div>
|
|
|
+ <div class="title_box font_style1">建筑面积：6800</div>
|
|
|
+ </div>
|
|
|
+ <div class="hr">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="align_center font_style1 mt24">
|
|
|
+ <div class="tb1">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 机构地址：长春市朝阳区XXX路155号
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="align_center font_style1 mt24">
|
|
|
+ <div class="tb2">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 咨询电话：0431-88669933
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="kz_box mt24">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="title_box font_style1">床位总数： 188张</div>
|
|
|
+ <div class="title_box font_style1">可用床位： <span class="color1">10</span>张</div>
|
|
|
+ </div>
|
|
|
+ <div class="font_style1 mt24">
|
|
|
+ 参考价格：<span class="font_style2">2250-7000</span>元/月 （床位费和护理费）
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="font_style3 mt15">
|
|
|
+ * 以上信息由机构提供 <span class="mr">更新时间： 2021-10-13</span> * 信息监督： 宝山区民政局
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="hr"></div>
|
|
|
+ <div class="bt_box">
|
|
|
+ <div class="map_top">
|
|
|
+ <div class="align_center">
|
|
|
+ <div class="block"></div>
|
|
|
+ 地理位置
|
|
|
+ </div>
|
|
|
+ <div class="align_center">
|
|
|
+ <div class="tb3"></div> 在养老地图查看</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt15" id="container" style="height: 385px;width: 100%"></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {Swiper, SwiperSlide} from 'swiper/vue';
|
|
|
+ import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
+ import { shallowRef } from '@vue/reactivity'
|
|
|
+ window._AMapSecurityConfig = {
|
|
|
+ securityJsCode: '8235942dbbc745f954849a61332fa3bc'
|
|
|
+ };
|
|
|
+ // Import Swiper styles
|
|
|
+ import 'swiper/css';
|
|
|
+ import "swiper/css/free-mode"
|
|
|
+ import "swiper/css/navigation"
|
|
|
+ import "swiper/css/thumbs"
|
|
|
+ import {FreeMode, Navigation, Thumbs} from 'swiper';
|
|
|
+ import {createApp, getCurrentInstance, onMounted, nextTick,onUnmounted} from 'vue';
|
|
|
+ const {proxy} = getCurrentInstance();
|
|
|
+ const {XZ093, XZ096, CZ015, CZ035} = proxy.useDict('XZ093', 'XZ096', 'CZ015', 'CZ035');
|
|
|
+
|
|
|
+ createApp({
|
|
|
+ components: {
|
|
|
+ Swiper,
|
|
|
+ SwiperSlide,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ let thumbsSwiper = null;
|
|
|
+ let modules = [FreeMode, Navigation, Thumbs];
|
|
|
+ const data = reactive({
|
|
|
+ form: {
|
|
|
+ dj: 3,
|
|
|
+ pddj: '01',
|
|
|
+ txdz: 'xxxxxx',
|
|
|
+ frlxfs: 'xxx'
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const {form} = toRefs(data);
|
|
|
+ const setThumbsSwiper = (swiper) => {
|
|
|
+ // console.log(swiper, 'swiper');
|
|
|
+ thumbsSwiper = swiper;
|
|
|
+ };
|
|
|
+ //首先需要引入 Vue3 的 shallowRef 方法（使用 shallowRef 进行非深度监听，因为在 Vue3 所使用的 Proxy 拦截操作会改变 JSAPI 原生对象，所以此处需要区别 Vue2 使用方式对地图对象行非深度监听，否则会出现问题，建议 JS API 相关对象采用非响应式的普通对象来存储）。
|
|
|
+ const map = shallowRef(null);
|
|
|
+ const initMap=()=>{
|
|
|
+ {
|
|
|
+ AMapLoader.load({
|
|
|
+ key:'6c087d703e652767650a6b3208f76c40', //设置您的key
|
|
|
+ version:"2.0",
|
|
|
+ plugins:['AMap.ToolBar','AMap.Driving'],
|
|
|
+ AMapUI:{
|
|
|
+ version:"1.1",
|
|
|
+ plugins:[],
|
|
|
+
|
|
|
+ },
|
|
|
+ Loca:{
|
|
|
+ version:"2.0.0"
|
|
|
+ },
|
|
|
+ }).then((AMap)=>{
|
|
|
+ map.value = new AMap.Map("container",{
|
|
|
+ zoom:13,
|
|
|
+ center:[105.602725,37.076636],
|
|
|
+ });
|
|
|
+ let marker = new AMap.Marker({
|
|
|
+ position:[105.602725,37.076636],
|
|
|
+ icon: new AMap.Icon({// eslint-disable-line
|
|
|
+ // 引入小红车图片位置
|
|
|
+ image:new URL('../../assets/images/dw.png', import.meta.url).href,
|
|
|
+ size: new AMap.Size(17, 16) // eslint-disable-line
|
|
|
+ }),
|
|
|
+ // offset: new AMap.Pixel(-25, -25), // eslint-disable-line
|
|
|
+ });
|
|
|
+ marker.setLabel({
|
|
|
+ offset: new AMap.Pixel(0, -5), //设置文本标注偏移量
|
|
|
+ content: "<div class='info'>我是 marker 的 l1111abel 标签</div>", //设置文本标注内容
|
|
|
+ direction: 'top' //设置文本标注方位
|
|
|
+ });
|
|
|
+ map.value.add(marker);
|
|
|
+
|
|
|
+ }).catch(e=>{
|
|
|
+ console.log(e);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const dd = getCurrentInstance();
|
|
|
+ onMounted(() => {
|
|
|
+ initMap();
|
|
|
+ // console.log(dd.ctx.$refs.swiperTop,'this.$refs');
|
|
|
+ // const swiperTop=dd.ctx.$refs.swiperTop.$swiper;
|
|
|
+ // const swiperThumbs=dd.ctx.$refs.swiperThumbs.$swiper;
|
|
|
+ // swiperTop.controller.control=swiperThumbs;
|
|
|
+ // swiperThumbs.controller.control=swiperTop;
|
|
|
+ // console.log(swiperTop.$swiper,'swiperTop');
|
|
|
+ // this.$refs.swiper.swiperTop.$swiper
|
|
|
+ // nextTick(() => {
|
|
|
+ // console.log(dd.ctx.$refs.swiperTop, 'this.$refs');
|
|
|
+ // const swiperTop = dd.ctx.$refs.swiperTop;
|
|
|
+ // const swiperThumbs = dd.ctx.$refs.swiperThumbs;
|
|
|
+ // swiperTop.controller = swiperThumbs.controller;
|
|
|
+ // swiperThumbs.controller = swiperTop.controller;
|
|
|
+ // })
|
|
|
+ });
|
|
|
+ onUnmounted(()=>{
|
|
|
+ //离开前要进行地图销毁，防止占有资源
|
|
|
+ map.value && map.value.destroy();
|
|
|
+ console.log('销毁了')
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-slide {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ /* Center slide text vertically */
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -ms-flex-pack: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-slide img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-slide {
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mySwiper2 {
|
|
|
+ height: 80%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mySwiper {
|
|
|
+ height: 20%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mySwiper .swiper-slide {
|
|
|
+ width: 25%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mySwiper .swiper-slide-thumb-active {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-slide img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main_box2 {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #DEDEDE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bread {
|
|
|
+ height: 58px;
|
|
|
+ border-bottom: 1px solid #DEDEDE;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bread_left {
|
|
|
+ display: flex;
|
|
|
+ margin-left: 34px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .gray {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-breadcrumb) {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: unset;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #B80100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top_box {
|
|
|
+ display: flex;
|
|
|
+ /*margin-top: 23px;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .left_img {
|
|
|
+ height: 500px;
|
|
|
+ width: 50%;
|
|
|
+ /*border: red solid 1px;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .right_box {
|
|
|
+ display: flex;
|
|
|
+ width: 50%;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .conten {
|
|
|
+ width: 90%;
|
|
|
+ height: 90%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .flex_center {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .align_center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .font_style1 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .font_style2 {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF4900;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .font_style3{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF706F;
|
|
|
+ }
|
|
|
+
|
|
|
+ .flex {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mt35 {
|
|
|
+ margin-top: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mt24 {
|
|
|
+ margin-top: 23px;
|
|
|
+ }
|
|
|
+ .mt15 {
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_box {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hr {
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ background: #DEDEDE;
|
|
|
+ margin-top: 23px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tb1 {
|
|
|
+ width: 18px;
|
|
|
+ height: 22px;
|
|
|
+ background: url("../../assets/images/dizhi.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tb2 {
|
|
|
+ width: 19px;
|
|
|
+ height: 13px;
|
|
|
+ background: url("../../assets/images/dh.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tb3 {
|
|
|
+ width: 17px;
|
|
|
+ height: 16px;
|
|
|
+ background: url("../../assets/images/dw.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kz_box {
|
|
|
+ width: 92%;
|
|
|
+ height: 80px;
|
|
|
+ background: #E7F5F7;
|
|
|
+ opacity: 0.8;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 4%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color1 {
|
|
|
+ color: #FF4900;
|
|
|
+ }
|
|
|
+ .mr{
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ .bt_box{
|
|
|
+ margin-left: 34px;
|
|
|
+ margin-top: 27px;
|
|
|
+ margin-right: 34px;
|
|
|
+ }
|
|
|
+ .map_top{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .block{
|
|
|
+ width: 6px;
|
|
|
+ height: 20px;
|
|
|
+ background: #D80100;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ :deep(.info){
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
