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

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

src/assets/styles/dialog.scss

@@ -117,6 +117,13 @@
         color: rgba(227, 39, 39, 1) !important;
     }
 
+    .back {
+        background-image: url("/assets/dialog2.png");
+        background-size: 455px;
+        background-repeat: no-repeat;
+        background-position: 780px -65px;
+    }
+
     .alarm-alert-content {
         background: linear-gradient(180deg, rgba(255, 87, 51, 0.23) 0%, rgba(255, 219, 219, 0) 100%);
         padding-left: 50px;
@@ -130,6 +137,7 @@
             padding: 50px 0;
             padding-bottom: 20px;
 
+
             .info {
                 display: flex;
                 flex-direction: column;

src/views/pvSystem/siteOverview/components/CustomDialogAlarm.vue

@@ -1,8 +1,9 @@
 <template>
     <el-dialog :visible="dialogVisible" width="1200" id="custom-dialog" class="no-header-dialog normal">
+        <div class="back">
             <div class="alarm-alert-content success">
                 <el-row>
-                <el-col :span="22">
+                    <el-col :span="20">
                         <div class="top">
                             <div class="info">
                                 <div class="title">通信中断</div>
@@ -79,6 +80,7 @@
                     </el-col>
                 </el-row>
             </div>
+        </div>
     </el-dialog>
 </template>
 

src/views/pvSystem/siteOverview/components/qixiang.vue

@@ -2,13 +2,16 @@
   <div class="cardItem">
     <el-card>
       <div class="tianqi"
-        style="display: flex; flex-direction: column; align-items: center; background-color: #fafafa; border-radius: 10px; padding-bottom: 40px">
+        style="display: flex; flex-direction: column; align-items: center; background-color: #fafafa; border-radius: 10px; padding-bottom: 40px;padding: 20px;">
+        <div
+          style="width: 100%;display: flex;flex-direction: column;align-items: center;background-color: #FFFFFF;margin: 0 20px;border-radius: 15px;padding: 20px;">
           <div>
             <img src="/assets/Sunny.png" style="display: block; width: 100px; height: 100px" alt="" />
           </div>
           <div style="font-family: 'Alibaba-PuHuiTi-Bold'; font-size: 24px">31℃</div>
           <div>晴朗</div>
           <div style="color: rgba(154, 154, 154, 1); font-size: 14px">紫外线强度：<span>高</span></div>
+        </div>
         <div class="tianqi2">
           <div class="item">
             <div>

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;

src/views/securitySurveillance/index.vue

@@ -24,7 +24,7 @@
                 </el-row> <!-- 闭合内层 el-row -->
             </el-col>
         </el-row>
-        <el-row>
+        <el-row style="margin-top: 20px;">
             <Top />
         </el-row>
         <el-row style="margin-top: 20px;" :gutter="25">