feat: 打印预览组件化

2026-04-22 15:02:48 +08:00
parent 4ad387e99d
commit de74666c9f
24 changed files with 552 additions and 273 deletions
@@ -0,0 +1,112 @@
+@import '../../style/theme.less';
+
+.pc-wrap {
+    position: relative;
+}
+
+.pc-card {
+    position: relative;
+    background: @bg-white;
+    border-radius: @radius-xl;
+    box-shadow: @shadow;
+    padding: 40rpx;
+    border: @border;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.pc-card--with-fab {
+    padding-bottom: 56rpx;
+}
+
+.pc-kicker {
+    display: block;
+    text-align: center;
+    font-size: @fs-section-head-title;
+    font-weight: bold;
+    color: @text-secondary;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    margin-bottom: 30rpx;
+}
+
+.pc-canvas-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400rpx;
+    background: @bg-gray;
+    border-radius: @radius-sm;
+    border: 2rpx dashed rgba(50, 46, 37, 0.12);
+    overflow: hidden;
+}
+
+.pc-canvas {
+    max-width: 100%;
+    border-radius: @radius-sm;
+    box-shadow: @shadow;
+}
+
+/* 底部角上的圆形操作按钮 */
+@pc-fab-size: 88rpx;
+
+@keyframes pc-fab-spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.pc-fab {
+    position: absolute;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: @pc-fab-size;
+    height: @pc-fab-size;
+    border-radius: 50%;
+    box-shadow: 0 6rpx 18rpx rgba(50, 46, 37, 0.12);
+    box-sizing: border-box;
+}
+
+.pc-fab--hover {
+    opacity: 0.88;
+    transform: scale(0.96);
+}
+
+.pc-fab--refresh {
+    left: 12rpx;
+    bottom: 12rpx;
+    background: #9add4c;
+}
+
+.pc-fab--favorite {
+    right: 12rpx;
+    bottom: 12rpx;
+    background: #f2eee4;
+}
+
+.pc-fab__toy {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.pc-fab__icon-wrap--a .pc-fab__toy,
+.pc-fab__icon-wrap--b .pc-fab__toy {
+    animation: pc-fab-spin 0.55s linear 1;
+}
+
+.pc-fab__icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}