diff --git a/static/v2/css/widgets/w_route_card.css b/static/v2/css/widgets/w_route_card.css index 95b734c..7f6ad39 100644 --- a/static/v2/css/widgets/w_route_card.css +++ b/static/v2/css/widgets/w_route_card.css @@ -2,7 +2,11 @@ padding: 20px; --route-card-bg: #FFFFFF; --route-card-box_shadow: 0 -1px 10px rgba(198, 199, 203, 0.2), -1px 4px 10px rgba(198, 199, 203, 0.2); - --route-text-color: #000000; + --route-text-color: #272424; + + --big-font-size: 16px; + --medium-font-size: 14px; + --small-font-size: 12px; --route-text-container-bg: #F1F1F1; --route-text-container-padding: 15px; @@ -11,15 +15,16 @@ --route-text-img-filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(256%) hue-rotate(113deg) brightness(115%) contrast(89%); --route-card-owner-avatar-size: 52px; - --route-owner-name-font-size: 16px; - --route-owner-type-font-size: 14px; --route-owner-type-color: #065BFF; - --route-cargo-type-color: #000000; + --route-cargo-type-color: #272424; + + --route_card_route_data-margin-top: 30px; background: var(--route-card-bg); box-shadow: var(--route-card-box_shadow); + border-radius: 10px; color: var(--route-text-color); .route_card_info_data{ position: relative; @@ -60,7 +65,7 @@ gap: 10px; .card_owner_name{ font-weight: 600; - font-size: var(--route-owner-name-font-size); + font-size: var(--big-font-size); } .card_splitter{ height: 22px; @@ -68,7 +73,7 @@ background: #E6E6E6; } .card_owner_type{ - font-size: var(--route-owner-type-font-size); + font-size: var(--medium-font-size); color: var(--route-owner-type-color); font-weight: 600; } @@ -76,7 +81,7 @@ display: flex; align-items: center; gap: 5px; - font-size: var(--route-owner-type-font-size); + font-size: var(--medium-font-size); color: var(--route-cargo-type-color); font-weight: 600; @@ -85,4 +90,94 @@ } } } + .route_card_route_data{ + margin-top: var(--route_card_route_data-margin-top); + display: flex; + justify-content: space-between; + gap: 60px; + + .from_to_place_data{ + .label{ + color: #27242499; + font-size: var(--big-font-size); + font-weight: 600; + margin-bottom: 10px; + &.departure_from{ + text-align: left; + } &.arrival_to{ + text-align: right; + } + } + .place{ + display: flex; + align-items: center; + gap: 10px; + .country{ + display: flex; + align-items: center; + gap: 5px; + + img{ + width: 24px; + height: 12px; + display: block; + object-fit: contain; + } + .country_code{ + color: #27242499; + font-size: var(--medium-font-size); + } + } + .place_title{ + font-size: var(--big-font-size); + font-weight: 800; + color: #272424; + } + } + } + .route_way_data{ + flex-grow: 1; + .route_transport{ + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + margin-bottom: 10px; + .route_transport_name{ + font-size: var(--medium-font-size); + font-weight: 600; + } + img{ + height: 12px; + display: block; + } + } + .way_progress_line_container{ + position: relative; + width: 100%; + .way_progress_round{ + height: 20px; + width: 20px; + background: #FFFFFF; + border-radius: 100%; + position: absolute; + top: -10px; + &:first-of-type{ + border: 3px solid #065BFF; + left: 0; + } + &:last-of-type{ + border: 3px solid #45C226; + right: 0; + } + } + .way_progress_line{ + width: calc(100% - 10px); + margin-left: 10px; + height: 4px; + background: linear-gradient(90deg, rgba(6,91,255,1) 0%, rgba(69,194,38,1) 100%); + } + } + } + } } \ No newline at end of file diff --git a/static/v2/icons/widgets/w_route_card/car.svg b/static/v2/icons/widgets/w_route_card/car.svg new file mode 100644 index 0000000..8ad27c9 --- /dev/null +++ b/static/v2/icons/widgets/w_route_card/car.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/v2/icons/widgets/w_route_card/plane.svg b/static/v2/icons/widgets/w_route_card/plane.svg new file mode 100644 index 0000000..4705f07 --- /dev/null +++ b/static/v2/icons/widgets/w_route_card/plane.svg @@ -0,0 +1,3 @@ + + + diff --git a/templates/v2/widgets/w_customer_route_card.html b/templates/v2/widgets/w_customer_route_card.html index 6d2d9f2..6f3cbc2 100644 --- a/templates/v2/widgets/w_customer_route_card.html +++ b/templates/v2/widgets/w_customer_route_card.html @@ -21,8 +21,40 @@
-
- +
+
{% trans "Забрать из:" %}
+
+
+ +
BY
+
+
+ Минск/Беларусь +
+
+
+
+
+
Авиаперевозка
+ +
+
+
+
+
+
+
+
+
{% trans "Доставить в:" %}
+
+
+ +
BY
+
+
+ Минск/Беларусь +
+
\ No newline at end of file