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 {customElement, property} from 'lit/decorators.js'
|
||||
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')
|
||||
export class PanelLocked extends LitElement {
|
||||
|
|
@ -16,117 +12,116 @@ export class PanelLocked extends LitElement {
|
|||
@property({type: String}) minuteSecond = '4'
|
||||
@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`
|
||||
:host {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.screen {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-color: pink;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(183, 211, 227);
|
||||
}
|
||||
.clockType {
|
||||
height: var(--auto-606px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.lock {
|
||||
box-sizing: border-box;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
.textTop {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
.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;
|
||||
line-height: 50px;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
background-color: skyblue;
|
||||
border-radius: 10px;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
clock-time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.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;
|
||||
}
|
||||
/* 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() {
|
||||
return html`
|
||||
|
||||
<div class="screen">
|
||||
<div class="textTop">TODO : 翻页的 --- flipping</div>
|
||||
<div class="screen">
|
||||
<!--<div class="textTop">TODO : 翻页的 --- flipping</div>
|
||||
<clock-widget
|
||||
hourFirst=${this.hourFirst}
|
||||
hourSecond=${this.hourSecond}
|
||||
|
|
@ -187,16 +182,16 @@ export class PanelLocked extends LitElement {
|
|||
<div class="screen clockType" ;>
|
||||
<div class="textTop">时钟的 --- clock</div>
|
||||
<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 class="lockup lock"></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 class="text">已锁定</div>
|
||||
<div class="try-again">请${this.second}秒后再试</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue