204 lines
3.9 KiB
Vue
204 lines
3.9 KiB
Vue
<template>
|
||
<view class="starcity-container">
|
||
<!-- 背景渐变 -->
|
||
<view v-show="!isSharedBgTab" class="starcity-bg"></view>
|
||
<image
|
||
v-if="activeSubTab === 0 || activeSubTab === 2 || activeSubTab === 3"
|
||
class="starcity-shared-bg"
|
||
src="/static/background/zhoubian.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
<image
|
||
v-if="activeSubTab === 1"
|
||
class="starcity-shared-bg"
|
||
src="/static/background/tongkuan.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
|
||
<!-- 顶部子标签栏 -->
|
||
<view class="sub-tab-bar">
|
||
<view
|
||
v-for="(tab, index) in subTabs"
|
||
:key="index"
|
||
class="sub-tab-item"
|
||
:class="{ 'active': activeSubTab === index }"
|
||
@click="switchSubTab(index)"
|
||
>
|
||
<text class="sub-tab-text">{{ tab.name }}</text>
|
||
<view v-if="activeSubTab === index" class="sub-tab-indicator"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 子标签内容区 -->
|
||
<view class="sub-content-area">
|
||
<!-- 周边 -->
|
||
<ZhoubianContent v-show="activeSubTab === 0" class="sub-content-fill" />
|
||
|
||
<!-- 同款 -->
|
||
<TongkuanContent v-show="activeSubTab === 1" class="sub-content-fill" />
|
||
|
||
<!-- 见面 -->
|
||
<JianmianContent v-show="activeSubTab === 2" class="sub-content-fill" />
|
||
|
||
<!-- 装扮 -->
|
||
<view v-show="activeSubTab === 3" class="sub-content-fill dressup-wrap">
|
||
<DressupContent />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from 'vue';
|
||
import ZhoubianContent from './ZhoubianContent.vue';
|
||
import TongkuanContent from './TongkuanContent.vue';
|
||
import JianmianContent from './JianmianContent.vue';
|
||
import DressupContent from './DressupContent.vue';
|
||
|
||
const activeSubTab = ref(0);
|
||
|
||
const subTabs = [
|
||
{ name: '周边' },
|
||
{ name: '同款' },
|
||
{ name: '见面' },
|
||
{ name: '装扮' }
|
||
];
|
||
|
||
const switchSubTab = (index) => {
|
||
activeSubTab.value = index;
|
||
};
|
||
|
||
const isSharedBgTab = computed(() => [0, 1, 2, 3].includes(activeSubTab.value));
|
||
</script>
|
||
|
||
<style scoped>
|
||
.starcity-container {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.starcity-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(180deg, #7B5EA7 0%, #9B7EC8 100%);
|
||
z-index: 0;
|
||
}
|
||
|
||
.starcity-shared-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* 子标签栏 */
|
||
.sub-tab-bar {
|
||
position: relative;
|
||
z-index: 30;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
padding-top: 160rpx;
|
||
padding-bottom: 0;
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
height: 240rpx;
|
||
box-sizing: border-box;
|
||
flex-shrink: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
.sub-tab-bar::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 20rpx;
|
||
right: 20rpx;
|
||
bottom: 0;
|
||
height: 2rpx;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
box-shadow: 0 0 8rpx rgba(255, 255, 255, 0.35);
|
||
}
|
||
|
||
.sub-tab-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16rpx 24rpx;
|
||
position: relative;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.sub-tab-item:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.sub-tab-text {
|
||
font-size: 30rpx;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-weight: 400;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.sub-tab-item.active .sub-tab-text {
|
||
color: #fff;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.sub-tab-indicator {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 40rpx;
|
||
height: 6rpx;
|
||
background: #fff;
|
||
border-radius: 3rpx;
|
||
}
|
||
|
||
/* 内容区域 */
|
||
.sub-content-area {
|
||
position: relative;
|
||
z-index: 10;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sub-content-fill {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 装扮子标签：DressupContent 是绝对定位，需要相对容器 */
|
||
.dressup-wrap {
|
||
position: relative;
|
||
}
|
||
|
||
.dressup-wrap :deep(.dressup-content) {
|
||
z-index: 1;
|
||
}
|
||
|
||
.dressup-wrap :deep(.background-image),
|
||
.dressup-wrap :deep(.background-overlay) {
|
||
display: none;
|
||
}
|
||
|
||
</style>
|