TASK:#108924-修改了picker组件的样式
This commit is contained in:
wangguoqing
parent
bd994c6ec4
commit
d5d5dc8bf8
|
|
@ -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="1662551454749" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1825" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M938.666667 317.866667m-29.866667 0a29.866667 29.866667 0 1 0 59.733333 0 29.866667 29.866667 0 1 0-59.733333 0Z" fill="#666666" p-id="1826"></path><path d="M876.8 454.4c6.4-6.4 12.8-14.933333 19.2-21.333333 8.533333-8.533333 6.4-23.466667-2.133333-29.866667-8.533333-8.533333-23.466667-6.4-29.866667 2.133333-85.333333 100.266667-209.066667 157.866667-341.333333 157.866667-166.4 0-317.866667-91.733333-394.666667-238.933333-6.4-10.666667-19.2-14.933333-27.733333-8.533334-10.666667 6.4-14.933333 19.2-8.533334 27.733334 14.933333 27.733333 32 53.333333 49.066667 76.8L64 499.2c-8.533333 8.533333-8.533333 23.466667 0 32 4.266667 4.266667 8.533333 6.4 14.933333 6.4 6.4 0 12.8-2.133333 17.066667-8.533333l72.533333-76.8c36.266667 40.533333 81.066667 72.533333 128 98.133333l-55.466666 102.4c-6.4 10.666667-2.133333 25.6 8.533333 32 2.133333 2.133333 6.4 2.133333 8.533333 2.133333 8.533333 0 17.066667-4.266667 21.333334-12.8l55.466666-104.533333c51.2 21.333333 106.666667 34.133333 162.133334 36.266667v106.666666c0 12.8 10.666667 23.466667 21.333333 23.466667 12.8 0 21.333333-10.666667 21.333333-23.466667v-106.666666c53.333333-2.133333 104.533333-12.8 151.466667-29.866667l55.466667 102.4c4.266667 8.533333 12.8 12.8 21.333333 12.8 2.133333 0 6.4 0 8.533333-2.133333 10.666667-6.4 12.8-19.2 8.533334-32l-53.333334-98.133334c40.533333-19.2 78.933333-44.8 113.066667-74.666666l74.666667 78.933333c4.266667 4.266667 10.666667 8.533333 17.066666 8.533333 4.266667 0 10.666667-2.133333 14.933334-6.4 8.533333-8.533333 8.533333-23.466667 0-32l-74.666667-78.933333z" fill="#666666" p-id="1827"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -1,14 +1,14 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
body {
|
||||
margin: 0;
|
||||
:host {
|
||||
--deep--color: linear-gradient(101.98deg, #4e5161 1.12%, #363a47 96.75%);
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
#cover {
|
||||
.cover {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
@ -27,7 +27,12 @@ export const sharedStyles: CSSResult = css`
|
|||
-moz-box-shadow: 2px 3px 0 rgba(190, 190, 190, 0.3);
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
background: linear-gradient(
|
||||
134.78deg,
|
||||
#f7f5f7 2.34%,
|
||||
#fafafa 34.11%,
|
||||
#e1e4f2 100%
|
||||
);
|
||||
z-index: 101;
|
||||
font-family: Microsoft YaHei, Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 15px;
|
||||
|
|
@ -48,9 +53,16 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
|
||||
.input {
|
||||
height: 25px;
|
||||
height: 30px;
|
||||
background-color: #ffffff;
|
||||
border: 2px solid #e6e8f5;
|
||||
border-radius: 6px;
|
||||
padding-left: 4%;
|
||||
padding-bottom: 2%;
|
||||
padding-top: 2%;
|
||||
font-size: 13px;
|
||||
color: rgba(38, 38, 38, 0.45);
|
||||
}
|
||||
|
||||
|
||||
@keyframes dialogSlipToUP {
|
||||
0% {
|
||||
|
|
@ -78,11 +90,47 @@ export const sharedStyles: CSSResult = css`
|
|||
font-family: Microsoft YaHei, Verdana, Arial, Helvetica, sans-serif;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
color: #1D98F0;
|
||||
color: #1d98f0;
|
||||
margin-left: 20%;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
`
|
||||
|
||||
.vertical {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: #cfd8e8;
|
||||
}
|
||||
|
||||
/*深色模式*/
|
||||
:host([deep]) .popBox {
|
||||
background: var(--deep--color);
|
||||
color: #f0f0f0;
|
||||
}
|
||||
:host([deep]) .input {
|
||||
background: rgba(98, 93, 103, 0.4);
|
||||
border: 2px solid #2e3038;
|
||||
border-radius: 4px;
|
||||
color: rgba(240, 240, 240, 0.45);
|
||||
|
||||
}
|
||||
:host([deep]) .cancel {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
:host([deep]) .vertical {
|
||||
color: #585a66;
|
||||
}
|
||||
|
||||
/*主题色蓝*/
|
||||
:host([blue]) .input {
|
||||
border: 2px solid #1d98f0;
|
||||
}
|
||||
|
||||
/*密码模式*/
|
||||
:host([password]) .input {
|
||||
color: #292929;
|
||||
}
|
||||
|
||||
`
|
||||
|
|
@ -2,6 +2,7 @@ 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 {
|
||||
|
|
@ -12,6 +13,14 @@ export class StarPrompt extends LitElement {
|
|||
|
||||
@queryAssignedElements({flatten: true}) _evenEl: any
|
||||
|
||||
@property({type: Boolean}) modal = false
|
||||
|
||||
@property({type: Boolean}) deep = false
|
||||
|
||||
@property({type: Boolean}) blue = false
|
||||
|
||||
@property({type: Boolean}) password = false
|
||||
|
||||
_getElement() {
|
||||
if (this.open == true) {
|
||||
this._evenEl[0].style.display = 'block'
|
||||
|
|
@ -32,19 +41,29 @@ export class StarPrompt extends LitElement {
|
|||
return html`
|
||||
<button @click=${this._getElement}>Enter</button>
|
||||
<slot>
|
||||
<div id="cover"></div>
|
||||
<div class="cover"></div>
|
||||
<div class="popBox">
|
||||
<h3 class="title">内容</h3>
|
||||
<form action="" method="post">
|
||||
<table width="100%" cellspacing="5">
|
||||
<tr>
|
||||
<td align="left">
|
||||
<input
|
||||
type="text"
|
||||
name="hasReason"
|
||||
value="true"
|
||||
class="input"
|
||||
/>
|
||||
${this.password == false
|
||||
? html`
|
||||
<input
|
||||
type="text"
|
||||
name="hasReason"
|
||||
value="密码"
|
||||
class="input"
|
||||
/>
|
||||
`
|
||||
: html`
|
||||
<input
|
||||
type="password"
|
||||
name="hasReason"
|
||||
class="input"
|
||||
/>
|
||||
`}
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="reasonText" style="display:none;">
|
||||
|
|
@ -73,6 +92,7 @@ export class StarPrompt extends LitElement {
|
|||
value="取消"
|
||||
@click="${this._getElement}"
|
||||
/>
|
||||
<input type="button" class="vertical" value="|" />
|
||||
<input
|
||||
id="cancel"
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ export class PanelPrompt extends LitElement {
|
|||
render() {
|
||||
return html`
|
||||
<star-prompt></star-prompt>
|
||||
<star-prompt deep></star-prompt>
|
||||
<star-prompt blue></star-prompt>
|
||||
<star-prompt password></star-prompt>
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue