uniapp input 输入邮箱，@符号前面得字符有红色下划线

可以通过在input的父元素上设置position属性为relative，并在其内部添加一个伪元素:before来实现。具体CSS样式如下：

.parent {
  position: relative;
}
.parent:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: red;
  z-index: 1;
}
.input {
  position: relative;
  z-index: 2;
}

然后在input中添加一个v-model指令用于绑定输入的邮箱地址，然后使用JavaScript的正则表达式来匹配@符号前面的字符，并将其包裹在一个span标签中，并设置该span标签的样式为红色下划线。示例代码如下：

<template>
  <div class="parent">
    <input class="input" type="text" v-model="email" @input="onInput" placeholder="请输入邮箱地址">
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  },
  methods: {
    onInput() {
      const email = this.email
      const atIndex = email.indexOf('@')
      if (atIndex > 0) {
        const prefix = email.substring(0, atIndex)
        const suffix = email.substring(atIndex)
        const spanHtml = `<span style="text-decoration: underline; color: red;">${prefix}</span>`
        this.email = spanHtml + suffix
      }
    }
  }
}
</script>

<style scoped>
.parent {
  position: relative;
}
.parent:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: red;
  z-index: 1;
}
.input {
  position: relative;
  z-index: 2;
}
</style>

这样就可以实现在输入邮箱时，@符号前面的字符带有红色下划线的效果。