style:浏览器比例过大时导致按钮不显示问题修复，增加滚动条

smsb-plus-ui/src/views/smsb/device/index.vue

@@ -39,44 +39,49 @@
             </el-col>
           </el-row>
         </el-card>
-        <el-card shadow="hover" :style="{ marginTop: '10px', height: '60px' }">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="0px">
-            <el-form-item label="" prop="name">
-              <el-input v-model="queryParams.name" style="width: 120px" placeholder="请输入设备名称" clearable
-                        @keyup.enter="handleQuery"/>
-            </el-form-item>
-            <el-form-item label="" prop="serialNumber">
-              <el-input v-model="queryParams.serialNumber" style="width: 120px" placeholder="请输入设备SN" clearable
-                        @keyup.enter="handleQuery"/>
-            </el-form-item>
-            <el-form-item label="" prop="mac">
-              <el-input v-model="queryParams.mac" style="width: 125px" placeholder="请输入设备MAC" clearable
-                        @keyup.enter="handleQuery"/>
-            </el-form-item>
-            <el-form-item label="" prop="onlineStatus">
-              <el-select v-model="queryParams.onlineStatus" placeholder="请选择设备状态" clearable @change="handleQuery"
-                         style="width: 150px">
-                <el-option v-for="item in sys_device_online" :key="item.label" :value="item.value"
-                           :label="item.label"></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-              <el-button v-hasPermi="['smsb:device:add']" type="primary" plain icon="Plus" @click="handleAdd">设备添加
-              </el-button>
-              <el-button type="warning" plain icon="Picture" :disabled="single" @click="screenShot()">回采画面 </el-button>
-              <el-button type="success" plain icon="VideoPlay" :disabled="single" @click="startMonitor()">回调视频
-              </el-button>
-              <el-button v-hasPermi="['smsb:device:remove']" type="danger" plain icon="Delete" :disabled="multiple"
-                @click="handleDelete()">删除
-              </el-button>
-              <el-button v-hasPermi="['smsb:device:query']" type="info" plain icon="Position" :disabled="single"
-                @click="handleInfo()">
-                详情
-              </el-button>
-            </el-form-item>
-          </el-form>
+        <el-card shadow="hover" :style="{ marginTop: '10px', height: '80px' }">
+          <div class="form-wrapper">
+            <div class="form-container">
+              <el-form ref="queryFormRef" :model="queryParams" style="margin-top: 10px" :inline="true" label-width="0px">
+                <el-form-item label="" prop="name">
+                  <el-input v-model="queryParams.name" style="width: 120px" placeholder="请输入设备名称" clearable
+                            @keyup.enter="handleQuery"/>
+                </el-form-item>
+                <el-form-item label="" prop="serialNumber">
+                  <el-input v-model="queryParams.serialNumber" style="width: 120px" placeholder="请输入设备SN" clearable
+                            @keyup.enter="handleQuery"/>
+                </el-form-item>
+                <el-form-item label="" prop="mac">
+                  <el-input v-model="queryParams.mac" style="width: 125px" placeholder="请输入设备MAC" clearable
+                            @keyup.enter="handleQuery"/>
+                </el-form-item>
+                <el-form-item label="" prop="onlineStatus">
+                  <el-select v-model="queryParams.onlineStatus" placeholder="请选择设备状态" clearable @change="handleQuery"
+                             style="width: 150px">
+                    <el-option v-for="item in sys_device_online" :key="item.label" :value="item.value"
+                               :label="item.label"></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                  <el-button v-hasPermi="['smsb:device:add']" type="primary" plain icon="Plus" @click="handleAdd">设备添加
+                  </el-button>
+                  <el-button type="warning" plain icon="Picture" :disabled="single" @click="screenShot()">回采画面
+                  </el-button>
+                  <el-button type="success" plain icon="VideoPlay" :disabled="single" @click="startMonitor()">回调视频
+                  </el-button>
+                  <el-button v-hasPermi="['smsb:device:remove']" type="danger" plain icon="Delete" :disabled="multiple"
+                             @click="handleDelete()">删除
+                  </el-button>
+                  <el-button v-hasPermi="['smsb:device:query']" type="info" plain icon="Position" :disabled="single"
+                             @click="handleInfo()">
+                    详情
+                  </el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
         </el-card>
       </div>
     </transition>
@@ -1043,4 +1048,31 @@ onMounted(() => {
   align-items: center;
   margin-top: 20px;
 }
+
+.form-wrapper {
+  width: 100%;
+  /* 启用横向滚动 */
+  overflow-x: auto;
+  padding: 0px 0;
+}
+
+.form-container {
+  display: flex;
+  gap: 12px;
+  /* 确保内容宽度自适应 */
+  min-width: max-content;
+  padding: 0 0;
+}
+/* 强化滚动条样式 */
+.form-wrapper::-webkit-scrollbar {
+  /* 增加滚动条高度 */
+  height: 6px;
+}
+
+.form-wrapper::-webkit-scrollbar-thumb {
+  /* 更明显的颜色 */
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+}
+
 </style>

smsb-plus-ui/src/views/smsb/minioData/index.vue

@@ -39,48 +39,53 @@
             </el-col>
           </el-row>
         </el-card>
-        <el-card shadow="hover" :style="{ marginTop: '10px', height: '60px' }">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="0px">
-            <el-form-item label="" prop="originalName">
-              <el-input v-model="queryParams.originalName" placeholder="请输入文件名" clearable style="width: 120px" />
-            </el-form-item>
-            <el-form-item label="" prop="type">
-              <el-select v-model="queryParams.type" style="width: 120px" placeholder="请选择类型" clearable>
-                <el-option v-for="dict in smsb_source_type" :key="dict.value" :label="dict.label" :value="dict.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="" prop="tag">
-              <el-select v-model="queryParams.tag" style="width: 120px" placeholder="请选择分类" clearable>
-                <el-option v-for="dict in smsb_source_classify" :key="dict.value" :label="dict.label"
-                  :value="dict.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="" prop="treeId">
-              <el-tree-select v-model="queryParams.treeId" :data="sourceTreeOptions"
-                :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id" placeholder="请选择归属目录"
-                check-strictly @change="handleQuery" style="width: 200px" clearable />
-            </el-form-item>
-            <el-form-item label="" style="width: 250px">
-              <el-date-picker v-model="dateRangeCreateTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
-                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-              <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['source:minioData:add']"> 上传
-              </el-button>
-              <el-button type="primary" plain icon="Switch" @click="handleTrans" v-hasPermi="['source:minioData:add']">
-                转码进度
-              </el-button>
-              <!--              <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['source:minioData:edit']"
-                              >修改
-                            </el-button>
-                            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['source:minioData:remove']"
-                              >删除
-                            </el-button>-->
-            </el-form-item>
-          </el-form>
+        <el-card shadow="hover" :style="{ marginTop: '10px', height: '80px' }">
+          <div class="form-wrapper">
+            <div class="form-container">
+              <el-form ref="queryFormRef" :model="queryParams" style="margin-top: 10px" :inline="true" label-width="0px">
+                <el-form-item label="" prop="originalName">
+                  <el-input v-model="queryParams.originalName" placeholder="请输入文件名" clearable style="width: 120px"/>
+                </el-form-item>
+                <el-form-item label="" prop="type">
+                  <el-select v-model="queryParams.type" style="width: 120px" placeholder="请选择类型" clearable>
+                    <el-option v-for="dict in smsb_source_type" :key="dict.value" :label="dict.label"
+                               :value="dict.value"/>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="" prop="tag">
+                  <el-select v-model="queryParams.tag" style="width: 120px" placeholder="请选择分类" clearable>
+                    <el-option v-for="dict in smsb_source_classify" :key="dict.value" :label="dict.label"
+                      :value="dict.value" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="" prop="treeId">
+                  <el-tree-select v-model="queryParams.treeId" :data="sourceTreeOptions"
+                    :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id" placeholder="请选择归属目录"
+                    check-strictly @change="handleQuery" style="width: 200px" clearable />
+                </el-form-item>
+                <el-form-item label="" style="width: 250px">
+                  <el-date-picker v-model="dateRangeCreateTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
+                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+                    :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                  <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['source:minioData:add']"> 上传
+                  </el-button>
+                  <el-button type="primary" plain icon="Switch" @click="handleTrans" v-hasPermi="['source:minioData:add']">
+                    转码进度
+                  </el-button>
+                  <!--              <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['source:minioData:edit']"
+                                  >修改
+                                </el-button>
+                                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['source:minioData:remove']"
+                                  >删除
+                                </el-button>-->
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
         </el-card>
       </div>
     </transition>
@@ -561,4 +566,30 @@ onMounted(() => {
 :deep(.el-card__body) {
   padding: 10px !important;
 }
+
+.form-wrapper {
+  width: 100%;
+  /* 启用横向滚动 */
+  overflow-x: auto;
+  padding: 0px 0;
+}
+
+.form-container {
+  display: flex;
+  gap: 12px;
+  /* 确保内容宽度自适应 */
+  min-width: max-content;
+  padding: 0 0;
+}
+/* 强化滚动条样式 */
+.form-wrapper::-webkit-scrollbar {
+  /* 增加滚动条高度 */
+  height: 6px;
+}
+
+.form-wrapper::-webkit-scrollbar-thumb {
+  /* 更明显的颜色 */
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+}
 </style>

smsb-plus-ui/src/views/smsb/otaPackage/index.vue

@@ -3,27 +3,34 @@
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
       :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover" :style="{ height: '60px' }">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="版本名称" prop="versionName">
-              <el-input v-model="queryParams.versionName" placeholder="请输入版本名称" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="版本号" prop="versionCode">
-              <el-input v-model="queryParams.versionCode" placeholder="请输入版本号" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="创建人" prop="createUser">
-              <el-input v-model="queryParams.createUser" placeholder="请输入创建人" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-              <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['device:otaPackage:add']"> 新增
-              </el-button>
-              <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
-                v-hasPermi="['device:otaPackage:remove']">删除
-              </el-button>
-            </el-form-item>
-          </el-form>
+        <el-card shadow="hover" :style="{ height: '80px' }">
+          <div class="form-wrapper">
+            <div class="form-container">
+              <el-form ref="queryFormRef" :model="queryParams" style="margin-top: 10px" :inline="true">
+                <el-form-item label="版本名称" prop="versionName">
+                  <el-input v-model="queryParams.versionName" placeholder="请输入版本名称" clearable
+                            @keyup.enter="handleQuery"/>
+                </el-form-item>
+                <el-form-item label="版本号" prop="versionCode">
+                  <el-input v-model="queryParams.versionCode" placeholder="请输入版本号" clearable
+                            @keyup.enter="handleQuery"/>
+                </el-form-item>
+                <el-form-item label="创建人" prop="createUser">
+                  <el-input v-model="queryParams.createUser" placeholder="请输入创建人" clearable @keyup.enter="handleQuery"/>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                  <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['device:otaPackage:add']">
+                    新增
+                  </el-button>
+                  <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
+                             v-hasPermi="['device:otaPackage:remove']">删除
+                  </el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
         </el-card>
       </div>
     </transition>
@@ -82,10 +89,16 @@
 </template>
 
 <script setup name="OtaPackage" lang="ts">
-import { listOtaPackage, getOtaPackage, delOtaPackage, addOtaPackage, updateOtaPackage } from '@/api/smsb/device/otaPackage';
-import { OtaPackageVO, OtaPackageQuery, OtaPackageForm } from '@/api/smsb/device/otaPackage_type';
+import {
+  addOtaPackage,
+  delOtaPackage,
+  getOtaPackage,
+  listOtaPackage,
+  updateOtaPackage
+} from '@/api/smsb/device/otaPackage';
+import {OtaPackageForm, OtaPackageQuery, OtaPackageVO} from '@/api/smsb/device/otaPackage_type';
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
 
 const otaPackageList = ref<OtaPackageVO[]>([]);
 const buttonLoading = ref(false);
@@ -234,3 +247,32 @@ onMounted(() => {
   getList();
 });
 </script>
+<style scoped>
+
+.form-wrapper {
+  width: 100%;
+  /* 启用横向滚动 */
+  overflow-x: auto;
+  padding: 0px 0;
+}
+
+.form-container {
+  display: flex;
+  gap: 12px;
+  /* 确保内容宽度自适应 */
+  min-width: max-content;
+  padding: 0 0;
+}
+/* 强化滚动条样式 */
+.form-wrapper::-webkit-scrollbar {
+  /* 增加滚动条高度 */
+  height: 6px;
+}
+
+.form-wrapper::-webkit-scrollbar-thumb {
+  /* 更明显的颜色 */
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+}
+
+</style>

smsb-plus-ui/src/views/smsb/otaRecord/index.vue

@@ -3,27 +3,33 @@
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
       :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover" :style="{ height: '60px' }">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="升级名称" prop="otaName">
-              <el-input v-model="queryParams.otaName" placeholder="请输入升级名称" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="版本名称" prop="versionName">
-              <el-input v-model="queryParams.versionName" placeholder="请输入版本名称" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="创建人" prop="createUser">
-              <el-input v-model="queryParams.createUser" placeholder="请输入创建人" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-              <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['device:otaRecord:add']"> 新增
-              </el-button>
-              <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
-                v-hasPermi="['device:otaRecord:remove']">删除
-              </el-button>
-            </el-form-item>
-          </el-form>
+        <el-card shadow="hover" :style="{ height: '80px' }">
+          <div class="form-wrapper">
+            <div class="form-container">
+              <el-form ref="queryFormRef" :model="queryParams" style="margin-top: 10px" :inline="true">
+                <el-form-item label="升级名称" prop="otaName">
+                  <el-input v-model="queryParams.otaName" placeholder="请输入升级名称" clearable @keyup.enter="handleQuery"/>
+                </el-form-item>
+                <el-form-item label="版本名称" prop="versionName">
+                  <el-input v-model="queryParams.versionName" placeholder="请输入版本名称" clearable
+                            @keyup.enter="handleQuery"/>
+                </el-form-item>
+                <el-form-item label="创建人" prop="createUser">
+                  <el-input v-model="queryParams.createUser" placeholder="请输入创建人" clearable @keyup.enter="handleQuery"/>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                  <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['device:otaRecord:add']">
+                    新增
+                  </el-button>
+                  <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
+                             v-hasPermi="['device:otaRecord:remove']">删除
+                  </el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
         </el-card>
       </div>
     </transition>
@@ -109,18 +115,18 @@
 </template>
 
 <script setup name="OtaRecord" lang="ts">
-import { listOtaRecord, getOtaRecord, delOtaRecord, addOtaRecord, updateOtaRecord } from '@/api/smsb/device/otaRecord';
-import { OtaRecordVO, OtaRecordQuery, OtaRecordForm } from '@/api/smsb/device/otaRecord_type';
-import { OtaPackageVO } from '@/api/smsb/device/otaPackage_type';
-import { listOtaPackage } from '@/api/smsb/device/otaPackage';
-import { TenantVO } from '@/api/system/tenant/types';
-import { listTenant } from '@/api/system/tenant';
-import { listDeviceByTenantId } from '@/api/smsb/device/device';
-import { DeviceVO } from '@/api/smsb/device/device_type';
-import { ref } from 'vue';
+import {addOtaRecord, delOtaRecord, listOtaRecord, updateOtaRecord} from '@/api/smsb/device/otaRecord';
+import {OtaRecordForm, OtaRecordQuery, OtaRecordVO} from '@/api/smsb/device/otaRecord_type';
+import {OtaPackageVO} from '@/api/smsb/device/otaPackage_type';
+import {listOtaPackage} from '@/api/smsb/device/otaPackage';
+import {TenantVO} from '@/api/system/tenant/types';
+import {listTenant} from '@/api/system/tenant';
+import {listDeviceByTenantId} from '@/api/smsb/device/device';
+import {DeviceVO} from '@/api/smsb/device/device_type';
+import {ref} from 'vue';
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { smsb_ota_status } = toRefs<any>(proxy?.useDict('smsb_ota_status'));
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+const {smsb_ota_status} = toRefs<any>(proxy?.useDict('smsb_ota_status'));
 
 const otaRecordList = ref<OtaRecordVO[]>([]);
 const buttonLoading = ref(false);
@@ -294,3 +300,32 @@ onMounted(() => {
   getList();
 });
 </script>
+<style scoped>
+
+.form-wrapper {
+  width: 100%;
+  /* 启用横向滚动 */
+  overflow-x: auto;
+  padding: 0px 0;
+}
+
+.form-container {
+  display: flex;
+  gap: 12px;
+  /* 确保内容宽度自适应 */
+  min-width: max-content;
+  padding: 0 0;
+}
+/* 强化滚动条样式 */
+.form-wrapper::-webkit-scrollbar {
+  /* 增加滚动条高度 */
+  height: 6px;
+}
+
+.form-wrapper::-webkit-scrollbar-thumb {
+  /* 更明显的颜色 */
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+}
+
+</style>