From e4523299d40124419424ed2731b42c91db85db4b Mon Sep 17 00:00:00 2001
From: shi <936384804@qq.com>
Date: Fri, 22 Aug 2025 22:17:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=A1=B9=E7=9B=AE=E5=8F=8A?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/projectScreen/index.ts                |  34 +++-
 .../ProjectScreen/components/centerPage.vue   |  70 ++++---
 src/views/ProjectScreen/components/header.vue |   6 +-
 .../ProjectScreen/components/leftPage.vue     | 176 +++++++++++++-----
 .../ProjectScreen/components/optionList.ts    |   6 +
 .../ProjectScreen/components/rightPage.vue    |  57 ++++--
 src/views/ProjectScreen/index.vue             |  66 ++++---
 7 files changed, 296 insertions(+), 119 deletions(-)

diff --git a/src/api/projectScreen/index.ts b/src/api/projectScreen/index.ts
index 7097a73..9e84e68 100644
--- a/src/api/projectScreen/index.ts
+++ b/src/api/projectScreen/index.ts
@@ -31,4 +31,36 @@ export const getScreenLand = (projectId: number | string) => {
     url: '/project/big/screen/' + projectId,
     method: 'get',
   });
-};
\ No newline at end of file
+};
+
+// 查询项目形象进度
+export const getScreenImgProcess = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/imageProgress/' + projectId,
+    method: 'get',
+  });
+};
+
+// 查询项目人员情况
+export const getScreenPeople = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/people/' + projectId,
+    method: 'get',
+  });
+};
+
+// 查询项目AI安全巡检
+export const getScreenSafetyInspection = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/safetyInspection/' + projectId,
+    method: 'get',
+  });
+};
+
+// 查询项目概况
+export const getScreenGeneralize = (projectId: number | string) => {
+  return request({
+    url: '/project/big/screen/generalize/' + projectId,
+    method: 'get',
+  });
+};
diff --git a/src/views/ProjectScreen/components/centerPage.vue b/src/views/ProjectScreen/components/centerPage.vue
index 6882b65..53d8c41 100644
--- a/src/views/ProjectScreen/components/centerPage.vue
+++ b/src/views/ProjectScreen/components/centerPage.vue
@@ -1,26 +1,25 @@
 <template>
   <div class="centerPage">
-    <div class="topPage" :class="{ 'full-height': hideFooter }">
-      <!-- <img src="@/assets/projectLarge/center.png" alt="" style="width: 100%;object-fit: scale-down"> -->
+    <div class="topPage">
+      <img src="@/assets/projectLarge/center.png" alt="">
     </div>
     <div class="endPage" :class="{ 'slide-out-down': hideFooter }" v-if="!isHide">
       <Title title="AI安全巡检" :prefix="true" />
-
       <div class="swiper">
         <div class="arrow" :class="{ 'canUse': canLeft }" @click="swiperClick('left')">
-          <el-icon size="16" color="skyblue">
+          <el-icon size="16" :color="canLeft ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
             <ArrowLeft />
           </el-icon>
         </div>
         <div class="swiper_content" ref="swiperContent">
-          <div class="swiper_item" v-for="(item, i) in 10" :key="i">
-            <img src="@/assets/projectLarge/swiper.png" alt="安全巡检图片" class="swiper_img">
-            <div class="swiper_date">2025-03-18</div>
-            <div class="swiper_tip">未佩戴安全帽{{ i }}</div>
+          <div class="swiper_item" v-for="(item, i) in inspectionList" :key="i">
+            <img :src="item.picture" alt="安全巡检图片" class="swiper_img">
+            <div class="swiper_date">{{ item.createTime.slice(5) }}</div>
+            <div class="swiper_tip">{{ item.label }}</div>
           </div>
         </div>
         <div class="arrow" :class="{ 'canUse': canRight }" @click="swiperClick('right')">
-          <el-icon size="16">
+          <el-icon size="16" :color="canRight ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
             <ArrowRight />
           </el-icon>
         </div>
@@ -30,9 +29,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
+import { ref, onMounted, toRefs, getCurrentInstance } from "vue"
 import Title from './title.vue'
 import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
+import { getScreenSafetyInspection } from '@/api/projectScreen'
+
+const { proxy } = getCurrentInstance();
+const { violation_level_type } = toRefs(proxy?.useDict('violation_level_type'));
 
 const props = defineProps({
   hideFooter: {
@@ -42,10 +45,19 @@ const props = defineProps({
   isHide: {
     type: Boolean,
     default: false
+  },
+  projectId: {
+    type: String,
+    default: ""
   }
 })
 
-const swiperList = ref([])
+const inspectionList = ref([{
+  id: "",
+  label: "",
+  picture: "",
+  createTime: ""
+}])
 const swiperContent = ref<HTMLDivElement>()
 const swiperItemWidth = ref(100)
 const canLeft = ref(false)
@@ -75,7 +87,19 @@ const swiperClick = (direction: 'left' | 'right') => {
   canRight.value = swiperContent.value.scrollLeft < swiperContent.value.scrollWidth - swiperContent.value.clientWidth
 }
 
+const getInspectionList = async () => {
+  const res = await getScreenSafetyInspection(props.projectId)
+  const { code, data } = res
+  if (code === 200) {
+    data.map(item => {
+      item.label = violation_level_type.value.find((i: any) => i.value === item.violationType)?.label
+    })
+    inspectionList.value = data
+  }
+}
+
 onMounted(() => {
+  getInspectionList()
   if (swiperContent.value && swiperContent.value.children.length > 0) {
     swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
   }
@@ -94,30 +118,23 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   width: 100%;
   padding: 15px 0;
-  border: 1px solid rgba(29, 214, 255, 0.1);
+  border: 1px solid rgba(230, 247, 255, 0.1);
   box-sizing: border-box;
 }
 
 .topPage {
   flex: 1;
   margin-bottom: 23px;
-  transition: flex 1s ease;
-  /* 添加flex过渡效果 */
-}
-
-/* 当endPage隐藏时，topPage占满高度 */
-.full-height {
-  flex: 1 1 100%;
-  margin-bottom: 0;
+  transition: flex 0.5s ease;
 }
 
 .endPage {
   max-height: 300px;
-  /* 根据实际内容调整最大高度 */
   opacity: 1;
-  transition: all 1s ease;
+  transition: all 0.5s ease;
 }
 
 /* 向下滑出动画 */
@@ -189,17 +206,16 @@ onMounted(() => {
 .arrow {
   display: grid;
   place-items: center;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  border: 1px solid skyblue;
+  border: 1px solid rgba(29, 214, 255, 0.3);
   color: skyblue;
   cursor: pointer;
   transition: all 0.3s ease;
 
   &.canUse {
-    background-color: skyblue;
-    color: #fff !important;
+    border: 1px solid rgba(29, 214, 255, 1);
   }
 
   &:hover:not(.canUse) {
diff --git a/src/views/ProjectScreen/components/header.vue b/src/views/ProjectScreen/components/header.vue
index 4d159e0..cc7b81a 100644
--- a/src/views/ProjectScreen/components/header.vue
+++ b/src/views/ProjectScreen/components/header.vue
@@ -16,6 +16,10 @@
     </div>
     <div class="header_right">
       <div class="top-bar">
+        <!--  -->
+        <div style="margin-right: 10px;cursor: pointer;" @click="emit('changePage')">
+           <el-icon size="20"><Expand /></el-icon>
+        </div>
         <!-- 左侧：天气图标 + 日期文字 -->
         <div class="left-section">
           <div class="weather-list" @mouseenter="requestPause" @mouseleave="resumeScroll">
@@ -33,7 +37,7 @@
           <div class="bottom-block"></div>
         </div>
         <!-- 右侧：管理系统图标 + 文字 -->
-        <div class="right-section" @click="emit('changePage')">
+        <div class="right-section">
           <img src="@/assets/large/setting.png" alt="设置图标" />
           <span>管理系统</span>
         </div>
diff --git a/src/views/ProjectScreen/components/leftPage.vue b/src/views/ProjectScreen/components/leftPage.vue
index e99d1f4..9d0dd40 100644
--- a/src/views/ProjectScreen/components/leftPage.vue
+++ b/src/views/ProjectScreen/components/leftPage.vue
@@ -2,31 +2,53 @@
   <div class="leftPage">
     <div class="topPage">
       <Title title="项目公告" />
-
       <div class="content">
         <div class="content_item" v-for="item in news" :key="item.id">
-          <div class="round">
-            <div class="sub_round"></div>
+          <img src="@/assets/projectLarge/round.svg" alt="">
+          <div class="ellipsis">
+            {{ item.title }}
+            <span @click="showNewsDetail(item)" style="color: rgba(138, 149, 165, 1);">{{ item.id === newId ? '关闭' :
+              '查看' }}</span>
           </div>
-          <div class="ellipsis">{{ item.title }}</div>
         </div>
       </div>
     </div>
+
+    <div class="detailBox" :class="{'show': newId}">
+      <!-- <div class="detail_title">{{ newDetail.title }}</div> -->
+      <div class="detail_content" v-html="newDetail.content"></div>
+    </div>
+
     <div class="endPage">
       <Title title="人员情况" />
-
       <div class="map">
         <img src="@/assets/projectLarge/map.svg" alt="">
         <!-- <div ref="mapChartRef"></div> -->
       </div>
 
       <div class="attendance_tag">
-        <div class="tag_item" v-for="(item, index) in tagList" :key="index">
+        <div class="tag_item">
           <img src="@/assets/projectLarge/people.svg" alt="">
-          <div class="tag_title">{{ item.title }}</div>
+          <div class="tag_title">出勤人数</div>
           <div class="tag_info">
-            {{ item.number }}
-            <span style="font-size: 14px;">{{ index === 2 ? '%' : '人' }}</span>
+            {{ attendanceCount }}
+            <span style="font-size: 14px;">人</span>
+          </div>
+        </div>
+        <div class="tag_item">
+          <img src="@/assets/projectLarge/people.svg" alt="">
+          <div class="tag_title">在岗人数</div>
+          <div class="tag_info">
+            {{ peopleCount }}
+            <span style="font-size: 14px;">人</span>
+          </div>
+        </div>
+        <div class="tag_item">
+          <img src="@/assets/projectLarge/people.svg" alt="">
+          <div class="tag_title">出勤率</div>
+          <div class="tag_info">
+            {{ attendanceRate }}
+            <span style="font-size: 14px;">%</span>
           </div>
         </div>
       </div>
@@ -38,11 +60,11 @@
           <div class="attendance_item_title">出勤率</div>
           <div class="attendance_item_title">出勤时间</div>
         </div>
-        <div v-for="item in list" :key="item.title" class="attendance_item">
-          <div class="attendance_item_title">{{ item.title }}</div>
-          <div class="attendance_item_number">{{ item.number }} <span class="subfont">人/{{ item.number }}</span></div>
+        <div v-for="item in teamAttendanceList" :key="item.id" class="attendance_item">
+          <div class="attendance_item_title">{{ item.teamName }}</div>
+          <div class="attendance_item_number">{{ item.attendanceNumber }} <span class="subfont">人/{{ item.allNumber }}</span></div>
           <div class="attendance_item_rate">{{ item.attendanceRate }} %</div>
-          <div class="attendance_item_date subfont">{{ item.date }}</div>
+          <div class="attendance_item_date subfont">{{ item.attendanceTime }}</div>
         </div>
       </div>
     </div>
@@ -52,7 +74,7 @@
 <script setup lang="ts">
 import { ref } from "vue"
 import Title from './title.vue'
-import { getScreenNews } from '@/api/projectScreen';
+import { getScreenNews, getScreenPeople } from '@/api/projectScreen';
 import { mapOption } from './optionList'
 import * as echarts from 'echarts';
 
@@ -66,20 +88,55 @@ const props = defineProps({
 let mapChart = null
 const mapChartRef = ref<HTMLDivElement | null>(null);
 const news = ref([])
-const list = ref([
-  { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
-  { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
-  { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
-  { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
-  { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
-  { title: '智慧系统运维', number: 30, attendanceRate: 100, date: '2025-08-05 08:10' },
-])
-const tagList = ref([
-  { title: '出勤人数', number: 259 },
-  { title: '在岗人数', number: 100 },
-  { title: '出勤率', number: 100 },
+const newDetail = ref({
+  title: '',
+  content: ''
+})
+const newId = ref('')
+const attendanceCount = ref(0)
+const attendanceRate = ref(0)
+const peopleCount = ref(0)
+const teamAttendanceList = ref([
+  { id: "", teamName: "", attendanceNumber: 0, allNumber: 0, attendanceRate: 0, attendanceTime: "" },
 ])
 
+/**
+ * 显示新闻详情
+ */
+const showNewsDetail = (item: any) => {
+  if (newId.value === item.id) {
+    newId.value = ''
+    return
+  }
+  newDetail.value = item
+  newId.value = item.id
+}
+
+/**
+ * 获取项目人员出勤数据
+ */
+const getPeopleData = async () => {
+  const res = await getScreenPeople(props.projectId);
+  const { data, code } = res
+  if (code === 200) {
+    attendanceCount.value = data.attendanceCount
+    attendanceRate.value = data.attendanceRate
+    peopleCount.value = data.peopleCount
+    teamAttendanceList.value = data.teamAttendanceList
+  }
+}
+
+/**
+ * 获取项目新闻数据
+ */
+const getNewsData = async () => {
+  const res = await getScreenNews(props.projectId);
+  const { data, code } = res
+  if (code === 200) {
+    news.value = data
+  }
+}
+
 /**
  * 初始化地图
  */
@@ -95,12 +152,8 @@ onMounted(() => {
   // nextTick(() => {
   //   initMapChart();
   // });
-  getScreenNews(props.projectId).then(res => {
-    const { data, code } = res
-    if (code === 200) {
-      news.value = data
-    }
-  })
+  getPeopleData()
+  getNewsData()
 })
 
 onUnmounted(() => {
@@ -116,7 +169,6 @@ onUnmounted(() => {
 .leftPage {
   display: flex;
   flex-direction: column;
-  width: 25vw;
   height: 100%;
 
   .topPage,
@@ -158,11 +210,11 @@ onUnmounted(() => {
     display: flex;
     align-items: flex-start;
     gap: 10px;
-    // position: relative;
     margin-bottom: 20px;
     font-size: 14px;
     font-weight: 400;
     color: rgba(230, 247, 255, 1);
+    cursor: pointer;
 
     .ellipsis {
       display: -webkit-box;
@@ -177,21 +229,8 @@ onUnmounted(() => {
       margin-bottom: 0;
     }
 
-    .round {
-      display: grid;
-      place-items: center;
+    img {
       margin-top: 3px;
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background: rgba(29, 214, 255, 0.3);
-
-      .sub_round {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: #1DD6FF;
-      }
     }
   }
 }
@@ -244,4 +283,45 @@ onUnmounted(() => {
 .subfont {
   color: rgba(138, 149, 165, 1);
 }
+
+.detailBox {
+  position: absolute;
+  left: 20vw;
+  top: 0;
+  width: 300px;
+  height: 300px;
+  max-height: 500px;
+  overflow-y: auto;
+  padding: 0 15px;
+  box-sizing: border-box;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  opacity: 0;
+  z-index: -1;
+
+  &.show {
+    left: 25vw;
+    opacity: 1;
+    z-index: 1;
+  }
+}
+
+.detailBox::before {
+  content: '';
+  /* 绝对定位相对于父元素 */
+  position: absolute;
+  /* 定位到左侧中间位置 */
+  left: -10px;
+  top: 50%;
+  /* 垂直居中 */
+  transform: translateY(-50%);
+  /* 利用边框创建三角形 */
+  border-width: 10px 10px 10px 0;
+  border-style: solid;
+  /* 三角形颜色与背景匹配，左侧边框透明 */
+  border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
+  /* 确保三角形在内容下方 */
+  z-index: -1;
+}
 </style>
diff --git a/src/views/ProjectScreen/components/optionList.ts b/src/views/ProjectScreen/components/optionList.ts
index db2dbe2..4a37930 100644
--- a/src/views/ProjectScreen/components/optionList.ts
+++ b/src/views/ProjectScreen/components/optionList.ts
@@ -84,6 +84,12 @@ export let barOption = {
     axisLabel: {
       color: '#fff'
     },
+    axisLine: {
+      show: false
+    },
+    splitLine: {
+      show: false
+    }
   },
   yAxis: {
     name: '单位：m²',
diff --git a/src/views/ProjectScreen/components/rightPage.vue b/src/views/ProjectScreen/components/rightPage.vue
index 4e50d85..37aaec2 100644
--- a/src/views/ProjectScreen/components/rightPage.vue
+++ b/src/views/ProjectScreen/components/rightPage.vue
@@ -2,20 +2,10 @@
   <div class="leftPage">
     <div class="topPage">
       <Title title="项目概况" />
-
-      <div class="content">
-        <div class="content_item">项目名称：智慧生态工地社区开发项目</div>
-        <div class="content_item">项目位置：贵州省贵阳市乌当区（具体地块编号：01-123-11）</div>
-        <div class="content_item">占地面积：约10000亩</div>
-        <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
-        <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
-        <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
-        <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
-      </div>
+      <div class="content" v-html="generalize"></div>
     </div>
     <div class="endPage">
       <Title title="形象进度" />
-
       <div class="chart_container">
         <div ref="pieChartRef" class="echart" />
         <div ref="lineChartRef" class="echart" />
@@ -29,7 +19,7 @@ import { ref, onMounted, onUnmounted, nextTick } from "vue"
 import Title from './title.vue'
 import * as echarts from 'echarts';
 import { pieOption, barOption } from './optionList';
-import { getScreenLand } from '@/api/projectScreen';
+import { getScreenLand, getScreenImgProcess, getScreenGeneralize } from '@/api/projectScreen';
 
 const props = defineProps({
   projectId: {
@@ -38,9 +28,11 @@ const props = defineProps({
   }
 })
 
+const generalize = ref()
 // 饼图相关
 const pieChartRef = ref<HTMLDivElement | null>(null);
 let pieChart: any = null;
+const totalPercent = ref(0)
 // 折线图相关
 const lineChartRef = ref<HTMLDivElement | null>(null);
 let lineChart: any = null;
@@ -49,11 +41,12 @@ const designAreaData = ref([])
 const transferAreaData = ref([])
 // 饼图数据
 const pieData = [
-  { name: '桩点浇筑', value: 13 },
-  { name: '水泥灌注', value: 7 },
-  { name: '箱变安装', value: 40 },
-  { name: '支架安装', value: 20 },
-  { name: '组件安装', value: 20 },
+  { label: 'areaPercentage', name: '厂区', value: 0 },
+  { label: 'roadPercentage', name: '道路', value: 0 },
+  { label: 'collectorLinePercentage', name: '集电线路', value: 0 },
+  { label: 'exportLinePercentage', name: '送出线路', value: 0 },
+  { label: 'substationPercentage', name: '升压站', value: 0 },
+  { label: 'boxTransformerPercentage', name: '箱变', value: 0 },
 ]
 
 // 初始化饼图
@@ -63,6 +56,7 @@ const initPieChart = () => {
     return;
   }
   pieOption.series.data = pieData
+  pieOption.graphic[0].style.text = totalPercent.value + '%'
   pieChart = echarts.init(pieChartRef.value, null, {
     renderer: 'canvas',
     useDirtyRect: false
@@ -104,9 +98,37 @@ const getScreenLandData = async () => {
   }
 }
 
+/**
+ * 获取项目形象进度数据
+ */
+const getScreenImgProcessData = async () => {
+  const res = await getScreenImgProcess(props.projectId);
+  const { data, code } = res
+  if (code === 200) {
+    totalPercent.value = data.totalPercentage
+    pieData.forEach((item: any) => {
+      item.value = data[item.label]
+    })
+    initPieChart()
+  }
+}
+
+/**
+ * 获取项目概况数据
+ */
+const getScreenGeneralizeData = async () => {
+  const res = await getScreenGeneralize(props.projectId);
+  const { data, code } = res
+  if (code === 200) {
+    generalize.value = data
+  }
+}
+
 // 组件挂载时初始化图表
 onMounted(() => {
   getScreenLandData()
+  getScreenImgProcessData()
+  getScreenGeneralizeData()
   nextTick(() => {
     initPieChart();
     window.addEventListener('resize', handleResize);
@@ -131,7 +153,6 @@ onUnmounted(() => {
 .leftPage {
   display: flex;
   flex-direction: column;
-  width: 25vw;
   height: 100%;
 
   .topPage,
diff --git a/src/views/ProjectScreen/index.vue b/src/views/ProjectScreen/index.vue
index a01bfb6..4bccf68 100644
--- a/src/views/ProjectScreen/index.vue
+++ b/src/views/ProjectScreen/index.vue
@@ -2,13 +2,13 @@
   <div class="large_screen">
     <Header :projectId="projectId" @changePage="handleChangePage" />
     <div class="nav">
-      <div class="nav_left" v-if="!isHide" :class="{ 'slide-out-left': isHiding }">
+      <div class="nav_left" :style="{ left: isHideOther ? '-25vw' : '0' }">
         <leftPage :projectId="projectId" />
       </div>
-      <div class="nav_center" :class="{ 'full-width': isHiding }">
-        <centerPage :projectId="projectId" :hideFooter="isHiding" :isHide="isHide" />
+      <div class="nav_center" :style="{ width: isFull ? '100%' : 'calc(50vw - 30px)' }">
+        <centerPage :projectId="projectId" :hideFooter="isHiding" :isHide="isFull" />
       </div>
-      <div class="nav_right" v-if="!isHide" :class="{ 'slide-out-right': isHiding }">
+      <div class="nav_right" :style="{ right: isHideOther ? '-25vw' : '0' }">
         <rightPage :projectId="projectId" />
       </div>
     </div>
@@ -16,6 +16,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import Header from './components/header.vue';
 import leftPage from './components/leftPage.vue';
 import centerPage from './components/centerPage.vue';
@@ -24,16 +25,23 @@ import { useUserStoreHook } from '@/store/modules/user';
 
 const userStore = useUserStoreHook();
 const projectId = computed(() => userStore.selectedProject.id);
-const isHide = ref(false)
+const isFull = ref(false)
+const isHideOther = ref(false)
 const isHiding = ref(false)
 
+/**
+ * 切换中心页面全屏
+ */
 const handleChangePage = () => {
-  isHiding.value = true;
-
-  setTimeout(() => {
-    isHide.value = !isHide.value;
-    isHiding.value = false;
-  }, 500);
+  if (isFull.value) {
+    isFull.value = false;
+    setTimeout(() => {
+      isHideOther.value = false;
+    }, 500);
+  } else {
+    isFull.value = true;
+    isHideOther.value = true;
+  }
 }
 </script>
 
@@ -49,9 +57,9 @@ const handleChangePage = () => {
 }
 
 .nav {
-  display: flex;
-  justify-content: center;
-  gap: 15px;
+  position: relative;
+  display: grid;
+  place-items: center;
   width: calc(100vw - 30px);
   height: calc(100vh - 90px);
   margin: 0 auto;
@@ -61,15 +69,25 @@ const handleChangePage = () => {
 
 .nav_left,
 .nav_right {
-  width: 25vw;
-  transition: transform 1s ease, opacity 1s ease;
-  flex-shrink: 0;
+  position: absolute;
+  width: calc(25vw - 15px);
+  height: 100%;
+  transition: all 0.5s ease;
+}
+
+.nav_left {
+  top: 0;
+  left: 0;
+}
+
+.nav_right {
+  top: 0;
+  right: 0;
 }
 
 .nav_center {
-  flex: 1 1 auto;
-  min-width: 0;
-  transition: all 1s ease;
+  height: 100%;
+  transition: all 0.5s ease;
 }
 
 /* 中间面板全屏动画 */
@@ -79,13 +97,13 @@ const handleChangePage = () => {
   flex: none;
 }
 
-.slide-out-left {
-  transform: translateX(-100%);
+.slide_left {
+  left: -25vw;
   opacity: 0;
 }
 
-.slide-out-right {
-  transform: translateX(100%);
+.slide_right {
+  right: -25vw;
   opacity: 0;
 }
 </style>