left right arrow

src/components/Setting/components/History.vue

@@ -31,6 +31,19 @@
         class="bottom_arrow"
         alt=""
       />
+
+      <img
+        :src="Left"
+        @click.prevent="leftContainer"
+        class="left_arrow"
+        alt=""
+      />
+      <img
+        :src="Right"
+        @click.prevent="rightContainer"
+        class="right_arrow"
+        alt=""
+      />
       <div class="table_wrap" id="tabledetail_device_container">
         <div
           class="table_column"
@@ -40,7 +53,6 @@
           <van-sticky>
             <p class="title">{{ item.title }}</p></van-sticky
           >
-
           <div class="first_box" v-for="it in item.data" :key="it">
             <p class="content">{{ it }}</p>
             <p class="line"></p>
@@ -58,6 +70,8 @@
 import { ref } from 'vue'
 import Down from '@/assets/img/arrow/down.png'
 import Top from '@/assets/img/arrow/top.png'
+import Right from '@/assets/img/arrow/right.png'
+import Left from '@/assets/img/arrow/left.png'
 import { useHistoryStore, useWebSocketStore } from '@/store'
 import { getDetailInfoById } from '@/mock/command'
 
@@ -85,6 +99,16 @@ const bottomContainer2 = () => {
   ele.scrollTop = ele.scrollTop + 100
 }
 
+const leftContainer = () => {
+  const ele = document.getElementById('tabledetail_device_container')
+  ele.scrollLeft = ele.scrollLeft - 100 < 100 ? 0 : ele.scrollLeft - 100
+}
+
+const rightContainer = () => {
+  const ele = document.getElementById('tabledetail_device_container')
+  ele.scrollLeft = ele.scrollLeft + 100
+}
+
 const showDetailModal = item => {
   historyStore.updateDetailData([])
   // 根据这个item获取详细信息
@@ -221,6 +245,22 @@ const showDetailModal = item => {
       bottom: 111px;
       z-index: 4;
     }
+    .left_arrow {
+      width: 40px;
+      height: 40px;
+      position: fixed;
+      left: 50px;
+      bottom: 111px;
+      z-index: 4;
+    }
+    .right_arrow {
+      width: 40px;
+      height: 40px;
+      position: fixed;
+      right: 98px;
+      bottom: 111px;
+      z-index: 4;
+    }
     .table_wrap {
       // flex: 1;
       width: 3124px;
@@ -279,7 +319,7 @@ const showDetailModal = item => {
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      padding: 20px 80px;
+      padding: 20px 120px;
       .return_btn {
         width: 91px;
         height: 40px;