1

李

2026-05-26 0dbc7465447164fef24327b5d494870832d798dd

 src/components/ex-input/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="inputCom">
    <span class="label textColor">{{ label }}</span>
    <span class="label textColor1">{{ label }}</span>
    <form class="iptbox inputBackground">
      <div class="areaCode" v-if="area" @click="selectArea">
        <span class="icon iti-flag" :class="icon"></span>
@@ -8,13 +8,13 @@
        <img src="../../assets/image/login/more.png" alt="">
      </div>
      <!-- <p>{{ passwordType }} {{ props.value }}</p> -->
      <input autocomplete="off" name="username" class="inputBackground" v-if="typeText == 'password'" :type="passwordType"
        :placeholder="placeholderText" :value="modelValue" @input="onInput" :disabled="disabled" />
      <input autocomplete="off" name="username" class="inputBackground" v-if="typeText == 'password'"
        :type="passwordType" :placeholder="placeholderText" :value="modelValue" @input="onInput" :disabled="disabled" />
      <div class="max-input" v-else>
        <input autocomplete="off" v-if="max > 0" :maxlength="max" class="inputBackground" type="text" :disabled="disabled"
        :placeholder="placeholderText" :value="modelValue" @input="onInput" />
        <input autocomplete="off" v-else  class="inputBackground" type="text" :disabled="disabled"
        :placeholder="placeholderText" :value="modelValue" @input="onInput" />
        <input autocomplete="off" v-if="max > 0" :maxlength="max" class="inputBackground" type="text"
          :disabled="disabled" :placeholder="placeholderText" :value="modelValue" @input="onInput" />
        <input autocomplete="off" v-else class="inputBackground" type="text" :disabled="disabled"
          :placeholder="placeholderText" :value="modelValue" @input="onInput" />
      </div>
      <div class="rightCon">
        <div class="closeBox" v-if="clearBtn" @click="clear"><img src="../../assets/image/login/clear.png" alt="" />
@@ -111,34 +111,35 @@
<style lang="scss" scoped>
@import "@/views/authentication/components/intl.css";

.textColor{
.textColor {
  color: $text_color;
}

.inputCom {
  color: $text_color;
  padding-bottom: 22px;
  font-size: 14px;
  padding-bottom: 2.75rem;
  font-size: 2rem;

  .iptbox {
    height: 44px;
    margin-top: 9px;
    padding: 0 11px;
    height: 6.25rem;
    margin-top: 1.125rem;
    padding: 0 1.375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 3px;
    border-radius: 0.75rem;
  }

  .areaCode {
    width: 100px;
    width: 12.5rem;
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-left: 1.25rem;
    justify-content: space-between;
    height: 100%;

    img {
      width: 10px;
      width: 1.25rem;
    }
  }

@@ -146,7 +147,7 @@
    flex: 1;
    height: 100%;
    border: none;
    padding-left: 10px;
    padding-left: 1.25rem;
    color: $text_color;
  }

@@ -156,8 +157,8 @@

  .closeBox,
  .eyeBox {
    width: 17px;
    height: 17px;
    width: 2.125rem;
    height: 2.125rem;

    img {
      width: 100%;
@@ -166,18 +167,18 @@
  }

  .eyeBox {
    margin-left: 14px;
    margin-left: 1.75rem;
  }
}

.tips {
  font-size: 13px;
  font-size: 1.625rem;
  color: $text_color1;
  margin-top: 9px;
  margin-top: 1.125rem;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 200px $light-grey inset;
  -webkit-box-shadow: 0 0 0 25rem $light-grey inset;
}

input::-webkit-input-placeholder {
@@ -188,9 +189,11 @@
  transform: scale(1.3);
  display: inline-block;
}
.max-input{

.max-input {
  width: 100%;
  input{

  input {
    width: 100%;
  }
}