From 8fbd6b8d09e70494d920cc0b77812e9643be3196 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 23 八月 2022 17:37:31 +0800
Subject: [PATCH] 2022.8.23
---
component/progress/progress.js | 46 +++++++++++++++++++++++++++++++---------------
1 files changed, 31 insertions(+), 15 deletions(-)
diff --git a/component/progress/progress.js b/component/progress/progress.js
index 6583c70..e72e1c8 100644
--- a/component/progress/progress.js
+++ b/component/progress/progress.js
@@ -12,6 +12,8 @@
*/
data: {
progress_txt: '淇＄敤杈冨樊',
+ progress_txt_color1: '#f1fefc',
+ progress_txt_color2: '#b4f7ec',
count: 0, // 璁剧疆 璁℃暟鍣� 鍒濆涓�0
countTimer: null, // 璁剧疆 瀹氭椂鍣� 鍒濆涓簄ull
x: 100,
@@ -25,17 +27,30 @@
observers: {
'progress': function (progress) {
- if (progress >= 90) {
- this.setData({
- progress_txt: '淇＄敤浼樼'
- })
- } else if (progress >= 60) {
- this.setData({
- progress_txt: '淇＄敤涓�鑸�'
- })
+ if (progress) {
+ if (progress >= 90) {
+ this.setData({
+ progress_txt_color1: '#f2fff7',
+ progress_txt_color2: '#96f3bd',
+ progress_txt: '淇＄敤浼樼'
+ })
+ } else if (progress >= 60) {
+ this.setData({
+ progress_txt_color1: '#f6f2e3',
+ progress_txt_color2: '#f6e59f',
+ progress_txt: '淇＄敤涓�鑸�'
+ })
+ } else {
+ this.setData({
+ progress_txt_color1: '#fff6f6',
+ progress_txt_color2: '#f29696',
+ progress_txt: '淇＄敤杈冨樊'
+ })
+ }
} else {
this.setData({
- progress_txt: '淇＄敤杈冨樊'
+ progress_txt_color1: '#f1fefc',
+ progress_txt_color2: '#b4f7ec',
})
}
this.drawProgressCircle(progress / 100)
@@ -95,7 +110,7 @@
ctx.setStrokeStyle('#76ECD3');
ctx.setFillStyle('#76ECD3')
- for (let i = 0; i <5; i++) {
+ for (let i = 0; i < 5; i++) {
var radian = Math.PI / 4 * i
var x1 = x - Math.sin(radian) * (r - 10)
var y1 = y + Math.cos(radian) * (r - 10)
@@ -114,7 +129,7 @@
var text = i / 4 * 100 + ''
var metrics = ctx.measureText(text)
var w = metrics.width
- ctx.fillText(text, x3 - w / 2, y3+4)
+ ctx.fillText(text, x3 - w / 2, y3 + 4)
}
}
@@ -139,10 +154,11 @@
console.log("鑺傜偣瀹炰緥锛�", res); // 鑺傜偣瀵瑰簲鐨� Canvas 瀹炰緥銆�
ctx = res.context;
// 璁剧疆娓愬彉
- var gradient = ctx.createLinearGradient(200, 100, 100, 200);
- gradient.addColorStop("0", "#76ECD3");
- gradient.addColorStop("0.5", "#76ECD3");
- gradient.addColorStop("1.0", "#76ECD3");
+ var gradient = ctx.createLinearGradient(0, 0, 0, 200);
+ gradient.addColorStop("0", "#96f3bd");
+ gradient.addColorStop("0.1", "#f6e59f");
+ gradient.addColorStop("0.4", "#f6e59f");
+ gradient.addColorStop("1.0", "#f29696");
ctx.setLineWidth(10);
ctx.setStrokeStyle(gradient);
--
Gitblit v1.9.3