|
|
@ -1369,16 +1369,18 @@ onUnmounted(() => { |
|
|
|
pcTabContainer: !isMobile, |
|
|
|
}" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-for="(tab, index) in tabs" |
|
|
|
:key="tab.name" |
|
|
|
@click="setActiveTab(tab.name, index)" |
|
|
|
:class="[ |
|
|
|
'tab-item', |
|
|
|
{ active: activeIndex === index && !isAnnouncementVisible }, |
|
|
|
]" |
|
|
|
> |
|
|
|
<span>{{ tab.label }}</span> |
|
|
|
<div class="tab-items-container"> |
|
|
|
<div |
|
|
|
v-for="(tab, index) in tabs" |
|
|
|
:key="tab.name" |
|
|
|
@click="setActiveTab(tab.name, index)" |
|
|
|
:class="[ |
|
|
|
'tab-item', |
|
|
|
{ active: activeIndex === index && !isAnnouncementVisible }, |
|
|
|
]" |
|
|
|
> |
|
|
|
<span>{{ tab.label }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="!isMobile" class="pc-count-badge"> |
|
|
|
<div class="pc-countBtn" @click="showCount"> |
|
|
@ -1497,7 +1499,7 @@ onUnmounted(() => { |
|
|
|
<!-- 深度九大模型按钮 --> |
|
|
|
<img |
|
|
|
:src=" |
|
|
|
activeTab === 'AiEmotion' ? emotionButton01 : emotionButton02 |
|
|
|
activeTab === 'deepNine' ? emotionButton01 : emotionButton02 |
|
|
|
" |
|
|
|
@click="setActiveTab('deepNine', 2)" |
|
|
|
class="action-btn model-btn" |
|
|
@ -1852,24 +1854,33 @@ onUnmounted(() => { |
|
|
|
margin-bottom: 10px; |
|
|
|
height: 100%; |
|
|
|
position: relative; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
gap: 25vw; |
|
|
|
/* 新增右对齐 */ |
|
|
|
width: 100%; |
|
|
|
/* 使用三段式布局 */ |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-items-container { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
flex: 1; |
|
|
|
gap: 200px; |
|
|
|
} |
|
|
|
|
|
|
|
.pcTabContainer { |
|
|
|
padding: 0 20px; /* 添加内边距,避免内容贴边 */ |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item { |
|
|
|
cursor: pointer; |
|
|
|
padding: 8px 12px; |
|
|
|
font-size: clamp(18px, 3vw, 20px); |
|
|
|
/* color: #999; */ |
|
|
|
color: #fff; |
|
|
|
transition: all 0.3s; |
|
|
|
border-bottom: 2px solid transparent; |
|
|
|
font-weight: bold; |
|
|
|
/* 确保tab项目不会被挤压 */ |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item.active { |
|
|
@ -1907,8 +1918,13 @@ onUnmounted(() => { |
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
|
.tab-container { |
|
|
|
gap: 15px; |
|
|
|
padding: 0 10px; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-items-container { |
|
|
|
justify-content: center; |
|
|
|
gap: 15px; /* 移动端使用更小的间距 */ |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item { |
|
|
@ -2121,19 +2137,21 @@ body { |
|
|
|
} |
|
|
|
|
|
|
|
.pc-count-badge { |
|
|
|
width: 200px; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
right: 20px; |
|
|
|
display: flex; |
|
|
|
height: 100%; |
|
|
|
gap: 10px; |
|
|
|
align-items: center; |
|
|
|
/* 移除绝对定位,使用flex布局自然定位 */ |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.pc-countBtn { |
|
|
|
width: 65%; |
|
|
|
height: 100%; |
|
|
|
height: 60px; |
|
|
|
position: relative; |
|
|
|
cursor: pointer; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.pc-countBtn:hover { |
|
|
@ -2167,7 +2185,7 @@ body { |
|
|
|
} |
|
|
|
|
|
|
|
.pc-backToHomeBtn { |
|
|
|
width: 35%; |
|
|
|
width: 30%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
@ -2175,8 +2193,8 @@ body { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.pc-backImg { |
|
|
|
width: auto; |
|
|
|
height: 70%; |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
.pc-backContent { |
|
|
|
width: 100%; |
|
|
|