change color

Cargo.lock

@@ -2752,7 +2752,7 @@ dependencies = [
 
 [[package]]
 name = "my-clock"
-version = "0.1.0"
+version = "0.1.1"
 dependencies = [
  "chrono",
  "embed-resource",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "my-clock"
-version = "0.1.0"
+version = "0.1.1"
 edition = "2021"
 
 [dependencies]

src/main.rs

@@ -15,7 +15,7 @@ slint::slint! {
         in-out property <float> minute: 0.0;
         in-out property <float> second: 0.0;
         in-out property <bool> is_on_top: true;
-        in-out property <float> dial_opacity: 0.85;
+        in-out property <float> dial_opacity: 0.92;
         in-out property <length> clock_size: 300px;
 
         property <length> mouse_start_x;
@@ -98,15 +98,41 @@ slint::slint! {
 
             Rectangle {
                 width: 100%; height: 100%;
-                background: rgba(25, 25, 25, root.dial_opacity);
+                
-                border-radius: self.width / 2;
+                // 背景渐变层
-                border-width: 1.5px;
+                Rectangle {
-                border-color: rgba(255, 255, 255, 0.15);
+                    width: 100%; height: 100%;
+                    background: @radial-gradient(circle, #fff9a0 0%, #ffcc33 100%);
+                    opacity: root.dial_opacity;
+                    border-radius: self.width / 2;
+                }
+
+                // 装饰性内环和外边框
+                Rectangle {
+                    width: 100%; height: 100%;
+                    border-radius: self.width / 2;
+                    border-width: 2.5px;
+                    border-color: rgba(255, 255, 255, 0.4);
+
+                    Rectangle {
+                        width: 97%; height: 97%;
+                        border-radius: self.width / 2;
+                        border-width: 1.2px;
+                        border-color: rgba(255, 255, 255, 0.2);
+                    }
+                }
+
+                // 强化全局高光层
+                Rectangle {
+                    width: 100%; height: 100%;
+                    border-radius: self.width / 2;
+                    background: @radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 80%);
+                }
 
                 for i in 12 : Path {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
-                    stroke: rgba(255, 255, 255, 0.4);
+                    stroke: rgba(0, 0, 0, 0.5);
                     stroke-width: 2px;
                     property <float> angle: i * 30;
                     MoveTo { 
@@ -119,21 +145,26 @@ slint::slint! {
                     }
                 }
 
-                for entry in [ {t: "12", a: 0}, {t: "3", a: 90}, {t: "6", a: 180}, {t: "9", a: 270} ] : Text {
+                for entry in [ 
+                    {t: "12", a: 0}, {t: "1", a: 30}, {t: "2", a: 60}, {t: "3", a: 90}, 
+                    {t: "4", a: 120}, {t: "5", a: 150}, {t: "6", a: 180}, {t: "7", a: 210}, 
+                    {t: "8", a: 240}, {t: "9", a: 270}, {t: "10", a: 300}, {t: "11", a: 330} 
+                ] : Text {
                     property <float> rad: entry.a * 3.14159 / 180;
                     property <length> r: parent.width / 2 - 35px;
                     x: parent.width / 2 + Math.sin(rad * 1rad) * r - self.width / 2;
                     y: parent.height / 2 - Math.cos(rad * 1rad) * r - self.height / 2;
                     text: entry.t;
-                    color: rgba(255, 255, 255, 0.25);
+                    color: rgba(0, 0, 0, 0.7);
                     font-size: 16px;
+                    font-weight: 500;
                 }
 
                 Path {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
-                    stroke: #ffffff;
+                    stroke: #1a1a1a;
-                    stroke-width: 4px;
+                    stroke-width: 5px;
                     MoveTo { x: 50; y: 50; }
                     LineTo { 
                         x: 50 + Math.sin(root.hour * 1deg) * 25; 
@@ -144,12 +175,12 @@ slint::slint! {
                 Path {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
-                    stroke: #bbbbbb;
+                    stroke: #333333;
-                    stroke-width: 3px;
+                    stroke-width: 3.5px;
                     MoveTo { x: 50; y: 50; }
                     LineTo { 
-                        x: 50 + Math.sin(root.minute * 1deg) * 35; 
+                        x: 50 + Math.sin(root.minute * 1deg) * 38; 
-                        y: 50 - Math.cos(root.minute * 1deg) * 35; 
+                        y: 50 - Math.cos(root.minute * 1deg) * 38; 
                     }
                 }
 
@@ -160,8 +191,8 @@ slint::slint! {
                     stroke-width: 1.5px;
                     MoveTo { x: 50; y: 50; }
                     LineTo { 
-                        x: 50 + Math.sin(root.second * 1deg) * 42; 
+                        x: 50 + Math.sin(root.second * 1deg) * 44; 
-                        y: 50 - Math.cos(root.second * 1deg) * 42; 
+                        y: 50 - Math.cos(root.second * 1deg) * 44; 
                     }
                 }
 
@@ -169,10 +200,10 @@ slint::slint! {
                     x: (parent.width - self.width) / 2;
                     y: (parent.height - self.height) / 2;
                     width: 8px; height: 8px;
-                    background: #222;
+                    background: #1a1a1a;
                     border-radius: 4px;
-                    border-width: 2px;
+                    border-width: 1.5px;
-                    border-color: white;
+                    border-color: #ffcc33;
                 }
             }
         }