956 lines
33 KiB
Vue
956 lines
33 KiB
Vue
<template>
|
||
<page-meta :page-style="pageStyle"></page-meta>
|
||
<view class="digital-dashboard">
|
||
<!-- Tab切换区域 -->
|
||
<scroll-view scroll-x class="tab-container" :scroll-with-animation="true" :scroll-left="tabScrollPosition"
|
||
show-scrollbar="false" :scroll-animation-duration="300">
|
||
<view class="tab-list">
|
||
<view v-for="(tab, index) in tabList" :key="index" :id="`tab-${index}`" class="tab-item"
|
||
:class="{ active: activeTab === index }" @click="switchTab(index)">
|
||
<text class="tab-text">{{ tab.name }}</text>
|
||
<view class="tab-indicator" v-if="activeTab === index"></view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 右侧悬浮导航栏 -->
|
||
<view class="side-navigation" v-if="currentNavItems && currentNavItems.length > 0">
|
||
<view class="nav-rail" :class="{ compact: isNavCollapsed }">
|
||
<view class="rail-body" :class="{ hidden: isNavCollapsed }">
|
||
<view class="rail-header">
|
||
<text class="rail-title">
|
||
<text style="display: block;">快速</text>
|
||
<text style="display: block;">导航</text>
|
||
</text>
|
||
<view class="rail-toggle" @click="toggleNavCollapse">
|
||
<text class="toggle-icon">×</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="rail-track" show-scrollbar="false">
|
||
<view v-for="item in currentNavItems" :key="item.id" class="rail-item"
|
||
:class="{ active: activeNavItem === item.id }" @click="scrollToComponent(item.id)">
|
||
<view class="rail-dot" :style="{ borderColor: navAccentColor }">
|
||
<text class="rail-dot-text">{{ (item.name) }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="rail-footer" @click.stop="scrollToTop">
|
||
<view class="rail-back">
|
||
<text>↑</text>
|
||
<text>TOP</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="rail-compact" :class="{ visible: isNavCollapsed }" @click="toggleNavCollapse">
|
||
<text class="compact-icon">☰</text>
|
||
<text class="compact-text">导航</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<swiper class="tab-swiper" :current="activeTab" @change="handleSwiperChange">
|
||
<swiper-item v-for="(tab, index) in tabList" :key="tab.key">
|
||
<scroll-view class="tab-scroll-view" scroll-y @scroll="handleScroll"
|
||
:scroll-into-view="scrollIntoViewMap[tab.key]" :scroll-with-animation="true"
|
||
:scroll-y="allowScroll">
|
||
<view :id="`top-${tab.key}`"></view>
|
||
<view class="content-container">
|
||
<!-- 时间选择 -->
|
||
<view class="timeBox">
|
||
<picker mode="date" @change="bindDateChange" :value="selectTime" fields="month">
|
||
统计时间：{{ selectTime }} ▼
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 实时运营监控中心 -->
|
||
<view v-if="tab.key === 'business'" class="tab-content">
|
||
<view id="overview-of-serviceArea" class="section-anchor"></view>
|
||
<OverviewOfServiceArea />
|
||
|
||
<view id="trading-alert" class="section-anchor"></view>
|
||
<TradingAlert />
|
||
|
||
<view id="trend-of-trafficFlow" class="section-anchor"></view>
|
||
<TrendOfTrafficFlow :selectTime="selectTime" />
|
||
|
||
<view id="vehicles-entering" class="section-anchor"></view>
|
||
<VehiclesEntering :selectTime="selectTime" />
|
||
|
||
<view id="vehicle-model-stay" class="section-anchor"></view>
|
||
<VehicleModelStay :selectTime="selectTime" />
|
||
</view>
|
||
|
||
<!-- 客群画像与消费行为分析 -->
|
||
<view v-else-if="tab.key === 'customerProfile'" class="tab-content">
|
||
<view id="customer-age-group" class="section-anchor"></view>
|
||
<CustomerAgeGroup :selectTime="selectTime" />
|
||
|
||
<view id="gender-customer-group" class="section-anchor"></view>
|
||
<GenderCustomerGroup :selectTime="selectTime" />
|
||
|
||
<view id="preference-type" class="section-anchor"></view>
|
||
<PreferenceType :selectTime="selectTime" />
|
||
|
||
<view id="customer-group" class="section-anchor"></view>
|
||
<CustomerGroup :selectTime="selectTime" />
|
||
|
||
<view id="customer-consumption-preferences" class="section-anchor"></view>
|
||
<CustomerConsumptionPreferences :selectTime="selectTime" />
|
||
|
||
<view id="consumption-conversion" class="section-anchor"></view>
|
||
<ConsumptionConversion :selectTime="selectTime" />
|
||
|
||
<view id="consumption-level" class="section-anchor"></view>
|
||
<ConsumptionLevel :selectTime="selectTime" />
|
||
|
||
<view id="consumption-period" class="section-anchor"></view>
|
||
<ConsumptionPeriod :selectTime="selectTime" />
|
||
|
||
<view id="brand-consumption-level" class="section-anchor"></view>
|
||
<BrandConsumptionLevel :selectTime="selectTime" />
|
||
</view>
|
||
|
||
<!-- 多维度经营数据分析 -->
|
||
<view v-else-if="tab.key === 'businessRevenue'" class="tab-content">
|
||
<view id="business-case" class="section-anchor"></view>
|
||
<BusinessCase :selectTime="selectTime" />
|
||
|
||
<view id="regional-revenue" class="section-anchor"></view>
|
||
<RegionalRevenue :selectTime="selectTime" />
|
||
|
||
<view id="business-structure" class="section-anchor"></view>
|
||
<BusinessStructure :selectTime="selectTime" />
|
||
|
||
<view id="festival-revenue-sum-info" class="section-anchor"></view>
|
||
<FestivalRevenueSumInfo />
|
||
</view>
|
||
|
||
<!-- 供应链生态全景 -->
|
||
<view v-else-if="tab.key === 'supplierAnalysis'" class="tab-content">
|
||
<view id="supplier-overview" class="section-anchor"></view>
|
||
<SupplierOverview :selectTime="selectTime" />
|
||
|
||
<view id="supplier-performance" class="section-anchor"></view>
|
||
<SupplierPerformance :selectTime="selectTime" />
|
||
|
||
<view id="supplier-category" class="section-anchor"></view>
|
||
<SupplierCategory :selectTime="selectTime" />
|
||
|
||
<view id="supplier-ranking" class="section-anchor"></view>
|
||
<SupplierRanking :selectTime="selectTime" />
|
||
|
||
<view id="supplier-cooperation" class="section-anchor"></view>
|
||
<SupplierCooperation :selectTime="selectTime" />
|
||
</view>
|
||
|
||
<!-- 商户电商生态全景 -->
|
||
<view v-else-if="tab.key === 'mallOperation'" class="tab-content">
|
||
<view id="member-mall" class="section-anchor"></view>
|
||
<MemberMall :selectTime="selectTime" />
|
||
|
||
<view id="hot-product-list" class="section-anchor"></view>
|
||
<HotProductList />
|
||
|
||
<view id="brand-detail" class="section-anchor"></view>
|
||
<BrandDetail />
|
||
|
||
<view id="supplier-list-box" class="section-anchor"></view>
|
||
<SupplierListBox :selectTime="selectTime" />
|
||
|
||
<view id="mall-order-statistics" class="section-anchor"></view>
|
||
<MallOrderStatistics :selectTime="selectTime" />
|
||
|
||
<view id="this-month-benefits" class="section-anchor"></view>
|
||
<ThisMonthBenefits :selectTime="selectTime" />
|
||
|
||
<view id="analysis-of-member" class="section-anchor"></view>
|
||
<AnalysisOfMember />
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import OverviewOfServiceArea from './components/OverviewOfServiceArea.vue'
|
||
import TradingAlert from './components/TradingAlert.vue'
|
||
import TrendOfTrafficFlow from './components/TrendOfTrafficFlow.vue'
|
||
import VehiclesEntering from './components/VehiclesEntering.vue'
|
||
import VehicleModelStay from './components/VehicleModelStay.vue'
|
||
import CustomerAgeGroup from './components/CustomerAgeGroup.vue'
|
||
import GenderCustomerGroup from './components/GenderCustomerGroup.vue'
|
||
import PreferenceType from './components/PreferenceType.vue'
|
||
import CustomerGroup from './components/CustomerGroup.vue'
|
||
import CustomerConsumptionPreferences from './components/CustomerConsumptionPreferences.vue'
|
||
import ConsumptionConversion from './components/ConsumptionConversion.vue'
|
||
import ConsumptionLevel from './components/ConsumptionLevel.vue'
|
||
import ConsumptionPeriod from './components/ConsumptionPeriod.vue'
|
||
import BrandConsumptionLevel from './components/BrandConsumptionLevel.vue'
|
||
import BusinessCase from './components/BusinessCase.vue'
|
||
import RegionalRevenue from './components/RegionalRevenue.vue'
|
||
import BusinessStructure from './components/BusinessStructure.vue'
|
||
import FestivalRevenueSumInfo from './components/FestivalRevenueSumInfo.vue'
|
||
import MemberMall from './components/MemberMall.vue'
|
||
import HotProductList from './components/HotProductList.vue'
|
||
import BrandDetail from './components/BrandDetail.vue'
|
||
import SupplierListBox from './components/SupplierListBox.vue'
|
||
import MallOrderStatistics from './components/MallOrderStatistics.vue'
|
||
import ThisMonthBenefits from './components/ThisMonthBenefits.vue'
|
||
import AnalysisOfMember from './components/AnalysisOfMember.vue'
|
||
import SupplierOverview from './components/SupplierOverview.vue'
|
||
import SupplierPerformance from './components/SupplierPerformance.vue'
|
||
import SupplierCategory from './components/SupplierCategory.vue'
|
||
import SupplierRanking from './components/SupplierRanking.vue'
|
||
import SupplierCooperation from './components/SupplierCooperation.vue'
|
||
import moment from 'moment'
|
||
|
||
|
||
export default {
|
||
components: {
|
||
OverviewOfServiceArea,
|
||
TradingAlert,
|
||
TrendOfTrafficFlow,
|
||
VehiclesEntering,
|
||
VehicleModelStay,
|
||
CustomerAgeGroup,
|
||
GenderCustomerGroup,
|
||
PreferenceType,
|
||
CustomerGroup,
|
||
CustomerConsumptionPreferences,
|
||
ConsumptionConversion,
|
||
ConsumptionLevel,
|
||
ConsumptionPeriod,
|
||
BrandConsumptionLevel,
|
||
BusinessCase,
|
||
RegionalRevenue,
|
||
BusinessStructure,
|
||
FestivalRevenueSumInfo,
|
||
MemberMall,
|
||
HotProductList,
|
||
BrandDetail,
|
||
SupplierListBox,
|
||
MallOrderStatistics,
|
||
ThisMonthBenefits,
|
||
AnalysisOfMember,
|
||
SupplierOverview,
|
||
SupplierPerformance,
|
||
SupplierCategory,
|
||
SupplierRanking,
|
||
SupplierCooperation
|
||
},
|
||
data() {
|
||
return {
|
||
activeTab: 0,
|
||
allowScroll: true, // 控制页面滚动
|
||
pageStyle: 'overflow-x:hidden', // 页面样式
|
||
tabList: [
|
||
{ name: '运营中心', key: 'business' },
|
||
{ name: '客群画像', key: 'customerProfile' },
|
||
{ name: '经营分析', key: 'businessRevenue' },
|
||
{ name: '供应链生态', key: 'supplierAnalysis' },
|
||
{ name: '电商生态', key: 'mallOperation' },
|
||
],
|
||
// 各个Tab对应的导航栏数据
|
||
navData: {
|
||
business: [
|
||
{ id: 'overview-of-serviceArea', name: '概况' },// 服务区概况
|
||
{ id: 'trading-alert', name: '预警' },// 交易预警
|
||
{ id: 'trend-of-trafficFlow', name: '断面' },// 断面流量
|
||
{ id: 'vehicles-entering', name: '入区' },// 入区车流
|
||
{ id: 'vehicle-model-stay', name: '效益' },// 经营效益
|
||
],
|
||
customerProfile: [
|
||
{ id: 'customer-age-group', name: '年龄' },// 年龄画像
|
||
{ id: 'gender-customer-group', name: '性别' },// 性别画像
|
||
{ id: 'preference-type', name: '偏好' },// 偏好类型
|
||
{ id: 'customer-group', name: '特征' },// 客群特征
|
||
{ id: 'customer-consumption-preferences', name: '消费' },// 消费偏好
|
||
{ id: 'consumption-conversion', name: '转化率' },// 消费转化率
|
||
{ id: 'consumption-level', name: '水平' },// 消费水平
|
||
{ id: 'consumption-period', name: '时段' },// 消费时段
|
||
{ id: 'brand-consumption-level', name: '品牌' },// 品牌消费
|
||
],
|
||
businessRevenue: [
|
||
{ id: 'business-case', name: '营收' },// 营收特征
|
||
{ id: 'regional-revenue', name: '区域' },// 区域营收
|
||
{ id: 'business-structure', name: '业态' },// 业态结构
|
||
{ id: 'festival-revenue-sum-info', name: '节假日' },// 节假日营收
|
||
],
|
||
supplierAnalysis: [
|
||
{ id: 'supplier-overview', name: '概览' },// 供应商概览
|
||
{ id: 'supplier-performance', name: '绩效' },// 供应商绩效
|
||
{ id: 'supplier-category', name: '分类' },// 供应商分类
|
||
{ id: 'supplier-ranking', name: '排名' },// 供应商排名
|
||
{ id: 'supplier-cooperation', name: '合作' },// 合作分析
|
||
],
|
||
mallOperation: [
|
||
{ id: 'member-mall', name: '商城' },// 会员商城
|
||
{ id: 'hot-product-list', name: '榜单' },// 商品榜单
|
||
{ id: 'brand-detail', name: '类别' },// 商户类别
|
||
{ id: 'supplier-list-box', name: '供应商' },// 供应商列表
|
||
{ id: 'mall-order-statistics', name: '订单' },// 商城订单统计
|
||
{ id: 'this-month-benefits', name: '福利金' },// 福利金额度
|
||
{ id: 'analysis-of-member', name: '会员' },// 会员消费
|
||
]
|
||
},
|
||
navColorMap: {
|
||
business: '#6F86FF',
|
||
customerProfile: '#FF8F6F',
|
||
businessRevenue: '#38C9A4',
|
||
supplierAnalysis: '#9B7EDE',
|
||
mallOperation: '#F1C84C'
|
||
},
|
||
// 当前活动的导航项
|
||
activeNavItem: '',
|
||
// 导航栏是否收缩
|
||
isNavCollapsed: false,
|
||
// 暂时将这一次进入 的数据缓存一下
|
||
sessionData: {},
|
||
pageScrollTop: 0,
|
||
scrollIntoViewMap: {
|
||
business: '',
|
||
customerProfile: '',
|
||
businessRevenue: '',
|
||
supplierAnalysis: '',
|
||
mallOperation: ''
|
||
},
|
||
tabScrollPosition: 0,
|
||
selectTime: moment().subtract(1, 'M').format('YYYY-MM')
|
||
}
|
||
},
|
||
computed: {
|
||
// 获取当前Tab的导航项
|
||
currentNavItems() {
|
||
const currentTabKey = this.tabList[this.activeTab].key;
|
||
return this.navData[currentTabKey] || [];
|
||
},
|
||
currentTabKey() {
|
||
const current = this.tabList[this.activeTab];
|
||
return current ? current.key : '';
|
||
},
|
||
navAccentColor() {
|
||
return this.navColorMap[this.currentTabKey] || '#6F86FF';
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.fetchTabData(this.activeTab);
|
||
this.resetScrollPosition(this.tabList[this.activeTab].key);
|
||
// 监听滚动控制事件
|
||
uni.$on('disableScroll', this.handleDisableScroll);
|
||
uni.$on('enableScroll', this.handleEnableScroll);
|
||
},
|
||
|
||
onShow() {
|
||
// 隐藏小程序原生tabbar
|
||
uni.hideTabBar();
|
||
},
|
||
|
||
onReady() {
|
||
// 初始化活动导航项
|
||
const currentTabKey = this.tabList[this.activeTab].key;
|
||
const navItems = this.navData[currentTabKey] || [];
|
||
if (navItems.length > 0) {
|
||
this.activeNavItem = navItems[0].id;
|
||
}
|
||
},
|
||
methods: {
|
||
bindDateChange(e) {
|
||
console.log('eeeee', e);
|
||
this.selectTime = e.detail.value
|
||
},
|
||
switchTab(index) {
|
||
this.activeTab = index;
|
||
this.fetchTabData(index);
|
||
const targetKey = this.tabList[index].key;
|
||
this.resetScrollPosition(targetKey);
|
||
this.updateTabScrollPosition(index);
|
||
},
|
||
handleSwiperChange(e) {
|
||
const { current } = e.detail;
|
||
if (this.activeTab === current) {
|
||
return;
|
||
}
|
||
this.activeTab = current;
|
||
this.fetchTabData(current);
|
||
const targetKey = this.tabList[current].key;
|
||
this.resetScrollPosition(targetKey);
|
||
this.updateTabScrollPosition(current);
|
||
},
|
||
updateTabScrollPosition(index) {
|
||
setTimeout(() => {
|
||
const query = uni.createSelectorQuery().in(this)
|
||
query.select('.tab-container').boundingClientRect()
|
||
query.select(`#tab-${index}`).boundingClientRect()
|
||
|
||
query.exec((res) => {
|
||
if (!res || res.length < 2 || !res[0] || !res[1]) {
|
||
const estimatedWidth = 120
|
||
this.tabScrollPosition = Math.max(0, (index - 1) * estimatedWidth)
|
||
return
|
||
}
|
||
|
||
const container = res[0]
|
||
const tab = res[1]
|
||
const tabCenter = tab.left + (tab.width / 2)
|
||
const containerCenter = container.left + (container.width / 2)
|
||
const scrollOffset = tabCenter - containerCenter
|
||
const newScrollPosition = Math.round(this.tabScrollPosition + scrollOffset)
|
||
this.tabScrollPosition = Math.max(0, newScrollPosition)
|
||
})
|
||
}, 100)
|
||
},
|
||
|
||
// 滚动到指定组件
|
||
scrollToComponent(componentId) {
|
||
const currentTabKey = this.tabList[this.activeTab].key;
|
||
this.scrollIntoViewMap[currentTabKey] = componentId;
|
||
this.activeNavItem = componentId;
|
||
|
||
},
|
||
|
||
scrollToTop() {
|
||
const tabKey = this.currentTabKey;
|
||
if (!tabKey) {
|
||
return;
|
||
}
|
||
this.scrollIntoViewMap[tabKey] = '';
|
||
this.$nextTick(() => {
|
||
this.scrollIntoViewMap[tabKey] = `top-${tabKey}`;
|
||
});
|
||
const navItems = this.navData[tabKey] || [];
|
||
if (navItems.length > 0) {
|
||
this.activeNavItem = navItems[0].id;
|
||
}
|
||
},
|
||
|
||
resetScrollPosition(tabKey) {
|
||
this.scrollIntoViewMap[tabKey] = `top-${tabKey}`;
|
||
},
|
||
|
||
// 切换导航栏收缩状态
|
||
toggleNavCollapse() {
|
||
this.isNavCollapsed = !this.isNavCollapsed;
|
||
},
|
||
|
||
handleScroll(e) {
|
||
this.pageScrollTop = e.detail.scrollTop
|
||
},
|
||
|
||
|
||
|
||
|
||
// 处理禁用滚动
|
||
handleDisableScroll() {
|
||
this.allowScroll = false;
|
||
this.pageStyle = 'overflow-x:hidden; overflow-y:hidden; position:fixed; width:100%; height:100%;';
|
||
},
|
||
|
||
// 处理启用滚动
|
||
handleEnableScroll() {
|
||
this.allowScroll = true;
|
||
this.pageStyle = 'overflow-x:hidden';
|
||
},
|
||
|
||
// 获取各个tab的数据
|
||
async fetchTabData(tabIndex) {
|
||
// 切换Tab时重置活动导航项
|
||
const currentTabKey = this.tabList[tabIndex].key;
|
||
const navItems = this.navData[currentTabKey] || [];
|
||
if (navItems.length > 0) {
|
||
this.activeNavItem = navItems[0].id;
|
||
}
|
||
},
|
||
|
||
formatNavName(name = '') {
|
||
const trimmed = name.trim();
|
||
return trimmed.length > 6 ? `${trimmed.slice(0, 6)}...` : trimmed;
|
||
},
|
||
|
||
getNavShortName(name = '') {
|
||
const trimmed = name.trim();
|
||
if (trimmed.length <= 2) {
|
||
return trimmed || '--';
|
||
}
|
||
return trimmed.slice(0, 2);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@primary-color: #667eea;
|
||
@secondary-color: #764ba2;
|
||
@success-color: #52c41a;
|
||
@warning-color: #faad14;
|
||
@error-color: #ff4d4f;
|
||
@text-primary: #333;
|
||
@text-secondary: #666;
|
||
@text-light: #999;
|
||
@bg-light: #f8f9fb;
|
||
@bg-white: #ffffff;
|
||
@border-radius: 16rpx;
|
||
@shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
@shadow-light: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||
|
||
.digital-dashboard {
|
||
height: 100vh;
|
||
background: linear-gradient(180deg, @bg-light 0%, #e9ecf4 100%);
|
||
|
||
.tab-swiper {
|
||
height: 100vh;
|
||
}
|
||
|
||
.tab-scroll-view {
|
||
height: 100vh;
|
||
}
|
||
|
||
.tab-container {
|
||
background: @bg-white;
|
||
box-shadow: @shadow-light;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 100;
|
||
width: 100%;
|
||
|
||
.tab-list {
|
||
height: 80rpx;
|
||
display: flex;
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
width: max-content;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 隐藏滚动条 */
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
}
|
||
|
||
.tab-item {
|
||
position: relative;
|
||
padding: 16rpx 24rpx;
|
||
margin-right: 16rpx;
|
||
flex-shrink: 0;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
cursor: pointer;
|
||
min-width: fit-content;
|
||
display: inline-block;
|
||
|
||
&.active {
|
||
.tab-text {
|
||
color: @primary-color;
|
||
font-weight: 600;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.tab-indicator {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 48rpx;
|
||
height: 6rpx;
|
||
background: linear-gradient(90deg, @primary-color, @secondary-color);
|
||
border-radius: 3rpx;
|
||
animation: slideIn 0.3s ease-out;
|
||
}
|
||
}
|
||
|
||
.tab-text {
|
||
font-size: 28rpx;
|
||
color: @text-secondary;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
white-space: nowrap;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -4rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background: @primary-color;
|
||
transform: scaleX(0);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-container {
|
||
padding: 32rpx;
|
||
padding-top: 92rpx;
|
||
|
||
.section-anchor {
|
||
height: 0;
|
||
margin-top: -120rpx;
|
||
padding-top: 120rpx;
|
||
}
|
||
|
||
.tab-content {
|
||
/* 移除切换动画 */
|
||
|
||
.chart-grid {
|
||
.chart-row {
|
||
margin-bottom: 24rpx;
|
||
|
||
.chart-card {
|
||
background: @bg-white;
|
||
border-radius: @border-radius;
|
||
padding: 24rpx;
|
||
box-shadow: @shadow;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2rpx;
|
||
background: linear-gradient(90deg, @primary-color, @secondary-color);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
&:active {
|
||
transform: translateY(-2rpx);
|
||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
||
|
||
&::before {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
&.full {
|
||
width: 100%;
|
||
min-height: 400rpx;
|
||
}
|
||
|
||
.chart-header {
|
||
margin-bottom: 20rpx;
|
||
|
||
.chart-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: @text-primary;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.chart-subtitle {
|
||
font-size: 22rpx;
|
||
color: @text-light;
|
||
}
|
||
}
|
||
|
||
.chart-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 300rpx;
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||
border-radius: 12rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&.large {
|
||
height: 400rpx;
|
||
}
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(103, 126, 234, 0.1) 0%, transparent 70%);
|
||
animation: rotate 30s infinite linear;
|
||
}
|
||
|
||
.placeholder-text {
|
||
font-size: 32rpx;
|
||
color: @text-secondary;
|
||
margin-bottom: 8rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.placeholder-desc {
|
||
font-size: 24rpx;
|
||
color: @text-light;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.timeBox {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.side-navigation {
|
||
position: fixed;
|
||
right: 12rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 1000;
|
||
transition: all 0.3s ease;
|
||
|
||
.nav-rail {
|
||
width: 70rpx;
|
||
max-height: 70vh;
|
||
padding: 12rpx 10rpx;
|
||
border-radius: 999rpx;
|
||
background: rgba(8, 16, 40, 0.78);
|
||
backdrop-filter: blur(18rpx);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.12);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
box-shadow: 0 20rpx 48rpx rgba(6, 6, 34, 0.55);
|
||
overflow: hidden;
|
||
transform-origin: center;
|
||
transition: width 0.7s cubic-bezier(0.33, 1, 0.68, 1), height 0.7s cubic-bezier(0.33, 1, 0.68, 1),
|
||
padding 0.7s cubic-bezier(0.33, 1, 0.68, 1), border-radius 0.7s ease, box-shadow 0.7s ease,
|
||
transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
|
||
position: relative;
|
||
}
|
||
|
||
.rail-body {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
|
||
}
|
||
|
||
.rail-body.hidden {
|
||
opacity: 0;
|
||
transform: translateY(12rpx) scale(0.9);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.rail-header,
|
||
.rail-footer {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.rail-title {
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
line-height: 1.4;
|
||
opacity: 0.85;
|
||
text-align: center;
|
||
}
|
||
|
||
.rail-toggle {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
border-radius: 50%;
|
||
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.toggle-icon {
|
||
font-size: 24rpx;
|
||
transition: transform 0.3s ease;
|
||
|
||
&.rotated {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
|
||
.rail-track {
|
||
width: 100%;
|
||
flex: 1;
|
||
margin: 16rpx 0;
|
||
}
|
||
|
||
.rail-track::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.rail-item {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 8rpx 0;
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease;
|
||
|
||
&:active {
|
||
transform: translateX(-3rpx);
|
||
}
|
||
|
||
&.active .rail-dot::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
&.active .rail-dot-text {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.rail-dot {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||
box-shadow: inset 0 0 12rpx rgba(255, 255, 255, 0.08);
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 4rpx;
|
||
border-radius: 50%;
|
||
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 50%;
|
||
background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.25));
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
z-index: 0;
|
||
}
|
||
}
|
||
|
||
.rail-dot-text {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-size: 20rpx;
|
||
letter-spacing: 1rpx;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
font-weight: 400;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.rail-footer {
|
||
padding-top: 8rpx;
|
||
}
|
||
|
||
.rail-back {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 50%;
|
||
border: 1rpx solid rgba(255, 255, 255, 0.25);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
gap: 4rpx;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.nav-rail.compact {
|
||
width: 86rpx;
|
||
height: 86rpx;
|
||
padding: 0;
|
||
border-radius: 50%;
|
||
justify-content: center;
|
||
border-color: rgba(255, 255, 255, 0.2);
|
||
box-shadow: 0 14rpx 30rpx rgba(6, 6, 34, 0.4);
|
||
transform: translateY(0) scale(0.96);
|
||
}
|
||
|
||
.rail-compact {
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
gap: 4rpx;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transform: scale(0.8);
|
||
pointer-events: none;
|
||
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
|
||
}
|
||
|
||
.rail-compact.visible {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.compact-icon {
|
||
font-size: 28rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.compact-text {
|
||
font-size: 18rpx;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
width: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
to {
|
||
width: 48rpx;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes rotate {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style>
|