@@ -87,7 +87,7 @@
import { shopArea, shopTable } from "@/api/account.js";
import countCard from '@/views/table/components/countCard.vue'
import tableInfo from '@/views/table/components/tableInfo.vue'
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { dayjs } from 'element-plus'
import tableStatusList from './statusList.js'
import { formatDecimal } from '@/utils/index.js'
@@ -149,6 +149,43 @@ function tabChange(item, index) {
shopTableAjax()
}
+const tabItemActive = ref(-1)
+function tabItemChange(item, index) {
+ tabItemActive.value = index
+ if (index == -1) {
+ area.value = ''
+ } else {
+ area.value = item.id
+ }
+ shopTableAjax()
+
+ nextTick(() => {
+ scrollTabToCenter()
+ })
+}
+
+// 自动居中滚动
+const tabHeadRef = ref(null)
+function scrollTabToCenter() {
+ const container = tabHeadRef.value
+ if (!container) return
+
+ // 获取当前激活的 item
+ const activeItem = container.querySelector('.item.active')
+ if (!activeItem) return
+
+ // 计算居中位置
+ const containerWidth = container.offsetWidth
+ const itemWidth = activeItem.offsetWidth
+ const itemLeft = activeItem.offsetLeft
+
+ // 滚动到中间（核心公式）
+ container.scrollTo({
+ left: itemLeft - containerWidth / 2 + itemWidth / 2,
+ behavior: 'smooth' // 丝滑滚动
+ })
+}
+
// 计算当前的时间差
function countTime(t) {
if (!t) return '0小时1分'
@@ -374,12 +411,46 @@ onUnmounted(() => {
padding: var(--el-font-size-base);
.tab_head {
+ width: calc(100vw - 125px);
padding-bottom: var(--el-font-size-base);
+ overflow-x: auto;
+ white-space: nowrap;
+
+ /* 隐藏滚动条（通用） */
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+
+
+ .item {
+ height: 42px;
+ display: inline-flex;
+ align-items: center;
+ padding: 4px 12px;
+ border-radius: 4px;
+ background-color: #f5f5f5;
+ margin-right: 10px;
+
+ &.active {
+ background-color: var(--primary-color);
+ color: #fff;
+ }
+
+ &:hover {
+ cursor: pointer;
+ background-color: var(--primary-color);
+ color: #fff;
+ }
+ }
+ }
+
+ /* 隐藏滚动条（Chrome / Electron / Edge） */
+ .tab_head::-webkit-scrollbar {
+ display: none !important;
}
.overflow_y {
// height: calc(100vh - 220px);
- height: calc(100vh - 160px);
+ height: calc(100vh - 162px);
overflow-y: auto;
}
@@ -424,6 +495,21 @@ onUnmounted(() => {
justify-content: space-between;
padding: 0 10px;
color: #fff;
+ gap: 4px;
+
+ span:nth-child(1) {
+ /* 核心：最多两行，超出... */
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ /* 最多2行 */
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ /* 保证换行正常 */
+ white-space: normal;
+ word-break: break-all;
+ }
}
.tab_cont {