TASK:#108924-修改组件的实现方式并增加了相应的功能
This commit is contained in:
wangguoqing
parent
62e100534f
commit
48f16a25c4
|
|
@ -4,10 +4,6 @@ export const sharedStyles: CSSResult = css`
|
|||
--deep--color: linear-gradient(101.98deg, #4e5161 1.12%, #363a47 96.75%);
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
|
@ -27,11 +23,8 @@ export const sharedStyles: CSSResult = css`
|
|||
-webkit-border-radius: 0.5em;
|
||||
-moz-border-radius: 0.5em;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 2px 3px 0 rgba(190, 190, 190, 0.3);
|
||||
-webkit-box-shadow: 2px 3px 0 rgba(190, 190, 190, 0.3);
|
||||
-moz-box-shadow: 2px 3px 0 rgba(190, 190, 190, 0.3);
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
padding: 3%;
|
||||
background: linear-gradient(
|
||||
134.78deg,
|
||||
#f7f5f7 2.34%,
|
||||
|
|
@ -55,19 +48,20 @@ export const sharedStyles: CSSResult = css`
|
|||
|
||||
.title {
|
||||
text-align: left;
|
||||
margin-left: 10px;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
background-color: transparent;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: inherit;
|
||||
height: 30px;
|
||||
background-color: #ffffff;
|
||||
box-shadow:0 0 0px 1000px white inset;
|
||||
box-shadow: 0 0 0px 1000px white inset;
|
||||
border: 2px solid #e6e8f5;
|
||||
border-radius: 6px;
|
||||
padding-left: 4%;
|
||||
|
|
@ -75,10 +69,10 @@ export const sharedStyles: CSSResult = css`
|
|||
padding-top: 1.5%;
|
||||
font-family: OPPOSans;
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
color: #333333;
|
||||
font-size: 12px;
|
||||
color: rgba(38, 38, 38, 0.45);
|
||||
outline: none;
|
||||
letter-spacing: 2.5px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
|
|
@ -92,14 +86,14 @@ export const sharedStyles: CSSResult = css`
|
|||
.eye {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
right: 0;
|
||||
right: 5%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.show::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 75%;
|
||||
left: 80%;
|
||||
right: 0%;
|
||||
top: 30%;
|
||||
bottom: 30%;
|
||||
|
|
@ -115,6 +109,18 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
}
|
||||
|
||||
.location {
|
||||
text-align: right;
|
||||
margin-top: 3.5%;
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: right;
|
||||
color: #292929;
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
font-family: Microsoft YaHei, Verdana, Arial, Helvetica, sans-serif;
|
||||
font-style: normal;
|
||||
|
|
@ -149,10 +155,36 @@ export const sharedStyles: CSSResult = css`
|
|||
display: none;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #292929;
|
||||
opacity: 0.7;
|
||||
font-size: 13px;
|
||||
.group {
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
.wifi {
|
||||
line-height: 18.2px;
|
||||
cursor: pointer;
|
||||
background: rgba(51, 51, 51, 0.06);
|
||||
color: #4d4d4d;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding: 10px 45px 14px;
|
||||
margin-right: 0%;
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
line-height: 18.2px;
|
||||
cursor: pointer;
|
||||
background: #1d98f0;
|
||||
color: #f0f0f0;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding: 10px 45px 14px;
|
||||
margin-right: 0%;
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
/*深色模式*/
|
||||
|
|
@ -162,10 +194,10 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
:host([deep]) .input {
|
||||
background: rgba(98, 93, 103, 0.4);
|
||||
box-shadow:0 0 0px 1000px rgba(98, 93, 103, 0.4) inset;
|
||||
box-shadow: 0 0 0px 1000px rgba(98, 93, 103, 0.4) inset;
|
||||
border: 2px solid #2e3038;
|
||||
border-radius: 4px;
|
||||
color: #ffffff;
|
||||
color: rgba(240, 240, 240, 0.45);
|
||||
}
|
||||
:host([deep]) .input:focus {
|
||||
border: 2px solid #1d98f0;
|
||||
|
|
@ -187,5 +219,60 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
:host([deep]) .info {
|
||||
color: #e0e0e0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
:host([deep]) .wifi {
|
||||
background: rgba(228, 228, 228, 0.1);
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/*WIFI弹窗*/
|
||||
:host([wifi]) .popBox {
|
||||
width: 512px;
|
||||
height: 700px;
|
||||
}
|
||||
:host([wifi]) .title {
|
||||
width: 150px;
|
||||
height: 26px;
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
:host([wifi]) .input {
|
||||
width: 486px;
|
||||
height: 60.5px;
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
:host([wifi]) .info {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
:host([wifi]) .sure {
|
||||
width: 200px;
|
||||
height: 64px;
|
||||
left: 272px;
|
||||
top: 596px;
|
||||
border-radius: 34px;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
}
|
||||
:host([wifi]) .cancel {
|
||||
width: 200px;
|
||||
height: 64px;
|
||||
left: 48px;
|
||||
top: 596px;
|
||||
border-radius: 34px;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
}
|
||||
:host([wifi]) .group {
|
||||
margin-top: 75%;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import {html, LitElement, CSSResultArray} from 'lit'
|
|||
import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './prompt-styles'
|
||||
import '../button/button'
|
||||
|
||||
@customElement('star-prompt')
|
||||
export class StarPrompt extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
|
|
@ -25,6 +24,14 @@ export class StarPrompt extends LitElement {
|
|||
|
||||
@property({type: String}) text = ''
|
||||
|
||||
@property({type: Boolean}) wifi = false
|
||||
|
||||
@property({type: String}) bone = '取消'
|
||||
|
||||
@property({type: String}) btwo = '确定'
|
||||
|
||||
@property({ type: String }) placeholder = '密码';
|
||||
|
||||
_getElement() {
|
||||
if (this.open == true) {
|
||||
this._evenEl[0].style.display = 'block'
|
||||
|
|
@ -62,83 +69,60 @@ export class StarPrompt extends LitElement {
|
|||
<div class="cover"></div>
|
||||
<div class="popBox">
|
||||
<h3 class="title">${this.label}</h3>
|
||||
<form action="" method="post">
|
||||
<table width="100%" cellspacing="5">
|
||||
<tr>
|
||||
<td align="left">
|
||||
<div class="container">
|
||||
${
|
||||
this.password == false
|
||||
? html`
|
||||
<input
|
||||
type="text"
|
||||
name="hasReason"
|
||||
value="密码"
|
||||
class="input"
|
||||
<div class="container">
|
||||
${this.password == false
|
||||
? html`
|
||||
<input
|
||||
type="text"
|
||||
name="hasReason"
|
||||
value="${this.placeholder}"
|
||||
class="input"
|
||||
/>
|
||||
`
|
||||
: html`
|
||||
<input type="password" name="hasReason" class="input" />
|
||||
<div @click=${this._showpassword} class="show">
|
||||
${this.visible == true
|
||||
? html`
|
||||
<img src="src/assets/eye.svg" class="eye" />
|
||||
<div class="drop">
|
||||
<img src="src/assets/eye_deep.svg" class="eye" />
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<img src="src/assets/close_eye.svg" class="eye" />
|
||||
<div class="drop">
|
||||
<img
|
||||
src="src/assets/close_eye_deep.svg"
|
||||
class="eye"
|
||||
/>
|
||||
`
|
||||
: html`
|
||||
<input
|
||||
type="password"
|
||||
name="hasReason"
|
||||
class="input"
|
||||
/>
|
||||
<div @click=${this._showpassword} class="show">
|
||||
${this.visible == true
|
||||
? html`
|
||||
<img src="src/assets/eye.svg" class="eye" />
|
||||
<div class="drop">
|
||||
<img
|
||||
src="src/assets/eye_deep.svg"
|
||||
class="eye"
|
||||
/>
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<img
|
||||
src="src/assets/close_eye.svg"
|
||||
class="eye"
|
||||
/>
|
||||
<div class="drop">
|
||||
<img
|
||||
src="src/assets/close_eye_deep.svg"
|
||||
class="eye"
|
||||
/>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</td>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<span class="info">${this.text}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" align="center">
|
||||
<br />
|
||||
<input
|
||||
id="ok"
|
||||
type="button"
|
||||
class="cancel"
|
||||
value="取消"
|
||||
@click="${this._getElement}"
|
||||
/>
|
||||
<input type="button" class="vertical" value="|" />
|
||||
<input
|
||||
id="cancel"
|
||||
type="button"
|
||||
class="sure"
|
||||
value="确定"
|
||||
@click="${this._getElement}"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
`}
|
||||
</div>
|
||||
<div class="location">
|
||||
<span class="info">${this.text}</span>
|
||||
</div>
|
||||
<div class="group">
|
||||
${this.wifi == false
|
||||
? html`
|
||||
<button class="cancel" @click="${this._getElement}">
|
||||
取消
|
||||
</button>
|
||||
<button class="sure" @click="${this._getElement}">
|
||||
确定
|
||||
</button>
|
||||
`
|
||||
: html`
|
||||
<button class="cancel wifi" @click="${this._getElement}">
|
||||
${this.bone}
|
||||
</button>
|
||||
<button class="sure blue" @click="${this._getElement}">
|
||||
${this.btwo}
|
||||
</button>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
`
|
||||
|
|
|
|||
Loading…
Reference in New Issue