85 lines
1.8 KiB
CSS
85 lines
1.8 KiB
CSS
/* 产品详情页 - 页面容器样式 */
|
|
/* 各区块样式在 pages/product-detail/components/ 下对应组件的 <style scoped> 中 */
|
|
|
|
.detail-page {
|
|
min-height: 100vh;
|
|
background: #ffffff;
|
|
}
|
|
|
|
/* 自定义导航栏（UI-0014）：固定顶部白底，状态栏占位 + 44px 导航行 */
|
|
.nav-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #ffffff;
|
|
z-index: 999;
|
|
}
|
|
.nav-inner {
|
|
position: relative;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
/* 返回按钮：44px 命中区，箭头用 CSS 边框绘制，无需图标资源 */
|
|
.nav-back {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 44px;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.nav-back-arrow {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
border-left: 4rpx solid #000000;
|
|
border-bottom: 4rpx solid #000000;
|
|
transform: rotate(45deg);
|
|
margin-left: 8rpx;
|
|
}
|
|
.nav-title {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
}
|
|
|
|
/* 区块之间的灰色分隔条：390x6px #F5F5F5 */
|
|
.section-divider {
|
|
width: 100%;
|
|
height: 12rpx; /* 6px */
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
/* 底部操作区：生成分享图按钮 */
|
|
.share-footer {
|
|
padding: 24rpx 20rpx;
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
background: #ffffff;
|
|
}
|
|
.share-btn {
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #ff6800;
|
|
border-radius: 44rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* 生成分享图用的画布（uni-app CanvasContext 旧版接口，跨端）：
|
|
固定定位移出可视区，仅用于绘制导出；
|
|
CSS 尺寸为设计稿(750x1200，比例约 2.5:4)的一半，绘制时 scale(0.5)，导出时再按像素密度放大 */
|
|
.share-canvas {
|
|
position: fixed;
|
|
left: -9999px;
|
|
top: 0;
|
|
width: 375px;
|
|
height: 600px;
|
|
}
|