diff --git a/Cargo.lock b/Cargo.lock index a161df7..839db33 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2752,7 +2752,7 @@ dependencies = [ [[package]] name = "my-clock" -version = "0.1.0" +version = "0.1.1" dependencies = [ "chrono", "embed-resource", diff --git a/Cargo.toml b/Cargo.toml index 2582feb..7deb5bf 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "my-clock" -version = "0.1.0" +version = "0.1.1" edition = "2021" [dependencies] diff --git a/src/main.rs b/src/main.rs index 586b5cd..1146a49 100644 --- a/src/main.rs +++ b/src/main.rs @@ -15,7 +15,7 @@ slint::slint! { in-out property minute: 0.0; in-out property second: 0.0; in-out property is_on_top: true; - in-out property dial_opacity: 0.85; + in-out property dial_opacity: 0.92; in-out property clock_size: 300px; property 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; - border-color: rgba(255, 255, 255, 0.15); + + // 背景渐变层 + Rectangle { + 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 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 rad: entry.a * 3.14159 / 180; property 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-width: 4px; + stroke: #1a1a1a; + 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-width: 3px; + stroke: #333333; + stroke-width: 3.5px; MoveTo { x: 50; y: 50; } LineTo { - x: 50 + Math.sin(root.minute * 1deg) * 35; - y: 50 - Math.cos(root.minute * 1deg) * 35; + x: 50 + Math.sin(root.minute * 1deg) * 38; + 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; - y: 50 - Math.cos(root.second * 1deg) * 42; + x: 50 + Math.sin(root.second * 1deg) * 44; + 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-color: white; + border-width: 1.5px; + border-color: #ffcc33; } } }