Vue implementiert ein Suchfeld mit einer Lupe

<Vorlage>
    <div Klasse="Anmelden">
        <!--Header-Suche-->
       <div Klasse="oben">
           <div class="top-text iconfont">Guangzhou&#xe612;</div>
           <div Klasse="top-btn">
               <Eingabetyp="Text" :Platzhalter="Symbol" Klasse="Symbolschriftart">
           </div>
           <div Klasse = "top-x iconfont iconlingdang1"></div>
       </div>   
    </div>
</Vorlage>

<Skript>
    Standard exportieren {
        Name:"Anmelden",
        Daten(){
           zurückkehren {               
               Symbol: '\ue637 Bitte geben Sie Schlüsselwörter ein'
           }
        }
    }
</Skript>

<Stilbereich>
    .Login{
        Breite: 100 %;
        Höhe: 100%;
    }
    .Spitze{
        Breite: 100 %;
        Höhe: 0,8rem;
        Hintergrundfarbe: rosa;
        Anzeige: Flex;
        Elemente ausrichten: zentrieren;
        Schriftgröße: 0,35rem;
    }
    .top-text{
        Rand links: 0,3rem;
    }
    .top-btn{
        Breite: 4,8rem;
        Höhe: 0,5rem;
        Rand links: 0,2rem;
        Rand rechts: 0,55rem;
    }
    .top-btn>Eingabe{
        Breite: 100 %;
        Höhe: 0,5rem;
        Randradius: 1rem;
        Rand: keiner;
        Gliederung: keine;
        Polsterung links: 0,3rem;
    }
</Stil>