样式调整

gjj

2025-02-26 70bebe9dae89ebddd7e77543aac618e78d730fc9

 src/views/EquipmentView.vue

@@ -44,7 +44,7 @@
        }">
   </div>
   <div class="equipment-status" :style="sectionStyle">
    <div class="w-full h-[30px] mb-[10px]" :style="{
    <div class="w-full h-[30px]" :style="{
            backgroundImage: `url(${bgImage})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
@@ -71,10 +71,10 @@
     <button class="control-btn" :class="{ 'active': currentTab === '升降机监控' }" @click="handleControlBtnClick('升降机监控')">升降机监控</button>
    </div>
    <div class="divider"></div>
    <div class="progress-bar">
    <div class="progress-bar px-[10px]">
     <div class="label">运行设备总数</div>
     <div class="bar flex items-center">
      <div class="progress relative w-[80%] h-[24px]">
      <div class="progress relative w-[90%] h-[24px]">
       <div class="progress-inner" :style="{ width: `${deviceOnline / deviceTotal * 100}%` }"></div>
       <div class="progress-blocks">
        <div v-for="n in 28" :key="n" class="block" :class="{ 'active': (n-1)/28 * 100 <= (deviceOnline / deviceTotal * 100) }"></div>
@@ -560,7 +560,7 @@
}

.equipment-status {
 padding: 20px 10px;
 padding: 10px 10px;
 height: calc(100% - 5vh);
}

@@ -572,7 +572,7 @@
.status-circles {
 display: flex;
 justify-content: space-around;
 margin: 20px 0;
 margin: 15px 0;
}

.progress-circle {
@@ -628,7 +628,7 @@
 width: 100%;
 height: 1px;
 background: linear-gradient(270deg, rgba(94, 161, 209, 0.1) 0%, #4886BC 49%, rgba(48, 104, 165, 0.1) 100%);
 margin: 20px 0;
 margin: 15px 0;
}