feat:登录页面

src/pages/Login/user-forgot-password/components/ForgotInput.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+defineOptions({
+  options: {
+    virtualHost: true,
+  },
+})
+
+defineProps<{
+  placeholder: string
+  inputType?: 'text' | 'number'
+  modelValue: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+function onInput(e: { detail: { value: string } }) {
+  emit('update:modelValue', e.detail.value)
+}
+</script>
+
+<template>
+  <view class="forgot-input">
+    <input
+      class="forgot-input__field"
+      :type="inputType || 'text'"
+      :placeholder="placeholder"
+      placeholder-class="forgot-input__placeholder"
+      :value="modelValue"
+      @input="onInput"
+    >
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.forgot-input {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 96rpx;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  background: $color-bg-input;
+  border-radius: 48rpx;
+}
+
+.forgot-input__field {
+  flex: 1;
+  height: 96rpx;
+  font-size: 30rpx;
+  color: $color-text-primary;
+  background: transparent;
+}
+
+.forgot-input__placeholder {
+  font-size: 30rpx;
+  color: $color-text-placeholder;
+}
+</style>