1 line
5.0 KiB
Plaintext
1 line
5.0 KiB
Plaintext
.diy-page{min-height:100vh;padding:0 24rpx 24rpx}.canvas-wrapper{-ms-flex-pack:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;padding:40rpx}.canvas-area{background:-webkit-linear-gradient(315deg,rgba(255,154,158,.08),rgba(160,196,255,.08));background:linear-gradient(135deg,rgba(255,154,158,.08),rgba(160,196,255,.08));border-radius:16rpx;min-height:200rpx;min-width:200rpx;overflow:hidden;position:relative}.mask-border{border:3rpx dashed var(--accent-blue);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:2}.canvas-image{border:2rpx solid transparent;max-height:100%;max-width:100%;position:absolute;z-index:5}.canvas-image.active{border-color:var(--accent-pink)}.canvas-image.overlap{border-color:#ff4757;-webkit-box-shadow:0 0 12rpx rgba(255,71,87,.5);box-shadow:0 0 12rpx rgba(255,71,87,.5)}.sticker-panel{padding:28rpx}.sticker-list{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16rpx}.sticker-thumb{background:var(--bg-input);border:2rpx dashed var(--line-star);border-radius:12rpx;height:120rpx;overflow:hidden;position:relative;width:120rpx}.sticker-thumb.active{border-color:var(--accent-pink);border-width:3rpx}.sticker-thumb.overlap{border-color:#ff4757}.sticker-thumb-img{height:100%;width:100%}.sticker-del{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:rgba(255,71,87,.85);border-radius:50%;display:-webkit-flex;display:-ms-flexbox;display:flex;height:36rpx;-webkit-justify-content:center;justify-content:center;position:absolute;right:4rpx;top:4rpx;width:36rpx;z-index:10}.del-icon{color:#fff;font-size:24rpx;font-weight:700}.sticker-add-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-input);border:2rpx dashed var(--line-star);border-radius:12rpx;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:120rpx;-webkit-justify-content:center;justify-content:center;width:120rpx}.add-icon{color:var(--accent-pink);font-size:48rpx;line-height:1}.add-label{color:var(--text-secondary);font-size:22rpx;margin-top:8rpx}.overlap-hint{color:#ff4757;display:block;font-size:26rpx;font-weight:600;margin-top:16rpx;text-align:center}.toolbar{padding:28rpx 32rpx}.tool-row{-ms-flex-align:center;-ms-flex-pack:justify;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin-bottom:20rpx}.tool-row:last-child{margin-bottom:0}.tool-label{color:var(--text-primary);font-size:28rpx;font-weight:600}.tool-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:-webkit-linear-gradient(315deg,rgba(255,154,158,.08),rgba(160,196,255,.08));background:linear-gradient(135deg,rgba(255,154,158,.08),rgba(160,196,255,.08));border:2rpx dashed var(--accent-blue);border-radius:50%;color:var(--text-primary);display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:32rpx;font-weight:700;height:56rpx;-webkit-justify-content:center;justify-content:center;width:56rpx}.tool-value{color:var(--accent-pink);font-size:28rpx;font-weight:600;min-width:80rpx;text-align:center}.tool-hint{color:var(--text-secondary);font-size:24rpx}.preview-overlay{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:rgba(0,0,0,.5);bottom:0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;left:0;padding:40rpx;position:fixed;right:0;top:0;z-index:1000}.preview-card{background:var(--bg-card);max-height:80vh;overflow-y:auto;padding:40rpx;width:100%}.preview-title{color:var(--text-primary);display:block;font-size:36rpx;font-weight:700;margin-bottom:24rpx;text-align:center}.preview-canvas{background:-webkit-linear-gradient(315deg,rgba(255,154,158,.08),rgba(160,196,255,.08));background:linear-gradient(135deg,rgba(255,154,158,.08),rgba(160,196,255,.08));border:3rpx dashed var(--accent-blue);border-radius:16rpx;margin:0 auto 24rpx;min-height:200rpx;min-width:200rpx;overflow:hidden;position:relative}.preview-image{max-height:100%;max-width:100%;position:absolute;z-index:5}.preview-image.overlap{border:2rpx solid #ff4757}.product-info{margin-bottom:32rpx;text-align:center}.product-name{color:var(--text-primary);display:block;font-size:30rpx;font-weight:700;margin-bottom:8rpx}.product-size{color:var(--text-secondary);font-size:24rpx}.preview-actions{display:-webkit-flex;display:-ms-flexbox;display:flex;gap:20rpx}.preview-actions .btn-gradient,.preview-actions .btn-outline{-webkit-flex:1;-ms-flex:1;flex:1;text-align:center}.preview-actions .btn-gradient.disabled{opacity:.5;pointer-events:none}.action-btns{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:20rpx}.mt-20{margin-top:20rpx} |