| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- /* 容器样式 */
- 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% */
- }
- }
|
