diff --git a/.gitignore b/.gitignore
index 4032f4e..1f95568 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,5 +10,4 @@ dist
 
 *.mjs
 
-*.map
-*.css
\ No newline at end of file
+*.map
\ No newline at end of file
diff --git a/src/components/popup/details.vue b/src/components/popup/details.vue
new file mode 100644
index 0000000..db48cef
--- /dev/null
+++ b/src/components/popup/details.vue
@@ -0,0 +1,151 @@
+<template>
+    <div class="dialog">
+        <div class="dialog__trigger" @click="open">
+            <!-- 触发弹窗 -->
+            <slot name="trigger"></slot>
+        </div>
+        <el-dialog
+            v-model="visible"
+            :custom-class="customClass"
+            :center="center"
+            :append-to-body="true"
+            :width="width"
+            :close-on-click-modal="clickModalClose"
+            @closed="close"
+        >
+            <!-- 弹窗内容 -->
+            <template v-if="title" #header> 
+ 
+			<div >
+			<div class="title-number">受理编号：{{ number }}</div>
+			<div class="title-name"> {{ title }}</div></div>
+			</template>
+
+            <!-- 自定义内容 -->
+            <slot>{{ content }}</slot>
+            
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+    props: {
+	        number: {
+            // 弹窗标题
+            type: String,
+            default: ''
+        },
+        title: {
+            // 弹窗标题
+            type: String,
+            default: ''
+        },
+        content: {
+            // 弹窗内容
+            type: String,
+            default: ''
+        },
+        confirmButtonText: {
+            // 确认按钮内容
+            type: [String, Boolean],
+            default: '确定'
+        },
+        cancelButtonText: {
+            // 取消按钮内容
+            type: [String, Boolean],
+            default: '取消'
+        },
+        width: {
+            // 弹窗的宽度
+            type: String,
+            default: '400px'
+        },
+        disabled: {
+            // 是否禁用
+            type: Boolean,
+            default: false
+        },
+        async: {
+            // 是否开启异步关闭
+            type: Boolean,
+            default: false
+        },
+        clickModalClose: {
+            // 点击遮罩层关闭对话窗口
+            type: Boolean,
+            default: false
+        },
+        center: {
+            // 是否居中布局
+            type: Boolean,
+            default: false
+        },
+        customClass: {
+            type: String,
+            default: ''
+        }
+    },
+    emits: ['confirm', 'cancel', 'close', 'open'],
+    setup(props, { emit }) {
+        const visible = ref(false)
+
+        const handleEvent = (type: 'confirm' | 'cancel') => {
+            emit(type)
+            if (!props.async || type === 'cancel') {
+                close()
+            }
+        }
+
+        const close = () => {
+            visible.value = false
+            nextTick(() => {
+                emit('close')
+            })
+        }
+        const open = () => {
+            if (props.disabled) {
+                return
+            }
+            emit('open')
+            visible.value = true
+        }
+        provide('visible', visible)
+        return {
+            visible,
+            handleEvent,
+            close,
+            open
+        }
+    }
+})
+</script>
+
+<style  lang="scss">
+.el-dialog{
+	margin-top: 60px
+}
+.dialog-body {
+    white-space: pre-line;
+}
+.title-number{
+	color:#fff;
+	position: absolute;
+    left: 200px;
+    font-size: 12px;
+}
+.title-name{
+color: #fff;
+position: relative;
+    margin: 0 auto;
+    text-align: center;
+    font-size: 20px;
+    line-height: 20px;
+    padding-bottom: 10px;
+	font-weight: 900;
+}
+.el-dialog__body{
+ background: #010457
+}
+ 
+</style>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 3e92a93..d4ef9f0 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -20,6 +20,11 @@ export const routes = [
         path: '/countyData',
         component: () => import('@/views/datascreen/countyData.vue')
     },
+    {
+        path: '/datascreen/details',
+        component: () => import('@/views/datascreen/details.vue')
+    },
+
     {
         path: '/layout',
         component: LAYOUT,
diff --git a/src/views/datascreen/assets/css/index.css b/src/views/datascreen/assets/css/index.css
index 459b3e1..972b3ee 100644
--- a/src/views/datascreen/assets/css/index.css
+++ b/src/views/datascreen/assets/css/index.css
@@ -13,10 +13,6 @@ a:active {
     text-decoration: none;
     color: #ffffff;
 }
-body{
-    background-image: url('@/assets/bg.png'); /* 背景图片的路径 */
-    background-size: cover; /* 背景图片大小适应容器 */
-}
 
 .header{
     width: 824px;
diff --git a/src/views/datascreen/details.vue b/src/views/datascreen/details.vue
index 6790277..849ba74 100644
--- a/src/views/datascreen/details.vue
+++ b/src/views/datascreen/details.vue
@@ -1,97 +1,353 @@
 <template>
-  <div class="details-popup">
+  <div class="details-popup" >
     <popup
         ref="popupRef"
         :title="popupTitle"
+		:number="mailNumber"
         :async="true"
-        width="550px"
+        width="1800px"
         :clickModalClose="true"
-        @confirm="handleSubmit"
-        @close="handleClose"
+         @confirm="handleSubmit"
+         @close="handleClose"
     >
-      <el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
-        <el-form-item label="部门" prop="departId">
-          <el-tree-select
-              class="flex-1"
-              v-model="formData.departId"
-              :data="optionsData.dept"
-              clearable
-              filterable
-              node-key="id"
-              :props="{
-                            value: 'id',
-                            label: 'name',
-                            disabled(data: any) {
-                                return !!data.isStop
-                            }
-                        }"
-              check-strictly
-              :default-expand-all="true"
-              placeholder="请选择部门"
-          />
-        </el-form-item>
-
-        <el-form-item label="机构类型" prop="deptType">
-          <el-select
-              class="flex-1"
-              clearable
-              v-model="formData.deptType"
-              placeholder="请选择机构类型"
-          >
-            <el-option
-                v-for="(item, index) in optionsData.deptTypes.lists"
-                :key="index"
-                :label="item.name"
-                :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="名称" prop="empNo">
-          <!--                    <el-input v-model="formData.policeName" placeholder="请输入" />-->
-
-          <el-select
-              v-model="formData.policeName"
-              filterable
-              class="flex-1"
-              clearable
-              remote
-              placeholder="请搜索名字/警号/手机号"
-              :remote-method="searchPoliceUser"
-              @change="handleSelectChange"
-          >
-            <el-option
-                v-for="(item, index) in optionsData.policeList"
-                :key="index"
-                :label="item.name"
-                :value="item.empNo"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="警号" prop="empNo">
-          <el-input v-model="formData.empNo"  disabled="disabled" placeholder="请输入" />
-        </el-form-item>
-        <!--                <el-form-item label="手机号" prop="mobile">-->
-        <!--                    <el-input v-model="formData.mobile" placeholder="请输入" />-->
-        <!--                </el-form-item>-->
-        <el-form-item label="值班日期" prop="startTime">
-          <daterange-picker
-              v-model:startTime="formData.startTime"
-              v-model:endTime="formData.endTime"
-          />
-        </el-form-item>
-
-
-
-
-      </el-form>
+	<div class="details-main">
+		<div class="details-content">
+			   <div >
+				<el-steps :active="2" finish-status="success" simple>
+				<el-step title="1 信件签收" />
+				<el-step title="2 联系群众" />
+				<el-step title="3 接访群众" />
+				<el-step title="4 核查办理" />
+				<el-step title="5 认定办结" />
+				</el-steps>
+			   </div>
+		 
+				   <div  class="details">
+
+    <el-card class="info-card">
+      <div>
+        <el-row>
+        <el-col :span="1">
+          <span class="head-lable">受理编号</span>
+        </el-col>
+        <el-col :span="7">
+          <span class="head-value">2114131413423432423</span>
+        </el-col>
+        <el-col :span="1">
+          <span class="head-lable">信件分类</span>
+        </el-col>
+          <el-col :span="7">
+            <span class="head-value">张三</span>
+          </el-col>
+          <el-col :span="1">
+            <span class="head-lable">信件等级</span>
+          </el-col>
+          <el-col :span="7">
+            <span class="head-value">一般信件</span>
+          </el-col>
+      </el-row>
+      </div>
+      <div class="info-content ">
+      <div>
+        <div slot="header" class="info-header">
+          举报人/投诉人基本情况
+        </div>
+        <el-row>
+			  <el-col :span="3">
+				<span class="info-label">姓名</span>
+			  </el-col>
+			  <el-col :span="3">
+				<span class="info-value">张三</span>
+			  </el-col>
+					  <el-col :span="2">
+				<span class="info-label">性别</span>
+			  </el-col>
+			  <el-col :span="4">
+				<span class="info-value">张三</span>
+			  </el-col>
+					  <el-col :span="2">
+				<span class="info-label">证件号码</span>
+			  </el-col>
+			  <el-col :span="4">
+				<span class="info-value">张三</span>
+			  </el-col>
+							  <el-col :span="2">
+				<span class="info-label">联系电话</span>
+			  </el-col>
+			  <el-col :span="4">
+				<span class="info-value">张三</span>
+			  </el-col>
+
+			</el-row>
+        <hr >
+      </div>
+        <div>
+          <div slot="header" class="info-header">
+            举报/投诉对象基本情况
+          </div>
+          <el-row>
+            <el-col :span="3">
+              <span class="info-label">被举报对象</span>
+            </el-col>
+            <el-col :span="3">
+              <span class="info-value">张三</span>
+            </el-col>
+            <el-col :span="2">
+              <span class="info-label">警号</span>
+            </el-col>
+            <el-col :span="4">
+              <span class="info-value">张三</span>
+            </el-col>
+            <el-col :span="2">
+              <span class="info-label">性别</span>
+            </el-col>
+            <el-col :span="4">
+              <span class="info-value">张三</span>
+            </el-col>
+            <el-col :span="2">
+              <span class="info-label">出生年月</span>
+            </el-col>
+            <el-col :span="4">
+              <span class="info-value">张三</span>
+            </el-col>
+
+          </el-row>
+          <el-row>
+            <el-col :span="3">
+              <span class="info-label"></span>
+            </el-col>
+            <el-col :span="3">
+              <span class="info-value"></span>
+            </el-col>
+            <el-col :span="2">
+              <span class="info-label">工作单位</span>
+            </el-col>
+            <el-col :span="4">
+              <span class="info-value">张三</span>
+            </el-col>
+
+
+          </el-row>
+          <hr >
+        </div>
+        <div>
+          <div slot="header" class="info-header">
+            举报/投诉反应主要问题
+          </div>
+          <el-row>
+            <el-col :span="24">
+              <div>11</div>
+            </el-col>
+
+          </el-row>
+          <hr >
+        </div>
+        <div>
+          <div slot="header" class="info-header">
+            领导接访情况
+          </div>
+          <el-row>
+            <el-col :span="3">
+              <span class="info-label">主单位签收时长</span>
+            </el-col>
+            <el-col :span="3">
+              <span class="info-value">张三</span>
+            </el-col>
+            <el-col :span="2">
+              <span class="info-label">主单位联系群众时长</span>
+            </el-col>
+            <el-col :span="4">
+              <span class="info-value">张三</span>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="3">
+              <span class="info-label">接访形式</span>
+            </el-col>
+            <el-col :span="3">
+              <span class="info-value">张三</span>
+            </el-col>
+
+            <el-col :span="2">
+              <span class="info-label">是否一把手接访</span>
+            </el-col>
+            <el-col :span="4">
+              <span class="info-value">张三</span>
+            </el-col>
+
+            <el-col :span="2">
+              <span class="info-label">接访领导</span>
+            </el-col>
+            <el-col :span="4">
+              <span class="info-value">张三</span>
+            </el-col>
+
+          </el-row>
+
+          <el-row>
+            <el-col :span="3">
+              <span class="info-label">接访情况</span>
+            </el-col>
+            <el-col :span="21">
+              <span class="info-value">张三</span>
+            </el-col>
+
+
+
+          </el-row>
+          <hr >
+        </div>
+
+        <div>
+          <div slot="header" class="info-header">
+            核查办理情况
+          </div>
+          <el-row>
+            <el-col :span="3">
+              <span class="info-label">是否属实</span>
+            </el-col>
+            <el-col :span="3">
+              <span class="info-value">张三</span>
+            </el-col>
+            <el-col :span="2">
+              <span class="info-label">是否需要问责</span>
+            </el-col>
+            <el-col :span="4">
+              <span class="info-value">张三</span>
+            </el-col>
+
+          </el-row>
+          <el-row>
+
+            <el-col :span="3">
+              <span class="info-label">查证属实问题</span>
+            </el-col>
+            <el-col :span="21">
+              <span class="info-value">张三</span>
+            </el-col>
+
+
+          </el-row>
+          <el-row>
+
+            <el-col :span="3">
+              <span class="info-label">核办结果</span>
+            </el-col>
+            <el-col :span="21">
+              <span class="info-value">张三</span>
+            </el-col>
+
+
+          </el-row>
+          <hr >
+        </div>
+        <div>
+          <div slot="header" class="info-header">
+            整改问责情况
+          </div>
+          <el-row>
+            <el-col :span="3">
+              <span class="info-label">责任追究</span>
+            </el-col>
+            <el-col :span="21">
+              <span class="info-value">张三</span>
+            </el-col>
+
+
+          </el-row>
+          <hr >
+        </div>
+        <div>
+          <div slot="header" class="info-header">
+            结果反馈情况
+          </div>
+          <el-row>
+            <el-col :span="3">
+              <span class="info-label">群众反应实现解决情况</span>
+            </el-col>
+            <el-col :span="3">
+              <span class="info-value">张三</span>
+            </el-col>
+            <el-col :span="2">
+              <span class="info-label">办理反馈情况</span>
+            </el-col>
+            <el-col :span="4">
+              <span class="info-value">张三</span>
+            </el-col>
+
+          </el-row>
+          <el-row>
+            <el-col :span="3">
+              <span class="info-label">回访人姓名</span>
+            </el-col>
+            <el-col :span="3">
+              <span class="info-value">张三</span>
+            </el-col>
+            <el-col :span="2">
+              <span class="info-label">回访人电话</span>
+            </el-col>
+            <el-col :span="4">
+              <span class="info-value">张三</span>
+            </el-col>
+            <el-col :span="2">
+              <span class="info-label">回访人警号</span>
+            </el-col>
+            <el-col :span="4">
+              <span class="info-value">张三</span>
+            </el-col>
+          </el-row>
+          <hr >
+        </div>
+
+        <div>
+          <div slot="header" class="info-header">
+            办结佐证材料
+          </div>
+          <el-row>
+            <el-col :span="3">
+              <span class="info-label">材料</span>
+            </el-col>
+            <el-col :span="21">
+              <span class="info-value">张三</span>
+            </el-col>
+
+
+          </el-row>
+
+        </div>
+      </div>
+		</el-card>
+		
+		 
+	  </div>
+		 </div>
+		 <div class="details-right">
+		 <el-timeline>
+		<el-timeline-item
+		  v-for="(activity, index) in activities"
+		  :key="index"
+		  :icon="activity.icon"
+		  :type="activity.type"
+		  :color="activity.color"
+		  :size="activity.size"
+		  :hollow="activity.hollow"
+		  :timestamp="activity.timestamp"
+		>
+		  {{ activity.content }}
+		</el-timeline-item>
+	  </el-timeline>
+		 </div>
+	 </div>
     </popup>
+	
+	 
   </div>
 </template>
 <script lang="ts" setup>
 import type { FormInstance, ListItem } from 'element-plus'
 import { dutyEdit, dutyAdd, dutyDetail, dutyLists } from '@/api/duty'
 import { dictDataDelete, dictDataLists, dictTypeAll } from '@/api/setting/dict'
-import Popup from '@/components/popup/index.vue'
+import Popup from '@/components/popup/details.vue'
 import feedback from '@/utils/feedback'
 import type { PropType } from 'vue'
 import { useDictOptions } from '@/hooks/useDictOptions'
@@ -102,6 +358,7 @@ import { searchPolice } from '@/api/perms/admin'
 import { usePaging } from '@/hooks/usePaging'
 import { loginCaptcha } from '@/api/user'
 import { isFunction } from 'lodash'
+import { MoreFilled } from '@element-plus/icons-vue'
 defineProps({
   dictData: {
     type: Object as PropType<Record<string, any[]>>,
@@ -111,10 +368,11 @@ defineProps({
 const emit = defineEmits(['success', 'close'])
 const formRef = shallowRef<FormInstance>()
 const popupRef = shallowRef<InstanceType<typeof Popup>>()
-const mode = ref('add')
+const mode = ref('details')
 const popupTitle = computed(() => {
-  return mode.value == 'edit' ? '编辑值班信息' : '新增值班'
+  return mode.value == 'details' ? '信件详情' : '信件详情'
 })
+const mailNumber='11111111111'
 
 const formData = reactive({
   startTime: '',
@@ -128,6 +386,36 @@ const formData = reactive({
   deptType: ''
 })
 
+const activities = [
+  {
+    content: 'Custom icon',
+    timestamp: '2018-04-12 20:46',
+    size: 'large',
+ 
+  color: '#0bbd87',
+  },
+  {
+    content: 'Custom color',
+    timestamp: '2018-04-03 20:46',
+    color: '#0bbd87',
+  },
+  {
+    content: 'Custom size',
+    timestamp: '2018-04-03 20:46',
+    size: 'large',
+  },
+  {
+    content: 'Custom hollow',
+    timestamp: '2018-04-03 20:46',
+    type: 'primary',
+    hollow: true,
+  },
+  {
+    content: 'Default node',
+    timestamp: '2018-04-03 20:46',
+  },
+]
+
 const { optionsData } = useDictOptions<{
   deptTypes: any[],
   policeList: any[],
@@ -226,10 +514,10 @@ const setFormData = async (data: Record<string, any>) => {
 }
 
 const getDetail = async (row: Record<string, any>) => {
-  const data = await dutyDetail({
-    id: row.id
-  })
-  setFormData(data)
+  //const data = await dutyDetail({
+  //  id: row.id
+  //})
+  //setFormData(data)
 }
 const searchPoliceUser = (query: string) => {
   if (query) {
@@ -268,3 +556,99 @@ defineExpose({
   getDetail
 })
 </script>
+<style scoped lang="scss">
+
+.details-main{
+    width:1766px;
+	height:730px;
+ 
+}
+.details-content{
+	width:1400px;
+	height:700px;
+ float: left;
+}
+.details-right{
+	width:350px;
+
+	float: left;
+	margin-left: 10px;
+	padding-left: 10px;
+		padding-top: 10px;
+	background:#09256d
+}
+.details{
+	width:1400px;
+	height: 700px;
+	margin-top: 10px;
+	background: #09256D;
+	border: 1px solid #4E8FFF;
+  overflow: auto;
+	color:#fff;
+}
+.el-card{
+border:0;
+
+}
+.info-card{
+	background: #09256D;
+
+	color:#fff;
+}
+.info-content {
+  margin-top: 20px;
+
+}
+
+.info-label {
+  font-weight: bold;
+  text-align: right;
+  display: block;
+  font-size: 12px;
+  color: #4E8FFF;
+}
+
+.info-value {
+  margin-left: 10px;
+  font-size: 12px;
+}
+
+hr {
+border: none; /* 去掉默认边框 */
+border-top: 1px solid #4E8FFF; /* 设置上边框为1px实线，颜色为黑色 */
+}
+.el-row {
+  line-height: 30px;
+}
+.info-header{
+  margin-bottom: 10px;
+}
+
+
+.details::-webkit-scrollbar {
+  width: 8px;  /* 宽度 */
+}
+.details::-webkit-scrollbar-track {
+  background: #071a4e;  /* 滚动条背景色 */
+
+}
+
+.details::-webkit-scrollbar-thumb {
+  background-clip: padding-box;  /* 背景剪裁 */
+  border: 8px solid transparent;  /* 边框 */
+  background-image: linear-gradient(180deg, #007FFF 0%, #0049FF 100%);
+  border-radius: 11px;
+}
+
+.details::-webkit-scrollbar-thumb:hover {
+  background: #0060fe;  /* 鼠标悬停时的滚动条颜色 */
+}
+.head-value{
+  padding-left: 10px;
+  font-size: 14px;
+}
+.head-lable{
+  color: #4E8FFF;
+  font-size: 14px;
+}
+</style>
diff --git a/src/views/datascreen/index.vue b/src/views/datascreen/index.vue
index 11b36ba..ead905c 100644
--- a/src/views/datascreen/index.vue
+++ b/src/views/datascreen/index.vue
@@ -1,21 +1,19 @@
 <template>
   <!--头部-->
+  <div class="body">
   <div class="header">
     <img src="@/assets/logo.png">
   </div>
   <!--主体-->
   <div class="main clearfix">
     <div class="main-left">
-
-
-
       <div class="box-container">
         <div class="name-title" >
          群众动态
         </div>
         <div class="boxLeftMailCon">
           <ul class="mailUl">
-            <li v-for="item in peopleMaillist" :key="item.id">
+            <li v-for="item in peopleMaillist" :key="item.id"  @click="queryDetails(item)">
               <p>{{ item.contactName }} ：{{ item.contactPhone }}<span class="mailULspan">{{ item.mailState }}</span></p>
               <p>{{ formatDate(item.createTime) }}</p>
             </li>
@@ -111,7 +109,7 @@
               class="m-2"
               :placeholder="selectTrend"
               size="small"
-              style="width: 100px;z-index: 9999"
+              style="width: 100px;z-index: 3000"
               @change="getMailTrend"
           >
             <el-option
@@ -128,7 +126,7 @@
               class="m-2"
               :placeholder="selectTrend"
               size="small"
-              style="width: 100px;z-index: 9999"
+              style="width: 100px;z-index: 3000"
               @change="getMailTrend"
           >
             <el-option
@@ -146,7 +144,7 @@
               class="m-2"
               :placeholder="selectTrend"
               size="small"
-              style="width: 100px;z-index: 9999"
+              style="width: 100px;z-index: 3000"
               @change="getMailTrend"
           >
             <el-option
@@ -245,18 +243,28 @@
       </div>
 
     </div>
-	  <edit-popup
+	  <details-popup
             v-if="showDetails"
             ref="detailsRef"
-           
-            @close="showDetails = false"
+             @success="closeDetails"
+            @close="closeDetails"
         />
   </div>
+  </div>
 </template>
-<style>
+<style   >
 @import 'assets/css/index.css';
 
+.body{
+
+ background-image: url('@/assets/bg.png'); /* 背景图片的路径 */
+ background-size: cover; /* 背景图片大小适应容器 */
+
+
+}
 </style>
+
+
 <script lang="ts" setup>
 import { ref,onMounted,watch ,onBeforeUpdate ,onBeforeMount,onUnmounted} from 'vue'
 import type { TabsPaneContext } from 'element-plus'
@@ -319,7 +327,7 @@ const selectTrend= "请选择"
 let seenDay=true
 let seenWeek=false
 let seenMonth=false
-
+let mapShow=true
 let trendDayOptions = [
   {
     value: '15',
@@ -437,7 +445,7 @@ const getMapDataList = async () => {
 
 onMounted(() => {
   selectYear(10)
-
+queryDetails()
   getThreeRate();
   getPopleMailLists();
   getDutyDay();
@@ -600,10 +608,14 @@ const changsMap = () =>{
       map: "map",
     },
     tooltip: {
+	  show: mapShow,
       trigger: 'item',
       position: 'right',
       formatter: function(params){
-	  console.log(params)
+
+		if (typeof params.data === 'undefined') {
+		 
+		}else{
         var tt ='<div class="tooltip">'+
         '<div class="tooltip-title" > '+params.name+'</div>'+
         '<div class="tooltip-content" >'+
@@ -616,6 +628,7 @@ const changsMap = () =>{
         '<li>满意率 <span>'+params.data.satisfiedrate+'</span></li>'+
        ' </ul></div></div>'
         return tt;
+		}
       },
       backgroundColor: '#031577',      //
       borderColor: '#0A2F86',
@@ -1146,7 +1159,20 @@ const weekEcharts=() => {
     myChart.resize(chartWidth);
   });
 }
+const queryDetails = async (data: any) => {
+	mapShow=false
+	changsMap()
+    showDetails.value = false
+    await nextTick()
+    detailsRef.value?.open('details')
+    detailsRef.value?.getDetail(data)
+}
 
+const closeDetails=()=>{
+	mapShow=true
+	changsMap()
+	showDetails.value = false
+}
 
 </script>
 <style>