更新
This commit is contained in:
GukSang.Jin
@@ -7,7 +7,10 @@
|
||||
xmlns:converters="clr-namespace:PetWashControl.Converters"
|
||||
mc:Ignorable="d"
|
||||
Title="全自动洗宠机"
|
||||
Height="800" Width="1280"
|
||||
Height="1024" Width="1028"
|
||||
FontFamily="Microsoft YaHei UI"
|
||||
UseLayoutRounding="True"
|
||||
SnapsToDevicePixels="True"
|
||||
WindowStyle="None"
|
||||
ResizeMode="NoResize"
|
||||
WindowStartupLocation="CenterScreen">
|
||||
@@ -20,16 +23,20 @@
|
||||
|
||||
<!-- 渐变背景 -->
|
||||
<LinearGradientBrush x:Key="MainBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
|
||||
<GradientStop Color="#A8E6CF" Offset="0"/>
|
||||
<GradientStop Color="#DCEDC8" Offset="0.5"/>
|
||||
<GradientStop Color="#B2DFDB" Offset="1"/>
|
||||
<GradientStop Color="#F4F0DE" Offset="0"/>
|
||||
<GradientStop Color="#D9EAD8" Offset="0.55"/>
|
||||
<GradientStop Color="#C7E3D9" Offset="1"/>
|
||||
</LinearGradientBrush>
|
||||
<LinearGradientBrush x:Key="ShellSurfaceBrush" StartPoint="0,0" EndPoint="0,1">
|
||||
<GradientStop Color="#FFFDF8" Offset="0"/>
|
||||
<GradientStop Color="#F7FBF6" Offset="1"/>
|
||||
</LinearGradientBrush>
|
||||
|
||||
<!-- 圆角按钮样式 -->
|
||||
<Style x:Key="RoundButton" TargetType="Button">
|
||||
<Setter Property="Background" Value="#FFD54F"/>
|
||||
<Setter Property="Foreground" Value="#5D4037"/>
|
||||
<Setter Property="FontSize" Value="18"/>
|
||||
<Setter Property="Background" Value="#F2B544"/>
|
||||
<Setter Property="Foreground" Value="#3E2F1C"/>
|
||||
<Setter Property="FontSize" Value="20"/>
|
||||
<Setter Property="FontWeight" Value="Bold"/>
|
||||
<Setter Property="BorderThickness" Value="0"/>
|
||||
<Setter Property="Cursor" Value="Hand"/>
|
||||
@@ -38,19 +45,21 @@
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Border x:Name="border"
|
||||
Background="{TemplateBinding Background}"
|
||||
CornerRadius="25"
|
||||
Padding="{TemplateBinding Padding}">
|
||||
CornerRadius="28"
|
||||
Padding="{TemplateBinding Padding}"
|
||||
BorderBrush="#FFF5D07C"
|
||||
BorderThickness="1.5">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="8" ShadowDepth="3" Opacity="0.3"/>
|
||||
<DropShadowEffect Color="#B66E12" BlurRadius="16" ShadowDepth="4" Opacity="0.28"/>
|
||||
</Border.Effect>
|
||||
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="IsMouseOver" Value="True">
|
||||
<Setter TargetName="border" Property="Background" Value="#FFCA28"/>
|
||||
<Setter TargetName="border" Property="Background" Value="#F0A92B"/>
|
||||
</Trigger>
|
||||
<Trigger Property="IsPressed" Value="True">
|
||||
<Setter TargetName="border" Property="Background" Value="#FFC107"/>
|
||||
<Setter TargetName="border" Property="Background" Value="#D89117"/>
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
@@ -61,13 +70,15 @@
|
||||
<!-- 套餐卡片样式 -->
|
||||
<Style x:Key="PackageCard" TargetType="Border">
|
||||
<Setter Property="Background" Value="#D84315"/>
|
||||
<Setter Property="CornerRadius" Value="15"/>
|
||||
<Setter Property="Padding" Value="20,15"/>
|
||||
<Setter Property="Margin" Value="10"/>
|
||||
<Setter Property="CornerRadius" Value="24"/>
|
||||
<Setter Property="Padding" Value="22,20"/>
|
||||
<Setter Property="Margin" Value="12,8"/>
|
||||
<Setter Property="Cursor" Value="Hand"/>
|
||||
<Setter Property="BorderBrush" Value="#22FFFFFF"/>
|
||||
<Setter Property="BorderThickness" Value="1.5"/>
|
||||
<Setter Property="Effect">
|
||||
<Setter.Value>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="10" ShadowDepth="4" Opacity="0.4"/>
|
||||
<DropShadowEffect Color="#6D2D15" BlurRadius="18" ShadowDepth="6" Opacity="0.28"/>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Style>
|
||||
@@ -79,21 +90,38 @@
|
||||
|
||||
<Grid>
|
||||
<!-- 装饰性圆圈 -->
|
||||
<Canvas>
|
||||
<Ellipse Width="120" Height="120" Fill="#FFD54F" Opacity="0.6" Canvas.Left="50" Canvas.Top="50">
|
||||
<Canvas IsHitTestVisible="False">
|
||||
<Ellipse Width="220" Height="220" Fill="#F0C35A" Opacity="0.28" Canvas.Left="-40" Canvas.Top="-10">
|
||||
<Ellipse.Effect>
|
||||
<BlurEffect Radius="20"/>
|
||||
<BlurEffect Radius="48"/>
|
||||
</Ellipse.Effect>
|
||||
</Ellipse>
|
||||
<Ellipse Width="150" Height="150" Fill="#81C784" Opacity="0.5" Canvas.Right="80" Canvas.Top="80">
|
||||
<Ellipse Width="280" Height="280" Fill="#A9D4C6" Opacity="0.22" Canvas.Right="-70" Canvas.Top="24">
|
||||
<Ellipse.Effect>
|
||||
<BlurEffect Radius="25"/>
|
||||
<BlurEffect Radius="60"/>
|
||||
</Ellipse.Effect>
|
||||
</Ellipse>
|
||||
<Ellipse Width="180" Height="180" Fill="#FFFFFF" Opacity="0.20" Canvas.Left="110" Canvas.Bottom="70">
|
||||
<Ellipse.Effect>
|
||||
<BlurEffect Radius="44"/>
|
||||
</Ellipse.Effect>
|
||||
</Ellipse>
|
||||
</Canvas>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<Grid x:Name="MainContent">
|
||||
<Border Margin="22"
|
||||
CornerRadius="38"
|
||||
Background="#A8FFFFFF"
|
||||
BorderBrush="#66FFFFFF"
|
||||
BorderThickness="1.5">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#587A67" BlurRadius="36" ShadowDepth="10" Opacity="0.22"/>
|
||||
</Border.Effect>
|
||||
|
||||
<Border Margin="8"
|
||||
CornerRadius="32"
|
||||
Background="{StaticResource ShellSurfaceBrush}">
|
||||
<!-- 主内容区域 -->
|
||||
<Grid x:Name="MainContent" ClipToBounds="True">
|
||||
<!-- 待机界面 -->
|
||||
<Grid x:Name="IdleView" Visibility="Visible">
|
||||
<Grid.RowDefinitions>
|
||||
@@ -172,7 +200,7 @@
|
||||
</Border>
|
||||
|
||||
<!-- 中间欢迎区域 -->
|
||||
<Grid Grid.Row="1" Margin="40,20,40,20">
|
||||
<Grid Grid.Row="1" Margin="32,18,32,18">
|
||||
<!-- 待机状态：左右布局 -->
|
||||
<Grid Visibility="{Binding IsDoorOpen, Converter={StaticResource InverseBoolToVisibilityConverter}}">
|
||||
<Grid.ColumnDefinitions>
|
||||
@@ -316,7 +344,7 @@
|
||||
TextAlignment="Center"/>
|
||||
|
||||
<!-- 开始按钮 -->
|
||||
<Button Content="点击开始"
|
||||
<Button Content="开始洗护"
|
||||
Height="70"
|
||||
FontSize="28"
|
||||
FontWeight="Bold"
|
||||
@@ -329,7 +357,7 @@
|
||||
</Button>
|
||||
|
||||
<!-- 提示文字 -->
|
||||
<TextBlock Text="点击按钮开始您的洗护之旅"
|
||||
<TextBlock Text="轻触按钮，进入套餐选择与扫码支付"
|
||||
FontSize="13"
|
||||
Foreground="#9E9E9E"
|
||||
HorizontalAlignment="Center"
|
||||
@@ -651,18 +679,25 @@
|
||||
|
||||
<!-- 套餐标题 -->
|
||||
<Border Grid.Row="1"
|
||||
Background="#FFD54F"
|
||||
CornerRadius="20"
|
||||
Padding="25,15"
|
||||
Background="#F6D97B"
|
||||
CornerRadius="22"
|
||||
Padding="25,14"
|
||||
Margin="40,10,40,20">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="10" ShadowDepth="4" Opacity="0.3"/>
|
||||
<DropShadowEffect Color="#C29B2D" BlurRadius="16" ShadowDepth="4" Opacity="0.24"/>
|
||||
</Border.Effect>
|
||||
<TextBlock Text="请选择套餐"
|
||||
FontSize="32"
|
||||
FontWeight="Bold"
|
||||
Foreground="#5D4037"
|
||||
HorizontalAlignment="Center"/>
|
||||
<StackPanel>
|
||||
<TextBlock Text="请选择洗护套餐"
|
||||
FontSize="30"
|
||||
FontWeight="Bold"
|
||||
Foreground="#5D4037"
|
||||
HorizontalAlignment="Center"/>
|
||||
<TextBlock Text="点击任意套餐卡片，进入专属支付二维码"
|
||||
FontSize="14"
|
||||
Foreground="#7A5B2A"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,4,0,0"/>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- 套餐列表 -->
|
||||
@@ -813,38 +848,38 @@
|
||||
<ScrollViewer VerticalScrollBarVisibility="Auto">
|
||||
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
|
||||
<!-- 支付信息卡片 -->
|
||||
<Border Background="White"
|
||||
CornerRadius="20"
|
||||
Padding="35,30"
|
||||
MaxWidth="550">
|
||||
<Border Background="#FFFDF8"
|
||||
CornerRadius="24"
|
||||
Padding="30,28"
|
||||
MaxWidth="680">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="15" ShadowDepth="4" Opacity="0.3"/>
|
||||
<DropShadowEffect Color="#7A8A7D" BlurRadius="22" ShadowDepth="6" Opacity="0.22"/>
|
||||
</Border.Effect>
|
||||
<StackPanel>
|
||||
<!-- 套餐信息 -->
|
||||
<TextBlock Text="{Binding SelectedPackage.Name}"
|
||||
FontSize="26"
|
||||
FontSize="28"
|
||||
FontWeight="Bold"
|
||||
Foreground="#2E7D32"
|
||||
Foreground="#225C39"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,12"/>
|
||||
Margin="0,0,0,10"/>
|
||||
|
||||
<TextBlock Text="{Binding SelectedPackage.DisplaySummary, Mode=OneWay}"
|
||||
FontSize="15"
|
||||
Foreground="#5D4037"
|
||||
HorizontalAlignment="Center"
|
||||
TextAlignment="Center"
|
||||
Margin="0,0,0,16"/>
|
||||
Margin="0,0,0,18"/>
|
||||
|
||||
<!-- 支付金额 -->
|
||||
<Border Background="#FFE0B2"
|
||||
CornerRadius="15"
|
||||
Padding="25,15"
|
||||
Margin="0,0,0,20">
|
||||
<Border Background="#F9E6BF"
|
||||
CornerRadius="18"
|
||||
Padding="24,16"
|
||||
Margin="0,0,0,22">
|
||||
<StackPanel>
|
||||
<TextBlock Text="支付金额"
|
||||
FontSize="16"
|
||||
Foreground="#5D4037"
|
||||
Foreground="#7B5A1D"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,8"/>
|
||||
<TextBlock HorizontalAlignment="Center">
|
||||
@@ -853,7 +888,7 @@
|
||||
FontSize="28"
|
||||
FontWeight="Bold"/>
|
||||
<Run Text="{Binding SelectedPackage.DisplayPrice, Mode=OneWay}"
|
||||
Foreground="#FF6F00"
|
||||
Foreground="#D36A00"
|
||||
FontSize="44"
|
||||
FontWeight="Bold"/>
|
||||
</TextBlock>
|
||||
@@ -861,43 +896,60 @@
|
||||
</Border>
|
||||
|
||||
<!-- 二维码 -->
|
||||
<Border Background="#F5F5F5"
|
||||
Width="260"
|
||||
Height="260"
|
||||
CornerRadius="15"
|
||||
<Border Background="White"
|
||||
Width="296"
|
||||
Height="296"
|
||||
CornerRadius="18"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,18"
|
||||
BorderBrush="#E0E0E0"
|
||||
BorderBrush="#E1E8E1"
|
||||
BorderThickness="2">
|
||||
<Image Source="{Binding PaymentQrCodeImage}"
|
||||
Stretch="Uniform"
|
||||
Margin="10"/>
|
||||
Margin="12"/>
|
||||
</Border>
|
||||
|
||||
<Border Background="#F5F5F5"
|
||||
CornerRadius="12"
|
||||
Padding="18,12"
|
||||
<Border Background="#F7FAF5"
|
||||
CornerRadius="14"
|
||||
Padding="18,14"
|
||||
Margin="0,0,0,18">
|
||||
<StackPanel>
|
||||
<TextBlock Text="{Binding PaymentStatusText}"
|
||||
FontSize="16"
|
||||
FontSize="17"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="#2E7D32"
|
||||
Foreground="#225C39"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,6"/>
|
||||
<TextBlock Text="{Binding PaymentCountdownText, StringFormat=二维码有效期剩余 {0}}"
|
||||
FontSize="14"
|
||||
Foreground="#757575"
|
||||
Foreground="#7A817B"
|
||||
HorizontalAlignment="Center"/>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- 支付提示 -->
|
||||
<TextBlock Text="请使用微信扫码完成支付"
|
||||
FontSize="15"
|
||||
Foreground="#757575"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,20"/>
|
||||
<Border Background="#EEF6EF"
|
||||
CornerRadius="18"
|
||||
Padding="18,16"
|
||||
Margin="0,0,0,20">
|
||||
<StackPanel>
|
||||
<TextBlock Text="支付提示"
|
||||
FontSize="16"
|
||||
FontWeight="Bold"
|
||||
Foreground="#205C39"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,10"/>
|
||||
<TextBlock Text="请使用微信扫码完成支付"
|
||||
FontSize="14"
|
||||
Foreground="#46614F"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,6"/>
|
||||
<TextBlock Text="支付成功后设备门将自动打开"
|
||||
FontSize="14"
|
||||
Foreground="#46614F"
|
||||
HorizontalAlignment="Center"/>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<Grid>
|
||||
@@ -911,8 +963,8 @@
|
||||
|
||||
<Button Grid.Column="0"
|
||||
Content="模拟支付成功"
|
||||
Height="50"
|
||||
FontSize="16"
|
||||
Height="54"
|
||||
FontSize="17"
|
||||
FontWeight="Bold"
|
||||
Background="#4CAF50"
|
||||
Foreground="White"
|
||||
@@ -921,9 +973,9 @@
|
||||
Command="{Binding SimulatePaymentCommand}">
|
||||
<Button.Template>
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Border Background="{TemplateBinding Background}" CornerRadius="12">
|
||||
<Border Background="{TemplateBinding Background}" CornerRadius="14">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="6" ShadowDepth="2" Opacity="0.3"/>
|
||||
<DropShadowEffect Color="#2E7D32" BlurRadius="10" ShadowDepth="2" Opacity="0.26"/>
|
||||
</Border.Effect>
|
||||
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
@@ -933,8 +985,8 @@
|
||||
|
||||
<Button Grid.Column="2"
|
||||
Content="刷新二维码"
|
||||
Height="50"
|
||||
FontSize="16"
|
||||
Height="54"
|
||||
FontSize="17"
|
||||
FontWeight="Bold"
|
||||
Background="#1976D2"
|
||||
Foreground="White"
|
||||
@@ -943,9 +995,9 @@
|
||||
Command="{Binding RegeneratePaymentQrCommand}">
|
||||
<Button.Template>
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Border Background="{TemplateBinding Background}" CornerRadius="12">
|
||||
<Border Background="{TemplateBinding Background}" CornerRadius="14">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="6" ShadowDepth="2" Opacity="0.3"/>
|
||||
<DropShadowEffect Color="#0D47A1" BlurRadius="10" ShadowDepth="2" Opacity="0.22"/>
|
||||
</Border.Effect>
|
||||
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
@@ -955,8 +1007,8 @@
|
||||
|
||||
<Button Grid.Column="4"
|
||||
Content="取消支付"
|
||||
Height="50"
|
||||
FontSize="16"
|
||||
Height="54"
|
||||
FontSize="17"
|
||||
FontWeight="Bold"
|
||||
Background="#9E9E9E"
|
||||
Foreground="White"
|
||||
@@ -965,9 +1017,9 @@
|
||||
Command="{Binding CancelPaymentCommand}">
|
||||
<Button.Template>
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Border Background="{TemplateBinding Background}" CornerRadius="12">
|
||||
<Border Background="{TemplateBinding Background}" CornerRadius="14">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#000000" BlurRadius="6" ShadowDepth="2" Opacity="0.3"/>
|
||||
<DropShadowEffect Color="#6D6D6D" BlurRadius="10" ShadowDepth="2" Opacity="0.2"/>
|
||||
</Border.Effect>
|
||||
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
@@ -1381,7 +1433,7 @@
|
||||
<TextBlock Text="{Binding RemainingTime}"
|
||||
FontSize="56"
|
||||
FontWeight="Bold"
|
||||
Foreground="#FF6F00"
|
||||
Foreground="#D36A00"
|
||||
FontFamily="Consolas"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,20">
|
||||
@@ -2109,7 +2161,9 @@
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Border>
|
||||
</Border>
|
||||
|
||||
<!-- 使用说明弹窗 -->
|
||||
<Border Width="120"
|
||||
|
||||
Reference in New Issue
Block a user