Страница заказа
Вид страницы может меняться взависимости от дизайна, но основные блоки должены сохраняться
Вот несколько видов:
Вид страницы в примере верстки
<div class="el_order_xxxxxx"> <div class="innerWrapper"> <div class="orderInfoTable"> <div class="row tableRow"> <div class="col title">Статус:</div> <div class="col value"><span style="color: #4FAD25; font-weight: bold;">Новый заказ</span></div><!-- Значение style берется из информации о заказе --> </div> <div class="row tableRow"> <div class="col title">Код заказа:</div> <div class="col value">88556622</div> </div> <div class="row tableRow"> <div class="col title">Код заказа в системе службы доставки:</div> <div class="col value">4521-256487</div> </div> <div class="row tableRow"> <div class="col title">Дата заказа:</div> <div class="col value">22-12-1926:</div> </div> <div class="row tableRow"> <div class="col title">Время заказа:</div> <div class="col value">22:01:35</div> </div> <div class="row tableRow"> <div class="col title">Тип доставки:</div> <div class="col value">Новая почта</div> </div> <div class="row tableRow"> <div class="col title">Тип оплаты:</div> <div class="col value">На карту ПриватБанк</div> </div> <div class="row tableRow"> <div class="col title">Скидка:</div> <div class="col value">10%</div> </div> <div class="row tableRow"> <div class="col title">Стоимость товаров:</div> <div class="col value">3654.25 ₴</div> </div> <div class="row tableRow"> <div class="col title">Стоимость доставки:</div> <div class="col value">70 ₴</div> </div> <div class="row tableRow"> <div class="col title">Сумма заказа:</div> <div class="col value">4354.25 ₴</div> </div> <div class="row tableRow"> <div class="col title">Фамилия:</div> <div class="col value">Иванов</div> </div> <div class="row tableRow"> <div class="col title">Имя:</div> <div class="col value">Иван</div> </div> <div class="row tableRow"> <div class="col title">Отчество:</div> <div class="col value">Ивановыч</div> </div> <div class="row tableRow"> <div class="col title">Дополнительный получатель:</div> <div class="col value">Бегун Бег Бегович</div> </div> <div class="row tableRow"> <div class="col title">Почтовый индекс:</div> <div class="col value">65000</div> </div> <div class="row tableRow"> <div class="col title">Страна:</div> <div class="col value">Украина</div> </div> <div class="row tableRow"> <div class="col title">Область:</div> <div class="col value">Одесская</div> </div> <div class="row tableRow"> <div class="col title">Район:</div> <div class="col value">Одесский</div> </div> <div class="row tableRow"> <div class="col title">Населенный пункт:</div> <div class="col value">Одесса</div> </div> <div class="row tableRow"> <div class="col title">Улица:</div> <div class="col value">Уличная</div> </div> <div class="row tableRow"> <div class="col title">Дом:</div> <div class="col value">999</div> </div> <div class="row tableRow"> <div class="col title">Корпус</div> <div class="col value">666</div> </div> <div class="row tableRow"> <div class="col title">Квартира:</div> <div class="col value">333</div> </div> <div class="row tableRow"> <div class="col title">Адрес склада:</div> <div class="col value">Уличная 365</div> </div> <div class="row tableRow"> <div class="col title">Контактный телефон:</div> <div class="col value">+380960002255</div> </div> <div class="row tableRow"> <div class="col title">Email:</div> <div class="col value">[email protected]</div> </div> <div class="row tableRow"> <div class="col title">Примечание:</div> <div class="col value">Очень хочется</div> </div> </div> </div> <div class="orderOfferListBlock"> <div class="el_blockTitle_xxxxxx">Список товаров</div> <div class="innerWrapper"> <div class="orderOfferTable"> <div class="row tableHeader"> <div class="col title"><p>Товар</p></div> <div class="col qty"><p>Количество</p></div> <div class="col price"><p>Цена</p></div> <div class="col sum"><p>Стоимость</p></div> </div> <div class="orderOfferList row"> <div class="col tableRow"> <div class="row"> <div class="col infoCol"> <div class="imageBlock"> <div class="image-flex"> <a class="el" href="/offer/"><img src="offer.png" alt=""></a> </div> </div> <div class="titleBlock"> <p class="title"><a href="/offer/">Yfbvtyjdfybt товара</a></p> <p class="offerModTitle"><span >Черный, XXS, Дерево</span></p> </div> </div> <div class="col qty"><span class="colTitle">Количество:</span> <span class="colValue">2</span></div> <div class="col price"><span class="colTitle">Цена:</span> <span class="colValue">180.00 ₴</span></div> <div class="col sum"><span class="colTitle">Стоимость:</span> <span class="colValue">360.00 ₴</span></div> </div> </div> ... <div class="col tableRow">...</div> </div> </div> </div> </div> </div>
.el_order_xxxxxx { } .el_order_xxxxxx .innerWrapper { padding-left: 15px; padding-right: 15px; margin-bottom: 30px; } .el_order_xxxxxx .orderInfoTable { } .el_order_xxxxxx .orderInfoTable .tableRow { } .el_order_xxxxxx .orderInfoTable .tableRow:nth-child(even) { background-color: #fafafa; } .el_order_xxxxxx .orderInfoTable .tableRow .col { padding-top: 15px; padding-bottom: 15px; font-size: 1.4rem; } .el_order_xxxxxx .orderInfoTable .tableRow .col.title { font-weight: bold; } .el_order_xxxxxx .orderInfoTable .tableRow .col.value { text-align: center; } @media (max-width: 520px) { .el_order_xxxxxx .orderInfoTable .tableRow .col { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .el_order_xxxxxx .orderInfoTable .tableRow .col.value { text-align: right; } } /***/ .el_order_xxxxxx .orderOfferListBlock { } .el_order_xxxxxx .orderOfferListBlock .innerWrapper { padding-left: 15px; padding-right: 15px; } .el_order_xxxxxx .orderOfferListBlock .tableHeader { background-color: #E1EEF4; } .el_order_xxxxxx .orderOfferListBlock .tableHeader .col { padding-top: 15px; padding-bottom: 15px; } .el_order_xxxxxx .orderOfferListBlock .tableHeader .col p { font-size: 1.4rem; text-transform: uppercase; font-weight: bold; text-align: center; } .el_order_xxxxxx .orderOfferListBlock .tableHeader .title p { text-align: left; } /***/ .el_order_xxxxxx .orderOfferListBlock .col.qty { -ms-flex: 0 0 130px; flex: 0 0 130px; max-width: 130px; } .el_order_xxxxxx .orderOfferListBlock .col.price { -ms-flex: 0 0 200px; flex: 0 0 200px; max-width: 200px; } .el_order_xxxxxx .orderOfferListBlock .col.sum { -ms-flex: 0 0 200px; flex: 0 0 200px; max-width: 200px; } /***/ .el_order_xxxxxx .orderOfferListBlock .tableRow { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .el_order_xxxxxx .orderOfferListBlock .tableRow:nth-child(even) { background-color: #fafafa; } .el_order_xxxxxx .orderOfferListBlock .tableRow .col { padding-top: 15px; padding-bottom: 15px; font-size: 1.4rem; text-align: center; } .el_order_xxxxxx .orderOfferListBlock .tableRow .col .colTitle { display: none; } .el_order_xxxxxx .orderOfferListBlock .tableRow .infoCol { display: -ms-flex; display: flex; } .el_order_xxxxxx .orderOfferListBlock .tableRow .infoCol .imageBlock { -ms-flex: 0 0 115px; flex: 0 0 115px; max-width: 115px; padding-right: 15px; } .el_order_xxxxxx .orderOfferListBlock .tableRow .infoCol .titleBlock { text-align: left; } .el_order_xxxxxx .orderOfferListBlock .tableRow .infoCol .titleBlock .title { margin-bottom: 10px; } .el_order_xxxxxx .orderOfferListBlock .tableRow .infoCol .titleBlock .title a { color: #4fad25; } .el_order_xxxxxx .orderOfferListBlock .tableRow .infoCol .titleBlock .title a:hover { text-decoration: underline; color: #5bcc28; } @media (max-width: 860px) { .el_order_xxxxxx .orderOfferListBlock .col.qty { -ms-flex: 0 0 130px; flex: 0 0 130px; max-width: 130px; } .el_order_xxxxxx .orderOfferListBlock .col.price { -ms-flex: 0 0 150px; flex: 0 0 150px; max-width: 150px; } .el_order_xxxxxx .orderOfferListBlock .col.sum { -ms-flex: 0 0 150px; flex: 0 0 150px; max-width: 150px; } } @media (max-width: 767px) { .el_order_xxxxxx .orderOfferListBlock .col.qty { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .el_order_xxxxxx .orderOfferListBlock .col.price { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .el_order_xxxxxx .orderOfferListBlock .col.sum { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .el_order_xxxxxx .orderOfferListBlock .tableHeader { display: none; } .el_order_xxxxxx .orderOfferListBlock .tableRow { -ms-flex: 0 0 calc(100%/3); flex: 0 0 calc(100%/3); max-width: calc(100%/3); margin-bottom: 30px; } .el_order_xxxxxx .orderOfferListBlock .tableRow .row { margin-left: 0px; margin-right: 0px; border: 1px solid #2091C9; border-radius: 3px; height: 100%; } .el_order_xxxxxx .orderOfferListBlock .tableRow .infoCol { display: block; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .el_order_xxxxxx .orderOfferListBlock .tableRow .infoCol .imageBlock { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 15px; padding-right: 0px; } .el_order_xxxxxx .orderOfferListBlock .tableRow .infoCol .titleBlock { text-align: center; } .el_order_xxxxxx .orderOfferListBlock .tableRow:nth-child(even) { background-color: transparent; } .el_order_xxxxxx .orderOfferListBlock .tableRow .col { text-align: center; } .el_order_xxxxxx .orderOfferListBlock .tableRow .col .colTitle { display: inline-block; } .el_order_xxxxxx .orderOfferListBlock .tableRow .col .colValue { font-weight: bold; } } @media (max-width: 680px) { .el_order_xxxxxx .orderOfferListBlock .tableRow { -ms-flex: 0 0 calc(100%/2); flex: 0 0 calc(100%/2); max-width: calc(100%/2); } } @media (max-width: 480px) { .el_order_xxxxxx .orderOfferListBlock .tableRow { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } }