diff --git a/src/assets/images/icons/EMQ.svg b/src/assets/images/icons/EMQ.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1b3a7d31bca43a96839172cae7688303d01bdb2c
--- /dev/null
+++ b/src/assets/images/icons/EMQ.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="鍥惧眰_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 14 14" style="enable-background:new 0 0 14 14;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#1685FF;}
+</style>
+<g>
+ <g>
+ <path class="st0" d="M0.783,7.674h-0.02C0.54,7.656,0.37,7.474,0.372,7.256c0.184-2.82,2.267-5.182,5.11-5.794
+ c0.221-0.05,0.442,0.084,0.493,0.298C6.027,1.975,5.89,2.189,5.669,2.239C5.665,2.24,5.662,2.241,5.659,2.241
+ C3.181,2.779,1.364,4.836,1.195,7.294C1.185,7.507,1.004,7.675,0.783,7.674L0.783,7.674z M6.893,14H6.853
+ c-1.769-0.008-3.459-0.714-4.68-1.957c-0.161-0.159-0.159-0.414,0.004-0.57c0.164-0.156,0.427-0.154,0.588,0.004
+ c0.005,0.005,0.01,0.01,0.015,0.015c1.071,1.082,2.546,1.698,4.092,1.71c0.895,0.003,1.779-0.191,2.585-0.57
+ c0.198-0.103,0.445-0.031,0.551,0.162c0.106,0.192,0.032,0.432-0.167,0.535c-0.004,0.002-0.009,0.004-0.013,0.006
+ C8.915,13.77,7.911,13.997,6.893,14L6.893,14L6.893,14z M12.727,9.859c-0.04,0.003-0.08-0.004-0.117-0.019
+ c-0.215-0.064-0.337-0.284-0.274-0.494c0.169-0.53,0.261-1.079,0.274-1.634c0.018-1.864-0.94-3.61-2.545-4.635
+ C9.876,2.957,9.823,2.71,9.947,2.526c0.124-0.184,0.379-0.235,0.568-0.114c1.833,1.182,2.924,3.184,2.898,5.319
+ c0.004,0.639-0.102,1.275-0.313,1.881C13.042,9.762,12.893,9.861,12.727,9.859L12.727,9.859z M12.727,9.859"/>
+ <path class="st0" d="M1.782,12.347C0.798,12.347,0,11.572,0,10.617c0-0.606,0.327-1.167,0.862-1.48
+ c0.28-0.176,0.607-0.268,0.94-0.266c0.986,0.013,1.779,0.791,1.781,1.748c0.006,0.618-0.34,1.188-0.901,1.482
+ C2.413,12.265,2.1,12.351,1.782,12.347L1.782,12.347z M1.782,9.688C1.254,9.681,0.818,10.087,0.803,10.6
+ c0.001,0.514,0.43,0.93,0.959,0.931c0.173,0.001,0.342-0.045,0.49-0.133c0.289-0.171,0.472-0.47,0.49-0.798
+ C2.74,10.094,2.315,9.686,1.793,9.688C1.79,9.688,1.786,9.688,1.782,9.688L1.782,9.688z M12.199,12.404
+ c-0.4,0.005-0.79-0.13-1.096-0.38c-0.777-0.589-0.914-1.678-0.306-2.431c0.338-0.419,0.855-0.664,1.403-0.665h0.02
+ c0.235-0.002,0.469,0.043,0.685,0.133c0.664,0.279,1.095,0.913,1.097,1.615C13.987,11.633,13.185,12.402,12.199,12.404
+ L12.199,12.404z M12.199,9.745c-0.532,0.002-0.961,0.421-0.959,0.937c0.001,0.287,0.138,0.558,0.372,0.734
+ c0.377,0.299,0.926,0.275,1.273-0.057c0.384-0.362,0.393-0.957,0.02-1.33c-0.089-0.089-0.196-0.16-0.314-0.209
+ C12.467,9.768,12.333,9.742,12.199,9.745L12.199,9.745z M6.931,3.476C6,3.475,5.226,2.781,5.15,1.881V1.729
+ C5.153,0.775,5.949,0.003,6.931,0h0.02C7.93,0.005,8.719,0.779,8.713,1.728c0,0.007,0,0.013,0,0.02v0.133
+ C8.651,2.787,7.868,3.488,6.931,3.476L6.931,3.476z M6.931,0.817c-0.53,0.001-0.959,0.417-0.96,0.931v0.076
+ c0.046,0.514,0.512,0.895,1.042,0.851C7.481,2.636,7.85,2.276,7.891,1.824V1.748c-0.002-0.247-0.1-0.485-0.274-0.665
+ C7.435,0.908,7.188,0.812,6.931,0.817L6.931,0.817z M6.931,0.817"/>
+ </g>
+</g>
+</svg>
diff --git "a/src/assets/images/icons/\346\234\215\345\212\241\345\231\250\347\256\241\347\220\206.svg" "b/src/assets/images/icons/\346\234\215\345\212\241\345\231\250\347\256\241\347\220\206.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..7af858d5e227d706993ce2c403351a444cac0e05
--- /dev/null
+++ "b/src/assets/images/icons/\346\234\215\345\212\241\345\231\250\347\256\241\347\220\206.svg"
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="鍥惧眰_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 14 14" style="enable-background:new 0 0 14 14;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#1685FF;}
+</style>
+<g>
+ <g>
+ <path class="st0" d="M13.682,0H0.318C0.127,0,0,0.127,0,0.318v13.364C0,13.873,0.127,14,0.318,14h13.364
+ C13.873,14,14,13.873,14,13.682V0.318C14,0.127,13.873,0,13.682,0L13.682,0z M13.364,13.364H0.636V9.545h12.727V13.364z
+ M13.364,8.909H0.636V5.091h12.727V8.909z M13.364,4.455H0.636V0.636h12.727V4.455z M3.818,10.818H3.182v1.273h0.636V10.818z
+ M2.545,10.818H1.909v1.273h0.636V10.818z M12.409,11.136H9.864v0.636h2.546V11.136z M3.818,6.364H3.182v1.273h0.636V6.364z
+ M2.545,6.364H1.909v1.273h0.636V6.364z M12.409,6.682H9.864v0.636h2.546V6.682z M3.818,1.909H3.182v1.273h0.636V1.909z
+ M2.545,1.909H1.909v1.273h0.636V1.909z M12.409,2.227H9.864v0.636h2.546V2.227z M12.409,2.227"/>
+ </g>
+</g>
+</svg>
diff --git "a/src/assets/images/icons/\346\234\215\345\212\241\345\231\250\350\277\236\346\216\245.svg" "b/src/assets/images/icons/\346\234\215\345\212\241\345\231\250\350\277\236\346\216\245.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..5bba680a2fc3909dd0446d4f519a5297a4810a2f
--- /dev/null
+++ "b/src/assets/images/icons/\346\234\215\345\212\241\345\231\250\350\277\236\346\216\245.svg"
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="鍥惧眰_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 14 14" style="enable-background:new 0 0 14 14;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#1685FF;}
+</style>
+<g>
+ <path class="st0" d="M13.041,10.451c0.018-0.583-0.203-1.159-0.611-1.582c-0.41-0.427-0.986-0.677-1.587-0.689
+ c-0.791,0.011-1.502,0.432-1.884,1.105C8.807,9.23,8.655,9.21,8.482,9.204c-0.703,0.02-1.274,0.56-1.332,1.243
+ c-0.6,0.332-0.977,0.952-0.988,1.633c-0.025,1.02,0.797,1.872,1.836,1.899h0.936c0.199,0,0.361-0.16,0.361-0.357
+ c0-0.197-0.162-0.356-0.361-0.356H8.003c-0.639-0.023-1.141-0.552-1.119-1.185c-0.008-0.486,0.297-0.935,0.751-1.114
+ c0.156-0.052,0.254-0.201,0.238-0.35v-0.078c-0.008-0.167,0.055-0.334,0.17-0.458C8.16,9.958,8.325,9.883,8.492,9.876
+ c0.001,0,0.002,0,0.003,0c0.139,0,0.273,0.048,0.369,0.13c0.035,0.035,0.08,0.059,0.122,0.071c0.188,0.066,0.389-0.034,0.457-0.219
+ c0.197-0.588,0.753-0.993,1.376-1.007c0.838,0.038,1.498,0.741,1.47,1.568l0.001,0.175c-0.016,0.159,0.079,0.313,0.23,0.371
+ c0.461,0.179,0.767,0.627,0.758,1.124c0.016,0.307-0.09,0.601-0.301,0.827c-0.208,0.225-0.505,0.359-0.809,0.369h-2.042
+ c-0.199,0-0.361,0.16-0.361,0.357C9.765,13.84,9.927,14,10.126,14h2.044h0.002c0.497-0.014,0.979-0.227,1.319-0.586
+ c0.346-0.363,0.527-0.838,0.508-1.332C13.993,11.409,13.628,10.791,13.041,10.451z"/>
+ <path class="st0" d="M7.576,0.714c0.199,0,0.361-0.16,0.361-0.357c0-0.145-0.087-0.275-0.224-0.33
+ C7.579-0.028,7.424,0.003,7.321,0.104c-0.104,0.102-0.135,0.255-0.079,0.39C7.299,0.628,7.431,0.714,7.576,0.714z"/>
+ <path class="st0" d="M1.646,12.59H1.31c-0.322-0.005-0.586-0.265-0.588-0.579V9.679C0.72,9.525,0.781,9.375,0.89,9.264
+ c0.1-0.103,0.233-0.157,0.375-0.169l0.024,0.004c0.018,0.003,0.037,0.005,0.055,0.005c0.025,0,0.048-0.013,0.072-0.018h5.567
+ c0.141,0.033,0.292-0.019,0.378-0.138c0.091-0.125,0.091-0.292,0-0.416C7.275,8.412,7.123,8.361,6.983,8.393H1.309
+ C0.985,8.391,0.722,8.131,0.722,7.814V5.487c0.007-0.309,0.27-0.561,0.586-0.561h9.961c0.316,0,0.579,0.252,0.585,0.558v1.867
+ c0,0.197,0.162,0.357,0.362,0.357c0.199,0,0.361-0.16,0.361-0.357V5.484c0-0.344-0.136-0.668-0.384-0.911
+ c-0.006-0.006-0.015-0.008-0.022-0.014c0.008-0.008,0.02-0.011,0.028-0.019c0.244-0.244,0.381-0.581,0.377-0.922v-2.33
+ C12.576,0.578,11.99,0,11.268,0H8.522C8.324,0,8.162,0.16,8.162,0.357s0.162,0.357,0.361,0.357h2.746
+ c0.322,0,0.585,0.258,0.585,0.574v2.347c0.002,0.154-0.059,0.298-0.169,0.407c-0.101,0.1-0.234,0.153-0.376,0.163
+ c-0.014,0-0.026-0.008-0.041-0.008H1.308c-0.157,0-0.306-0.06-0.417-0.17c-0.11-0.109-0.17-0.254-0.169-0.409v-2.33
+ c0-0.316,0.263-0.574,0.586-0.574h5.324C6.826,0.71,6.985,0.55,6.985,0.357S6.826,0.005,6.629,0H1.308C0.587,0,0,0.578,0,1.288
+ v2.328c-0.005,0.343,0.133,0.68,0.377,0.924c0.008,0.008,0.02,0.011,0.029,0.019C0.158,4.794,0,5.12,0,5.484v2.331
+ c0.005,0.367,0.179,0.688,0.436,0.92C0.421,8.75,0.4,8.755,0.384,8.77C0.14,9.009,0,9.341,0,9.681v2.329
+ c0,0.71,0.587,1.288,1.308,1.288h0.33c0.015,0.002,0.03,0.003,0.045,0.003c0.121,0,0.235-0.06,0.301-0.162
+ c0.079-0.118,0.079-0.272,0.001-0.389C1.908,12.633,1.766,12.575,1.646,12.59z"/>
+ <path class="st0" d="M2.729,12.611c-0.135-0.053-0.29-0.023-0.393,0.081c-0.104,0.105-0.132,0.259-0.073,0.394
+ c0.059,0.13,0.187,0.212,0.329,0.212c0.003,0,0.007,0,0.011,0c0.194-0.005,0.352-0.165,0.352-0.357
+ C2.954,12.795,2.865,12.665,2.729,12.611z"/>
+ <path class="st0" d="M5.338,12.59l-1.775,0.001c-0.14-0.015-0.28,0.041-0.355,0.158c-0.079,0.118-0.079,0.272,0,0.389
+ c0.068,0.104,0.183,0.164,0.292,0.164c0.015,0,0.031-0.001,0.046-0.004H5.33c0.14,0.018,0.272-0.045,0.346-0.159
+ c0.079-0.118,0.079-0.272,0-0.389C5.6,12.633,5.461,12.573,5.338,12.59z"/>
+ <path class="st0" d="M9.798,2.816l0.056-0.001c0.195-0.004,0.353-0.165,0.353-0.359c-0.002-0.093-0.038-0.181-0.112-0.258
+ C9.949,2.075,9.74,2.076,9.587,2.206C9.522,2.274,9.487,2.362,9.485,2.458c0,0.095,0.039,0.188,0.106,0.251
+ c0.054,0.052,0.123,0.085,0.197,0.096L9.798,2.816z"/>
+ <path class="st0" d="M8.9,2.809c0.09,0,0.177-0.034,0.248-0.095C9.219,2.646,9.258,2.55,9.252,2.477
+ c0.022-0.138-0.04-0.277-0.16-0.354c-0.119-0.076-0.272-0.076-0.391,0C8.58,2.199,8.518,2.338,8.538,2.458
+ c0,0.095,0.039,0.188,0.106,0.251c0.066,0.064,0.156,0.1,0.248,0.1C8.896,2.809,8.898,2.809,8.9,2.809z"/>
+ <path class="st0" d="M10.797,2.809c0.095,0,0.187-0.038,0.254-0.106c0.066-0.067,0.103-0.16,0.102-0.255
+ c-0.003-0.093-0.039-0.181-0.109-0.253c-0.141-0.129-0.363-0.13-0.509,0.006c-0.064,0.066-0.101,0.154-0.104,0.251
+ c0,0.095,0.037,0.185,0.108,0.257c0.068,0.063,0.157,0.099,0.25,0.1H10.797z"/>
+</g>
+</svg>
diff --git "a/src/assets/images/icons/\346\266\210\346\201\257.svg" "b/src/assets/images/icons/\346\266\210\346\201\257.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..113dbc4891040dfdac69ff5dd18375ae36a35046
--- /dev/null
+++ "b/src/assets/images/icons/\346\266\210\346\201\257.svg"
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="鍥惧眰_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 14 14" style="enable-background:new 0 0 14 14;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#1685FF;}
+</style>
+<g>
+ <path class="st0" d="M7.028,14c-0.261,0-0.508-0.108-0.692-0.3L4.69,12.01H1.892c-0.537,0-1.019-0.199-1.362-0.559
+ C0.188,11.09,0,10.581,0,10.015V2.094C0,1.52,0.188,0.992,0.529,0.609C0.878,0.215,1.363,0,1.892,0h10.22
+ c0.529,0,1.012,0.217,1.361,0.609C13.814,0.992,14,1.52,14,2.094v7.922c0,0.565-0.188,1.075-0.529,1.435
+ c-0.341,0.36-0.823,0.559-1.359,0.559H9.34l-1.616,1.686C7.536,13.892,7.289,14,7.028,14L7.028,14z M1.892,1.036
+ c-0.537,0-0.912,0.435-0.912,1.058v7.922c0,0.601,0.341,0.959,0.912,0.959h2.996c0.127,0,0.251,0.052,0.341,0.147l1.792,1.839
+ c0.002,0.002,0.004,0.004,0.006,0.004h0.002c0.002,0,0.006-0.002,0.008-0.006l1.759-1.835c0.092-0.095,0.216-0.149,0.345-0.149
+ h2.972c0.569,0,0.908-0.358,0.908-0.959V2.094c0-0.623-0.373-1.058-0.908-1.058H1.892z M1.892,1.036"/>
+ <path class="st0" d="M3.803,5.316c-0.474,0-0.861,0.406-0.861,0.909c0,0.501,0.384,0.909,0.861,0.909
+ c0.474,0,0.861-0.406,0.861-0.909C4.664,5.722,4.278,5.316,3.803,5.316L3.803,5.316z M6.868,5.316
+ c-0.474,0-0.861,0.406-0.861,0.909c0,0.501,0.384,0.909,0.861,0.909c0.475,0,0.861-0.406,0.861-0.909
+ C7.728,5.722,7.342,5.316,6.868,5.316L6.868,5.316z M6.007,6.223v0.224V6.223z M9.912,5.304c-0.474,0-0.861,0.406-0.861,0.909
+ c0,0.501,0.384,0.909,0.861,0.909c0.474,0,0.861-0.406,0.861-0.909S10.387,5.304,9.912,5.304L9.912,5.304z M9.912,5.304"/>
+</g>
+</svg>
diff --git "a/src/assets/images/icons/\347\211\251\350\201\224.svg" "b/src/assets/images/icons/\347\211\251\350\201\224.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..d47a5ffcefda1b0930130d25e89c87453da25e7f
--- /dev/null
+++ "b/src/assets/images/icons/\347\211\251\350\201\224.svg"
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="鍥惧眰_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 14 14" style="enable-background:new 0 0 14 14;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#1685FF;}
+</style>
+<g>
+ <path class="st0" d="M7,0C3.118,0,0,3.118,0,7c0,3.882,3.118,7,7,7c3.882,0,7-3.118,7-7C14,3.118,10.882,0,7,0L7,0z M10.5,1.686
+ v0.223c0,0.668-0.064,1.305-0.191,1.941C9.864,3.946,9.545,4.327,9.545,4.773c0,0.255,0.095,0.509,0.286,0.668
+ C9.609,5.95,9.386,6.459,9.068,6.936C7.891,5.6,7.064,3.914,6.777,2.036c0.732-0.445,1.527-0.795,2.355-1.018
+ C9.609,1.177,10.086,1.4,10.5,1.686L10.5,1.686z M9.164,7.955c0.573,0.541,1.177,1.018,1.845,1.4
+ c-0.668,0.127-1.368,0.191-2.1,0.191c-0.318,0-0.636-0.032-0.955-0.032c0-0.064,0-0.127-0.032-0.191
+ C8.368,8.909,8.782,8.432,9.164,7.955L9.164,7.955z M7,0.636c0.35,0,0.7,0.032,1.05,0.095C7.605,0.923,7.159,1.114,6.714,1.336
+ C6.682,1.114,6.682,0.891,6.682,0.668C6.777,0.636,6.905,0.636,7,0.636L7,0.636z M8.718,7.477c-0.35,0.477-0.732,0.891-1.145,1.305
+ C7.414,8.655,7.223,8.591,7,8.591c-0.414,0-0.764,0.255-0.891,0.636C4.836,8.909,3.627,8.432,2.545,7.764
+ c0.286-1.082,0.764-2.1,1.368-2.991c0.064,0,0.127,0.032,0.223,0.032c0.541,0,0.955-0.414,0.955-0.955
+ c0-0.127-0.032-0.255-0.064-0.382c0.382-0.382,0.764-0.7,1.177-1.018C6.555,4.359,7.445,6.077,8.718,7.477L8.718,7.477z
+ M1.591,10.341C1.018,9.386,0.668,8.305,0.636,7.127C1.018,7.446,1.4,7.764,1.814,8.018c-0.127,0.7-0.223,1.432-0.223,2.164V10.341
+ z M2.005,7.382C1.527,7.064,1.114,6.714,0.7,6.332c0.318-2.864,2.545-5.155,5.377-5.6c0,0.35,0.032,0.668,0.064,1.018
+ C5.604,2.128,5.094,2.543,4.614,2.991C4.455,2.895,4.295,2.864,4.136,2.864c-0.541,0-0.955,0.414-0.955,0.955
+ c0,0.223,0.095,0.414,0.223,0.605C2.768,5.314,2.291,6.3,2.005,7.382L2.005,7.382z M2.291,11.264
+ c-0.032-0.35-0.064-0.7-0.064-1.082c0-0.605,0.064-1.209,0.191-1.782c1.145,0.668,2.386,1.177,3.691,1.464
+ c0,0.032,0,0.032,0.032,0.064c-1.114,0.732-2.386,1.209-3.755,1.432C2.323,11.327,2.323,11.296,2.291,11.264L2.291,11.264z
+ M7,13.364c-1.559,0-2.959-0.573-4.073-1.495c1.336-0.255,2.545-0.764,3.627-1.495C6.682,10.468,6.841,10.5,7,10.5
+ c0.318,0,0.573-0.159,0.764-0.382c0.382,0.032,0.764,0.064,1.145,0.064c1.018,0,2.005-0.127,2.959-0.35
+ c0.223,0.095,0.445,0.223,0.668,0.286C11.455,12.059,9.386,13.364,7,13.364L7,13.364z M11.932,9.164
+ c-0.891-0.445-1.718-1.05-2.418-1.75c0.35-0.541,0.636-1.114,0.891-1.686H10.5c0.541,0,0.955-0.414,0.955-0.955
+ c0-0.382-0.223-0.7-0.541-0.859c0.127-0.573,0.191-1.145,0.191-1.75C12.473,3.341,13.332,5.059,13.332,7
+ c0,0.636-0.095,1.209-0.255,1.782C12.727,8.941,12.345,9.068,11.932,9.164L11.932,9.164z M11.932,9.164"/>
+</g>
+</svg>
diff --git "a/src/assets/images/icons/\347\253\231\347\202\271\351\205\215\347\275\256.svg" "b/src/assets/images/icons/\347\253\231\347\202\271\351\205\215\347\275\256.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..ef7f6515e44c426dbf35288a0ac58ddc9404af53
--- /dev/null
+++ "b/src/assets/images/icons/\347\253\231\347\202\271\351\205\215\347\275\256.svg"
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="鍥惧眰_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 14 14" style="enable-background:new 0 0 14 14;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#1685FF;}
+</style>
+<g>
+ <g>
+ <path class="st0" d="M13.925,4.661L14,4.839l-1.539,1.821c-0.15,0.179-0.15,0.464,0,0.643L14,9.054l-0.075,0.179
+ c-0.263,0.786-0.676,1.5-1.239,2.143l-0.15,0.179l-2.365-0.357c-0.225-0.036-0.488,0.107-0.563,0.321l-0.826,2.286l-0.188,0.036
+ c-1.051,0.214-2.139,0.214-3.153,0l-0.225-0.036l-0.751-2.25c-0.075-0.214-0.338-0.357-0.563-0.321l-2.44,0.357l-0.15-0.143
+ c-0.263-0.286-0.488-0.607-0.676-0.929c-0.225-0.393-0.413-0.786-0.563-1.214L0,9.125l1.576-1.786c0.15-0.179,0.15-0.464,0-0.643
+ L0,4.875l0.075-0.179c0.3-0.786,0.713-1.536,1.276-2.179l0.15-0.143l2.365,0.357c0.225,0.036,0.488-0.107,0.601-0.321l0.826-2.214
+ L5.48,0.161c1.013-0.214,2.064-0.214,3.115,0L8.82,0.196l0.751,2.143c0.075,0.214,0.338,0.393,0.563,0.357l2.402-0.286l0.15,0.143
+ c0.263,0.286,0.488,0.607,0.676,0.929C13.587,3.839,13.775,4.232,13.925,4.661L13.925,4.661z M12.686,3.804
+ c-0.15-0.25-0.3-0.464-0.488-0.679l-1.989,0.25C9.609,3.446,9.008,3.089,8.82,2.554l-0.638-1.75c-0.788-0.143-1.576-0.143-2.365,0
+ L5.142,2.625C4.954,3.161,4.316,3.518,3.716,3.411L1.802,3.125c-0.413,0.5-0.713,1.036-0.938,1.607l1.314,1.5
+ c0.375,0.429,0.375,1.107,0,1.571L0.863,9.268c0.113,0.321,0.263,0.607,0.45,0.893c0.15,0.25,0.3,0.464,0.488,0.679l2.027-0.286
+ c0.601-0.071,1.201,0.286,1.389,0.821l0.638,1.821c0.788,0.143,1.614,0.143,2.44,0l0.676-1.893
+ c0.188-0.536,0.826-0.893,1.389-0.786l1.914,0.286c0.375-0.464,0.676-1,0.901-1.571l-1.276-1.429
+ c-0.375-0.429-0.413-1.107-0.038-1.571l1.276-1.536C13.024,4.411,12.874,4.089,12.686,3.804L12.686,3.804z M7.019,9.446
+ c-1.464,0-2.627-1.107-2.627-2.5c0-1.393,1.164-2.5,2.627-2.5c1.464,0,2.627,1.107,2.627,2.5C9.646,8.339,8.483,9.446,7.019,9.446
+ L7.019,9.446z M7.019,8.732c1.051,0,1.877-0.786,1.877-1.786S8.07,5.161,7.019,5.161c-1.051,0-1.877,0.786-1.877,1.786
+ S5.968,8.732,7.019,8.732L7.019,8.732z M7.019,8.732"/>
+ </g>
+</g>
+</svg>
diff --git "a/src/assets/images/icons/\351\205\215\347\275\256\346\226\207\344\273\266\347\256\241\347\220\206.svg" "b/src/assets/images/icons/\351\205\215\347\275\256\346\226\207\344\273\266\347\256\241\347\220\206.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..d486a30bfb33b0a7011c801ac64fea79907bd08e
--- /dev/null
+++ "b/src/assets/images/icons/\351\205\215\347\275\256\346\226\207\344\273\266\347\256\241\347\220\206.svg"
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="鍥惧眰_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 14 14" style="enable-background:new 0 0 14 14;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#1685FF;}
+</style>
+<g>
+ <g>
+ <path class="st0" d="M13.491,3.216H11.47V2.964c0-0.663-0.437-1.2-0.976-1.2H4.706c-0.037,0-0.067-0.037-0.067-0.083V1.06
+ c0-0.185-0.121-0.335-0.272-0.335H3.351c-0.034,0-0.062-0.034-0.062-0.076V0.328C3.289,0.147,3.17,0,3.023,0H0.89
+ C0.398-0.001,0,0.489,0,1.093v12.199C0,13.683,0.258,14,0.576,14h10.45c0.226,0,0.424-0.171,0.488-0.42l2.464-9.613
+ C14.075,3.592,13.83,3.216,13.491,3.216L13.491,3.216z M0.675,1.509c0-0.375,0.248-0.68,0.553-0.68h1.216
+ c0.094,0,0.17,0.093,0.17,0.209v0.306c0,0.116,0.076,0.209,0.17,0.209h1.009c0.094,0,0.17,0.093,0.17,0.209v0.62
+ c0,0.116,0.076,0.209,0.17,0.209h6.36c0.165,0,0.301,0.167,0.301,0.37v0.252H3.047c-0.226,0-0.424,0.171-0.488,0.42l-1.884,7.349
+ V1.509z M13.177,4.334l-1.707,6.659l-0.557,2.176H0.845c-0.008,0-0.014-0.001-0.022-0.002l2.269-8.855
+ c0.041-0.16,0.162-0.269,0.298-0.269h9.614C13.126,4.045,13.214,4.191,13.177,4.334L13.177,4.334z M13.177,4.334"/>
+ </g>
+</g>
+</svg>
diff --git "a/src/assets/images/icons/\351\207\215\350\275\275.svg" "b/src/assets/images/icons/\351\207\215\350\275\275.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..11011d9539b683908d7b0c66e194bc5077f2373d
--- /dev/null
+++ "b/src/assets/images/icons/\351\207\215\350\275\275.svg"
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="鍥惧眰_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 14.067 14.013" style="enable-background:new 0 0 14.067 14.013;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#FFFFFF;}
+</style>
+<g>
+ <g>
+ <path class="st0" d="M13.921,8.208c0.3-1.892-0.1-3.585-1.202-5.178c-1.302-1.992-4.706-3.485-6.208-2.888
+ c0.1,0.398,0.1,0.598,0.2,0.996c3.605,0,5.908,2.589,6.108,5.278c0.3,2.589-1.202,5.278-3.404,6.075V9.9
+ c0-0.398-0.2-0.498-0.401-0.498c-0.501,0-0.701,0.199-0.501,0.797c0.2,0.996,0.1,1.992,0,2.988c0,0.498,0.3,0.498,0.901,0.498
+ h2.203c1.101,0,1.302,0.199,1.302-0.498c0-0.398-0.1-0.498-0.501-0.498h-1.001C12.72,11.593,13.621,10.1,13.921,8.208
+ L13.921,8.208z M1.005,7.013c0-2.191,1.502-4.88,3.004-5.079v2.091c0,0.498,0.1,0.498,0.501,0.498c0.501,0.1,0.601,0,0.601-0.498
+ V0.739c0-0.498-0.1-0.498-0.501-0.498H1.305c-0.401,0-0.501,0.1-0.501,0.498c0,0.498,0,0.498,0.501,0.498h1.402
+ c-3.104,2.689-3.304,6.672-1.702,9.361c1.502,2.589,4.506,3.585,6.308,3.386c-0.1-0.398-0.1-0.598-0.2-0.996
+ C3.308,13.087,1.005,9.9,1.005,7.013L1.005,7.013z"/>
+ </g>
+</g>
+</svg>
diff --git a/src/pages/platformCenter/hostmanager/IotConfig/IotConfig.jsx b/src/pages/platformCenter/hostmanager/IotConfig/IotConfig.jsx
index 79a832dc3529684a7c5aff6cd20d38fd61e4077b..77bd3be4ab2c2a8a7dc4d29a57bee5dd73c864fe 100644
--- a/src/pages/platformCenter/hostmanager/IotConfig/IotConfig.jsx
+++ b/src/pages/platformCenter/hostmanager/IotConfig/IotConfig.jsx
@@ -1,14 +1,16 @@
import React, { useEffect, useState } from 'react'
-import { Card, Form, Input, Button, Select, message } from 'antd'
+import { Card, Form, Input, Button, Select, message, Divider} from 'antd'
import styles from './IotConfig.less'
+import Internet from '../../../../assets/images/icons/鐗╄仈.svg';
+import EMQ from '../../../../assets/images/icons/EMQ.svg';
import { GetIOTPlatformVersion, GetTCPConfigInfo, PingIOTPlatform, SaveTcpAddress } from '@/services/platform/hostmanager'
const layout = {
- labelCol: { span: 8 },
- wrapperCol: { span: 16 },
+ labelCol: { span: 3 },
+ wrapperCol: { span: 21 },
};
const tailLayout = {
- wrapperCol: { offset: 8, span: 16 },
+ wrapperCol: { offset: 11, span: 13 },
};
@@ -70,7 +72,7 @@ const IotConfig = () => {
}
)
}
- const PingIot = ({ip, values}) => {
+ const PingIot = ({ ip, values }) => {
PingIOTPlatform({
ip: ip
}).then(
@@ -100,7 +102,7 @@ const IotConfig = () => {
return (
<div className={styles.iot_container}>
- <Card title={`鐗╄仈骞冲彴${currentIotVersion.data?`[${currentIotVersion.data}]`:""}`} style={{ width: "100%" }}>
+ <Card title={`鐗╄仈骞冲彴${currentIotVersion.data ? `[${currentIotVersion.data}]` : ""}`} style={{ width: "100%", height: 'calc(100vh - 130px)' }}>
<Form
{...layout}
@@ -110,16 +112,22 @@ const IotConfig = () => {
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
- <div className={styles.section}>鐗╄仈骞冲彴</div>
+ <div style={{marginTop:'10px', display: 'flex', alignItems: 'center', marginLeft:'15px' }}>
+ <img src={Internet} style={{ height: '16px' }} alt="" /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>鐗╄仈骞冲彴</span>
+ </div>
+ <Divider />
<Form.Item
label="鏈嶅姟鍣ㄥ湴鍧€(骞冲彴)"
name="IotAddress"
- rules={[{ required: true, pattern: new RegExp(/^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])$/, "g"),message: '璇疯緭鍏ユ纭殑IP渚嬪:192.168.12.231' }]}
+ rules={[{ required: true, pattern: new RegExp(/^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])$/, "g"), message: '璇疯緭鍏ユ纭殑IP渚嬪:192.168.12.231' }]}
>
- <Input />
+ <Input style={{width:'94%'}}/>
</Form.Item>
- <div className={styles.section}>EMQ</div>
+ <div style={{marginTop: '40px', display: 'flex', alignItems: 'center', marginLeft:'15px' }}>
+ <img src={EMQ} style={{ height: '16px' }} alt="" /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>EMQ</span>
+ </div>
+ <Divider />
<Form.Item
label="鏈嶅姟鍣ㄥ湴鍧€(EMQ)"
name="TcpAddress"
@@ -127,7 +135,7 @@ const IotConfig = () => {
>
- <Input />
+ <Input style={{width:'94%'}}/>
</Form.Item>
<Form.Item
name="SSLSafe"
@@ -135,7 +143,7 @@ const IotConfig = () => {
rules={[{ required: true, message: '璇烽€夋嫨鏄惁!' }]}
>
- <Select placeholder="璇烽€夋嫨鏄惁!">
+ <Select placeholder="璇烽€夋嫨鏄惁!" style={{width:'94%'}}>
<Option value="0">鏄�</Option>
<Option value="1">鍚�</Option>
</Select>
diff --git a/src/pages/platformCenter/hostmanager/baseConfig/BaseConfig.jsx b/src/pages/platformCenter/hostmanager/baseConfig/BaseConfig.jsx
index bcdb2eec169e3331fd417d8f96801c263e64dafe..d62f594f54e77b175c16220e12ac8609d46cf6b9 100644
--- a/src/pages/platformCenter/hostmanager/baseConfig/BaseConfig.jsx
+++ b/src/pages/platformCenter/hostmanager/baseConfig/BaseConfig.jsx
@@ -1,15 +1,17 @@
import React, { useState, useEffect } from 'react'
-import { Button, Descriptions, Input } from 'antd'
+import { Button, Descriptions, Input, Card, Divider, Row, Col } from 'antd'
import styles from './BaseConfig.less'
import { S_GetDataBaseConfig, GetTCPConfigInfo, GetDataBaseConfig, GetBasicInfo } from '@/services/platform/hostmanager'
-
+import { VerticalAlignBottomOutlined } from '@ant-design/icons'
+import servie from '../../../../assets/images/icons/鏈嶅姟鍣ㄧ鐞�.svg'
+import configuration from '../../../../assets/images/icons/绔欑偣閰嶇疆.svg'
const BaseConfig = () => {
- const [currentDataBase, setCurrentDataBase] = useState({userName:"",password:"",dbName:"",ip:""});
+ const [currentDataBase, setCurrentDataBase] = useState({ userName: "", password: "", dbName: "", ip: "" });
const [currentSiteInfo, setcurrentSiteInfo] = useState("");
@@ -37,61 +39,91 @@ const BaseConfig = () => {
}
)
}
- // return (
- // <div className={styles.base_container}>
- // <Card title="鏁版嵁搴撹繛鎺�" style={{ width: 300 }}>
- // <Card type="inner" title="鏈嶅姟鍣↖P" style={{ margin: 10 }}>
- // {currentDataBase.ip}
- // </Card>
- // <Card type="inner" title="鏁版嵁搴撳悕绉�" style={{ margin: 10 }}>
- // {currentDataBase.dbName}
- // </Card>
- // </Card>
- // <Card title="鏉冮檺楠岃瘉" style={{ width: 300, marginLeft: 15 }}>
- // <Card type="inner" title="鐧诲綍鍚�" style={{ margin: 10 }}>
- // {currentDataBase.userName}
- // </Card>
- // <Card type="inner" title="瀵嗙爜" style={{ margin: 10 }}>
- // {currentDataBase.password}
- // </Card>
- // </Card>
- // <Card title="绔欑偣淇℃伅" style={{ width: 300, marginLeft: 15 }}>
- // <Card type="inner" title="绔欑偣缂栧彿" style={{ margin: 10 }}>
- // {currentSiteInfo}
- // </Card>
- // </Card>
- // </div>
- // )
const encrypt = (word) => {
let encryptStr = ""
- for(let i = 0;i < word.length;i++){
+ for (let i = 0; i < word.length; i++) {
encryptStr += "*"
}
return encryptStr
}
return (
<div className={styles.base_container}>
- <div style={{ backgroundColor: "white", padding: "10px", width: "100%" }}>
- <Descriptions title="" bordered >
- <Descriptions.Item label="绔欑偣缂栧彿" span={3}>
+ <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
+ <div style={{display:'flex', alignItems:'center', marginTop:'10px'}}>
+ <img src={configuration} style={{ height: '16px'}}/><span style={{ marginLeft: '10px', fontWeight:'bold' }}>绔欑偣閰嶇疆</span>
+ </div>
+ <Divider />
+ <Row>
+ <Col span={2}>
+ <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>绔欑偣缂栧彿</span>
+ </Col>
+ <Col span={22}>
{
- currentSiteInfo?<Input value={currentSiteInfo} disabled={true} style={{with:"200px"}}/>:<div>
- <Input value={currentSiteInfo} style={{width:"200px"}} />
- <Button style={{marginLeft:"10px"}}>鐢熸垚缂栧彿</Button>
- </div>
+ currentSiteInfo ? <Input value={currentSiteInfo} disabled={true} />
+ : <div>
+ <Input value={currentSiteInfo} />
+ <Button style={{ marginLeft: "10px" }}>鐢熸垚缂栧彿</Button>
+ </div>
}
- </Descriptions.Item>
- <Descriptions.Item label="鏈嶅姟鍣↖P" span={3}>{currentDataBase.ip}</Descriptions.Item>
- <Descriptions.Item label="鏁版嵁搴撳悕绉�" span={3}>{currentDataBase.dbName}</Descriptions.Item>
- <Descriptions.Item label="鐧诲綍鍚�" span={1}>{currentDataBase.userName}</Descriptions.Item>
- <Descriptions.Item label="瀵嗙爜" span={1}>{encrypt(currentDataBase.password)}</Descriptions.Item>
-
- </Descriptions>
- </div>
+ </Col>
+ </Row>
+ <div style={{ marginTop: '50px', display:'flex', alignItems:'center'}}>
+ <img src={servie} style={{ height: '16px'}} alt="" /><span style={{ marginLeft: '10px', fontWeight:'bold' }}>鏈嶅姟鍣ㄩ摼鎺�</span>
+ </div>
+ <Divider />
+ <Row gutter={[8, 16]} >
+ <Col span={2}>
+ <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>鏈嶅姟鍣↖P</span>
+ </Col>
+ <Col span={22}>
+ <span style={{ lineHeight: '32px' }}>{currentDataBase.ip}</span>
+ </Col>
+ <Col span={2}>
+ <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>鏁版嵁搴撳悕绉�</span>
+ </Col>
+ <Col span={22}>
+ <span style={{ lineHeight: '32px' }}>{currentDataBase.dbName}</span>
+ </Col>
+ <Col span={2}>
+ <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>鐧诲綍鍚�</span>
+ </Col>
+ <Col span={22}>
+ <span style={{ lineHeight: '32px' }}>{currentDataBase.userName}</span>
+ </Col>
+ <Col span={2}>
+ <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>瀵嗙爜</span>
+ </Col>
+ <Col span={22}>
+ <span style={{ lineHeight: '32px' }}>{encrypt(currentDataBase.password)}</span>
+ </Col>
+ </Row>
+ </Card>
</div>
)
+ // return (
+ // <div className={styles.base_container}>
+ // <div style={{ backgroundColor: "white", padding: "10px", width: "100%" }}>
+ // <Descriptions title="" bordered >
+ // <Descriptions.Item label="绔欑偣缂栧彿" span={3}>
+ // {
+ // currentSiteInfo?<Input value={currentSiteInfo} disabled={true} style={{with:"200px"}}/>:<div>
+ // <Input value={currentSiteInfo} style={{width:"200px"}} />
+ // <Button style={{marginLeft:"10px"}}>鐢熸垚缂栧彿</Button>
+ // </div>
+ // }
+ // </Descriptions.Item>
+ // <Descriptions.Item label="鏈嶅姟鍣↖P" span={3}>{currentDataBase.ip}</Descriptions.Item>
+ // <Descriptions.Item label="鏁版嵁搴撳悕绉�" span={3}>{currentDataBase.dbName}</Descriptions.Item>
+ // <Descriptions.Item label="鐧诲綍鍚�" span={1}>{currentDataBase.userName}</Descriptions.Item>
+ // <Descriptions.Item label="瀵嗙爜" span={1}>{encrypt(currentDataBase.password)}</Descriptions.Item>
+
+ // </Descriptions>
+ // </div>
+ // </div>
+ // )
+
}
export default BaseConfig
diff --git a/src/pages/platformCenter/hostmanager/messageConfig/messageConfig.jsx b/src/pages/platformCenter/hostmanager/messageConfig/messageConfig.jsx
index e015693cb4849d98dfbb2d0277ca8471c3812f95..648279678178aa0c9a946d08a90f4450f5f59e38 100644
--- a/src/pages/platformCenter/hostmanager/messageConfig/messageConfig.jsx
+++ b/src/pages/platformCenter/hostmanager/messageConfig/messageConfig.jsx
@@ -1,16 +1,16 @@
import React, { useEffect, useState } from 'react'
-import { Card, Form, Input, Button, Select, message } from 'antd'
+import { Card, Form, Input, Button, Select, message, Divider } from 'antd'
import styles from './messageConfig.less';
import { GetMessageConfigInfo, SaveSystemInfo, ConnectMessPlatform, GetBasicInfo, GetDataBaseConfig } from '@/services/platform/hostmanager'
-
+import message11 from '../../../../assets/images/icons/娑堟伅.svg'
const layout = {
- labelCol: { span: 8 },
- wrapperCol: { span: 16 },
+ labelCol: { span: 3 },
+ wrapperCol: { span: 21 },
};
const tailLayout = {
- wrapperCol: { offset: 8, span: 16 },
+ wrapperCol: { offset: 11, span: 13 },
};
const MessageConfig = () => {
@@ -93,8 +93,7 @@ const MessageConfig = () => {
return (
<div className={styles.message_container}>
- <Card title={`娑堟伅骞冲彴`} style={{ width: "100%" }}>
-
+ <Card style={{ width: "100%", height: 'calc(100vh - 130px)' }}>
<Form
{...layout}
form={form}
@@ -103,13 +102,17 @@ const MessageConfig = () => {
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
+ <div style={{marginTop:'10px', display: 'flex', alignItems: 'center', marginLeft:'15px' }}>
+ <img src={message11} style={{ height: '16px' }} alt="" /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>娑堟伅骞冲彴</span>
+ </div>
+ <Divider />
<Form.Item
label="鏈嶅姟鍣ㄥ湴鍧€(骞冲彴)"
name="messageAddress"
rules={[{ required: true, message: '璇疯緭鍏ュ煙鍚�(IP):绔彛,渚嬪:192.168.19.102:8131' }]}
>
- <Input />
+ <Input style={{width:'94%'}}/>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit" disabled={currentSiteInfo.length > 0 ? false : true}>
diff --git a/src/pages/platformCenter/hostmanager/proxyConfig/ProxyConfig.jsx b/src/pages/platformCenter/hostmanager/proxyConfig/ProxyConfig.jsx
index b8b5c5cf10048d9c3411c61aee567c7eee4b899f..d092cb1d98b654d787bf774fbf0aa135a7a7c030 100644
--- a/src/pages/platformCenter/hostmanager/proxyConfig/ProxyConfig.jsx
+++ b/src/pages/platformCenter/hostmanager/proxyConfig/ProxyConfig.jsx
@@ -1,21 +1,22 @@
import React, { useEffect, useState } from 'react'
-import { Card, Form, Input, Button, Switch, message } from 'antd'
+import { Card, Form, Input, Button, Switch, message, Divider, Row, Col } from 'antd'
import styles from './ProxyConfig.less'
import { GetNginxConfigInfo, InsertNginxConfig, StartNginx, StopNginx, ReloadNginx, NginxCache, NginxLog } from '@/services/platform/hostmanager'
import { ReloadOutlined } from '@ant-design/icons';
+import configuration from '../../../../assets/images/icons/娑堟伅.svg'
const layout = {
- labelCol: { span: 8 },
- wrapperCol: { span: 16 },
+ labelCol: { span: 2 },
+ wrapperCol: { span: 22 },
};
const tailLayout = {
- wrapperCol: { offset: 8, span: 16 },
+ wrapperCol: { offset: 11, span: 13 },
};
const ProxyConfig = () => {
-
+
const [form] = Form.useForm();
@@ -178,7 +179,7 @@ const ProxyConfig = () => {
return (
<div className={styles.proxy_container}>
- <Card title="閰嶇疆鏂囦欢绠＄悊" style={{ width: '45%' }}>
+ <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
<Form
{...layout}
form={form}
@@ -187,13 +188,17 @@ const ProxyConfig = () => {
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
+ <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
+ <img src={configuration} style={{ height: '16px' }} /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>閰嶇疆鏂囦欢绠＄悊</span>
+ </div>
+ <Divider />
<Form.Item
label="绔彛(ngnix)"
name="NginxPort"
- rules={[{ required: true,pattern: new RegExp(/^[1-9]\d*$/,'g'), message: '璇疯緭鍏gnix绔彛,渚嬪:8091' }]}
+ rules={[{ required: true, pattern: new RegExp(/^[1-9]\d*$/, 'g'), message: '璇疯緭鍏gnix绔彛,渚嬪:8091' }]}
>
- <Input />
+ <Input style={{marginLeft:'30px', width:'98%'}}/>
</Form.Item>
<Form.Item
@@ -202,7 +207,7 @@ const ProxyConfig = () => {
rules={[{ required: true, message: '璇疯緭鍏ユ湇鍔″櫒鍦板潃!' }]}
hasFeedback
>
- <Input />
+ <Input style={{marginLeft:'30px', width:'98%'}}/>
</Form.Item>
<Form.Item
label="鍦板潃(EMQ)"
@@ -211,7 +216,7 @@ const ProxyConfig = () => {
rules={[{ required: true, message: '璇烽€夋嫨鏄惁!' }]}
>
- <Input />
+ <Input style={{marginLeft:'30px', width:'98%'}}/>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit" disabled={currentConfig.NginxPort.length > 0 ? 0 : 1}>
@@ -219,27 +224,37 @@ const ProxyConfig = () => {
</Button>
</Form.Item>
</Form>
-
- </Card>
- <Card title="鏈嶅姟鍣ㄧ鐞�" style={{ width: "45%", marginLeft: 15 }}>
+ <div style={{ display: 'flex', alignItems: 'center', marginTop: '40px' }}>
+ <img src={configuration} style={{ height: '16px' }} /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>鏈嶅姟鍣ㄧ鐞�</span>
+ </div>
+ <Divider />
<div className={styles.operate_container}>
- <div className={styles.operate_item}>
- <div>鏈嶅姟鍣ㄨ繍琛�</div>
- <Switch checkedChildren='寮€鍚�' unCheckedChildren='鍏抽棴' checked={currentConfig.IsStartNginx} onChange={OperateNginx} />
- </div>
- <div className={styles.operate_item}>
- <div>鏈嶅姟鍣ㄦ棩蹇�</div>
- <Switch checkedChildren='寮€鍚�' unCheckedChildren='鍏抽棴' checked={currentConfig.IsStartNginxLog} onChange={OperateNginxLog} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}/>
- </div>
- <div className={styles.operate_item}>
- <div>鏈嶅姟鍣ㄧ紦瀛�</div>
- <Switch checkedChildren='寮€鍚�' unCheckedChildren='鍏抽棴' checked={currentConfig.IsStartNginxCache} onChange={OperateNginxCache} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}/>
- </div>
- <div className={styles.operate_item}>
- <div>鏈嶅姟鍣ㄩ噸杞�</div>
- <Button type="primary" icon={<ReloadOutlined />} onClick={OperateReloadNginx} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}>閲嶈浇</Button>
- </div>
-
+ <Row gutter={[20, 25]} style={{display:'flex', alignItems:'center'}}>
+ <Col span={2}>
+ <div style={{display:'flex', justifyContent:'flex-end'}}>鏈嶅姟鍣ㄨ繍琛�</div>
+ </Col>
+ <Col span={22}>
+ <Switch checkedChildren='寮€鍚�' unCheckedChildren='鍏抽棴' checked={currentConfig.IsStartNginx} onChange={OperateNginx} style={{marginLeft:'25px'}}/>
+ </Col>
+ <Col span={2}>
+ <div style={{display:'flex', justifyContent:'flex-end'}}>鏈嶅姟鍣ㄦ棩蹇�</div>
+ </Col>
+ <Col span={22}>
+ <Switch checkedChildren='寮€鍚�' unCheckedChildren='鍏抽棴' checked={currentConfig.IsStartNginxLog} onChange={OperateNginxLog} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1} style={{marginLeft:'25px'}}/>
+ </Col>
+ <Col span={2}>
+ <div style={{display:'flex', justifyContent:'flex-end'}}>鏈嶅姟鍣ㄧ紦瀛�</div>
+ </Col>
+ <Col span={22}>
+ <Switch checkedChildren='寮€鍚�' unCheckedChildren='鍏抽棴' checked={currentConfig.IsStartNginxCache} onChange={OperateNginxCache} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1} style={{marginLeft:'25px'}}/>
+ </Col>
+ <Col span={2}>
+ <div style={{display:'flex', justifyContent:'flex-end'}}>鏈嶅姟鍣ㄩ噸杞�</div>
+ </Col>
+ <Col span={22}>
+ <Button type="primary" icon={<ReloadOutlined />} onClick={OperateReloadNginx} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1} style={{marginLeft:'25px'}}>閲嶈浇</Button>
+ </Col>
+ </Row>
</div>
</Card>
</div>
diff --git a/src/pages/platformCenter/hostmanager/proxyConfig/ProxyConfig.less b/src/pages/platformCenter/hostmanager/proxyConfig/ProxyConfig.less
index 9014e20fd18f308aea45126fb332c024c0dc902e..4f290f2674b46a5a7f428d01e9524980cecd3c0f 100644
--- a/src/pages/platformCenter/hostmanager/proxyConfig/ProxyConfig.less
+++ b/src/pages/platformCenter/hostmanager/proxyConfig/ProxyConfig.less
@@ -13,12 +13,10 @@
.operate_item{
display: flex;
flex-direction: row;
- justify-content: space-between;
+ justify-content:flex-start;
align-items: center;
height: 50px;
- border-width: 1px;
- border-color: #EEEEEE;
- border-bottom-style: solid;
+ margin-left:25px;
}
}
}
\ No newline at end of file