/* pages/seller/index.wxss */ /* 隐藏页面滚动条 - 完整强制解决方案 */ /* 全局滚动条隐藏 - 强制覆盖所有元素 */ ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; opacity: 0 !important; -webkit-appearance: none !important; } ::-webkit-scrollbar-track { display: none !important; width: 0 !important; height: 0 !important; } ::-webkit-scrollbar-thumb { display: none !important; width: 0 !important; height: 0 !important; } /* 针对微信小程序scroll-view组件的强制滚动条隐藏 */ scroll-view { -webkit-scrollbar: none !important; scrollbar-width: none !important; overflow-scrolling: touch; /* 确保滚动区域不显示滚动条 */ overflow: auto !important; } /* 容器元素滚动条隐藏 */ .container { -webkit-scrollbar: none !important; scrollbar-width: none !important; overflow-x: hidden !important; overflow-y: auto !important; } /* 确保常用滚动容器隐藏滚动条 */ .scrollable-container { -webkit-scrollbar: none !important; scrollbar-width: none !important; } /* 强制页面根元素不显示滚动条 */ page { -webkit-scrollbar: none !important; scrollbar-width: none !important; overflow-x: hidden !important; } /* 为所有可能滚动的元素添加滚动条隐藏 */ .view, text, image, button, input, textarea, swiper, navigator, picker, slider, switch { -webkit-scrollbar: none !important; scrollbar-width: none !important; } /* 重置默认样式,确保不继承父类样式 */ button { margin: 0; padding: 0; border: none; background: none; font-size: inherit; color: inherit; line-height: inherit; } /* 页面容器样式 */ .container { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 0 20rpx; box-sizing: border-box; min-height: 100vh; width: 100%; background-color: #fafafa; } /* 搜索框样式 */ .search-container { position: relative; padding: 20rpx 0; z-index: 10; box-sizing: border-box; } .search-box { width: 90%; display: flex; align-items: center; background-color: #f8f9fa; border: 2rpx solid #e9ecef; border-radius: 50rpx; padding: 0 20rpx; margin: 0 auto; transition: all 0.3s ease; } .search-box:focus-within { border-color: #07c160; box-shadow: 0 0 0 4rpx rgba(7, 193, 96, 0.1); background-color: white; } /* 紧凑搜索框样式 */ .search-box-compact { width: 100%; display: flex; align-items: center; background-color: #f8f9fa; border: 2rpx solid #e9ecef; border-radius: 40rpx; padding: 0 16rpx; transition: all 0.3s ease; } .search-box-compact:focus-within { border-color: #07c160; box-shadow: 0 0 0 3rpx rgba(7, 193, 96, 0.1); background-color: white; } .search-icon { font-size: 28rpx; color: #999; margin-right: 16rpx; } /* 搜索图标文字 */ .search-icon-text { font-size: 24rpx; color: #999; margin-right: 12rpx; } .search-input { flex: 1; padding: 24rpx 0; font-size: 28rpx; color: #333; background-color: transparent; border: none; outline: none; } /* 紧凑搜索输入框 */ .search-input-compact { flex: 1; padding: 16rpx 0; font-size: 26rpx; color: #333; background-color: transparent; border: none; outline: none; } .search-input-compact::placeholder { color: #ccc; font-size: 24rpx; } .clear-icon { font-size: 50rpx; color: #36a913ff; padding: 8rpx; border-radius: 0; background-color: transparent; cursor: pointer; transition: all 0.2s ease; } /* 紧凑清除图标 */ .clear-icon-compact { width: 28rpx; height: 28rpx; margin-left: 8rpx; cursor: pointer; transition: all 0.2s ease; } .clear-icon:hover { background-color: transparent; color: #666; } /* 地区搜索结果项样式 */ .search-result-item { padding: 24rpx 32rpx; font-size: 28rpx; color: #333; background-color: white; border-bottom: 1rpx solid #f0f0f0; transition: background-color 0.2s ease; } .search-result-item:hover { background-color: #f5f5f5; } .search-result-item:last-child { border-bottom: none; } /* 页面标题栏 */ .title-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 20rpx; padding: 10rpx 0; } .title-bar .title { display: none; } /* 页面主标题样式 */ .title { font-size: 40rpx; font-weight: bold; color: #2c3e50; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); letter-spacing: 2rpx; margin: 20rpx 0; align-self: center; } /* 搜索框样式 */ .search-container { width: 100%; display: flex; justify-content: center; margin-bottom: 20rpx; padding: 0 10rpx; } .search-container .search-box { width: 100%; max-width: 720rpx; display: flex; border: 2rpx solid #d9d9d9; border-radius: 8rpx; overflow: hidden; background-color: white; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); transition: all 0.3s ease; } .search-container .search-box:focus-within { border-color: #1890ff; box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.1); } .search-container input { flex: 1; padding: 24rpx 32rpx; font-size: 28rpx; color: #333; border: none; outline: none; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 32rpx center; background-size: 28rpx 28rpx; padding-left: 80rpx; } .search-container button { padding: 0 40rpx; background-color: #1890ff; color: white; font-size: 36rpx; font-weight: 600; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); border: none; outline: none; transition: all 0.2s ease; border-radius: 0 8rpx 8rpx 0; text-align: center; display: flex; justify-content: center; align-items: center; } .search-container button:active { background-color: #40a9ff; transform: translateY(1rpx); box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1); } /* 立体玻璃质感按钮基础样式 */ .glass-btn { position: relative; overflow: hidden; border: none; padding: 32rpx 45rpx; font-size: 32rpx; font-weight: 600; border-radius: 20rpx; box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.15), 0 0 0 1rpx rgba(255, 255, 255, 0.3) inset, 0 1rpx 0 rgba(255, 255, 255, 0.2) inset; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); transition: all 0.3s ease; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10rpx); -webkit-backdrop-filter: blur(10rpx); white-space: nowrap; width: 100%; text-align: center; margin-bottom: 20rpx; } /* 按压效果 */ .glass-btn:active { transform: translateY(3rpx); box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1), 0 0 0 1rpx rgba(255, 255, 255, 0.2) inset, 0 1rpx 0 rgba(255, 255, 255, 0.1) inset; } /* 主按钮 - 蓝色玻璃效果 */ .primary-glass-btn { background: linear-gradient(135deg, rgba(22, 119, 255, 0.8), rgba(33, 150, 243, 0.7)); color: white; box-shadow: 0 10rpx 28rpx rgba(22, 119, 255, 0.3), 0 0 0 1rpx rgba(255, 255, 255, 0.3) inset, 0 1rpx 0 rgba(255, 255, 255, 0.2) inset; } /* 联系客服按钮样式 */ .customer-service-btn { background: #1890ff; color: white; font-size: 32rpx; font-weight: 600; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); padding: 15rpx 25rpx; border-radius: 8rpx; border: none; box-shadow: 0 2rpx 4rpx rgba(24, 144, 255, 0.2); transition: all 0.2s ease; white-space: nowrap; text-align: center; } .customer-service-btn:active { transform: translateY(1rpx); background: #40a9ff; box-shadow: 0 1rpx 2rpx rgba(24, 144, 255, 0.15); } /* 标题栏操作区域 */ .title-bar-actions { display: flex; align-items: center; justify-content: space-between; padding: 0 20rpx; width: 100%; } /* 未入驻状态样式 */ .no-settlement-status { font-size: 24rpx; color: #ff4d4f; padding: 0 10rpx; } /* 入驻按钮样式 */ .apply-settlement-btn { background: #52c41a; color: white; font-size: 32rpx; font-weight: 600; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); padding: 15rpx 25rpx; border-radius: 8rpx; border: none; box-shadow: 0 2rpx 4rpx rgba(82, 196, 26, 0.2); transition: all 0.2s ease; min-width: 100rpx; text-align: center; } .apply-settlement-btn:active { transform: translateY(1rpx); background: #73d13d; box-shadow: 0 1rpx 2rpx rgba(82, 196, 26, 0.15); } /* 未入驻状态按钮 - 红色 */ .apply-settlement-btn.not-approved { background: #ff4d4f; box-shadow: 0 2rpx 4rpx rgba(255, 77, 79, 0.2); } .apply-settlement-btn.not-approved:active { transform: translateY(1rpx); background: #ff7875; box-shadow: 0 1rpx 2rpx rgba(255, 77, 79, 0.15); } /* 货源分类标题 */ .supply-category { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; padding: 0 10rpx; } .supply-category .category-title { font-size: 32rpx; font-weight: bold; margin: 0; } .supply-category .expand-icon { width: 50rpx; height: 30rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; border-radius: 15rpx; background-color: rgba(0, 0, 0, 0.05); } /* 卡片样式 */ .card { width: 100%; margin-bottom: 30rpx; background-color: white; border-radius: 12rpx; overflow: hidden; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); } /* 卡片内容布局 */ .card-content { display: flex; width: 100%; flex-direction: column; } /* 图片区域 */ .card-image { width: 100%; height: 360rpx; position: relative; } .card-image image { width: 100%; height: 100%; object-fit: cover; } /* 信息区域 */ .card-info { padding: 24rpx; background-color: white; } /* 商品标题 */ .card-title { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 16rpx; word-break: break-word; line-height: 1.4; } /* 商品状态标签 */ .status-tag { display: inline-block; margin-left: 10rpx; font-size: 20rpx; color: #fff; padding: 4rpx 12rpx; border-radius: 12rpx; vertical-align: middle; } .status-tag.published { background-color: #52c41a; } .status-tag.pending { background-color: #1677ff; } .status-tag.rejected { background-color: #f5222d; } .status-tag.draft { background-color: #999; } /* 商品详细信息 */ .card-details { display: flex; flex-wrap: wrap; gap: 20rpx 40rpx; margin-bottom: 24rpx; } .detail-item { display: flex; align-items: center; font-size: 26rpx; color: #666; margin-bottom: 12rpx; } .detail-item .detail-label { color: #999; margin-right: 12rpx; min-width: 60rpx; } .detail-item .detail-value { color: #333; font-weight: 500; } /* 货源卡片样式 */ .supply-card { width: 100%; margin-bottom: 25rpx; background-color: white; border-radius: 16rpx; overflow: hidden; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .supply-card:hover { box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); } /* 卡片图片区域 */ .card-image-section { width: 100%; height: 360rpx; position: relative; background-color: #f5f5f5; } .image-container { width: 100%; height: 100%; position: relative; } .image-swiper { width: 100%; height: 100%; } .supply-image { width: 100%; height: 100%; object-fit: cover; } .no-image { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #f5f5f5; color: #999; font-size: 28rpx; } .swiper-pagination { position: absolute; bottom: 15rpx; right: 15rpx; background-color: rgba(0, 0, 0, 0.6); color: white; padding: 6rpx 12rpx; border-radius: 20rpx; font-size: 22rpx; } /* 卡片信息区域 */ .card-info-section { padding: 24rpx; background-color: white; } /* 商品名称行 */ .supply-name-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20rpx; } .supply-name { font-size: 32rpx; font-weight: bold; color: #333; flex: 1; margin-right: 15rpx; word-break: break-word; line-height: 1.4; } .supply-status { padding: 6rpx 16rpx; border-radius: 20rpx; font-size: 22rpx; font-weight: 600; color: white; align-self: flex-start; } .supply-status.published { background-color: #52c41a; } .supply-status.pending { background-color: #1677ff; } .supply-status.rejected { background-color: #f5222d; } .supply-status.draft { background-color: #999; } /* 商品详情 */ .supply-details { margin-bottom: 20rpx; } /* 创建时间 */ .create-time { font-size: 24rpx; color: #999; margin-bottom: 24rpx; } /* 按钮区域 */ .card-actions { display: flex; gap: 20rpx; justify-content: center; } /* 统一按钮样式 */ .action-btn { flex: 1; padding: 18rpx 0; font-size: 28rpx; font-weight: 600; border-radius: 8rpx; border: none; outline: none; transition: all 0.2s ease; text-align: center; } /* 按钮变体 */ .action-btn.delete { background-color: #f5222d; color: white; } .action-btn.unpublish { background-color: #faad14; color: white; } .action-btn.edit { background-color: #1677ff; color: white; } .action-btn.publish { background-color: #52c41a; color: white; } /* 按钮点击效果 */ .action-btn:active { transform: translateY(2rpx); opacity: 0.9; } /* 登录授权弹窗样式 - 专门用于登录相关弹窗 */ .auth-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; } .auth-modal-container { background-color: #fff; border-radius: 24rpx; width: 85%; max-width: 520rpx; padding: 50rpx 40rpx; box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.18); } .auth-modal-title { font-size: 40rpx; font-weight: bold; color: #333; text-align: center; margin-bottom: 35rpx; } .auth-modal-content { font-size: 32rpx; line-height: 1.6; color: #666; text-align: center; margin-bottom: 50rpx; } .auth-modal-buttons { display: flex; flex-direction: column; gap: 24rpx; } .auth-primary-button { background-color: #07c160; color: #fff; font-size: 34rpx; font-weight: 600; line-height: 1.6; border-radius: 12rpx; padding: 24rpx 0; box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); } .auth-cancel-button { background-color: #fff; color: #999; font-size: 34rpx; font-weight: 500; line-height: 1.6; border-radius: 12rpx; padding: 24rpx 0; border: 2rpx solid #e5e5e5; } /* 头像选择样式 */ .auth-avatar-section { text-align: center; margin-bottom: 40rpx; } .auth-avatar-wrapper { padding: 0; background: none; border: none; font-size: 32rpx; font-weight: 600; } .auth-avatar { width: 160rpx; height: 160rpx; border-radius: 50%; } /* 表单样式 */ .auth-form-group { margin-bottom: 30rpx; } .auth-form-label { font-size: 28rpx; margin-bottom: 10rpx; display: block; } .auth-form-input { border: 1rpx solid #eee; border-radius: 8rpx; padding: 20rpx; width: 100%; max-width: 100%; box-sizing: border-box; font-size: 28rpx; } .auth-form-actions { text-align: center; margin-top: 40rpx; } .auth-confirm-button { background-color: #07c160; color: white; width: 100%; border-radius: 8rpx; border: none; font-size: 32rpx; font-weight: 600; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); } /* 四分之一页空白页样式 */ .half-page-blank { height: 25vh; background-color: transparent; } /* 加载更多样式 */ .load-more { text-align: center; padding: 30rpx; color: #666; background-color: #f9f9f9; border-radius: 8rpx; margin: 20rpx 0; } .loading-text { color: #999; font-size: 26rpx; } .load-more-text { color: #1677ff; font-size: 26rpx; padding: 15rpx 30rpx; border: 1rpx solid #1677ff; border-radius: 8rpx; display: inline-block; background-color: white; } .no-more { text-align: center; padding: 30rpx; color: #999; font-size: 26rpx; background-color: #f9f9f9; border-radius: 8rpx; margin: 20rpx 0; } /* 页面滚动锁定样式 */ .page-scroll-lock { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; height: 100vh; /* iOS设备特殊锁定机制 */ -webkit-overflow-scrolling: auto; touch-action: none; pointer-events: none; /* iOS设备硬件加速处理 */ transform: translateZ(0); -webkit-transform: translateZ(0); } /* iOS设备子元素交互修复 */ .page-scroll-lock view, .page-scroll-lock text, .page-scroll-lock image, .page-scroll-lock button, .page-scroll-lock input, .page-scroll-lock textarea, .page-scroll-lock scroll-view, .page-scroll-lock swiper, .page-scroll-lock navigator, .page-scroll-lock picker, .page-scroll-lock slider, .page-scroll-lock switch { pointer-events: auto; } /* 弹窗输入框防抖动样式 */ .modal-content .input { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; outline: none; -webkit-user-select: text; user-select: text; -webkit-touch-callout: none; touch-callout: none; } /* 弹窗容器硬件加速 */ .modal-content { will-change: transform; -webkit-will-change: transform; } /* 输入框容器稳定性增强 */ .modal-content input, .modal-content textarea { transform: translateZ(0); -webkit-transform: translateZ(0); perspective: 1000px; -webkit-perspective: 1000px; } /* iOS输入框防抖优化 */ .modal-content .input { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: text; user-select: text; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; } /* 地区选择弹窗样式 */ .region-select-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; z-index: 9999; overflow: hidden; } .region-select-modal .modal-content { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 20rpx 20rpx 0 0; max-height: 80vh; will-change: transform; -webkit-transition: transform 0.3s ease; transition: transform 0.3s ease; } .region-select-modal .modal-header { padding: 20rpx; display: flex; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #eee; background-color: white; border-radius: 20rpx 20rpx 0 0; } .region-select-modal .modal-title { font-size: 32rpx; font-weight: 500; color: #333; } .region-select-modal .modal-btn { font-size: 32rpx; padding: 10rpx 20rpx; } .region-select-modal .modal-btn.cancel { color: #333; } .region-select-modal .modal-btn.confirm { color: #07c160; } .region-select-modal .search-area { padding: 20rpx; background-color: white; border-bottom: 1rpx solid #f0f0f0; } .region-select-modal .search-box { position: relative; background: #f5f5f5; border-radius: 40rpx; padding: 0 30rpx; } .region-select-modal .search-input { width: 100%; height: 70rpx; line-height: 70rpx; font-size: 28rpx; background: transparent; -webkit-appearance: none; appearance: none; border: none; outline: none; } .region-select-modal .search-clear { position: absolute; right: 30rpx; top: 50%; transform: translateY(-50%); color: #999; font-size: 32rpx; cursor: pointer; } .region-select-modal .region-list { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .region-select-modal .region-item { padding: 32rpx 40rpx; border-bottom: 1rpx solid #f0f0f0; font-size: 32rpx; color: #131413; text-align: center; cursor: pointer; transition: background-color 0.2s ease; } .region-select-modal .region-item:hover { background-color: #f5f5f5; } .region-select-modal .region-item.selected { color: #07c160; background-color: #f0f8f3; }