style: 院区安全态势样式修改

src/views/institute-safety/modules/safety-company-home/components/CompanyRating.vue

@@ -2,7 +2,7 @@
   <div class="company-rating">
     <img class="rating-img" src="@/assets/images/institute-safety/rating.png" alt="" />
     <div>
-      <div class="rating-label">{{ rating ? '今日AI检测异常问题' : '今日院区安全指数：' }}</div>
+      <div class="rating-label">{{ rating ? '今日AI检测异常问题' : '今日院区安全指数' }}</div>
       <div class="rating-value">{{ rating ? rating : '100%' }}</div>
     </div>
   </div>
@@ -25,17 +25,14 @@
     position: absolute;
     top: 12px;
     left: 12px;
-
-    width: 204px;
-    height: 84px;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-    backdrop-filter: blur(10px);
-
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: 10px;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    backdrop-filter: blur(10px);
   }
   .rating-label {
     font-weight: 500;

src/views/institute-safety/modules/safety-company-home/components/ControlTab.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="control-tab" :class="{ 'control-tab_is-active': isOpen }">
     <div @click="handleOpenTab" class="control-tab-switch">
-      <img style="margin: 10px 0" src="@/assets/images/institute-safety/control-tab-switch.png" alt="" />
+      <img
+        class="control-tab-switch-img"
+        :class="{ 'control-tab-switch-img_is-active': isOpen }"
+        src="@/assets/images/institute-safety/control-tab-switch.png"
+        alt=""
+      />
     </div>
     <div class="control-tab-content">
       <div class="tab-button" @click="emit('open-surveillance-list')">
@@ -31,20 +36,18 @@
   };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .control-tab {
     position: absolute;
     bottom: 10px;
     right: -86px;
-
-    width: 102px;
-
     display: flex;
     align-items: center;
     justify-content: center;
-
     transition-duration: 0.3s;
     transition-property: all;
+    background-image: url('@/assets/images/institute-safety/more-btn-bg.png');
+    background-size: 100% 100%;
   }
 
   .control-tab_is-active {
@@ -52,39 +55,24 @@
   }
 
   .control-tab-switch {
-    cursor: pointer;
-
-    width: 16px;
-    background: rgba(50, 50, 50, 1);
-    backdrop-filter: blur(10px);
-  }
-
-  .control-tab-switch::before {
-    content: '';
-    display: block;
-
-    position: relative;
-    bottom: 5px;
-
     width: 16px;
-    height: 10px;
-    transform: skewY(-30deg);
-    background: rgba(50, 50, 50, 1);
-    backdrop-filter: blur(10px);
-  }
-
-  .control-tab-switch::after {
-    content: '';
-    display: block;
-
-    position: relative;
-    top: 5px;
+    height: 75px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
 
-    width: 16px;
-    height: 10px;
-    transform: skewY(30deg);
-    background: rgba(50, 50, 50, 1);
-    backdrop-filter: blur(10px);
+    .control-tab-switch-img {
+      width: 7px;
+      height: 10px;
+      transform: rotate(180deg);
+      transition: all 0.3s;
+    }
+
+    .control-tab-switch-img_is-active {
+      transform: rotate(0deg);
+      transition: all 0.3s;
+    }
   }
 
   .control-tab-content {
@@ -93,15 +81,14 @@
     align-items: center;
     justify-content: center;
     gap: 28px;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(10px);
-    border-radius: 5px;
     padding: 16px 7px;
   }
+
   .tab-button {
     cursor: pointer;
     text-align: center;
   }
+
   .tab-text {
     font-weight: 400;
     font-size: 12px;

src/views/institute-safety/modules/safety-company-home/components/SurveillanceList.vue

@@ -134,12 +134,11 @@
   }
 
   .group-title {
-    max-width: 100px;
+    width: 249px;
     height: 28px;
-    line-height: 26px;
+    line-height: 28px;
     background: rgba(0, 0, 0, 0.5);
     border-radius: 4px;
-    border: 1px solid #000000;
 
     padding: 0 10px;
 
@@ -167,6 +166,7 @@
   }
   .camera-preview {
     width: 100%;
+    border-radius: 4px;
   }
   .camera-info {
     position: absolute;
@@ -174,6 +174,7 @@
     width: 248px;
     height: 80px;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
+    border-radius: 4px;
 
     display: flex;
     align-items: flex-end;

src/views/institute-safety/modules/safety-question-list/QuestionList.vue

@@ -304,13 +304,13 @@
   }
 
   .list-pane {
-    width: 25%;
+    width: 350px;
     height: 100%;
 
     .list-scroll {
       width: 100%;
       height: 100%;
-      padding-right: 15px;
+      padding-right: 5px;
     }
 
     .list-item {
@@ -379,9 +379,9 @@
   }
 
   .content-pane {
-    width: calc(75% - 20px);
+    width: calc(100% - 350px - 10px - 5px);
     height: 100%;
-    margin-left: 20px;
+    margin-left: 10px;
 
     .tabs {
       width: fit-content;

src/views/institute-safety/modules/safety-workshop-list/WorkshopList.vue

@@ -23,10 +23,10 @@
   import { WORKSHOP_INFOS } from './constants';
 
   import useQuestionListStore from '@/views/institute-safety/modules/safety-company-home/stores/use-question-list';
-  import { storeToRefs } from 'pinia';
+  // import { storeToRefs } from 'pinia';
 
   const questionListStore = useQuestionListStore();
-  const { showQuestionList } = storeToRefs(questionListStore);
+  // const { showQuestionList } = storeToRefs(questionListStore);
 
   const staticWorkshopList = ref(WORKSHOP_INFOS);
 
@@ -76,14 +76,17 @@
   .workshop-list-item-id {
     margin: 0 10px;
     width: 20px;
+    height: 20px;
     border-radius: 50%;
     background: #e8e8e8;
     font-size: 13px;
     color: #666666;
     font-weight: bold;
-    font-family: DIN, DIN;
+    font-family: DINAlternate;
     text-align: center;
+    line-height: 20px;
   }
+
   .workshop-list-item-name {
     width: 126px;
     font-weight: 400;
@@ -95,7 +98,7 @@
   }
   .workshop-list-item-icon {
     cursor: pointer;
-    margin-left: 10px;
+    margin: 0 8px 0 10px;
     width: 20px;
     height: 20px;
   }