设置中的滚动条

src/components/Formula.vue

@@ -15,12 +15,25 @@
         <p>操作</p>
       </div>
       <div
+        id="set_device_container"
         :class="
           formulaStore?.formulaList?.length == 0
             ? 'content_wrap layout'
             : 'content_wrap'
         "
       >
+        <img
+          :src="Top"
+          @click.prevent="topContainer"
+          class="top_arrow"
+          alt=""
+        />
+        <img
+          :src="Down"
+          @click.prevent="bottomContainer"
+          class="bottom_arrow"
+          alt=""
+        />
         <div
           class="line"
           v-for="item in formulaStore?.formulaList"
@@ -123,6 +136,8 @@ import UpdatePreSetting from './UpdatePreSetting'
 import { getAllFormulaJSON } from '@/mock/command'
 import { useWebSocketStore, useFormulaStore } from '@/store'
 import { startFormulaJSON } from '@/mock/command'
+import Down from '@/assets/img/arrow/down.png'
+import Top from '@/assets/img/arrow/top.png'
 
 const props = defineProps({
   changeTab: {
@@ -133,6 +148,16 @@ const props = defineProps({
   },
 })
 
+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 webSocketStore = useWebSocketStore()
 const formulaStore = useFormulaStore()
 
@@ -215,6 +240,23 @@ onMounted(() => {
     height: 446px;
     overflow: scroll;
     box-sizing: border-box;
+    position: relative;
+    .top_arrow {
+      width: 40px;
+      height: 40px;
+      position: fixed;
+      right: 45px;
+      top: 221px;
+      z-index: 2;
+    }
+    .bottom_arrow {
+      width: 40px;
+      height: 40px;
+      position: fixed;
+      right: 45px;
+      bottom: 159px;
+      z-index: 2;
+    }
     .line {
       padding: 12px;
       padding-left: 40px;

src/components/Setting/components/History.vue

@@ -4,7 +4,14 @@
       <p class="title_text">消毒名称</p>
       <p class="operator_text">操作</p>
     </div>
-    <div class="content_wrap">
+    <div class="content_wrap" 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="data_line">
         <p class="title">2023-0824-234048</p>
         <div class="btns">
@@ -73,8 +80,21 @@
 
 <script setup>
 import { ref } from 'vue'
+import Down from '@/assets/img/arrow/down.png'
+import Top from '@/assets/img/arrow/top.png'
 
 const showDetailVisible = ref(false)
+
+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 showDetailModal = () => {
   showDetailVisible.value = true
 }
@@ -117,6 +137,23 @@ const showDetailModal = () => {
   .content_wrap {
     flex: 1;
     overflow: scroll;
+    position: relative;
+    .top_arrow {
+      width: 40px;
+      height: 40px;
+      position: fixed;
+      right: 50px;
+      top: 229px;
+      z-index: 2;
+    }
+    .bottom_arrow {
+      width: 40px;
+      height: 40px;
+      position: fixed;
+      right: 50px;
+      bottom: 108px;
+      z-index: 2;
+    }
     .data_line {
       display: flex;
       align-items: center;

src/components/Setting/components/RunInfectionSetting.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">
@@ -180,6 +187,8 @@ import {
   useOperatorStore,
   useRunningStore,
 } from '@/store'
+import Down from '@/assets/img/arrow/down.png'
+import Top from '@/assets/img/arrow/top.png'
 import { storeToRefs } from 'pinia'
 import {
   setSettingValJSON,
@@ -207,6 +216,16 @@ const props = defineProps({
   },
 })
 
+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 sprayLiquidConfigValShow = ref(false)
 const stoped_gsShow = ref(false)
 const continued_gsShow = ref(false)
@@ -584,6 +603,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;