/* pages/goods-update/goods-update.wxss */ /* 页面容器 */ .goods-update-page { min-height: 100vh; background-color: #f5f7fa; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; } /* 页面头部 */ .page-header { display: flex; align-items: center; justify-content: space-between; height: 44px; background: #ffffff; padding: 0 16px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .header-left { width: 40px; } .header-center { flex: 1; text-align: center; } .header-title { font-size: 17px; font-weight: 600; color: #000000; letter-spacing: 0.5px; } .header-right { width: 40px; text-align: right; } .close-icon { font-size: 28px; color: #000000; font-weight: 300; line-height: 1; } /* 商品详情内容区域 */ .goods-detail-content { padding-top: 0; /* 移除顶部内边距,消除空白 */ padding-bottom: 90px; /* 减小底部内边距 */ } /* 商品图片轮播 */ .goods-image-slider { width: 100%; height: 240px; /* 适当增大图片高度 */ background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%); overflow: hidden; position: relative; } .goods-image-slider::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent); } .goods-image-slider swiper { width: 100%; height: 100%; margin: 0; padding: 0; } .goods-image-slider swiper-item { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 10px; /* 减小内边距 */ box-sizing: border-box; } .slider-media { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease; } .slider-media:active { transform: scale(0.98); } /* 视频样式增强 */ video.slider-media { position: absolute; top: 0; left: 0; right: 0; bottom: 0; object-fit: fill; z-index: 1; } /* 视频控制器样式 - 调整进度条位置 */ video.slider-media .wx-video-controlbar { bottom: 50px !important; padding-bottom: 15px !important; height: 60px !important; z-index: 10 !important; } /* 视频播放按钮样式 */ video.slider-media .wx-video-play-btn { width: 80rpx; height: 80rpx; } video.slider-media .wx-video-play-btn::after { border-radius: 50%; background-color: rgba(0, 0, 0, 0.6); } /* 视频静音图标样式 */ video.slider-media .wx-video-volume-icon { background-image: url('https://img.icons8.com/windows/32/mute.png') !important; background-size: contain !important; background-repeat: no-repeat !important; } /* 商品基本信息 */ .goods-info { background-color: #ffffff; padding: 14px 16px 10px; /* 适当增大内边距 */ position: relative; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin-top: 0; /* 移除负外边距,让图片和信息自然衔接 */ } .goods-info::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 1px; background: linear-gradient(90deg, transparent, #f0f0f0, transparent); } .goods-name { display: block; font-size: 20px; /* 适当增大字体大小 */ font-weight: 700; color: #262626; margin-bottom: 10px; /* 适当增大底部间距 */ line-height: 1.35; /* 适当增大行高 */ letter-spacing: -0.2px; } .goods-price { display: flex; align-items: center; margin-bottom: 6px; } .price-symbol { font-size: 18px; /* 适当增大字体大小 */ color: #666; margin-right: 4px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; } .price-value { font-size: 26px; /* 适当增大字体大小 */ color: #ff4d4f; font-weight: 700; letter-spacing: -0.5px; display: inline-flex; align-items: center; justify-content: center; } .price-value::before { content: '¥'; font-size: 24px; margin-right: 2px; } .source-type-badge { font-size: 24rpx; color: #ffffff; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12rpx); -webkit-backdrop-filter: blur(12rpx); border: 1rpx solid rgba(255, 255, 255, 0.25); padding: 4rpx 12rpx; border-radius: 8rpx; font-weight: bold; box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12), inset 0 1rpx 0 rgba(255, 255, 255, 0.3); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; margin-top: -22rpx; } .source-type-badge:active { transform: scale(0.98); box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.3); } /* 商品详细信息网格 */ .info-grid { background-color: #ffffff; margin: 8px 0; padding: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .info-row { display: flex; flex-wrap: wrap; margin-bottom: 10px; background: #f0f5ff; border-radius: 10px; overflow: hidden; border: 1px solid #d6e4ff; } /* 新增:全宽行样式 */ .info-row.full-width { flex-direction: column; background: #ffffff; border: 1px solid #e8f4ff; } .info-row:last-child { margin-bottom: 0; } .info-item { flex: 0 0 50%; display: flex; flex-direction: column; padding: 12px 14px; box-sizing: border-box; position: relative; } /* 新增:全宽项样式 */ .info-item.full-item { width: 100%; flex: none; background: #f6fbff; border-radius: 8px; margin: 6px 0; border: 1px solid #e6f7ff; } .info-item:nth-child(odd)::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, #e8e8e8, transparent); } .info-label-container { margin-bottom: 4px; /* 减小间距 */ } .info-label { font-size: 13px; color: #8c8c8c; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2px; } .info-value-container { min-height: 20px; /* 减小最小高度 */ } .info-value { font-size: 16px; color: #000000d9; font-weight: 600; line-height: 1.3; } /* 新增:规格信息列表样式 */ .spec-info-list { margin-top: 8px; padding: 0; } .spec-info-item { margin-bottom: 8px; padding: 10px 14px; background-color: #f0f4ff; border-radius: 6px; border-left: 3px solid #1890ff; transition: all 0.2s ease; } .spec-info-item:active { background-color: #e6f7ff; transform: translateX(3px); } .spec-info-text { font-size: 15px; color: #262626; line-height: 1.4; font-weight: 500; } /* 新增:货源描述样式 */ .goods-description { background-color: #ffffff; margin: 8px 0; padding: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border-radius: 8px; border: 1px solid #f0f0f0; } .description-content { margin-top: 8px; padding: 8px 0; } .description-content .info-value { font-size: 15px; line-height: 1.5; color: #595959; font-weight: 400; white-space: pre-wrap; } /* 联系信息 */ .contact-info { margin: 8px 16px; /* 减小外边距 */ padding: 12px; /* 减小内边距 */ border-radius: 10px; /* 减小圆角 */ background: #ffffff; border: 1px solid #d6e4ff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .contact-label { display: none; /* 隐藏联系信息标题,节省空间 */ } .contact-content { display: flex; flex-direction: column; gap: 6px; /* 减小间距 */ } .contact-item { display: flex; align-items: center; padding: 6px 0; /* 减小内边距 */ } .phone-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; /* 减小内边距 */ } .contact-icon { font-size: 14px; /* 减小图标大小 */ margin-right: 8px; /* 减小间距 */ flex-shrink: 0; width: 18px; /* 减小宽度 */ text-align: center; color: #2f54eb; } .user-icon { font-size: 16px; /* 减小图标大小 */ } .phone-icon { font-size: 16px; /* 减小图标大小 */ } .contact-label-text { font-size: 13px; /* 减小字体大小 */ color: #595959; margin-right: 6px; /* 减小间距 */ white-space: nowrap; flex-shrink: 0; } .contact-text { font-size: 13px; /* 减小字体大小 */ color: #262626; flex-shrink: 0; margin-right: 12px; /* 减小间距 */ } .phone-info { display: flex; flex-direction: row; flex: 1; align-items: center; } .phone-info .contact-label-text { margin-bottom: 0; } /* 底部按钮区域样式 */ .action-buttons { position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 16px; /* 减小内边距 */ background-color: #ffffff; border-top: 1px solid #f0f0f0; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06); z-index: 99; display: flex; gap: 8px; /* 减小按钮间距 */ } .bottom-button { flex: 1; height: 48px; /* 减小按钮高度 */ border-radius: 24px; /* 减小圆角 */ font-size: 16px; /* 减小字体大小 */ font-weight: 700; display: flex; justify-content: center; align-items: center; border: none; outline: none; transition: all 0.3s ease; margin: 0; } .bottom-button:active { transform: scale(0.98); opacity: 0.9; } /* 编辑按钮样式 */ .edit-button.bottom-button { background-color: #ffffff; color: #2f54eb; border: 2px solid #2f54eb; box-shadow: none; } .edit-button.bottom-button:active { background-color: #f0f4ff; transform: scale(0.98); } /* 上架按钮样式 */ .publish-button.bottom-button { background-color: #52c41a; color: #ffffff; border: 2px solid #52c41a; box-shadow: 0 2px 8px rgba(82, 196, 26, 0.2); } .publish-button.bottom-button:active { background-color: #73d13d; transform: scale(0.98); box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3); } /* 已下架按钮样式 */ .publish-button.bottom-button.disabled-button, .publish-button.bottom-button[disabled] { background-color: #d9d9d9; color: #999999; border: 2rpx solid #d9d9d9; box-shadow: none; } /* 返回按钮样式 */ .back-button.bottom-button { background-color: #ffffff; color: #333333; border: 2px solid #d9d9d9; box-shadow: none; } .back-button.bottom-button:active { background-color: #f5f5f5; transform: scale(0.98); } /* 图片预览弹窗 */ .image-preview-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; z-index: 1000; display: flex; flex-direction: column; } .preview-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 16px; color: #ffffff; z-index: 10; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); } .preview-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border-radius: 22px; transition: all 0.2s ease; } .preview-close:active { background: rgba(255, 255, 255, 0.2); transform: scale(0.95); } .close-icon { font-size: 24px; color: #ffffff; font-weight: 300; } .preview-indicator { font-size: 15px; color: #ffffff; font-weight: 500; opacity: 0.8; } .preview-swiper { flex: 1; width: 100%; } .preview-image-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; padding: 20px; box-sizing: border-box; } /* 净重件数对应信息样式 */ .weight-quantity-info { background-color: #ffffff; margin: 16rpx; padding: 24rpx; border-radius: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); border: 1rpx solid #f0f0f0; } .wq-title { font-size: 32rpx; font-weight: 600; color: #262626; margin-bottom: 16rpx; padding-bottom: 12rpx; border-bottom: 1rpx solid #f0f0f0; position: relative; } .wq-title::after { content: ''; position: absolute; bottom: -1rpx; left: 0; width: 60rpx; height: 4rpx; background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); border-radius: 2rpx; } .wq-list { display: flex; flex-direction: column; gap: 12rpx; } .wq-item { background-color: #f8f9fa; padding: 16rpx 20rpx; border-radius: 8rpx; border-left: 4rpx solid #1890ff; transition: all 0.3s ease; } .wq-item:active { background-color: #e6f7ff; transform: translateX(4rpx); } .wq-text { font-size: 28rpx; color: #595959; line-height: 1.5; font-weight: 500; } /* 货源描述样式 */ .goods-description { background-color: #ffffff; margin: 16rpx; padding: 24rpx; border-radius: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); border: 1rpx solid #f0f0f0; } .gd-label-container { margin-bottom: 16rpx; padding-bottom: 12rpx; border-bottom: 1rpx solid #f0f0f0; position: relative; } .gd-label-container::after { content: ''; position: absolute; bottom: -1rpx; left: 0; width: 60rpx; height: 4rpx; background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); border-radius: 2rpx; } .gd-label { font-size: 32rpx; font-weight: 600; color: #262626; text-transform: uppercase; letter-spacing: 1rpx; } .gd-content { margin-top: 16rpx; } .gd-value { font-size: 28rpx; color: #595959; line-height: 1.6; font-weight: 400; white-space: pre-wrap; word-break: break-all; } /* 同步 goods 页面的 product-description 样式 */ .product-description { font-size: 22rpx; color: #666; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 6rpx 0; background: #fafafa; padding: 6rpx; border-radius: 8rpx; border: 1rpx solid #f0f0f0; width: 100%; box-sizing: border-box; } /* 联系人信息样式 */ .contact-info { margin: 16rpx; padding: 16rpx 24rpx; background: #ffffff; border-radius: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); border: 1rpx solid #f0f0f0; display: flex; flex-direction: column; gap: 12rpx; } .contact-item { display: flex; align-items: center; gap: 12rpx; } .contact-label { font-size: 28rpx; font-weight: 500; color: #8c8c8c; min-width: 120rpx; } .contact-value { font-size: 28rpx; color: #333; flex: 1; } /* 创建人信息样式 */ .creator-info { margin: 16rpx; padding: 16rpx 24rpx; background: #ffffff; border-radius: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); border: 1rpx solid #f0f0f0; display: flex; flex-direction: column; gap: 12rpx; } .creator-item { display: flex; align-items: center; gap: 12rpx; } .creator-label { font-size: 28rpx; font-weight: 500; color: #8c8c8c; min-width: 120rpx; } .creator-name, .create-time { font-size: 28rpx; color: #262626; font-weight: 400; } .create-time { color: #8c8c8c; } .preview-image { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; } /* 添加一些微动画效果 */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .goods-info, .info-grid, .contact-info { animation: fadeIn 0.4s ease-out; } .info-grid { animation-delay: 0.1s; } .contact-info { animation-delay: 0.2s; } /* 响应式调整 */ @media (min-height: 800px) { .goods-image-slider { height: 320px; } .goods-name { font-size: 22px; } .price-value { font-size: 32px; } } /* 登录弹窗样式 */ .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: 32rpx; width: 90%; max-width: 720rpx; padding: 60rpx 40rpx 40rpx; box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2); transition: all 0.3s ease; border: 2rpx solid rgba(255, 255, 255, 0.8); box-sizing: border-box; } .auth-modal-title { font-size: 44rpx; font-weight: bold; color: #222; text-align: center; margin-bottom: 40rpx; letter-spacing: 1rpx; } .auth-modal-content { font-size: 32rpx; line-height: 1.6; color: #555; text-align: center; margin-bottom: 50rpx; padding: 0 20rpx; width: 100%; box-sizing: border-box; word-break: break-word; } .auth-modal-buttons { display: flex; flex-direction: column; gap: 20rpx; padding: 0 20rpx; width: 100%; box-sizing: border-box; } .auth-primary-button { background-color: #07c160; color: #fff; font-size: 36rpx; font-weight: 600; line-height: 1.6; border-radius: 12rpx; padding: 32rpx 0; width: 100%; box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); transition: all 0.3s ease; border: none; margin: 0; min-width: auto; } .auth-primary-button:active { transform: translateY(2rpx); box-shadow: 0 3rpx 12rpx rgba(7, 193, 96, 0.5); } .auth-primary-button::after { border: none; } .auth-cancel-button { background-color: #fff; color: #666; font-size: 36rpx; font-weight: 500; line-height: 1.6; border-radius: 12rpx; padding: 32rpx 0; width: 100%; border: 1rpx solid #e0e0e0; transition: all 0.3s ease; margin: 0; min-width: auto; } .auth-cancel-button:active { transform: translateY(2rpx); border-color: #d0d0d0; } .auth-cancel-button::after { border: none; } /* 净重件数对应信息样式 */ .weight-quantity-info { background-color: #ffffff; margin: 16rpx; padding: 24rpx; border-radius: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); border: 1rpx solid #f0f0f0; } .wq-title { font-size: 32rpx; font-weight: 600; color: #262626; margin-bottom: 16rpx; padding-bottom: 12rpx; border-bottom: 1rpx solid #f0f0f0; position: relative; } .wq-title::after { content: ''; position: absolute; bottom: -1rpx; left: 0; width: 60rpx; height: 4rpx; background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); border-radius: 2rpx; } .wq-list { display: flex; flex-direction: column; gap: 12rpx; } .wq-item { background-color: #f8f9fa; padding: 16rpx 20rpx; border-radius: 8rpx; border-left: 4rpx solid #1890ff; transition: all 0.3s ease; } .wq-item:active { background-color: #e6f7ff; transform: translateX(4rpx); } .wq-text { font-size: 28rpx; color: #595959; line-height: 1.5; font-weight: 500; }