怎么能把密码不可见的图标放到input里面 position: absolute;和最上面的起作用，和input的position: relative;不起作用

Question

<template>
   <div class="login_bg">
      <!-- 背景图 -->
      <div class="login_bgimg">
         <img src="../assets/images/background_phone.jpg" alt="">
      </div>
      <div class="login_main">
         <div class="login_main_header">
           <router-link to="./Login.vue"><img src="../assets/images/left_back.png" alt=""></router-link>
            <p class="p1">期待您的登录</p>
            <p class="p2">每天都能和不同的小伙伴讨论不同的美食</p>
         </div>
         <div class="login_main_input">
            <input type="text" name="" id="" placeholder="请输入手机号/邮箱"  >
            <input type="text" v-if="pwdType" v-model="eyeTxt" class="inp2" />
            <input type="password" placeholder="输入新密码" v-model="eyeTxt" v-else class="inp2" />
            <!-- 密码可见不可见 -->
            <img :src="seen ? seenImg : unseenImg" @click="changeType()" v-on:mouseover="hoverEye" v-on:mouseout="outEye" class="icon-eye" />
         </div>
         <div>
         </div>
         <div class="login_main_btn"><button>登录</button></div>
         <div class="login_main_text">
            <div>
               <span>验证码登录</span>
               <span>忘记密码</span>
            </div>
            
         </div>
         <div class="login_main_other">
            <div>
               <p>其他方式登录</p></div>
            </div>
            
         <div class="login_main_icon">
            <div>
               <img src="../assets/images/QQ.png" alt="">
               <img src="../assets/images/WeChat.png" alt="">
               <img src="../assets/images/weibo.png" alt="">
            </div>
         </div>
      </div>
   </div>
</template>

<script>
   export default {
        data() {
    return {
      seen: "",
      unseenImg: require("../assets/images/eye_no.png"),   //看不见密码时小眼睛的显示图片地址
      seenImg: require("../assets/images/eye.png"),   //看得见密码时小眼睛的显示图片地址
      eyeTxt: "",
      pwdType: false   //此时文本框隐藏，显示密码框 
    };
  },
  methods: {
      changeType: function() {
         this.seen = !this.seen;   //小眼睛的变化
         this.pwdType = !this.pwdType;   //跟着小眼睛变化，密码框隐藏，显示文本框 内容就显示了
    },
    hoverEye: function(event) {
        this.seen = !this.seen;
    },
    outEye: function(event) {
        this.seen = !this.seen;
    }
  }   
   }
</script>

<style lang="scss" scoped>

  @import '../assets/css/Login.css';

</style>

/* 清除输入框内阴影 */
input,
select,
textarea {
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* input */
/* body背景 */
.login_bg{
   width: 100%;
   /* overflow:hidden; */
   position: relative;
}
.login_bg .login_bgimg{
   width: 100%;
   font-size:0;/*使图片没有边距，解决图片下面出现白边*/
}
.login_bg .login_bgimg>img{
   width: 100%;
}

.login_bg .login_main{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
}
.login_bg .login_main .login_main_header img{
      width: 21px;
      height: 39px;
      margin-top: 46px;
}
.login_bg .login_main .login_main_header>p{
   color:#ffffff;
   font-size: .35rem;
   margin-top: 40px;
   margin-left: 59px;
}
.login_bg .login_main .login_main_header .p1{
   font-size: 70px;
}
.login_bg .login_main .login_main_header .p2{
   font-size: 30px;
   margin-top: 46px;
}
input{
   /* 去掉点击输入框高亮 */
   outline: none;
   /* 去掉输入框的外边框 */
   border:none; 
   /* 清除输入框内阴影 */
   -webkit-appearance: none;
   /* 设置边框圆角效果 */
   border-radius: 50px;
   /* 设置input的大小 */
   /* padding: 10px 0px; */
   height: 100px;
   width: 630px;
   /* padding: 0 40px; */
   /* 透明度 */
   background:rgba(255, 255, 255, 0.2);
   /* 文字据左边框距离 （原意：规定文本块中首行文本的缩进）*/
   text-indent: 40px;

}
/* placeholder文字样式 */
input::-webkit-input-placeholder{
   font-size: 36px;
    font-weight: normal;
    color: #ffffff;
    opacity: 0.8;
   margin-left: 40px;
}
.login_bg .login_main .login_main_input{
   margin-top: 137px;
   display:flex;
   flex-direction: column;
   align-items:center;

}
.login_bg .login_main .login_main_input .inp2{
   margin-top: 26px;
   position: relative;
}
.login_bg .login_main .login_main_input .icon-eye{
   position: absolute;
   
}

.login_bg .login_main .login_main_btn{
   margin-top: 69px;
   display:flex;
   flex-direction: column;
   align-items:center;
}
.login_bg .login_main .login_main_btn button{
   width: 630px;
   height: 100px;
   border-radius: 50px;
   /* 透明度 */
   background:rgba(255, 255, 255, 0.6);
   font-size: 36px;
    font-weight: normal;
   opacity: 0.8;
}
.login_bg .login_main .login_main_text{
   display:flex;
   flex-direction: row;
   justify-content: center;
   align-items:center;
}
.login_bg .login_main .login_main_text div{
   margin-top: 38px;
   width: 630px;
   display: flex;
   justify-content: space-between;
   font-size: 28px;
   color: #ffffff;
   opacity: 0.8;
}
.login_bg .login_main .login_main_other{
   margin-top: 118px;
   display: flex;
   flex-direction: row;
   justify-content: center;
}
.login_bg .login_main .login_main_other div{
   width: 630px;
   font-size: 28px;
    font-weight: normal;
   color: #ffffff;
    opacity: 0.8;
}
.login_bg .login_main .login_main_icon{
   margin-top: 44px;
   display: flex;
   flex-direction: row;
   justify-content: center;
}
.login_bg .login_main .login_main_icon div{
   width: 630px;
   display: flex;
   justify-content: space-between;
}
.login_bg .login_main .login_main_icon div img{
   width: 80px;
}

Answer 1

login_main_input用相对定位
icon-eye用绝对定位