From bf8d8f8e686915e6f1ff3bf8886273c2306cbcc2 Mon Sep 17 00:00:00 2001
From: Burt <1020103647@qq.com>
Date: Wed, 10 Jan 2024 15:35:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=A8=E6=80=81=E6=97=B6=E9=92=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .stylelintrc.cjs         |   1 +
 src/pages.json           |   2 +-
 src/pages/demo/clock.vue | 120 +++++++++++++++++++++++++++++++++++++++
 src/pages/demo/index.vue |   9 ---
 uni-pages.d.ts           |   2 +-
 5 files changed, 123 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/demo/clock.vue
 delete mode 100644 src/pages/demo/index.vue

diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
index 0330266..e5831fe 100644
--- a/.stylelintrc.cjs
+++ b/.stylelintrc.cjs
@@ -43,5 +43,6 @@ module.exports = {
       },
     ],
     'comment-empty-line-before': 'never',
+    'custom-property-empty-line-before': 'never',
   },
 }
diff --git a/src/pages.json b/src/pages.json
index 75026c8..7147b6b 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -46,7 +46,7 @@
       }
     },
     {
-      "path": "pages/demo/index",
+      "path": "pages/demo/clock",
       "type": "page"
     },
     {
diff --git a/src/pages/demo/clock.vue b/src/pages/demo/clock.vue
new file mode 100644
index 0000000..3b6e589
--- /dev/null
+++ b/src/pages/demo/clock.vue
@@ -0,0 +1,120 @@
+<template>
+  <view class="clock-box">
+    <view class="clock" :style="{ '--ds': ds, '--dm': dm, '--dh': dh }">
+      <view class="clock-pane">
+        <text class="clock-num" :style="{ '--i': n }" v-for="n in 12" :key="n">{{ n }}</text>
+      </view>
+      <view class="clock-hour"></view>
+      <view class="clock-min"></view>
+      <view class="clock-sec"></view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+const d = new Date()
+const h = d.getHours()
+const m = d.getMinutes()
+const s = d.getSeconds()
+const ds = ref(s)
+const dm = ref(m + s / 60)
+const dh = ref(h + m / 60 + s / 3600)
+</script>
+
+<style lang="scss">
+.clock {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 380px;
+  height: 380px;
+  font-size: 24px;
+  border-radius: 20px;
+  box-shadow: 2px 2px 20px #0000001a;
+  --step: 60s;
+}
+
+.clock::before {
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  content: '';
+  background: repeating-conic-gradient(from -0.5deg, #333 0 1deg, transparent 0deg 30deg),
+    repeating-conic-gradient(from -0.5deg, #ccc 0 1deg, transparent 0deg 6deg);
+  border-radius: 50%;
+  mask: radial-gradient(transparent 145px, red 0);
+}
+
+.clock-pane {
+  position: absolute;
+  width: 250px;
+  height: 250px;
+}
+
+.clock-num {
+  position: absolute;
+  offset-path: path(
+    'M250 125c0 69.036-55.964 125-125 125S0 194.036 0 125 55.964 0 125 0s125 55.964 125 125z'
+  );
+  offset-distance: calc(var(--i) * 10% / 1.2 - 25%);
+  offset-rotate: 0deg;
+}
+
+.clock-hour {
+  position: absolute;
+  width: 4px;
+  height: 60px;
+  background: #333;
+  transform: translateY(-50%) rotate(0);
+  transform-origin: center bottom;
+  animation: clock calc(var(--step) * 60 * 12) infinite linear;
+  animation-delay: calc(-1 * var(--step) * var(--dh) * 60);
+}
+
+.clock-min {
+  position: absolute;
+  width: 4px;
+  height: 90px;
+  background: #333;
+  transform: translateY(-50%) rotate(0);
+  transform-origin: center bottom;
+  animation: clock calc(var(--step) * 60) infinite linear;
+  animation-delay: calc(-1 * var(--step) * var(--dm));
+}
+
+.clock-sec {
+  position: absolute;
+  width: 2px;
+  height: 120px;
+  background: red;
+  transform: translateY(-50%) rotate(0);
+  transform-origin: center bottom;
+  animation: clock var(--step) infinite steps(60);
+  animation-delay: calc(-1 * var(--step) * var(--ds) / 60);
+}
+
+.clock-sec::after {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 10px;
+  height: 10px;
+  content: '';
+  background: #fff;
+  border: 4px solid #333;
+  border-radius: 50%;
+  transform: translate(-50%, 50%);
+}
+
+@keyframes clock {
+  to {
+    transform: translateY(-50%) rotate(360deg);
+  }
+}
+
+a {
+  width: 8px;
+  height: 9px;
+}
+</style>
diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
deleted file mode 100644
index 2076a8a..0000000
--- a/src/pages/demo/index.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <view>
-    <view>demo</view>
-    <view>测试是否会自动引入到pages，发现会</view>
-    <view>就是不加route-block也会自己引入到pages</view>
-    <view>得到类似如下的配置</view>
-    <view>{ "path": "pages/demo/index", "type": "page" },</view>
-  </view>
-</template>
diff --git a/uni-pages.d.ts b/uni-pages.d.ts
index 39c3408..51e4c5f 100644
--- a/uni-pages.d.ts
+++ b/uni-pages.d.ts
@@ -5,7 +5,7 @@
 
 interface NavigateToOptions {
   url: "pages/index/index" |
-       "pages/demo/index" |
+       "pages/demo/clock" |
        "pages/login/login" |
        "pages/my/index" |
        "pages/throughout/index" |