openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

TASK:#110915 Modify the test value type to data number string

This commit is contained in:
lvxiangcong 2022-10-07 17:58:42 +08:00
parent 7f1b7091a1
commit b1dea99df1
3 changed files with 37 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/clock/clock-style.ts
View File

@ -26,6 +26,7 @@ export const sharedStyles: CSSResult = css`
);
}
.star-clock-case {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
@ -68,7 +69,7 @@ export const sharedStyles: CSSResult = css`
width: var(--autoPoint);
height: var(--autoPoint);
position: absolute;
right: 50%;
left: 50%;
top: 0;
background: linear-gradient(
90deg,
@ -86,7 +87,7 @@ export const sharedStyles: CSSResult = css`
transform-origin: 0 100%;
display: inline-block;
transform: translate(-50%, 0);
animation: anmiate-hour 86400s linear infinite;
animation: var(--anmiate-hour) 86400s linear infinite;
}
.star-clock-minute-hand {
position: absolute;
@ -96,7 +97,7 @@ export const sharedStyles: CSSResult = css`
transform-origin: 0 100%;
display: inline-block;
transform: translate(-50%, 0);
animation: anmiate-minute 3600s linear infinite;
animation: var(--anmiate-minute) 3600s linear infinite;
}
.star-clock-second-hand {
position: absolute;
@ -106,7 +107,7 @@ export const sharedStyles: CSSResult = css`
height: 43%;
transform-origin: 0 calc(100% - 16px);
transform: translate(-50%, 0);
animation: anmiate-second 60s linear infinite;
animation: var(--anmiate-second) 60s linear infinite;
}
/*有表盘浅色模式*/
.star-clock-main.light {
@ -166,7 +167,7 @@ export const sharedStyles: CSSResult = css`
border-radius: 12px;
z-index: 1;
transform: translate(-50%, 0);
animation: anmiate-hour 86400s linear infinite;
animation: var(--anmiate-hour) 86400s linear infinite;
}
.star-clock-minute-hand-transparent {
position: absolute;
@ -180,7 +181,7 @@ export const sharedStyles: CSSResult = css`
border-radius: 12px;
z-index: 1;
transform: translate(-50%, 0);
animation: anmiate-minute 3600s linear infinite;
animation: var(--anmiate-minute) 3600s linear infinite;
}
.star-clock-second-hand-transparent {
position: absolute;
@ -194,7 +195,7 @@ export const sharedStyles: CSSResult = css`
border-radius: 12px;
z-index: 0;
transform: translate(-50%, 0);
animation: anmiate-second 60s linear infinite;
animation: var(--anmiate-second) 60s linear infinite;
}
/*无表盘浅色模式*/
.star-clock-case-transparent.light .star-clock-point-transparent {

28
src/components/clock/clock.ts
View File

@ -22,16 +22,12 @@ export class StarClock extends LitElement {
@state() rotateMinute = 0
@state() rotateSecond = 0
private _date: String = '0'
@property({type: String})
get date() {
return this._date
set date(val: Date | String | Number) {
if (val.constructor.toString().includes('String')) {
val.toString().length <= 13 ? (val = Number(val)) : ''
}
set date(val: String) {
console.log(val, 'val')
// 1664942295167 (长度13) // Wed Oct 05 2022 11:58:40 GMT+0800 (中国标准时间)
let dateMy = val.length <= 13 ? Number(val) : String(val)
val && this.dateUpdated(dateMy)
val && this.dateUpdated(val)
}
@query('.star-clock')
@ -71,7 +67,8 @@ export class StarClock extends LitElement {
>
<span
class="star-clock-point"
style="transform: rotate(${-(360 / 12) * item}deg)"
style="transform: rotate(${-(360 / 12) *
item}deg) translate(-50%, 0)"
></span>
</span>
`
@ -129,15 +126,12 @@ export class StarClock extends LitElement {
this.style.setProperty('--rotateSecond', this.rotateSecond + 'deg')
this.style.setProperty('--rotateMinute', this.rotateMinute + 'deg')
this.style.setProperty('--rotateHour', this.rotateHour + 'deg')
this.style.setProperty(
'--rotateSecondAfter',
this.rotateSecond + 360 + 'deg'
)
this.style.setProperty(
'--rotateMinuteAfter',
this.rotateMinute + 360 + 'deg'
)
this.style.setProperty('--rotateSecondAfter',this.rotateSecond + 360 + 'deg')
this.style.setProperty('--rotateMinuteAfter',this.rotateMinute + 360 + 'deg')
this.style.setProperty('--rotateHourAfter', this.rotateHour + 360 + 'deg')
this.style.setProperty('--anmiate-hour', 'anmiate-hour')
this.style.setProperty('--anmiate-minute', 'anmiate-minute')
this.style.setProperty('--anmiate-second', 'anmiate-second')
}
protected firstUpdated() {
this.resize()

36
src/test/panels/clock/clock.ts
View File

@ -1,11 +1,16 @@
import {html, css, LitElement} from 'lit'
import {customElement, property, state} from 'lit/decorators.js'
import {customElement, property, query, state} from 'lit/decorators.js'
import {StarClock} from '../../../components/clock/clock'
@customElement('panel-clock')
export class PanelClock extends LitElement {
@property()
foo = ''
@state()
date: any = '0'
@query('#test1') clockTest1!: StarClock
@query('#test2') clockTest2!: StarClock
@query('#test3') clockTest3!: StarClock
@query('#test4') clockTest4!: StarClock
render() {
return html`
<h3
@ -17,14 +22,10 @@ export class PanelClock extends LitElement {
style="display:flex;justify-content: center; align-items: center; padding: 20px 0;"
>
<div style=" width: 380px; height: 380px;overflow: hidden">
<star-clock date="${this.date}" type="diale"></star-clock>
<star-clock id="test1" type="diale"></star-clock>
</div>
<div style="width: 380px; height: 380px;overflow: hidden">
<star-clock
date="${this.date}"
type="diale"
mode="light"
></star-clock>
<star-clock id="test2" type="diale" mode="light"></star-clock>
</div>
</div>
<h3
@ -36,26 +37,23 @@ export class PanelClock extends LitElement {
style="display:flex;justify-content: center; align-items: center; padding: 20px 0"
>
<div style="width: 380px; height: 380px;overflow: hidden">
<star-clock date="${this.date}" type="transparent"></star-clock>
<star-clock id="test3" type="transparent"></star-clock>
</div>
<div style="width: 380px; height: 380px;overflow: hidden">
<star-clock
date="${this.date}"
type="transparent"
mode="light"
></star-clock>
<star-clock id="test4" type="transparent" mode="light"></star-clock>
</div>
</div>
`
}
static styles = css``
protected firstUpdated() {
this.date = new Date() //.getTime()
// let timeMy = new Date(Number(this.date))
// let hour = timeMy.getHours()
// let minute = timeMy.getMinutes()
// let second = timeMy.getSeconds()
// console.log('传的值和类型:000', hour, minute, second)
this.clockTest1.date = new Date() // 传Date型
this.clockTest2.date = new Date().getTime() // 传Number型
this.clockTest3.date = new Date().toString() // 传string型
this.clockTest4.date = new Date().toString() // 传string型
// this.date = new Date().toString()
// this.date = new Date().getTime()
// this.date = new Date()
}
}
declare global {