/* 主容器 */ .user-list-container { height: 100vh; background: url('https://sit-kelamayi.4dage.com/mini/wxImg/bg.png') no-repeat center center; background-size: cover; overflow: hidden; padding: 0 32rpx; } /* 页面标题 */ .page-title { text-align: left; margin: 40rpx 0; } .title-text { color: #584735; font-size: 40rpx; font-weight: bold; } /* 联系人列表 */ .contact-list { height: calc(100vh - 360rpx); margin-bottom: 40rpx; } .contact-card { background: #fff; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); } .contact-info .contact-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; } .contact-info .contact-row:last-child { margin-bottom: 0; } .contact-row .label { color: #B1967B; font-size: 28rpx; min-width: 120rpx; } .contact-row .value { flex: 1; color: #584735; font-size: 28rpx; margin-left: 24rpx; } .contact-row .edit-btn { display: flex; background: none; border: none; color: #F45151; font-size: 28rpx; padding: 0; margin: 0; line-height: 36rpx; } .delete-img{ width: 32rpx; height: 32rpx; margin-right: 4rpx; } .tips { width: 100%; text-align: center; color: #B1967B; font-size: 24rpx; margin-top: 20rpx; } /* 新增按钮容器 */ .add-button-container { position: absolute; bottom: 48rpx; left: 32rpx; right: 32rpx; } .add-visitor-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 96rpx; background: #B1967B; color: white; border: none; border-radius: 10rpx; font-size: 32rpx; line-height: 96rpx; } .add-visitor-btn::after { border: none; } /* 表单容器 */ .form-container { height: calc(100vh - 240rpx); margin-bottom: 40rpx; } .visitor-card { background: #fff; border-radius: 16rpx; padding: 40rpx 40rpx 60rpx; box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); } .visitor-form { padding: 0; } .form-item { display: flex; align-items: flex-start; margin-bottom: 60rpx; position: relative; } .form-item:last-child { margin-bottom: 0; } .form-label { min-width: 160rpx; color: #B1967B; font-size: 28rpx; line-height: 64rpx; margin-right: 40rpx; } .form-input { flex: 1; position: relative; } /* 输入框样式 */ .bottom-line-input { width: 100%; height: 64rpx; border: none; border-bottom: 2rpx solid rgba(88, 71, 53, 0.2); background: transparent; text-align: right; font-size: 28rpx; color: #584735; } .bottom-line-input.error-line { border-bottom-color: #F45151; } /* 选择器样式 */ .bottom-line-select { width: 100%; height: 64rpx; border: none; border-bottom: 2rpx solid rgba(88, 71, 53, 0.2); background: transparent; display: flex; align-items: center; justify-content: flex-end; } .picker-text { font-size: 28rpx; color: #584735; text-align: right; } /* 错误信息 */ .error-msg { position: absolute; bottom: -40rpx; right: 0; color: #F45151; font-size: 24rpx; } /* 确认按钮容器 */ .confirm-button-container { position: absolute; bottom: 48rpx; left: 32rpx; right: 32rpx; } .confirm-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 96rpx; background: #B1967B; color: white; border: none; border-radius: 16rpx; font-size: 32rpx; font-weight: bold; line-height: 96rpx; } .confirm-btn::after { border: none; }