145 lines
4.4 KiB
Rust
145 lines
4.4 KiB
Rust
use makepad_widgets::*;
|
|
|
|
live_design! {
|
|
import makepad_draw::shader::std::*;
|
|
import makepad_widgets::base::*;
|
|
import makepad_widgets::theme_desktop_dark::*;
|
|
|
|
import crate::shared::styles::*;
|
|
import crate::shared::clickable_view::ClickableView
|
|
|
|
CatalogItem = <ClickableView> {
|
|
width: Fill
|
|
height: Fit
|
|
|
|
show_bg: false
|
|
|
|
container = <RoundedView> {
|
|
width: Fill
|
|
height: Fit
|
|
flow: Down
|
|
align: {x: 0.5, y: 0.0}
|
|
spacing: 2.0
|
|
|
|
draw_bg: {
|
|
color: #fff,
|
|
radius: 8.
|
|
}
|
|
|
|
image = <Image> {
|
|
width: Fill, height: 166
|
|
source: (CATALOG_FLIP_FLOPS_IMG)
|
|
|
|
// Override to have the upper corners rounded
|
|
draw_bg: {
|
|
instance radius: 8.
|
|
fn pixel(self) -> vec4 {
|
|
let sdf = Sdf2d::viewport(self.pos * self.rect_size);
|
|
sdf.box(
|
|
1,
|
|
1,
|
|
self.rect_size.x - 2.0,
|
|
// This calculation is to make sure the bottom part is not rounded
|
|
self.rect_size.y + self.radius * 2.0,
|
|
max(1.0, self.radius)
|
|
)
|
|
sdf.fill_keep(self.get_color())
|
|
sdf.stroke(#fff, 1);
|
|
return sdf.result
|
|
}
|
|
}
|
|
}
|
|
info = <View> {
|
|
width: Fill
|
|
height: Fit
|
|
flow: Down
|
|
padding: 5.
|
|
spacing: 3.
|
|
|
|
title = <Label> {
|
|
width: Fill
|
|
height: Fit
|
|
|
|
text: "男士人字拖 2023"
|
|
draw_text: {
|
|
color: #000
|
|
text_style: <REGULAR_TEXT> {font_size: 12.0},
|
|
}
|
|
}
|
|
|
|
subtitle = <Label> {
|
|
width: Fill
|
|
height: Fit
|
|
|
|
text: "500+人付费"
|
|
draw_text: {
|
|
color: #888
|
|
text_style: <REGULAR_TEXT> {font_size: 8.0},
|
|
}
|
|
}
|
|
|
|
<View> {
|
|
width: 160
|
|
height: 40
|
|
flow: Overlay
|
|
|
|
<Image> {
|
|
width: Fill
|
|
height: Fill
|
|
source: (BUY_IT_BANNER_IMG)
|
|
}
|
|
|
|
<View> {
|
|
width: Fill
|
|
height: Fill
|
|
padding: 5.
|
|
flow: Down
|
|
spacing: 2.
|
|
|
|
<View> {
|
|
width: Fit
|
|
height: Fit
|
|
flow: Right
|
|
spacing: 1.
|
|
align: {x: 0.0, y: 1.0}
|
|
|
|
<Label> {
|
|
width: Fit
|
|
height: Fit
|
|
margin: {bottom: 2.}
|
|
|
|
text: "¥"
|
|
draw_text: {
|
|
color: #fff
|
|
text_style: <REGULAR_TEXT> {font_size: 10.0},
|
|
}
|
|
}
|
|
<Label> {
|
|
width: Fit
|
|
height: Fit
|
|
|
|
text: "58"
|
|
draw_text: {
|
|
color: #fff
|
|
text_style: <REGULAR_TEXT> {font_size: 14.0},
|
|
}
|
|
}
|
|
}
|
|
<Label> {
|
|
width: Fit
|
|
height: Fit
|
|
|
|
text: "USD 8.11"
|
|
draw_text: {
|
|
color: #fff
|
|
text_style: <REGULAR_TEXT> {font_size: 8.0},
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|