TASK: #124025 调整test-locked
This commit is contained in:
duanzhijiang
parent
1e507cdff2
commit
d7dcba67f5
|
|
@ -1,10 +1,6 @@
|
||||||
import {html, LitElement, css} from 'lit'
|
import {html, LitElement, css} from 'lit'
|
||||||
import {customElement, property} from 'lit/decorators.js'
|
import {customElement, property} from 'lit/decorators.js'
|
||||||
import '../icon/icon'
|
import '../icon/icon'
|
||||||
import '/home/duanzhijiang/WORKING_DIRECTORY/gaia/star-web-components/src/components/clock-widget/date/date.js'
|
|
||||||
import '/home/duanzhijiang/WORKING_DIRECTORY/gaia/star-web-components/src/components/clock-widget/time/time.js'
|
|
||||||
import '/home/duanzhijiang/WORKING_DIRECTORY/gaia/star-web-components/src/components/clock-widget/clock-widget.js'
|
|
||||||
import '/home/duanzhijiang/WORKING_DIRECTORY/gaia/star-web-components/src/components/clock/clock'
|
|
||||||
|
|
||||||
@customElement('panel-locked')
|
@customElement('panel-locked')
|
||||||
export class PanelLocked extends LitElement {
|
export class PanelLocked extends LitElement {
|
||||||
|
|
@ -16,117 +12,116 @@ export class PanelLocked extends LitElement {
|
||||||
@property({type: String}) minuteSecond = '4'
|
@property({type: String}) minuteSecond = '4'
|
||||||
@property({type: String}) date = '7月21日 周四 上午'
|
@property({type: String}) date = '7月21日 周四 上午'
|
||||||
|
|
||||||
// static styles = css`
|
|
||||||
// .screen {
|
|
||||||
// position: absolute;
|
|
||||||
// height: 100%;
|
|
||||||
// width: 100%;
|
|
||||||
// background-color: rgb(183, 211, 227);
|
|
||||||
// }
|
|
||||||
// .lock {
|
|
||||||
// box-sizing: border-box;
|
|
||||||
// left: 50%;
|
|
||||||
// transform: translate(-50%);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .lockup {
|
|
||||||
// position: absolute;
|
|
||||||
// width: 27px;
|
|
||||||
// height: 24px;
|
|
||||||
// top: 405px;
|
|
||||||
// border: 5px solid #6f7a89;
|
|
||||||
// border-radius: 50% 50% 0 0;
|
|
||||||
// }
|
|
||||||
// .lockdown {
|
|
||||||
// position: absolute;
|
|
||||||
// width: 39px;
|
|
||||||
// height: 25px;
|
|
||||||
// top: 424px;
|
|
||||||
// background: #6f7a89;
|
|
||||||
// border-radius: 3px 3px 6px 6px;
|
|
||||||
// }
|
|
||||||
// .cylinder-up {
|
|
||||||
// position: relative;
|
|
||||||
// top: 7.5px;
|
|
||||||
// width: 6px;
|
|
||||||
// height: 6px;
|
|
||||||
// background: #d9d9d9;
|
|
||||||
// border-radius: 50%;
|
|
||||||
// }
|
|
||||||
// .cylinder-down {
|
|
||||||
// position: relative;
|
|
||||||
// top: 6.5px;
|
|
||||||
// width: 2px;
|
|
||||||
// height: 4.5px;
|
|
||||||
// background: #d9d9d9;
|
|
||||||
// border-radius: 0 0 1px 1px;
|
|
||||||
// }
|
|
||||||
// .text {
|
|
||||||
// position: absolute;
|
|
||||||
// width: 135px;
|
|
||||||
// height: 45px;
|
|
||||||
// left: calc(50% - 135px / 2);
|
|
||||||
// top: calc(50% - 45px / 2 + 11.75px);
|
|
||||||
// font-family: 'OPPOSans';
|
|
||||||
// font-style: normal;
|
|
||||||
// font-weight: 400;
|
|
||||||
// font-size: 45px;
|
|
||||||
// line-height: 45px;
|
|
||||||
// text-align: center;
|
|
||||||
// color: #4d4d4d;
|
|
||||||
// }
|
|
||||||
// .try-again {
|
|
||||||
// position: absolute;
|
|
||||||
// width: 125.5px;
|
|
||||||
// height: 26.5px;
|
|
||||||
// left: calc(50% - 125.5px / 2 + 1px);
|
|
||||||
// top: calc(50% - 26.5px / 2 + 67.5px);
|
|
||||||
// font-family: 'OPPOSans';
|
|
||||||
// font-style: normal;
|
|
||||||
// font-weight: 400;
|
|
||||||
// font-size: 20px;
|
|
||||||
// line-height: 26.5px;
|
|
||||||
// color: #292929;
|
|
||||||
// }
|
|
||||||
// `
|
|
||||||
static styles = css`
|
static styles = css`
|
||||||
:host {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.screen {
|
.screen {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
background-color: rgb(183, 211, 227);
|
||||||
background-color: pink;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
.clockType {
|
.lock {
|
||||||
height: var(--auto-606px);
|
box-sizing: border-box;
|
||||||
display: flex;
|
left: 50%;
|
||||||
flex-direction: column;
|
transform: translate(-50%);
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
.textTop {
|
|
||||||
width: 100%;
|
.lockup {
|
||||||
height: 50px;
|
position: absolute;
|
||||||
|
width: 27px;
|
||||||
|
height: 24px;
|
||||||
|
top: 405px;
|
||||||
|
border: 5px solid #6f7a89;
|
||||||
|
border-radius: 50% 50% 0 0;
|
||||||
|
}
|
||||||
|
.lockdown {
|
||||||
|
position: absolute;
|
||||||
|
width: 39px;
|
||||||
|
height: 25px;
|
||||||
|
top: 424px;
|
||||||
|
background: #6f7a89;
|
||||||
|
border-radius: 3px 3px 6px 6px;
|
||||||
|
}
|
||||||
|
.cylinder-up {
|
||||||
|
position: relative;
|
||||||
|
top: 7.5px;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: #d9d9d9;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.cylinder-down {
|
||||||
|
position: relative;
|
||||||
|
top: 6.5px;
|
||||||
|
width: 2px;
|
||||||
|
height: 4.5px;
|
||||||
|
background: #d9d9d9;
|
||||||
|
border-radius: 0 0 1px 1px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
position: absolute;
|
||||||
|
width: 135px;
|
||||||
|
height: 45px;
|
||||||
|
left: calc(50% - 135px / 2);
|
||||||
|
top: calc(50% - 45px / 2 + 11.75px);
|
||||||
|
font-family: 'OPPOSans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 45px;
|
||||||
|
line-height: 45px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 50px;
|
color: #4d4d4d;
|
||||||
font-size: 26px;
|
|
||||||
font-weight: 600;
|
|
||||||
background-color: skyblue;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
clock-time {
|
.try-again {
|
||||||
display: flex;
|
position: absolute;
|
||||||
justify-content: center;
|
width: 125.5px;
|
||||||
|
height: 26.5px;
|
||||||
|
left: calc(50% - 125.5px / 2 + 1px);
|
||||||
|
top: calc(50% - 26.5px / 2 + 67.5px);
|
||||||
|
font-family: 'OPPOSans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 26.5px;
|
||||||
|
color: #292929;
|
||||||
}
|
}
|
||||||
/* TODO : flipping */
|
|
||||||
`
|
`
|
||||||
|
// static styles = css`
|
||||||
|
// :host {
|
||||||
|
// margin: 0;
|
||||||
|
// padding: 0;
|
||||||
|
// }
|
||||||
|
// .screen {
|
||||||
|
// width: 100%;
|
||||||
|
// height: 200px;
|
||||||
|
// background-color: pink;
|
||||||
|
// border-radius: 10px;
|
||||||
|
// }
|
||||||
|
// .clockType {
|
||||||
|
// height: var(--auto-606px);
|
||||||
|
// display: flex;
|
||||||
|
// flex-direction: column;
|
||||||
|
// align-items: center;
|
||||||
|
// }
|
||||||
|
// .textTop {
|
||||||
|
// width: 100%;
|
||||||
|
// height: 50px;
|
||||||
|
// text-align: center;
|
||||||
|
// line-height: 50px;
|
||||||
|
// font-size: 26px;
|
||||||
|
// font-weight: 600;
|
||||||
|
// background-color: skyblue;
|
||||||
|
// border-radius: 10px;
|
||||||
|
// }
|
||||||
|
// clock-time {
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
// }
|
||||||
|
// /* TODO : flipping */
|
||||||
|
// `
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
|
<div class="screen">
|
||||||
<div class="screen">
|
<!--<div class="textTop">TODO : 翻页的 --- flipping</div>
|
||||||
<div class="textTop">TODO : 翻页的 --- flipping</div>
|
|
||||||
<clock-widget
|
<clock-widget
|
||||||
hourFirst=${this.hourFirst}
|
hourFirst=${this.hourFirst}
|
||||||
hourSecond=${this.hourSecond}
|
hourSecond=${this.hourSecond}
|
||||||
|
|
@ -187,16 +182,16 @@ export class PanelLocked extends LitElement {
|
||||||
<div class="screen clockType" ;>
|
<div class="screen clockType" ;>
|
||||||
<div class="textTop">时钟的 --- clock</div>
|
<div class="textTop">时钟的 --- clock</div>
|
||||||
<clock-widget type="clock" date=${this.date}></clock-widget>
|
<clock-widget type="clock" date=${this.date}></clock-widget>
|
||||||
|
</div> -->
|
||||||
|
<div>
|
||||||
|
<div class="lockup lock"></div>
|
||||||
|
<div class="lockdown lock">
|
||||||
|
<div class="cylinder-up lock"></div>
|
||||||
|
<div class="cylinder-down lock"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div>
|
<div class="text">已锁定</div>
|
||||||
<div class="lockup lock"></div>
|
<div class="try-again">请${this.second}秒后再试</div>
|
||||||
<div class="lockdown lock">
|
|
||||||
<div class="cylinder-up lock"></div>
|
|
||||||
<div class="cylinder-down lock"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text">已锁定</div>
|
|
||||||
<div class="try-again">请${this.second}秒后再试</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue