设置中的滚动条

src/components/Setting/components/Device.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="device_container">
+  <div class="device_container" id="set_device_container">
+    <img :src="Top" @click.prevent="topContainer" class="top_arrow" alt="" />
+    <img
+      :src="Down"
+      @click.prevent="bottomContainer"
+      class="bottom_arrow"
+      alt=""
+    />
     <div class="row_wrap">
       <p class="title">注射蠕动泵速率(g/min)</p>
       <p class="num">
@@ -234,12 +241,24 @@ import { ref } from 'vue'
 import { showSuccessToast, showFailToast } from 'vant'
 import { useSettingStore, useWebSocketStore, useOperatorStore } from '@/store'
 import { storeToRefs } from 'pinia'
+import Down from '@/assets/img/arrow/down.png'
+import Top from '@/assets/img/arrow/top.png'
 import {
   setSettingValJSON,
   changeDisinfectionParameterJSON,
   updateSettingInRunInfectionJSON,
 } from '@/mock/command'
 
+const topContainer = () => {
+  const ele = document.getElementById('set_device_container')
+  ele.scrollTop = ele.scrollTop - 100 < 0 ? 0 : ele.scrollTop - 100
+}
+
+const bottomContainer = () => {
+  const ele = document.getElementById('set_device_container')
+  ele.scrollTop = ele.scrollTop + 100
+}
+
 const settingStore = useSettingStore()
 const webSocketStore = useWebSocketStore()
 const operatorStore = useOperatorStore()
@@ -751,6 +770,23 @@ const setSprayLiquidVal = () => {
   grid-template-columns: repeat(1, 1fr);
   row-gap: 20px;
   padding-bottom: 20px;
+  position: relative;
+  .top_arrow {
+    width: 40px;
+    height: 40px;
+    position: fixed;
+    right: 50px;
+    top: 145px;
+    z-index: 2;
+  }
+  .bottom_arrow {
+    width: 40px;
+    height: 40px;
+    position: fixed;
+    right: 50px;
+    bottom: 108px;
+    z-index: 2;
+  }
   .row_wrap {
     // width: 726px;
     height: 80px;