<template>
    <div>

        <div class="rFrNMe KSczvd uyaebd vHVGub zKHdkd sdJrJc Tyc9J" jscontroller="pxq3x" jsaction="clickonly:KjsqPd; focus:Jt1EX; blur:fpfTEe; input:Lg5SV;" jsshadow="" jsname="Vsb5Ub"/>
            <div class="aCsJod oJeWuf">
                <div class="aXBtI Wic03c">
                    <div class="Xb9hP">
                        <input type="email" v-model="data" class="whsOnd zHQkBf" jsname="YPqjbf" autocomplete="off" spellcheck="false" tabindex="0" aria-label="电话号码或电子邮件地址" name="identifier" value="" autocapitalize="none" id="recoveryIdentifierId" dir="ltr" data-initial-dir="ltr" data-initial-value="">
                        <div jsname="YRMmle" class="AxOyFc snByac" aria-hidden="true" v-if="placeholder">{{placeholder}}</div>
                    </div>
                    <div class="i9lrp mIZh1c"></div>
                    <div jsname="XmnwAc" class="OabDMe cXrdqd Y2Zypf" style="transform-origin: 340px center;"></div>
                </div>
            </div>
            <div class="LXRPh"><div jsname="ty6ygf" class="ovnfwe Is7Fhb"></div>
            <div jsname="B34EJ" class="dEOOab RxsGPe" aria-atomic="true" aria-live="assertive"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TopTitleInput',
    data() {
        return {
            data: ''
        }
    },
    props: {
        placeholder: {
            type: String,
            default: '电话号码或电子邮件地址'
        },
        gInput: Function
    },
    watch: {
        data(e) {
            if(this.gInput) {
                this.gInput(e)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
:first-child>.KSczvd, :first-child>.BoNzAe {
    padding: 8px 0 8px;
}
.AxOyFc {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1);
    transition: all .3s cubic-bezier(0.4,0,0.2,1);
    -webkit-transition-property: color,bottom,transform;
    transition-property: color,bottom,transform;
    color: rgba(0,0,0,0.38);
    font: 400 17px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    font-size: 17px;
    pointer-events: none;
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
}
//  这个是有先后顺序的
.whsOnd { 
    -webkit-box-flex: 1;
    box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
    background-color: transparent;
    border: none;
    display: block;
    font: 400 17px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    height: 24px;
    line-height: 24px;
    margin: 0;
    min-width: 0%;
    outline: none;
    padding: 0;
    z-index: 0;
    width: 100%;
}
.field-title{
    display: block;
    padding-bottom: 10px;
}
.KSczvd.KSczvd {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.oJeWuf {
    height: 56px;
    padding-top: 0;
}
.aCsJod {
    height: 40px;
    position: relative;
    vertical-align: top;
}
.Wic03c {
    -webkit-align-items: center;
    align-items: center;
    position: static;
    top: 0;
}
.Xb9hP {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
    min-width: 0%;
    position: relative;
}
.uyaebd .zHQkBf, .uyaebd .MQL3Ob {
    direction: ltr;
    text-align: left;
}
.zHQkBf {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #202124;
    font-size: 17px;
    height: 28px;
    margin: 1px 1px 0 1px;
    padding: 13px 15px;
    z-index: 1;
}
.zHQkBf{margin:2px 2px 0 2px;padding:12px 14px}

.snByac {
    background: #fff;
    bottom: 17px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #80868b;
    font-size: 17px;
    font-weight: 400;
    left: 8px;
    padding: 0 8px;
    -webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
    width: auto;
    z-index: 1;
}
.whsOnd:not([disabled]):focus~.AxOyFc {
    color: #1a73e8;
}
.whsOnd:not([disabled]):focus{
    border: 2px solid #1a73e8;
}
.whsOnd{
    border: 1px solid #dadce0;
}
.whsOnd:not([disabled]):focus~.AxOyFc, .whsOnd[badinput="true"]~.AxOyFc, .rFrNMe.CDELXb .AxOyFc, .rFrNMe.dLgj8b .AxOyFc {
    -webkit-transform: scale(.75) translateY(-39px);
    transform: scale(.75) translateY(-39px);
}
.AxOyFc {
    font-family: roboto,'Noto Sans Myanmar UI',arial,sans-serif;
}

</style>