.container { display: flex; flex-direction: column; height: 100vh; background: #f5f5f5; } /* 商品列表样式 */ .goods-list { flex: 1; } .goods-item { display: flex; padding: 20rpx 30rpx; background: #fff; margin-bottom: 2rpx; } .goods-image { width: 180rpx; height: 180rpx; border-radius: 8rpx; margin-right: 20rpx; flex-shrink: 0; } .goods-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .goods-title { font-size: 28rpx; color: #333; line-height: 1.4; margin-bottom: 8rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .goods-subtitle { font-size: 24rpx; color: #666; margin-bottom: 8rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .goods-info { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } .price-wrap { display: flex; align-items: baseline; } .price-symbol { font-size: 24rpx; color: #f3b64c; } .price { font-size: 32rpx; font-weight: bold; padding: 4rpx 8rpx; background: #ffffff; border-radius: 4rpx; } .commission-wrap { display: flex; align-items: center; } .commission-label { font-size: 24rpx; color: #ffffff; background: #f3b64c; padding: 4rpx 8rpx; border-radius: 4rpx; } .commission-amount { font-size: 24rpx; color: #f3b64c; margin-left: 4rpx; padding: 4rpx 8rpx; background: #ffffff; border-radius: 4rpx; } .goods-extra { display: flex; margin-top: 12rpx; font-size: 24rpx; color: #999; } .goods-extra text { margin-right: 20rpx; } /* 加载更多样式 */ .loading-more { display: flex; align-items: center; justify-content: center; padding: 20rpx 0; } .loading-icon { width: 40rpx; height: 40rpx; margin-right: 10rpx; border: 4rpx solid #f3f3f3; border-top: 4rpx solid #e4393c; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .no-more { text-align: center; padding: 20rpx 0; color: #999; font-size: 24rpx; } /* 空状态样式 */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 200rpx; } .empty-state text { margin-top: 20rpx; color: #999; font-size: 28rpx; } /* 自定义弹窗样式 */ .custom-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; } .modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 1001; } .modal-content { position: relative; background: #fff; width: 580rpx; border-radius: 20rpx; z-index: 1002; overflow: hidden; padding: 45rpx 0; text-align: center; } .modal-icons { display: flex; align-items: center; justify-content: center; margin-bottom: 40rpx; } .icon-left, .icon-right { width: 80rpx; height: 80rpx; border-radius: 50%; background: #FF6B4A; padding: 15rpx; } .icon-arrow { margin: 0 30rpx; } .arrow-text { color: #999; font-size: 40rpx; } .modal-title { font-size: 34rpx; color: #333; font-weight: 500; margin-bottom: 20rpx; } .modal-subtitle { font-size: 28rpx; color: #666; margin-bottom: 20rpx; } .modal-btn-wrap { margin-bottom: 15rpx; } .auth-btn { background: #FF6B4A; color: #fff; font-size: 32rpx; height: 88rpx; line-height: 88rpx; border-radius: 44rpx; width: 100%; border: none; font-weight: normal; padding: 0; margin: 0; text-align: center; display: flex; align-items: center; justify-content: center; } .auth-btn::after { border: none; } .modal-cancel { color: #999; font-size: 28rpx; } /* 按钮点击效果 */ .auth-btn:active { opacity: 0.8; } .modal-cancel:active { opacity: 0.6; } /* store-product自定义样式 */ .store-product-content { padding: 20rpx; background: #fff; border-radius: 12rpx; margin: 20rpx; } .product-header { margin-bottom: 20rpx; } .product-title { font-size: 32rpx; font-weight: bold; color: #333; } .product-action { margin-top: 20rpx; text-align: center; } .buy-btn { height: 80rpx; line-height: 80rpx; background: #ff4d4f; color: #fff; font-size: 32rpx; border-radius: 40rpx; } /* 产品模态框样式 */ .product-modal { padding: 30rpx; } .product-image { width: 100%; height: 400rpx; border-radius: 12rpx; margin-bottom: 20rpx; } .product-info { margin-bottom: 30rpx; } .product-price { display: flex; align-items: baseline; margin-bottom: 16rpx; } .price-symbol { font-size: 24rpx; color: #FF4B4B; } .price-value { font-size: 36rpx; font-weight: bold; color: #FF4B4B; } .estimated-earnings { display: flex; align-items: center; gap: 10rpx; } .earnings-label { font-size: 24rpx; color: #666; } .earnings-value { font-size: 28rpx; color: #FF4B4B; font-weight: bold; } .modal-actions { display: flex; gap: 20rpx; } .action-btn { flex: 1; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 40rpx; font-size: 28rpx; font-weight: bold; } .action-btn.buy { background: #FF4B4B; color: #fff; } .action-btn.share { background: #FFE4E4; color: #FF4B4B; } /* 已授权状态下的弹窗样式 */ .product-modal { padding: 20rpx; background: #fff; border-radius: 12rpx; } /* 流程步骤 */ .process-steps { display: flex; align-items: center; justify-content: center; padding: 20rpx 0; color: #666; font-size: 24rpx; } .step-arrow { margin: 0 10rpx; color: #999; } /* 流程说明样式 */ .process-flow { padding: 20rpx; background: #FFF7F7; border-radius: 8rpx; } .flow-steps { display: flex; align-items: center; justify-content: center; margin-bottom: 10rpx; position: relative; overflow: hidden; } .flow-step { position: relative; height: 140rpx; width: 160rpx; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .step-number { position: absolute; left: 50%; top: 35%; transform: translate(-50%, -50%); font-size: 80rpx; color: rgba(255, 75, 51, 0.15); font-weight: bold; line-height: 1; z-index: 1; } .step-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 15rpx; } .step-text text { font-size: 24rpx; color: #333; line-height: 1.3; } .flow-arrow { margin: 0 10rpx; color: #999; font-size: 24rpx; } .flow-tip { color: #999; font-size: 22rpx; text-align: center; margin-top: 10rpx; } /* 商品信息 */ .product-info { display: flex; align-items: center; padding: 20rpx; background: #fff; border-radius: 12rpx; margin-bottom: 40rpx; height: 140rpx; } .product-image { width: 140rpx; height: 140rpx; border-radius: 8rpx; margin-right: 20rpx; } .product-detail { flex: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .product-title { font-size: 28rpx; color: #333; line-height: 1.4; margin-bottom: 10rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; } .price-info { display: block; margin-bottom: 8rpx; } .current-price { color: #FF4B33; font-weight: bold; display: flex; align-items: baseline; } .price-symbol { font-size: 24rpx; } .price-value { font-size: 32rpx; margin-left: 2rpx; } .commission-info { display: flex; align-items: center; background: #FFF7F7; padding: 6rpx 10rpx; border-radius: 6rpx; width: fit-content; margin-top: 8rpx; clear: both; } .commission-value { color: #ff4b33; font-size: 22rpx; margin-right: 6rpx; font-weight: bold; } .commission-label { font-size: 20rpx; } /* 按钮区域 */ .action-buttons { display: flex; justify-content: space-between; margin-top: 30rpx; padding: 0 20rpx; } .share-btn, .buy-btn { width: 40%; flex: 1; height: 80rpx; display: flex; align-items: center; justify-content: center; border-radius: 40rpx; margin: 0 10rpx; } .btn-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .share-btn { background: #FFE9E7; border: 2rpx solid #FFE6E6; } .buy-btn { background: #FF4B33; color: #fff; } .amount { font-size: 24rpx; font-weight: bold; line-height: 1; margin-bottom: 4rpx; } .label { font-size: 28rpx; line-height: 1; } .share-btn .amount { color: #FF4B33; } .share-btn .label { color: #333; } .buy-btn .amount, .buy-btn .label { color: #fff; } /* 按钮内容包装器 */ .btn-content-wrapper { height: 58rpx; overflow: hidden; } /* 海报预览模态框 */ .poster-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 1001; display: flex; align-items: center; justify-content: center; } .poster-content { width: 600rpx; background: #fff; border-radius: 12rpx; overflow: hidden; } .poster-image { width: 100%; vertical-align: middle; } .poster-actions { width: 600rpx; margin-top: 30rpx; display: flex; justify-content: space-between; } .poster-btn { width: 280rpx !important; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 40rpx; font-size: 28rpx; padding: 0 !important; margin: 0 !important; background: #FFE9E7 !important; color: #FF4B33 !important; border: none !important; } .save-btn { border: none !important; } .close-btn { margin-top: 40rpx; padding: 20rpx 40rpx; color: #fff; font-size: 28rpx; } /* 商品信息包装器 */ .product-info-wrapper { height: 160rpx; overflow: hidden; } /* 无佣金包装器 */ .no-commission-wrapper { height: 35rpx; overflow: hidden; }