R524809
112 lines
2.0 KiB
Plaintext
112 lines
2.0 KiB
Plaintext
@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%;
|
|
} |