914 lines
25 KiB
Vue
914 lines
25 KiB
Vue
<template>
|
||
<view class="gross-margin-analysis">
|
||
<view class="report-header">
|
||
<text class="report-title">商品毛利率分析</text>
|
||
<view class="report-period">
|
||
<text class="period-label">分析周期：</text>
|
||
<text class="period-value">{{ analysisPeriod }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 关键指标卡片 -->
|
||
<view class="metrics-row">
|
||
<view class="metric-card">
|
||
<view class="metric-icon margin"></view>
|
||
<text class="metric-title">平均毛利率</text>
|
||
<view class="metric-value-container">
|
||
<text class="metric-value">{{ avgMargin }}%</text>
|
||
<text class="metric-unit">良好</text>
|
||
</view>
|
||
</view>
|
||
<view class="metric-card">
|
||
<view class="metric-icon revenue"></view>
|
||
<text class="metric-title">毛利总额</text>
|
||
<view class="metric-value-container">
|
||
<text class="metric-value">¥{{ formatMoney(totalMargin) }}</text>
|
||
<text class="metric-unit">万元</text>
|
||
</view>
|
||
</view>
|
||
<view class="metric-card">
|
||
<view class="metric-icon profit"></view>
|
||
<text class="metric-title">净利润率</text>
|
||
<view class="metric-value-container">
|
||
<text class="metric-value">{{ netProfitRate }}%</text>
|
||
<text class="metric-unit">健康</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 毛利率分布饼图 -->
|
||
<view class="chart-card">
|
||
<view class="chart-header">
|
||
<text class="chart-title">商品毛利率分布</text>
|
||
<text class="chart-subtitle">按毛利率区间分类统计</text>
|
||
</view>
|
||
<view class="chart-content">
|
||
<view class="pie-chart-container">
|
||
<QiunDataCharts
|
||
type="pie"
|
||
:opts="pieChartOpts"
|
||
:chartData="pieChartData"
|
||
:canvas2d="true"
|
||
:inScrollView="true"
|
||
canvasId="marginPieChart"
|
||
/>
|
||
<view class="pie-legend">
|
||
<view class="legend-item" v-for="(item, index) in marginDistributionData" :key="index">
|
||
<view class="legend-color" :style="{ backgroundColor: item.color }"></view>
|
||
<text class="legend-name">{{ item.name }}</text>
|
||
<text class="legend-value">{{ item.percentage }}%</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 毛利率趋势分析折线图 -->
|
||
<view class="chart-card">
|
||
<view class="chart-header">
|
||
<text class="chart-title">毛利率趋势分析</text>
|
||
<text class="chart-subtitle">最近12个月毛利率变化趋势</text>
|
||
</view>
|
||
<view class="chart-content">
|
||
<view class="line-chart-container">
|
||
<QiunDataCharts
|
||
type="line"
|
||
:opts="lineChartOpts"
|
||
:chartData="lineChartData"
|
||
:canvas2d="true"
|
||
:inScrollView="true"
|
||
canvasId="marginTrendChart"
|
||
/>
|
||
<view class="chart-legend">
|
||
<view class="legend-item">
|
||
<view class="legend-dot margin"></view>
|
||
<text class="legend-text">毛利率</text>
|
||
</view>
|
||
<view class="legend-item">
|
||
<view class="legend-dot revenue"></view>
|
||
<text class="legend-text">销售额</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 各类别毛利率对比柱状图 -->
|
||
<view class="chart-card">
|
||
<view class="chart-header">
|
||
<text class="chart-title">各类别毛利率对比</text>
|
||
<text class="chart-subtitle">不同商品类别的毛利率分析</text>
|
||
</view>
|
||
<view class="chart-content">
|
||
<view class="bar-chart-container">
|
||
<QiunDataCharts
|
||
type="column"
|
||
:opts="barChartOpts"
|
||
:chartData="barChartData"
|
||
:canvas2d="true"
|
||
:inScrollView="true"
|
||
canvasId="categoryMarginChart"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 高毛利商品排行榜 -->
|
||
<view class="chart-card">
|
||
<view class="chart-header">
|
||
<text class="chart-title">高毛利商品排行榜</text>
|
||
<text class="chart-subtitle">TOP 10 高毛利商品</text>
|
||
</view>
|
||
<view class="ranking-list">
|
||
<view class="ranking-item" v-for="(item, index) in topMarginProducts" :key="index">
|
||
<view class="ranking-medal" :class="[getMedalClass(index)]">
|
||
<text class="medal-text">{{ getMedalText(index) }}</text>
|
||
</view>
|
||
<view class="ranking-content">
|
||
<text class="product-name">{{ item.name }}</text>
|
||
<text class="product-category">{{ item.category }}</text>
|
||
</view>
|
||
<view class="ranking-metrics">
|
||
<view class="metric-item">
|
||
<text class="metric-label">毛利率</text>
|
||
<text class="metric-value">{{ item.marginRate }}%</text>
|
||
</view>
|
||
<view class="metric-divider"></view>
|
||
<view class="metric-item">
|
||
<text class="metric-label">毛利额</text>
|
||
<text class="metric-value">¥{{ formatMoney(item.marginAmount) }}</text>
|
||
</view>
|
||
<view class="metric-divider"></view>
|
||
<view class="metric-item">
|
||
<text class="metric-label">销售额</text>
|
||
<text class="metric-value">¥{{ formatMoney(item.revenue) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 低毛利商品分析 -->
|
||
<view class="chart-card">
|
||
<view class="chart-header">
|
||
<text class="chart-title">低毛利商品分析</text>
|
||
<text class="chart-subtitle">需要优化的低毛利商品</text>
|
||
</view>
|
||
<view class="low-margin-list">
|
||
<view class="low-margin-item" v-for="(item, index) in lowMarginProducts" :key="index" :class="[getMarginLevel(item.marginRate)]">
|
||
<view class="margin-icon">{{ getMarginIcon(item.marginRate) }}</view>
|
||
<view class="margin-content">
|
||
<text class="product-name">{{ item.name }}</text>
|
||
<text class="product-info">{{ item.category }} | 成本：¥{{ item.cost }} | 售价：¥{{ item.price }}</text>
|
||
</view>
|
||
<view class="margin-data">
|
||
<text class="margin-rate">{{ item.marginRate }}%</text>
|
||
<text class="margin-amount">毛利：¥{{ item.unitMargin }}</text>
|
||
</view>
|
||
<view class="margin-action">
|
||
<text class="action-btn">优化建议</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 毛利优化建议 -->
|
||
<view class="chart-card">
|
||
<view class="chart-header">
|
||
<text class="chart-title">毛利优化建议</text>
|
||
</view>
|
||
<view class="suggestions">
|
||
<view class="suggestion-item" v-for="(item, index) in optimizationSuggestions" :key="index">
|
||
<view class="suggestion-icon">{{ item.icon }}</view>
|
||
<view class="suggestion-content">
|
||
<text class="suggestion-title">{{ item.title }}</text>
|
||
<text class="suggestion-desc">{{ item.description }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||
|
||
export default {
|
||
components: {
|
||
QiunDataCharts
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
analysisPeriod: '2024年10月',
|
||
avgMargin: 42.8,
|
||
totalMargin: 1256.78,
|
||
netProfitRate: 18.5,
|
||
|
||
// 毛利率分布数据
|
||
marginDistributionData: [
|
||
{ name: '高毛利(>50%)', value: 156234, percentage: 32.2, color: '#52C41A' },
|
||
{ name: '良好毛利(30-50%)', value: 189456, percentage: 39.0, color: '#1890FF' },
|
||
{ name: '一般毛利(20-30%)', value: 98765, percentage: 20.3, color: '#FAAD14' },
|
||
{ name: '低毛利(10-20%)', value: 34567, percentage: 7.1, color: '#FF7A45' },
|
||
{ name: '微毛利(<10%)', value: 5678, percentage: 1.4, color: '#FF4D4F' }
|
||
],
|
||
|
||
// 毛利率趋势数据
|
||
marginTrendData: {
|
||
categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||
marginData: [38.5, 39.2, 40.1, 41.3, 42.1, 41.8, 42.5, 43.1, 42.7, 42.8, 43.2, 42.8],
|
||
revenueData: [234, 256, 278, 289, 312, 298, 324, 345, 332, 338, 356, 345]
|
||
},
|
||
|
||
// 各类别毛利数据
|
||
categoryMarginData: [
|
||
{ category: '工艺品', marginRate: 68.5, revenue: 345.67 },
|
||
{ category: '保健品', marginRate: 52.3, revenue: 456.78 },
|
||
{ category: '化妆品', marginRate: 48.7, revenue: 234.56 },
|
||
{ category: '纺织品', marginRate: 45.2, revenue: 123.45 },
|
||
{ category: '茶叶', marginRate: 38.9, revenue: 567.89 },
|
||
{ category: '食品', marginRate: 35.6, revenue: 234.56 },
|
||
{ category: '饮品', marginRate: 28.4, revenue: 345.67 },
|
||
{ category: '其他', marginRate: 22.1, revenue: 89.12 }
|
||
],
|
||
|
||
// 高毛利商品TOP 10
|
||
topMarginProducts: [
|
||
{ name: '玉石手镯', category: '工艺品', marginRate: 75.8, marginAmount: 156.78, revenue: 345.67 },
|
||
{ name: '银饰项链', category: '工艺品', marginRate: 72.3, marginAmount: 134.56, revenue: 234.56 },
|
||
{ name: '三七粉', category: '保健品', marginRate: 68.9, marginAmount: 123.45, revenue: 234.56 },
|
||
{ name: '手工织锦', category: '纺织品', marginRate: 65.2, marginAmount: 98.76, revenue: 189.45 },
|
||
{ name: '鲜花精油', category: '化妆品', marginRate: 62.1, marginAmount: 87.65, revenue: 178.90 },
|
||
{ name: '普洱茶饼', category: '茶叶', marginRate: 58.7, marginAmount: 156.78, revenue: 345.67 },
|
||
{ name: '云南白药', category: '保健品', marginRate: 56.4, marginAmount: 145.67, revenue: 312.45 },
|
||
{ name: '民族刺绣', category: '纺织品', marginRate: 54.3, marginAmount: 76.54, revenue: 189.76 },
|
||
{ name: '玉石吊坠', category: '工艺品', marginRate: 52.8, marginAmount: 98.76, revenue: 234.56 },
|
||
{ name: '手工皂', category: '化妆品', marginRate: 51.2, marginAmount: 67.89, revenue: 189.45 }
|
||
],
|
||
|
||
// 低毛利商品
|
||
lowMarginProducts: [
|
||
{ name: '瓶装水', category: '饮品', cost: 1.2, price: 2.5, marginRate: 52.0, unitMargin: 1.3 },
|
||
{ name: '普通茶叶', category: '茶叶', cost: 45.0, price: 68.0, marginRate: 33.8, unitMargin: 23.0 },
|
||
{ name: '小食品', category: '食品', cost: 12.0, price: 18.5, marginRate: 35.1, unitMargin: 6.5 },
|
||
{ name: '简单工艺品', category: '工艺品', cost: 25.0, price: 38.0, marginRate: 34.2, unitMargin: 13.0 },
|
||
{ name: '基础化妆品', category: '化妆品', cost: 35.0, price: 52.0, marginRate: 32.7, unitMargin: 17.0 },
|
||
{ name: '普通保健品', category: '保健品', cost: 68.0, price: 95.0, marginRate: 28.4, unitMargin: 27.0 }
|
||
],
|
||
|
||
// 优化建议
|
||
optimizationSuggestions: [
|
||
{
|
||
icon: '💰',
|
||
title: '优化产品结构',
|
||
description: '增加高毛利商品的比重，减少低毛利商品的库存占比，提升整体毛利率'
|
||
},
|
||
{
|
||
icon: '📊',
|
||
title: '动态定价策略',
|
||
description: '根据市场需求和竞争情况，实施差异化定价策略，最大化单品毛利'
|
||
},
|
||
{
|
||
icon: '🏭',
|
||
title: '优化供应链成本',
|
||
description: '通过批量采购、优化物流等方式降低采购成本，提升毛利率空间'
|
||
},
|
||
{
|
||
icon: '🎯',
|
||
title: '精准营销推广',
|
||
description: '重点推广高毛利商品，通过营销策略提升高毛利商品的销售占比'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
// 饼图数据
|
||
pieChartData() {
|
||
return {
|
||
series: [{
|
||
data: this.marginDistributionData.map(item => ({
|
||
name: item.name,
|
||
value: item.value
|
||
}))
|
||
}]
|
||
}
|
||
},
|
||
|
||
// 饼图配置
|
||
pieChartOpts() {
|
||
return {
|
||
color: this.marginDistributionData.map(item => item.color),
|
||
padding: [5, 5, 5, 5],
|
||
dataLabel: true,
|
||
legend: {
|
||
show: false
|
||
},
|
||
extra: {
|
||
pie: {
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 15,
|
||
border: false,
|
||
borderWidth: 3,
|
||
borderColor: '#FFFFFF'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
// 折线图数据
|
||
lineChartData() {
|
||
return {
|
||
categories: this.marginTrendData.categories,
|
||
series: [
|
||
{
|
||
name: '毛利率',
|
||
data: this.marginTrendData.marginData
|
||
},
|
||
{
|
||
name: '销售额',
|
||
data: this.marginTrendData.revenueData.map(v => v / 10) // 缩放显示
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
// 折线图配置
|
||
lineChartOpts() {
|
||
return {
|
||
color: ['#52C41A', '#576EFF'],
|
||
padding: [15, 15, 15, 15],
|
||
dataLabel: false,
|
||
legend: {
|
||
show: false
|
||
},
|
||
xAxis: {
|
||
disableGrid: true
|
||
},
|
||
yAxis: {
|
||
gridType: 'dash',
|
||
dashLength: 2,
|
||
data: [
|
||
{
|
||
min: 0,
|
||
max: 50,
|
||
title: '毛利率(%)'
|
||
},
|
||
{
|
||
min: 0,
|
||
position: 'right',
|
||
title: '销售额(÷10)'
|
||
}
|
||
]
|
||
},
|
||
extra: {
|
||
line: {
|
||
type: 'curve',
|
||
width: 2,
|
||
activeType: 'hollow'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
// 柱状图数据
|
||
barChartData() {
|
||
return {
|
||
categories: this.categoryMarginData.map(item => item.category),
|
||
series: [
|
||
{
|
||
name: '毛利率',
|
||
data: this.categoryMarginData.map(item => item.marginRate)
|
||
},
|
||
{
|
||
name: '销售额',
|
||
data: this.categoryMarginData.map(item => item.revenue / 10) // 缩放显示
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
// 柱状图配置
|
||
barChartOpts() {
|
||
return {
|
||
color: ['#52C41A', '#576EFF'],
|
||
padding: [15, 15, 15, 15],
|
||
dataLabel: false,
|
||
enableScroll: false,
|
||
xAxis: {
|
||
disableGrid: false,
|
||
gridType: 'dash',
|
||
rotateLabel: false,
|
||
itemCount: 8
|
||
},
|
||
yAxis: {
|
||
gridType: 'dash',
|
||
dashLength: 2,
|
||
data: [
|
||
{
|
||
min: 0,
|
||
max: 80,
|
||
title: '毛利率(%)'
|
||
},
|
||
{
|
||
min: 0,
|
||
position: 'right',
|
||
title: '销售额(÷10)'
|
||
}
|
||
]
|
||
},
|
||
extra: {
|
||
column: {
|
||
type: 'group',
|
||
width: 20,
|
||
activeBgColor: '#000000',
|
||
activeBgOpacity: 0.08,
|
||
linearType: 'custom',
|
||
barBorderCircle: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
formatMoney(amount) {
|
||
return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
||
},
|
||
|
||
getMedalClass(index) {
|
||
if (index === 0) return 'gold'
|
||
if (index === 1) return 'silver'
|
||
if (index === 2) return 'bronze'
|
||
return ''
|
||
},
|
||
|
||
getMedalText(index) {
|
||
if (index === 0) return '🥇'
|
||
if (index === 1) return '🥈'
|
||
if (index === 2) return '🥉'
|
||
return index + 1
|
||
},
|
||
|
||
getMarginLevel(marginRate) {
|
||
if (marginRate < 15) return 'severe'
|
||
if (marginRate < 25) return 'high'
|
||
if (marginRate < 35) return 'medium'
|
||
return 'low'
|
||
},
|
||
|
||
getMarginIcon(marginRate) {
|
||
if (marginRate < 15) return '🚨'
|
||
if (marginRate < 25) return '⚠️'
|
||
if (marginRate < 35) return '📉'
|
||
return '💹'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@primary-color: #667eea;
|
||
@secondary-color: #764ba2;
|
||
@success-color: #52c41a;
|
||
@warning-color: #faad14;
|
||
@error-color: #ff4d4f;
|
||
@gold: #FFD700;
|
||
@silver: #C0C0C0;
|
||
@bronze: #CD7F32;
|
||
@text-primary: #333;
|
||
@text-secondary: #666;
|
||
@text-light: #999;
|
||
@bg-white: #ffffff;
|
||
@border-radius: 16rpx;
|
||
@shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
|
||
.gross-margin-analysis {
|
||
.report-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
padding: 0 8rpx;
|
||
|
||
.report-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: @text-primary;
|
||
}
|
||
|
||
.report-period {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.period-label {
|
||
font-size: 24rpx;
|
||
color: @text-secondary;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.period-value {
|
||
font-size: 24rpx;
|
||
color: @primary-color;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.metrics-row {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
margin-bottom: 32rpx;
|
||
|
||
.metric-card {
|
||
flex: 1;
|
||
background: @bg-white;
|
||
border-radius: @border-radius;
|
||
padding: 32rpx 24rpx;
|
||
box-shadow: @shadow;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4rpx;
|
||
background: linear-gradient(90deg, @primary-color, @secondary-color);
|
||
}
|
||
|
||
.metric-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin: 0 auto 16rpx;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
|
||
&.margin {
|
||
background: linear-gradient(135deg, #52c41a, #73d13d);
|
||
&::after { content: '💰'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24rpx; }
|
||
}
|
||
|
||
&.revenue {
|
||
background: linear-gradient(135deg, #1890ff, #40a9ff);
|
||
&::after { content: '📈'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24rpx; }
|
||
}
|
||
|
||
&.profit {
|
||
background: linear-gradient(135deg, #faad14, #ffc53d);
|
||
&::after { content: '📊'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24rpx; }
|
||
}
|
||
}
|
||
|
||
.metric-title {
|
||
font-size: 24rpx;
|
||
color: @text-secondary;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.metric-value-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: @text-primary;
|
||
font-family: 'DINAlternate-Bold', sans-serif;
|
||
line-height: 1;
|
||
}
|
||
|
||
.metric-unit {
|
||
font-size: 20rpx;
|
||
color: @text-light;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chart-card {
|
||
background: @bg-white;
|
||
border-radius: @border-radius;
|
||
padding: 24rpx;
|
||
box-shadow: @shadow;
|
||
margin-bottom: 24rpx;
|
||
|
||
.chart-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
|
||
.chart-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: @text-primary;
|
||
}
|
||
|
||
.chart-subtitle {
|
||
font-size: 22rpx;
|
||
color: @text-light;
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
|
||
.chart-content {
|
||
.pie-chart-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.pie-legend {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
margin-top: 16rpx;
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.legend-color {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 2rpx;
|
||
}
|
||
|
||
.legend-name {
|
||
font-size: 22rpx;
|
||
color: @text-secondary;
|
||
}
|
||
|
||
.legend-value {
|
||
font-size: 22rpx;
|
||
color: @text-primary;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.line-chart-container {
|
||
.chart-legend {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 32rpx;
|
||
margin-top: 16rpx;
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.legend-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
|
||
&.margin {
|
||
background: #52C41A;
|
||
}
|
||
|
||
&.revenue {
|
||
background: #576EFF;
|
||
}
|
||
}
|
||
|
||
.legend-text {
|
||
font-size: 22rpx;
|
||
color: @text-secondary;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bar-chart-container {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.ranking-list {
|
||
.ranking-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16rpx;
|
||
margin-bottom: 12rpx;
|
||
background: #fafafa;
|
||
border-radius: 12rpx;
|
||
border: 1rpx solid #f0f0f0;
|
||
|
||
.ranking-medal {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 16rpx;
|
||
font-size: 24rpx;
|
||
|
||
&.gold {
|
||
background: linear-gradient(135deg, @gold, #FFA500);
|
||
}
|
||
|
||
&.silver {
|
||
background: linear-gradient(135deg, @silver, #D3D3D3);
|
||
}
|
||
|
||
&.bronze {
|
||
background: linear-gradient(135deg, @bronze, #D2691E);
|
||
}
|
||
|
||
&:not(.gold):not(.silver):not(.bronze) {
|
||
background: #f0f0f0;
|
||
color: @text-secondary;
|
||
}
|
||
|
||
.medal-text {
|
||
font-size: 20rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.ranking-content {
|
||
flex: 1;
|
||
|
||
.product-name {
|
||
font-size: 28rpx;
|
||
color: @text-primary;
|
||
font-weight: 500;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.product-category {
|
||
font-size: 22rpx;
|
||
color: @text-light;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.ranking-metrics {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
.metric-item {
|
||
text-align: center;
|
||
|
||
.metric-label {
|
||
font-size: 20rpx;
|
||
color: @text-secondary;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 22rpx;
|
||
color: @text-primary;
|
||
font-weight: 600;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.metric-divider {
|
||
width: 1rpx;
|
||
height: 40rpx;
|
||
background: #e0e0e0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.low-margin-list {
|
||
.low-margin-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16rpx;
|
||
margin-bottom: 12rpx;
|
||
border-radius: 12rpx;
|
||
border: 1rpx solid #f0f0f0;
|
||
|
||
&.severe {
|
||
background: rgba(255, 77, 79, 0.05);
|
||
border-color: rgba(255, 77, 79, 0.2);
|
||
}
|
||
|
||
&.high {
|
||
background: rgba(255, 122, 69, 0.05);
|
||
border-color: rgba(255, 122, 69, 0.2);
|
||
}
|
||
|
||
&.medium {
|
||
background: rgba(250, 173, 20, 0.05);
|
||
border-color: rgba(250, 173, 20, 0.2);
|
||
}
|
||
|
||
&.low {
|
||
background: rgba(82, 196, 26, 0.05);
|
||
border-color: rgba(82, 196, 26, 0.2);
|
||
}
|
||
|
||
.margin-icon {
|
||
font-size: 32rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.margin-content {
|
||
flex: 1;
|
||
|
||
.product-name {
|
||
font-size: 28rpx;
|
||
color: @text-primary;
|
||
font-weight: 500;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.product-info {
|
||
font-size: 22rpx;
|
||
color: @text-light;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.margin-data {
|
||
text-align: right;
|
||
margin-right: 16rpx;
|
||
|
||
.margin-rate {
|
||
font-size: 24rpx;
|
||
color: @error-color;
|
||
font-weight: 600;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.margin-amount {
|
||
font-size: 22rpx;
|
||
color: @text-secondary;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.margin-action {
|
||
.action-btn {
|
||
font-size: 22rpx;
|
||
color: @primary-color;
|
||
padding: 8rpx 16rpx;
|
||
border: 1rpx solid @primary-color;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.suggestions {
|
||
.suggestion-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 16rpx;
|
||
margin-bottom: 12rpx;
|
||
background: #fafafa;
|
||
border-radius: 12rpx;
|
||
|
||
.suggestion-icon {
|
||
font-size: 32rpx;
|
||
margin-right: 16rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.suggestion-content {
|
||
flex: 1;
|
||
|
||
.suggestion-title {
|
||
font-size: 26rpx;
|
||
color: @text-primary;
|
||
font-weight: 500;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.suggestion-desc {
|
||
font-size: 22rpx;
|
||
color: @text-secondary;
|
||
line-height: 1.5;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |