调整generate输入框出现滚动条问题

src/component/Detail/detailRight/overallSetting/tools/MyInput.vue

@@ -0,0 +1,67 @@
+<template>
+	<div class="my-input">
+		<span class="decorate"></span>
+		<span v-show="icon" :class="['iconfont', icon]"></span>
+		<span v-show="before" class="before">{{ before }}</span>
+		<input v-bind="$attrs" :value="modelValue" @input="onInput" />
+		<span v-show="after" class="after">{{ after }}</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, watch } from "vue";
+	const props = defineProps({
+		modelValue: { type: Number, default: 0 },
+		icon: { default: "", type: String },
+		before: { default: "", type: String },
+		after: { default: "", type: String },
+	});
+	const emit = defineEmits(["update:modelValue", "input"]);
+	const onInput = (e) => {
+		const value = e.target.value;
+		emit("update:modelValue", value);
+		emit("input", value);
+	};
+</script>
+<style scoped lang="less">
+	.my-input {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		border: 1px solid rgba(230, 230, 231, 1);
+		border-radius: 3px;
+		height: 20px;
+		padding: 0 4px 0 2px;
+		> .decorate {
+			width: 2px;
+			background-color: rgba(230, 230, 231, 1);
+			border-radius: 3px;
+			height: 85%;
+			margin-right: 4px;
+		}
+		> .iconfont {
+			font-size: 10px;
+			color: #000;
+			margin-right: 2px;
+		}
+		> .before {
+			font-size: 12px;
+			color: #000;
+			margin-right: 2px;
+		}
+		> .after {
+			font-size: 12px;
+			color: #000;
+		}
+		> input {
+			font-size: 12px;
+			width: 0;
+			flex: 1;
+			text-align: right;
+			outline: none;
+			border: none;
+			background-color: transparent;
+			padding: 0;
+		}
+	}
+</style>