Merge branch 'master' into feature-component-datepicker合并
This commit is contained in:
yajun
commit
9767ca48f7
|
|
@ -18,8 +18,8 @@ export const sharedStyles: CSSResult = css`
|
|||
#fafafa 20.46%,
|
||||
#d5daf2 90.45%
|
||||
);
|
||||
box-shadow: 0px 0.92vw 2.3vw rgba(0, 0, 0, 0.08);
|
||||
border-radius: 4.6vw;
|
||||
box-shadow: 0px var(--shadow-one) var(--shadow-two) rgba(0, 0, 0, 0.08);
|
||||
border-radius: var(--container-radius);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
|
@ -32,7 +32,6 @@ export const sharedStyles: CSSResult = css`
|
|||
top: 0%;
|
||||
bottom: 0%;
|
||||
background: linear-gradient(152.36deg, #6be4d0 8.74%, #10a775 82.29%);
|
||||
border-radius: 4.6vw 0px 0px 4.6vw;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
|
@ -41,8 +40,7 @@ export const sharedStyles: CSSResult = css`
|
|||
left: 12%;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 11.5vw;
|
||||
line-height: 15.18vw;
|
||||
font-size: var(--number-size);
|
||||
color: #ebc883;
|
||||
}
|
||||
|
||||
|
|
@ -50,8 +48,7 @@ export const sharedStyles: CSSResult = css`
|
|||
position: absolute;
|
||||
left: var(--percent-left);
|
||||
font-weight: 400;
|
||||
font-size: 5.98vw;
|
||||
line-height: 5.98vw;
|
||||
font-size: var(--percent-size);
|
||||
color: #ebc883;
|
||||
padding-block-start: 4.5%;
|
||||
}
|
||||
|
|
@ -71,8 +68,8 @@ export const sharedStyles: CSSResult = css`
|
|||
rgba(255, 255, 255, 0.5) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
width: 5.52vw;
|
||||
height: 5.52vw;
|
||||
width: var(--bubbles);
|
||||
height: var(--bubbles);
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
animation: flying 10s ease-in infinite;
|
||||
|
|
@ -80,24 +77,24 @@ export const sharedStyles: CSSResult = css`
|
|||
|
||||
@keyframes flying {
|
||||
0% {
|
||||
top: 90%;
|
||||
bottom: -10%;
|
||||
transform: translateX(0vw);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(5.75vw);
|
||||
transform: translateX(var(--first));
|
||||
}
|
||||
50% {
|
||||
transform: translateX(17.25vw);
|
||||
transform: translateX(var(--second));
|
||||
}
|
||||
75% {
|
||||
transform: translateX(-5.75vw);
|
||||
transform: translateX(var(--third));
|
||||
}
|
||||
88% {
|
||||
transform: translateX(-8.74vw);
|
||||
transform: translateX(var(--forth));
|
||||
}
|
||||
100% {
|
||||
top: 0%;
|
||||
transform: translateX(-11.5vw);
|
||||
bottom: 90%;
|
||||
transform: translateX(var(--fifth));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -106,8 +103,8 @@ export const sharedStyles: CSSResult = css`
|
|||
animation-delay: 0s;
|
||||
}
|
||||
.bubbles:nth-child(2) {
|
||||
width: 4.14vw;
|
||||
height: 4.14vw;
|
||||
width: var(--one);
|
||||
height: var(--one);
|
||||
left: 10%;
|
||||
animation-duration: 8s;
|
||||
animation-delay: 1s;
|
||||
|
|
@ -118,8 +115,8 @@ export const sharedStyles: CSSResult = css`
|
|||
animation-delay: 2s;
|
||||
}
|
||||
.bubbles:nth-child(4) {
|
||||
width: 2.3vw;
|
||||
height: 2.3vw;
|
||||
width: var(--two);
|
||||
height: var(--two);
|
||||
animation-duration: 6s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
|
@ -130,8 +127,8 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
.bubbles:nth-child(6) {
|
||||
left: 80%;
|
||||
width: 4.14vw;
|
||||
height: 4.14vw;
|
||||
width: var(--one);
|
||||
height: var(--one);
|
||||
animation-duration: 6s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
|
@ -142,8 +139,8 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
.bubbles:nth-child(8) {
|
||||
right: 90%;
|
||||
width: 2.3vw;
|
||||
height: 2.3vw;
|
||||
width: var(--two);
|
||||
height: var(--two);
|
||||
animation-duration: 9s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
|
@ -182,8 +179,8 @@ export const sharedStyles: CSSResult = css`
|
|||
rgba(255, 255, 255, 0.5) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
width: 5.52vw;
|
||||
height: 5.52vw;
|
||||
width: var(--bubbles);
|
||||
height: var(--bubbles);
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
animation: flying-vertical 10s ease-in infinite;
|
||||
|
|
@ -194,20 +191,20 @@ export const sharedStyles: CSSResult = css`
|
|||
transform: translateY(0vw);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(5.75vw);
|
||||
transform: translateY(var(--first));
|
||||
}
|
||||
50% {
|
||||
transform: translateY(17.25vw);
|
||||
transform: translateY(var(--second));
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-5.75vw);
|
||||
transform: translateY(var(--third));
|
||||
}
|
||||
88% {
|
||||
transform: translateY(-8.74vw);
|
||||
transform: translateY(var(--forth));
|
||||
}
|
||||
100% {
|
||||
left: 90%;
|
||||
transform: translateY(-11.5vw);
|
||||
transform: translateY(var(--fifth));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -216,8 +213,8 @@ export const sharedStyles: CSSResult = css`
|
|||
animation-delay: 0s;
|
||||
}
|
||||
.bubbles_vertical:nth-child(2) {
|
||||
width: 4.14vw;
|
||||
height: 4.14vw;
|
||||
width: var(--one);
|
||||
height: var(--one);
|
||||
top: 10%;
|
||||
animation-duration: 8s;
|
||||
animation-delay: 1s;
|
||||
|
|
@ -228,8 +225,8 @@ export const sharedStyles: CSSResult = css`
|
|||
animation-delay: 2s;
|
||||
}
|
||||
.bubbles_vertical:nth-child(4) {
|
||||
width: 2.3vw;
|
||||
height: 2.3vw;
|
||||
width: var(--two);
|
||||
height: var(--two);
|
||||
animation-duration: 6s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
|
@ -240,8 +237,8 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
.bubbles_vertical:nth-child(6) {
|
||||
top: 80%;
|
||||
width: 4.14vw;
|
||||
height: 4.14vw;
|
||||
width: var(--one);
|
||||
height: var(--one);
|
||||
animation-duration: 6s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
|
@ -252,8 +249,8 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
.bubbles_vertical:nth-child(8) {
|
||||
bottom: 90%;
|
||||
width: 2.3vw;
|
||||
height: 2.3vw;
|
||||
width: var(--two);
|
||||
height: var(--two);
|
||||
animation-duration: 9s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property, query} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './battery-styles'
|
||||
import lightning from './svg/lightning.svg'
|
||||
|
||||
@customElement('star-battery')
|
||||
export class StarBattery extends LitElement {
|
||||
|
|
@ -12,6 +13,8 @@ export class StarBattery extends LitElement {
|
|||
|
||||
@property({type: Boolean, reflect: true}) charge = false
|
||||
|
||||
@query('.container') _container: any
|
||||
|
||||
@query('.power') _power: any
|
||||
|
||||
@query('.percent') _percent: any
|
||||
|
|
@ -31,20 +34,18 @@ export class StarBattery extends LitElement {
|
|||
if (newValue !== null) {
|
||||
for (var i = 0; i < 20; i++) {
|
||||
const bubbles = document.createElement('span')
|
||||
if (this.vertical == true) {
|
||||
bubbles.className = 'bubbles_vertical'
|
||||
this._power.append(bubbles)
|
||||
} else {
|
||||
bubbles.className = 'bubbles'
|
||||
this._power.append(bubbles)
|
||||
}
|
||||
bubbles.className = 'bubbles'
|
||||
this._container.append(bubbles)
|
||||
}
|
||||
} else {
|
||||
this._power.innerHTML = ''
|
||||
this.shadowRoot
|
||||
?.querySelectorAll('.bubbles')
|
||||
.forEach((span) => span.remove())
|
||||
}
|
||||
break
|
||||
case 'percent':
|
||||
if (newValue !== null) {
|
||||
this.percent = newValue
|
||||
this.style.setProperty('--power-right', 100 - this.percent + '%')
|
||||
if (this.percent == 0) {
|
||||
this.style.setProperty('--percent-left', '19.5%')
|
||||
|
|
@ -64,8 +65,29 @@ export class StarBattery extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
protected firstUpdated(): void {
|
||||
this.charge = true
|
||||
protected resize() {
|
||||
var width = this._container.clientWidth
|
||||
this.style.setProperty('--number-size', width / 9 + 'px')
|
||||
this.style.setProperty('--percent-size', width / 17.4 + 'px')
|
||||
this.style.setProperty('--container-radius', width / 22.6 + 'px')
|
||||
this.style.setProperty('--shadow-one', width / 113 + 'px')
|
||||
this.style.setProperty('--shadow-two', width / 45.2 + 'px')
|
||||
this.style.setProperty('--bubbles', width / 18.8 + 'px')
|
||||
this.style.setProperty('--power-other', width / 18.8 + 'px')
|
||||
this.style.setProperty('--one', width / 25 + 'px')
|
||||
this.style.setProperty('--two', width / 45.2 + 'px')
|
||||
this.style.setProperty('--first', width / 18.08 + 'px')
|
||||
this.style.setProperty('--second', width / 6.03 + 'px')
|
||||
this.style.setProperty('--third', -(width / 18.08) + 'px')
|
||||
this.style.setProperty('--forth', -(width / 11.9) + 'px')
|
||||
this.style.setProperty('--fifth', -(width / 9.04) + 'px')
|
||||
}
|
||||
|
||||
protected firstUpdated() {
|
||||
this.resize()
|
||||
window.addEventListener('resize', () => {
|
||||
this.resize()
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -75,7 +97,7 @@ export class StarBattery extends LitElement {
|
|||
<div class="power"></div>
|
||||
<span class="number">${Math.round(this.percent)}</span>
|
||||
<span class="percent">%</span>
|
||||
<img src="src/assets/lightning.svg" class="lightning" />
|
||||
<img src="${lightning}" class="lightning" />
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663655792624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1490" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M739.2 32L160 515.2h243.2L284.8 992 864 518.4H633.6z" p-id="1491" fill="#ebc883"></path></svg>
|
||||
|
After Width: | Height: | Size: 425 B |
|
|
@ -40,6 +40,7 @@ export class StarButton extends StarBaseElement {
|
|||
@property({type: String}) treatment = ''
|
||||
@property({type: String}) icon = 'bug'
|
||||
@property({type: String}) iconcolor = ''
|
||||
@property({type: String}) fontsize = ''
|
||||
|
||||
getBaseButton(): HTMLTemplateResult {
|
||||
return html`
|
||||
|
|
@ -59,9 +60,16 @@ export class StarButton extends StarBaseElement {
|
|||
}
|
||||
|
||||
getIconOnlyButton(): HTMLTemplateResult {
|
||||
return html`
|
||||
if(this.fontsize){
|
||||
return html`
|
||||
<button data-icon=${this.icon} style="font-size:${this.fontsize}"></button>
|
||||
`
|
||||
}else {
|
||||
return html`
|
||||
<button data-icon=${this.icon}></button>
|
||||
`
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getConfirmButton(): HTMLTemplateResult {
|
||||
|
|
|
|||
|
|
@ -14,14 +14,17 @@
|
|||
```
|
||||
<star-digicipher></star-digicipher>
|
||||
```
|
||||
|
||||
1. `saveMode` 属性代表存储模式，更改密码、确认密码后存储新密码
|
||||
|
||||
2. `saveMode` 属性代表存储模式，更改密码、确认密码后存储新密码
|
||||
```
|
||||
<star-digicipher saveMode></star-digicipher>
|
||||
```
|
||||
|
||||
## 发送事件
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
解锁成功：`star-digicipher-unlocksuccess` **value:** `this.passwd`<br>
|
||||
解锁 5 次失败，跳转已锁定：`star-digicipher-locked` **value:** `false`<br>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export class StarNotification extends LitElement {
|
|||
// 仅more-notifiactions-first有
|
||||
@property({type: String}) secondTitle = ''
|
||||
@property({type: String}) secondText = ''
|
||||
|
||||
@property({type: Boolean}) isToast = false
|
||||
@query('.notification') notification!: HTMLDivElement
|
||||
@query('.btn-tool') btnTool!: HTMLDivElement
|
||||
@query('.arrow-up') arrowUp!: HTMLDivElement
|
||||
|
|
@ -130,42 +130,75 @@ export class StarNotification extends LitElement {
|
|||
this.notificationType == 'more-notifiactions'
|
||||
? this.radiusType
|
||||
: 'border-radius'
|
||||
|
||||
return html`
|
||||
<div class="one">
|
||||
<div
|
||||
class="notification ${otherClass}"
|
||||
role="link"
|
||||
tabindex="0"
|
||||
data-notification-id=${this.id}
|
||||
data-no-clear=${this.noclear}
|
||||
data-obsolete-a-p-i="false"
|
||||
data-type=${this.type}
|
||||
data-manifest-u-r-l=${this.manifesturl}
|
||||
@touchstart=${this}
|
||||
@touchmove=${this}
|
||||
@touchend=${this}
|
||||
@click=${this}
|
||||
>
|
||||
<img src=${this.src} role="presentation" />
|
||||
<div class="title-container">
|
||||
<div class="title" dir="auto">${this.title}</div>
|
||||
<span class="timestamp" data-timestamp=${this.timestamp}>
|
||||
${this.timestamp}
|
||||
</span>
|
||||
if (!this.isToast) {
|
||||
return html`
|
||||
<div class="one">
|
||||
<div
|
||||
class="notification ${otherClass}"
|
||||
role="link"
|
||||
tabindex="0"
|
||||
data-notification-id=${this.id}
|
||||
data-no-clear=${this.noclear}
|
||||
data-obsolete-a-p-i="false"
|
||||
data-type=${this.type}
|
||||
data-manifest-u-r-l=${this.manifesturl}
|
||||
@touchstart=${this}
|
||||
@touchmove=${this}
|
||||
@touchend=${this}
|
||||
@click=${this}
|
||||
>
|
||||
<img src=${this.src} role="presentation" />
|
||||
<div class="title-container">
|
||||
<div class="title" dir="auto">${this.title}</div>
|
||||
<span class="timestamp" data-timestamp=${this.timestamp}>
|
||||
${this.timestamp}
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="detail-content" dir="auto">${this.text}</div>
|
||||
<span class="arrow-up" data-icon="o"></span>
|
||||
${arrowShow}
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="detail-content" dir="auto">${this.text}</div>
|
||||
<span class="arrow-up" data-icon="o"></span>
|
||||
${arrowShow}
|
||||
<div class="btn-tool">
|
||||
<div data-icon="delete" @click=${this}></div>
|
||||
<div data-icon="settings" @click=${this}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-tool">
|
||||
<div data-icon="delete" @click=${this}></div>
|
||||
<div data-icon="settings" @click=${this}></div>
|
||||
`
|
||||
} else {
|
||||
return html`
|
||||
<div class="one">
|
||||
<div
|
||||
class="notification ${otherClass}"
|
||||
role="link"
|
||||
tabindex="0"
|
||||
data-notification-id=${this.id}
|
||||
data-no-clear=${this.noclear}
|
||||
data-obsolete-a-p-i="false"
|
||||
data-type=${this.type}
|
||||
data-manifest-u-r-l=${this.manifesturl}
|
||||
@touchstart=${this}
|
||||
@touchmove=${this}
|
||||
@touchend=${this}
|
||||
@click=${this}
|
||||
>
|
||||
<img src=${this.src} role="presentation" />
|
||||
<div class="title-container">
|
||||
<div class="title" dir="auto">${this.title}</div>
|
||||
<span class="timestamp" data-timestamp=${this.timestamp}>
|
||||
${this.timestamp}
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="detail-content" dir="auto">${this.text}</div>
|
||||
<span class="arrow-up" data-icon="o"></span>
|
||||
${arrowShow}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
getmorefirst(): HTMLTemplateResult | typeof nothing {
|
||||
|
|
@ -250,123 +283,92 @@ export class StarNotification extends LitElement {
|
|||
|
||||
@eventOptions({passive: false})
|
||||
handleEvent(event: TouchEvent) {
|
||||
switch (event.type) {
|
||||
case 'touchstart':
|
||||
this.touchAction.start.clientX = event.touches[0].clientX
|
||||
this.btnTool.style.visibility = 'visiable'
|
||||
break
|
||||
case 'touchmove':
|
||||
event.preventDefault()
|
||||
let deleteBtn = this.btnTool.children[0] as HTMLElement
|
||||
let settingsBtn = this.btnTool.children[1] as HTMLElement
|
||||
this.touchAction.last.clientX = event.touches[0].clientX
|
||||
let touchPosX =
|
||||
this.touchAction.last.clientX - this.touchAction.start.clientX
|
||||
// if (Math.abs(touchPosX) > 266) {
|
||||
// touchPosX = 266;
|
||||
// }
|
||||
|
||||
// this.notification.style.transform = 'translateX(' + touchPosX + 'px)';
|
||||
if (touchPosX < 0) {
|
||||
// if (Math.abs(touchPosX) > 18) {
|
||||
// (this.btnTool.children[1] as HTMLElement).style.visibility = "visible";
|
||||
// }
|
||||
// if (Math.abs(touchPosX) > 142) {
|
||||
// (this.btnTool.children[0] as HTMLElement).style.visibility = "visible";
|
||||
if (!this.isToast) {
|
||||
switch (event.type) {
|
||||
case 'touchstart':
|
||||
this.touchAction.start.clientX = event.touches[0].clientX
|
||||
this.btnTool.style.visibility = 'visiable'
|
||||
break
|
||||
case 'touchmove':
|
||||
event.preventDefault()
|
||||
let deleteBtn = this.btnTool.children[0] as HTMLElement
|
||||
let settingsBtn = this.btnTool.children[1] as HTMLElement
|
||||
this.touchAction.last.clientX = event.touches[0].clientX
|
||||
let touchPosX =
|
||||
this.touchAction.last.clientX - this.touchAction.start.clientX
|
||||
// if (Math.abs(touchPosX) > 266) {
|
||||
// touchPosX = 266;
|
||||
// }
|
||||
|
||||
// if (Math.abs(touchPosX) > 222) {
|
||||
// (this.btnTool.children[1] as HTMLElement).style.opacity = "1";
|
||||
// (this.btnTool.children[0] as HTMLElement).style.opacity = "1";
|
||||
// }
|
||||
let translateX
|
||||
if (screen.width >= 900) {
|
||||
translateX = 266
|
||||
} else if (screen.width >= 600) {
|
||||
translateX = 133
|
||||
} else {
|
||||
translateX = 88
|
||||
}
|
||||
this.notification.style.transform =
|
||||
'translateX(-' + translateX + 'px)'
|
||||
let self = this
|
||||
this.notification.addEventListener(
|
||||
'transitionend',
|
||||
function tranEnd() {
|
||||
self.notification.removeEventListener('transitionend', tranEnd)
|
||||
deleteBtn.style.visibility = 'visible'
|
||||
settingsBtn.style.visibility = 'visible'
|
||||
deleteBtn.style.opacity = '1'
|
||||
settingsBtn.style.opacity = '1'
|
||||
// this.notification.style.transform = 'translateX(' + touchPosX + 'px)';
|
||||
if (touchPosX < 0) {
|
||||
// if (Math.abs(touchPosX) > 18) {
|
||||
// (this.btnTool.children[1] as HTMLElement).style.visibility = "visible";
|
||||
// }
|
||||
// if (Math.abs(touchPosX) > 142) {
|
||||
// (this.btnTool.children[0] as HTMLElement).style.visibility = "visible";
|
||||
// }
|
||||
|
||||
// if (Math.abs(touchPosX) > 222) {
|
||||
// (this.btnTool.children[1] as HTMLElement).style.opacity = "1";
|
||||
// (this.btnTool.children[0] as HTMLElement).style.opacity = "1";
|
||||
// }
|
||||
let translateX
|
||||
if (screen.width >= 900) {
|
||||
translateX = 266
|
||||
} else if (screen.width >= 600) {
|
||||
translateX = 133
|
||||
} else {
|
||||
translateX = 88
|
||||
}
|
||||
)
|
||||
} else if (touchPosX > 0) {
|
||||
// if (touchPosX > 44) {
|
||||
// (this.btnTool.children[0] as any).style.opacity = 0.6;
|
||||
// }
|
||||
|
||||
// if (touchPosX > 124) {
|
||||
// (this.btnTool.children[0] as any).style.visibility = "hidden";
|
||||
// }
|
||||
|
||||
// if (touchPosX > 168) {
|
||||
// (this.btnTool.children[1] as any).style.opacity = 0.6;
|
||||
// }
|
||||
|
||||
// if (touchPosX > 248) {
|
||||
// (this.btnTool.children[1] as any).style.visibility = "hidden";
|
||||
// }
|
||||
deleteBtn.style.visibility = 'hidden'
|
||||
settingsBtn.style.visibility = 'hidden'
|
||||
this.notification.style.transform = 'translateX(' + 0 + 'px)'
|
||||
}
|
||||
break
|
||||
case 'touchend':
|
||||
break
|
||||
case 'click':
|
||||
event.stopPropagation()
|
||||
let self = this
|
||||
let target = event.target as HTMLElement
|
||||
switch (target.dataset.icon) {
|
||||
case 'delete':
|
||||
target.setAttribute('clicked', 'true')
|
||||
target.addEventListener('transitionend', function tranEnd() {
|
||||
target.removeEventListener('transitionend', tranEnd)
|
||||
target.removeAttribute('clicked')
|
||||
self.dispatchEvent(
|
||||
new CustomEvent('notification-delete', {
|
||||
detail: {
|
||||
id: self.id,
|
||||
notification: self,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
})
|
||||
break
|
||||
case 'settings':
|
||||
target.setAttribute('clicked', 'true')
|
||||
target.addEventListener('transitionend', function tranEnd() {
|
||||
target.removeEventListener('transitionend', tranEnd)
|
||||
target.removeAttribute('clicked')
|
||||
self.dispatchEvent(
|
||||
new CustomEvent('notification-settings-configure', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
})
|
||||
break
|
||||
default:
|
||||
this.notification.setAttribute('clicked', 'true')
|
||||
this.notification.style.transform =
|
||||
'translateX(-' + translateX + 'px)'
|
||||
let self = this
|
||||
this.notification.addEventListener(
|
||||
'transitionend',
|
||||
function tranEnd() {
|
||||
self.notification.removeEventListener('transitionend', tranEnd)
|
||||
self.notification.removeAttribute('clicked')
|
||||
deleteBtn.style.visibility = 'visible'
|
||||
settingsBtn.style.visibility = 'visible'
|
||||
deleteBtn.style.opacity = '1'
|
||||
settingsBtn.style.opacity = '1'
|
||||
}
|
||||
)
|
||||
} else if (touchPosX > 0) {
|
||||
// if (touchPosX > 44) {
|
||||
// (this.btnTool.children[0] as any).style.opacity = 0.6;
|
||||
// }
|
||||
|
||||
// if (touchPosX > 124) {
|
||||
// (this.btnTool.children[0] as any).style.visibility = "hidden";
|
||||
// }
|
||||
|
||||
// if (touchPosX > 168) {
|
||||
// (this.btnTool.children[1] as any).style.opacity = 0.6;
|
||||
// }
|
||||
|
||||
// if (touchPosX > 248) {
|
||||
// (this.btnTool.children[1] as any).style.visibility = "hidden";
|
||||
// }
|
||||
deleteBtn.style.visibility = 'hidden'
|
||||
settingsBtn.style.visibility = 'hidden'
|
||||
this.notification.style.transform = 'translateX(' + 0 + 'px)'
|
||||
}
|
||||
break
|
||||
case 'touchend':
|
||||
break
|
||||
case 'click':
|
||||
event.stopPropagation()
|
||||
let self = this
|
||||
let target = event.target as HTMLElement
|
||||
switch (target.dataset.icon) {
|
||||
case 'delete':
|
||||
target.setAttribute('clicked', 'true')
|
||||
target.addEventListener('transitionend', function tranEnd() {
|
||||
target.removeEventListener('transitionend', tranEnd)
|
||||
target.removeAttribute('clicked')
|
||||
self.dispatchEvent(
|
||||
new CustomEvent('notification-click', {
|
||||
new CustomEvent('notification-delete', {
|
||||
detail: {
|
||||
id: self.id,
|
||||
notification: self,
|
||||
|
|
@ -375,11 +377,47 @@ export class StarNotification extends LitElement {
|
|||
composed: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
)
|
||||
break
|
||||
}
|
||||
break
|
||||
})
|
||||
break
|
||||
case 'settings':
|
||||
target.setAttribute('clicked', 'true')
|
||||
target.addEventListener('transitionend', function tranEnd() {
|
||||
target.removeEventListener('transitionend', tranEnd)
|
||||
target.removeAttribute('clicked')
|
||||
self.dispatchEvent(
|
||||
new CustomEvent('notification-settings-configure', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
})
|
||||
break
|
||||
default:
|
||||
this.notification.setAttribute('clicked', 'true')
|
||||
this.notification.addEventListener(
|
||||
'transitionend',
|
||||
function tranEnd() {
|
||||
self.notification.removeEventListener(
|
||||
'transitionend',
|
||||
tranEnd
|
||||
)
|
||||
self.notification.removeAttribute('clicked')
|
||||
self.dispatchEvent(
|
||||
new CustomEvent('notification-click', {
|
||||
detail: {
|
||||
id: self.id,
|
||||
notification: self,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
)
|
||||
break
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,14 +23,20 @@
|
|||
|
||||
### 默认
|
||||
|
||||
```
|
||||
```js
|
||||
<star-pattern-view></star-pattern-view>
|
||||
```
|
||||
### `saveMode` 属性代表存储模式，绘制图案、确认图案后存储新图案密码
|
||||
|
||||
```js
|
||||
<star-pattern-view saveMode></star-pattern-view>
|
||||
```
|
||||
|
||||
### 距离顶部的位置 `topDir` 默认`217.5px`
|
||||
|
||||
```
|
||||
```js
|
||||
<star-pattern-view topDir="300px"></star-pattern-view>
|
||||
<star-pattern-view topDir="-100px"></star-pattern-view>
|
||||
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {html, LitElement, css, PropertyValueMap} from 'lit'
|
||||
import {html, LitElement, css, CSSResultArray, PropertyValueMap} from 'lit'
|
||||
import {customElement, property, query} from 'lit/decorators.js'
|
||||
// import {sharedStyles} from './pattern-view-style'
|
||||
|
||||
|
|
@ -13,6 +13,24 @@ export class StarPatternView extends LitElement {
|
|||
canvas {
|
||||
margin-top: var(--top-dir);
|
||||
}
|
||||
p {
|
||||
position: absolute;
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #292929;
|
||||
font-family: 'OPPOSans';
|
||||
margin-top: 0;
|
||||
color: #292929;
|
||||
font-size: 20px;
|
||||
height: 26.5px;
|
||||
line-height: 26.5px;
|
||||
width: 150px;
|
||||
left: 50%;
|
||||
top: 31%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
`
|
||||
// public static override get styles(): CSSResultArray {
|
||||
// return [sharedStyles]
|
||||
|
|
@ -29,6 +47,8 @@ export class StarPatternView extends LitElement {
|
|||
this.Draw()
|
||||
}
|
||||
}
|
||||
@property({type: Boolean}) saveMode = false
|
||||
@property({type: Boolean}) confirm = false
|
||||
@property({type: Number}) top = 0
|
||||
@property({type: Number}) R = 35
|
||||
@property({type: Number}) X = 0
|
||||
|
|
@ -38,8 +58,11 @@ export class StarPatternView extends LitElement {
|
|||
@property({type: Number}) OffsetX = document.body.offsetWidth / 3.5
|
||||
@property({type: Number}) OffsetY = document.body.offsetWidth / 3.5
|
||||
@property({type: Array}) circleArr: {X: number; Y: number}[] = []
|
||||
@property({type: Array}) pwdArr: number[] = []
|
||||
@property({type: Array}) passwdArr = [0, 1, 2, 5, 4, 3]
|
||||
@property({type: Array}) passwd: number[] = []
|
||||
@property({type: Array}) savewd: number[] = []
|
||||
@property({type: Array}) passwdArr = []
|
||||
@property({type: String}) mode = ''
|
||||
@property({type: String}) changeText = ''
|
||||
@property({type: String})
|
||||
get topDir() {
|
||||
return this._topDir
|
||||
|
|
@ -52,7 +75,7 @@ export class StarPatternView extends LitElement {
|
|||
|
||||
render() {
|
||||
return html`
|
||||
<!-- <div style="height:200px;background-color:red"></div> -->
|
||||
<p>${this.changeText}</p>
|
||||
<canvas
|
||||
id="canvas"
|
||||
@touchstart=${this.touchStart}
|
||||
|
|
@ -75,6 +98,37 @@ export class StarPatternView extends LitElement {
|
|||
this.Y = (this.canvasHeight - 2 * this.OffsetY - this.R * 2 * 3) / 2
|
||||
this.createCirclePoint(this.X, this.Y)
|
||||
this.Draw()
|
||||
this.changeText = this.saveMode ? '请绘制图案' : '绘制图案'
|
||||
// switch (this.mode) {
|
||||
// case "create":
|
||||
// this.changeText = '请绘制图案'
|
||||
// case "verify":
|
||||
// this.
|
||||
// break;
|
||||
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
this.addEventListener('passcode-create-success', this)
|
||||
this.addEventListener('passcode-verify-success', this)
|
||||
this.addEventListener('passcode-verify-error', this)
|
||||
}
|
||||
|
||||
handleEvent(event: CustomEvent) {
|
||||
switch (event.type) {
|
||||
case 'passcode-create-success':
|
||||
this.changeText = '密码设置成功'
|
||||
break
|
||||
case 'passcode-verify-success':
|
||||
this.getRed = false
|
||||
break
|
||||
case 'passcode-verify-error':
|
||||
this.getRed = true
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
createCirclePoint(diffX: number, diffY: number) {
|
||||
|
|
@ -91,10 +145,10 @@ export class StarPatternView extends LitElement {
|
|||
}
|
||||
|
||||
Draw(touchPoint?: {X: any; Y: any}) {
|
||||
if (this.pwdArr.length > 1) {
|
||||
if (this.passwd.length > 1) {
|
||||
this.cxt.beginPath()
|
||||
for (var i = 0; i < this.pwdArr.length; i++) {
|
||||
var pointIndex = this.pwdArr[i]
|
||||
for (var i = 0; i < this.passwd.length; i++) {
|
||||
var pointIndex = this.passwd[i]
|
||||
this.cxt.lineTo(
|
||||
this.circleArr[pointIndex].X,
|
||||
this.circleArr[pointIndex].Y
|
||||
|
|
@ -106,7 +160,7 @@ export class StarPatternView extends LitElement {
|
|||
this.cxt.stroke()
|
||||
this.cxt.closePath()
|
||||
if (touchPoint != null) {
|
||||
var lastPointIndex = this.pwdArr[this.pwdArr.length - 1]
|
||||
var lastPointIndex = this.passwd[this.passwd.length - 1]
|
||||
var lastPoint = this.circleArr[lastPointIndex]
|
||||
this.cxt.beginPath()
|
||||
this.cxt.moveTo(lastPoint.X, lastPoint.Y)
|
||||
|
|
@ -130,7 +184,7 @@ export class StarPatternView extends LitElement {
|
|||
this.cxt.closePath()
|
||||
this.cxt.fill()
|
||||
//滑动后小圆的颜色
|
||||
if (this.pwdArr.indexOf(i) >= 0) {
|
||||
if (this.passwd.indexOf(i) >= 0) {
|
||||
this.cxt.fillStyle = this.getRed ? '#FF4040' : '#333333'
|
||||
this.cxt.beginPath()
|
||||
this.cxt.arc(Point.X, Point.Y, this.R - 26, 0, Math.PI * 2, true)
|
||||
|
|
@ -140,26 +194,61 @@ export class StarPatternView extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
getSelectPwd(touches: any, pwdArr: number[]) {
|
||||
getSelectPwd(touches: any, passwd: number[]) {
|
||||
for (var i = 0; i < this.circleArr.length; i++) {
|
||||
var currentPoint = this.circleArr[i]
|
||||
var xdiff = Math.abs(currentPoint.X - touches.pageX)
|
||||
/******** this.top = canvas向下移动的距离 **********/
|
||||
var ydiff = Math.abs(currentPoint.Y - touches.pageY + this.top)
|
||||
var dir = Math.pow(xdiff * xdiff + ydiff * ydiff, 0.5)
|
||||
if (dir > this.R || pwdArr.indexOf(i) >= 0) continue
|
||||
pwdArr.push(i)
|
||||
if (dir > this.R || passwd.indexOf(i) >= 0) continue
|
||||
passwd.push(i)
|
||||
break
|
||||
}
|
||||
}
|
||||
touchStart(e: TouchEvent) {
|
||||
changePasswd() {
|
||||
this.savewd = this.passwd
|
||||
console.log('请确认密码', this.savewd.toString())
|
||||
this.confirm = true
|
||||
this.changeText = '请确认图案'
|
||||
console.log('###', this.passwd)
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-pattern-view-settings-change', {
|
||||
detail: {
|
||||
value: this.passwd,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
confirmPasswd() {
|
||||
if (this.savewd.toString() == this.passwd.toString()) {
|
||||
console.log('###', this.passwd)
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-pattern-view-settings-confirm', {
|
||||
detail: {
|
||||
value: this.passwd,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
} else {
|
||||
this.changeText = '请重新绘制图案'
|
||||
console.log('###', this.passwd)
|
||||
this.confirm = false
|
||||
this.passwd = []
|
||||
}
|
||||
}
|
||||
touchStart(_e: TouchEvent) {
|
||||
this.getRed = false
|
||||
this.getSelectPwd(e.touches[0], this.pwdArr)
|
||||
}
|
||||
touchMove(e: TouchEvent) {
|
||||
e.preventDefault()
|
||||
var touches = e.touches[0]
|
||||
this.getSelectPwd(touches, this.pwdArr)
|
||||
this.getSelectPwd(touches, this.passwd)
|
||||
// 清除画布,0,0代表从什么位置开始,canvasWidth,canvasHeight代表清除的宽度和高度
|
||||
this.cxt = this.canvas.getContext('2d')!
|
||||
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||||
|
|
@ -171,21 +260,29 @@ export class StarPatternView extends LitElement {
|
|||
}
|
||||
touchEnd(_e: TouchEvent) {
|
||||
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||||
this.Draw()
|
||||
// if (this.pwdArr.toString() == this.passwdArr.toString()) {
|
||||
// console.log('密码正确', this.passwdArr.toString())
|
||||
// } else {
|
||||
// this.getRed = true
|
||||
// console.log('密码错误', this.pwdArr.toString())
|
||||
// this.Draw()
|
||||
// }
|
||||
this.getRed = true
|
||||
this.pwdArr = []
|
||||
this.dispatchEvent(
|
||||
new TouchEvent('end', {
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
return this.passwdArr
|
||||
//进入存储模式
|
||||
if (this.saveMode) {
|
||||
this.getRed = false
|
||||
if (!this.confirm) {
|
||||
this.changePasswd()
|
||||
} else {
|
||||
this.confirmPasswd()
|
||||
}
|
||||
this.passwd = []
|
||||
this.Draw()
|
||||
} else {
|
||||
console.log('$$$', this.passwd)
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-pattern-view-passwd', {
|
||||
detail: {
|
||||
value: this.passwd,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
this.passwd = []
|
||||
this.Draw()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
# star-weather
|
||||
|
||||
星光 Web 组件——天气组件：weather组件介绍（10 月 08 日)
|
||||
|
||||
## 介绍
|
||||
|
||||
star-weather 组件主要是用来显示当前天气状况和预测1周内天气详情的组件
|
||||
star-weather 属性：
|
||||
|
||||
### 1、type 属性
|
||||
天气风格样式类型,type一共包含6种类型，分别为type11、type12、type21、type22、type23和type32，其中
|
||||
type="type11"的内容排布为只包含天气图标的样式，
|
||||
type="type12"的内容排布(从左向右)为包含地理位置信息、温度和对应的天气图标，
|
||||
type="type21"的内容排布(从上至下)为包含天气图标，地理位置和温度信息，
|
||||
type="type22"的内容排布(从上至下)为包含地理位置、温度、天气图标、空气质量、体感温度、湿度、风级、能见度、紫外线等详细信息。
|
||||
`html demo <star-weather type="type22"></star-weather> `
|
||||
|
||||
### 2、data 属性
|
||||
|
||||
天气详细信息，其中包含地理位置、温度、日期、天气情况、风级、湿度、空气质量、体感温度、能见度、紫外线等具体信息
|
||||
`html demo <star-weather type="type22" .data="${this.data}"></star-weather> `
|
||||
### 3、自适应布局
|
||||
天气组件整体布局设计为自适应布局,可自适应缩放显示天气组件。
|
||||
### 4、weatherData数据格式说明
|
||||
weatherData = {
|
||||
location: "", //位置信息
|
||||
weatherInfo: [ //天气详情信息，包含天气情况、风级、湿度、空气质量、体感温度、能见度、紫外线等详情信息
|
||||
{
|
||||
date: new Date(), 日期
|
||||
……
|
||||
},
|
||||
{
|
||||
date: new Date(),
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/weather",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./weather.js": {
|
||||
"default": "./weather.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_2914_176526)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3043 38H32.8696C37.3571 38 41 34.3071 41 29.7451C41 25.3341 37.5789 21.7277 33.2814 21.5117C31.9404 15.4919 26.6398 11 20.3043 11C12.9553 11 7 17.0468 7 24.4973C7 31.4457 12.1739 37.1686 18.8261 37.919L20.3043 38Z" fill="url(#paint0_linear_2914_176526)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2914_176526" x="3" y="9" width="42" height="35" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2914_176526"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2914_176526" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_2914_176526" x1="48.0217" y1="20.8478" x2="23.747" y2="2.34606" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFEDBA"/>
|
||||
<stop offset="1" stop-color="#FFFCF2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,38 @@
|
|||
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_1658_81628)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M119 53.9935C119 31.9083 101.091 14 78.9935 14C56.9093 14 39 31.9083 39 53.9935C39 76.0917 56.9093 94 78.9935 94C101.091 94 119 76.0917 119 53.9935Z" fill="url(#paint0_linear_1658_81628)"/>
|
||||
<path d="M78.9935 14.5C100.815 14.5 118.5 32.1846 118.5 53.9935C118.5 75.8155 100.815 93.5 78.9935 93.5C57.1855 93.5 39.5 75.8156 39.5 53.9935C39.5 32.1845 57.1854 14.5 78.9935 14.5Z" stroke="#F2F2F2" stroke-opacity="0.9"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_1658_81628)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.2174 114H77.4783C89.3571 114 99 104.426 99 92.5983C99 81.1626 89.9441 71.8124 78.5683 71.2525C75.0186 55.6457 60.9876 44 44.2174 44C24.764 44 9 59.6769 9 78.993C9 97.0074 22.6957 111.844 40.3043 113.79L44.2174 114Z" fill="url(#paint1_linear_1658_81628)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_1658_81628" x="31" y="6" width="96" height="96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1658_81628"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1658_81628" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_1658_81628" x="5" y="42" width="98" height="78" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1658_81628"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1658_81628" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_1658_81628" x1="42.5" y1="46.5" x2="91.7273" y2="106.727" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0028" stop-color="#DDDBD9"/>
|
||||
<stop offset="1" stop-color="#989CA5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1658_81628" x1="117.587" y1="69.5314" x2="54.3175" y2="20.2954" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C7C9D0"/>
|
||||
<stop offset="1" stop-color="#F4F4F3"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,21 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_2914_176524)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3043 37H32.8696C37.3571 37 41 33.3071 41 28.7451C41 24.3341 37.5789 20.7277 33.2814 20.5117C31.9404 14.4919 26.6398 10 20.3043 10C12.9553 10 7 16.0468 7 23.4973C7 30.4457 12.1739 36.1686 18.8261 36.919L20.3043 37Z" fill="url(#paint0_linear_2914_176524)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2914_176524" x="3" y="8" width="42" height="35" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2914_176524"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2914_176524" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_2914_176524" x1="48.0217" y1="19.8478" x2="23.747" y2="1.34606" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#80848D"/>
|
||||
<stop offset="1" stop-color="#BCC2CC"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,38 @@
|
|||
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_1425_53262)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M119 55.9935C119 33.9083 101.091 16 78.9935 16C56.9093 16 39 33.9083 39 55.9935C39 78.0917 56.9093 96 78.9935 96C101.091 96 119 78.0917 119 55.9935Z" fill="url(#paint0_linear_1425_53262)"/>
|
||||
<path d="M78.9935 16.5C100.815 16.5 118.5 34.1846 118.5 55.9935C118.5 77.8155 100.815 95.5 78.9935 95.5C57.1855 95.5 39.5 77.8156 39.5 55.9935C39.5 34.1845 57.1854 16.5 78.9935 16.5Z" stroke="#FFDD80" stroke-opacity="0.9"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_1425_53262)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.2174 116H77.4783C89.3571 116 99 106.426 99 94.5983C99 83.1626 89.9441 73.8124 78.5683 73.2525C75.0186 57.6457 60.9876 46 44.2174 46C24.764 46 9 61.6769 9 80.993C9 99.0074 22.6957 113.844 40.3043 115.79L44.2174 116Z" fill="url(#paint1_linear_1425_53262)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_1425_53262" x="31" y="8" width="96" height="96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.827451 0 0 0 0 0.309804 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1425_53262"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1425_53262" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_1425_53262" x="5" y="44" width="98" height="78" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1425_53262"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1425_53262" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_1425_53262" x1="29.9091" y1="61.4545" x2="91.7273" y2="108.727" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0028" stop-color="#FFC338"/>
|
||||
<stop offset="1" stop-color="#FF9C12"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1425_53262" x1="117.587" y1="71.5314" x2="54.3175" y2="22.2954" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFEDBA"/>
|
||||
<stop offset="1" stop-color="#FFFCF2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,38 @@
|
|||
<svg width="54" height="51" viewBox="0 0 54 51" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_2914_176531)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M46 22.9976C46 14.7156 39.284 8 30.9976 8C22.716 8 16 14.7156 16 22.9976C16 31.2844 22.716 38 30.9976 38C39.284 38 46 31.2844 46 22.9976Z" fill="url(#paint0_linear_2914_176531)"/>
|
||||
<path d="M30.9976 8.5C39.008 8.5 45.5 14.9919 45.5 22.9976C45.5 31.0082 39.0079 37.5 30.9976 37.5C22.9922 37.5 16.5 31.0083 16.5 22.9976C16.5 14.9918 22.9921 8.5 30.9976 8.5Z" stroke="#FFDD80" stroke-opacity="0.9"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_2914_176531)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3043 45H29.8696C34.3571 45 38 41.4439 38 37.0508C38 32.8032 34.5789 29.3303 30.2814 29.1224C28.9404 23.3255 23.6398 19 17.3043 19C9.95528 19 4 24.8228 4 31.9974C4 38.6885 9.17391 44.1994 15.8261 44.922L17.3043 45Z" fill="url(#paint1_linear_2914_176531)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2914_176531" x="8" y="0" width="46" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.827451 0 0 0 0 0.309804 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2914_176531"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2914_176531" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_2914_176531" x="0" y="17" width="42" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2914_176531"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2914_176531" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_2914_176531" x1="12.5909" y1="25.0455" x2="35.7727" y2="42.7727" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0028" stop-color="#FFC338"/>
|
||||
<stop offset="1" stop-color="#FF9C12"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_2914_176531" x1="45.0217" y1="28.4831" x2="21.4268" y2="9.80775" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFEDBA"/>
|
||||
<stop offset="1" stop-color="#FFFCF2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,21 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_2914_176529)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M40 23.9974C40 15.1633 32.8363 8 23.9974 8C15.1637 8 8 15.1633 8 23.9974C8 32.8367 15.1637 40 23.9974 40C32.8363 40 40 32.8367 40 23.9974Z" fill="url(#paint0_linear_2914_176529)"/>
|
||||
<path d="M23.9974 8.5C32.5603 8.5 39.5 15.4396 39.5 23.9974C39.5 32.5605 32.5602 39.5 23.9974 39.5C15.44 39.5 8.5 32.5606 8.5 23.9974C8.5 15.4395 15.4398 8.5 23.9974 8.5Z" stroke="#FFDD80" stroke-opacity="0.9"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2914_176529" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.827451 0 0 0 0 0.309804 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2914_176529"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2914_176529" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_2914_176529" x1="4.36364" y1="26.1818" x2="29.0909" y2="45.0909" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0028" stop-color="#FFC338"/>
|
||||
<stop offset="1" stop-color="#FF9C12"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,148 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.star-weather-main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 背景框 */
|
||||
.star-weather {
|
||||
width: var(--autoWidth--);
|
||||
min-width: var(--autoWidth--);
|
||||
height: var(--autoHeight--);
|
||||
min-height: var(--autoHeight--);
|
||||
transform: scale(var(--autoScale--));
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
137.64deg,
|
||||
#f5f0f5 0%,
|
||||
#fafafa 20.46%,
|
||||
#d5daf2 90.45%
|
||||
);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.star-weather * {
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* .star-weather-top */
|
||||
.star-weather-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.type12 .star-weather-top {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.type21 .star-weather-top {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
.type22 .star-weather-top {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
/* border:1px solid red; */
|
||||
}
|
||||
/* .star-weather-bottom */
|
||||
.star-weather-bottom {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.type22 .star-weather-bottom {
|
||||
height: 50%;
|
||||
}
|
||||
/* 天气图标 */
|
||||
.star-weather-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
.type11 .star-weather-img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.type12 .star-weather-img {
|
||||
height: 100%;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.type21 .star-weather-img {
|
||||
width: 100%;
|
||||
}
|
||||
.type22 .star-weather-img {
|
||||
height: 90%;
|
||||
margin-right: 30px;
|
||||
/* border:1px solid red; */
|
||||
}
|
||||
.weather-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 位置温度()*/
|
||||
.star-weather-location-temperature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.type12 .star-weather-location-temperature {
|
||||
height: 100%;
|
||||
margin-left: 47px;
|
||||
}
|
||||
.type21 .star-weather-location-temperature {
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.type22 .star-weather-location-temperature {
|
||||
height: 100%;
|
||||
/* margin-top:10%; */
|
||||
margin-left: 47px;
|
||||
}
|
||||
.star-weather-location {
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
font-size: 22px;
|
||||
color: rgba(38, 38, 38, 0.45);
|
||||
}
|
||||
.type21 .star-weather-location {
|
||||
text-align: center;
|
||||
}
|
||||
.star-weather-temperature {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* detailType() */
|
||||
.detail-today-item {
|
||||
height: 50%;
|
||||
width: 31%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 47px;
|
||||
}
|
||||
.detail-today-item-top {
|
||||
font-size: 16px;
|
||||
color: rgba(38, 38, 38, 0.45);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.detail-today-item-bottom {
|
||||
font-size: 26px;
|
||||
text-align: left;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
`
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property, query} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './weather-style'
|
||||
import Sunny from './svg/Sunny.svg'
|
||||
import Cloudy from './svg/Cloudy.svg'
|
||||
import Noload from './svg/Noload.svg'
|
||||
import PartlyCloudy from './svg/Partly Cloudy.svg'
|
||||
const weatherMy: Record<string, boolean> = {
|
||||
Sunny: Sunny,
|
||||
Cloudy: Cloudy,
|
||||
PartlyCloudy: PartlyCloudy,
|
||||
}
|
||||
const typeMy: Record<string, string> = {
|
||||
// height / width
|
||||
type11: '1',
|
||||
type12: '0.4',
|
||||
type21: '1.9',
|
||||
type22: '0.8',
|
||||
type23: '0.7',
|
||||
type32: '1.6',
|
||||
}
|
||||
const minAll: Record<string, string> = {
|
||||
// width
|
||||
type11: '100',
|
||||
type12: '400',
|
||||
type21: '200',
|
||||
type22: '500',
|
||||
type23: '600',
|
||||
type32: '600',
|
||||
}
|
||||
@customElement('star-weather')
|
||||
export class StarWeather extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
@property({type: String}) type = 'type11'
|
||||
@property({type: Object}) data = Object()
|
||||
|
||||
@query('.star-weather-main')
|
||||
starWeather: HTMLDivElement | undefined
|
||||
|
||||
dataBoo() {
|
||||
return !!Object.keys(this.data).length
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<div class="star-weather-main">
|
||||
<div class="star-weather ${this.type}">
|
||||
<div class="star-weather-top">
|
||||
${this.locationType()} ${this.weatherType()}
|
||||
</div>
|
||||
<div class="star-weather-bottom">${this.detailType()}</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
weatherType() {
|
||||
return html`
|
||||
<div class="star-weather-img">
|
||||
<img
|
||||
class="weather-img"
|
||||
src="${weatherMy[
|
||||
this.dataBoo() && this.data.weatherInfo[0]?.weather?.labelEn] || Noload}"
|
||||
/>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
locationType() {
|
||||
if (this.type !== 'type11' && typeMy[this.type]) {
|
||||
return html`
|
||||
<div class="star-weather-location-temperature">
|
||||
<div class="star-weather-location-temperature-main">
|
||||
<div class="star-weather-location">
|
||||
${(this.dataBoo() && this.data.location) || ''}
|
||||
</div>
|
||||
<div class="star-weather-temperature">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.temperature?.max) || ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
detailType() {
|
||||
if (this.type === 'type22') {
|
||||
return html`
|
||||
<span class="detail-today-item">
|
||||
<span class="detail-today-item-top">空气质量</span>
|
||||
<span class="detail-today-item-bottom">
|
||||
${this.dataBoo() && (this.data.weatherInfo[0]?.airQuality?.value +
|
||||
this.data.weatherInfo[0]?.airQuality?.type) || ''}
|
||||
</span>
|
||||
</span>
|
||||
<span class="detail-today-item">
|
||||
<span class="detail-today-item-top">体感温度</span>
|
||||
<span class="detail-today-item-bottom">
|
||||
${(this.dataBoo() &&
|
||||
this.data.weatherInfo[0].somatosensoryTemperature) || ''}
|
||||
</span>
|
||||
</span>
|
||||
<span class="detail-today-item">
|
||||
<span class="detail-today-item-top">湿度</span>
|
||||
<span class="detail-today-item-bottom">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.humidity) || ''}
|
||||
</span>
|
||||
</span>
|
||||
<span class="detail-today-item">
|
||||
<span class="detail-today-item-top">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.wind?.label) || '风向'}
|
||||
</span>
|
||||
<span class="detail-today-item-bottom">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.wind?.value) || ''}
|
||||
</span>
|
||||
</span>
|
||||
<span class="detail-today-item">
|
||||
<span class="detail-today-item-top">能见度</span>
|
||||
<span class="detail-today-item-bottom">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.visibility) || ''}
|
||||
</span>
|
||||
</span>
|
||||
<span class="detail-today-item">
|
||||
<span class="detail-today-item-top">紫外线</span>
|
||||
<span class="detail-today-item-bottom">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.ultravioletRys) || ''}
|
||||
</span>
|
||||
</span>
|
||||
`
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
protected firstUpdated() {
|
||||
this.resize()
|
||||
window.addEventListener('resize', () => {
|
||||
this.resize()
|
||||
})
|
||||
}
|
||||
protected resize() {
|
||||
let parentHeight, parentWidth
|
||||
if (this.parentElement){
|
||||
parentHeight = this.parentElement.offsetHeight
|
||||
parentWidth = this.parentElement.offsetWidth
|
||||
}else if(this.parentNode instanceof ShadowRoot){
|
||||
parentHeight=(this.parentNode.host as HTMLElement).offsetHeight
|
||||
parentWidth=(this.parentNode.host as HTMLElement).offsetWidth
|
||||
}
|
||||
let height = parentHeight || 10
|
||||
let width = parentWidth || 10
|
||||
// console.log(height,width,'111111111')
|
||||
// this.style.setProperty('--autoWidth2--', width + 'px')
|
||||
// this.style.setProperty('--autoHeight2--', height + 'px')
|
||||
let proportion: any = typeMy[this.type]
|
||||
let minOne: any = minAll[this.type]
|
||||
this.style.setProperty('--autoWidth--', minOne + 'px')
|
||||
this.style.setProperty('--autoHeight--', minOne * proportion + 'px')
|
||||
if (height / width >= proportion) {
|
||||
this.style.setProperty('--autoScale--', width / minOne + '')
|
||||
} else {
|
||||
this.style.setProperty('--autoScale--', height / (minOne * proportion) + '')
|
||||
}
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-weather': StarWeather
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@ import './components/radio/radio-group'
|
|||
import './components/radio/radio'
|
||||
import './components/confirm/confirm'
|
||||
import './components/clock/clock'
|
||||
import './components/weather/weather'
|
||||
import './components/toast/toast'
|
||||
import './components/picker/picker'
|
||||
import './components/overflowmenu/overflowmenu'
|
||||
|
|
|
|||
|
|
@ -1,20 +1,25 @@
|
|||
import {html, LitElement, CSSResultArray, css} from 'lit'
|
||||
import {html, LitElement, CSSResultArray, css, PropertyValueMap} from 'lit'
|
||||
import {customElement, query} from 'lit/decorators.js'
|
||||
import {sharedStyles} from '../../../components/battery/battery-styles'
|
||||
|
||||
@customElement('panel-battery')
|
||||
export class PanelBattery extends LitElement {
|
||||
@query('#container') container!: HTMLElement
|
||||
@query('star-battery') battery!: HTMLElement
|
||||
render() {
|
||||
return html`
|
||||
<div id="container">
|
||||
<star-battery vertical></star-battery>
|
||||
</div>
|
||||
<star-battery charge></star-battery>
|
||||
<!-- <star-battery deep></star-battery> -->
|
||||
<!-- <star-battery charge></star-battery> -->
|
||||
`
|
||||
}
|
||||
|
||||
protected firstUpdated(
|
||||
_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
|
||||
): void {
|
||||
;(window as any).battery = this.battery
|
||||
}
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [
|
||||
sharedStyles,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export class PanelButton extends LitElement {
|
|||
return html`
|
||||
<star-ul type="onlyheader" title="图标按钮">
|
||||
<star-li type="base">
|
||||
<star-button type="icononly" icon="delete"></star-button>
|
||||
<star-button type="icononly" icon="delete" fontsize="30px"></star-button>
|
||||
<star-button type="icononly" icon="settings"></star-button>
|
||||
</star-li>
|
||||
</star-ul>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export class PanelPatternView extends LitElement {
|
|||
`
|
||||
render() {
|
||||
return html`
|
||||
<star-pattern-view></star-pattern-view>
|
||||
<star-pattern-view saveMode></star-pattern-view>
|
||||
<!-- <star-pattern-view topDir="100px"></star-pattern-view> -->
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import './container/container'
|
|||
import './radio/radio'
|
||||
import './confirm/confirm'
|
||||
import './clock/clock'
|
||||
import './weather/weather'
|
||||
import './overflowmenu/overflowmenu'
|
||||
import './switch/switch'
|
||||
import './slider/slider'
|
||||
|
|
@ -317,6 +318,14 @@ export class PanelRoot extends LitElement {
|
|||
iconcolor="green"
|
||||
href="#clock"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="天气"
|
||||
icon="moon"
|
||||
iconcolor="green"
|
||||
href="#weather"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="手势">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
import {html, css, LitElement} from 'lit'
|
||||
import {customElement, query, state} from 'lit/decorators.js'
|
||||
import {StarWeather} from '../../../components/weather/weather.js'
|
||||
import {weatherData} from './weatherData.js'
|
||||
@customElement('panel-weather')
|
||||
export class PanelWeather extends LitElement {
|
||||
@state()
|
||||
foo = ''
|
||||
@state()
|
||||
data = Array()
|
||||
@query('#type11') weatherDemo1!: StarWeather
|
||||
@query('#type12') weatherDemo2!: StarWeather
|
||||
@query('#type21') weatherDemo3!: StarWeather
|
||||
@query('#type22') weatherDemo4!: StarWeather
|
||||
render() {
|
||||
return html`
|
||||
<div
|
||||
style="width: 100vw; height: 100vh;background: rgba(53,168,239,0.3);display:flex;justify-content: center; align-items: center;padding: 90px 0; flex-wrap: wrap"
|
||||
>
|
||||
<!-- <div style="width: 20%;height:20%; border: 1px dashed #bd135f; ">
|
||||
<star-weather id="type11" type="type11"></star-weather>
|
||||
</div>
|
||||
<div style="width: 25%;height:50%; border: 1px dashed #bd135f; ">
|
||||
<star-weather id="type12" type="type12"></star-weather>
|
||||
</div>
|
||||
<div style="width: 25%;height:50%;border: 1px dashed #bd135f;">
|
||||
<star-weather id="type21" type="type21"></star-weather>
|
||||
</div> -->
|
||||
<!-- <div style="width: 50%;height:50%; border: 1px dashed #e72517;"> -->
|
||||
<star-weather id="type22" type="type22"></star-weather>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
`
|
||||
}
|
||||
static styles = css`
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`
|
||||
protected firstUpdated() {
|
||||
// this.weatherDemo1.data = weatherData
|
||||
// this.weatherDemo2.data = weatherData
|
||||
// this.weatherDemo3.data = weatherData
|
||||
this.weatherDemo4.data = weatherData
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-weather': PanelWeather
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
export const weatherData = {
|
||||
location: '长沙市',
|
||||
weatherInfo: [
|
||||
{
|
||||
date: new Date(),
|
||||
temperature: {
|
||||
min: '22℃',
|
||||
max: '29℃',
|
||||
},
|
||||
weather: {
|
||||
labelZh: '多云',
|
||||
labelEn: 'PartlyCloudy',
|
||||
},
|
||||
wind: {
|
||||
label: '南风',
|
||||
value: '6级',
|
||||
},
|
||||
humidity: '40%',
|
||||
airQuality: {
|
||||
label: '空气质量',
|
||||
value: '28',
|
||||
type: '优',
|
||||
},
|
||||
somatosensoryTemperature: '32°C',
|
||||
visibility: '33km',
|
||||
ultravioletRys: '强',
|
||||
},
|
||||
{},
|
||||
],
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
// import {html, LitElement, css} from 'lit'
|
||||
// import {customElement} from 'lit/decorators.js'
|
||||
|
||||
import {StarBaseElement} from '../components/base'
|
||||
|
||||
/**
|
||||
* 主屏小组件:
|
||||
*
|
||||
|
|
@ -27,7 +29,12 @@
|
|||
* 写法（没有 <template> 标签）互斥
|
||||
*/
|
||||
// @customElement('gaia-widget')
|
||||
export default class GaiaWidget extends HTMLElement {
|
||||
|
||||
function lowerCase(str: string) {
|
||||
str = str.replace(/\s/g, '')
|
||||
return str.toLocaleLowerCase()
|
||||
}
|
||||
export default class GaiaWidget extends StarBaseElement {
|
||||
url!: string
|
||||
size!: [number, number]
|
||||
origin!: string
|
||||
|
|
@ -59,15 +66,14 @@ export default class GaiaWidget extends HTMLElement {
|
|||
this.url = url // 组件文件地址
|
||||
this.origin = origin // 注册应用 origin
|
||||
this.size = size // 组件行列大小
|
||||
this.appName = appName
|
||||
this.appName = lowerCase(appName)
|
||||
this.attachShadow({mode: 'open'})
|
||||
this.shadowRoot!.innerHTML = this.template
|
||||
|
||||
this.init()
|
||||
this.dispatchReady()
|
||||
}
|
||||
|
||||
connectedCallback() {}
|
||||
|
||||
init() {
|
||||
// 补全小组件入口地址
|
||||
if (!/^http(s)?:\/\//.test(this.url)) {
|
||||
|
|
@ -84,20 +90,16 @@ export default class GaiaWidget extends HTMLElement {
|
|||
this.container.addEventListener('touchmove', this)
|
||||
this.container.addEventListener('touchend', this)
|
||||
this.container.addEventListener('click', this)
|
||||
}
|
||||
|
||||
dispatchReady = () => {
|
||||
// 需要在构造函数中被调用，在connectedCallback中调用会导致移动元素时刷新的问题
|
||||
this.querySources(this.url)
|
||||
// @ts-ignore
|
||||
.then(this.parseHTML)
|
||||
.then(() => {
|
||||
// 防止安装、更新应用时，首次 Activity 请求因注册方 Service Worker 未完成安装而丢失
|
||||
let n = 0
|
||||
this.activityRequestTimer = window.setInterval(() => {
|
||||
if (n++ > 4) clearInterval(this.activityRequestTimer)
|
||||
this.openActivity({data: {type: 'ready'}})
|
||||
}, 100)
|
||||
})
|
||||
.catch((err) => console.error(err))
|
||||
// 防止安装、更新应用时，首次 Activity 请求因注册方 Service Worker 未完成安装而丢失
|
||||
let n = 0
|
||||
this.activityRequestTimer = window.setInterval(() => {
|
||||
if (n++ > 4) clearInterval(this.activityRequestTimer)
|
||||
this.openActivity({data: {type: 'ready'}})
|
||||
}, 100)
|
||||
}
|
||||
|
||||
refresh(widgetInfo: {size: [number, number]; url: string}) {
|
||||
|
|
@ -259,10 +261,11 @@ export default class GaiaWidget extends HTMLElement {
|
|||
* 处理来自注册应用的 Activity 传入的操作命令
|
||||
*/
|
||||
handleActivity = (data: any) => {
|
||||
const {changeContext, changeAttributes} = data
|
||||
const {changeContext, changeAttributes, changeProperties} = data
|
||||
|
||||
this.changeAttributes(changeAttributes)
|
||||
this.changeContext(changeContext)
|
||||
this.changeProperties(changeProperties)
|
||||
}
|
||||
|
||||
changeContext = (data: any) => {
|
||||
|
|
@ -293,6 +296,16 @@ export default class GaiaWidget extends HTMLElement {
|
|||
})
|
||||
}
|
||||
|
||||
changeProperties = (data: any) => {
|
||||
if (!data) return
|
||||
|
||||
for (const key in data) {
|
||||
const value = data[key] as string
|
||||
// @ts-ignore
|
||||
this[key] = value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TBD: 需要考虑更多元素
|
||||
* 处理img资源请求路径
|
||||
|
|
@ -428,6 +441,3 @@ export default class GaiaWidget extends HTMLElement {
|
|||
`
|
||||
}
|
||||
}
|
||||
try {
|
||||
customElements.define('gaia-widget', GaiaWidget)
|
||||
} catch (error) {}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
import GaiaWidget from '../gaia-widget'
|
||||
import '../../components/weather/weather'
|
||||
import {StarWeather} from '../../components/weather/weather'
|
||||
import {customElement} from 'lit/decorators.js'
|
||||
|
||||
@customElement('gaia-weather')
|
||||
class WeatherWidget extends GaiaWidget {
|
||||
_type: string = 'type22'
|
||||
_data: any
|
||||
widget!: StarWeather
|
||||
constructor({
|
||||
url,
|
||||
appName,
|
||||
origin,
|
||||
size,
|
||||
manifestWidgetName,
|
||||
}: {
|
||||
url: string
|
||||
size: [number, number]
|
||||
origin: string
|
||||
appName: string
|
||||
manifestWidgetName: string
|
||||
}) {
|
||||
super({
|
||||
url: url || 'js/widgets/weather.js',
|
||||
appName: appName || 'homescreen',
|
||||
origin: origin || 'http://homescreen.localhost/manifest.webmanifest',
|
||||
size: size || [2, 2],
|
||||
manifestWidgetName: manifestWidgetName || 'weather',
|
||||
})
|
||||
}
|
||||
|
||||
get type() {
|
||||
return this._type
|
||||
}
|
||||
|
||||
set type(value) {
|
||||
this.type = value
|
||||
this.widget.type = value
|
||||
}
|
||||
|
||||
get data() {
|
||||
return this._data
|
||||
}
|
||||
|
||||
set data(value: any) {
|
||||
this._data = value
|
||||
if (!this.widget) {
|
||||
setTimeout(() => {
|
||||
this.widget.data = value
|
||||
}, 100)
|
||||
} else {
|
||||
this.widget.data = value
|
||||
}
|
||||
}
|
||||
|
||||
init() {}
|
||||
|
||||
connectedCallback() {
|
||||
this.widget = this.shadowRoot?.querySelector('star-weather') as StarWeather
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['type']
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, _: string, newValue: string) {
|
||||
switch (name) {
|
||||
case 'type':
|
||||
this.type = newValue
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
get template() {
|
||||
return `
|
||||
<star-weather type="type22"></star-weather>
|
||||
<style>
|
||||
:host {
|
||||
height: 100%;
|
||||
width:100%;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
export default WeatherWidget
|
||||
Loading…
Reference in New Issue