瀏覽代碼

adaptation improvements + vh

Vore4ka 2 年之前
父節點
當前提交
e0ba533798
共有 9 個文件被更改,包括 283 次插入604 次删除
  1. 138 525
      css/adaptation.css
  2. 14 14
      css/style.css
  3. 6 7
      documents_page.html
  4. 37 0
      js/document.js
  5. 13 10
      js/document.min.js
  6. 9 16
      js/form.min.js
  7. 6 4
      js/script.js
  8. 47 12
      list_of_orders.html
  9. 13 16
      list_of_orders_2.html

+ 138 - 525
css/adaptation.css

@@ -1,77 +1,3 @@
-/* общие стили */
-@font-face {
-	font-family: 'Open Sans'; 
-    font-style: normal;
-	font-weight: 400;
-	src: url('../fonts/OpenSans-Regular.ttf'); 
-}
-
-@font-face {
-	font-family: 'Open Sans'; 
-    font-style: normal;
-	font-weight: 500;
-	src: url('../fonts/OpenSans-Medium.ttf'); 
-}
-
-@font-face {
-	font-family: 'Open Sans'; 
-    font-style: normal;
-	font-weight: 600;
-	src: url('../fonts/OpenSans-SemiBold.ttf'); 
-}
-
-@font-face {
-	font-family: 'Open Sans'; 
-    font-style: normal;
-	font-weight: 700;
-	src: url('../fonts/OpenSans-Bold.ttf'); 
-}
-
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Open Sans', sans-serif;
-}
-
-.container {
-    margin-left: auto;
-    margin-right: auto;
-    width: 1440px;
-}
-
-.open-logo {
-    width: 150px;
-}
-
-
-
-
-
-/* шапка */
-
-
-header ul {
-    /* margin-right: 50px; */
-    list-style: none;
-    display: flex;
-    justify-content: space-between;
-}
-
-header ul li {
-    margin-left: 27px;
-}
-
-header a {
-    text-decoration: none;
-    font-size: 14px;
-    font-weight: 400;
-    color: #000;
-}
-
-header ul li:first-child {
-    margin-left: 0;
-}
 
 header ul .link_active {
     padding-top: 2px;
@@ -92,450 +18,9 @@ header ul .link_active a{
 
 
 
-/* фильтры заказов */
-
-
-.filters-container {
-    width: 1146px;
-    margin-right: auto;
-    margin-left: auto;
-    margin-top: 95px;
-    
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-
-.filter p {
-    font-size: 14px;
-}
-
-.filter input,
-.filter select {
-    width: 247px;
-    height: 36px;
-    margin-top: 6px;
-    padding-left: 10px;
-    border: 1px solid #C4C4C4;
-    border-radius: 3px;
-    font-weight: 400;
-    font-size: 14px;
-}
-
-.filter select {
-    padding-left: 5px;
-}
-
-.filter #dateFrom,
-.filter #dateTo {
-    width: 103px;
-}
-
-.filter input::placeholder {
-    color: #C4C4C4;
-}
-
-select option{
-    padding: 10px 10px; 
-    color:#0066FF;
-    display: block; 
-}
-
-
-
-/* таблица с заказами */
-
-.orders_table {
-    width: 1360px;
-    margin-top: 40px;
-    margin-left: auto;
-    margin-right: auto;
-}
-.orders_table-container {
-    min-height: 69vh;
-}
-
-.orders_table ul {
-    width: 100%;
-    
-    list-style: none;
-    display: flex;
-    justify-content: space-between;
-    
-}
-
-.orders_table .heading {
-    border-bottom: 1px solid #E5E5E5;
-}
-
-.orders_table .heading li  {
-    font-weight: 700;
-    font-size: 14px;
-    padding-bottom: 16px;
-    
-}
-
-.orders_table .order {
-    padding-top: 15px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid #E5E5E5;
-    
-    padding: 15px 10px;
-}
-
-.orders_table .order li {
-    font-weight: 400;
-    font-size: 14px;
-    
-}
-
-.orders_table .order:hover {
-    border: 1px solid #000;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.orders_table .heading_num,
-.orders_table .order_num {
-    width: 65px;
-}
-
-.orders_table .heading_status,
-.orders_table .order_status {
-    width: 100px;
-}
-
-.orders_table .order .order_status  {
-    font-weight: 600;
-    font-size: 14px;
-    color: #27AE60;
-}
-
-.orders_table .order_status .green_circle {
-    display: inline-block;
-    margin-right: 5px;
-    height: 8px;
-    width: 8px;
-    border-radius: 5px;
-    background: #27AE60;
-}
-
-.orders_table .heading_date,
-.orders_table .order_date {
-    width: 120px;
-    text-align: center;
-}
-
-.orders_table .order_date p {
-    margin-bottom: 5px;
-    margin-top: 5px;
-}
-
-.orders_table .heading_duration,
-.orders_table .order_duration {
-    width: 120px;
-}
-
-.orders_table .heading_tariff,
-.orders_table .order_tariff {
-    width: 95px;
-}
-
-.orders_table .order .order_tariff {
-    font-weight: 600;
-    font-size: 14px;
-    color: #A0A0A0;
-}
-
-.orders_table .order_tariff .gray_circle {
-    display: inline-block;
-    margin-right: 5px;
-    height: 8px;
-    width: 8px;
-    border-radius: 5px;
-    background: #A0A0A0;
-}
-
-.orders_table .heading_cust,
-.orders_table .order_cust {
-    width: 130px;
-}
-
-.orders_table .heading_exec,
-.orders_table .order_exec {
-    width: 110px;
-}
-
-.orders_table .heading_car,
-.orders_table .order_car {
-    width: 95px;
-}
-
-.orders_table .heading_total,
-.orders_table .order_total {
-    width: 80px;
-    text-align: end;
-}
-
-.orders_table .footing {
-    display: none;
-    padding-top: 40px;
-}
-
-.text-bold {
-    font-weight: 700 !important;
-}
-
-.orders_table .rate {
-    color: #27AE60;
-}
-
-.orders_table .footing a {
-    font-size: 14px;
-    color: #0066FF;
-    text-decoration: none;
-}
-
-.orders_table .footing .wishes {
-    font-weight: 400;
-    color: #9D9D9D;
-}
-
-
-
-.empty-list {
-    width: auto;
-    height: 614px;
-    text-align: center;
-    vertical-align: 100%;
-    vertical-align: middle;
-}
-.empty-list p {
-    line-height: 614px;
-    font-weight: 400;
-    font-size: 14px;
-}
-
-
-/* переключение страниц */
-
-.pages {
-    margin-left: auto;
-    margin-right: auto;
-    display: flex;
-    justify-content: space-between;
-}
-
-.pages p {
-    font-weight: 400;
-    font-size: 14px;
-}
-
-.pages .total {
-    margin-top: 15px;
-}
-
-.pages .back {
-    margin-right: 40px;
-    text-decoration: none;
-    font-weight: 600;
-    font-size: 14px;
-    color: #0066FF;
-}
-
-.pages .back.disabled {
-    color: #A6A6A6;
-}
-
-.pages .next {
-    width: 103px;
-    height: 35px;
-    background: #4c555e;
-    border: none;
-    cursor: pointer;
-    border-radius: 6px;
-    font-weight: 700;
-    font-size: 14px;
-    color: #fff;
-}
-
-.pages .next.disabled {
-    background: #A6A6A6;
-}
-
-
-
-/* подвал */
-
-footer {
-    height: 60px;
-    width: 100%;
-    margin-top: 55px;
-    padding-top: 15px;
-    background: #1b1e20;
-}
-
-footer .container {
-    display: flex;
-    align-items: center;
-}
-
-footer ul {
-    margin-left: auto;
-    list-style: none;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-footer ul li {
-    margin-left: 20px;
-}
-
-footer a {
-    text-decoration: none;
-    font-size: 14px;
-    font-weight: 400;
-    color: #fff;
-}
-
-
-
-/* SELECT */
-.select {
-    position: relative;
-    display: block;
-    min-width: 220px;
-    width: 100%;
-    min-width: 247px;
-    max-height: 36px;
-    margin-top: 6px;
-}
-.select_not_active {
-    z-index: -1;
-}
-
-.select__head {
-    width: 100%;
-    max-width: 100%;
-    border: 1px solid #C4C4C4;
-    border-radius: 3px;
-    padding: 8px 10px;
-    font-size: 14px;
-    line-height: 18px;
-    cursor: pointer;
-}
-
-.select__head::after {
-    width: 9px;
-    height: 6px;
-    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDQuNSA1TDggMSIgc3Ryb2tlPSIjQTZBNkE2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K") ;
-    position: absolute;
-    right: 10px;
-    bottom: 50%;
-    transform: translateY(50%);
-    content: '';
-    display: block;
-    transition: .2s ease-in;
-}
-
-.select__head.open::after {
-    width: 9px;
-    height: 2px;
-    background:  url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIyIiB2aWV3Qm94PSIwIDAgOSAyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDQuNSAxTDggMSIgc3Ryb2tlPSIjQTZBNkE2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K") ;
-}
-
-.select__list {
-    display: none;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    background: #fff;
-    border: 1px solid #C4C4C4;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-    margin-top: 5px;
-    max-height: 205px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    margin: 0;
-    padding: 0;
-    font-size: 14px;
-    scrollbar-color: dark;
-    scrollbar-width: thin;
-    overscroll-behavior: contain;
-}
-
-.select__list::-webkit-scrollbar {
-    width: 7px;
-    background-color: #F8F9FA;
-    padding: 5px;
-}
-
-.select__list::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background-color: #D9D9D9;
-}
-
-.select__list .select__item {
-    position: relative;
-    padding: 10px 12px;
-    cursor: pointer;
-    list-style-type: none;
-}
-
-.select__list .select__item:hover {
-    background-color: rgba(224, 229, 231, 0.5);
-}
-.select__list div {  
-    max-width: 106px; 
-    border-bottom: 1px solid #C4C4C4; 
-    margin-left: 12px;
- }
-.menu-burger__header {
-    display: none;
-}
-
-
-.header_nav {
-    display: flex;
-    
-}
-.header_nav ul {
-    height: 26px;
-}
-.logo_hidden, .user_image_hidden, .user {
-    display: none;
-}
-
-.line_hidden {
-    display: none;
-    height: 1px;
-    width: 106px;
-    background: #C4C4C4;
-    margin-bottom: 16px;
-
-}
-div.scrollmenu {
-    overflow: auto;
-    white-space: nowrap;
-}
-
-div.scrollmenu a {
-    display: inline-block;
-    color: white;
-    text-align: center;
-    padding: 14px;
-    text-decoration: none;
-}
-.header {
-    padding-left: 40px;
-    padding-right: 40px;
-}
  /* адаптация */
 
-@media all and (max-width: 1460px){
+ @media all and (max-width: 1460px){
     /* (((((((((((((((((( */
     .container {
         width: 1146px;
@@ -544,10 +29,16 @@ div.scrollmenu a {
     .header__container {
         width: 1146px;
     }
+
+    .contact-form-container {
+        margin-left: 30px;
+    }
+    
 }
 
 
 @media all and (max-width: 1240px) {
+
     .header__container {
         position: relative;
         top: 6px;
@@ -602,6 +93,7 @@ div.scrollmenu a {
         right:-100%;
         border: 1px solid #C4C4C4;
         border-radius: 6px;
+        padding-right: 10px;
     }
     .header__menu {
         display: block;
@@ -687,7 +179,82 @@ div.scrollmenu a {
     .filters-container .filter {
         margin-bottom: 40px;
     }
+    .form-container {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        margin-top: 40px;
+    }
+    .wrapper {
+        display: grid;
+        grid-template-columns: 454px;
+        font-size: 14px;  
+    }
+    
+
+    .btn, .contact-btn, .form-btn, .contact-form-btn {
+        margin-left: auto;
+        margin-right: auto;
+
+    }
 }
+@media all and (max-width: 960px)  {
+    .form-container {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        margin-top: 40px;
+    }
+    .wrapper {
+        display: grid;
+        grid-template-columns: 454px;
+        font-size: 14px;  
+    }
+    .wrapper-active {
+        grid-template-columns:  454px;
+        font-size: 14px;
+    }
+    .form-input{
+         margin-top: 10px;
+         margin-bottom: 15px;
+    }
+    .wrapper div.select, .wrapper-active div.select {
+        margin: 0;
+        margin-top: 10px;
+        margin-bottom: 15px;
+        font-weight: 600;
+    }
+    div.lable {
+        text-align: start;
+        margin-top: 0px;
+        margin-bottom: 0px;
+    }
+    .lable p {
+        padding: 0px;
+    }
+    .contact-form-container {
+        margin-left: 0px;
+    }
+    .contact-form {
+        display: grid;
+        grid-template-columns: 1px 454px;
+        font-size: 14px;
+        grid-template-rows: 49px 49px 49px 150px 0px 0px 0px 0px;
+    }
+    .contact-form-active { 
+        display: none;
+        grid-template-columns:  281px;
+        font-size: 14px; 
+        grid-template-rows: 0px 49px 19px 59px 19px 36px 0px 115px;
+    }
+
+    .btn, .contact-btn, .form-btn, .contact-form-btn {
+        margin-left: auto;
+        margin-right: auto;
+
+    }
+}
+/* ipad mini 8.3 */
 @media all and (max-width: 744px) and (min-width: 565px) {
     /* .container {
         width: fit-content;
@@ -720,6 +287,60 @@ div.scrollmenu a {
     footer {
         height: 190px;
     }
+    .form-container {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        margin-top: 40px;
+    }
+    .wrapper {
+        display: grid;
+        grid-template-columns: 454px;
+        font-size: 14px;  
+    }
+    .wrapper-active {
+        grid-template-columns:  454px;
+        font-size: 14px;
+    }
+    .form-input{
+         margin-top: 10px;
+         margin-bottom: 15px;
+    }
+    .wrapper div.select, .wrapper-active div.select {
+        margin: 0;
+        margin-top: 10px;
+        margin-bottom: 15px;
+        font-weight: 600;
+    }
+    div.lable {
+        text-align: start;
+        margin-top: 0px;
+        margin-bottom: 0px;
+    }
+    .lable p {
+        padding: 0px;
+    }
+    .contact-form-container {
+        margin-left: 0px;
+    }
+    .contact-form {
+        display: grid;
+        grid-template-columns: 1px 454px;
+        font-size: 14px;
+        grid-template-rows: 49px 49px 49px 150px 0px 0px 0px 0px;
+    }
+    .contact-form-active { 
+        display: none;
+        grid-template-columns:  281px;
+        font-size: 14px; 
+        grid-template-rows: 0px 49px 19px 59px 19px 36px 0px 115px;
+    }
+
+    .btn, .contact-btn, .form-btn, .contact-form-btn {
+        margin-left: auto;
+        margin-right: auto;
+
+    }
 }
 
 
@@ -742,15 +363,7 @@ div.scrollmenu a {
         overflow: auto;
         white-space: nowrap;
     }
-    .pages {
-        display: block;
-    }
-    .pages .buttons{
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        margin-top: 48px;
-    }
+
     footer .container{
         display: block;
     }

+ 14 - 14
css/style.css

@@ -45,6 +45,10 @@
     width: 150px;
 }
 
+.vh {
+    min-height: 65vh;
+}
+
 
 
 
@@ -331,26 +335,25 @@ select option{
 }
 
 .empty-list {
-    width: auto;
-    height: 614px;
     text-align: center;
-    vertical-align: 100%;
-    vertical-align: middle;
-}
-.empty-list p {
-    line-height: 614px;
     font-weight: 400;
     font-size: 14px;
+    margin-top: calc(100vh/4);
 }
 
 
+
 /* переключение страниц */
 
+
+
 .pages {
     margin-left: auto;
     margin-right: auto;
     display: flex;
     justify-content: space-between;
+    margin-top: 45px;
+
 }
 
 .pages p {
@@ -398,7 +401,7 @@ select option{
 /* подвал */
 
 footer {
-    height: 60px;
+    height: 65px;
     width: 100%;
     margin-top: 55px;
     padding-top: 15px;
@@ -730,14 +733,12 @@ main  {
     padding-bottom: 15px;
     cursor: pointer;
 }
-.accordion-item--active .accordion-item__trigger {
-   
-}
+
 .accordion-item--active .accordion-item__content {
     display: block;
 }
 .accordion-item--active {
-    border: 1px solid black;
+    border: 1px solid black !important;
     border-radius: 4px;
     z-index: 2;
 }
@@ -889,5 +890,4 @@ div.lable {
 .font {
     font-weight: 600;
     text-align: right;
-}
-.nonedisplay
+}

+ 6 - 7
documents_page.html

@@ -53,7 +53,7 @@
 
          <div class="menu-burger__header">
           <span></span>
-        </div
+         </div>
 
          
       </div>
@@ -63,6 +63,7 @@
     <div class="container">
      <div class="main">
         <h1>Документы</h1>
+
         <div class="accordion-item">
           <div class="accordion-item__trigger">
             <p class="link-item">Документ</p>
@@ -76,6 +77,7 @@
             <button class="btn btn-centered">Заменить</button>
           </div>
         </div>
+
         <!-- <div  class = "line" style="width: 100%; height: 1px; background-color: black;"></div> -->
         <div class="accordion-item">
           <div class="accordion-item__trigger">
@@ -148,11 +150,7 @@
             <p class="red"><span class="circle"></span >Документов нет</p>
           </div>
           <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
-            <div class="files">
-              <div class="files-item"><a href="#">Договор.pdf</a><p>Действителен до 22.08.2025</p></div>
-              <div class="files-item"><a href="#">Договор ИП.pdf</a><p>Действителен до 22.08.2025</p></div>
-            </div>
-            <button class="btn btn-centered">Заменить</button>
+            <button class="btn btn-centered">Загрузить</button>
           </div>
         </div> 
      </div>
@@ -331,10 +329,11 @@
   </footer>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
-  <script defer src="js/document.min.js"></script>
+  <script defer src="js/document.js"></script>
   <script defer src="js/form.min.js"></script>
   <script src="js/menu.js"></script> 
   <script defer src="js/select.min.js"></script>
+  <script src="js/validation.js"></script> 
   
 
   </body>

+ 37 - 0
js/document.js

@@ -0,0 +1,37 @@
+document.querySelectorAll('.accordion-item__trigger').forEach((item) =>
+    item.addEventListener('click', () => {
+        const parent = item.parentNode;
+        const link = parent.querySelector('.link-item');
+
+        if (parent.classList.contains('accordion-item--active')) {
+            parent.classList.remove('accordion-item--active');
+        } else {
+            document
+                .querySelectorAll('.accordion-item')
+                .forEach((child) => child.classList.remove('accordion-item--active'))
+        
+            parent.classList.add('accordion-item--active');
+        
+        }
+
+        if (link.classList.contains('link-item--active')) {
+            link.classList.remove('link-item--active');
+        } else {
+            document
+                .querySelectorAll('.link-item')
+                .forEach((child) => child.classList.remove('link-item--active'))
+        
+            link.classList.add('link-item--active');
+        
+        }
+
+        // if (parent.classList.contains('accordion-item--active')) {
+        //     link.style.color = 'gray';
+
+        // } else {
+        //     link.style.color = 'blue';
+
+        // }
+        
+    })
+)

+ 13 - 10
js/document.min.js

@@ -1,21 +1,24 @@
 $(document).ready(function() {
     $('.accordion-item__trigger').click(function(){
-        $(this).parent('.accordion-item').toggleClass('accordion-item--active');
-        });
-
-    $('.main>div.accordion-item:last-child').click(function(){
         const parent = $(this).parent();
         
-        if ($('.main>div.accordion-item:last-child').hasClass('accordion-item--active')){
-            $('.main>div.accordion-item:last-child').css('border-bottom', '1px solid black');
 
+        if (parent.hasClass('accordion-item--active')){
+            parent.removeClass('accordion-item--active');
         } else {
+            $('.accordion-item').removeClass('accordion-item--active')
+            parent.addClass('accordion-item--active');
+            $(this).children('p.link-item').addClass('link-item--active');
+        }  
+
+        if (parent.hasClass('accordion-item--active')){
+            $(this).children('p.link-item').addClass('link-item--active');
+        } else if (!parent.hasClass('accordion-item--active')){
+            $(this).children('p.link-item').removeClass('link-item--active');
 
-            $('.main>div.accordion-item:last-child').css('border-bottom', '1px solid #E5E5E5');
-           
-        }
-    }); 
+        }  
 
+    });
 
 
    

+ 9 - 16
js/form.min.js

@@ -1,21 +1,14 @@
 $(document).ready(function() {
-    $('.btn').click(function(){
-        $(".wrapper-active").css('display', 'grid');
-        $('.wrapper').css('display', 'none');
-      }); 
+  $('.btn').click(function(){
+      $(".wrapper-active").css('display', 'grid');
+      $('.wrapper').css('display', 'none');
+    }); 
 
-      $('.form-btn').click(function(){
-        $(".wrapper-active").css('display', 'none');
-        $('.wrapper').css('display', 'grid');
-      }); 
 
-      $('.contact-btn').click(function(){
-        $(".contact-form-active").css('display', 'grid');
-        $('.contact-form').css('display', 'none');
-      }); 
 
-       $('.contact-form-btn').click(function(){
-        $(".contact-form-active").css('display', 'none');
-        $('.contact-form').css('display', 'grid');
-      });  
+    $('.contact-btn').click(function(){
+      $(".contact-form-active").css('display', 'grid');
+      $('.contact-form').css('display', 'none');
+    }); 
+
 });

+ 6 - 4
js/script.js

@@ -7,6 +7,12 @@ let scroller = document.querySelector('.scrollmenu');
 let scrollersquare = document.querySelector('.scrollersquare');
 
 table.addEventListener('click', function(e) {
+
+    footings.forEach(function(footing) {
+        footing.style.display = 'none';
+        backBtn.classList.add('disabled');
+    });
+
     let target = e.target;
     if (target.classList.contains('heading') || target.parentElement.classList.contains('heading') || target == table) {
         return;
@@ -39,7 +45,3 @@ table.onmouseout = function() {
     headings.style.border = '';
     
 };
-
-// scroller.addEventListener('scroll', function() {
-//     scrollersquare.style.display = 'block';
-//   });

+ 47 - 12
list_of_orders.html

@@ -59,7 +59,7 @@
   </header>
 
   <main>
-    <div class="container">
+    <div class="container vh">
       
       <div class="filters-container">
         <div class="filter">
@@ -94,11 +94,11 @@
             <input class="select__input" type="hidden" name="">
             <div class="select__head">Все</div>
             <ul class="select__list" style="display: none;">
-                <li class="select__item">ИП Панюкова А. А.</li>
+                <li class="select__item">1</li>
                 <div></div>
-                <li class="select__item">ООО КОЛЕСА</li>
+                <li class="select__item">2</li>
                 <div></div>
-                <li class="select__item">ООО КОЛЕСНИЦА</li>
+                <li class="select__item">3</li>
             </ul>
         </div>
         </div>
@@ -139,13 +139,51 @@
               <li class=""><a href="">Посмотреть автомобиль на карте</a></li>
             </ul>
           </div>
+
+          <div class="order">
+            <ul> 
+              <li class="order_num fixedcol">12324124</li>
+              <li class="order_status"><div class="green_circle"></div>Завершен</li>
+              <li class="order_date"><span class="from">02.04.2021, 06:10</span><p>–</p><span class="to">02.04.2021, 12:23</span></li>
+              <li class="order_duration">6 часов 13 минут</li>
+              <li class="order_tariff"><div class="gray_circle"></div>Суточный</li>
+              <li class="order_cust">Заказчик</li>
+              <li class="order_exec">Исполнитель</li>
+              <li class="order_car">Автомобиль</li>
+              <li class="order_total" style="font-family: 'Open Sans', sans-serif;">5000,34 &#8381;</li>
+            </ul>
+            <ul class="footing">
+              <li class="text-bold">Особые пожелания: <span class="wishes">–</span></li>
+              <li class="text-bold">Рейтинг: <span class="rate">5</span></li>
+              <li class=""><a href="">Посмотреть автомобиль на карте</a></li>
+            </ul>
+          </div>
+
+          <div class="order">
+            <ul> 
+              <li class="order_num fixedcol">12324124</li>
+              <li class="order_status"><div class="green_circle"></div>Завершен</li>
+              <li class="order_date"><span class="from">02.04.2021, 06:10</span><p>–</p><span class="to">02.04.2021, 12:23</span></li>
+              <li class="order_duration">6 часов 13 минут</li>
+              <li class="order_tariff"><div class="gray_circle"></div>Суточный</li>
+              <li class="order_cust">Заказчик</li>
+              <li class="order_exec">Исполнитель</li>
+              <li class="order_car">Автомобиль</li>
+              <li class="order_total" style="font-family: 'Open Sans', sans-serif;">5000,34 &#8381;</li>
+            </ul>
+            <ul class="footing">
+              <li class="text-bold">Особые пожелания: <span class="wishes">–</span></li>
+              <li class="text-bold">Рейтинг: <span class="rate">5</span></li>
+              <li class=""><a href="">Посмотреть автомобиль на карте</a></li>
+            </ul>
+          </div>
+
         </div>
       </div>
-      <div class="empty-list">
-        
-      </div> 
-
-      <div class="pages">
+    
+  
+    </div>
+      <div class="pages container">
         <div>
           <p>Страница 1 из 1</p>
           <p class="total">Всего: 2</p>
@@ -155,9 +193,6 @@
           <button class="next disabled">Далее</button>
         </div>
       </div>
-       
-    </div>
-
     
   </main>
   

+ 13 - 16
list_of_orders_2.html

@@ -57,7 +57,7 @@
   </header>
 
   <main>
-    <div class="container">
+    <div class="container vh">
       
       <div class="filters-container">
         <div class="filter">
@@ -115,26 +115,23 @@
             <li class="heading_car">Автомобиль</li>
             <li class="heading_total">Стоимость</li>
           </ul>
-      </div>
-      </div>
-
-      <div class="empty-list">
-        <p>Заказов нет.</p>
-      </div> 
-
-      <div class="pages">
-        <div>
-          <p>Страница 1 из 1</p>
-          <p class="total">Всего: 2</p>
-        </div>
-        <div class="buttons">
-          <a href="#" class="back disabled">Назад</a>
-          <button class="next disabled">Далее</button>
         </div>
       </div>
+
+      <p class="empty-list">Заказов нет.</p>
        
     </div>
 
+    <div class="pages container">
+      <div>
+        <p>Страница 1 из 1</p>
+        <p class="total">Всего: 2</p>
+      </div>
+      <div class="buttons">
+        <a href="#" class="back disabled">Назад</a>
+        <button class="next disabled">Далее</button>
+      </div>
+    </div>
     
   </main>