antissoft / lvqianmeiye_ERP

Commit 762545faf931774c28152ade0dcb4c5327b1889b

Authored by “wangming”
1 parent f218a54a

style: 优化个人中心业绩数据展示样式 

- 优化业绩数据卡片布局，使用玻璃拟态效果
- 改进开单金额、消耗金额等数据展示样式
- 添加背景图标装饰，提升视觉效果
- 优化科技老师业绩数据展示布局
Inline Side-by-side
Showing 2 changed files with 213 additions and 44 deletions
绿纤uni-app/package.json
  View file @762545f
1 { 1 {
2 "dependencies": { 2 "dependencies": {
3 "@qiun/ucharts": "^2.5.0-20230101", 3 "@qiun/ucharts": "^2.5.0-20230101",
4 - "html2canvas": "^1.4.1" 4 + "html2canvas": "^1.4.1",
  5 + "ucharts": "^0.0.0"
5 } 6 }
6 } 7 }
绿纤uni-app/pages/me/me.vue
  View file @762545f
@@ -42,64 +42,97 @@ @@ -42,64 +42,97 @@
42 <!-- <view class="warpboxs-small-title"> 42 <!-- <view class="warpboxs-small-title">
43 <view><text class="warpboxs-small-title-line"></text>业绩数据</view> 43 <view><text class="warpboxs-small-title-line"></text>业绩数据</view>
44 </view> --> 44 </view> -->
45 - <view class="performance-layout" v-if="newuserInfo.gw != '科技老师'">  
46 - <!-- 左侧列 -->  
47 - <view class="performance-left">  
48 - <view class="performance-text-item">  
49 - <view class="performance-text-label">开单金额</view>  
50 - <view class="performance-text-value">¥{{ (performanceData.BillingAmount || 0).toFixed(2) }}</view> 45 +<view class="performance-grid" v-if="newuserInfo.gw != '科技老师'">
  46 + <!-- 左侧：开单金额 - 正方形布局 -->
  47 + <view class="glass-card billing-card">
  48 + <view class="billing-main">
  49 + <view class="card-label">开单金额</view>
  50 + <view class="billing-value">¥{{ (performanceData.BillingAmount || 0).toFixed(2) }}</view>
  51 + <view class="refund-value">退卡：¥{{ (performanceData.RefundAmount || 0).toFixed(2) }}</view>
51 </view> 52 </view>
52 - <view class="performance-text-item">  
53 - <view class="performance-text-label">退卡金额</view>  
54 - <view class="performance-text-value">¥{{ (performanceData.RefundAmount || 0).toFixed(2) }}</view>  
55 - </view>  
56 - <view class="performance-radio-group">  
57 - <view class="performance-radio-item">  
58 - <view class="radio-value">{{ performanceData.HeadCount || 0 }}</view>  
59 - <text class="radio-label">人头</text> 53 +
  54 + <view class="billing-footer">
  55 + <view class="count-item">
  56 + <u-icon name="account-fill" size="20" color="#666"></u-icon>
  57 + <text class="count-text">{{ performanceData.HeadCount || 0 }}人头</text>
60 </view> 58 </view>
61 - <view class="performance-radio-item">  
62 - <view class="radio-value">{{ performanceData.PersonCount || 0 }}</view>  
63 - <text class="radio-label">人次</text> 59 + <view class="count-item">
  60 + <u-icon name="man-add-fill" size="20" color="#666"></u-icon>
  61 + <text class="count-text">{{ performanceData.PersonCount || 0 }}人次</text>
64 </view> 62 </view>
65 </view> 63 </view>
66 </view> 64 </view>
67 - <!-- 右侧列 -->  
68 - <view class="performance-right">  
69 - <view class="performance-box performance-box-1">  
70 - <view class="performance-box-label">消耗金额</view>  
71 - <view class="performance-box-value">¥{{ (performanceData.ConsumeAmount || 0).toFixed(2) }}</view> 65 +
  66 + <!-- 右侧：其他数据 - 垂直排列 -->
  67 + <view class="right-column">
  68 + <!-- 消耗金额 -->
  69 + <view class="glass-card stat-card">
  70 + <view class="stat-content">
  71 + <view class="card-label">消耗金额</view>
  72 + <view class="stat-value">¥{{ (performanceData.ConsumeAmount || 0).toFixed(2) }}</view>
  73 + </view>
  74 + <view class="bg-icon">
  75 + <u-icon name="red-packet-fill" size="48" color="#409EFF"></u-icon>
  76 + </view>
72 </view> 77 </view>
73 - <view class="performance-box performance-box-2">  
74 - <view class="performance-box-label">手工费</view>  
75 - <view class="performance-box-value">¥{{ performanceData.LaborCost || 0 }}</view> 78 +
  79 + <!-- 手工费 -->
  80 + <view class="glass-card stat-card">
  81 + <view class="stat-content">
  82 + <view class="card-label">手工费</view>
  83 + <view class="stat-value">¥{{ performanceData.LaborCost || 0 }}</view>
  84 + </view>
  85 + <view class="bg-icon">
  86 + <u-icon name="grid-fill" size="48" color="#ff9800"></u-icon>
  87 + </view>
76 </view> 88 </view>
77 - <view class="performance-box performance-box-3">  
78 - <view class="performance-box-label">项目数</view>  
79 - <view class="performance-box-value">{{ performanceData.ConsumeProjectCount || 0 }}</view> 89 +
  90 + <!-- 项目数 -->
  91 + <view class="glass-card stat-card">
  92 + <view class="stat-content">
  93 + <view class="card-label">项目数</view>
  94 + <view class="stat-value">{{ performanceData.ConsumeProjectCount || 0 }}</view>
  95 + </view>
  96 + <view class="bg-icon">
  97 + <u-icon name="list-dot" size="48" color="#43a047"></u-icon>
  98 + </view>
80 </view> 99 </view>
81 </view> 100 </view>
82 </view> 101 </view>
83 <!-- 科技老师显示 --> 102 <!-- 科技老师显示 -->
84 - <view class="performance-card" v-else>  
85 - <view class="performance-row">  
86 - <view class="performance-item performance-item-1">  
87 - <view class="performance-value">¥{{ (performanceData.OrderAchievement || 0).toFixed(2) }}</view>  
88 - <view class="performance-label">开卡业绩</view> 103 + <view class="performance-grid" v-else>
  104 + <view class="glass-card billing-card">
  105 + <view class="billing-main">
  106 + <view class="card-label">开卡业绩</view>
  107 + <view class="billing-value">¥{{ (performanceData.OrderAchievement || 0).toFixed(2) }}</view>
  108 + <!-- <view class="refund-value">退卡：¥0.00</view> -->
89 </view> 109 </view>
90 - <view class="performance-item performance-item-2">  
91 - <view class="performance-value">¥{{ (performanceData.ConsumeAchievement || 0).toFixed(2) }}</view>  
92 - <view class="performance-label">消耗业绩</view> 110 + <view class="billing-footer">
  111 + <view class="count-item">
  112 + <text class="count-text">项目数 {{ (performanceData.ConsumeProjectCount || 0).toFixed(0) }}</text>
  113 + </view>
93 </view> 114 </view>
94 </view> 115 </view>
95 - <view class="performance-row">  
96 - <view class="performance-item performance-item-3">  
97 - <view class="performance-value">{{ (performanceData.ConsumeProjectCount || 0).toFixed(2) }}</view>  
98 - <view class="performance-label">项目数</view> 116 +
  117 + <view class="right-column">
  118 + <view class="glass-card stat-card">
  119 + <view class="stat-content">
  120 + <view class="card-label">消耗业绩</view>
  121 + <view class="stat-value">¥{{ (performanceData.ConsumeAchievement || 0).toFixed(2) }}</view>
  122 + </view>
  123 + <view class="bg-icon">
  124 + <u-icon name="red-packet-fill" size="48" color="#409EFF"></u-icon>
  125 + </view>
99 </view> 126 </view>
100 - <view class="performance-item performance-item-4">  
101 - <view class="performance-value">¥{{ performanceData.ConsumeLaborCost || 0 }}</view>  
102 - <view class="performance-label">手工</view> 127 +
  128 + <view class="glass-card stat-card">
  129 + <view class="stat-content">
  130 + <view class="card-label">手工</view>
  131 + <view class="stat-value">¥{{ performanceData.ConsumeLaborCost || 0 }}</view>
  132 + </view>
  133 + <view class="bg-icon">
  134 + <u-icon name="grid-fill" size="48" color="#ff9800"></u-icon>
  135 + </view>
103 </view> 136 </view>
104 </view> 137 </view>
105 </view> 138 </view>
@@ -1558,4 +1591,139 @@ @@ -1558,4 +1591,139 @@
1558 transform: scale(0.98); 1591 transform: scale(0.98);
1559 box-shadow: 0 1rpx 4rpx rgba(67, 160, 71, 0.3); 1592 box-shadow: 0 1rpx 4rpx rgba(67, 160, 71, 0.3);
1560 } 1593 }
  1594 +
  1595 +/* 优化后的业绩数据样式 */
  1596 +.performance-grid {
  1597 + display: flex;
  1598 + gap: 20rpx;
  1599 + margin-bottom: 24rpx;
  1600 + margin-top: 20rpx;
  1601 +}
  1602 +
  1603 +.glass-card {
  1604 + background: rgba(255, 255, 255, 0.65);
  1605 + backdrop-filter: blur(20px) saturate(180%);
  1606 + -webkit-backdrop-filter: blur(20px) saturate(180%);
  1607 + border-radius: 20rpx;
  1608 + border: 1px solid rgba(255, 255, 255, 0.8);
  1609 + box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
  1610 + transition: all 0.3s ease;
  1611 + position: relative;
  1612 + overflow: hidden;
  1613 +}
  1614 +
  1615 +.glass-card:active {
  1616 + transform: scale(0.98);
  1617 + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  1618 +}
  1619 +
  1620 +
  1621 +.billing-card {
  1622 + flex: 1;
  1623 + /* min-width: set dynamically via flex, but we want aspect ratio */
  1624 + aspect-ratio: 1 / 1;
  1625 + display: flex;
  1626 + flex-direction: column;
  1627 + justify-content: center; /* Center content vertically */
  1628 + padding: 24rpx;
  1629 + background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 100%);
  1630 +}
  1631 +
  1632 +.billing-main {
  1633 + display: flex;
  1634 + flex-direction: column;
  1635 + align-items: center;
  1636 + justify-content: center;
  1637 + flex: 1;
  1638 + width: 100%;
  1639 +}
  1640 +
  1641 +.billing-card .card-label {
  1642 + font-size: 36rpx; /* ~18px */
  1643 + font-weight: bold;
  1644 + color: #333333;
  1645 + margin-bottom: 16rpx;
  1646 +}
  1647 +
  1648 +.billing-value {
  1649 + font-size: 56rpx; /* Increased slightly for emphasis */
  1650 + font-weight: bold;
  1651 + color: #1f2937;
  1652 + margin-bottom: 12rpx;
  1653 + line-height: 1.1;
  1654 + text-align: center;
  1655 +}
  1656 +
  1657 +.refund-value {
  1658 + font-size: 26rpx; /* ~13px */
  1659 + color: #999999;
  1660 + font-style: italic;
  1661 + margin-bottom: 20rpx;
  1662 +}
  1663 +
  1664 +.billing-footer {
  1665 + display: flex;
  1666 + justify-content: space-around;
  1667 + width: 100%;
  1668 + padding-top: 20rpx;
  1669 + border-top: 1px solid rgba(0,0,0,0.05);
  1670 + margin-top: auto; /* Push to bottom */
  1671 +}
  1672 +
  1673 +.count-item {
  1674 + display: flex;
  1675 + align-items: center;
  1676 + gap: 6rpx;
  1677 +}
  1678 +
  1679 +.count-text {
  1680 + font-size: 30rpx; /* ~15px */
  1681 + color: #666666;
  1682 + line-height: 1.5;
  1683 +}
  1684 +
  1685 +.right-column {
  1686 + display: flex;
  1687 + flex-direction: column;
  1688 + justify-content: space-between; /* Distribute cards to match height if needed */
  1689 + gap: 20rpx;
  1690 + width: 48%; /* Slightly wider to balance */
  1691 +}
  1692 +
  1693 +.stat-card {
  1694 + padding: 24rpx 30rpx;
  1695 + display: flex;
  1696 + align-items: center;
  1697 + justify-content: space-between;
  1698 + position: relative;
  1699 + height: 100%;
  1700 + min-height: 140rpx;
  1701 +}
  1702 +
  1703 +.stat-content {
  1704 + position: relative;
  1705 + z-index: 2;
  1706 +}
  1707 +
  1708 +.stat-card .card-label {
  1709 + font-size: 26rpx;
  1710 + color: #666;
  1711 + margin-bottom: 8rpx;
  1712 +}
  1713 +
  1714 +.stat-value {
  1715 + font-size: 36rpx;
  1716 + font-weight: bold;
  1717 + color: #1f2937;
  1718 +}
  1719 +
  1720 +.bg-icon {
  1721 + position: absolute;
  1722 + right: 20rpx;
  1723 + top: 50%;
  1724 + transform: translateY(-50%);
  1725 + opacity: 0.2;
  1726 + z-index: 1;
  1727 + pointer-events: none;
  1728 +}
1561 </style> 1729 </style>