增添分页配置

pages/mall/admin/order/order-management/index.uvue

@@ -144,9 +144,10 @@
               <view class="td col-op overflow-visible no-wrap">
                 <view class="op-links">
                   <text class="op-link primary" @click.stop="handleAction('edit', item['sn'] as string)">编辑</text>
+                  <view class="divider-v"></view>
                   <view class="op-dropdown-container">
                     <view class="op-link-more" @click.stop="toggleDropdown(item['sn'] as string)">
-                      <text :class="{ 'more-text-active': activeDropdownId === item['sn'] }" class="more-text">更多</text>
+                      <text class="more-text">更多</text>
                       <view :class="{ 'arrow-up-blue': activeDropdownId === item['sn'], 'arrow-down-blue': activeDropdownId !== item['sn'] }"></view>
                     </view>
                     <!-- 浮动菜单 -->
@@ -154,7 +155,7 @@
                       <view class="dropdown-item" @click.stop="viewDetail(item)">
                         <text class="item-text">订单详情</text>
                       </view>
-                      <view class="dropdown-item danger" @click.stop="deleteOrder(item)">
+                      <view class="dropdown-item item-danger" @click.stop="deleteOrder(item)">
                         <text class="item-text text-red">删除订单</text>
                       </view>
                     </view>
@@ -735,11 +736,26 @@ onMounted(() => {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 12px;
 }
 
 .op-link { font-size: 13px; cursor: pointer; }
-.primary { color: #1890ff; }
+.primary { color: #1890ff; padding-right: 8px; }
+
+.divider-v {
+  width: 1px;
+  height: 12px;
+  background-color: #dcdfe6;
+  margin: 0 8px;
+}
+
+.op-dropdown-container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  padding-left: 0px;
+}
 
 .op-link-more {
   display: flex;
@@ -747,15 +763,55 @@ onMounted(() => {
   align-items: center;
   gap: 4px;
 }
-.more-text { font-size: 13px; color: #1890ff; transition: color 0.1s; }
-.more-text-active { font-weight: bold; }
+.more-text { font-size: 13px; color: #1890ff; }
 
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 110px;
+  background-color: #ffffff;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  margin-top: 8px;
+  z-index: 100000;
+  border: 1px solid #ebeef5;
+  display: flex;
+  flex-direction: column;
+}
+
+.dropdown-item {
+  height: 32px;
+  padding: 0 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  
+  .item-text { font-size: 13px; color: #606266; text-align: center; }
+
+  &:hover {
+    background-color: #f5f7fa;
+    .item-text { color: #1890ff; }
+  }
+}
+
+.item-danger:hover {
+  .item-text { color: #ff4d4f !important; }
+}
+
+.text-red { color: #ff4d4f !important; }
+
+/* 箭头 */
 .arrow-down-blue {
   width: 0; height: 0;
   border-left: 3px solid transparent;
   border-right: 3px solid transparent;
   border-top: 4px solid #1890ff;
-  margin-top: 2px;
+  margin-top: 1px;
 }
 
 .arrow-up-blue {
@@ -763,9 +819,8 @@ onMounted(() => {
   border-left: 3px solid transparent;
   border-right: 3px solid transparent;
   border-bottom: 4px solid #1890ff;
+  margin-bottom: 3px;
 }
-
-/* 分页 */
 .pagination-footer {
   padding: 16px 20px;
   display: flex;