TASK:#108924-优化了鼠标点击事件的响应范围 字体的样式细节 输入框背景色的显示bug

src/components/prompt/prompt-styles.ts

@@ -17,6 +17,11 @@ export const sharedStyles: CSSResult = css`
     background-color: rgba(0, 0, 0, 0.5);
   }
 
+  @font-face {
+    font-family: OPPOSans;
+    src: url('/fonts/Font-OPPOSans/Font-OPPOSans/OPPOSans-R.ttf');
+  }
+
   .popBox {
     width: inherit;
     -webkit-border-radius: 0.5em;
@@ -34,7 +39,8 @@ export const sharedStyles: CSSResult = css`
       #e1e4f2 100%
     );
     z-index: 101;
-    font-family: Microsoft YaHei, Verdana, Arial, Helvetica, sans-serif;
+    font-family: OPPOSans, Microsoft YaHei, Verdana, Arial, Helvetica,
+      sans-serif;
     font-size: 15px;
     position: absolute;
     top: 50%;
@@ -57,27 +63,45 @@ export const sharedStyles: CSSResult = css`
   }
 
   .input {
+    width: inherit;
     height: 30px;
     background-color: #ffffff;
+    box-shadow:0 0 0px 1000px white inset;
     border: 2px solid #e6e8f5;
     border-radius: 6px;
     padding-left: 4%;
     padding-bottom: 2%;
     padding-top: 1.5%;
-    font-size: 13px;
-    color: rgba(38, 38, 38, 0.45);
+    font-family: OPPOSans;
+    font-weight: bold;
+    font-size: 11px;
+    color: #333333;
     outline: none;
+    letter-spacing: 2.5px;
   }
 
   .input:focus {
     border: 2px solid #1d98f0;
   }
 
+  .text {
+    background-color: red;
+  }
+
   .eye {
     position: absolute;
     top: 35%;
     right: 0;
-    background-color: #ffffff;
+    background-color: transparent;
+  }
+
+  .show::before {
+    content: '';
+    position: absolute;
+    left: 75%;
+    right: 0%;
+    top: 30%;
+    bottom: 30%;
   }
 
   @keyframes dialogSlipToUP {
@@ -131,6 +155,7 @@ 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;
     border: 2px solid #2e3038;
     border-radius: 4px;
     color: #ffffff;

src/components/prompt/prompt.ts

@@ -78,7 +78,7 @@ export class StarPrompt extends LitElement {
                             name="hasReason"
                             class="input"
                           />
-                          <div @click=${this._showpassword}>
+                          <div @click=${this._showpassword} class="show">
                             ${this.visible == true
                               ? html`
                                   <img src="src/assets/eye.svg" class="eye" />