略改样式

src/views/ProjectScreen/components/centerPage.vue

@@ -3,9 +3,11 @@
     <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="endPage" :class="{ 'slide-out-down': isHide }">
+      <Title title="AI安全巡检">
+        <img src="@/assets/projectLarge/robot.svg" alt="" height="20px" width="20px">
+      </Title>
+      <div class="swiper" v-if="inspectionList.length">
         <div class="arrow" :class="{ 'canUse': canLeft }" @click="swiperClick('left')">
           <el-icon size="16" :color="canLeft ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
             <ArrowLeft />
@@ -13,7 +15,7 @@
         </div>
         <div class="swiper_content" ref="swiperContent">
           <div class="swiper_item" v-for="(item, i) in inspectionList" :key="i">
-            <img :src="item.picture" alt="安全巡检图片" class="swiper_img">
+            <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>
@@ -38,10 +40,6 @@ const { proxy } = getCurrentInstance();
 const { violation_level_type } = toRefs(proxy?.useDict('violation_level_type'));
 
 const props = defineProps({
-  hideFooter: {
-    type: Boolean,
-    default: false
-  },
   isHide: {
     type: Boolean,
     default: false

src/views/ProjectScreen/components/header.vue

@@ -16,10 +16,6 @@
     </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">
@@ -41,6 +37,20 @@
           <img src="@/assets/large/setting.png" alt="设置图标" />
           <span>管理系统</span>
         </div>
+        <!-- 分割线 -->
+        <div class="divider">
+          <div class="top-block"></div>
+          <div class="bottom-block"></div>
+        </div>
+        <!--  -->
+        <div class="change" @click="emit('changePage')">
+          <el-icon size="20" v-if="!isFull">
+            <Expand />
+          </el-icon>
+          <el-icon size="20" v-else>
+            <Fold />
+          </el-icon>
+        </div>
       </div>
     </div>
   </div>
@@ -63,6 +73,10 @@ const props = defineProps({
   projectId: {
     type: String,
     default: ''
+  },
+  isFull: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -302,4 +316,11 @@ onUnmounted(() => {
   margin-right: 6px;
   /* 图标与文字间距 */
 }
+
+.change {
+  display: grid;
+  place-items: center;
+  margin-right: 10px;
+  cursor: pointer;
+}
 </style>

src/views/ProjectScreen/components/leftPage.vue

@@ -29,7 +29,7 @@
       <div class="attendance_tag">
         <div class="tag_item">
           <img src="@/assets/projectLarge/people.svg" alt="">
-          <div class="tag_title">出勤人数</div>
+          <div class="tag_title">出勤人</div>
           <div class="tag_info">
             {{ attendanceCount }}
             <span style="font-size: 14px;">人</span>
@@ -37,7 +37,7 @@
         </div>
         <div class="tag_item">
           <img src="@/assets/projectLarge/people.svg" alt="">
-          <div class="tag_title">在岗人数</div>
+          <div class="tag_title">在岗人</div>
           <div class="tag_info">
             {{ peopleCount }}
             <span style="font-size: 14px;">人</span>

src/views/ProjectScreen/components/optionList.ts

@@ -6,6 +6,7 @@ export let pieOption = {
       left: 'center',
       top: '40%',
       style: {
+        // 需要从接口替换
         text: '70%',
         fontSize: 24,
         fontWeight: 'bold',

src/views/ProjectScreen/components/title.vue

@@ -4,8 +4,8 @@
             <img src="@/assets/projectLarge/section.svg" alt="">
             <img src="@/assets/projectLarge/border.svg" alt="">
         </div>
-        <div v-if="prefix">
-            <img src="@/assets/projectLarge/robot.svg" alt="" style="width: 20px; height: 20px;margin-right: 5px;">
+        <div>
+            <slot></slot>
         </div>
         <div>{{ title }}</div>
     </div>

src/views/ProjectScreen/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="large_screen">
-    <Header :projectId="projectId" @changePage="handleChangePage" />
+    <Header :projectId="projectId" :isFull="isFull" @changePage="handleChangePage" />
     <div class="nav">
       <div class="nav_left" :style="{ left: isHideOther ? '-25vw' : '0' }">
         <leftPage :projectId="projectId" />
       </div>
       <div class="nav_center" :style="{ width: isFull ? '100%' : 'calc(50vw - 30px)' }">
-        <centerPage :projectId="projectId" :hideFooter="isHiding" :isHide="isFull" />
+        <centerPage :projectId="projectId" :isHide="isFull" />
       </div>
       <div class="nav_right" :style="{ right: isHideOther ? '-25vw' : '0' }">
         <rightPage :projectId="projectId" />
@@ -27,7 +27,6 @@ const userStore = useUserStoreHook();
 const projectId = computed(() => userStore.selectedProject.id);
 const isFull = ref(false)
 const isHideOther = ref(false)
-const isHiding = ref(false)
 
 /**
  * 切换中心页面全屏