blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-04-06 03:58:04 +08:00
Code Issues Projects Releases Wiki Activity

perf: 优化时钟，移除无用元素

Browse Source
This commit is contained in:
tnt group 2022-09-26 17:07:12 +08:00
parent 8e1b56d74c
commit 1ece3072a0
1 changed files with 60 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/packages/components/Decorates/Mores/Clock/index.vue
View File

@ -1,77 +1,68 @@
<template> <template>
<div style="position: relative"> <svg xmlns="http://www.w3.org/2000/svg" :viewBox="`0 0 200 200`">
<svg xmlns="http://www.w3.org/2000/svg" :viewBox="`0 0 200 200`"> <filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" /> <feOffset in="blur" dx="2.5" dy="2.5" />
<feOffset in="blur" dx="2.5" dy="2.5" /> </filter>
</filter>
<!-- 表盘 --> <!-- 表盘 -->
<g> <g>
<circle <circle id="shadow" style="fill: rgba(0, 0, 0, 0.1)" cx="100" cy="100" r="87" filter="url(#innerShadow)"></circle>
id="shadow" <circle id="circle" class="clock-border" cx="100" cy="100" r="80"></circle>
style="fill: rgba(0, 0, 0, 0.1)" </g>
cx="100"
cy="100"
r="87"
filter="url(#innerShadow)"
></circle>
<circle id="circle" class="clock-border" cx="100" cy="100" r="80"></circle>
</g>
<!-- 指针 --> <!-- 指针 -->
<g> <g>
<line x1="100" y1="100" x2="100" y2="55" style="stroke-width: 3px" class="clock-line"> <line x1="100" y1="100" x2="100" y2="55" style="stroke-width: 3px" class="clock-line">
<animateTransform <animateTransform
attributeName="transform" attributeName="transform"
attributeType="XML" attributeType="XML"
type="rotate" type="rotate"
dur="43200s" dur="43200s"
repeatCount="indefinite" repeatCount="indefinite"
:from="`${hoursAngle} 100 100`" :from="`${hoursAngle} 100 100`"
:to="`${hoursAngle + 360} 100 100`" :to="`${hoursAngle + 360} 100 100`"
/> />
</line> </line>
<line x1="100" y1="100" x2="100" y2="40" style="stroke-width: 4px" class="clock-line"> <line x1="100" y1="100" x2="100" y2="40" style="stroke-width: 4px" class="clock-line">
<animateTransform <animateTransform
attributeName="transform" attributeName="transform"
attributeType="XML" attributeType="XML"
type="rotate" type="rotate"
dur="3600s" dur="3600s"
repeatCount="indefinite" repeatCount="indefinite"
:from="`${minuteAngle} 100 100`" :from="`${minuteAngle} 100 100`"
:to="`${minuteAngle + 360} 100 100`" :to="`${minuteAngle + 360} 100 100`"
/> />
</line> </line>
<line x1="100" y1="100" x2="100" y2="30" style="stroke-width: 2px" class="clock-line"> <line x1="100" y1="100" x2="100" y2="30" style="stroke-width: 2px" class="clock-line">
<animateTransform <animateTransform
attributeName="transform" attributeName="transform"
attributeType="XML" attributeType="XML"
type="rotate" type="rotate"
dur="60s" dur="60s"
repeatCount="indefinite" repeatCount="indefinite"
:from="`${secAngle} 100 100`" :from="`${secAngle} 100 100`"
:to="`${secAngle + 360} 100 100`" :to="`${secAngle + 360} 100 100`"
/> />
</line> </line>
</g> </g>
<!-- 中心圆点 --> <!-- 中心圆点 -->
<circle id="center" style="fill: #128a86; stroke: #c1efed; stroke-width: 2px" cx="100" cy="100" r="3"></circle> <circle id="center" style="fill: #128a86; stroke: #c1efed; stroke-width: 2px" cx="100" cy="100" r="3"></circle>
<!-- 刻度线 --> <!-- 刻度线 -->
<line <line
x1="100" x1="100"
y1="30" y1="30"
x2="100" x2="100"
y2="40" y2="40"
class="clock-line" class="clock-line"
:transform="`rotate(${((num + 1) * 360) / 12} 100 100)`" :transform="`rotate(${((num + 1) * 360) / 12} 100 100)`"
v-for="num in 12" v-for="num in 12"
:key="`line_${num + 1}`" :key="`line_${num + 1}`"
></line> ></line>
</svg> </svg>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">