diff --git a/src/App.vue b/src/App.vue
index 0c3bf13..d2c1397 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,4 +7,5 @@ import { RouterLink, RouterView } from 'vue-router'
 </template>
 
 <style scoped>
+
 </style>
diff --git a/src/assets/img/Rectangle 27@1x.png b/src/assets/img/Rectangle 27@1x.png
new file mode 100644
index 0000000..1ee5649
Binary files /dev/null and b/src/assets/img/Rectangle 27@1x.png differ
diff --git a/src/assets/img/Rectangle 28@1x.png b/src/assets/img/Rectangle 28@1x.png
new file mode 100644
index 0000000..8658ed5
Binary files /dev/null and b/src/assets/img/Rectangle 28@1x.png differ
diff --git a/src/assets/img/header_left_bg.png b/src/assets/img/header_left_bg.png
index 1936625..680f7a1 100644
Binary files a/src/assets/img/header_left_bg.png and b/src/assets/img/header_left_bg.png differ
diff --git a/src/assets/img/header_left_bg——.png b/src/assets/img/header_left_bg——.png
new file mode 100644
index 0000000..1936625
Binary files /dev/null and b/src/assets/img/header_left_bg——.png differ
diff --git a/src/assets/img/image@1x.png b/src/assets/img/image@1x.png
new file mode 100644
index 0000000..39941ab
Binary files /dev/null and b/src/assets/img/image@1x.png differ
diff --git a/src/assets/img/zf_event_list_icon.svg b/src/assets/img/zf_event_list_icon.svg
new file mode 100644
index 0000000..d49402c
--- /dev/null
+++ b/src/assets/img/zf_event_list_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_61_01517"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_01517)"><g><path d="M11.66661298828125,3.3336621875C11.66661298828125,3.9505621875,11.33151298828125,4.4891821875,10.83331298828125,4.7773521875L10.83331298828125,6.6669921875L14.58331298828125,6.6669921875Q15.61881298828125,6.6669921875,16.35111298828125,7.3992221875Q17.08331298828125,8.1314621875,17.08331298828125,9.1669921875L17.08331298828125,15.8336921875Q17.08331298828125,16.869192187499998,16.35111298828125,17.6013921875Q15.61881298828125,18.3336921875,14.58331298828125,18.3336921875L5.41664298828125,18.3336921875Q4.3811129882812505,18.3336921875,3.64888298828125,17.6013921875Q2.91664298828125,16.869192187499998,2.91664298828125,15.8336921875L2.91664298828125,9.1669921875Q2.91664298828125,8.1314621875,3.64888298828125,7.3992221875Q4.3811129882812505,6.6669921875,5.41664298828125,6.6669921875L9.16664298828125,6.6669921875L9.16664298828125,4.7773521875C8.66848298828125,4.4891821875,8.33331298828125,3.9505621875,8.33331298828125,3.3336621875C8.33331298828125,2.4131841874999997,9.07950298828125,1.6669921875,9.99998298828125,1.6669921875C10.92041298828125,1.6669921875,11.66661298828125,2.4131841874999997,11.66661298828125,3.3336621875ZM7.08364298828125,11.6666621875Q7.16571298828125,11.6666621875,7.24621298828125,11.6506521875Q7.32671298828125,11.6346421875,7.40254298828125,11.6032321875Q7.47837298828125,11.5718221875,7.54661298828125,11.5262221875Q7.61485298828125,11.4806221875,7.67289298828125,11.4225921875Q7.73093298828125,11.3645521875,7.77653298828125,11.2963121875Q7.82213298828125,11.2280621875,7.85353298828125,11.1522321875Q7.88494298828125,11.0764021875,7.90096298828125,10.9959121875Q7.91697298828125,10.9154121875,7.91697298828125,10.8333321875Q7.91697298828125,10.7512521875,7.90096298828125,10.6707621875Q7.88494298828125,10.5902621875,7.85353298828125,10.5144321875Q7.82213298828125,10.4386021875,7.77653298828125,10.3703521875Q7.73093298828125,10.3021121875,7.67289298828125,10.2440721875Q7.61485298828125,10.1860421875,7.54661298828125,10.1404421875Q7.47837298828125,10.0948421875,7.40254298828125,10.0634321875Q7.32671298828125,10.0320221875,7.24621298828125,10.0160121875Q7.16571298828125,10.0000021875,7.08364298828125,10.0000021875Q7.00156298828125,10.0000021875,6.92106298828125,10.0160121875Q6.84056298828125,10.0320221875,6.76473298828125,10.0634321875Q6.68890298828125,10.0948421875,6.62066298828125,10.1404421875Q6.55242298828125,10.1860421875,6.49438298828125,10.2440721875Q6.43634298828125,10.3021121875,6.39074298828125,10.3703621875Q6.34514298828125,10.4386021875,6.31373298828125,10.5144321875Q6.28233298828125,10.5902621875,6.26631298828125,10.6707621875Q6.25030298828125,10.7512521875,6.25030298828125,10.8333321875Q6.25030298828125,10.9154121875,6.26631298828125,10.9959021875Q6.28233298828125,11.0764021875,6.31373298828125,11.1522321875Q6.34514298828125,11.2280621875,6.39074298828125,11.2963121875Q6.43634298828125,11.3645521875,6.49438298828125,11.4225921875Q6.55242298828125,11.4806221875,6.62066298828125,11.5262221875Q6.68890298828125,11.5718221875,6.76473298828125,11.6032321875Q6.84056298828125,11.6346421875,6.92106298828125,11.6506521875Q7.00156298828125,11.6666621875,7.08364298828125,11.6666621875ZM13.75001298828125,10.8333321875Q13.75001298828125,10.9154121875,13.73401298828125,10.9959021875Q13.71791298828125,11.0764021875,13.68651298828125,11.1522321875Q13.65511298828125,11.2280621875,13.60951298828125,11.2963121875Q13.56391298828125,11.3645521875,13.50591298828125,11.4225921875Q13.44791298828125,11.4806221875,13.37961298828125,11.5262221875Q13.31141298828125,11.5718221875,13.23551298828125,11.6032321875Q13.15971298828125,11.6346421875,13.07921298828125,11.6506521875Q12.99871298828125,11.6666621875,12.91661298828125,11.6666621875Q12.83461298828125,11.6666621875,12.75411298828125,11.6506521875Q12.67361298828125,11.6346421875,12.59771298828125,11.6032321875Q12.52191298828125,11.5718221875,12.45371298828125,11.5262221875Q12.38541298828125,11.4806221875,12.32741298828125,11.4225921875Q12.26931298828125,11.3645521875,12.22371298828125,11.2963121875Q12.17811298828125,11.2280621875,12.14671298828125,11.1522321875Q12.11531298828125,11.0764021875,12.09931298828125,10.9959121875Q12.08331298828125,10.9154121875,12.08331298828125,10.8333321875Q12.08331298828125,10.7512521875,12.09931298828125,10.6707621875Q12.11531298828125,10.5902621875,12.14671298828125,10.5144321875Q12.17811298828125,10.4386021875,12.22371298828125,10.3703521875Q12.26931298828125,10.3021121875,12.32741298828125,10.2440721875Q12.38541298828125,10.1860421875,12.45371298828125,10.1404421875Q12.52191298828125,10.0948421875,12.59771298828125,10.0634321875Q12.67361298828125,10.0320221875,12.75411298828125,10.0160121875Q12.83461298828125,10.0000021875,12.91661298828125,10.0000021875Q12.99871298828125,10.0000021875,13.07921298828125,10.0160121875Q13.15971298828125,10.0320221875,13.23551298828125,10.0634321875Q13.31141298828125,10.0948421875,13.37961298828125,10.1404421875Q13.44791298828125,10.1860421875,13.50591298828125,10.2440721875Q13.56391298828125,10.3021121875,13.60951298828125,10.3703621875Q13.65511298828125,10.4386021875,13.68651298828125,10.5144321875Q13.71791298828125,10.5902621875,13.73401298828125,10.6707621875Q13.75001298828125,10.7512521875,13.75001298828125,10.8333321875ZM1.66664598828125,10.0003221875C1.2064089882812499,10.0003221875,0.83331298828125,10.3734221875,0.83331298828125,10.8336621875L0.83331298828125,14.1669921875C0.83331298828125,14.6271921875,1.2064089882812499,15.0002921875,1.66664598828125,15.0002921875C2.12688298828125,15.0002921875,2.49998298828125,14.6271921875,2.49998298828125,14.1669921875L2.49998298828125,10.8336621875C2.49998298828125,10.3734221875,2.12688298828125,10.0003221875,1.66664598828125,10.0003221875ZM18.33331298828125,10.0003221875C17.87311298828125,10.0003221875,17.50001298828125,10.3734221875,17.50001298828125,10.8336621875L17.50001298828125,14.1669921875C17.50001298828125,14.6271921875,17.87311298828125,15.0002921875,18.33331298828125,15.0002921875C18.79351298828125,15.0002921875,19.16661298828125,14.6271921875,19.16661298828125,14.1669921875L19.16661298828125,10.8336621875C19.16661298828125,10.3734221875,18.79351298828125,10.0003221875,18.33331298828125,10.0003221875ZM8.33364298828125,14.9996921875C7.87339298828125,14.9996921875,7.50030298828125,14.6265921875,7.50030298828125,14.1662921875C7.50030298828125,13.7060921875,7.87339298828125,13.3329921875,8.33364298828125,13.3329921875L11.66701298828125,13.3329921875C12.12721298828125,13.3329921875,12.50031298828125,13.7060921875,12.50031298828125,14.1662921875C12.50031298828125,14.6265921875,12.12721298828125,14.9996921875,11.66701298828125,14.9996921875L8.33364298828125,14.9996921875Z" fill-rule="evenodd" fill="#07B0EB" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_position_full_icon.svg b/src/assets/img/zf_position_full_icon.svg
new file mode 100644
index 0000000..f291ad0
--- /dev/null
+++ b/src/assets/img/zf_position_full_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><g><g></g><g><path d="M7.4999559765625,1.6669921875L7.4999559765625,3.3336621875L4.1666259765625,3.3336621875C3.7392659765625,3.3336621875,3.3870359765625,3.6553621874999997,3.3388959765625,4.0698121875L3.3332959765625,4.1669921875L3.3332959765625,7.5003221875L1.6666259765625,7.5003221875L1.6666259765625,4.1669921875C1.6666259765625,2.7862821875,2.7859159765625,1.6669921875,4.1666259765625,1.6669921875L7.4999559765625,1.6669921875ZM15.8329259765625,1.6669921875C17.2137259765625,1.6669921875,18.3329259765625,2.7862821875,18.3329259765625,4.1669921875L18.3329259765625,7.5003221875L16.6663259765625,7.5003221875L16.6663259765625,4.1669921875C16.6663259765625,3.7396321875,16.3446259765625,3.3874021875,15.9301259765625,3.3392621875L15.8329259765625,3.3336621875L12.4996259765625,3.3336621875L12.4996259765625,1.6669921875L15.8329259765625,1.6669921875ZM3.3332959765625,12.4999921875L3.3332959765625,15.8332921875C3.3332959765625,16.2606921875,3.6549959765624997,16.6128921875,4.0694459765625,16.6610921875L4.1666259765625,16.6666921875L7.4999559765625,16.6666921875L7.4999559765625,18.3332921875L4.1666259765625,18.3332921875C2.7859159765625,18.3332921875,1.6666259765625,17.2140921875,1.6666259765625,15.8332921875L1.6666259765625,12.4999921875L3.3332959765625,12.4999921875ZM18.3329259765625,12.4999921875L18.3329259765625,15.8332921875C18.3329259765625,17.2140921875,17.2137259765625,18.3332921875,15.8329259765625,18.3332921875L12.4996259765625,18.3332921875L12.4996259765625,16.6666921875L15.8329259765625,16.6666921875C16.2603259765625,16.6666921875,16.6125259765625,16.3449921875,16.6607259765625,15.9304921875L16.6663259765625,15.8332921875L16.6663259765625,12.4999921875L18.3329259765625,12.4999921875Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="0.6399999856948853"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_position_title_icon.svg b/src/assets/img/zf_position_title_icon.svg
new file mode 100644
index 0000000..a89266f
--- /dev/null
+++ b/src/assets/img/zf_position_title_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_61_01933"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath><filter id="master_svg1_61_01934" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1" height="1"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="0" dx="0"/><feGaussianBlur stdDeviation="5"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.30000001192092896 0 0 0 0 1 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/></filter></defs><g clip-path="url(#master_svg0_61_01933)"><g filter="url(#master_svg1_61_01934)"><path d="M0.833343505859375,4.1663408125L0.833343505859375,16.6663078125C0.833343505859375,17.126607812499998,1.2064395058593749,17.4997078125,1.666676505859375,17.4997078125L18.333343505859375,17.4997078125C18.793543505859375,17.4997078125,19.166643505859376,17.126607812499998,19.166643505859376,16.6663078125L19.166643505859376,4.1663408125C19.166643505859376,3.7061038125,18.793543505859375,3.3330078125,18.333343505859375,3.3330078125L1.666676505859375,3.3330078125C1.2064395058593749,3.3330078125,0.833343505859375,3.7061038125,0.833343505859375,4.1663408125ZM10.657803505859375,7.1779578125C10.771573505859376,7.0316778125,10.833343505859375,6.8516578125,10.833343505859375,6.6663378125C10.833343505859375,6.2061078125,10.460243505859374,5.8330078125,10.000013505859375,5.8330078125C9.742853505859374,5.8330078125,9.500093505859375,5.951737812499999,9.342213505859375,6.1547278125L7.865433505859375,8.0534378125L4.617303505859375,5.965357812500001C4.482893505859375,5.8789478125,4.326473505859375,5.8330078125,4.166673505859375,5.8330078125C3.706443505859375,5.8330078125,3.333343505859375,6.2061078125,3.333343505859375,6.6663378125C3.333343505859375,6.9498978125,3.477523505859375,7.2139878125,3.716043505859375,7.3673278125L6.838073505859375,9.3743378125L3.508883505859375,13.6547078125C3.395113505859375,13.8010078125,3.333343505859375,13.9810078125,3.333343505859375,14.1663078125C3.333343505859375,14.6266078125,3.706443505859375,14.9997078125,4.166673505859375,14.9997078125C4.423833505859375,14.9997078125,4.666593505859375,14.8809078125,4.824473505859375,14.6780078125L8.245693505859375,10.2792378125L10.885643505859376,11.9763278125L9.329133505859375,14.0887078125C9.223603505859375,14.2319078125,9.166673505859375,14.4051078125,9.166673505859375,14.5830078125C9.166673505859375,15.0432078125,9.539773505859374,15.4163078125,10.000013505859375,15.4163078125C10.264793505859375,15.4163078125,10.513823505859374,15.2905078125,10.671193505859375,15.0769078125L12.290443505859376,12.8794178125L15.382743505859375,14.8673078125C15.517143505859375,14.9537078125,15.673543505859374,14.9997078125,15.833343505859375,14.9997078125C16.293543505859375,14.9997078125,16.666643505859376,14.6266078125,16.666643505859376,14.1663078125C16.666643505859376,13.8828078125,16.522543505859375,13.6187078125,16.283543505859377,13.4651078125L13.281043505859374,11.5349278125L16.504243505859375,7.1606778124999995C16.609743505859377,7.0174578125,16.666643505859376,6.844237812499999,16.666643505859376,6.6663378125C16.666643505859376,6.2061078125,16.293543505859375,5.8330078125,15.833343505859375,5.8330078125C15.568543505859376,5.8330078125,15.319543505859375,5.9588378125000006,15.162443505859375,6.1720078125L11.876243505859374,10.631837812499999L9.273063505859374,8.9583378125L10.657803505859375,7.1779578125Z" fill-rule="evenodd" fill="#09C5E7" fill-opacity="1"/><path d="M19.166643505859376,16.4997078125L0.833343505859375,16.4997078125L0.833343505859375,16.6663078125C0.833343505859375,17.126607812499998,1.2064395058593749,17.4997078125,1.666676505859375,17.4997078125L18.333343505859375,17.4997078125C18.793543505859375,17.4997078125,19.166643505859376,17.126607812499998,19.166643505859376,16.6663078125L19.166643505859376,16.4997078125Z" fill-rule="evenodd" fill="#47CBFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_aircraft_icon.svg b/src/assets/img/zf_task_controller_aircraft_icon.svg
new file mode 100644
index 0000000..f44298f
--- /dev/null
+++ b/src/assets/img/zf_task_controller_aircraft_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02488"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02488)"><g><path d="M1.124920859375,12.99981171875L14.874955859375,12.99981171875C15.220055859375,12.99981171875,15.499955859375,13.27961171875,15.499955859375,13.62481171875C15.499955859375,13.96991171875,15.220055859375,14.24981171875,14.874955859375,14.24981171875L1.124920859375,14.24981171875C0.7797418593750001,14.24981171875,0.499920308375,13.96991171875,0.499920308375,13.62481171875C0.499920308375,13.27961171875,0.7797418593750001,12.99981171875,1.124920859375,12.99981171875ZM15.428055859375,5.4241417187500005C15.584255859375,5.67726171875,15.473655859375,6.02570171875,15.208655859375,6.11289171875L3.997735859375,9.81445171875C3.542425859375,9.96414171875,3.048045859375,9.83039171875,2.710545859375,9.466641718750001L0.590857859375,7.19664171875C0.403357759375,6.99570171875,0.523670359375,6.64351171875,0.784294859375,6.63101171875L1.1224198593749999,6.61445171875C1.301022859375,6.60620171875,1.478241859375,6.64937171875,1.633045859375,6.73883171875L3.008045859375,7.52632171875C3.295045859375,7.69306171875,3.642695859375,7.71886171875,3.951165859375,7.59633171875L6.198675859375,6.70695171875L3.421795859375,2.72788971875C3.223045859375,2.38320171875,3.368665859375,1.92101471875,3.720235859375,1.79382681875C3.906485859375,1.72695181875,4.138045859375,1.72382671875,4.413355859375001,1.86851471875C5.098355859375,2.22851471875,7.916175859375,4.55070171875,8.760235859375,5.25039171875C8.916175859375,5.38007171875,9.105545859375,5.453511718750001,9.301795859375,5.4603917187499995L9.343665859375,5.46164171875L12.440555859375,4.235701718750001C12.773255859375,4.10208171875,13.136155859375,4.0620917187500005,13.489955859375,4.12008171875C14.060255859375,4.21507171875,14.868655859375,4.516951718750001,15.428355859375,5.42383171875L15.428055859375,5.4241417187500005Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_altitude_icon.svg b/src/assets/img/zf_task_controller_altitude_icon.svg
new file mode 100644
index 0000000..6c06157
--- /dev/null
+++ b/src/assets/img/zf_task_controller_altitude_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02537"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02537)"><g><path d="M12.7499896484375,11.00006C12.9394896484375,11.00007,13.1125896484375,11.10712,13.1972896484375,11.27656L14.4472896484375,13.7766C14.6133896484375,14.109,14.3716896484375,14.5001,13.9999896484375,14.5001L2.0000176484375,14.5001C1.6283856484374999,14.5001,1.3866476484375,14.109,1.5527676484375,13.7766L2.8027696484374998,11.27656C2.8874496484375003,11.10711,3.0606096484375,11.00006,3.2500196484375,11.00006L12.7499896484375,11.00006ZM10.7500196484375,7.00006C10.9394396484375,7.00007,11.1125996484375,7.10712,11.1972696484375,7.27656L12.4472896484375,9.77656C12.6133896484375,10.10901,12.3716896484375,10.50006,11.9999896484375,10.50006L4.0000196484375,10.50006C3.6283896484375,10.50005,3.3866496484375,10.109,3.5527696484375,9.77656L4.802769648437501,7.27656C4.887449648437499,7.10711,5.0606096484375005,7.00006,5.2500196484375,7.00006L10.7500196484375,7.00006ZM7.5527696484375,1.776562C7.7370196484375,1.4078125,8.2627696484375,1.4078125,8.4472696484375,1.776562L10.4472696484375,5.77656C10.6133796484375,6.10901,10.3716396484375,6.50006,10.0000196484375,6.50006L6.0000196484375,6.50006C5.6283896484375,6.50005,5.3866496484374995,6.109,5.5527696484375,5.77656L7.5527696484375,1.776562Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_back_icon.svg b/src/assets/img/zf_task_controller_back_icon.svg
new file mode 100644
index 0000000..5b18727
--- /dev/null
+++ b/src/assets/img/zf_task_controller_back_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_61_01544"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_01544)"><g><path d="M11.249637890625,4.99897375Q11.249637890625,3.86137375,11.881637890625,2.91557375Q12.513637890625,1.9697217500000002,13.564537890625,1.53442575Q14.615537890625,1.09909875,15.731137890625,1.32103395Q16.846937890625,1.54295575,17.651237890625,2.3473437500000003Q18.455637890625,3.15168375,18.677537890625,4.26740375Q18.899437890625,5.38306375,18.464137890625,6.43403375Q18.028737890625,7.48498375,17.083037890625,8.11697375Q16.137137890625,8.748973750000001,14.999637890625,8.748973750000001C14.539337890625,8.748973750000001,14.166237890625,8.37587375,14.166237890625,7.91564375C14.166237890625,7.69462375,14.254037890625,7.48266375,14.410337890625,7.32638375C14.566637890625,7.17010375,14.778537890625,7.08230375,14.999637890625,7.08230375Q15.631837890625,7.08211375,16.157037890625,6.73122375Q16.682437890625,6.38008375,16.924337890625,5.79624375Q17.166237890625,5.212373749999999,17.042937890624998,4.59254375Q16.919637890624998,3.97271375,16.472737890624998,3.52581375Q16.025837890625,3.0789637499999998,15.406037890625,2.95567375Q14.786237890625,2.83237375,14.202337890625,3.0742337500000003Q13.618537890625,3.31605375,13.267337890625,3.84155375Q12.916237890625,4.36697375,12.916237890625,4.99897375C12.916237890625,5.45921375,12.543137890625,5.83230375,12.082937890625,5.83230375C11.622737890625,5.83230375,11.249637890625,5.45921375,11.249637890625,4.99897375ZM6.731457890625,3.84155375Q7.082357890625,4.36668375,7.082557890625,4.99897375C7.082557890625,5.21998375,7.170347890625,5.43195375,7.326627890625,5.58823375C7.482907890625,5.74451375,7.694867890625,5.83230375,7.915887890625,5.83230375C8.376127890625,5.83230375,8.749217890625001,5.45921375,8.749217890625001,4.99897375Q8.749217890625001,3.86137375,8.117227890625,2.91557375Q7.485207890625,1.9697227499999999,6.434287890625,1.53442575Q5.383307890625,1.09909875,4.267637890625,1.32103385Q3.1519378906249997,1.5429487499999999,2.347567890625,2.3473337499999998Q1.543193890625,3.1516937499999997,1.3212757906250001,4.26740375Q1.099343890625,5.38306375,1.534673890625,6.43404375Q1.9699688906250001,7.48495375,2.915817890625,8.11698375Q3.861627890625,8.748973750000001,4.999217890625,8.748973750000001C5.459457890625,8.748973750000001,5.832547890625,8.37587375,5.832547890625,7.91564375C5.832547890625,7.45540375,5.459457890625,7.08230375,4.998527890625001,7.08230375Q4.366927890625,7.08211375,3.841797890625,6.73121375Q3.316307890625,6.38008375,3.0744778906250003,5.79623375Q2.832627890625,5.21236375,2.955917890625,4.59254375Q3.0792078906249998,3.97270375,3.526087890625,3.52583375Q3.972957890625,3.0789637499999998,4.592807890625,2.95567375Q5.212607890625,2.83237375,5.796487890625,3.0742337500000003Q6.380327890625,3.31605375,6.731457890625,3.84155375ZM15.588837890625,5.58860375C15.745137890625,5.43232375,15.832937890625,5.220363750000001,15.832937890625,4.99935375C15.832937890625,4.53911375,15.459837890625,4.166013749999999,14.999637890625,4.166013749999999C14.778537890625,4.166013749999999,14.566637890625,4.25381375,14.409937890625,4.41045375L11.737737890625,7.08268375L8.261437890625,7.08268375L5.588847890625,4.41009375C5.432567890625,4.25381375,5.220607890625001,4.166013749999999,4.999597890625,4.166013749999999C4.539357890625,4.166013749999999,4.166257890624999,4.53911375,4.166257890624999,4.99935375C4.166257890624999,5.220363750000001,4.254057890625,5.43232375,4.410337890625,5.58860375L7.082927890625,8.26119375L7.082927890625,11.73749375L4.410337890625,14.41009375C4.254057890625,14.56639375,4.166257890624999,14.77829375,4.166257890624999,14.99939375C4.166257890624999,15.45959375,4.539357890625,15.83269375,4.999597890625,15.83269375C5.220607890625001,15.83269375,5.432567890625,15.74489375,5.588847890625,15.58859375L8.261437890625,12.91599375L11.737737890625,12.91599375L14.409537890625,15.58779375C14.566637890625,15.74489375,14.778537890625,15.83269375,14.999637890625,15.83269375C15.459837890625,15.83269375,15.832937890625,15.45959375,15.832937890625,14.99939375C15.832937890625,14.77829375,15.745137890625,14.56639375,15.588837890625,14.41009375L12.916237890625,11.73749375L12.916237890625,8.26119375L15.588837890625,5.58860375ZM8.749217890625001,14.99939375Q8.749217890625001,16.13689375,8.117237890624999,17.08269375Q7.485227890625,18.02849375,6.434327890625,18.46389375Q5.383307890625,18.89919375,4.267637890625,18.67729375Q3.151927890625,18.45539375,2.347557890625,17.65099375Q1.543201890625,16.84669375,1.3212757906250001,15.73089375Q1.099343890625,14.61529375,1.534673890625,13.56429375Q1.969967890625,12.51339375,2.915817890625,11.88129375Q3.861627890625,11.24939375,4.999217890625,11.24939375C5.459457890625,11.24939375,5.832547890625,11.62249375,5.832547890625,12.08269375C5.832547890625,12.30369375,5.744757890625,12.51569375,5.588477890625,12.67189375C5.432197890625,12.82819375,5.220237890625,12.91599375,4.999217890625,12.91599375Q4.367217890625,12.91599375,3.841797890625,13.26709375Q3.316307890625,13.61829375,3.0744778906250003,14.20209375Q2.832627890625,14.78599375,2.955917890625,15.40579375Q3.0792078906249998,16.02559375,3.526097890625,16.472493749999998Q3.972957890625,16.919393749999998,4.592807890625,17.042693749999998Q5.212617890624999,17.16599375,5.796437890625,16.92409375Q6.380327890625,16.68229375,6.731447890625,16.15679375Q7.082557890625,15.63129375,7.082557890625,14.99939375C7.082557890625,14.53909375,7.455647890625,14.16599375,7.915887890625,14.16599375C8.136897890625,14.16599375,8.348857890625,14.25379375,8.505137890625,14.41009375C8.661417890625,14.56639375,8.749217890625001,14.77829375,8.749217890625001,14.99939375ZM13.267337890625,16.15679375Q12.916237890625,15.63129375,12.916237890625,14.99939375C12.916237890625,14.53909375,12.543137890625,14.16599375,12.082937890625,14.16599375C11.622737890625,14.16599375,11.249637890625,14.53909375,11.249637890625,14.99939375Q11.249637890625,16.13689375,11.881537890625,17.08269375Q12.513637890625,18.02849375,13.564437890625,18.46389375Q14.615537890625,18.89919375,15.731137890625,18.67729375Q16.846937890625,18.45539375,17.651237890625,17.65099375Q18.455637890625,16.84669375,18.677537890625,15.73089375Q18.899437890625,14.61529375,18.464137890625,13.56429375Q18.028737890625,12.51339375,17.083037890625,11.88139375Q16.137137890625,11.24939375,14.999637890625,11.24939375C14.539337890625,11.24939375,14.166237890625,11.62249375,14.166237890625,12.08269375C14.166237890625,12.54289375,14.539337890625,12.91599375,14.999637890625,12.91599375Q15.631537890625,12.91599375,16.157037890625,13.26709375Q16.682537890625,13.61819375,16.924337890625,14.20209375Q17.166237890625,14.78599375,17.042937890624998,15.40579375Q16.919637890624998,16.02559375,16.472637890625002,16.472493749999998Q16.025837890625,16.919393749999998,15.406037890625,17.042693749999998Q14.786237890625,17.16599375,14.202337890625,16.92409375Q13.618437890625,16.68229375,13.267337890625,16.15679375Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="0.6000000238418579"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_create_icon.svg b/src/assets/img/zf_task_controller_create_icon.svg
new file mode 100644
index 0000000..15c1663
--- /dev/null
+++ b/src/assets/img/zf_task_controller_create_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_61_01551"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_01551)"><g><path d="M11.66624677734375,3.33415046875C11.66624677734375,3.95105046875,11.33114677734375,4.48967046875,10.83294677734375,4.77784046875L10.83294677734375,6.66748046875L14.58294677734375,6.66748046875Q15.61844677734375,6.66748046875,16.35074677734375,7.39971046875Q17.08294677734375,8.13195046875,17.08294677734375,9.16748046875L17.08294677734375,15.83418046875Q17.08294677734375,16.869680468749998,16.35074677734375,17.60188046875Q15.61844677734375,18.33418046875,14.58294677734375,18.33418046875L5.41627677734375,18.33418046875Q4.3807467773437505,18.33418046875,3.64851677734375,17.60188046875Q2.91627677734375,16.869680468749998,2.91627677734375,15.83418046875L2.91627677734375,9.16748046875Q2.91627677734375,8.13195046875,3.64851677734375,7.39971046875Q4.3807467773437505,6.66748046875,5.41627677734375,6.66748046875L9.16627677734375,6.66748046875L9.16627677734375,4.77784046875C8.66811677734375,4.48967046875,8.33294677734375,3.95105046875,8.33294677734375,3.33415046875C8.33294677734375,2.4136724687499997,9.07913677734375,1.66748046875,9.99961677734375,1.66748046875C10.92004677734375,1.66748046875,11.66624677734375,2.4136724687499997,11.66624677734375,3.33415046875ZM7.08327677734375,11.66667046875Q7.16534677734375,11.66667046875,7.24584677734375,11.65065046875Q7.32634677734375,11.63464046875,7.40217677734375,11.60323046875Q7.47800677734375,11.57182046875,7.54624677734375,11.52622046875Q7.61448677734375,11.48062046875,7.67252677734375,11.42259046875Q7.73056677734375,11.36455046875,7.77616677734375,11.29631046875Q7.82176677734375,11.22806046875,7.85316677734375,11.15223046875Q7.88457677734375,11.07641046875,7.90059677734375,10.99591046875Q7.91660677734375,10.91541046875,7.91660677734375,10.83333046875Q7.91660677734375,10.75126046875,7.90059677734375,10.67076046875Q7.88457677734375,10.59026046875,7.85316677734375,10.51443046875Q7.82176677734375,10.43860046875,7.77616677734375,10.37036046875Q7.73056677734375,10.30211046875,7.67252677734375,10.24408046875Q7.61448677734375,10.18604046875,7.54624677734375,10.14044046875Q7.47800677734375,10.09484046875,7.40217677734375,10.06343046875Q7.32634677734375,10.03202046875,7.24584677734375,10.01601046875Q7.16534677734375,10.00000046875,7.08327677734375,10.00000046875Q7.00119677734375,10.00000046875,6.92069677734375,10.01601046875Q6.84019677734375,10.03202046875,6.76436677734375,10.06343046875Q6.68853677734375,10.09484046875,6.62029677734375,10.14044046875Q6.55205677734375,10.18604046875,6.49401677734375,10.24408046875Q6.43597677734375,10.30211046875,6.39037677734375,10.37036046875Q6.34477677734375,10.43860046875,6.31336677734375,10.51443046875Q6.28196677734375,10.59026046875,6.26594677734375,10.67076046875Q6.24993677734375,10.75126046875,6.24993677734375,10.83333046875Q6.24993677734375,10.91541046875,6.26594677734375,10.99591046875Q6.28196677734375,11.07641046875,6.31336677734375,11.15223046875Q6.34477677734375,11.22806046875,6.39037677734375,11.29631046875Q6.43597677734375,11.36455046875,6.49401677734375,11.42259046875Q6.55205677734375,11.48062046875,6.62029677734375,11.52622046875Q6.68853677734375,11.57182046875,6.76436677734375,11.60323046875Q6.84019677734375,11.63464046875,6.92069677734375,11.65065046875Q7.00119677734375,11.66667046875,7.08327677734375,11.66667046875ZM13.74964677734375,10.83333046875Q13.74964677734375,10.91541046875,13.73364677734375,10.99591046875Q13.71754677734375,11.07641046875,13.68614677734375,11.15223046875Q13.65474677734375,11.22806046875,13.60914677734375,11.29631046875Q13.56354677734375,11.36455046875,13.50554677734375,11.42259046875Q13.44754677734375,11.48062046875,13.37924677734375,11.52622046875Q13.31104677734375,11.57182046875,13.23514677734375,11.60323046875Q13.15934677734375,11.63464046875,13.07884677734375,11.65065046875Q12.99834677734375,11.66667046875,12.91624677734375,11.66667046875Q12.83424677734375,11.66667046875,12.75374677734375,11.65065046875Q12.67324677734375,11.63464046875,12.59734677734375,11.60323046875Q12.52154677734375,11.57182046875,12.45334677734375,11.52622046875Q12.38504677734375,11.48062046875,12.32704677734375,11.42259046875Q12.26894677734375,11.36455046875,12.22334677734375,11.29631046875Q12.17774677734375,11.22806046875,12.14634677734375,11.15223046875Q12.11494677734375,11.07641046875,12.09894677734375,10.99591046875Q12.08294677734375,10.91541046875,12.08294677734375,10.83333046875Q12.08294677734375,10.75126046875,12.09894677734375,10.67076046875Q12.11494677734375,10.59026046875,12.14634677734375,10.51443046875Q12.17774677734375,10.43860046875,12.22334677734375,10.37036046875Q12.26894677734375,10.30211046875,12.32704677734375,10.24408046875Q12.38504677734375,10.18604046875,12.45334677734375,10.14044046875Q12.52154677734375,10.09484046875,12.59734677734375,10.06343046875Q12.67324677734375,10.03202046875,12.75374677734375,10.01601046875Q12.83424677734375,10.00000046875,12.91624677734375,10.00000046875Q12.99834677734375,10.00000046875,13.07884677734375,10.01601046875Q13.15934677734375,10.03202046875,13.23514677734375,10.06343046875Q13.31104677734375,10.09484046875,13.37924677734375,10.14044046875Q13.44754677734375,10.18604046875,13.50554677734375,10.24408046875Q13.56354677734375,10.30211046875,13.60914677734375,10.37036046875Q13.65474677734375,10.43860046875,13.68614677734375,10.51443046875Q13.71754677734375,10.59026046875,13.73364677734375,10.67076046875Q13.74964677734375,10.75126046875,13.74964677734375,10.83333046875ZM1.66627977734375,10.00081046875C1.2060427773437499,10.00081046875,0.83294677734375,10.37391046875,0.83294677734375,10.83415046875L0.83294677734375,14.16748046875C0.83294677734375,14.62768046875,1.2060427773437499,15.00078046875,1.66627977734375,15.00078046875C2.12651677734375,15.00078046875,2.49961677734375,14.62768046875,2.49961677734375,14.16748046875L2.49961677734375,10.83415046875C2.49961677734375,10.37391046875,2.12651677734375,10.00081046875,1.66627977734375,10.00081046875ZM18.33294677734375,10.00081046875C17.87274677734375,10.00081046875,17.49964677734375,10.37391046875,17.49964677734375,10.83415046875L17.49964677734375,14.16748046875C17.49964677734375,14.62768046875,17.87274677734375,15.00078046875,18.33294677734375,15.00078046875C18.79314677734375,15.00078046875,19.16624677734375,14.62768046875,19.16624677734375,14.16748046875L19.16624677734375,10.83415046875C19.16624677734375,10.37391046875,18.79314677734375,10.00081046875,18.33294677734375,10.00081046875ZM8.33327677734375,14.99918046875C7.87302677734375,14.99918046875,7.49993677734375,14.62608046875,7.49993677734375,14.16588046875C7.49993677734375,13.70558046875,7.87302677734375,13.33248046875,8.33327677734375,13.33248046875L11.66664677734375,13.33248046875C12.12684677734375,13.33248046875,12.49994677734375,13.70558046875,12.49994677734375,14.16588046875C12.49994677734375,14.62608046875,12.12684677734375,14.99918046875,11.66664677734375,14.99918046875L8.33327677734375,14.99918046875Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="0.6000000238418579"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_height_icon.svg b/src/assets/img/zf_task_controller_height_icon.svg
new file mode 100644
index 0000000..b397ee6
--- /dev/null
+++ b/src/assets/img/zf_task_controller_height_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02510"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02510)"><g><path d="M2.4000244140625,1.3330078125L13.6000244140625,1.3330078125L13.6000244140625,2.6662078124999997L2.4000244140625,2.6662078124999997L2.4000244140625,1.3330078125ZM11.3000244140625,6.2996778125L8.0000244140625,2.9996778125L4.7020244140625,6.2976778125L5.6446944140625,7.2410078125L7.3333544140625,5.5516778125L7.3333544140625,10.4470078125L5.6433544140625,8.7570078125L4.7006944140625,9.6996778125L8.0000244140625,12.9997078125L11.3000244140625,9.6996778125L10.357354414062499,8.7570078125L8.666694414062501,10.4476778125L8.666694414062501,5.5516778125L10.357354414062499,7.2423378125L11.3000244140625,6.2996778125ZM13.6000244140625,13.3330078125L13.6000244140625,14.6662078125L2.4000244140625,14.6662078125L2.4000244140625,13.3330078125L13.6000244140625,13.3330078125Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_icon.svg b/src/assets/img/zf_task_controller_icon.svg
new file mode 100644
index 0000000..9286996
--- /dev/null
+++ b/src/assets/img/zf_task_controller_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_61_05364"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_05364)"><g><path d="M2.4680951171875,14.5121625Q1.0322081171875,12.8892925,0.7686601171875,10.7389625Q0.5050831171875,8.5883825,1.5066041171875,6.667082499999999Q2.5081251171875003,4.7457725,4.4220851171875,3.7302835Q6.3360351171875,2.7147975,8.488495117187501,2.9627094Q10.6409251171875,3.2106215000000002,12.2739451171875,4.6346425Q13.6571451171875,5.8408525000000004,14.2550451171875,7.5311125L14.6053451171875,7.5311125Q16.1444451171875,7.5299225,17.3535451171875,8.2960525Q18.6674451171875,9.1285425,19.1278451171875,10.5817125Q19.5893451171875,12.0385525,19.1006451171875,13.4864625Q18.6118451171875,14.9343625,17.3617451171875,15.8134625C17.2214451171875,15.9121625,17.0540451171875,15.9651625,16.8824451171875,15.9651625C16.4222451171875,15.9651625,16.0491451171875,15.5920625,16.0491451171875,15.1317625C16.0491451171875,14.8604625,16.181145117187498,14.6061625,16.4031451171875,14.4500625L16.4043451171875,14.4492625Q17.2073451171875,13.8840625,17.5215451171875,12.9534625Q17.8358451171875,12.0221325,17.5389451171875,11.0850925Q17.2621451171875,10.2111725,16.461545117187498,9.7038925Q15.6614451171875,9.1969625,14.6053451171875,9.197782499999999L13.6382451171875,9.197782499999999C13.2577451171875,9.197782499999999,12.9256451171875,8.9400925,12.8310451171875,8.571562499999999Q12.4212451171875,6.9744725,11.1785451171875,5.8907825Q9.9358051171875,4.8070924999999995,8.297795117187501,4.6184325Q6.6597551171875,4.4297625,5.2032251171875,5.2025625Q3.7466951171875,5.9753525,2.9845251171875,7.4374825Q2.2223651171875,8.8996025,2.4229451171875,10.536212500000001Q2.6235351171875,12.1728125,3.7162351171875,13.4075625C3.8510651171875,13.5599625,3.9255051171875,13.7563625,3.9255051171875,13.9598625C3.9255051171875,14.4200625,3.5524051171875,14.7931625,3.0921651171875,14.7931625C2.8534951171875,14.7931625,2.6262751171875003,14.6908625,2.4680951171875,14.5121625ZM5.8333751171875,12.4998425L6.6667051171875,12.4998425C7.1269451171875,12.4998425,7.5000451171875,12.1267425,7.5000451171875,11.6665025C7.5000451171875,11.2062625,7.1269451171875,10.8331725,6.6667051171875,10.8331725L5.8333751171875,10.8331725C5.3731351171875,10.8331725,5.0000451171875,11.2062625,5.0000451171875,11.6665025C5.0000451171875,12.1267425,5.3731351171875,12.4998425,5.8333751171875,12.4998425ZM9.1667051171875,10.8331725L14.1667451171875,10.8331725C14.6269451171875,10.8331725,15.0000451171875,11.2062625,15.0000451171875,11.6665025C15.0000451171875,12.1267425,14.6269451171875,12.4998425,14.1667451171875,12.4998425L9.1667051171875,12.4998425C8.7064751171875,12.4998425,8.3333751171875,12.1267425,8.3333751171875,11.6665025C8.3333751171875,11.2062625,8.7064751171875,10.8331725,9.1667051171875,10.8331725ZM5.0000451171875,14.5831625L5.0000451171875,17.0831625C5.0000451171875,17.5433625,5.3731351171875,17.9164625,5.8333751171875,17.9164625L14.1667451171875,17.9164625C14.6269451171875,17.9164625,15.0000451171875,17.5433625,15.0000451171875,17.0831625L15.0000451171875,14.5831625C15.0000451171875,14.1229625,14.6269451171875,13.7498625,14.1667451171875,13.7498625L5.8333751171875,13.7498625C5.3731351171875,13.7498625,5.0000451171875,14.1229625,5.0000451171875,14.5831625Z" fill-rule="evenodd" fill="#09C5E7" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_pause_icon.svg b/src/assets/img/zf_task_controller_pause_icon.svg
new file mode 100644
index 0000000..ff73894
--- /dev/null
+++ b/src/assets/img/zf_task_controller_pause_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_61_01164"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_01164)"><g><path d="M10,1.25C14.8325,1.25,18.75,5.16751,18.75,10C18.75,14.8325,14.8325,18.75,10,18.75C5.16751,18.75,1.25,14.8325,1.25,10C1.25,5.16751,5.16751,1.25,10,1.25ZM8.90625,6.71875L6.71875,6.71875L6.71875,13.2812L8.90625,13.2812L8.90625,6.71875ZM13.2812,6.71875L11.09375,6.71875L11.09375,13.2812L13.2812,13.2812L13.2812,6.71875Z" fill="#FFFFFF" fill-opacity="0.6000000238418579" style="mix-blend-mode:passthrough"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_plus_icon.svg b/src/assets/img/zf_task_controller_plus_icon.svg
new file mode 100644
index 0000000..e94f8bc
--- /dev/null
+++ b/src/assets/img/zf_task_controller_plus_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="24" viewBox="0 0 16 24"><g><path d="M14.812,12.228L14.812,14.944L9.212,14.944L9.212,20.544L6.496,20.544L6.496,14.944L0.924,14.944L0.924,12.228L6.496,12.228L6.496,6.656L9.212,6.656L9.212,12.228L14.812,12.228Z" fill="#7A8ABA" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_power_icon.svg b/src/assets/img/zf_task_controller_power_icon.svg
new file mode 100644
index 0000000..18ea7a3
--- /dev/null
+++ b/src/assets/img/zf_task_controller_power_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02285"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02285)"><g><path d="M7.86905,7.21429L7.86905,2.5L4.05952,8.78571L6.34524,8.78571L6.34524,13.5L10.15476,7.21429L7.86905,7.21429ZM1.011905,2.5L13.2024,2.5C13.6232,2.500000280993,13.9643,2.851776,13.9643,3.285714L13.9643,12.7143C13.9643,13.1482,13.6232,13.5,13.2024,13.5L1.011905,13.5C0.591117,13.5,0.250000136239,13.1482,0.25,12.7143L0.25,3.285714C0.25,2.851776,0.591116,2.500000280993,1.011905,2.5ZM14.7262,5.642860000000001L16.25,5.642860000000001L16.25,10.357140000000001L14.7262,10.357140000000001L14.7262,5.642860000000001Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_satellite_icon.svg b/src/assets/img/zf_task_controller_satellite_icon.svg
new file mode 100644
index 0000000..a2e7632
--- /dev/null
+++ b/src/assets/img/zf_task_controller_satellite_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02321"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02321)"><g><path d="M9.700800000000001,7.34467L11.67792,5.20402C12.3461,5.55089,13.1699,5.43196,13.7191,4.82742C14.4239,4.06432,14.4239,2.8354299999999997,13.7191,2.072327C13.0143,1.309224,11.87929,1.309224,11.17449,2.072327C10.62529,2.66695,10.5063,3.55889,10.82666,4.28235L8.849540000000001,6.423L4.3095,1.5173432C1.563501,4.4805600000000005,1.563501,9.29703,4.3095,12.2702C5.6825,13.7567,7.47655,14.5,9.27975,14.5C11.0738,14.5,12.877,13.7567,14.25,12.2702L9.700800000000001,7.34467Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_speed_icon.svg b/src/assets/img/zf_task_controller_speed_icon.svg
new file mode 100644
index 0000000..d7ed383
--- /dev/null
+++ b/src/assets/img/zf_task_controller_speed_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02460"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02460)"><g><path d="M8,15C4.134,15,1,11.866,1,8C1,4.134,4.134,1,8,1C11.866,1,15,4.134,15,8C15,11.866,11.866,15,8,15ZM9.51056,5.9275C9.53084,5.69558,9.38837,5.48035,9.16695,5.40842C8.945540000000001,5.33648,8.70378,5.42688,8.58388,5.62644L7.03681,8.20169C6.99032,8.2791,6.95277,8.361550000000001,6.92488,8.44744C6.72119,9.07419,7.06425,9.74737,7.691,9.951C7.77688,9.97894,7.86563,9.997,7.95563,10.00488C8.61213,10.06238,9.19094,9.57675,9.24844,8.92025L9.51056,5.9275L9.51056,5.9275ZM8,2C5.89919,2,4.0504999999999995,3.07969,2.9786900000000003,4.7145L3.81556,5.26206C4.70875,3.89975,6.24937,3,8,3C9.77475,3,11.3336,3.92469,12.2209,5.31856L13.0651,4.78231C12.0003,3.10956,10.12975,2,8,2Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_start_icon.svg b/src/assets/img/zf_task_controller_start_icon.svg
new file mode 100644
index 0000000..ec2f7a6
--- /dev/null
+++ b/src/assets/img/zf_task_controller_start_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_61_01175"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_01175)"><g><path d="M10.004642109375,1.185302734375C5.193272109375,1.185302734375,1.253663305075,5.099442734375,1.253663305075,9.936282734375C1.253663603995,14.747702734375,5.165842109375,18.685302734375,10.002682109375,18.685302734375C14.839562109375,18.685302734375,18.751662109375,14.773102734375,18.751662109375,9.936282734375C18.753662109375,5.124912734375,14.841462109375,1.18530236072,10.004642109375,1.185302734375ZM13.552462109375,10.298702734375L8.221932109375,13.374402734375C8.012312109375,13.495802734375,7.751762109375,13.345002734375,7.751762109375,13.102102734375L7.751762109375,6.948762734375C7.751762109375,6.707802734375,8.012312109375,6.556962734375,8.221932109375,6.676462734375L13.552462109375,9.754092734375C13.760062109375,9.875552734375,13.760062109375,10.177242734375,13.552462109375,10.298702734375Z" fill="#FFFFFF" fill-opacity="0.6000000238418579" style="mix-blend-mode:passthrough"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_transfer_icon.svg b/src/assets/img/zf_task_controller_transfer_icon.svg
new file mode 100644
index 0000000..b8f33a5
--- /dev/null
+++ b/src/assets/img/zf_task_controller_transfer_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_61_02261"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_61_02261)"><g><path d="M8.000069765625,6.39990234375C7.282482765625,6.40722608375,6.657547765625,6.89143734375,6.471251965625,7.58446234375C6.284956765625,8.27748234375,6.582874765625,9.00976234375,7.200067765625,9.375902343749999L7.200067765625,15.99990234375L8.800069765625,15.99990234375L8.800069765625,9.375902343749999C9.417259765625,9.00976234375,9.715179765624999,8.27747234375,9.528879765625,7.58446234375C9.342589765625,6.89143734375,8.717649765625,6.40722704375,8.000069765625,6.39990234375Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M8.000011289062499,0C4.4128712890625,0.0106494,1.2713412890625,2.40778,0.3139542890625,5.86481C-0.6434357109375,9.32185,0.8173892890625,12.9936,3.8880112890625,14.848L4.6880112890625,13.48C1.2978012890625,11.4499,0.5391892890625,6.86287,3.0952712890625,3.84933C5.6513512890625,0.8358,10.3006712890625,0.835799,12.8567712890625,3.84933C15.4128712890625,6.86286,14.6542712890625,11.4499,11.2639712890625,13.48L12.0639712890625,14.848C15.1272712890625,12.9983,16.5895712890625,9.3392,15.6448712890625,5.88771C14.7001712890625,2.43621,11.5782712890625,0.0318844,8.000011289062499,0Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M12.799951171875,7.999916875C12.805551171875,4.319736875,8.838001171875,2.0024968750000003,5.635361171875,3.815451875C2.432708171875,5.628406875,2.3776611718750003,10.222756875,5.535951171875,12.111916875L6.335951171875,10.735916875000001C4.638291171875,9.722676875000001,4.256451171875,7.427726875,5.534581171875001,5.919376875C6.812701171875,4.411026875,9.139201171875001,4.411026875,10.417331171875,5.919376875C11.695451171875,7.427726875,11.313611171875,9.722676875000001,9.615951171875,10.735916875000001L10.415951171875001,12.111916875C11.881111171875,11.258526875,12.787331171875,9.695446875,12.799951171875,7.999916875Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/zf_task_controller_zoomout_icon.svg b/src/assets/img/zf_task_controller_zoomout_icon.svg
new file mode 100644
index 0000000..9e683d2
--- /dev/null
+++ b/src/assets/img/zf_task_controller_zoomout_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="13" height="24" viewBox="0 0 13 24"><g><path d="M1.96,14.636L1.96,12.172L10.332,12.172L10.332,14.636L1.96,14.636Z" fill="#7A8ABA" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/style/base.less b/src/assets/style/base.less
index d37466a..0a6dd26 100644
--- a/src/assets/style/base.less
+++ b/src/assets/style/base.less
@@ -3,7 +3,11 @@
     padding: 0;
     box-sizing: border-box;
 }
-html,body,#app{
+
+html,
+body,
+#app {
     width: 100%;
     height: 100%;
-}
\ No newline at end of file
+}
+
diff --git a/src/components/selectView/index.vue b/src/components/selectView/index.vue
new file mode 100644
index 0000000..a0ac4d6
--- /dev/null
+++ b/src/components/selectView/index.vue
@@ -0,0 +1,84 @@
+<template>
+    <div class="selsct_wrap">
+        <el-select :teleported="false" :modelValue="modelValue" @change="handleChange" :placeholder="placeholder">
+            <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+    </div>
+
+</template>
+
+<script setup lang="ts">
+import { toRefs } from "vue"
+const props = defineProps(["modelValue", "placeholder", "options"])
+const emit = defineEmits(["update:modelValue"])
+const { modelValue, placeholder, options } = toRefs(props)
+function handleChange(value: any) {
+    emit("update:modelValue", value)
+}
+</script>
+
+<style lang="less" scoped>
+.selsct_wrap {
+    width: 100%;
+    position: relative;
+    z-index: 2016;
+    &::after {
+        content: "";
+        position: absolute;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        top: -1px;
+        left: -1px;
+        z-index: -1;
+        background-color: antiquewhite;
+        background: linear-gradient(180deg, #004DE7 0%, #009BFC 100%);
+    }
+    :deep(.el-select__wrapper){
+        min-height: 26px;
+    }
+
+    :deep(.el-select__wrapper) {
+        background-color: #053b7c;
+        border-radius: 0;
+        box-shadow: none;
+
+        .el-select__placeholder {
+            color: #fff;
+        }
+    }
+
+    :deep(.el-select-dropdown__item) {
+        color: #fff !important;
+        display: flex;
+        align-items: center;
+        padding: 0 5px;
+        height: 24px;
+
+        &>span {
+            line-height: 24px !important;
+            font-size: 14px;
+        }
+    }
+
+    :deep(.el-popper.is-light) {
+        border: none !important;
+        background-color: #16286c !important;
+    }
+
+    :deep(.el-select-dropdown__list) {
+        padding: 5px !important;
+    }
+
+    :deep(.el-select-dropdown__item.is-hovering) {
+        background: linear-gradient(180deg, #004ee7, #0099fc);
+    }
+
+    :deep(.el-popper) {
+        border-radius: 0 !important;
+    }
+
+    :deep(.el-popper__arrow) {
+        display: none;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/zfControlPlatform/eventList/eventItem.vue b/src/components/zfControlPlatform/eventList/eventItem.vue
new file mode 100644
index 0000000..25db1ce
--- /dev/null
+++ b/src/components/zfControlPlatform/eventList/eventItem.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="event_item">
+        <img class="cover" src="@/assets/img/Rectangle 28@1x.png" alt="">
+        <div class="content">
+            <p>
+                <span class="label">时间：</span>
+                <span>2024-04-26 11:52:27</span>
+            </p>
+            <p>
+                <span class="label">地点：</span>
+                <span>东风中路</span>
+            </p>
+            <p>
+                <span class="label">类型：</span>
+                <span>AI 创建</span>
+            </p>
+            <p>
+                <span class="label">分类：</span>
+                <span>拥堵</span>
+            </p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="less" scoped>
+.event_item {
+    width: 249px;
+    background-color: #053063;
+    margin-right: 16px;
+    .cover {
+        width: 100%;
+        height: 196px;
+        width: 249px;
+        object-fit: cover;
+        display: block;
+        background-color: antiquewhite;
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        padding: 8px 16px;
+        font-size: 14px;
+
+        p {
+            color: #fff;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            .label {
+                color: rgba(255, 255, 255, 0.65);
+            }
+        }
+
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/zfControlPlatform/eventList/index.vue b/src/components/zfControlPlatform/eventList/index.vue
new file mode 100644
index 0000000..4c344df
--- /dev/null
+++ b/src/components/zfControlPlatform/eventList/index.vue
@@ -0,0 +1,87 @@
+<template>
+    <div class="event_list">
+        <titleView>
+            <template #icon>
+                <img src="@/assets/img/zf_event_list_icon.svg" alt="">
+            </template>
+            <template #title>
+                <span>事件列表</span>
+            </template>
+            <template #right>
+                <div class="select">
+                    <selectView  placeholder="请选择分类" v-model="eventType" :options="options"></selectView>
+                </div>
+            </template>
+        </titleView>
+        <div class="list_wrapper">
+            <el-scrollbar>
+                <div class="list">
+                    <eventItem v-for="i in 20"></eventItem>
+                </div>
+            </el-scrollbar>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import titleView from "@/components/zfControlPlatform/titleView/index.vue"
+import selectView from "@/components/selectView/index.vue"
+import eventItem from "@/components/zfControlPlatform/eventList/eventItem.vue"
+const eventType = ref()
+const options = ref([
+    {
+        label: "拥堵",
+        value: 0
+    },
+    {
+        label: "抛洒物",
+        value: 1
+    },
+    {
+        label: "涉路施工",
+        value: 2
+    },
+    {
+        label: "停车",
+        value: 3
+    },
+    {
+        label: "塌方",
+        value: 4
+    },
+])
+</script>
+
+<style lang="less" scoped>
+.event_list {
+    background-color: #053b7b;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    .select{
+        width: 120px;
+    }
+    .list_wrapper{
+        width: 100%;
+        flex-shrink: 0;
+        flex: 1;
+        // background-color: rgb(222, 175, 100);
+        display: flex;
+        align-items: center;
+        overflow-x: auto;
+        :deep(.el-scrollbar__view){
+                height: 100%;
+            }
+        .list{
+            display: flex;
+            align-items: center;
+            padding: 16px 16px 0;
+            
+        }
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/components/zfControlPlatform/index.vue b/src/components/zfControlPlatform/index.vue
index 556a89f..147a002 100644
--- a/src/components/zfControlPlatform/index.vue
+++ b/src/components/zfControlPlatform/index.vue
@@ -1,23 +1,32 @@
 <template>
     <div class="ZfControlPlatform">
         <div class="container_left">
-
             <div class="task">
                 <taskList></taskList>
             </div>
             <div class="preview">
-                12312
+                <positionView></positionView>
             </div>
-
-
         </div>
-        <div class="container_center"></div>
-        <div class="container_right"></div>
+        <div class="container_center">
+            <div class="map_wrap">
+                <img src="@/assets/img/image@1x.png" alt="">
+            </div>
+            <div class="event_list_wrap">
+                <eventList></eventList>
+            </div>
+        </div>
+        <div class="container_right">
+            <taskController></taskController>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import taskList from "@/components/zfControlPlatform/taskList/index.vue"
+import positionView from "@/components/zfControlPlatform/positionView/index.vue"
+import eventList from "@/components/zfControlPlatform/eventList/index.vue"
+import taskController from "@/components/zfControlPlatform/taskController/index.vue"
 </script>
 
 <style lang="less" scoped>
@@ -25,9 +34,8 @@ import taskList from "@/components/zfControlPlatform/taskList/index.vue"
 
     display: flex;
     padding: 12px;
-    background-color: rgb(0, 255, 162);
     height: 100%;
-    
+
 
     .container_left {
         width: 363px;
@@ -36,7 +44,7 @@ import taskList from "@/components/zfControlPlatform/taskList/index.vue"
         flex-direction: column;
         flex-shrink: 0;
         height: 100%;
-        background-color: chocolate;
+
         .task {
             background-color: brown;
             flex: 1;
@@ -54,8 +62,30 @@ import taskList from "@/components/zfControlPlatform/taskList/index.vue"
 
     .container_center {
         flex: 1;
-        background-color: pink;
         margin-right: 12px;
+        display: flex;
+        flex-direction: column;
+        width: 0;
+
+        .map_wrap {
+            flex: 1;
+            height: 0;
+            margin-bottom: 12px;
+            background-color: aqua;
+            img{
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
+
+        .event_list_wrap {
+            height: 363px;
+            flex-shrink: 0;
+            width: 100%;
+            overflow: hidden;
+            background-color: rgb(24, 24, 24);
+        }
 
     }
 
@@ -63,6 +93,10 @@ import taskList from "@/components/zfControlPlatform/taskList/index.vue"
         width: 371px;
         background-color: black;
         flex-shrink: 0;
+        height: 100%;
     }
+
+
+    
 }
 </style>
\ No newline at end of file
diff --git a/src/components/zfControlPlatform/positionView/index.vue b/src/components/zfControlPlatform/positionView/index.vue
new file mode 100644
index 0000000..8861d2e
--- /dev/null
+++ b/src/components/zfControlPlatform/positionView/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="position_view">
+        <titleView>
+            <template #icon>
+                <img src="@/assets/img/zf_position_title_icon.svg" alt="">
+            </template>
+            <template #title>
+                <span>飞行器位置</span>
+            </template>
+            <template #right>
+                <img src="@/assets/img/zf_position_full_icon.svg" alt="">
+            </template>
+        </titleView>
+        <div class="content">
+            <img src="@/assets/img/Rectangle 27@1x.png" alt="">
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import titleView from "@/components/zfControlPlatform/titleView/index.vue"
+</script>
+
+<style lang="less" scoped>
+.position_view {
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    height: 100%;
+    .content {
+        flex: 1;
+        height: 0;
+        background-color: antiquewhite;
+        img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/zfControlPlatform/taskController/index.vue b/src/components/zfControlPlatform/taskController/index.vue
new file mode 100644
index 0000000..358c946
--- /dev/null
+++ b/src/components/zfControlPlatform/taskController/index.vue
@@ -0,0 +1,358 @@
+<template>
+    <div class="task_controller_wrapper">
+        <titleView>
+            <template #icon>
+                <img src="@/assets/img/zf_task_controller_icon.svg" alt="">
+            </template>
+            <template #title>
+                <span>任务控制</span>
+            </template>
+        </titleView>
+        <div class="controller">
+            <div class="top">
+                <!-- 方向按键 -->
+                <div class="direction_control_wrapper">
+                    <div class="direction_control">
+                        <div class="button_group">
+                            <div class="direction_button up"></div>
+                            <div class="direction_button right"></div>
+                        </div>
+                        <div class="button_group">
+                            <div class="direction_button left"></div>
+                            <div class="direction_button down"></div>
+                        </div>
+                    </div>
+                    <div class="zoom_button">
+                        <div class="btn zoom_in">
+                            <img src="@/assets/img/zf_task_controller_plus_icon.svg" alt="">
+                        </div>
+                        <div class="btn zoom_out">
+                            <img src="@/assets/img/zf_task_controller_zoomout_icon.svg" alt="">
+                        </div>
+                    </div>
+                </div>
+                <!-- 状态仪表盘 -->
+                <div class="dash_board">
+                    <div class="group">
+                        <div class="item" v-for="item in dash_board" :class="{ no_splite: item?.no_splite }">
+                            <div class="data">
+                                <div class="icon">
+                                    <img :src="item.icon" alt="">
+                                </div>
+                                <div class="value" :style="`color:${item.color}`">{{ item.value }}</div>
+                            </div>
+                            <span class="label">{{ item.label }}</span>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+            <!-- 底部按钮 -->
+            <div class="bottom_buttons">
+                <div class="btn">
+                    <img class="icon" src="@/assets/img/zf_task_controller_start_icon.svg" alt="">
+                    <span>开始任务</span>
+                </div>
+                <div class="btn">
+                    <img class="icon" src="@/assets/img/zf_task_controller_pause_icon.svg" alt="">
+                    <span>暂停任务</span>
+                </div>
+                <div class="btn">
+                    <img class="icon" src="@/assets/img/zf_task_controller_create_icon.svg" alt="">
+                    <span>创建事件</span>
+                </div>
+                <div class="btn">
+                    <img class="icon" src="@/assets/img/zf_task_controller_back_icon.svg" alt="">
+                    <span>一键返航</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import titleView from "@/components/zfControlPlatform/titleView/index.vue"
+import powerIcon from "@/assets/img/zf_task_controller_power_icon.svg"
+import satelliteIcon from "@/assets/img/zf_task_controller_satellite_icon.svg"
+import transferImgIcon from "@/assets/img/zf_task_controller_transfer_icon.svg"
+import speedIcon from "@/assets/img/zf_task_controller_speed_icon.svg"
+import aircraftIcon from "@/assets/img/zf_task_controller_aircraft_icon.svg"
+import heightIcon from "@/assets/img/zf_task_controller_height_icon.svg"
+import altitudeIcon from "@/assets/img/zf_task_controller_altitude_icon.svg"
+
+const dash_board = ref([
+    {
+        label: "电池电量",
+        value: "87%",
+        icon: powerIcon,
+        color: "#42F5AF"
+    },
+    {
+        label: "搜星质量",
+        value: "8 ",
+        icon: satelliteIcon,
+        color: "#42F5AF"
+    },
+    {
+        label: "图传状态",
+        value: "正常",
+        icon: transferImgIcon,
+        color: "#42F5AF"
+    },
+    {
+        label: "水平速度",
+        value: "HS-m/s",
+        icon: speedIcon,
+        color: "#FFF",
+        no_splite: true
+    },
+    {
+        label: "相对起飞点高度",
+        value: "ATM-m",
+        icon: aircraftIcon,
+        color: "#FFF"
+    },
+    {
+        label: "相对地形高度",
+        value: "12883 m",
+        icon: heightIcon,
+        color: "#FFF"
+    },
+    {
+        label: "海拔高度",
+        value: "12883 m",
+        icon: altitudeIcon,
+        color: "#FFF",
+        no_splite: true
+    },
+
+])
+
+</script>
+
+<style lang="less" scoped>
+.task_controller_wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .controller {
+        flex: 1;
+        height: 0;
+        background-color: #053b7b;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+
+        .direction_control_wrapper {
+            display: flex;
+            height: 290px;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+
+            //方向按钮
+            .direction_control {
+                border-radius: 50%;
+                width: 206px;
+                height: 206px;
+                overflow: hidden;
+                transform: rotate(45deg);
+
+                .button_group {
+                    display: flex;
+
+                    &+.button_group {
+                        margin-top: 8px;
+                    }
+
+                    .direction_button {
+                        height: 99px;
+                        width: 99px;
+                        background-color: #1e5499;
+                        position: relative;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        cursor: pointer;
+
+                        &:hover {
+                            background: linear-gradient(90deg, #0454e6, #1475e2);
+                        }
+
+                        &+.direction_button {
+                            margin-left: 8px;
+                        }
+
+                        &::after {
+                            content: '';
+                            position: absolute;
+                            width: 0;
+                            height: 0;
+                            border: 10px solid skyblue;
+                            border-color: skyblue transparent transparent transparent;
+                        }
+
+                        &.up {
+                            &::after {
+                                border-color: transparent transparent skyblue transparent;
+                                transform: rotate(-45deg);
+                            }
+                        }
+
+                        &.down {
+                            &::after {
+                                border-color: skyblue transparent transparent transparent;
+                                transform: rotate(-45deg);
+                            }
+                        }
+
+                        &.left {
+                            &::after {
+                                border-color: transparent skyblue transparent transparent;
+                                transform: rotate(-45deg);
+                            }
+                        }
+
+                        &.right {
+                            &::after {
+                                border-color: transparent transparent transparent skyblue;
+                                transform: rotate(-45deg);
+                            }
+                        }
+                    }
+                }
+
+            }
+
+            .zoom_button {
+                width: 68px;
+                height: 68px;
+                overflow: hidden;
+                border-radius: 50%;
+                position: absolute;
+                border: 8px solid #053b7b;
+                background-color: #053b7b;
+                box-sizing: content-box;
+
+                .btn {
+                    height: 32px;
+                    background-color: #054295;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 18px;
+                    color: #fff;
+                    cursor: pointer;
+
+                    &+.btn {
+                        margin-top: 4px;
+                    }
+
+                    img {
+                        width: 13px;
+                    }
+                }
+            }
+        }
+
+        //数据仪表盘
+        .dash_board {
+            width: 340px;
+
+            background-color: #18549b;
+            margin: 0 auto;
+
+            .group {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                padding: 0 8px 16px;
+
+                .item {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    min-width: 80px;
+                    padding-top: 16px;
+                    flex: 1;
+                    position: relative;
+
+                    &::after {
+                        content: "";
+                        position: absolute;
+                        height: 24px;
+                        width: 1px;
+                        background-color: #2366b7;
+                        right: 0;
+                    }
+
+                    &.no_splite {
+                        &::after {
+                            display: none;
+                        }
+                    }
+
+                    .data {
+                        display: flex;
+                        font-size: 14px;
+                        font-weight: 700;
+
+                        .icon {
+                            width: 16px;
+                            height: 16px;
+                            flex-shrink: 0;
+                            margin-right: 4px;
+
+                            img {
+                                display: block;
+                                width: 100%;
+                                height: 100%;
+                            }
+                        }
+
+
+                    }
+
+                    .label {
+                        font-size: 12px;
+                        color: rgba(255, 255, 255, 0.4);
+                    }
+                }
+            }
+        }
+
+        .bottom_buttons {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            width: 340px;
+
+            .btn {
+                width: 164px;
+                height: 40px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 16px;
+                color: rgba(255, 255, 255, 0.85);
+                background: linear-gradient(180deg, #004DE7 0%, #1577E2 100%);
+                margin-bottom: 14px;
+                cursor: pointer;
+                .icon {
+                    width: 20px;
+                    height: 20px;
+                    margin-right: 4px;
+                }
+            }
+
+        }
+    }
+
+
+
+}
+</style>
\ No newline at end of file
diff --git a/src/components/zfControlPlatform/titleView/index.vue b/src/components/zfControlPlatform/titleView/index.vue
new file mode 100644
index 0000000..bceb036
--- /dev/null
+++ b/src/components/zfControlPlatform/titleView/index.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="title">
+        <div class="left">
+            <span class="icon">
+                <slot name="icon"></slot>
+            </span>
+            <slot name="title"></slot>
+        </div>
+        <div class="right">
+            <slot name="right"></slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="less" scoped>
+.title {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: antiquewhite;
+    border-bottom: 1px #3c7bff solid;
+    padding: 0 20px;
+    background: linear-gradient(90deg, #0A5CC8 3%, #053B7B 95%);
+
+    img {
+        display: block;
+    }
+
+    .left {
+        display: flex;
+        align-items: center;
+        font-size: 18px;
+        color: #fff;
+
+        .icon :deep(img) {
+            display: block;
+            width: 20px;
+            height: 20px;
+            margin-right: 8px;
+        }
+    }
+
+    .right {
+        cursor: pointer;
+        :deep(img) {
+            display: block;
+            width: 20px;
+            height: 20px;
+            margin-right: 8px;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index f789255..ac52fe2 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -5,7 +5,7 @@
                 <img class="logo_border" src="@/assets/img/login_logo_border.png" alt="">
                 <img class="logo_img" src="@/assets/img/login_logo.png" alt="">
             </div>
-            <h2 class="title">交通综合执法检查系统</h2>
+            <h2 class="title">交通运输综合执法检查系统</h2>
             <form class="form_wrap" @submit="submit">
                 <div class="form_item" :class="{ error: errors.userName }">
                     <div class="icon">