Browse Source

修改了进入模型的标签布局;

milestone-20250924-接入大财神工作流
宋杰 2 weeks ago
parent
commit
72b8932643
  1. 68
      src/views/homePage.vue

68
src/views/homePage.vue

@ -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%;

Loading…
Cancel
Save