增加销冠的素材,调整左右侧边距

This commit is contained in:
zhonghua1
2025-12-23 09:03:59 +08:00
parent 1d388806a5
commit 5a13f60517
3 changed files with 74 additions and 38 deletions

View File

@@ -22,32 +22,40 @@
</view>
<!-- 标签页 -->
<view class="tabs">
<view
class="tab-item"
:class="{ active: activeTab === 'survey' }"
@click="switchTab('survey')">
<text>摸底</text>
<scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false">
<view class="tabs">
<view
class="tab-item"
:class="{ active: activeTab === 'survey' }"
@click="switchTab('survey')">
<text>摸底</text>
</view>
<view
class="tab-item"
:class="{ active: activeTab === 'practice' }"
@click="switchTab('practice')">
<text>陪练</text>
</view>
<view
class="tab-item"
:class="{ active: activeTab === 'battle' }"
@click="switchTab('battle')">
<text>实战</text>
</view>
<view
class="tab-item"
:class="{ active: activeTab === 'quality' }"
@click="switchTab('quality')">
<text>质检</text>
</view>
<view
class="tab-item"
:class="{ active: activeTab === 'material' }"
@click="switchTab('material')">
<text>素材</text>
</view>
</view>
<view
class="tab-item"
:class="{ active: activeTab === 'practice' }"
@click="switchTab('practice')">
<text>陪练</text>
</view>
<view
class="tab-item"
:class="{ active: activeTab === 'battle' }"
@click="switchTab('battle')">
<text>实战</text>
</view>
<view
class="tab-item"
:class="{ active: activeTab === 'quality' }"
@click="switchTab('quality')">
<text>质检</text>
</view>
</view>
</scroll-view>
<!-- 摸底内容 -->
<scroll-view
@@ -92,6 +100,17 @@
<text class="champion-desc">这里是质检相关的内容展示区域</text>
</view>
</scroll-view>
<!-- 素材内容 -->
<scroll-view
class="tab-content"
scroll-y
v-if="activeTab === 'material'">
<view class="champion-card">
<text class="champion-title">素材</text>
<text class="champion-desc">这里是素材相关的内容展示区域</text>
</view>
</scroll-view>
</view>
</view>
</template>
@@ -141,7 +160,7 @@
/* AI功能横幅 */
.ai-banner {
background-color: #E3F2FD;
padding: 24rpx 32rpx;
padding: 24rpx 16rpx;
display: flex;
justify-content: space-between;
align-items: center;
@@ -154,16 +173,22 @@
}
/* 标签页 */
.tabs {
display: flex;
.tabs-scroll {
width: 100%;
background-color: #FFFFFF;
border-bottom: 1px solid #E0E0E0;
padding: 0 32rpx;
white-space: nowrap;
}
.tabs {
display: inline-flex;
padding: 0 16rpx;
}
.tab-item {
padding: 24rpx 32rpx;
position: relative;
flex-shrink: 0;
}
.tab-item text {
@@ -191,10 +216,13 @@
.tab-content {
height: calc(100vh - 300rpx);
background-color: #F5F5F5;
padding: 24rpx 32rpx;
padding: 24rpx 16rpx;
box-sizing: border-box;
}
.champion-card {
width: 100%;
box-sizing: border-box;
background-color: #FFFFFF;
border-radius: 16rpx;
padding: 32rpx;