|
|
|
@ -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> |
maochaoying
2 years ago