/* pages/tijiao/tijiao.wxss */ .submit-page { display: flex; flex-direction: column; min-height: 100vh; background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%); box-sizing: border-box; } /* 商品信息区域 */ .product-section { padding: 30rpx 30rpx 20rpx 30rpx; flex-shrink: 0; } .product-card { background: white; border-radius: 20rpx; padding: 30rpx; display: flex; align-items: center; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06); } .product-image-box { width: 160rpx; height: 160rpx; border-radius: 16rpx; overflow: hidden; background: #f5f5f5; flex-shrink: 0; margin-right: 24rpx; } .product-image { width: 100%; height: 100%; } .product-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; height: 160rpx; } .product-title { margin-bottom: 20rpx; } .title-text { font-size: 30rpx; font-weight: 600; color: #222; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .price-info { display: flex; align-items: baseline; } .price-label { font-size: 26rpx; color: #666; font-weight: 500; } .price-value { display: flex; align-items: baseline; } .price-icon { font-size: 28rpx; color: #ff4d4f; font-weight: 600; } .price-integer { font-size: 38rpx; color: #ff4d4f; font-weight: 700; margin-left: 4rpx; } .price-decimal { font-size: 28rpx; color: #ff4d4f; font-weight: 600; } /* 表单区域 */ .form-section { padding: 0 30rpx 20rpx 30rpx; flex-shrink: 0; } .form-card { background: white; border-radius: 20rpx; padding: 30rpx; box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.05); } .form-item-row { display: flex; align-items: center; padding: 25rpx 0; border-bottom: 1rpx solid #f5f5f5; } .form-item-row:last-child { border-bottom: none; } .item-label-row { width: 220rpx; flex-shrink: 0; display: flex; align-items: center; } .label-text-bold { font-size: 30rpx; font-weight: 600; color: #333; } .label-required { font-size: 30rpx; color: #ff4d4f; margin-left: 8rpx; } .item-input-row { flex: 1; font-size: 28rpx; color: #222; height: 60rpx; line-height: 60rpx; padding: 0 20rpx; text-align: right; background: #fafafa; border-radius: 10rpx; } .input-placeholder-gray { color: #999; font-size: 28rpx; } /* 支付方式 */ .payment-item { margin-top: 30rpx; padding-top: 30rpx; border-top: 1rpx solid #f0f0f0; } .payment-method { display: flex; align-items: center; padding: 20rpx 0; } .payment-icon { width: 48rpx; height: 48rpx; margin-right: 20rpx; } .payment-text { font-size: 28rpx; color: #333; font-weight: 500; flex: 1; } .payment-checkbox { width: 40rpx; height: 40rpx; border-radius: 50%; background: #52c41a; display: flex; align-items: center; justify-content: center; } .checkbox-text { color: white; font-size: 28rpx; font-weight: 600; } /* 底部操作栏 */ .footer-section { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 30rpx; background: white; box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08); margin-top: auto; flex-shrink: 0; } .total-price { display: flex; align-items: baseline; flex: 1; } .total-label { font-size: 30rpx; color: #333; font-weight: 600; } .total-value { display: flex; align-items: baseline; } .submit-btn { width: 240rpx; height: 88rpx; border-radius: 44rpx; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: all 0.3s; } .submit-btn-active { background: linear-gradient(135deg, #52c41a, #389e0d); box-shadow: 0 8rpx 32rpx rgba(255, 77, 79, 0.4); } .submit-btn-disabled { background: #ccc; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); } .submit-btn-active:active { transform: scale(0.98); box-shadow: 0 4rpx 20rpx rgba(255, 77, 79, 0.5); } .btn-text { font-size: 32rpx; color: white; font-weight: 600; position: relative; z-index: 2; } .btn-glow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-100%); animation: btnGlow 3s infinite; } @keyframes btnGlow { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(100%); } }