Merge branch 'master' into dock
This commit is contained in:
luojiahao
commit
2085d8ba40
|
|
@ -109,21 +109,21 @@ export class BrightnessSlider extends LitElement {
|
|||
color: var(--icon-color-lm);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
@media screen and (min-width: 300px) {
|
||||
.sliderBar {
|
||||
border-radius: 16px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
border-radius: 16px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.sliderBar::before {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
left: 29px;
|
||||
top: 29px;
|
||||
font-size: 48px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -144,6 +144,24 @@ export class BrightnessSlider extends LitElement {
|
|||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
.sliderBar {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.sliderBar::before {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
left: 29px;
|
||||
top: 29px;
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
handleEvent(event: TouchEvent) {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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: 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)
|
||||
set date(val: Date | String | Number) {
|
||||
if (val.constructor.toString().includes('String')) {
|
||||
val.toString().length <= 13 ? (val = Number(val)) : ''
|
||||
}
|
||||
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()
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
|
||||
import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
|
||||
import {HeaderBarType} from '../header-bar/header-bar.js'
|
||||
import {
|
||||
customElement,
|
||||
property,
|
||||
query,
|
||||
queryAssignedElements,
|
||||
} from 'lit/decorators.js'
|
||||
import {HeaderBar, HeaderBarType} from '../header-bar/header-bar.js'
|
||||
import {IconControlBarType} from '../icon-control-bar/icon-control-bar.js'
|
||||
import '../icon-control-bar/icon-control-bar.js'
|
||||
import '../header-bar/header-bar.js'
|
||||
|
|
@ -13,6 +18,7 @@ export enum DropDownMenuType {
|
|||
export class DropDownMenu extends LitElement {
|
||||
@property({type: DropDownMenuType}) type = ''
|
||||
@queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]
|
||||
@query('header-bar') headerBar!: HeaderBar
|
||||
getOnlyTime(): HTMLTemplateResult {
|
||||
return html`
|
||||
<div class="inner">
|
||||
|
|
@ -64,6 +70,10 @@ export class DropDownMenu extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
observeTimeFormatChange() {
|
||||
this.headerBar.autoUpdateDateTime()
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
width: inherit;
|
||||
|
|
@ -78,38 +88,39 @@ export class DropDownMenu extends LitElement {
|
|||
}
|
||||
|
||||
.inner {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
@media screen and (min-width: 300px) {
|
||||
header-bar[type='only-time'] {
|
||||
dispaly: flex;
|
||||
width: 512px;
|
||||
height: 52px;
|
||||
width: 170px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
header-bar[type='date-time'] {
|
||||
dispaly: flex;
|
||||
width: 860px;
|
||||
height: 64px;
|
||||
width: 286px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.all-quick-icons {
|
||||
width: 100%;
|
||||
height: calc(100% - 52px);
|
||||
height: calc(100% - 31px);
|
||||
position: relative;
|
||||
top: 40px;
|
||||
// top: 40px;
|
||||
top: 2.4%;
|
||||
}
|
||||
|
||||
.others {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
top: 33.3px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -128,9 +139,10 @@ export class DropDownMenu extends LitElement {
|
|||
|
||||
.all-quick-icons {
|
||||
width: 100%;
|
||||
height: calc(100% - 26px);
|
||||
height: calc(100% - 46px);
|
||||
position: relative;
|
||||
top: 20px;
|
||||
// top: 20px;
|
||||
top: 2.4%;
|
||||
}
|
||||
|
||||
.others {
|
||||
|
|
@ -140,6 +152,34 @@ export class DropDownMenu extends LitElement {
|
|||
top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
header-bar[type='only-time'] {
|
||||
dispaly: flex;
|
||||
width: 512px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
header-bar[type='date-time'] {
|
||||
dispaly: flex;
|
||||
width: 860px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.all-quick-icons {
|
||||
width: 100%;
|
||||
height: calc(100% - 92px);
|
||||
position: relative;
|
||||
top: 2.4%;
|
||||
}
|
||||
|
||||
.others {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -121,44 +121,44 @@ export class HeaderBar extends LitElement {
|
|||
color: var(--time-date-date-color-dm);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
@media screen and (min-width: 300px) {
|
||||
.time-outer > #time {
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
font-size: 52px;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.time-icons {
|
||||
display: flex;
|
||||
width: 136px;
|
||||
width: 45px;
|
||||
position: relative;
|
||||
right: 4px;
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
.time-icons > ::slotted(:last-child) {
|
||||
position: relative;
|
||||
left: 40px;
|
||||
left: 13px;
|
||||
}
|
||||
|
||||
.time-date {
|
||||
line-height: 64px;
|
||||
left: 10px;
|
||||
line-height: 21px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.time-date > #time {
|
||||
font-size: 64px;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
#date {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
left: 22px;
|
||||
font-size: 26px;
|
||||
height: 11px;
|
||||
line-height: 11px;
|
||||
left: 7px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.time-date-icons {
|
||||
position: relative;
|
||||
right: 11px;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -202,6 +202,47 @@ export class HeaderBar extends LitElement {
|
|||
right: 5.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
.time-outer > #time {
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
font-size: 52px;
|
||||
}
|
||||
|
||||
.time-icons {
|
||||
display: flex;
|
||||
width: 136px;
|
||||
position: relative;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.time-icons > ::slotted(:last-child) {
|
||||
position: relative;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.time-date {
|
||||
line-height: 64px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.time-date > #time {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
#date {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
left: 22px;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.time-date-icons {
|
||||
position: relative;
|
||||
right: 11px;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
firstUpdated() {
|
||||
|
|
@ -304,12 +345,18 @@ export class HeaderBar extends LitElement {
|
|||
}
|
||||
return time
|
||||
} else {
|
||||
return d.toLocaleString(navigator.languages as string[], {
|
||||
// hour12: (navigator as any).mozHour12,
|
||||
hour12: false,
|
||||
d = d.toLocaleString(navigator.languages as string[], {
|
||||
hour12: (navigator as any).mozHour12,
|
||||
hour: 'numeric',
|
||||
minute: 'numeric',
|
||||
})
|
||||
if ((navigator as any).mozHour12) {
|
||||
d = d.slice(2)
|
||||
}
|
||||
if (d.indexOf(':') === 1) {
|
||||
d = `0${d}`
|
||||
}
|
||||
return d
|
||||
}
|
||||
} else {
|
||||
if (d.indexOf(':') == 1) {
|
||||
|
|
|
|||
|
|
@ -111,19 +111,19 @@ export class IconControlBarGroup extends LitElement {
|
|||
background: var(--background-dm);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
@media screen and (min-width: 300px) {
|
||||
:host {
|
||||
border-radius: 16px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.icon-only > div > ::slotted(*) {
|
||||
height: 30px;
|
||||
border-left: 2px solid var(--line-border-lm);
|
||||
border-radius: 2px;
|
||||
height: 10px;
|
||||
border-left: 1px solid var(--line-border-lm);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
:host([deep-mode]) .icon-only > div > ::slotted(*) {
|
||||
border-left: 2px solid var(--line-border-dm);
|
||||
border-left: 1px solid var(--line-border-dm);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -142,6 +142,22 @@ export class IconControlBarGroup extends LitElement {
|
|||
border-left: 1px solid var(--line-border-dm);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
:host {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.icon-only > div > ::slotted(*) {
|
||||
height: 30px;
|
||||
border-left: 2px solid var(--line-border-lm);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
:host([deep-mode]) .icon-only > div > ::slotted(*) {
|
||||
border-left: 2px solid var(--line-border-dm);
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,10 +36,10 @@ export class IconControlBar extends LitElement {
|
|||
|
||||
const iconstyle = html`
|
||||
<style>
|
||||
@media screen and (min-width: 900px) {
|
||||
@media screen and (min-width: 300px) {
|
||||
:host {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -49,6 +49,13 @@ export class IconControlBar extends LitElement {
|
|||
height: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
:host {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`
|
||||
|
||||
|
|
@ -90,10 +97,10 @@ export class IconControlBar extends LitElement {
|
|||
|
||||
const iconstyle = html`
|
||||
<style>
|
||||
@media screen and (min-width: 900px) {
|
||||
@media screen and (min-width: 300px) {
|
||||
:host {
|
||||
width: 240px;
|
||||
height: 108px;
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -103,6 +110,13 @@ export class IconControlBar extends LitElement {
|
|||
height: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
:host {
|
||||
width: 240px;
|
||||
height: 108px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`
|
||||
|
||||
|
|
@ -328,6 +342,7 @@ export class IconControlBar extends LitElement {
|
|||
|
||||
p {
|
||||
position: relative;
|
||||
left: 13.1%;
|
||||
color: var(--text-color-lm);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -351,6 +366,45 @@ export class IconControlBar extends LitElement {
|
|||
color: var(--text-color-dm);
|
||||
}
|
||||
|
||||
.icon-with-state::before {
|
||||
position: relative;
|
||||
left: 9.2%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 300px) {
|
||||
.with-border {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.icon-button::before {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.more-info-icon {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
position: relative;
|
||||
left: 19px;
|
||||
}
|
||||
|
||||
.more-info-icon::after {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
line-height: 5px;
|
||||
font-size: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 33px;
|
||||
height: 7px;
|
||||
font-size: 7px;
|
||||
line-height: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.with-border {
|
||||
border-radius: 8px;
|
||||
|
|
@ -363,11 +417,6 @@ export class IconControlBar extends LitElement {
|
|||
font-size: 24px;
|
||||
}
|
||||
|
||||
.icon-with-state::before {
|
||||
position: relative;
|
||||
left: 11px;
|
||||
}
|
||||
|
||||
.more-info-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
|
|
@ -385,8 +434,6 @@ export class IconControlBar extends LitElement {
|
|||
p {
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
left: 17px;
|
||||
font-weight: 400;
|
||||
font-size: 10.5px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -166,24 +166,36 @@ export class StarNotificationGroup extends LitElement {
|
|||
}
|
||||
|
||||
static styles = css`
|
||||
@media screen and (min-width: 900px) {
|
||||
@media screen and (min-width: 300px) {
|
||||
:host {
|
||||
width: 860px;
|
||||
width: 286px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
margin: 16px 170px 0;
|
||||
border-radius: 20px;
|
||||
margin: 5px 56px 0;
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
:host {
|
||||
width: 430px;
|
||||
height: 76px;
|
||||
display: block;
|
||||
margin: 8px 85px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
:host {
|
||||
width: 860px;
|
||||
height: 152px;
|
||||
display: block;
|
||||
margin: 16px 170px 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
:host([show='false']) ::slotted(*) {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -285,8 +285,10 @@ export class StarNotification extends LitElement {
|
|||
let translateX
|
||||
if (screen.width >= 900) {
|
||||
translateX = 266
|
||||
} else {
|
||||
} else if (screen.width >= 600) {
|
||||
translateX = 133
|
||||
} else {
|
||||
translateX = 88
|
||||
}
|
||||
this.notification.style.transform =
|
||||
'translateX(-' + translateX + 'px)'
|
||||
|
|
@ -404,6 +406,7 @@ export class StarNotification extends LitElement {
|
|||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notification > div.title-container .timestamp {
|
||||
|
|
@ -558,148 +561,148 @@ export class StarNotification extends LitElement {
|
|||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
@media screen and (min-width: 300px) {
|
||||
:host([notificationType='one-notification']) {
|
||||
margin: 16px 0 0 0;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
.notification {
|
||||
height: 152px;
|
||||
width: 860px;
|
||||
height: 50px;
|
||||
width: 286px;
|
||||
}
|
||||
|
||||
.top-border-radius {
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
.bottom-border-radius {
|
||||
border-bottom-left-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.border-radius {
|
||||
border-radius: 20px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.notification > img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
pointer-events: none;
|
||||
margin: 26px 10px 78px 26px;
|
||||
margin: 9px 3px 26px 9px;
|
||||
}
|
||||
|
||||
.notification > div.title-container {
|
||||
width: calc(100% - 84px);
|
||||
left: 84px;
|
||||
top: 36px;
|
||||
width: calc(100% - 28px);
|
||||
left: 28px;
|
||||
top: 23.7%;
|
||||
}
|
||||
|
||||
.notification > div.title-container .title {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 28px;
|
||||
height: 9px;
|
||||
line-height: 9px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.notification > div.title-container .timestamp {
|
||||
height: 32px;
|
||||
right: 32px;
|
||||
top: -4px;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
height: 10px;
|
||||
right: 10px;
|
||||
top: -1px;
|
||||
font-size: 8px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.notification > div.detail {
|
||||
width: calc(100% - 84px);
|
||||
left: 84px;
|
||||
top: 84px;
|
||||
width: calc(100% - 28px);
|
||||
left: 28px;
|
||||
top: 55.3%;
|
||||
}
|
||||
|
||||
.notification > div.detail .detail-content {
|
||||
width: 740px;
|
||||
height: 34px;
|
||||
font-size: 26px;
|
||||
line-height: 34px;
|
||||
width: 246px;
|
||||
height: 11px;
|
||||
font-size: 8px;
|
||||
line-height: 11px;
|
||||
}
|
||||
|
||||
.notification > div.detail .arrow-up {
|
||||
width: 56px;
|
||||
height: 34px;
|
||||
right: 26px;
|
||||
bottom: 30px;
|
||||
line-height: 34px;
|
||||
border-radius: 189px;
|
||||
width: 18px;
|
||||
height: 11px;
|
||||
right: 9px;
|
||||
bottom: 10px;
|
||||
line-height: 11px;
|
||||
border-radius: 63px;
|
||||
}
|
||||
|
||||
.notification > div.detail .arrow-up::after {
|
||||
font-size: 35px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-tool {
|
||||
right: 18px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
.btn-tool > div:first-child {
|
||||
margin-right: 44px;
|
||||
margin-right: 15px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.btn-tool > div {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.btn-tool > div::after {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 32px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
line-height: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: calc(100% - 84px);
|
||||
left: 84px;
|
||||
width: calc(100% - 28px);
|
||||
left: 28px;
|
||||
}
|
||||
|
||||
.one-container {
|
||||
top: 36px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.another-container {
|
||||
top: 89px;
|
||||
top: 29px;
|
||||
}
|
||||
|
||||
.container .title {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 28px;
|
||||
height: 9px;
|
||||
line-height: 9px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.container .detail-content {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
left: 24px;
|
||||
top: -3px;
|
||||
font-size: 26px;
|
||||
height: 11px;
|
||||
line-height: 11px;
|
||||
left: 8px;
|
||||
top: -1px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.one-container .timestamp {
|
||||
height: 34px;
|
||||
right: 34px;
|
||||
top: -4px;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
height: 11px;
|
||||
right: 11px;
|
||||
top: -1px;
|
||||
font-size: 8px;
|
||||
line-height: 11px;
|
||||
}
|
||||
|
||||
.another-container .notificaiton-counts {
|
||||
width: 56px;
|
||||
height: 34px;
|
||||
right: 26px;
|
||||
bottom: 30px;
|
||||
width: 18px;
|
||||
height: 11px;
|
||||
right: 8px;
|
||||
bottom: 10px;
|
||||
top: -1px;
|
||||
line-height: 34px;
|
||||
font-size: 20px;
|
||||
border-radius: 189px;
|
||||
line-height: 11px;
|
||||
font-size: 7px;
|
||||
border-radius: 63px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -738,6 +741,7 @@ export class StarNotification extends LitElement {
|
|||
width: calc(100% - 42px);
|
||||
left: 42px;
|
||||
top: 18px;
|
||||
top: 23.7%;
|
||||
}
|
||||
|
||||
.notification > div.title-container .title {
|
||||
|
|
@ -758,6 +762,7 @@ export class StarNotification extends LitElement {
|
|||
width: calc(100% - 42px);
|
||||
left: 42px;
|
||||
top: 42px;
|
||||
top: 55.3%;
|
||||
}
|
||||
|
||||
.notification > div.detail .detail-content {
|
||||
|
|
@ -847,6 +852,155 @@ export class StarNotification extends LitElement {
|
|||
border-radius: 94.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
:host([notificationType='one-notification']) {
|
||||
margin: 16px 0 0 0;
|
||||
}
|
||||
|
||||
.notification {
|
||||
height: 152px;
|
||||
width: 860px;
|
||||
}
|
||||
|
||||
.top-border-radius {
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
|
||||
.bottom-border-radius {
|
||||
border-bottom-left-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
|
||||
.border-radius {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.notification > img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
pointer-events: none;
|
||||
margin: 26px 10px 78px 26px;
|
||||
}
|
||||
|
||||
.notification > div.title-container {
|
||||
width: calc(100% - 84px);
|
||||
left: 84px;
|
||||
|
||||
top: 36px;
|
||||
top: 23.7%;
|
||||
}
|
||||
|
||||
.notification > div.title-container .title {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.notification > div.title-container .timestamp {
|
||||
height: 32px;
|
||||
right: 32px;
|
||||
top: -4px;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.notification > div.detail {
|
||||
width: calc(100% - 84px);
|
||||
left: 84px;
|
||||
top: 84px;
|
||||
|
||||
top: 55.3%;
|
||||
}
|
||||
|
||||
.notification > div.detail .detail-content {
|
||||
width: 740px;
|
||||
height: 34px;
|
||||
font-size: 26px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.notification > div.detail .arrow-up {
|
||||
width: 56px;
|
||||
height: 34px;
|
||||
right: 26px;
|
||||
bottom: 30px;
|
||||
line-height: 34px;
|
||||
border-radius: 189px;
|
||||
}
|
||||
|
||||
.notification > div.detail .arrow-up::after {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.btn-tool {
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.btn-tool > div:first-child {
|
||||
margin-right: 44px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.btn-tool > div {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.btn-tool > div::after {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: calc(100% - 84px);
|
||||
left: 84px;
|
||||
}
|
||||
|
||||
.one-container {
|
||||
top: 36px;
|
||||
}
|
||||
|
||||
.another-container {
|
||||
top: 89px;
|
||||
}
|
||||
|
||||
.container .title {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.container .detail-content {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
left: 24px;
|
||||
top: -3px;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.one-container .timestamp {
|
||||
height: 34px;
|
||||
right: 34px;
|
||||
top: -4px;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.another-container .notificaiton-counts {
|
||||
width: 56px;
|
||||
height: 34px;
|
||||
right: 26px;
|
||||
bottom: 30px;
|
||||
top: -1px;
|
||||
line-height: 34px;
|
||||
font-size: 20px;
|
||||
border-radius: 189px;
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue