zhangchao/Road_roller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 添加今日作业概览

Browse Source
This commit is contained in:
Ironsp
2026-08-31 17:58:37 +08:00
parent f95b929968
commit f11cfe1bda
2 changed files with 59 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/home/overview.vue
View File

@@ -54,19 +54,21 @@
}
.card-title {
font-size: 15px;
font-size: 20px;
font-weight: bold;
color: #333333;
color: #ffffff;
}
.card-date {
font-size: 12px;
color: #999999;
font-size: 20px;
font-weight: bold;
color: #ffffff;
}
.overview-card {
margin-top: 12px;
background: linear-gradient(135deg, #4685FD 0%, #6BA3FF 100%);
height: 150px;
}
.overview-card .card-header {
@@ -92,13 +94,14 @@
}
.stat-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
font-weight: bold;
color: #ffffff;
margin-bottom: 8px;
}
.stat-value {
font-size: 28px;
font-size: 20px;
font-weight: bold;
color: #ffffff;
}

107
src/components/home/progress.vue
View File

@@ -1,3 +1,9 @@
<script setup>
import { ref } from 'vue'
const current = ref(25)
</script>
<template>
<view class="card">
<view class="card-header">
@@ -11,31 +17,38 @@
<view class="card-body">
<view class="progress-content">
<view class="progress-circle">
<text class="progress-percent">
<!-- <text class="progress-percent">
25%
</text>
<text class="progress-label">
jobs
</text>
已完成
</text> -->
<wd-circle v-model="current" :text="`${current}%`" :size="100" />
</view>
<view class="progress-details">
<view class="progress-item">
<text class="progress-name">
压实合格率
</text>
<text class="progress-value">
95.65%
</text>
<view class="progress-row">
<text class="progress-name">
压实合格率
</text>
<text class="progress-value">
95.65%
</text>
</view>
<wd-progress :percentage="50" hide-text />
</view>
<view class="progress-item">
<text class="progress-name">
完成进度
</text>
<text class="progress-value">
66%
</text>
<view class="progress-row">
<text class="progress-name">
完成进度
</text>
<text class="progress-value">
66%
</text>
</view>
<wd-progress :percentage="50" hide-text />
</view>
<view class="progress-item">
<view class="progress-item progress-item-inline">
<text class="progress-name">
总面积
</text>
@@ -43,7 +56,7 @@
1164m²
</text>
</view>
<view class="progress-item">
<view class="progress-item progress-item-inline">
<text class="progress-name">
已压实面积
</text>
@@ -51,7 +64,7 @@
664m²
</text>
</view>
<view class="progress-item">
<view class="progress-item progress-item-inline">
<text class="progress-name">
未压实面积
</text>
@@ -76,15 +89,16 @@
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
/* justify-content: space-between; */
padding: 12px 16px;
border-bottom: 1px solid #f5f5f5;
}
.card-title {
font-size: 15px;
/* font-size: 15px; */
font-weight: bold;
color: #333333;
margin-right: 12.08rpx;
}
.card-sub {
@@ -99,62 +113,39 @@
.progress-content {
display: flex;
align-items: center;
gap: 16px;
}
.progress-circle {
width: 80px;
height: 80px;
border-radius: 50%;
background: conic-gradient(#4685FD 0% 25%, #f0f0f0 25% 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.progress-circle::before {
content: '';
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #ffffff;
}
.progress-percent {
font-size: 18px;
font-weight: bold;
color: #4685FD;
z-index: 1;
}
.progress-label {
font-size: 10px;
color: #999999;
z-index: 1;
gap: 50px;
}
.progress-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
gap: 40rpx;
}
.progress-item {
display: flex;
flex-direction: column;
/* gap: 8px; */
}
.progress-item-inline {
flex-direction: row;
justify-content: space-between;
}
.progress-row {
display: flex;
justify-content: space-between;
}
.progress-name {
font-size: 12px;
/* font-size: 12px; */
color: #666666;
}
.progress-value {
font-size: 12px;
/* font-size: 12px; */
font-weight: bold;
color: #333333;
}