update
This commit is contained in:
ylj20011123
parent
2e75870f32
commit
e9e165827c
@ -14,22 +14,37 @@
|
|||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
<!-- 右侧悬浮导航栏 -->
|
<!-- 右侧悬浮导航栏 -->
|
||||||
<view class="side-navigation" v-if="currentNavItems && currentNavItems.length > 0"
|
<view class="side-navigation" v-if="currentNavItems && currentNavItems.length > 0">
|
||||||
:class="{ collapsed: isNavCollapsed }">
|
<view class="nav-rail" :class="{ compact: isNavCollapsed }">
|
||||||
<view class="nav-container">
|
<view class="rail-body" :class="{ hidden: isNavCollapsed }">
|
||||||
<view class="nav-header" @click="toggleNavCollapse">
|
<view class="rail-header">
|
||||||
<view class="nav-title" v-if="!isNavCollapsed">快速导航</view>
|
<text class="rail-title">
|
||||||
<view class="nav-toggle">
|
<text style="display: block;">快速</text>
|
||||||
<text class="toggle-icon" :class="{ rotated: isNavCollapsed }">◀</text>
|
<text style="display: block;">导航</text>
|
||||||
|
</text>
|
||||||
|
<view class="rail-toggle" @click="toggleNavCollapse">
|
||||||
|
<text class="toggle-icon">×</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="nav-list" v-show="!isNavCollapsed">
|
<scroll-view scroll-y class="rail-track" show-scrollbar="false">
|
||||||
<view v-for="item in currentNavItems" :key="item.id" class="nav-item"
|
<view v-for="item in currentNavItems" :key="item.id" class="rail-item"
|
||||||
:class="{ active: activeNavItem === item.id }" @click="scrollToComponent(item.id)">
|
:class="{ active: activeNavItem === item.id }" @click="scrollToComponent(item.id)">
|
||||||
<text class="nav-text">{{ item.name }}</text>
|
<view class="rail-dot" :style="{ borderColor: navAccentColor }">
|
||||||
<view class="nav-dot" v-if="activeNavItem === item.id"></view>
|
<text class="rail-dot-text">{{ (item.name) }}</text>
|
||||||
</view>
|
</view>
|
||||||
</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>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -211,39 +226,45 @@ export default {
|
|||||||
// 各个Tab对应的导航栏数据
|
// 各个Tab对应的导航栏数据
|
||||||
navData: {
|
navData: {
|
||||||
business: [
|
business: [
|
||||||
{ id: 'overview-of-serviceArea', name: '服务区概况' },
|
{ id: 'overview-of-serviceArea', name: '概况' },// 服务区概况
|
||||||
{ id: 'trading-alert', name: '交易预警' },
|
{ id: 'trading-alert', name: '预警' },// 交易预警
|
||||||
{ id: 'trend-of-trafficFlow', name: '断面流量' },
|
{ id: 'trend-of-trafficFlow', name: '断面' },// 断面流量
|
||||||
{ id: 'vehicles-entering', name: '入区车流' },
|
{ id: 'vehicles-entering', name: '入区' },// 入区车流
|
||||||
{ id: 'vehicle-model-stay', name: '经营效益' },
|
{ id: 'vehicle-model-stay', name: '效益' },// 经营效益
|
||||||
],
|
],
|
||||||
customerProfile: [
|
customerProfile: [
|
||||||
{ id: 'customer-age-group', name: '年龄画像' },
|
{ id: 'customer-age-group', name: '年龄' },// 年龄画像
|
||||||
{ id: 'gender-customer-group', name: '性别画像' },
|
{ id: 'gender-customer-group', name: '性别' },// 性别画像
|
||||||
{ id: 'preference-type', name: '偏好类型' },
|
{ id: 'preference-type', name: '偏好' },// 偏好类型
|
||||||
{ id: 'customer-group', name: '客群特征' },
|
{ id: 'customer-group', name: '特征' },// 客群特征
|
||||||
{ id: 'customer-consumption-preferences', name: '消费偏好' },
|
{ id: 'customer-consumption-preferences', name: '消费' },// 消费偏好
|
||||||
{ id: 'consumption-conversion', name: '消费转化率' },
|
{ id: 'consumption-conversion', name: '转化率' },// 消费转化率
|
||||||
{ id: 'consumption-level', name: '消费水平' },
|
{ id: 'consumption-level', name: '水平' },// 消费水平
|
||||||
{ id: 'consumption-period', name: '消费时段' },
|
{ id: 'consumption-period', name: '时段' },// 消费时段
|
||||||
{ id: 'brand-consumption-level', name: '品牌消费' },
|
{ id: 'brand-consumption-level', name: '品牌' },// 品牌消费
|
||||||
],
|
],
|
||||||
businessRevenue: [
|
businessRevenue: [
|
||||||
{ id: 'business-case', name: '营收特征' },
|
{ id: 'business-case', name: '营收' },// 营收特征
|
||||||
{ id: 'regional-revenue', name: '区域营收' },
|
{ id: 'regional-revenue', name: '区域' },// 区域营收
|
||||||
{ id: 'business-structure', name: '业态结构' },
|
{ id: 'business-structure', name: '业态' },// 业态结构
|
||||||
{ id: 'festival-revenue-sum-info', name: '节假日营收' },
|
{ id: 'festival-revenue-sum-info', name: '节假日' },// 节假日营收
|
||||||
],
|
],
|
||||||
mallOperation: [
|
mallOperation: [
|
||||||
{ id: 'member-mall', name: '会员商城' },
|
{ id: 'member-mall', name: '商城' },// 会员商城
|
||||||
{ id: 'hot-product-list', name: '商品榜单' },
|
{ id: 'hot-product-list', name: '榜单' },// 商品榜单
|
||||||
{ id: 'brand-detail', name: '商户类别' },
|
{ id: 'brand-detail', name: '类别' },// 商户类别
|
||||||
{ id: 'supplier-list-box', name: '供应商列表' },
|
{ id: 'supplier-list-box', name: '供应商' },// 供应商列表
|
||||||
{ id: 'mall-order-statistics', name: '商城订单统计' },
|
{ id: 'mall-order-statistics', name: '订单' },// 商城订单统计
|
||||||
{ id: 'this-month-benefits', name: '福利金额度' },
|
{ id: 'this-month-benefits', name: '福利金' },// 福利金额度
|
||||||
{ id: 'analysis-of-member', name: '会员消费' },
|
{ id: 'analysis-of-member', name: '会员' },// 会员消费
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
navColorMap: {
|
||||||
|
business: '#6F86FF',
|
||||||
|
customerProfile: '#FF8F6F',
|
||||||
|
businessRevenue: '#38C9A4',
|
||||||
|
mallOperation: '#F1C84C'
|
||||||
|
},
|
||||||
// 当前活动的导航项
|
// 当前活动的导航项
|
||||||
activeNavItem: '',
|
activeNavItem: '',
|
||||||
// 导航栏是否收缩
|
// 导航栏是否收缩
|
||||||
@ -266,6 +287,13 @@ export default {
|
|||||||
currentNavItems() {
|
currentNavItems() {
|
||||||
const currentTabKey = this.tabList[this.activeTab].key;
|
const currentTabKey = this.tabList[this.activeTab].key;
|
||||||
return this.navData[currentTabKey] || [];
|
return this.navData[currentTabKey] || [];
|
||||||
|
},
|
||||||
|
currentTabKey() {
|
||||||
|
const current = this.tabList[this.activeTab];
|
||||||
|
return current ? current.key : '';
|
||||||
|
},
|
||||||
|
navAccentColor() {
|
||||||
|
return this.navColorMap[this.currentTabKey] || '#6F86FF';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
@ -325,6 +353,21 @@ export default {
|
|||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
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) {
|
resetScrollPosition(tabKey) {
|
||||||
this.scrollIntoViewMap[tabKey] = `top-${tabKey}`;
|
this.scrollIntoViewMap[tabKey] = `top-${tabKey}`;
|
||||||
},
|
},
|
||||||
@ -361,6 +404,19 @@ export default {
|
|||||||
if (navItems.length > 0) {
|
if (navItems.length > 0) {
|
||||||
this.activeNavItem = navItems[0].id;
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -600,141 +656,221 @@ export default {
|
|||||||
|
|
||||||
.side-navigation {
|
.side-navigation {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 24rpx;
|
right: 12rpx;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border-radius: 16rpx;
|
|
||||||
box-shadow: @shadow;
|
|
||||||
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
|
||||||
max-height: 70vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
.nav-rail {
|
||||||
width: 4rpx;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
.rail-body {
|
||||||
background: rgba(0, 0, 0, 0.1);
|
width: 100%;
|
||||||
border-radius: 2rpx;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
.rail-body.hidden {
|
||||||
background: @primary-color;
|
opacity: 0;
|
||||||
border-radius: 2rpx;
|
transform: translateY(12rpx) scale(0.9);
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 收缩状态
|
.rail-header,
|
||||||
&.collapsed {
|
.rail-footer {
|
||||||
min-width: auto;
|
width: 100%;
|
||||||
max-width: auto;
|
|
||||||
|
|
||||||
.nav-container {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-container {
|
|
||||||
padding: 0 16rpx;
|
|
||||||
|
|
||||||
.nav-header {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
padding: 16rpx;
|
flex-direction: column;
|
||||||
border-bottom: 1rpx solid #f0f0f0;
|
gap: 10rpx;
|
||||||
margin-bottom: 8rpx;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.nav-title {
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
color: @text-primary;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-toggle {
|
.rail-title {
|
||||||
.toggle-icon {
|
color: #fff;
|
||||||
font-size: 20rpx;
|
font-size: 20rpx;
|
||||||
color: @text-secondary;
|
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;
|
transition: transform 0.3s ease;
|
||||||
|
|
||||||
&.rotated {
|
&.rotated {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rail-track {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
margin: 16rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
.rail-track::-webkit-scrollbar {
|
||||||
background: rgba(102, 126, 234, 0.05);
|
width: 0;
|
||||||
border-radius: 8rpx;
|
height: 0;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-list {
|
.rail-item {
|
||||||
.nav-item {
|
width: 100%;
|
||||||
position: relative;
|
display: flex;
|
||||||
padding: 16rpx 20rpx;
|
justify-content: center;
|
||||||
margin-bottom: 8rpx;
|
padding: 8rpx 0;
|
||||||
border-radius: 12rpx;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
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);
|
||||||
|
|
||||||
&:hover {
|
&::before {
|
||||||
background: rgba(102, 126, 234, 0.1);
|
content: '';
|
||||||
transform: translateX(-4rpx);
|
position: absolute;
|
||||||
}
|
inset: 4rpx;
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: linear-gradient(90deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
|
|
||||||
border-left: 4rpx solid @primary-color;
|
|
||||||
padding-left: 16rpx;
|
|
||||||
|
|
||||||
.nav-text {
|
|
||||||
color: @primary-color;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-text {
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: @text-secondary;
|
|
||||||
line-height: 1.4;
|
|
||||||
flex: 1;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-dot {
|
|
||||||
width: 8rpx;
|
|
||||||
height: 8rpx;
|
|
||||||
background: @primary-color;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: pulse 2s infinite;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
.rail-dot-text {
|
||||||
0% {
|
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;
|
opacity: 1;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
.compact-icon {
|
||||||
opacity: 0.6;
|
font-size: 28rpx;
|
||||||
transform: scale(1.2);
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
.compact-text {
|
||||||
opacity: 1;
|
font-size: 18rpx;
|
||||||
transform: scale(1);
|
letter-spacing: 2rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user