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

Loading…
Cancel
Save