feat: 优化UI
This commit is contained in:
GukSang.Jin
@@ -142,138 +142,349 @@
|
||||
</Border>
|
||||
|
||||
<!-- 中间欢迎区域 -->
|
||||
<Grid Grid.Row="1" Margin="0,20,0,20">
|
||||
<!-- 待机状态：宠物图标居中 -->
|
||||
<StackPanel VerticalAlignment="Center"
|
||||
HorizontalAlignment="Center"
|
||||
Visibility="{Binding IsDoorOpen, Converter={StaticResource InverseBoolToVisibilityConverter}}">
|
||||
<!-- 可爱的宠物图片 -->
|
||||
<Border Width="280" Height="280"
|
||||
<Grid Grid.Row="1" Margin="40,20,40,20">
|
||||
<!-- 待机状态：左右布局 -->
|
||||
<Grid Visibility="{Binding IsDoorOpen, Converter={StaticResource InverseBoolToVisibilityConverter}}">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="1.2*"/>
|
||||
<ColumnDefinition Width="40"/>
|
||||
<ColumnDefinition Width="*"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<!-- 左侧：大图展示区 -->
|
||||
<Border Grid.Column="0"
|
||||
Background="White"
|
||||
CornerRadius="140"
|
||||
Margin="0,0,0,30"
|
||||
BorderBrush="#81C784"
|
||||
BorderThickness="8">
|
||||
CornerRadius="30"
|
||||
Padding="20"
|
||||
Opacity="0.95">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#4CAF50" BlurRadius="30" ShadowDepth="0" Opacity="0.6"/>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="20" ShadowDepth="6" Opacity="0.4"/>
|
||||
</Border.Effect>
|
||||
<Image Source="/Images/unnamed.png"
|
||||
Stretch="UniformToFill"
|
||||
Margin="0"/>
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- 顶部装饰条 -->
|
||||
<Border Grid.Row="0"
|
||||
Background="#81C784"
|
||||
CornerRadius="15"
|
||||
Padding="20,12"
|
||||
Margin="0,0,0,20">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#4CAF50" BlurRadius="10" ShadowDepth="0" Opacity="0.5"/>
|
||||
</Border.Effect>
|
||||
<TextBlock Text="🐾 专业宠物洗护服务"
|
||||
FontSize="24"
|
||||
FontWeight="Bold"
|
||||
Foreground="White"
|
||||
HorizontalAlignment="Center"/>
|
||||
</Border>
|
||||
|
||||
<!-- 宠物大图 -->
|
||||
<Border Grid.Row="1"
|
||||
Background="#F5F5F5"
|
||||
CornerRadius="25"
|
||||
BorderBrush="#81C784"
|
||||
BorderThickness="4">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#4CAF50" BlurRadius="15" ShadowDepth="0" Opacity="0.4"/>
|
||||
</Border.Effect>
|
||||
<Image Source="/Images/dog.png"
|
||||
Stretch="Uniform"
|
||||
Margin="10"/>
|
||||
</Border>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- 欢迎文字 -->
|
||||
<TextBlock Text="欢迎使用全自动洗宠机"
|
||||
FontSize="32"
|
||||
FontWeight="Bold"
|
||||
Foreground="#2E7D32"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,8">
|
||||
<TextBlock.Effect>
|
||||
<DropShadowEffect Color="#FFFFFF" BlurRadius="5" ShadowDepth="0" Opacity="0.8"/>
|
||||
</TextBlock.Effect>
|
||||
</TextBlock>
|
||||
<TextBlock Text="让您的爱宠享受专业洗护服务"
|
||||
FontSize="18"
|
||||
Foreground="#558B2F"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,40"/>
|
||||
|
||||
<!-- 开始按钮 -->
|
||||
<Button Content="点击开始"
|
||||
Width="300"
|
||||
Height="80"
|
||||
FontSize="32"
|
||||
FontWeight="Bold"
|
||||
Style="{StaticResource RoundButton}"
|
||||
Command="{Binding ShowPaymentCommand}"/>
|
||||
</StackPanel>
|
||||
|
||||
<!-- 门打开状态：分上下两部分 -->
|
||||
<Grid Visibility="{Binding IsDoorOpen, Converter={StaticResource BoolToVisibilityConverter}}">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="*"/>
|
||||
<RowDefinition Height="Auto"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- 上部：宠物图标 -->
|
||||
<StackPanel Grid.Row="0"
|
||||
VerticalAlignment="Center"
|
||||
HorizontalAlignment="Center">
|
||||
<Border Width="220" Height="220"
|
||||
Background="White"
|
||||
CornerRadius="110"
|
||||
Margin="0,0,0,20"
|
||||
BorderBrush="#81C784"
|
||||
BorderThickness="6">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#4CAF50" BlurRadius="25" ShadowDepth="0" Opacity="0.6"/>
|
||||
</Border.Effect>
|
||||
<Image Source="/Images/unnamed.jpg"
|
||||
Stretch="UniformToFill"
|
||||
Margin="0"/>
|
||||
</Border>
|
||||
|
||||
<TextBlock Text="欢迎使用全自动洗宠机"
|
||||
FontSize="28"
|
||||
FontWeight="Bold"
|
||||
Foreground="#2E7D32"
|
||||
HorizontalAlignment="Center">
|
||||
<TextBlock.Effect>
|
||||
<DropShadowEffect Color="#FFFFFF" BlurRadius="5" ShadowDepth="0" Opacity="0.8"/>
|
||||
</TextBlock.Effect>
|
||||
</TextBlock>
|
||||
</StackPanel>
|
||||
|
||||
<!-- 下部：提示和按钮 -->
|
||||
<StackPanel Grid.Row="1"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,20">
|
||||
<Border Background="#FF6F00"
|
||||
CornerRadius="20"
|
||||
Padding="35,20"
|
||||
Margin="0,0,0,20"
|
||||
MaxWidth="600">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="10" ShadowDepth="4" Opacity="0.4"/>
|
||||
</Border.Effect>
|
||||
<StackPanel>
|
||||
<TextBlock Text="⚠ 设备门已打开"
|
||||
FontSize="26"
|
||||
FontWeight="Bold"
|
||||
HorizontalAlignment="Center"
|
||||
Foreground="White"/>
|
||||
<TextBlock Text="请将宠物放入设备后点击下方按钮关门"
|
||||
FontSize="16"
|
||||
HorizontalAlignment="Center"
|
||||
Foreground="White"
|
||||
Margin="0,10,0,0"
|
||||
TextWrapping="Wrap"/>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Button Content="关闭门并开始洗护"
|
||||
Width="300"
|
||||
Height="80"
|
||||
FontSize="26"
|
||||
FontWeight="Bold"
|
||||
Background="#4CAF50"
|
||||
Foreground="White"
|
||||
BorderThickness="0"
|
||||
Cursor="Hand"
|
||||
Command="{Binding CloseDoorCommand}">
|
||||
<Button.Template>
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Border Background="{TemplateBinding Background}" CornerRadius="40">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="10" ShadowDepth="4" Opacity="0.4"/>
|
||||
</Border.Effect>
|
||||
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
<!-- 右侧：欢迎信息和操作区 -->
|
||||
<Border Grid.Column="2"
|
||||
Background="White"
|
||||
CornerRadius="30"
|
||||
Padding="30,25"
|
||||
Opacity="0.95">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="20" ShadowDepth="6" Opacity="0.4"/>
|
||||
</Border.Effect>
|
||||
<Grid>
|
||||
<ScrollViewer VerticalScrollBarVisibility="Auto"
|
||||
HorizontalScrollBarVisibility="Disabled"
|
||||
Padding="5,0">
|
||||
<StackPanel>
|
||||
<!-- 欢迎标题 -->
|
||||
<TextBlock Text="欢迎使用"
|
||||
FontSize="24"
|
||||
FontWeight="Bold"
|
||||
Foreground="#2E7D32"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,10,0,8"
|
||||
TextWrapping="Wrap">
|
||||
<TextBlock.Effect>
|
||||
<DropShadowEffect Color="#81C784" BlurRadius="8" ShadowDepth="0" Opacity="0.6"/>
|
||||
</TextBlock.Effect>
|
||||
</TextBlock>
|
||||
|
||||
<TextBlock Text="全自动洗宠机"
|
||||
FontSize="30"
|
||||
FontWeight="Bold"
|
||||
Foreground="#1B5E20"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,20"
|
||||
TextWrapping="Wrap">
|
||||
<TextBlock.Effect>
|
||||
<DropShadowEffect Color="#81C784" BlurRadius="10" ShadowDepth="0" Opacity="0.6"/>
|
||||
</TextBlock.Effect>
|
||||
</TextBlock>
|
||||
|
||||
<!-- 服务特点 -->
|
||||
<Border Background="#E8F5E9"
|
||||
CornerRadius="15"
|
||||
Padding="18,12"
|
||||
Margin="0,0,0,18">
|
||||
<StackPanel>
|
||||
<TextBlock FontSize="15" Foreground="#2E7D32" Margin="0,0,0,6" TextWrapping="Wrap">
|
||||
<Run Text="✓" FontWeight="Bold" FontSize="16"/>
|
||||
<Run Text=" 专业洗护配方"/>
|
||||
</TextBlock>
|
||||
<TextBlock FontSize="15" Foreground="#2E7D32" Margin="0,0,0,6" TextWrapping="Wrap">
|
||||
<Run Text="✓" FontWeight="Bold" FontSize="16"/>
|
||||
<Run Text=" 智能温控系统"/>
|
||||
</TextBlock>
|
||||
<TextBlock FontSize="15" Foreground="#2E7D32" Margin="0,0,0,6" TextWrapping="Wrap">
|
||||
<Run Text="✓" FontWeight="Bold" FontSize="16"/>
|
||||
<Run Text=" 安全舒适体验"/>
|
||||
</TextBlock>
|
||||
<TextBlock FontSize="15" Foreground="#2E7D32" TextWrapping="Wrap">
|
||||
<Run Text="✓" FontWeight="Bold" FontSize="16"/>
|
||||
<Run Text=" 快速高效便捷"/>
|
||||
</TextBlock>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</Button.Template>
|
||||
</Button>
|
||||
</StackPanel>
|
||||
|
||||
<!-- 副标题 -->
|
||||
<TextBlock Text="让您的爱宠享受专业洗护服务"
|
||||
FontSize="16"
|
||||
Foreground="#558B2F"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,25"
|
||||
TextWrapping="Wrap"
|
||||
TextAlignment="Center"/>
|
||||
|
||||
<!-- 开始按钮 -->
|
||||
<Button Content="点击开始"
|
||||
Height="70"
|
||||
FontSize="28"
|
||||
FontWeight="Bold"
|
||||
Style="{StaticResource RoundButton}"
|
||||
Command="{Binding ShowPaymentCommand}"
|
||||
Margin="0,0,0,15">
|
||||
<Button.Effect>
|
||||
<DropShadowEffect Color="#FFA000" BlurRadius="15" ShadowDepth="0" Opacity="0.6"/>
|
||||
</Button.Effect>
|
||||
</Button>
|
||||
|
||||
<!-- 提示文字 -->
|
||||
<TextBlock Text="点击按钮开始您的洗护之旅"
|
||||
FontSize="13"
|
||||
Foreground="#9E9E9E"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,10"
|
||||
FontStyle="Italic"
|
||||
TextWrapping="Wrap"
|
||||
TextAlignment="Center"/>
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
</Border>
|
||||
</Grid>
|
||||
|
||||
<!-- 门打开状态：左右布局 -->
|
||||
<Grid Visibility="{Binding IsDoorOpen, Converter={StaticResource BoolToVisibilityConverter}}">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="1.2*"/>
|
||||
<ColumnDefinition Width="40"/>
|
||||
<ColumnDefinition Width="*"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<!-- 左侧：大图展示区 -->
|
||||
<Border Grid.Column="0"
|
||||
Background="White"
|
||||
CornerRadius="30"
|
||||
Padding="20"
|
||||
Opacity="0.95">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="20" ShadowDepth="6" Opacity="0.4"/>
|
||||
</Border.Effect>
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- 顶部装饰条 -->
|
||||
<Border Grid.Row="0"
|
||||
Background="#FF6F00"
|
||||
CornerRadius="15"
|
||||
Padding="20,12"
|
||||
Margin="0,0,0,20">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#FF6F00" BlurRadius="10" ShadowDepth="0" Opacity="0.5"/>
|
||||
</Border.Effect>
|
||||
<TextBlock Text="⚠ 设备门已打开"
|
||||
FontSize="24"
|
||||
FontWeight="Bold"
|
||||
Foreground="White"
|
||||
HorizontalAlignment="Center"/>
|
||||
</Border>
|
||||
|
||||
<!-- 宠物大图 -->
|
||||
<Border Grid.Row="1"
|
||||
Background="#F5F5F5"
|
||||
CornerRadius="25"
|
||||
BorderBrush="#FFB74D"
|
||||
BorderThickness="4">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#FF6F00" BlurRadius="15" ShadowDepth="0" Opacity="0.4"/>
|
||||
</Border.Effect>
|
||||
<Image Source="/Images/dog.png"
|
||||
Stretch="Uniform"
|
||||
Margin="10"/>
|
||||
</Border>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- 右侧：操作提示区 -->
|
||||
<Border Grid.Column="2"
|
||||
Background="White"
|
||||
CornerRadius="30"
|
||||
Padding="30,25"
|
||||
Opacity="0.95">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="20" ShadowDepth="6" Opacity="0.4"/>
|
||||
</Border.Effect>
|
||||
<Grid>
|
||||
<ScrollViewer VerticalScrollBarVisibility="Auto"
|
||||
HorizontalScrollBarVisibility="Disabled"
|
||||
Padding="5,0">
|
||||
<StackPanel>
|
||||
<!-- 标题 -->
|
||||
<TextBlock Text="欢迎使用"
|
||||
FontSize="24"
|
||||
FontWeight="Bold"
|
||||
Foreground="#2E7D32"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,10,0,8"
|
||||
TextWrapping="Wrap">
|
||||
<TextBlock.Effect>
|
||||
<DropShadowEffect Color="#81C784" BlurRadius="8" ShadowDepth="0" Opacity="0.6"/>
|
||||
</TextBlock.Effect>
|
||||
</TextBlock>
|
||||
|
||||
<TextBlock Text="全自动洗宠机"
|
||||
FontSize="30"
|
||||
FontWeight="Bold"
|
||||
Foreground="#1B5E20"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,25"
|
||||
TextWrapping="Wrap">
|
||||
<TextBlock.Effect>
|
||||
<DropShadowEffect Color="#81C784" BlurRadius="10" ShadowDepth="0" Opacity="0.6"/>
|
||||
</TextBlock.Effect>
|
||||
</TextBlock>
|
||||
|
||||
<!-- 警告提示 -->
|
||||
<Border Background="#FFF3E0"
|
||||
CornerRadius="18"
|
||||
Padding="20,15"
|
||||
Margin="0,0,0,20">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#FF6F00" BlurRadius="10" ShadowDepth="0" Opacity="0.3"/>
|
||||
</Border.Effect>
|
||||
<StackPanel>
|
||||
<TextBlock Text="⚠ 设备门已打开"
|
||||
FontSize="20"
|
||||
FontWeight="Bold"
|
||||
HorizontalAlignment="Center"
|
||||
Foreground="#E65100"
|
||||
Margin="0,0,0,12"
|
||||
TextWrapping="Wrap"/>
|
||||
<TextBlock Text="请按照以下步骤操作："
|
||||
FontSize="15"
|
||||
Foreground="#5D4037"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,12"
|
||||
TextWrapping="Wrap"/>
|
||||
<Border Background="White"
|
||||
CornerRadius="10"
|
||||
Padding="12,8"
|
||||
Margin="0,0,0,6">
|
||||
<TextBlock FontSize="14" Foreground="#424242" TextWrapping="Wrap">
|
||||
<Run Text="1." FontWeight="Bold"/>
|
||||
<Run Text=" 轻柔地将宠物放入设备"/>
|
||||
</TextBlock>
|
||||
</Border>
|
||||
<Border Background="White"
|
||||
CornerRadius="10"
|
||||
Padding="12,8"
|
||||
Margin="0,0,0,6">
|
||||
<TextBlock FontSize="14" Foreground="#424242" TextWrapping="Wrap">
|
||||
<Run Text="2." FontWeight="Bold"/>
|
||||
<Run Text=" 确保宠物站稳舒适"/>
|
||||
</TextBlock>
|
||||
</Border>
|
||||
<Border Background="White"
|
||||
CornerRadius="10"
|
||||
Padding="12,8">
|
||||
<TextBlock FontSize="14" Foreground="#424242" TextWrapping="Wrap">
|
||||
<Run Text="3." FontWeight="Bold"/>
|
||||
<Run Text=" 点击下方按钮关门"/>
|
||||
</TextBlock>
|
||||
</Border>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- 关门按钮 -->
|
||||
<Button Content="关闭门并开始洗护"
|
||||
Height="70"
|
||||
FontSize="22"
|
||||
FontWeight="Bold"
|
||||
Background="#4CAF50"
|
||||
Foreground="White"
|
||||
BorderThickness="0"
|
||||
Cursor="Hand"
|
||||
Command="{Binding CloseDoorCommand}"
|
||||
Margin="0,0,0,15">
|
||||
<Button.Template>
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Border Background="{TemplateBinding Background}" CornerRadius="35">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#4CAF50" BlurRadius="15" ShadowDepth="0" Opacity="0.6"/>
|
||||
</Border.Effect>
|
||||
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="IsMouseOver" Value="True">
|
||||
<Setter Property="Background" Value="#66BB6A"/>
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
</Button.Template>
|
||||
</Button>
|
||||
|
||||
<!-- 提示文字 -->
|
||||
<TextBlock Text="请确保宠物安全后再关门"
|
||||
FontSize="13"
|
||||
Foreground="#9E9E9E"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,10"
|
||||
FontStyle="Italic"
|
||||
TextWrapping="Wrap"
|
||||
TextAlignment="Center"/>
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
</Border>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
@@ -975,7 +1186,7 @@
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#FF6F00" BlurRadius="10" ShadowDepth="0" Opacity="0.3"/>
|
||||
</Border.Effect>
|
||||
<Image Source="/Images/unnamed.jpg"
|
||||
<Image Source="/Images/dog.png"
|
||||
Stretch="UniformToFill"
|
||||
Margin="0"/>
|
||||
</Border>
|
||||
|
||||
Reference in New Issue
Block a user