/* pages/seller/index.wxss */ /* 重置默认样式,确保不继承父类样式 */ 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; } /* 页面标题栏 */ .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; gap: 15rpx; padding: 0 20rpx; } /* 未入驻状态样式 */ .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; }