kongwenhao 3 месяцев назад
Родитель
Сommit
195569e7f9
1 измененных файлов с 15 добавлено и 3 удалено
  1. 15 3
      frontend/src/components/ModelGeneration/index.vue

+ 15 - 3
frontend/src/components/ModelGeneration/index.vue

@@ -34,10 +34,10 @@
       <div class="model-list-section">
         <!-- 标签页切换 -->
         <div class="tabs-container">
-          <div class="tab-item" :class="{ active: activeTab === 'female' }" @click="activeTab = 'female'">
+          <div class="tab-item" :class="{ active: activeTab === 'female' }" @click="switchTab('female')">
             女模特
           </div>
-          <div class="tab-item" :class="{ active: activeTab === 'male' }" @click="activeTab = 'male'">
+          <div class="tab-item" :class="{ active: activeTab === 'male' }" @click="switchTab('male')">
             男模特
           </div>
         </div>
@@ -64,7 +64,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { getShoesModelTemplateApi } from '@/apis/other'
 
@@ -141,6 +141,18 @@ const isModelSelected = (model: ModelData) => {
   }
 }
 
+// 切换标签页并滚动到顶部
+const switchTab = (tab: 'female' | 'male') => {
+  activeTab.value = tab
+  // 使用 nextTick 确保 DOM 更新后再滚动
+  nextTick(() => {
+    const modelGrid = document.querySelector('.model-grid') as HTMLElement
+    if (modelGrid) {
+      modelGrid.scrollTop = 0
+    }
+  })
+}
+
 // 确认选择
 const handleConfirm = () => {
   // 只传递必要的数据字段,避免序列化问题