/* 容器样式 */ ion-item { display: flex; align-items: center; /* 垂直居中 */ padding: 10px 15px; /* 内边距 */ border: 1px solid #e0e0e0; /* 边框 */ border-radius: 8px; /* 圆角 */ margin-bottom: 15px; /* 项目之间的间距 */ background-color: #fff; /* 背景颜色 */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */ } /* 文件上传组件样式 */ comp-uploader-hwobs { flex: 1; /* 让上传组件占据剩余空间 */ margin-right: 10px; /* 上传组件与输入框之间的间距 */ } /* 输入框样式 */ ion-input { flex: 2; /* 让输入框占据更多空间 */ --padding-start: 10px; /* 输入框内左边距 */ --padding-end: 10px; /* 输入框内右边距 */ border: 1px solid #007bff; /* 输入框边框 */ border-radius: 5px; /* 输入框圆角 */ font-size: 16px; /* 字体大小 */ color: #555; /* 字体颜色 */ } /* 输入框占位符样式 */ ion-input::placeholder { color: #aaa; /* 占位符颜色 */ } /* 输入框变化时的样式 */ ion-input:focus { border-color: #0056b3; /* 聚焦时的边框颜色 */ box-shadow: 0 0 5px rgba(0, 86, 179, 0.5); /* 聚焦时的阴影效果 */ } /* 响应式设计 */ @media (max-width: 600px) { ion-item { flex-direction: column; /* 小屏幕时垂直排列 */ } comp-uploader-hwobs { margin-right: 0; /* 移除右边距 */ margin-bottom: 10px; /* 上传组件与输入框之间的间距 */ } ion-input { width: 100%; /* 输入框宽度为100% */ } }