From d950e413fdb0ec67bb46ddb988e5550365577ac9 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Thu, 8 Jun 2023 13:21:32 +0800
Subject: [PATCH] right container

---
 src/pages/Home.vue  | 190 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 src/pages/Ready.vue |   1 +
 2 files changed, 189 insertions(+), 2 deletions(-)

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index e8002d5..1ee7a66 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,6 +1,116 @@
 <template>
-  <div>
+  <div class="home_container">
     <Header />
+    <div class="content_container">
+      <div class="left_container"></div>
+      <div class="right_container">
+        <div class="pattern_box">
+          <div class="pattern">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              fill="none"
+              version="1.1"
+              width="67"
+              height="67"
+              viewBox="0 0 67 67"
+            >
+              <g>
+                <g>
+                  <rect
+                    x="0"
+                    y="0"
+                    width="67"
+                    height="67"
+                    rx="33.5"
+                    fill="#15D0A1"
+                    fill-opacity="1"
+                  />
+                </g>
+                <g>
+                  <path
+                    d="M33.2393,28.2726C36.1311,28.2726,38.4872,30.548,38.4872,33.3407C38.4872,36.1334,36.1311,38.4089,33.2393,38.4089C30.3476,38.4089,27.9915,36.1334,27.9915,33.3407C27.9915,30.548,30.3476,28.2726,33.2393,28.2726C33.2393,28.2726,33.2393,28.2726,33.2393,28.2726ZM33.2393,24.8938C28.4069,24.8938,24.4929,28.6738,24.4929,33.3407C24.4929,38.0076,28.4069,41.7877,33.2393,41.7877C38.0717,41.7877,41.9858,38.0076,41.9858,33.3407C41.9858,28.6738,38.0717,24.8938,33.2393,24.8938C33.2393,24.8938,33.2393,24.8938,33.2393,24.8938ZM21.163800000000002,12.48742C21.3278,12.45047,21.469900000000003,12.598279999999999,21.4207,12.75667C21.4207,12.75667,20.6937,15.01622,20.6937,15.01622C20.6937,15.01622,17.7691,24.1284,17.7691,24.1284C17.7198,24.2814,17.5121,24.3289,17.397399999999998,24.2076C17.397399999999998,24.2076,15.15059,21.863500000000002,15.15059,21.863500000000002C14.757,21.451700000000002,14.05729,21.520400000000002,13.756630000000001,22.000799999999998C13.19904,22.893,12.707049999999999,23.8274,12.280660000000001,24.7935C11.0999,27.4965,10.49858,30.3737,10.49858,33.3407C10.49858,36.3077,11.0999,39.185,12.28613,41.888C13.149840000000001,43.8677,14.30328,45.6943,15.71364,47.3362C16.27123,47.9856,16.23843,48.9411,15.64258,49.5588C14.92099,50.3084,13.685559999999999,50.2715,13.01318,49.4849C9.25768,45.103,7,39.475300000000004,7,33.3407C7,28.0455,8.68369,23.1306,11.55908,19.0654C11.78868,18.7434,11.750409999999999,18.3052,11.47709,18.020200000000003C11.47709,18.020200000000003,9.03355,15.46496,9.03355,15.46496C8.91875,15.343530000000001,8.98435,15.15348,9.148340000000001,15.116520000000001C9.148340000000001,15.116520000000001,17.0748,13.38491,17.0748,13.38491C17.0748,13.38491,21.163800000000002,12.48742,21.163800000000002,12.48742C21.163800000000002,12.48742,21.163800000000002,12.48742,21.163800000000002,12.48742ZM61.7418,22.3492C61.9058,22.3176,62.0424,22.4759,61.9878,22.628999999999998C61.9878,22.628999999999998,59.26,30.0359,59.26,30.0359C59.26,30.0359,57.8606,33.8423,57.8606,33.8423C57.8059,33.995400000000004,57.5981,34.0323,57.4889,33.9109C57.4889,33.9109,55.9527,32.1687,55.9527,32.1687C55.9527,32.1687,49.4913,24.8463,49.4913,24.8463C49.382,24.7249,49.453,24.5295,49.617,24.5032C49.617,24.5032,52.5526,23.9805,52.5526,23.9805C53.1375,23.8749,53.4491,23.2467,53.1593,22.739800000000002C52.1316,20.9343,50.8416,19.2872,49.3164,17.80898C47.2281,15.79227,44.7955,14.20848,42.0841,13.099820000000001C39.2908,11.95949,36.311499999999995,11.37877,33.2393,11.37877C30.9871,11.37877,28.7841,11.69024,26.6685,12.30792C25.8322,12.55077,24.9356,12.15483,24.5749,11.38404C24.143,10.454889999999999,24.6514,9.36734,25.6627,9.07698C28.0571,8.374832,30.6045,8,33.2393,8C43.7351,8,52.7931,13.955079999999999,56.9914,22.5551C57.1609,22.8982,57.549,23.093600000000002,57.9371,23.024900000000002C57.9371,23.024900000000002,61.7418,22.3492,61.7418,22.3492C61.7418,22.3492,61.7418,22.3492,61.7418,22.3492ZM57.1663,36.7195C58.2869,36.7195,59.1124,37.7173,58.8718,38.7732C56.2972,50.1607,45.8014,58.6815,33.2393,58.6815C31.6376,58.6815,30.0687,58.5442,28.5436,58.2749C28.15,58.2064,27.7618,58.407,27.5924,58.7554C27.5924,58.7554,26.1219,61.8754,26.1219,61.8754C26.0508,62.0233,25.8431,62.0444,25.7447,61.9124C25.7447,61.9124,21.3223,55.9257,21.3223,55.9257C21.3223,55.9257,18.589,52.2196,18.589,52.2196C18.4907,52.0876,18.5781,51.9028,18.747500000000002,51.887C18.747500000000002,51.887,20.7538,51.7022,20.7538,51.7022C20.7538,51.7022,31.0144,50.7466,31.0144,50.7466C31.1839,50.7308,31.3042,50.8945,31.2331,51.0423C31.2331,51.0423,29.8555,53.9617,29.8555,53.9617C29.6095,54.4844,29.9594,55.0863,30.5498,55.1496C31.4354,55.25,32.331900000000005,55.2974,33.2338,55.2974C36.306,55.2974,39.2853,54.7167,42.0841,53.5711C44.7901,52.4678,47.2227,50.8787,49.3164,48.8619C51.4046,46.8453,53.0446,44.496,54.1925,41.8773C54.7391,40.6315,55.1601,39.348600000000005,55.4553,38.0394C55.6357,37.2738,56.3463,36.7195,57.1663,36.7195C57.1663,36.7195,57.1663,36.7195,57.1663,36.7195Z"
+                    fill="#FFFFFF"
+                    fill-opacity="1"
+                  />
+                </g>
+              </g>
+            </svg>
+            <p class="name">转速模式</p>
+          </div>
+          <div class="pattern">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              fill="none"
+              version="1.1"
+              width="67"
+              height="67"
+              viewBox="0 0 67 67"
+            >
+              <g>
+                <g>
+                  <rect
+                    x="0"
+                    y="0"
+                    width="67"
+                    height="67"
+                    rx="33.5"
+                    fill="#15D0A1"
+                    fill-opacity="1"
+                  />
+                </g>
+                <g>
+                  <path
+                    d="M33.2393,28.2726C36.1311,28.2726,38.4872,30.548,38.4872,33.3407C38.4872,36.1334,36.1311,38.4089,33.2393,38.4089C30.3476,38.4089,27.9915,36.1334,27.9915,33.3407C27.9915,30.548,30.3476,28.2726,33.2393,28.2726C33.2393,28.2726,33.2393,28.2726,33.2393,28.2726ZM33.2393,24.8938C28.4069,24.8938,24.4929,28.6738,24.4929,33.3407C24.4929,38.0076,28.4069,41.7877,33.2393,41.7877C38.0717,41.7877,41.9858,38.0076,41.9858,33.3407C41.9858,28.6738,38.0717,24.8938,33.2393,24.8938C33.2393,24.8938,33.2393,24.8938,33.2393,24.8938ZM21.163800000000002,12.48742C21.3278,12.45047,21.469900000000003,12.598279999999999,21.4207,12.75667C21.4207,12.75667,20.6937,15.01622,20.6937,15.01622C20.6937,15.01622,17.7691,24.1284,17.7691,24.1284C17.7198,24.2814,17.5121,24.3289,17.397399999999998,24.2076C17.397399999999998,24.2076,15.15059,21.863500000000002,15.15059,21.863500000000002C14.757,21.451700000000002,14.05729,21.520400000000002,13.756630000000001,22.000799999999998C13.19904,22.893,12.707049999999999,23.8274,12.280660000000001,24.7935C11.0999,27.4965,10.49858,30.3737,10.49858,33.3407C10.49858,36.3077,11.0999,39.185,12.28613,41.888C13.149840000000001,43.8677,14.30328,45.6943,15.71364,47.3362C16.27123,47.9856,16.23843,48.9411,15.64258,49.5588C14.92099,50.3084,13.685559999999999,50.2715,13.01318,49.4849C9.25768,45.103,7,39.475300000000004,7,33.3407C7,28.0455,8.68369,23.1306,11.55908,19.0654C11.78868,18.7434,11.750409999999999,18.3052,11.47709,18.020200000000003C11.47709,18.020200000000003,9.03355,15.46496,9.03355,15.46496C8.91875,15.343530000000001,8.98435,15.15348,9.148340000000001,15.116520000000001C9.148340000000001,15.116520000000001,17.0748,13.38491,17.0748,13.38491C17.0748,13.38491,21.163800000000002,12.48742,21.163800000000002,12.48742C21.163800000000002,12.48742,21.163800000000002,12.48742,21.163800000000002,12.48742ZM61.7418,22.3492C61.9058,22.3176,62.0424,22.4759,61.9878,22.628999999999998C61.9878,22.628999999999998,59.26,30.0359,59.26,30.0359C59.26,30.0359,57.8606,33.8423,57.8606,33.8423C57.8059,33.995400000000004,57.5981,34.0323,57.4889,33.9109C57.4889,33.9109,55.9527,32.1687,55.9527,32.1687C55.9527,32.1687,49.4913,24.8463,49.4913,24.8463C49.382,24.7249,49.453,24.5295,49.617,24.5032C49.617,24.5032,52.5526,23.9805,52.5526,23.9805C53.1375,23.8749,53.4491,23.2467,53.1593,22.739800000000002C52.1316,20.9343,50.8416,19.2872,49.3164,17.80898C47.2281,15.79227,44.7955,14.20848,42.0841,13.099820000000001C39.2908,11.95949,36.311499999999995,11.37877,33.2393,11.37877C30.9871,11.37877,28.7841,11.69024,26.6685,12.30792C25.8322,12.55077,24.9356,12.15483,24.5749,11.38404C24.143,10.454889999999999,24.6514,9.36734,25.6627,9.07698C28.0571,8.374832,30.6045,8,33.2393,8C43.7351,8,52.7931,13.955079999999999,56.9914,22.5551C57.1609,22.8982,57.549,23.093600000000002,57.9371,23.024900000000002C57.9371,23.024900000000002,61.7418,22.3492,61.7418,22.3492C61.7418,22.3492,61.7418,22.3492,61.7418,22.3492ZM57.1663,36.7195C58.2869,36.7195,59.1124,37.7173,58.8718,38.7732C56.2972,50.1607,45.8014,58.6815,33.2393,58.6815C31.6376,58.6815,30.0687,58.5442,28.5436,58.2749C28.15,58.2064,27.7618,58.407,27.5924,58.7554C27.5924,58.7554,26.1219,61.8754,26.1219,61.8754C26.0508,62.0233,25.8431,62.0444,25.7447,61.9124C25.7447,61.9124,21.3223,55.9257,21.3223,55.9257C21.3223,55.9257,18.589,52.2196,18.589,52.2196C18.4907,52.0876,18.5781,51.9028,18.747500000000002,51.887C18.747500000000002,51.887,20.7538,51.7022,20.7538,51.7022C20.7538,51.7022,31.0144,50.7466,31.0144,50.7466C31.1839,50.7308,31.3042,50.8945,31.2331,51.0423C31.2331,51.0423,29.8555,53.9617,29.8555,53.9617C29.6095,54.4844,29.9594,55.0863,30.5498,55.1496C31.4354,55.25,32.331900000000005,55.2974,33.2338,55.2974C36.306,55.2974,39.2853,54.7167,42.0841,53.5711C44.7901,52.4678,47.2227,50.8787,49.3164,48.8619C51.4046,46.8453,53.0446,44.496,54.1925,41.8773C54.7391,40.6315,55.1601,39.348600000000005,55.4553,38.0394C55.6357,37.2738,56.3463,36.7195,57.1663,36.7195C57.1663,36.7195,57.1663,36.7195,57.1663,36.7195Z"
+                    fill="#FFFFFF"
+                    fill-opacity="1"
+                  />
+                </g>
+              </g>
+            </svg>
+            <p class="name">零流量模式</p>
+          </div>
+          <div class="pattern">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              fill="none"
+              version="1.1"
+              width="67"
+              height="67"
+              viewBox="0 0 67 67"
+            >
+              <g>
+                <g>
+                  <rect
+                    x="0"
+                    y="0"
+                    width="67"
+                    height="67"
+                    rx="33.5"
+                    fill="#15D0A1"
+                    fill-opacity="1"
+                  />
+                </g>
+                <g>
+                  <path
+                    d="M33.2393,28.2726C36.1311,28.2726,38.4872,30.548,38.4872,33.3407C38.4872,36.1334,36.1311,38.4089,33.2393,38.4089C30.3476,38.4089,27.9915,36.1334,27.9915,33.3407C27.9915,30.548,30.3476,28.2726,33.2393,28.2726C33.2393,28.2726,33.2393,28.2726,33.2393,28.2726ZM33.2393,24.8938C28.4069,24.8938,24.4929,28.6738,24.4929,33.3407C24.4929,38.0076,28.4069,41.7877,33.2393,41.7877C38.0717,41.7877,41.9858,38.0076,41.9858,33.3407C41.9858,28.6738,38.0717,24.8938,33.2393,24.8938C33.2393,24.8938,33.2393,24.8938,33.2393,24.8938ZM21.163800000000002,12.48742C21.3278,12.45047,21.469900000000003,12.598279999999999,21.4207,12.75667C21.4207,12.75667,20.6937,15.01622,20.6937,15.01622C20.6937,15.01622,17.7691,24.1284,17.7691,24.1284C17.7198,24.2814,17.5121,24.3289,17.397399999999998,24.2076C17.397399999999998,24.2076,15.15059,21.863500000000002,15.15059,21.863500000000002C14.757,21.451700000000002,14.05729,21.520400000000002,13.756630000000001,22.000799999999998C13.19904,22.893,12.707049999999999,23.8274,12.280660000000001,24.7935C11.0999,27.4965,10.49858,30.3737,10.49858,33.3407C10.49858,36.3077,11.0999,39.185,12.28613,41.888C13.149840000000001,43.8677,14.30328,45.6943,15.71364,47.3362C16.27123,47.9856,16.23843,48.9411,15.64258,49.5588C14.92099,50.3084,13.685559999999999,50.2715,13.01318,49.4849C9.25768,45.103,7,39.475300000000004,7,33.3407C7,28.0455,8.68369,23.1306,11.55908,19.0654C11.78868,18.7434,11.750409999999999,18.3052,11.47709,18.020200000000003C11.47709,18.020200000000003,9.03355,15.46496,9.03355,15.46496C8.91875,15.343530000000001,8.98435,15.15348,9.148340000000001,15.116520000000001C9.148340000000001,15.116520000000001,17.0748,13.38491,17.0748,13.38491C17.0748,13.38491,21.163800000000002,12.48742,21.163800000000002,12.48742C21.163800000000002,12.48742,21.163800000000002,12.48742,21.163800000000002,12.48742ZM61.7418,22.3492C61.9058,22.3176,62.0424,22.4759,61.9878,22.628999999999998C61.9878,22.628999999999998,59.26,30.0359,59.26,30.0359C59.26,30.0359,57.8606,33.8423,57.8606,33.8423C57.8059,33.995400000000004,57.5981,34.0323,57.4889,33.9109C57.4889,33.9109,55.9527,32.1687,55.9527,32.1687C55.9527,32.1687,49.4913,24.8463,49.4913,24.8463C49.382,24.7249,49.453,24.5295,49.617,24.5032C49.617,24.5032,52.5526,23.9805,52.5526,23.9805C53.1375,23.8749,53.4491,23.2467,53.1593,22.739800000000002C52.1316,20.9343,50.8416,19.2872,49.3164,17.80898C47.2281,15.79227,44.7955,14.20848,42.0841,13.099820000000001C39.2908,11.95949,36.311499999999995,11.37877,33.2393,11.37877C30.9871,11.37877,28.7841,11.69024,26.6685,12.30792C25.8322,12.55077,24.9356,12.15483,24.5749,11.38404C24.143,10.454889999999999,24.6514,9.36734,25.6627,9.07698C28.0571,8.374832,30.6045,8,33.2393,8C43.7351,8,52.7931,13.955079999999999,56.9914,22.5551C57.1609,22.8982,57.549,23.093600000000002,57.9371,23.024900000000002C57.9371,23.024900000000002,61.7418,22.3492,61.7418,22.3492C61.7418,22.3492,61.7418,22.3492,61.7418,22.3492ZM57.1663,36.7195C58.2869,36.7195,59.1124,37.7173,58.8718,38.7732C56.2972,50.1607,45.8014,58.6815,33.2393,58.6815C31.6376,58.6815,30.0687,58.5442,28.5436,58.2749C28.15,58.2064,27.7618,58.407,27.5924,58.7554C27.5924,58.7554,26.1219,61.8754,26.1219,61.8754C26.0508,62.0233,25.8431,62.0444,25.7447,61.9124C25.7447,61.9124,21.3223,55.9257,21.3223,55.9257C21.3223,55.9257,18.589,52.2196,18.589,52.2196C18.4907,52.0876,18.5781,51.9028,18.747500000000002,51.887C18.747500000000002,51.887,20.7538,51.7022,20.7538,51.7022C20.7538,51.7022,31.0144,50.7466,31.0144,50.7466C31.1839,50.7308,31.3042,50.8945,31.2331,51.0423C31.2331,51.0423,29.8555,53.9617,29.8555,53.9617C29.6095,54.4844,29.9594,55.0863,30.5498,55.1496C31.4354,55.25,32.331900000000005,55.2974,33.2338,55.2974C36.306,55.2974,39.2853,54.7167,42.0841,53.5711C44.7901,52.4678,47.2227,50.8787,49.3164,48.8619C51.4046,46.8453,53.0446,44.496,54.1925,41.8773C54.7391,40.6315,55.1601,39.348600000000005,55.4553,38.0394C55.6357,37.2738,56.3463,36.7195,57.1663,36.7195C57.1663,36.7195,57.1663,36.7195,57.1663,36.7195Z"
+                    fill="#FFFFFF"
+                    fill-opacity="1"
+                  />
+                </g>
+              </g>
+            </svg>
+            <p class="name">紧急模式</p>
+          </div>
+        </div>
+        <div class="warn_info_box">
+          <div class="warn_card_header">历史报警信息</div>
+          <div class="info_card_list"></div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -8,4 +118,80 @@
 import Header from 'cpns/Header'
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.home_container {
+  width: 1280px;
+  height: 800px;
+  background: #203156;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  .content_container {
+    width: 100%;
+    flex: 1;
+    padding: 20px;
+    display: flex;
+    align-items: flex-start;
+    box-sizing: border-box;
+    .left_container {
+      flex: 1;
+      height: 100%;
+    }
+    .right_container {
+      width: 420px;
+      margin-left: 20px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .pattern_box {
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 25px 39px 21px 40px;
+        box-sizing: border-box;
+        background: #3f4f6f;
+        border-radius: 18px;
+        .pattern {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          .name {
+            margin-top: 8px;
+            font-size: 18px;
+            font-weight: 500;
+            line-height: 22px;
+            letter-spacing: 0.05em;
+            color: #ffffff;
+          }
+        }
+      }
+      .warn_info_box {
+        flex: 1;
+        background: #3f4f6f;
+        border-radius: 18px;
+        overflow: hidden;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        .warn_card_header {
+          height: 56px;
+          background: #d8d8d8;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 24px;
+          font-weight: bold;
+          letter-spacing: 0em;
+          color: #3d3d3d;
+        }
+        .info_card_list {
+          flex: 1;
+          padding: 10px;
+          box-sizing: border-box;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/Ready.vue b/src/pages/Ready.vue
index b670b01..bb9e96e 100644
--- a/src/pages/Ready.vue
+++ b/src/pages/Ready.vue
@@ -188,6 +188,7 @@ onMounted(() => {
   height: 800px;
   background: #ffffff;
   position: relative;
+  overflow: hidden;
   .logo {
     position: absolute;
     top: 260px;