Bläddra i källkod

[Feat 2590] 开发瓦斯页面的按钮等组件,调整部分样式

houzekong 11 månader sedan
förälder
incheckning
b15020dac1

BIN
src/assets/images/vent/gas/button-hover.png


BIN
src/assets/images/vent/gas/button.png


+ 31 - 0
src/views/vent/gas/components/form/button.vue

@@ -0,0 +1,31 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <span class="button" @click="$emit('click')">
+    <slot></slot>
+  </span>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改,符合全局规范
+
+  defineEmits(['click']);
+</script>
+
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .button {
+    background-image: url('@/assets/images/vent/gas/button.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    padding: 10px 50px;
+    text-align: center;
+    color: @white;
+    cursor: pointer;
+  }
+
+  .button:hover {
+    background-image: url('@/assets/images/vent/gas/button-hover.png');
+  }
+</style>

+ 1 - 0
src/views/vent/gas/components/list/index.vue

@@ -68,6 +68,7 @@
     }>(),
     }>(),
     {
     {
       layout: 'vertical',
       layout: 'vertical',
+      backgrounded: true,
     }
     }
   );
   );
 
 

+ 7 - 2
src/views/vent/gas/gasPumpMonitor/components/monitor.vue

@@ -23,13 +23,17 @@
     </div>
     </div>
     <div class="lr right-box">
     <div class="lr right-box">
       <div class="item-box sensor-container">
       <div class="item-box sensor-container">
-        <CustomBoard label="累积抽采量" :value="cumulativeExtraction" />
-        <CustomBoard label="累积抽采时间" :value="cumulativeExtractionTime" />
+        <!-- <CustomBoard label="累积抽采量" :value="cumulativeExtraction" /> -->
+        <!-- <CustomBoard label="累积抽采时间" :value="cumulativeExtractionTime" /> -->
         <ventBox1>
         <ventBox1>
           <template #title>
           <template #title>
             <div>自动模式</div>
             <div>自动模式</div>
           </template>
           </template>
           <template #container>
           <template #container>
+            <div class="flex justify-between mt-10px mb-10px">
+              <Button>一键倒机</Button>
+              <Button>一键启停</Button>
+            </div>
             <List icon="pump" title="抽放泵" layout="double-columns" type="status-light" :label-width="80" v-bind="pumpStatusProp" />
             <List icon="pump" title="抽放泵" layout="double-columns" type="status-light" :label-width="80" v-bind="pumpStatusProp" />
             <List icon="water-pump" title="水泵" layout="double-columns" type="status-light" :label-width="80" v-bind="waterPumpStatusProp" />
             <List icon="water-pump" title="水泵" layout="double-columns" type="status-light" :label-width="80" v-bind="waterPumpStatusProp" />
             <List icon="gas-pump" title="高负压配气泵" layout="double-columns" type="status-light" :label-width="80" v-bind="HPumpStatusProp" />
             <List icon="gas-pump" title="高负压配气泵" layout="double-columns" type="status-light" :label-width="80" v-bind="HPumpStatusProp" />
@@ -46,6 +50,7 @@
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import ventBox1 from '/@/components/vent/ventBox1.vue';
   import List from '@/views/vent/gas/components/list/index.vue';
   import List from '@/views/vent/gas/components/list/index.vue';
   import BaseTab from '@/views/vent/gas/components/tab/baseTab.vue';
   import BaseTab from '@/views/vent/gas/components/tab/baseTab.vue';
+  import Button from '@/views/vent/gas/components/form/button.vue';
   import CustomBoard from '@/views/vent/gas/components/board/baseBoard.vue';
   import CustomBoard from '@/views/vent/gas/components/board/baseBoard.vue';
   import {
   import {
     pumpListConfig,
     pumpListConfig,