|
|
@@ -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 = () => {
|
|
|
// 只传递必要的数据字段,避免序列化问题
|