Initial Commit
This commit is contained in:
commit
1d71a02738
237 changed files with 64293 additions and 0 deletions
446
components/interactive-feedback/interactive-feedback.wxss
Normal file
446
components/interactive-feedback/interactive-feedback.wxss
Normal file
|
|
@ -0,0 +1,446 @@
|
|||
/* 🎯 交互反馈组件样式 */
|
||||
|
||||
/* CSS变量定义 */
|
||||
.interactive-feedback-container {
|
||||
--primary-color: #007AFF;
|
||||
--primary-light: #5AC8FA;
|
||||
--success-color: #34C759;
|
||||
--error-color: #FF3B30;
|
||||
--background-color: #F2F2F7;
|
||||
--surface-color: #FFFFFF;
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #8E8E93;
|
||||
--border-color: #E5E5EA;
|
||||
--shadow-light: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
--radius-medium: 12rpx;
|
||||
}
|
||||
|
||||
/* 🌙 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.interactive-feedback-container {
|
||||
--primary-color: #0A84FF;
|
||||
--background-color: #000000;
|
||||
--surface-color: #1C1C1E;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #8E8E93;
|
||||
--border-color: #38383A;
|
||||
--shadow-light: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.interactive-feedback-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* 🎨 反馈类型样式 */
|
||||
.interactive-feedback-container.button {
|
||||
border-radius: var(--radius-medium);
|
||||
background: var(--surface-color);
|
||||
border: 1rpx solid var(--border-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.interactive-feedback-container.card {
|
||||
border-radius: var(--radius-medium);
|
||||
background: var(--surface-color);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.interactive-feedback-container.list-item {
|
||||
background: var(--surface-color);
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.interactive-feedback-container.icon {
|
||||
border-radius: 50%;
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.interactive-feedback-container.floating {
|
||||
border-radius: 50%;
|
||||
background: var(--primary-color);
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 🎭 状态样式 */
|
||||
.interactive-feedback-container.pressed {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.interactive-feedback-container.active {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.interactive-feedback-container.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.interactive-feedback-container.loading {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.interactive-feedback-container.success {
|
||||
background: var(--success-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.interactive-feedback-container.error {
|
||||
background: var(--error-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🌊 波纹效果 */
|
||||
.ripple-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
transform: scale(0);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.ripple.primary {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.ripple.white {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.ripple.dark {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 📱 触摸反馈 */
|
||||
.touch-feedback {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.touch-feedback.overlay {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.touch-feedback.highlight {
|
||||
background: rgba(0, 122, 255, 0.1);
|
||||
}
|
||||
|
||||
.touch-feedback.glow {
|
||||
box-shadow: 0 0 20rpx rgba(0, 122, 255, 0.5);
|
||||
}
|
||||
|
||||
.touch-feedback.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 🔄 加载状态 */
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 3rpx solid rgba(0, 122, 255, 0.2);
|
||||
border-top: 3rpx solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* ✅ 成功反馈 */
|
||||
.success-feedback {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--success-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 40rpx;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ❌ 错误反馈 */
|
||||
.error-feedback {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--error-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 40rpx;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 🎪 动画效果 */
|
||||
@keyframes rippleExpand {
|
||||
from {
|
||||
transform: scale(0);
|
||||
opacity: 0.3;
|
||||
}
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes successPop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes errorShake {
|
||||
0%, 100% {
|
||||
transform: translate(-50%, -50%) translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translate(-50%, -50%) translateX(-10rpx);
|
||||
}
|
||||
75% {
|
||||
transform: translate(-50%, -50%) translateX(10rpx);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 53%, 80%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
40%, 43% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
90% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
/* 🎭 动画类应用 */
|
||||
.ripple.animate {
|
||||
animation: rippleExpand 0.6s ease-out;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.success-feedback.animate {
|
||||
animation: successPop 0.5s ease-out;
|
||||
}
|
||||
|
||||
.error-feedback.animate {
|
||||
animation: errorShake 0.5s ease-out;
|
||||
}
|
||||
|
||||
.interactive-feedback-container.pulse {
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.interactive-feedback-container.bounce {
|
||||
animation: bounce 1s ease-in-out;
|
||||
}
|
||||
|
||||
/* 🎨 特殊效果 */
|
||||
.interactive-feedback-container.glass {
|
||||
backdrop-filter: blur(20rpx);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.interactive-feedback-container.neon {
|
||||
box-shadow:
|
||||
0 0 10rpx var(--primary-color),
|
||||
0 0 20rpx var(--primary-color),
|
||||
0 0 40rpx var(--primary-color);
|
||||
}
|
||||
|
||||
.interactive-feedback-container.gradient {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
|
||||
}
|
||||
|
||||
/* 📱 响应式设计 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.success-feedback,
|
||||
.error-feedback {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.success-icon,
|
||||
.error-icon {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-width: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
.success-feedback,
|
||||
.error-feedback {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.success-icon,
|
||||
.error-icon {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-width: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 🎯 交互状态 */
|
||||
.interactive-feedback-container:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.interactive-feedback-container.no-scale:active {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.interactive-feedback-container.scale-large:active {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* 🔧 性能优化 */
|
||||
.interactive-feedback-container {
|
||||
will-change: transform, opacity;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
/* 🎪 组合效果 */
|
||||
.interactive-feedback-container.hover-lift {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.interactive-feedback-container.hover-lift:hover {
|
||||
transform: translateY(-4rpx);
|
||||
box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.interactive-feedback-container.hover-glow:hover {
|
||||
box-shadow: 0 0 30rpx rgba(0, 122, 255, 0.4);
|
||||
}
|
||||
|
||||
/* 🎭 主题变体 */
|
||||
.interactive-feedback-container.theme-primary {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.interactive-feedback-container.theme-success {
|
||||
background: var(--success-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.interactive-feedback-container.theme-error {
|
||||
background: var(--error-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.interactive-feedback-container.theme-ghost {
|
||||
background: transparent;
|
||||
border: 2rpx solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.interactive-feedback-container.theme-minimal {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue