forked from gxwebsoft/mp-10550
refactor(components): 优化多个组件的样式和功能
-调整 AdminPanel 组件的样式,移除 max-h-[70vh] 类 - 更新 Header组件的参数类型 - 在 QRLoginButton 组件中添加日志输出 - 重构 qr-login 页面的导航栏,目前已被注释掉
This commit is contained in:
@@ -1,89 +0,0 @@
|
||||
.admin-panel {
|
||||
/* 面板动画 */
|
||||
.admin-panel-content {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 网格布局优化 */
|
||||
.admin-feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 功能卡片样式 */
|
||||
.admin-feature-card {
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标容器 */
|
||||
.admin-feature-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 模式切换按钮动画 */
|
||||
.mode-toggle-btn {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
/* 管理面板按钮 */
|
||||
.admin-panel-btn {
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 滑入动画 */
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 遮罩层动画 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-panel-overlay {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
@@ -3,7 +3,6 @@ import { View, Text } from '@tarojs/components';
|
||||
import { Button } from '@nutui/nutui-react-taro';
|
||||
import { Scan, Setting, User, Shop } from '@nutui/icons-react-taro';
|
||||
import navTo from '@/utils/common';
|
||||
import './AdminPanel.scss';
|
||||
|
||||
export interface AdminPanelProps {
|
||||
/** 是否显示面板 */
|
||||
@@ -95,7 +94,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
|
||||
/>
|
||||
|
||||
{/* 面板内容 */}
|
||||
<View className="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl z-50 max-h-[70vh] overflow-hidden">
|
||||
<View className="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl z-50 overflow-hidden">
|
||||
{/* 面板头部 */}
|
||||
<View className="flex items-center justify-between p-4 border-b border-gray-100">
|
||||
<View className="flex items-center">
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
filter: grayscale(0.3);
|
||||
/* filter: grayscale(0.3); 小程序不支持filter属性 */
|
||||
}
|
||||
|
||||
.coupon-left {
|
||||
@@ -199,11 +199,7 @@
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
|
||||
/* 添加文字渐变效果 */
|
||||
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
/* 文字渐变效果在小程序中不支持,使用纯色替代 */
|
||||
}
|
||||
|
||||
.coupon-validity {
|
||||
@@ -309,7 +305,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(2px);
|
||||
/* backdrop-filter: blur(2px); 小程序不支持backdrop-filter属性 */
|
||||
|
||||
.status-badge {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
|
||||
@@ -2,7 +2,7 @@ import {NavBar} from '@nutui/nutui-react-taro'
|
||||
import {ArrowLeft} from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
function Header(props) {
|
||||
function Header(props: any) {
|
||||
return (
|
||||
<>
|
||||
<NavBar
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import { Button } from '@nutui/nutui-react-taro';
|
||||
import { Scan } from '@nutui/icons-react-taro';
|
||||
import Taro from '@tarojs/taro';
|
||||
@@ -65,6 +64,7 @@ const QRLoginButton: React.FC<QRLoginButtonProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
console.log(onSuccess,'onSuccess')
|
||||
const disabled = !canScan() || isLoading;
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user