添加屏幕扩展动画

src/views/ProjectScreen/components/centerPage.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="centerPage">
-    <div class="topPage">
-      <!-- 暂无 -->
+    <div class="topPage" :class="{ 'full-height': hideFooter }">
+      <!-- <img src="@/assets/projectLarge/center.png" alt="" style="width: 100%;object-fit: scale-down"> -->
     </div>
-    <div class="endPage">
+    <div class="endPage" :class="{ 'slide-out-down': hideFooter }" v-if="!isHide">
       <Title title="AI安全巡检" :prefix="true" />
 
       <div class="swiper">
@@ -13,10 +13,10 @@
           </el-icon>
         </div>
         <div class="swiper_content" ref="swiperContent">
-          <div class="swiper_item" v-for="(item, index) in swiperList" :key="index">
-            <img src="@/assets/projectLarge/swiper.png" alt="" class="swiper_img">
-            <div class="swiper_date">{{ item.date }}</div>
-            <div class="swiper_tip">{{ item.tip }}</div>
+          <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>
         </div>
         <div class="arrow" :class="{ 'canUse': canRight }" @click="swiperClick('right')">
@@ -30,30 +30,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, onMounted } from "vue"
 import Title from './title.vue'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 
-const swiperList = ref([
-  { date: '03-18 15:00', tip: '未佩戴安全帽1' },
-  { date: '03-18 15:00', tip: '未佩戴安全帽2' },
-  { date: '03-18 15:00', tip: '未佩戴安全帽3' },
-  { date: '03-18 15:00', tip: '未佩戴安全帽4' },
-  { date: '03-18 15:00', tip: '未佩戴安全帽5' },
-  { date: '03-18 15:00', tip: '未佩戴安全帽6' },
-  { date: '03-18 15:00', tip: '未佩戴安全帽7' },
-  { date: '03-18 15:00', tip: '未佩戴安全帽8' },
-  { date: '03-18 15:00', tip: '未佩戴安全帽9' },
-  { date: '03-18 15:00', tip: '未佩戴安全帽10' },
-  { date: '03-18 15:00', tip: '未佩戴安全帽11' },
-  { date: '03-18 15:00', tip: '未佩戴安全帽12' },
-])
+const props = defineProps({
+  hideFooter: {
+    type: Boolean,
+    default: false
+  },
+  isHide: {
+    type: Boolean,
+    default: false
+  }
+})
 
+const swiperList = ref([])
 const swiperContent = ref<HTMLDivElement>()
 const swiperItemWidth = ref(100)
 const canLeft = ref(false)
 const canRight = ref(true)
 
 const swiperClick = (direction: 'left' | 'right') => {
+  if (!swiperContent.value) return
 
   if (direction === 'right') {
     if (swiperContent.value.scrollLeft >= swiperContent.value.scrollWidth - swiperContent.value.clientWidth) {
@@ -70,36 +69,65 @@ const swiperClick = (direction: 'left' | 'right') => {
     }
     swiperContent.value.scrollLeft -= swiperItemWidth.value
   }
+
+  // 更新箭头状态
+  canLeft.value = swiperContent.value.scrollLeft > 0
+  canRight.value = swiperContent.value.scrollLeft < swiperContent.value.scrollWidth - swiperContent.value.clientWidth
 }
 
 onMounted(() => {
-  swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
+  if (swiperContent.value && swiperContent.value.children.length > 0) {
+    swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
+  }
 })
-
 </script>
 
 <style scoped lang="scss">
 .centerPage {
   display: flex;
   flex-direction: column;
-  width: 50vw;
   height: 100%;
+}
 
-  .topPage,
-  .endPage {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    padding: 15px 0;
-    border: 1px solid rgba(29, 214, 255, 0.1);
-    box-sizing: border-box;
-  }
+.topPage,
+.endPage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 15px 0;
+  border: 1px solid rgba(29, 214, 255, 0.1);
+  box-sizing: border-box;
+}
 
-  .topPage {
-    flex: 1;
-    margin-bottom: 23px;
-  }
+.topPage {
+  flex: 1;
+  margin-bottom: 23px;
+  transition: flex 1s ease;
+  /* 添加flex过渡效果 */
+}
+
+/* 当endPage隐藏时，topPage占满高度 */
+.full-height {
+  flex: 1 1 100%;
+  margin-bottom: 0;
+}
+
+.endPage {
+  max-height: 300px;
+  /* 根据实际内容调整最大高度 */
+  opacity: 1;
+  transition: all 1s ease;
+}
+
+/* 向下滑出动画 */
+.slide-out-down {
+  transform: translateY(100%);
+  opacity: 0;
+  max-height: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
 }
 
 .swiper {
@@ -166,9 +194,16 @@ onMounted(() => {
   border-radius: 50%;
   border: 1px solid skyblue;
   color: skyblue;
+  cursor: pointer;
+  transition: all 0.3s ease;
 
-  &:canUse {
-    color: #000 !important;
+  &.canUse {
+    background-color: skyblue;
+    color: #fff !important;
+  }
+
+  &:hover:not(.canUse) {
+    opacity: 0.7;
   }
 }
 </style>