From 3e49edfba441b8c58742d0500b85dbecd6a6a926 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8?= <frankyang0820@outlook.com>
Date: Thu, 21 May 2026 17:00:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/agent/customerList.ts |   5 ++
 src/views/order/history/index.vue     |   4 +-
 src/views/order/position/index.vue    |  31 +++----
 src/views/order/rechange/index.vue    |   1 +
 src/views/order/transfer/index.vue    |   3 +-
 src/views/profile/business/index.vue  |   2 +-
 src/views/system/role/index.vue       |  37 +++++---
 src/views/trade/holidays/index.vue    | 119 +++++++++-----------------
 src/views/trade/times/index.vue       | 110 +++++++++---------------
 9 files changed, 129 insertions(+), 183 deletions(-)

diff --git a/src/api/modules/agent/customerList.ts b/src/api/modules/agent/customerList.ts
index 7c058ac..7e2f6ae 100644
--- a/src/api/modules/agent/customerList.ts
+++ b/src/api/modules/agent/customerList.ts
@@ -13,4 +13,9 @@ export const getSelfVarietyPointDiffConfigApi = (params: any) => {
 //编辑代理客户接口
 export const editCustomerApi = (params: any) => {
     return request.post('/agent/editAgent', {...params})
+}
+
+//编辑代理客户接口
+export const updateToAgent = (params: any) => {
+    return request.post('/agent/updateToAgent', {...params})
 }
\ No newline at end of file
diff --git a/src/views/order/history/index.vue b/src/views/order/history/index.vue
index d06b126..1c53e50 100644
--- a/src/views/order/history/index.vue
+++ b/src/views/order/history/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="table_form-container">
         <!-- 搜索 -->
-        <CustomerTradeOrderSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
-            @reset="handleReset" @blur-input="getSubAccountList">
+        <CustomerTradeOrderSearch :buttonLoading="loading" :search-form="searchForm" :search-options="searchOptions"
+            @search="handleSearch" @reset="handleReset" @blur-input="getSubAccountList">
         </CustomerTradeOrderSearch>
         <div class="bar" v-if="searchForm.orderId === '1'">
             <div>持仓量:0</div>
diff --git a/src/views/order/position/index.vue b/src/views/order/position/index.vue
index c64e919..0ce0cd7 100644
--- a/src/views/order/position/index.vue
+++ b/src/views/order/position/index.vue
@@ -1,12 +1,9 @@
 <template>
   <div class="position-stat table_form-container">
     <!-- 搜索 -->
-    <PositionStatSearch
-      :search-form="searchForm"
-      :search-options="searchOptions"
-      @search="handleSearch"
-      @reset="handleReset"
-    >
+    <PositionStatSearch 
+      :buttonLoading="loading" :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
+      @reset="handleReset">
       <!--            <template #button="{ form }">-->
       <!--                <el-button type="primary" @click="handleExport()">-->
       <!--                    导出-->
@@ -14,12 +11,8 @@
       <!--            </template>-->
     </PositionStatSearch>
     <!-- 表格 -->
-    <PositionStatTable
-      :table-data="orderPositionStore.positionOrderList"
-      :columns="tableColumnsOptions"
-      :loading="loading"
-      row-key="id"
-    />
+    <PositionStatTable :table-data="orderPositionStore.positionOrderList" :columns="tableColumnsOptions"
+      :loading="loading" row-key="id" />
   </div>
 </template>
 
@@ -62,13 +55,15 @@ const tableColumnsOptions = ref(tableColumns)
  * @description: 定义搜索方法
  */
 const handleSearch = async () => {
-  startLoading()
-  const data = await checkAccountIdIsSonForUser({ account_id: searchForm.value.account_id })
-  stopLoading()
-  if (!data.flag) {
+  try {
+    startLoading()
+    const data = await checkAccountIdIsSonForUser({ account_id: searchForm.value.account_id })
+
+    if (!data.flag) {
       return ElMessage.warning('请输入下级ID')
-  }
-  transactionStore.getPositionList(searchForm.value.account_id)
+    }
+    transactionStore.getPositionList(searchForm.value.account_id)
+  } finally { stopLoading() }
 }
 const handleReset = () => {
   console.log('重置搜索')
diff --git a/src/views/order/rechange/index.vue b/src/views/order/rechange/index.vue
index 5b2f177..3c7a014 100644
--- a/src/views/order/rechange/index.vue
+++ b/src/views/order/rechange/index.vue
@@ -2,6 +2,7 @@
   <div class="order-rechange-page table_form-container">
     <!-- 搜索区域：按接口参数保留订单号、用户名称、状态、开始/结束时间 -->
     <OrderRechangeSearch
+      :buttonLoading="loading"
       :search-form="searchForm"
       :search-options="searchOptions"
       @search="handleSearch"
diff --git a/src/views/order/transfer/index.vue b/src/views/order/transfer/index.vue
index 1be64c6..2b4c839 100644
--- a/src/views/order/transfer/index.vue
+++ b/src/views/order/transfer/index.vue
@@ -2,6 +2,7 @@
   <div class="table_form-container">
     <!-- 搜索 -->
     <TransferSearch
+      :buttonLoading="loading" 
       :search-form="searchForm"
       :search-options="searchOptions"
       @search="handleSearch"
@@ -56,7 +57,7 @@ const initTime = getRecentSevenDays()
 /**
  * @description: 定义搜索数据
  */
-const searchForm = ref({
+const searchForm = ref<any>({
   transferAccount: '',
   type: '',
   transferTime: [initTime.start, initTime.end],
diff --git a/src/views/profile/business/index.vue b/src/views/profile/business/index.vue
index f00f08e..6c77cbf 100644
--- a/src/views/profile/business/index.vue
+++ b/src/views/profile/business/index.vue
@@ -169,7 +169,7 @@
     <template #footer v-if="dialogType !== 'view'">
       <div class="drawer-footer">
         <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" @click="handleSubmit">确定</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
       </div>
     </template>
   </el-drawer>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 6d9aab7..fb83822 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -32,16 +32,15 @@
     <RoleForm :form-data="roleForm" :form-rules="roleFormRules" :form-items="roleFormItemOptions" ref="roleFormRef"
       :options-map="roleFormOptionsMap" :dialog-type="dialogType">
       <template #permissions="{ formData }">
-        <el-tree ref="permissionTreeRef" :data="permissionTreeData" :props="treeProps" show-checkbox node-key="id"
-          :default-expand-all="true" :check-strictly="false"
-          class="permission-tree" />
+        <el-tree v-loading="treeLoading" ref="permissionTreeRef" :data="permissionTreeData" :props="treeProps"
+          show-checkbox node-key="id" :default-expand-all="true" :check-strictly="false" class="permission-tree" />
       </template>
     </RoleForm>
-    
+
     <template #footer>
       <div style="flex: auto">
         <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" @click="handleSubmit">确定</el-button>
+        <el-button type="primary" :loading="buttonLoading" @click="handleSubmit">确定</el-button>
       </div>
     </template>
   </el-drawer>
@@ -54,8 +53,11 @@ defineOptions({
 })
 import type { FormInstance, TreeInstance } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
-import { usePageLoading } from '@/composables/useLoading'
+import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
+
 const { loading, startLoading, stopLoading } = usePageLoading()
+const { loading: treeLoading, startLoading: treeStartLoading, stopLoading: treeStopLoading } = usePageLoading()
+const { buttonLoading, startButtonLoading, stopButtonLoading } = useButtonLoading()
 
 // 组件配置
 import RoleTable from '@/components/common/Table.vue'
@@ -248,7 +250,7 @@ const filterParentNodes = (permissionIds: number[], treeData: any[]): number[] =
  */
 const getParentNodeIds = (checkedKeys: number[], treeData: any[]): number[] => {
   const parentIds: number[] = []
-  
+
   treeData.forEach(parent => {
     // 获取该父节点下所有子节点的ID
     const childIds = parent.children?.map((child: any) => child.id) || []
@@ -256,13 +258,13 @@ const getParentNodeIds = (checkedKeys: number[], treeData: any[]): number[] => {
     const hasCheckedChild = childIds.some((id: number) => checkedKeys.includes(id))
     // 检查是否所有子节点都被选中
     const allChildrenChecked = childIds.length > 0 && childIds.every((id: number) => checkedKeys.includes(id))
-    
+
     // 如果有子节点被选中，但不是全部选中，则父节点为半选中状态
     if (hasCheckedChild && !allChildrenChecked) {
       parentIds.push(parent.id)
     }
   })
-  
+
   return parentIds
 }
 
@@ -270,27 +272,31 @@ const getParentNodeIds = (checkedKeys: number[], treeData: any[]): number[] => {
 const handlePermission = async (row: any) => {
   dialogVisible.value = true
   dialogTitle.value = '设置角色权限'
+  permissionTreeData.value = []
   dialogType.value = 'permissions'
+  treeStartLoading()
   handleDialogType(dialogType.value)
   permissionIds.value = row.id
   try {
     const data = await getRolePermissionApi({ id: row.id })
     allPermissions.value = data.all_permission_info
     permissionTreeData.value = transformPermissionsToTree(data.all_permission_info)
-    
+
     // 过滤掉父节点ID，只保留子节点ID
     const childPermissionIds = filterParentNodes(data.permission_ids || [], permissionTreeData.value)
     roleForm.value.permissions = childPermissionIds
-    
+
     console.log('树形权限数据', permissionTreeData.value)
     console.log('过滤后的权限ID（仅子节点）:', childPermissionIds)
-    
+
     // 等待DOM更新后，手动设置选中状态
     await nextTick()
     // 使用 setCheckedKeys 设置选中状态，只设置子节点
     permissionTreeRef.value?.setCheckedKeys(childPermissionIds, false)
   } catch (err) {
     console.error('获取角色权限失败', err)
+  } finally { 
+    treeStopLoading()
   }
 }
 
@@ -298,6 +304,7 @@ const handlePermission = async (row: any) => {
 @description: 处理弹窗提交/取消/关闭事件
 **/
 const handleSubmit = async () => {
+  startButtonLoading()
   console.log('提交菜单表单', roleForm.value.permissions, allPermissions.value)
   try {
     await roleFormRef.value?.validate()
@@ -315,7 +322,7 @@ const handleSubmit = async () => {
       // 获取Tree组件选中的所有节点（包括完全选中和半选中的节点）
       const checkedKeys = permissionTreeRef.value?.getCheckedKeys() || []
       const halfCheckedKeys = permissionTreeRef.value?.getHalfCheckedKeys() || []
-      
+
       // 合并完全选中和半选中的节点ID
       const allSelectedKeys = [...checkedKeys, ...halfCheckedKeys]
 
@@ -333,6 +340,8 @@ const handleSubmit = async () => {
   } catch (err) {
     console.log('表单验证失败')
     return
+  } finally {
+    stopButtonLoading()
   }
 }
 
@@ -363,7 +372,7 @@ const handleClose = () => {
 :deep(.el-form-item__content) {
   margin-left: 0 !important;
 }
- 
+
 .system {
   :deep(.el-drawer__header) {
     margin-bottom: 0 !important;
diff --git a/src/views/trade/holidays/index.vue b/src/views/trade/holidays/index.vue
index ab566fe..204b838 100644
--- a/src/views/trade/holidays/index.vue
+++ b/src/views/trade/holidays/index.vue
@@ -1,24 +1,14 @@
 <template>
   <div class="trade-group table_form-container">
     <el-form-item label="交易节假日时间设置">
-      <el-button
-        style="margin-left: 18px"
-        type="primary"
-        v-auth="'contractVariety_addHoliday'"
-        @click="handleAdd"
-        >添加</el-button
-      >
-      <el-button
-        style="margin-left: 18px"
-        type="danger"
-        v-auth="'contractVariety_addHoliday'"
-        @click="handleDel"
-        >删除</el-button
-      >
+      <el-button style="margin-left: 18px" type="primary" v-auth="'contractVariety_addHoliday'"
+        @click="handleAdd">添加</el-button>
+      <el-button style="margin-left: 18px" type="danger" v-auth="'contractVariety_addHoliday'"
+        @click="handleDel">删除</el-button>
     </el-form-item>
     <!-- 表格 -->
     <div class="table-box">
-      <table>
+      <table v-loading="loading">
         <thead>
           <tr>
             <th>名称</th>
@@ -36,33 +26,16 @@
               <span v-else>{{ item.name }}</span>
             </td>
             <td>
-              <el-date-picker
-                v-if="item.editStatus"
-                v-model="item.datePicker"
-                type="datetimerange"
-                start-placeholder="休市开始时间"
-                end-placeholder="休市结束时间"
-                format="YYYY-MM-DD HH:mm:ss"
-                date-format="YYYY-MM-DD HH:mm:ss"
-                time-format="YYYY-MM-DD HH:mm:ss"
-                value-format="YYYY-MM-DD HH:mm:ss"
-              />
+              <el-date-picker v-if="item.editStatus" v-model="item.datePicker" type="datetimerange"
+                start-placeholder="休市开始时间" end-placeholder="休市结束时间" format="YYYY-MM-DD HH:mm:ss"
+                date-format="YYYY-MM-DD HH:mm:ss" time-format="YYYY-MM-DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss" />
               <span v-else>{{ item.datePicker[0] }} - {{ item.datePicker[1] }}</span>
             </td>
             <td>
-              <el-select
-                multiple
-                placeholder="请选择休市市场"
-                style="width: 240px"
-                v-model="item.groupId"
-                v-if="item.editStatus"
-              >
-                <el-option
-                  v-for="item in marketList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
+              <el-select multiple placeholder="请选择休市市场" style="width: 240px" v-model="item.groupId"
+                v-if="item.editStatus">
+                <el-option v-for="item in marketList" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
               <span>{{
                 (item?.groupId || [])
@@ -78,34 +51,14 @@
               <span v-else>{{ item.description }}</span>
             </td>
             <td>
-              <el-button
-                type="primary"
-                v-if="!item.editStatus"
-                @click="item.editStatus = true"
-                v-auth="'contractVariety_addHoliday'"
-                >编辑</el-button
-              >
-              <el-button
-                type="danger"
-                v-if="!item.editStatus"
-                @click="handleDel(item.id, index)"
-                v-auth="'contractVariety_addHoliday'"
-                >删除</el-button
-              >
-              <el-button
-                type="primary"
-                v-if="item.editStatus"
-                @click="submitItem(index)"
-                v-auth="'contractVariety_addHoliday'"
-                >确认</el-button
-              >
-              <el-button
-                type="danger"
-                v-if="item.editStatus"
-                @click="item.editStatus = false"
-                v-auth="'contractVariety_addHoliday'"
-                >取消</el-button
-              >
+              <el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true"
+                v-auth="'contractVariety_addHoliday'">编辑</el-button>
+              <el-button type="danger" v-if="!item.editStatus" @click="handleDel(item.id, index)"
+                v-auth="'contractVariety_addHoliday'">删除</el-button>
+              <el-button type="primary" v-if="item.editStatus" @click="submitItem(index)"
+                v-auth="'contractVariety_addHoliday'">确认</el-button>
+              <el-button type="danger" v-if="item.editStatus" @click="item.editStatus = false"
+                v-auth="'contractVariety_addHoliday'">取消</el-button>
             </td>
           </tr>
         </tbody>
@@ -123,6 +76,10 @@ import { ref, onMounted } from 'vue'
 import { getGroupListApi } from '@/api/modules/trade/group'
 import { getHolidayList, addHoliday, editHoliday, delHoliday } from '@/api/modules/trade/time'
 import { ElMessageBox } from 'element-plus'
+import { usePageLoading } from '@/composables/useLoading'
+
+// 按钮 loading
+const { loading, startLoading, stopLoading } = usePageLoading()
 
 type DataItem = {
   id?: number | string
@@ -150,18 +107,21 @@ const getMarketList = async () => {
 }
 
 const initDate = () => {
-  getHolidayList().then((res) => {
-    dataList.value = res.map((item: any) => ({
-      id: item.id + '',
-      name: item.name,
-      start_time: item.start_time,
-      end_time: item.end_time,
-      datePicker: [item.start_time, item.end_time],
-      groupId: item.group_id,
-      description: item.description,
-      editStatus: false,
-    }))
-  })
+  startLoading()
+  try {
+    getHolidayList().then((res) => {
+      dataList.value = res.map((item: any) => ({
+        id: item.id + '',
+        name: item.name,
+        start_time: item.start_time,
+        end_time: item.end_time,
+        datePicker: [item.start_time, item.end_time],
+        groupId: item.group_id,
+        description: item.description,
+        editStatus: false,
+      }))
+    })
+  } finally { stopLoading() }
 }
 
 const handleAdd = () => {
@@ -223,6 +183,7 @@ onMounted(() => {
 .trade-group {
   overflow-y: scroll;
 }
+
 /* 给 table 及所有 td 加边框 */
 table {
   border-collapse: collapse;
diff --git a/src/views/trade/times/index.vue b/src/views/trade/times/index.vue
index 32d31e2..9cea4b9 100644
--- a/src/views/trade/times/index.vue
+++ b/src/views/trade/times/index.vue
@@ -1,13 +1,11 @@
 <template>
   <div class="trade-group table_form-container">
     <el-form-item label="交易组时间设置">
-      <el-button type="primary" @click="addTableItem" v-auth="'contractVariety_createGroup'"
-        >添加</el-button
-      >
+      <el-button type="primary" @click="addTableItem" v-auth="'contractVariety_createGroup'">添加</el-button>
     </el-form-item>
     <!-- 表格 -->
     <div class="table-box">
-      <table>
+      <table v-loading="loading">
         <template v-for="(item, index) in tradeGroupTree" :key="item.id">
           <tr>
             <td style="width: 50px">顺序</td>
@@ -35,23 +33,13 @@
             <td class="time-picker-box">
               <template v-if="item.editStatus">
                 <template v-if="item?.x_time_list">
-                  <el-time-picker
-                    v-for="(time, timeIndex) in item?.x_time_list"
-                    :key="timeIndex"
-                    v-model="item.x_time_list[timeIndex]"
-                    style="width: 180px; flex: 0 0 auto"
-                    format="HH:mm:ss"
-                    value-format="HH:mm:ss"
-                    :picker-options="{
+                  <el-time-picker v-for="(time, timeIndex) in item?.x_time_list" :key="timeIndex"
+                    v-model="item.x_time_list[timeIndex]" style="width: 180px; flex: 0 0 auto" format="HH:mm:ss"
+                    value-format="HH:mm:ss" :picker-options="{
                       selectableRange: '09:00:00 - 18:00:00',
-                    }"
-                    is-range
-                  />
+                    }" is-range />
                 </template>
-                <img
-                  src="@/assets/images/trade/group/add.png"
-                  @click="addTime(index, 'x_time_list')"
-                />
+                <img src="@/assets/images/trade/group/add.png" @click="addTime(index, 'x_time_list')" />
               </template>
               <template v-else>
                 <template v-if="item?.x_time_list">
@@ -62,34 +50,14 @@
               </template>
             </td>
             <td rowspan="2" style="width: 140px">
-              <el-button
-                type="primary"
-                v-if="!item.editStatus"
-                @click="item.editStatus = true"
-                v-auth="'contractVariety_editGroup'"
-                >编辑</el-button
-              >
-              <el-button
-                type="danger"
-                v-if="!item.editStatus"
-                @click="deleteGroup(item.id, index)"
-                v-auth="'contractVariety_delGroup'"
-                >删除</el-button
-              >
-              <el-button
-                type="primary"
-                v-if="item.editStatus"
-                @click="submitItem(index)"
-                v-auth="'contractVariety_editGroup'"
-                >确认</el-button
-              >
-              <el-button
-                type="danger"
-                v-if="item.editStatus"
-                @click="item.editStatus = false"
-                v-auth="'contractVariety_editGroup'"
-                >取消</el-button
-              >
+              <el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true"
+                v-auth="'contractVariety_editGroup'">编辑</el-button>
+              <el-button type="danger" v-if="!item.editStatus" @click="deleteGroup(item.id, index)"
+                v-auth="'contractVariety_delGroup'">删除</el-button>
+              <el-button type="primary" v-if="item.editStatus" @click="submitItem(index)"
+                v-auth="'contractVariety_editGroup'">确认</el-button>
+              <el-button type="danger" v-if="item.editStatus" @click="item.editStatus = false"
+                v-auth="'contractVariety_editGroup'">取消</el-button>
             </td>
           </tr>
           <tr>
@@ -114,23 +82,13 @@
             <td class="time-picker-box">
               <template v-if="item.editStatus">
                 <template v-if="item?.d_time_list">
-                  <el-time-picker
-                    v-for="(time, timeIndex) in item?.d_time_list"
-                    :key="timeIndex"
-                    v-model="item.d_time_list[timeIndex]"
-                    style="width: 180px; flex: 0 0 auto"
-                    format="HH:mm:ss"
-                    value-format="HH:mm:ss"
-                    :picker-options="{
+                  <el-time-picker v-for="(time, timeIndex) in item?.d_time_list" :key="timeIndex"
+                    v-model="item.d_time_list[timeIndex]" style="width: 180px; flex: 0 0 auto" format="HH:mm:ss"
+                    value-format="HH:mm:ss" :picker-options="{
                       selectableRange: '09:00:00 - 18:00:00',
-                    }"
-                    is-range
-                  />
+                    }" is-range />
                 </template>
-                <img
-                  src="@/assets/images/trade/group/add.png"
-                  @click="addTime(index, 'd_time_list')"
-                />
+                <img src="@/assets/images/trade/group/add.png" @click="addTime(index, 'd_time_list')" />
               </template>
               <template v-else>
                 <template v-if="item?.d_time_list">
@@ -148,7 +106,10 @@
 </template>
 
 <script setup lang="ts">
+import { usePageLoading } from '@/composables/useLoading'
 
+// 按钮 loading
+const { loading, startLoading, stopLoading } = usePageLoading()
 defineOptions({
   name: 'Times'
 })
@@ -246,6 +207,7 @@ const deleteGroup = (id: number, idx: number) => {
  * @description: 定义公共请求数据方法
  */
 const getGroupList = async () => {
+  startLoading()
   try {
     const data = await getGroupListApi()
     data.forEach((item: any) => {
@@ -283,6 +245,8 @@ const getGroupList = async () => {
   } catch (e: any) {
     console.log(e)
     ElMessage.error(e.msg)
+  } finally {
+    stopLoading()
   }
 }
 
@@ -298,40 +262,50 @@ onMounted(() => {
 .trade-group {
   overflow-y: scroll;
 }
+
 /* 给 table 及所有 td 加边框 */
 table {
   border-collapse: collapse;
   width: 100%;
-  table-layout: auto; /* 宽度自适应内容 */
+  table-layout: auto;
+  /* 宽度自适应内容 */
 
   .time-picker-box {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 10px;
+
     img {
       width: 20px;
       height: 20px;
       cursor: pointer;
     }
   }
+
   td {
     height: 59px;
     border: 1px solid #dcdfe6;
-    padding: 4px 8px; /* 内边距缩小 */
+    padding: 4px 8px;
+    /* 内边距缩小 */
     text-align: center;
-    font-size: 12px; /* 文字变小 */
-    white-space: nowrap; /* 文字不换行 */
-    vertical-align: middle; /* 垂直居中 */
+    font-size: 12px;
+    /* 文字变小 */
+    white-space: nowrap;
+    /* 文字不换行 */
+    vertical-align: middle;
+    /* 垂直居中 */
 
     /* 时间选择器容器：两个选择器横排不换行 */
     :deep(.el-time-picker) {
       display: inline-block;
 
       .el-range-editor {
-        width: 100px; /* 缩小时间选择器宽度 */
+        width: 100px;
+        /* 缩小时间选择器宽度 */
         font-size: 12px;
       }
+
       .el-range-input {
         font-size: 12px;
       }