851 lines
22 KiB
Vue
851 lines
22 KiB
Vue
<template>
|
||
<view class="product-report">
|
||
<!-- 报表标题 -->
|
||
<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 sales"></view>
|
||
<text class="metric-title">总销量</text>
|
||
<view class="metric-value-container">
|
||
<text class="metric-value">{{ formatNumber(totalSales) }}</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(totalRevenue) }}</text>
|
||
<text class="metric-unit">元</text>
|
||
</view>
|
||
</view>
|
||
<view class="metric-card">
|
||
<view class="metric-icon types"></view>
|
||
<text class="metric-title">商品类型</text>
|
||
<view class="metric-value-container">
|
||
<text class="metric-value">{{ productTypes }}</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="productTypePieChart" />
|
||
<view class="pie-legend">
|
||
<view class="legend-item" v-for="(item, index) in productTypeData" :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">TOP 5 热销商品</text>
|
||
</view>
|
||
<view class="chart-content">
|
||
<view class="bar-chart-container">
|
||
<QiunDataCharts type="column" :opts="barChartOpts" :chartData="barChartData" :animation="false"
|
||
:canvas2d="true" :inScrollView="true" tooltipFormat="SalesRankingOfProducts" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 销售趋势图 -->
|
||
<view class="chart-card">
|
||
<view class="chart-header">
|
||
<text class="chart-title">商品销售趋势</text>
|
||
<text class="chart-subtitle">最近30天销量与销售额变化</text>
|
||
</view>
|
||
<view class="chart-content">
|
||
<view class="line-chart-container">
|
||
<QiunDataCharts type="line" :opts="lineChartOpts" :chartData="lineChartData" :canvas2d="true"
|
||
:inScrollView="true" canvasId="productTrendChart" :pageScrollTop="pageScrollTop" />
|
||
<view class="chart-legend">
|
||
<view class="legend-item">
|
||
<view class="legend-dot sales"></view>
|
||
<text class="legend-text">销量</text>
|
||
</view>
|
||
<view class="legend-item">
|
||
<view class="legend-dot revenue"></view>
|
||
<text class="legend-text">销售额(÷100)</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品详细数据 -->
|
||
<view class="chart-card">
|
||
<view class="chart-header">
|
||
<text class="chart-title">商品详细数据</text>
|
||
<view class="table-actions">
|
||
</view>
|
||
</view>
|
||
<view class="product-cards">
|
||
<view class="product-card" v-for="(item, index) in productList" :key="index">
|
||
<view class="product-header">
|
||
<view class="product-type-tag" :style="{
|
||
backgroundColor: item.type === '保健品' ? '#576EFF' :
|
||
item.type === '茶叶' ? '#52C41A' :
|
||
item.type === '食品' ? '#FAAD14' :
|
||
item.type === '饮品' ? '#FF7875' :
|
||
item.type === '工艺品' ? '#B37FEB' : '#666666'
|
||
}">
|
||
{{ item.type }}
|
||
</view>
|
||
<text class="product-code">{{ item.code }}</text>
|
||
</view>
|
||
<view class="product-body">
|
||
<text class="product-name">{{ item.name }}</text>
|
||
<view class="product-metrics">
|
||
<view class="metric-item">
|
||
<text class="metric-label">销量</text>
|
||
<text class="metric-value">{{ formatNumber(item.sales) }}</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>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||
import request from "@/util/index.js";
|
||
|
||
export default {
|
||
components: {
|
||
QiunDataCharts
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
analysisPeriod: '2024年10月',
|
||
totalSales: 15678,
|
||
totalRevenue: 2345678,
|
||
productTypes: 12,
|
||
|
||
// 商品类型分布数据
|
||
productTypeData: [
|
||
{ name: '保健品', value: 35, percentage: 35, color: '#576EFF' },
|
||
{ name: '茶叶', value: 28, percentage: 28, color: '#52C41A' },
|
||
{ name: '食品', value: 20, percentage: 20, color: '#FAAD14' },
|
||
{ name: '饮品', value: 12, percentage: 12, color: '#FF7875' },
|
||
{ name: '其他', value: 5, percentage: 5, color: '#B37FEB' }
|
||
],
|
||
|
||
// 销量排行榜数据
|
||
salesRankingData: [],
|
||
|
||
// 销售趋势数据
|
||
trendData: {
|
||
categories: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
|
||
salesData: [1200, 1400, 1600, 1800, 2000, 2200, 2400],
|
||
revenueData: [100, 200, 300, 400, 500, 600, 700]
|
||
},
|
||
|
||
productList: [
|
||
{ type: '保健品', code: 'YN001', name: '云南白药牙膏', sales: 3456, revenue: 456789 },
|
||
{ type: '茶叶', code: 'PU002', name: '普洱茶饼', sales: 2890, revenue: 567890 },
|
||
{ type: '食品', code: 'FH003', name: '鲜花饼', sales: 2345, revenue: 345678 },
|
||
{ type: '饮品', code: 'KF004', name: '云南咖啡', sales: 1876, revenue: 234567 },
|
||
{ type: '保健品', code: 'SQ005', name: '三七粉', sales: 1567, revenue: 456789 },
|
||
{ type: '工艺品', code: 'YS006', name: '玉石手镯', sales: 1234, revenue: 345678 }
|
||
],
|
||
pageScrollTop: 0
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
// 饼图数据
|
||
pieChartData() {
|
||
return {
|
||
series: [{
|
||
data: this.productTypeData.map(item => ({
|
||
name: item.name,
|
||
value: item.value
|
||
}))
|
||
}]
|
||
}
|
||
},
|
||
|
||
// 饼图配置
|
||
pieChartOpts() {
|
||
return {
|
||
color: this.productTypeData.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'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
// 柱状图数据
|
||
barChartData() {
|
||
return {
|
||
categories: this.salesRankingData.map(item =>
|
||
this.formatXAxisLabel(item.name)
|
||
),
|
||
series: [{
|
||
name: '销量',
|
||
data: this.salesRankingData.map(item => item.sales)
|
||
}]
|
||
}
|
||
},
|
||
|
||
// 柱状图配置
|
||
barChartOpts() {
|
||
// 计算最大值并生成6个刻度，每个刻度都是100的倍数
|
||
const maxSales = Math.max(...this.salesRankingData.map(item => item.sales));
|
||
const roundedMax = Math.ceil(maxSales / 100) * 100; // 向上取整到100的倍数
|
||
const yAxisInterval = Math.ceil(roundedMax / 5); // 分成5个间隔，总共6个刻度
|
||
const finalInterval = Math.ceil(yAxisInterval / 100) * 100; // 确保间隔是100的倍数
|
||
const finalMax = finalInterval * 5; // 最终最大值
|
||
|
||
// 生成Y轴刻度数据
|
||
const yAxisData = [];
|
||
for (let i = 0; i <= 5; i++) {
|
||
yAxisData.push(i * finalInterval);
|
||
}
|
||
|
||
return {
|
||
color: ['#576EFF'],
|
||
legend: {
|
||
show: true,
|
||
color: ['#576EFF']
|
||
},
|
||
padding: [20, 15, 35, 15], // 增加底部padding给X轴标签留空间
|
||
dataLabel: false,
|
||
enableScroll: false,
|
||
xAxis: {
|
||
itemCount: 5, // 减少显示的标签数量
|
||
scrollAlign: 'right',
|
||
scrollColor: '#576EFF',
|
||
scrollBackgroundColor: 'rgba(87, 110, 255, 0.1)',
|
||
scrollWidth: 4,
|
||
scrollHeight: 8,
|
||
rotate: 30, // 旋转30度避免重叠
|
||
fontSize: 12, // 适当减小字体
|
||
margin: 15, // 增加标签与轴线的距离
|
||
},
|
||
yAxis: {
|
||
gridType: 'dash',
|
||
dashLength: 2,
|
||
data: [{
|
||
min: 0,
|
||
max: finalMax,
|
||
data: yAxisData
|
||
}]
|
||
},
|
||
extra: {
|
||
column: {
|
||
type: 'group',
|
||
width: 12,
|
||
activeBgColor: '#000000',
|
||
activeBgOpacity: 0.08,
|
||
barBorderCircle: true,
|
||
linearType: 'none',
|
||
linearOpacity: 0,
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
// 折线图数据
|
||
lineChartData() {
|
||
return {
|
||
categories: this.trendData.categories,
|
||
series: [
|
||
{
|
||
name: '销量',
|
||
data: this.trendData.salesData
|
||
},
|
||
{
|
||
name: '销售额(百元)',
|
||
data: this.trendData.revenueData.map(v => v / 100)
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
// 折线图配置
|
||
lineChartOpts() {
|
||
return {
|
||
color: ['#576EFF', '#52C41A'],
|
||
padding: [15, 15, 15, 15],
|
||
dataLabel: false,
|
||
legend: {
|
||
show: false
|
||
},
|
||
xAxis: {
|
||
disableGrid: true,
|
||
itemCount: 7
|
||
},
|
||
yAxis: {
|
||
gridType: 'dash',
|
||
dashLength: 2,
|
||
data: [{
|
||
min: 0
|
||
}]
|
||
},
|
||
extra: {
|
||
line: {
|
||
type: 'curve',
|
||
width: 3,
|
||
activeType: 'hollow'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
onReady() {
|
||
// 获取整个组件的数据
|
||
this.handleGetAllData()
|
||
},
|
||
methods: {
|
||
SalesRankingOfProducts() {
|
||
console.log('1111');
|
||
return item.name + ':' + item.data + '件'
|
||
},
|
||
// 获取整个组件的数据
|
||
handleGetAllData() {
|
||
// 拿到商品销售排行榜
|
||
this.handleGetTopSalesRank()
|
||
},
|
||
// 拿到商品销售排行榜
|
||
async handleGetTopSalesRank() {
|
||
const req = {
|
||
action_type: "getCommoditySaleSort",
|
||
province_code: 5564,
|
||
rowNum: 5
|
||
}
|
||
const data = await request.$cloudUrlGet(req);
|
||
console.log('datadatadatadatadata', data);
|
||
let list = data.COMMODITYSALE_DESC
|
||
let res = []
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
res.push({
|
||
name: item.COMMODITY_NAME,
|
||
sales: item.SELLCOUNT,
|
||
})
|
||
})
|
||
}
|
||
this.salesRankingData = res
|
||
},
|
||
|
||
// 格式化X轴标签文字
|
||
formatXAxisLabel(name) {
|
||
if (!name) return '';
|
||
|
||
// 获取屏幕宽度决定显示长度
|
||
const screenWidth = this.getScreenWidth();
|
||
let maxLength = 4; // 默认长度
|
||
|
||
if (screenWidth > 750) {
|
||
maxLength = 6; // 大屏显示更长
|
||
} else if (screenWidth < 375) {
|
||
maxLength = 3; // 小屏显示更短
|
||
}
|
||
|
||
// 如果名称超过最大长度，截取并添加省略号
|
||
return name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
|
||
},
|
||
|
||
// 获取屏幕宽度
|
||
getScreenWidth() {
|
||
try {
|
||
return uni.getSystemInfoSync().windowWidth || 375;
|
||
} catch (e) {
|
||
return 375;
|
||
}
|
||
},
|
||
|
||
formatNumber(num) {
|
||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
||
},
|
||
|
||
formatMoney(amount) {
|
||
return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@primary-color: #667eea;
|
||
@secondary-color: #764ba2;
|
||
@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);
|
||
|
||
.product-report {
|
||
.report-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
padding: 0 8rpx;
|
||
|
||
.report-title {
|
||
font-size: 30rpx;
|
||
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;
|
||
|
||
&.sales {
|
||
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, #faad14, #ffc53d);
|
||
|
||
&::after {
|
||
content: '💰';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
&.types {
|
||
background: linear-gradient(135deg, #1890ff, #40a9ff);
|
||
|
||
&::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: 28rpx;
|
||
font-weight: 600;
|
||
color: @text-primary;
|
||
font-family: 'DINAlternate-Bold', sans-serif;
|
||
line-height: 1;
|
||
}
|
||
|
||
.metric-unit {
|
||
font-size: 24rpx;
|
||
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: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.chart-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: @text-primary;
|
||
}
|
||
|
||
.chart-subtitle {
|
||
font-size: 24rpx;
|
||
color: @text-light;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.table-actions {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
|
||
.action-btn {
|
||
font-size: 24rpx;
|
||
color: @primary-color;
|
||
padding: 8rpx 16rpx;
|
||
border: 1rpx solid @primary-color;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chart-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 200rpx;
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||
border-radius: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.placeholder-text {
|
||
font-size: 32rpx;
|
||
color: @text-secondary;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.placeholder-desc {
|
||
font-size: 24rpx;
|
||
color: @text-light;
|
||
}
|
||
}
|
||
|
||
.ranking-list {
|
||
.ranking-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16rpx 0;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.ranking-number {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
color: white;
|
||
background: @text-light;
|
||
margin-right: 16rpx;
|
||
|
||
&.rank-gold {
|
||
background: @gold;
|
||
color: #333;
|
||
}
|
||
|
||
&.rank-silver {
|
||
background: @silver;
|
||
color: #333;
|
||
}
|
||
|
||
&.rank-bronze {
|
||
background: @bronze;
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.ranking-info {
|
||
flex: 1;
|
||
|
||
.product-name {
|
||
font-size: 28rpx;
|
||
color: @text-primary;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.product-code {
|
||
font-size: 24rpx;
|
||
color: @text-light;
|
||
}
|
||
}
|
||
|
||
.ranking-data {
|
||
text-align: right;
|
||
|
||
.sales-number {
|
||
font-size: 24rpx;
|
||
color: @text-primary;
|
||
font-weight: 500;
|
||
display: block;
|
||
}
|
||
|
||
.sales-amount {
|
||
font-size: 22rpx;
|
||
color: @primary-color;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bar-chart-container {
|
||
width: 100%;
|
||
}
|
||
|
||
.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%;
|
||
|
||
&.sales {
|
||
background: #576EFF;
|
||
}
|
||
|
||
&.revenue {
|
||
background: #52C41A;
|
||
}
|
||
}
|
||
|
||
.legend-text {
|
||
font-size: 22rpx;
|
||
color: @text-secondary;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
|
||
.product-card {
|
||
background: #fafafa;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
border: 1rpx solid #f0f0f0;
|
||
|
||
.product-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
.product-type-tag {
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 20rpx;
|
||
color: white;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.product-code {
|
||
font-size: 20rpx;
|
||
color: @text-light;
|
||
font-family: monospace;
|
||
}
|
||
}
|
||
|
||
.product-body {
|
||
.product-name {
|
||
font-size: 24rpx;
|
||
color: @text-primary;
|
||
font-weight: 600;
|
||
margin-bottom: 12rpx;
|
||
display: block;
|
||
}
|
||
|
||
.product-metrics {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.metric-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
.metric-label {
|
||
font-size: 24rpx;
|
||
color: @text-secondary;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 24rpx;
|
||
color: @text-primary;
|
||
font-weight: 600;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.metric-divider {
|
||
width: 1rpx;
|
||
height: 40rpx;
|
||
background: #e0e0e0;
|
||
margin: 0 16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |