Skip to content

Z
zc-qiyewx-app
Commit 1cb744ba authored by 杨勇飞's avatar 杨勇飞
Browse files
Options

V1

parent 60f8bf21
Show whitespace changes
Inline Side-by-side
Showing with 60 additions and 33 deletions
pages/index/index.vue
View file @ 1cb744ba
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<!-- 左侧环状进度 --> <!-- 左侧环状进度 -->
<view class="progress-circle"> <view class="progress-circle">
<view class="circle-wrapper" :style="{ <view class="circle-wrapper" :style="{
background: `conic-gradient(#FF4B4B 0% ${currentData.overview.submitRate}%, #F5F5F5 ${currentData.overview.submitRate}% 100%)` background: `conic-gradient(#FF4D4F 0% ${currentData.overview.submitRate}%, #F5F5F5 ${currentData.overview.submitRate}% 100%)`
}"> }">
<view class="circle-text"> <view class="circle-text">
<text class="percentage">{{currentData.overview.submitRate}}</text> <text class="percentage">{{currentData.overview.submitRate}}</text>
...@@ -28,22 +28,30 @@ ...@@ -28,22 +28,30 @@
<view class="statistics"> <view class="statistics">
<view class="stat-row"> <view class="stat-row">
<view class="stat-item"> <view class="stat-item">
<view class="stat-block light-green">
<text class="number">{{currentData.overview.stats.projectCount}}</text> <text class="number">{{currentData.overview.stats.projectCount}}</text>
<text class="rate">项目</text> <text class="rate">项目</text>
</view> </view>
</view>
<view class="stat-item"> <view class="stat-item">
<view class="stat-block light-orange">
<text class="number">{{currentData.overview.stats.orderCount}}</text> <text class="number">{{currentData.overview.stats.orderCount}}</text>
<text class="rate">单量</text> <text class="rate">单量</text>
</view> </view>
</view> </view>
</view>
<view class="stat-row"> <view class="stat-row">
<view class="stat-item"> <view class="stat-item">
<view class="stat-block green">
<text class="number">{{currentData.overview.stats.volumeCount}}</text> <text class="number">{{currentData.overview.stats.volumeCount}}</text>
<text class="rate">方量</text> <text class="rate">方量m³</text>
</view>
</view> </view>
<view class="stat-item"> <view class="stat-item">
<view class="stat-block orange">
<text class="number">{{currentData.overview.stats.weightCount}}</text> <text class="number">{{currentData.overview.stats.weightCount}}</text>
<text class="rate">重量</text> <text class="rate">重量t</text>
</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -79,14 +87,15 @@ ...@@ -79,14 +87,15 @@
</view> </view>
</view> </view>
<view class="progress-bar"> <view class="progress-bar">
<view class="progress-bar" style="position: relative; height: 4px; background: #f0f0f0; border-radius: 2px; overflow: hidden;"> <view class="progress-bar" style="position: relative; height: 4px;width: 100%; background: #52C41A; border-radius: 2px; overflow: hidden;">
<view class="progress" :style="{ <view class="progress" :style="{
backgroundColor: '#52C41A', backgroundColor: '#FF4D4F',
width: currentData.finance.receivable.profitRate + '%', opacity:0.9,
width: 100-currentData.finance.receivable.profitRate + '%',
position: 'absolute', position: 'absolute',
height: '100%', height: '100%',
left: 0, left: 0,
top: 0 top: '1px'
}"></view> }"></view>
</view> </view>
</view> </view>
...@@ -321,13 +330,13 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -321,13 +330,13 @@ import { uniIcons } from '@dcloudio/uni-ui'
finance: { finance: {
receivable: { receivable: {
total: 488950, total: 488950,
profit: 557580, profit: 58674,
profitRate: 87.69 profitRate: 12.2
}, },
payable: { payable: {
total: 4710, total: 430276,
cash: 2305, cash: 130276,
monthly: 2405 monthly: 300000
} }
}, },
chart: { chart: {
...@@ -554,7 +563,6 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -554,7 +563,6 @@ import { uniIcons } from '@dcloudio/uni-ui'
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 15px;
background-color: #F5F7FA; background-color: #F5F7FA;
min-height: 100vh; min-height: 100vh;
...@@ -616,6 +624,7 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -616,6 +624,7 @@ import { uniIcons } from '@dcloudio/uni-ui'
.overview-content { .overview-content {
display: flex; display: flex;
width: 100%;
align-items: center; align-items: center;
padding: 0; padding: 0;
...@@ -636,10 +645,10 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -636,10 +645,10 @@ import { uniIcons } from '@dcloudio/uni-ui'
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 8px; top: 10px;
left: 8px; left: 10px;
right: 8px; right: 10px;
bottom: 8px; bottom: 10px;
background: #fff; background: #fff;
border-radius: 50%; border-radius: 50%;
z-index: 1; z-index: 1;
...@@ -647,13 +656,17 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -647,13 +656,17 @@ import { uniIcons } from '@dcloudio/uni-ui'
} }
.circle-text { .circle-text {
display: flex;
flex-direction: column;
position: relative; position: relative;
z-index: 2; z-index: 2;
text-align: center; text-align: center;
align-items: center;
.percentage { .percentage {
font-size: 28px; font-size: 28px;
color: #333; color: #333;
line-height: 1;
margin-bottom: 4px; margin-bottom: 4px;
&::after { &::after {
content: '%'; content: '%';
...@@ -664,10 +677,12 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -664,10 +677,12 @@ import { uniIcons } from '@dcloudio/uni-ui'
.label { .label {
color: #666; color: #666;
margin-bottom: 4px; font-size: 12px;
margin: 4px 0;
} }
.count { .count {
font-size: 12px;
color: #666; color: #666;
} }
} }
...@@ -678,22 +693,31 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -678,22 +693,31 @@ import { uniIcons } from '@dcloudio/uni-ui'
.stat-row { .stat-row {
display: flex; display: flex;
justify-content: space-around; gap: 12px;
margin-bottom: 20px; margin-bottom: 15px;
.stat-item { .stat-item {
flex: 1;
.stat-block {
background-color: #f6ffed;
border-radius: 4px;
padding: 8px 12px;
display: block;
text-align: center; text-align: center;
&.light-green { background-color: rgba(82, 196, 26, 0.1); }
&.light-orange { background-color: rgba(255, 169, 64, 0.1); }
&.green { background-color: rgba(0, 200, 180, 0.1); }
&.orange { background-color: rgba(255, 148, 64, 0.1); }
}
.number { .number {
display: block; display: block;
font-size: 24px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #19c1b4 !important; color: #333;
margin-bottom: 4px; margin-bottom: 4px;
&:nth-child(2n) {
color: #19c1b4 !important;
}
} }
.rate { .rate {
...@@ -771,8 +795,11 @@ import { uniIcons } from '@dcloudio/uni-ui' ...@@ -771,8 +795,11 @@ import { uniIcons } from '@dcloudio/uni-ui'
} }
.extra-info { .extra-info {
display: flex;
flex-direction: column;
text-align: right; text-align: right;
.info-row { .info-row {
margin-bottom: 4px; margin-bottom: 4px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment