118 lines
3.0 KiB
CSS
118 lines
3.0 KiB
CSS
/**
|
||
* 铸爱 create 页 — 镭射卡上传区样式（独立 CSS，由 create.vue import，确保各端构建必进包）
|
||
* 根类 castlove-laser-upload-root 全局唯一，避免 scoped / 第二 style 块在部分端未生效
|
||
*/
|
||
.castlove-laser-upload-root {
|
||
position: relative;
|
||
width: 100%;
|
||
/* 略偏竖版小卡比例，接近设计稿「大卡 + 内虚线」观感 */
|
||
height: 520rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 32rpx;
|
||
border: 1rpx solid rgba(255, 255, 255, 0.38);
|
||
background: rgba(255, 255, 255, 0.18);
|
||
backdrop-filter: blur(22rpx);
|
||
-webkit-backdrop-filter: blur(22rpx);
|
||
overflow: hidden;
|
||
box-shadow:
|
||
0 22rpx 56rpx rgba(40, 22, 80, 0.36),
|
||
inset 0 0 0 1rpx rgba(255, 255, 255, 0.22);
|
||
}
|
||
|
||
.castlove-laser-upload-root .uploaded-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 24rpx;
|
||
box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.22);
|
||
}
|
||
|
||
.castlove-laser-upload-root .upload-laser-stack {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 与设计稿一致：卡内淡色「卡面 / 人像」底图（与工艺选择同款素材） */
|
||
.castlove-laser-upload-root .upload-laser-photo-bg {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
opacity: 0.22;
|
||
pointer-events: none;
|
||
filter: saturate(1.15) contrast(0.92);
|
||
}
|
||
|
||
.castlove-laser-upload-root .upload-laser-watermark {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
opacity: 1;
|
||
pointer-events: none;
|
||
/* 叠在底图上：压暗边缘 + 轻微幻彩，避免只剩「灰蒙一块」 */
|
||
background:
|
||
linear-gradient(
|
||
118deg,
|
||
rgba(255, 170, 220, 0.12) 0%,
|
||
transparent 40%,
|
||
rgba(170, 210, 255, 0.1) 62%,
|
||
transparent 82%,
|
||
rgba(255, 210, 190, 0.08) 100%
|
||
),
|
||
radial-gradient(ellipse 55% 75% at 50% 100%, rgba(35, 22, 70, 0.45), transparent 58%),
|
||
radial-gradient(ellipse 40% 48% at 50% 32%, rgba(100, 75, 150, 0.28), transparent 55%),
|
||
linear-gradient(185deg, rgba(255, 220, 245, 0.08) 0%, rgba(55, 35, 95, 0.25) 100%);
|
||
}
|
||
|
||
.castlove-laser-upload-root .upload-laser-inset {
|
||
position: absolute;
|
||
/* 收紧留白：虚线框更贴外框，接近设计稿「整卡即相框」 */
|
||
left: 14rpx;
|
||
right: 14rpx;
|
||
top: 14rpx;
|
||
bottom: 14rpx;
|
||
z-index: 2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.castlove-laser-upload-root .upload-laser-dashed-inner {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
border: 2rpx dashed rgba(255, 255, 255, 0.95);
|
||
border-radius: 26rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20rpx;
|
||
padding: 24rpx 16rpx;
|
||
background: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
.castlove-laser-upload-root .upload-plus--laser {
|
||
font-size: 96rpx;
|
||
line-height: 0.88;
|
||
color: #ffffff;
|
||
font-weight: 100;
|
||
text-shadow: 0 2rpx 18rpx rgba(60, 30, 100, 0.35);
|
||
}
|
||
|
||
.castlove-laser-upload-root .upload-text--laser {
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.96);
|
||
font-weight: 500;
|
||
letter-spacing: 1rpx;
|
||
text-shadow: 0 2rpx 12rpx rgba(40, 20, 80, 0.4);
|
||
}
|