feat: 优化UI组件样式和交互逻辑

- 为对话框添加背景图片并调整布局
- 修改视频监控组件的小视频切换逻辑
- 调整天气卡片样式增加内边距和背景
- 修复视频监控组件展开/收起状态判断
- 为安全监控页面添加顶部间距

src/views/securitySurveillance/components/spjk.vue

@@ -1,7 +1,7 @@
 <template>
     <el-row style="height: 100%;">
         <el-card style="width: 100%;border-radius: 12px;height: 100%;">
-            <div style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
+            <div style="display: flex;width: 100%;justify-content: flex-end;align-items: center;padding-bottom: 15px;">
                 <TitleComponent title="实时视频监控" subtitle="查看所有已完成的巡检记录，跟进巡检报告" />
                 <span style="color: rgba(24, 109, 245, 1);display: flex;align-items: center; cursor: pointer;">
                     <span>
@@ -40,10 +40,13 @@
                             <el-row gutter="20">
                                 <el-col :span="24" v-for="i in 3" :key="i">
                                     <div class="item small" @click="() => {
-                                        activeIndex = videoList.length - 3 + i - 1;
+                                        // 计算要显示的视频索引 - 按照当前视频后面三个排序
+                                        const displayIndex = (activeIndex + i) % videoList.length;
+                                        activeIndex = displayIndex;
                                     }">
-                                        <img :src="videoList[videoList.length - 3 + i - 1].url" alt="">
-                                        <div class="title">{{ videoList[videoList.length - 3 + i - 1].name }}</div>
+                                        <img :src="videoList[(activeIndex + i) % videoList.length].url" alt="">
+                                        <div class="title">{{ videoList[(activeIndex + i) % videoList.length].name }}
+                                        </div>
                                     </div>
                                 </el-col>
                             </el-row>
@@ -64,7 +67,7 @@
 
                     </template>
                 </el-row>
-                <el-row v-if="isExpanded">
+                <el-row v-if="!isExpanded">
                     <div class="pagination" v-if="activeTab !== 'record'">
                         <el-pagination layout="prev, pager, next, jumper, sizes" :total="totalRecords"
                             v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
@@ -126,7 +129,6 @@ const videoList = ref([
 
 <style scoped lang="scss">
 .video-container {
-
     .item {
         height: 220px;
         margin-bottom: 20px;