diff --git a/src/assets/icons/icon-book.svg b/src/assets/icons/icon-book.svg
new file mode 100644
index 0000000..18760fe
--- /dev/null
+++ b/src/assets/icons/icon-book.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785865584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7995" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="7996"></path></svg>
\ No newline at end of file

diff --git a/src/assets/icons/icon-book.svg b/src/assets/icons/icon-book.svg
new file mode 100644
index 0000000..18760fe
--- /dev/null
+++ b/src/assets/icons/icon-book.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785865584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7995" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="7996"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-certi.svg b/src/assets/icons/icon-certi.svg
new file mode 100644
index 0000000..8615630
--- /dev/null
+++ b/src/assets/icons/icon-certi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785830314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6943" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M335.786667 938.666667s-47.786667-53.76-93.013334-98.133334c-48.213333-13.226667-96.853333-25.6-145.92-37.12L196.266667 631.466667c52.48 68.266667 144.64 127.146667 231.68 148.48L335.786667 938.666667zM789.333333 832c-45.226667 44.373333-101.546667 106.666667-101.546666 106.666667l-91.306667-158.72c87.04-21.333333 170.666667-79.786667 223.146667-148.48l107.52 171.946666c-0.426667 0.426667-73.386667 10.666667-137.813334 28.586667zM511.573333 85.333333c-173.226667 0-322.133333 157.44-322.133333 331.093334s148.906667 314.026667 322.133333 314.026666 322.133333-148.906667 322.133334-322.56S684.8 85.333333 511.573333 85.333333z m186.026667 308.48L641.28 452.266667c-7.68 7.68-11.52 18.773333-8.96 29.866666v1.28l12.8 79.36c1.28 7.68 0 15.786667-3.84 22.186667-9.813333 17.493333-31.573333 24.32-49.066667 14.506667l-64.853333-34.56c-10.24-5.546667-23.04-5.546667-33.28 1.28l-63.146667 33.706666c-7.253333 3.84-14.933333 4.693333-23.04 3.84-19.2-2.986667-32.853333-21.76-29.866666-40.96l13.226666-82.346666c1.28-9.813333-1.706667-19.2-8.533333-26.453334L325.973333 393.813333c-4.693333-5.546667-8.533333-12.8-9.813333-20.053333-2.986667-19.2 11.093333-37.546667 30.293333-40.533333l72.533334-11.52c11.52-0.426667 21.76-7.68 26.453333-18.346667l33.28-70.826667c5.973333-11.946667 18.773333-20.48 32.853333-20.48s26.453333 7.68 32.853334 20.48l32.853333 70.4c4.693333 11.093333 14.933333 18.346667 27.306667 19.2l72.533333 11.093334c7.253333 1.28 14.506667 4.693333 20.053333 9.813333 13.653333 14.08 14.08 37.12 0.426667 50.773333z" p-id="6944"></path></svg>

diff --git a/src/assets/icons/icon-book.svg b/src/assets/icons/icon-book.svg
new file mode 100644
index 0000000..18760fe
--- /dev/null
+++ b/src/assets/icons/icon-book.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785865584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7995" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="7996"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-certi.svg b/src/assets/icons/icon-certi.svg
new file mode 100644
index 0000000..8615630
--- /dev/null
+++ b/src/assets/icons/icon-certi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785830314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6943" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M335.786667 938.666667s-47.786667-53.76-93.013334-98.133334c-48.213333-13.226667-96.853333-25.6-145.92-37.12L196.266667 631.466667c52.48 68.266667 144.64 127.146667 231.68 148.48L335.786667 938.666667zM789.333333 832c-45.226667 44.373333-101.546667 106.666667-101.546666 106.666667l-91.306667-158.72c87.04-21.333333 170.666667-79.786667 223.146667-148.48l107.52 171.946666c-0.426667 0.426667-73.386667 10.666667-137.813334 28.586667zM511.573333 85.333333c-173.226667 0-322.133333 157.44-322.133333 331.093334s148.906667 314.026667 322.133333 314.026666 322.133333-148.906667 322.133334-322.56S684.8 85.333333 511.573333 85.333333z m186.026667 308.48L641.28 452.266667c-7.68 7.68-11.52 18.773333-8.96 29.866666v1.28l12.8 79.36c1.28 7.68 0 15.786667-3.84 22.186667-9.813333 17.493333-31.573333 24.32-49.066667 14.506667l-64.853333-34.56c-10.24-5.546667-23.04-5.546667-33.28 1.28l-63.146667 33.706666c-7.253333 3.84-14.933333 4.693333-23.04 3.84-19.2-2.986667-32.853333-21.76-29.866666-40.96l13.226666-82.346666c1.28-9.813333-1.706667-19.2-8.533333-26.453334L325.973333 393.813333c-4.693333-5.546667-8.533333-12.8-9.813333-20.053333-2.986667-19.2 11.093333-37.546667 30.293333-40.533333l72.533334-11.52c11.52-0.426667 21.76-7.68 26.453333-18.346667l33.28-70.826667c5.973333-11.946667 18.773333-20.48 32.853333-20.48s26.453333 7.68 32.853334 20.48l32.853333 70.4c4.693333 11.093333 14.933333 18.346667 27.306667 19.2l72.533333 11.093334c7.253333 1.28 14.506667 4.693333 20.053333 9.813333 13.653333 14.08 14.08 37.12 0.426667 50.773333z" p-id="6944"></path></svg>
diff --git a/src/assets/icons/icon-line.svg b/src/assets/icons/icon-line.svg
new file mode 100644
index 0000000..f471055
--- /dev/null
+++ b/src/assets/icons/icon-line.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785758919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3233" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64z" p-id="3234"></path><path d="M247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z" p-id="3235"></path></svg>
\ No newline at end of file

diff --git a/src/assets/icons/icon-book.svg b/src/assets/icons/icon-book.svg
new file mode 100644
index 0000000..18760fe
--- /dev/null
+++ b/src/assets/icons/icon-book.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785865584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7995" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="7996"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-certi.svg b/src/assets/icons/icon-certi.svg
new file mode 100644
index 0000000..8615630
--- /dev/null
+++ b/src/assets/icons/icon-certi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785830314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6943" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M335.786667 938.666667s-47.786667-53.76-93.013334-98.133334c-48.213333-13.226667-96.853333-25.6-145.92-37.12L196.266667 631.466667c52.48 68.266667 144.64 127.146667 231.68 148.48L335.786667 938.666667zM789.333333 832c-45.226667 44.373333-101.546667 106.666667-101.546666 106.666667l-91.306667-158.72c87.04-21.333333 170.666667-79.786667 223.146667-148.48l107.52 171.946666c-0.426667 0.426667-73.386667 10.666667-137.813334 28.586667zM511.573333 85.333333c-173.226667 0-322.133333 157.44-322.133333 331.093334s148.906667 314.026667 322.133333 314.026666 322.133333-148.906667 322.133334-322.56S684.8 85.333333 511.573333 85.333333z m186.026667 308.48L641.28 452.266667c-7.68 7.68-11.52 18.773333-8.96 29.866666v1.28l12.8 79.36c1.28 7.68 0 15.786667-3.84 22.186667-9.813333 17.493333-31.573333 24.32-49.066667 14.506667l-64.853333-34.56c-10.24-5.546667-23.04-5.546667-33.28 1.28l-63.146667 33.706666c-7.253333 3.84-14.933333 4.693333-23.04 3.84-19.2-2.986667-32.853333-21.76-29.866666-40.96l13.226666-82.346666c1.28-9.813333-1.706667-19.2-8.533333-26.453334L325.973333 393.813333c-4.693333-5.546667-8.533333-12.8-9.813333-20.053333-2.986667-19.2 11.093333-37.546667 30.293333-40.533333l72.533334-11.52c11.52-0.426667 21.76-7.68 26.453333-18.346667l33.28-70.826667c5.973333-11.946667 18.773333-20.48 32.853333-20.48s26.453333 7.68 32.853334 20.48l32.853333 70.4c4.693333 11.093333 14.933333 18.346667 27.306667 19.2l72.533333 11.093334c7.253333 1.28 14.506667 4.693333 20.053333 9.813333 13.653333 14.08 14.08 37.12 0.426667 50.773333z" p-id="6944"></path></svg>
diff --git a/src/assets/icons/icon-line.svg b/src/assets/icons/icon-line.svg
new file mode 100644
index 0000000..f471055
--- /dev/null
+++ b/src/assets/icons/icon-line.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785758919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3233" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64z" p-id="3234"></path><path d="M247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z" p-id="3235"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-pie.svg b/src/assets/icons/icon-pie.svg
new file mode 100644
index 0000000..5ba1903
--- /dev/null
+++ b/src/assets/icons/icon-pie.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785797815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5066" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512a426.666667 426.666667 0 0 1 245.418667-386.346667l11.264-5.12a42.368 42.368 0 0 1 36.053333 76.672l-34.261333 17.749334A341.504 341.504 0 0 0 512 853.333333a341.504 341.504 0 0 0 295.552-170.453333l5.888-10.581333a42.666667 42.666667 0 0 1 75.648 39.381333l-3.754667 7.04A426.538667 426.538667 0 0 1 512 938.666667z m384-384h-341.333333a85.333333 85.333333 0 0 1-85.333334-85.333334V128a42.666667 42.666667 0 0 1 42.666667-42.666667c235.648 0 426.666667 191.018667 426.666667 426.666667a42.666667 42.666667 0 0 1-42.666667 42.666667z m-341.333333-358.272V426.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h235.605334a15.232 15.232 0 0 0 15.018666-17.92 341.546667 341.546667 0 0 0-269.824-274.346666 19.626667 19.626667 0 0 0-23.466666 19.328z" fill="#5D6E7F" p-id="5067"></path></svg>
\ No newline at end of file

diff --git a/src/assets/icons/icon-book.svg b/src/assets/icons/icon-book.svg
new file mode 100644
index 0000000..18760fe
--- /dev/null
+++ b/src/assets/icons/icon-book.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785865584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7995" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="7996"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-certi.svg b/src/assets/icons/icon-certi.svg
new file mode 100644
index 0000000..8615630
--- /dev/null
+++ b/src/assets/icons/icon-certi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785830314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6943" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M335.786667 938.666667s-47.786667-53.76-93.013334-98.133334c-48.213333-13.226667-96.853333-25.6-145.92-37.12L196.266667 631.466667c52.48 68.266667 144.64 127.146667 231.68 148.48L335.786667 938.666667zM789.333333 832c-45.226667 44.373333-101.546667 106.666667-101.546666 106.666667l-91.306667-158.72c87.04-21.333333 170.666667-79.786667 223.146667-148.48l107.52 171.946666c-0.426667 0.426667-73.386667 10.666667-137.813334 28.586667zM511.573333 85.333333c-173.226667 0-322.133333 157.44-322.133333 331.093334s148.906667 314.026667 322.133333 314.026666 322.133333-148.906667 322.133334-322.56S684.8 85.333333 511.573333 85.333333z m186.026667 308.48L641.28 452.266667c-7.68 7.68-11.52 18.773333-8.96 29.866666v1.28l12.8 79.36c1.28 7.68 0 15.786667-3.84 22.186667-9.813333 17.493333-31.573333 24.32-49.066667 14.506667l-64.853333-34.56c-10.24-5.546667-23.04-5.546667-33.28 1.28l-63.146667 33.706666c-7.253333 3.84-14.933333 4.693333-23.04 3.84-19.2-2.986667-32.853333-21.76-29.866666-40.96l13.226666-82.346666c1.28-9.813333-1.706667-19.2-8.533333-26.453334L325.973333 393.813333c-4.693333-5.546667-8.533333-12.8-9.813333-20.053333-2.986667-19.2 11.093333-37.546667 30.293333-40.533333l72.533334-11.52c11.52-0.426667 21.76-7.68 26.453333-18.346667l33.28-70.826667c5.973333-11.946667 18.773333-20.48 32.853333-20.48s26.453333 7.68 32.853334 20.48l32.853333 70.4c4.693333 11.093333 14.933333 18.346667 27.306667 19.2l72.533333 11.093334c7.253333 1.28 14.506667 4.693333 20.053333 9.813333 13.653333 14.08 14.08 37.12 0.426667 50.773333z" p-id="6944"></path></svg>
diff --git a/src/assets/icons/icon-line.svg b/src/assets/icons/icon-line.svg
new file mode 100644
index 0000000..f471055
--- /dev/null
+++ b/src/assets/icons/icon-line.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785758919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3233" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64z" p-id="3234"></path><path d="M247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z" p-id="3235"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-pie.svg b/src/assets/icons/icon-pie.svg
new file mode 100644
index 0000000..5ba1903
--- /dev/null
+++ b/src/assets/icons/icon-pie.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785797815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5066" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512a426.666667 426.666667 0 0 1 245.418667-386.346667l11.264-5.12a42.368 42.368 0 0 1 36.053333 76.672l-34.261333 17.749334A341.504 341.504 0 0 0 512 853.333333a341.504 341.504 0 0 0 295.552-170.453333l5.888-10.581333a42.666667 42.666667 0 0 1 75.648 39.381333l-3.754667 7.04A426.538667 426.538667 0 0 1 512 938.666667z m384-384h-341.333333a85.333333 85.333333 0 0 1-85.333334-85.333334V128a42.666667 42.666667 0 0 1 42.666667-42.666667c235.648 0 426.666667 191.018667 426.666667 426.666667a42.666667 42.666667 0 0 1-42.666667 42.666667z m-341.333333-358.272V426.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h235.605334a15.232 15.232 0 0 0 15.018666-17.92 341.546667 341.546667 0 0 0-269.824-274.346666 19.626667 19.626667 0 0 0-23.466666 19.328z" fill="#5D6E7F" p-id="5067"></path></svg>
\ No newline at end of file
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 6dc95ed..da02197 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -4,9 +4,14 @@
       "base": #4384ff
     )
   ),
+  $fill-color:(
+    "lighter":#f2f6ff
+  ),
   $table:(
     "header-bg-color":#f2f6ff,
-    "header-text-color":#444c59
+    "header-text-color":#444c59,
+    "row-hover-bg-color":#f2f6ff,
+
   ),
   $menu:(
     "base-level-padding": 15px,

diff --git a/src/assets/icons/icon-book.svg b/src/assets/icons/icon-book.svg
new file mode 100644
index 0000000..18760fe
--- /dev/null
+++ b/src/assets/icons/icon-book.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785865584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7995" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="7996"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-certi.svg b/src/assets/icons/icon-certi.svg
new file mode 100644
index 0000000..8615630
--- /dev/null
+++ b/src/assets/icons/icon-certi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785830314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6943" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M335.786667 938.666667s-47.786667-53.76-93.013334-98.133334c-48.213333-13.226667-96.853333-25.6-145.92-37.12L196.266667 631.466667c52.48 68.266667 144.64 127.146667 231.68 148.48L335.786667 938.666667zM789.333333 832c-45.226667 44.373333-101.546667 106.666667-101.546666 106.666667l-91.306667-158.72c87.04-21.333333 170.666667-79.786667 223.146667-148.48l107.52 171.946666c-0.426667 0.426667-73.386667 10.666667-137.813334 28.586667zM511.573333 85.333333c-173.226667 0-322.133333 157.44-322.133333 331.093334s148.906667 314.026667 322.133333 314.026666 322.133333-148.906667 322.133334-322.56S684.8 85.333333 511.573333 85.333333z m186.026667 308.48L641.28 452.266667c-7.68 7.68-11.52 18.773333-8.96 29.866666v1.28l12.8 79.36c1.28 7.68 0 15.786667-3.84 22.186667-9.813333 17.493333-31.573333 24.32-49.066667 14.506667l-64.853333-34.56c-10.24-5.546667-23.04-5.546667-33.28 1.28l-63.146667 33.706666c-7.253333 3.84-14.933333 4.693333-23.04 3.84-19.2-2.986667-32.853333-21.76-29.866666-40.96l13.226666-82.346666c1.28-9.813333-1.706667-19.2-8.533333-26.453334L325.973333 393.813333c-4.693333-5.546667-8.533333-12.8-9.813333-20.053333-2.986667-19.2 11.093333-37.546667 30.293333-40.533333l72.533334-11.52c11.52-0.426667 21.76-7.68 26.453333-18.346667l33.28-70.826667c5.973333-11.946667 18.773333-20.48 32.853333-20.48s26.453333 7.68 32.853334 20.48l32.853333 70.4c4.693333 11.093333 14.933333 18.346667 27.306667 19.2l72.533333 11.093334c7.253333 1.28 14.506667 4.693333 20.053333 9.813333 13.653333 14.08 14.08 37.12 0.426667 50.773333z" p-id="6944"></path></svg>
diff --git a/src/assets/icons/icon-line.svg b/src/assets/icons/icon-line.svg
new file mode 100644
index 0000000..f471055
--- /dev/null
+++ b/src/assets/icons/icon-line.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785758919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3233" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64z" p-id="3234"></path><path d="M247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z" p-id="3235"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-pie.svg b/src/assets/icons/icon-pie.svg
new file mode 100644
index 0000000..5ba1903
--- /dev/null
+++ b/src/assets/icons/icon-pie.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785797815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5066" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512a426.666667 426.666667 0 0 1 245.418667-386.346667l11.264-5.12a42.368 42.368 0 0 1 36.053333 76.672l-34.261333 17.749334A341.504 341.504 0 0 0 512 853.333333a341.504 341.504 0 0 0 295.552-170.453333l5.888-10.581333a42.666667 42.666667 0 0 1 75.648 39.381333l-3.754667 7.04A426.538667 426.538667 0 0 1 512 938.666667z m384-384h-341.333333a85.333333 85.333333 0 0 1-85.333334-85.333334V128a42.666667 42.666667 0 0 1 42.666667-42.666667c235.648 0 426.666667 191.018667 426.666667 426.666667a42.666667 42.666667 0 0 1-42.666667 42.666667z m-341.333333-358.272V426.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h235.605334a15.232 15.232 0 0 0 15.018666-17.92 341.546667 341.546667 0 0 0-269.824-274.346666 19.626667 19.626667 0 0 0-23.466666 19.328z" fill="#5D6E7F" p-id="5067"></path></svg>
\ No newline at end of file
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 6dc95ed..da02197 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -4,9 +4,14 @@
       "base": #4384ff
     )
   ),
+  $fill-color:(
+    "lighter":#f2f6ff
+  ),
   $table:(
     "header-bg-color":#f2f6ff,
-    "header-text-color":#444c59
+    "header-text-color":#444c59,
+    "row-hover-bg-color":#f2f6ff,
+
   ),
   $menu:(
     "base-level-padding": 15px,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index ce5d797..ca9df2c 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -32,7 +32,7 @@
         top: 50,
         left: 10,
         right: 20,
-        bottom: 5,
+        bottom: 10,
         containLabel: true, // 是否包含坐标轴的刻度标签
       }
     },
@@ -244,7 +244,7 @@
         splitLine: {
           show: true,
           lineStyle: {
-            color: ['#7a6b74'],
+            color: ['#bfbfbf'],
             type: 'dashed',
           },
         },
@@ -324,8 +324,11 @@
 // 刷新图表
 function refreshChart() {
   if (chart) {
+    console.log('渲染折线图')
+
     const option = buildOption()
     chart.setOption(option as unknown as ECBasicOption, true)
+    chart.resize()
   }
 }
 

diff --git a/src/assets/icons/icon-book.svg b/src/assets/icons/icon-book.svg
new file mode 100644
index 0000000..18760fe
--- /dev/null
+++ b/src/assets/icons/icon-book.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785865584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7995" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="7996"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-certi.svg b/src/assets/icons/icon-certi.svg
new file mode 100644
index 0000000..8615630
--- /dev/null
+++ b/src/assets/icons/icon-certi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785830314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6943" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M335.786667 938.666667s-47.786667-53.76-93.013334-98.133334c-48.213333-13.226667-96.853333-25.6-145.92-37.12L196.266667 631.466667c52.48 68.266667 144.64 127.146667 231.68 148.48L335.786667 938.666667zM789.333333 832c-45.226667 44.373333-101.546667 106.666667-101.546666 106.666667l-91.306667-158.72c87.04-21.333333 170.666667-79.786667 223.146667-148.48l107.52 171.946666c-0.426667 0.426667-73.386667 10.666667-137.813334 28.586667zM511.573333 85.333333c-173.226667 0-322.133333 157.44-322.133333 331.093334s148.906667 314.026667 322.133333 314.026666 322.133333-148.906667 322.133334-322.56S684.8 85.333333 511.573333 85.333333z m186.026667 308.48L641.28 452.266667c-7.68 7.68-11.52 18.773333-8.96 29.866666v1.28l12.8 79.36c1.28 7.68 0 15.786667-3.84 22.186667-9.813333 17.493333-31.573333 24.32-49.066667 14.506667l-64.853333-34.56c-10.24-5.546667-23.04-5.546667-33.28 1.28l-63.146667 33.706666c-7.253333 3.84-14.933333 4.693333-23.04 3.84-19.2-2.986667-32.853333-21.76-29.866666-40.96l13.226666-82.346666c1.28-9.813333-1.706667-19.2-8.533333-26.453334L325.973333 393.813333c-4.693333-5.546667-8.533333-12.8-9.813333-20.053333-2.986667-19.2 11.093333-37.546667 30.293333-40.533333l72.533334-11.52c11.52-0.426667 21.76-7.68 26.453333-18.346667l33.28-70.826667c5.973333-11.946667 18.773333-20.48 32.853333-20.48s26.453333 7.68 32.853334 20.48l32.853333 70.4c4.693333 11.093333 14.933333 18.346667 27.306667 19.2l72.533333 11.093334c7.253333 1.28 14.506667 4.693333 20.053333 9.813333 13.653333 14.08 14.08 37.12 0.426667 50.773333z" p-id="6944"></path></svg>
diff --git a/src/assets/icons/icon-line.svg b/src/assets/icons/icon-line.svg
new file mode 100644
index 0000000..f471055
--- /dev/null
+++ b/src/assets/icons/icon-line.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785758919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3233" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64z" p-id="3234"></path><path d="M247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z" p-id="3235"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-pie.svg b/src/assets/icons/icon-pie.svg
new file mode 100644
index 0000000..5ba1903
--- /dev/null
+++ b/src/assets/icons/icon-pie.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785797815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5066" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512a426.666667 426.666667 0 0 1 245.418667-386.346667l11.264-5.12a42.368 42.368 0 0 1 36.053333 76.672l-34.261333 17.749334A341.504 341.504 0 0 0 512 853.333333a341.504 341.504 0 0 0 295.552-170.453333l5.888-10.581333a42.666667 42.666667 0 0 1 75.648 39.381333l-3.754667 7.04A426.538667 426.538667 0 0 1 512 938.666667z m384-384h-341.333333a85.333333 85.333333 0 0 1-85.333334-85.333334V128a42.666667 42.666667 0 0 1 42.666667-42.666667c235.648 0 426.666667 191.018667 426.666667 426.666667a42.666667 42.666667 0 0 1-42.666667 42.666667z m-341.333333-358.272V426.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h235.605334a15.232 15.232 0 0 0 15.018666-17.92 341.546667 341.546667 0 0 0-269.824-274.346666 19.626667 19.626667 0 0 0-23.466666 19.328z" fill="#5D6E7F" p-id="5067"></path></svg>
\ No newline at end of file
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 6dc95ed..da02197 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -4,9 +4,14 @@
       "base": #4384ff
     )
   ),
+  $fill-color:(
+    "lighter":#f2f6ff
+  ),
   $table:(
     "header-bg-color":#f2f6ff,
-    "header-text-color":#444c59
+    "header-text-color":#444c59,
+    "row-hover-bg-color":#f2f6ff,
+
   ),
   $menu:(
     "base-level-padding": 15px,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index ce5d797..ca9df2c 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -32,7 +32,7 @@
         top: 50,
         left: 10,
         right: 20,
-        bottom: 5,
+        bottom: 10,
         containLabel: true, // 是否包含坐标轴的刻度标签
       }
     },
@@ -244,7 +244,7 @@
         splitLine: {
           show: true,
           lineStyle: {
-            color: ['#7a6b74'],
+            color: ['#bfbfbf'],
             type: 'dashed',
           },
         },
@@ -324,8 +324,11 @@
 // 刷新图表
 function refreshChart() {
   if (chart) {
+    console.log('渲染折线图')
+
     const option = buildOption()
     chart.setOption(option as unknown as ECBasicOption, true)
+    chart.resize()
   }
 }
 
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 4b1aa79..74d506a 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="PieChart">
 import type { ECharts } from 'echarts'
-import { init } from 'echarts'
+import { init, number } from 'echarts'
 import type { Ref } from 'vue'
 import type { ECBasicOption } from 'echarts/types/dist/shared'
 import type { pieDataI, pieOption, pieSeriesOption } from './echart-interface'
@@ -34,7 +34,7 @@
     type: Object,
     default: () => {
       return {
-        show: false,
+        show: true,
         orient: 'vertical',
         right: '20%',
         top: 'center',
@@ -78,6 +78,13 @@
     },
   },
   /**
+   * 距离容器右侧距离，默认0，为legend在右侧时做准备
+   */
+  right: {
+    type: [Number, String],
+    default: 0,
+  },
+  /**
    * 是否要展示成玫瑰图，或玫瑰图类型:radius|area
    */
   roseType: {
@@ -114,7 +121,7 @@
       return {
         top: '10%',
         left: '5%',
-        right: '5%',
+        right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
       }
@@ -201,12 +208,13 @@
       radius: props.radius as string[], // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
+      right: props.right,
       label: {
         show: props.labelShow,
         position: 'center',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 22,
-        fontWeight: 'bolder',
+        fontSize: 20,
+        fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
@@ -243,6 +251,7 @@
   if (chart) {
     const option = buildOption()
     chart.setOption(option as unknown as ECBasicOption, true)
+    chart.resize()
   }
 }
 

diff --git a/src/assets/icons/icon-book.svg b/src/assets/icons/icon-book.svg
new file mode 100644
index 0000000..18760fe
--- /dev/null
+++ b/src/assets/icons/icon-book.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785865584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7995" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="7996"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-certi.svg b/src/assets/icons/icon-certi.svg
new file mode 100644
index 0000000..8615630
--- /dev/null
+++ b/src/assets/icons/icon-certi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785830314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6943" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M335.786667 938.666667s-47.786667-53.76-93.013334-98.133334c-48.213333-13.226667-96.853333-25.6-145.92-37.12L196.266667 631.466667c52.48 68.266667 144.64 127.146667 231.68 148.48L335.786667 938.666667zM789.333333 832c-45.226667 44.373333-101.546667 106.666667-101.546666 106.666667l-91.306667-158.72c87.04-21.333333 170.666667-79.786667 223.146667-148.48l107.52 171.946666c-0.426667 0.426667-73.386667 10.666667-137.813334 28.586667zM511.573333 85.333333c-173.226667 0-322.133333 157.44-322.133333 331.093334s148.906667 314.026667 322.133333 314.026666 322.133333-148.906667 322.133334-322.56S684.8 85.333333 511.573333 85.333333z m186.026667 308.48L641.28 452.266667c-7.68 7.68-11.52 18.773333-8.96 29.866666v1.28l12.8 79.36c1.28 7.68 0 15.786667-3.84 22.186667-9.813333 17.493333-31.573333 24.32-49.066667 14.506667l-64.853333-34.56c-10.24-5.546667-23.04-5.546667-33.28 1.28l-63.146667 33.706666c-7.253333 3.84-14.933333 4.693333-23.04 3.84-19.2-2.986667-32.853333-21.76-29.866666-40.96l13.226666-82.346666c1.28-9.813333-1.706667-19.2-8.533333-26.453334L325.973333 393.813333c-4.693333-5.546667-8.533333-12.8-9.813333-20.053333-2.986667-19.2 11.093333-37.546667 30.293333-40.533333l72.533334-11.52c11.52-0.426667 21.76-7.68 26.453333-18.346667l33.28-70.826667c5.973333-11.946667 18.773333-20.48 32.853333-20.48s26.453333 7.68 32.853334 20.48l32.853333 70.4c4.693333 11.093333 14.933333 18.346667 27.306667 19.2l72.533333 11.093334c7.253333 1.28 14.506667 4.693333 20.053333 9.813333 13.653333 14.08 14.08 37.12 0.426667 50.773333z" p-id="6944"></path></svg>
diff --git a/src/assets/icons/icon-line.svg b/src/assets/icons/icon-line.svg
new file mode 100644
index 0000000..f471055
--- /dev/null
+++ b/src/assets/icons/icon-line.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785758919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3233" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64z" p-id="3234"></path><path d="M247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z" p-id="3235"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-pie.svg b/src/assets/icons/icon-pie.svg
new file mode 100644
index 0000000..5ba1903
--- /dev/null
+++ b/src/assets/icons/icon-pie.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785797815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5066" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512a426.666667 426.666667 0 0 1 245.418667-386.346667l11.264-5.12a42.368 42.368 0 0 1 36.053333 76.672l-34.261333 17.749334A341.504 341.504 0 0 0 512 853.333333a341.504 341.504 0 0 0 295.552-170.453333l5.888-10.581333a42.666667 42.666667 0 0 1 75.648 39.381333l-3.754667 7.04A426.538667 426.538667 0 0 1 512 938.666667z m384-384h-341.333333a85.333333 85.333333 0 0 1-85.333334-85.333334V128a42.666667 42.666667 0 0 1 42.666667-42.666667c235.648 0 426.666667 191.018667 426.666667 426.666667a42.666667 42.666667 0 0 1-42.666667 42.666667z m-341.333333-358.272V426.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h235.605334a15.232 15.232 0 0 0 15.018666-17.92 341.546667 341.546667 0 0 0-269.824-274.346666 19.626667 19.626667 0 0 0-23.466666 19.328z" fill="#5D6E7F" p-id="5067"></path></svg>
\ No newline at end of file
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 6dc95ed..da02197 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -4,9 +4,14 @@
       "base": #4384ff
     )
   ),
+  $fill-color:(
+    "lighter":#f2f6ff
+  ),
   $table:(
     "header-bg-color":#f2f6ff,
-    "header-text-color":#444c59
+    "header-text-color":#444c59,
+    "row-hover-bg-color":#f2f6ff,
+
   ),
   $menu:(
     "base-level-padding": 15px,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index ce5d797..ca9df2c 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -32,7 +32,7 @@
         top: 50,
         left: 10,
         right: 20,
-        bottom: 5,
+        bottom: 10,
         containLabel: true, // 是否包含坐标轴的刻度标签
       }
     },
@@ -244,7 +244,7 @@
         splitLine: {
           show: true,
           lineStyle: {
-            color: ['#7a6b74'],
+            color: ['#bfbfbf'],
             type: 'dashed',
           },
         },
@@ -324,8 +324,11 @@
 // 刷新图表
 function refreshChart() {
   if (chart) {
+    console.log('渲染折线图')
+
     const option = buildOption()
     chart.setOption(option as unknown as ECBasicOption, true)
+    chart.resize()
   }
 }
 
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 4b1aa79..74d506a 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="PieChart">
 import type { ECharts } from 'echarts'
-import { init } from 'echarts'
+import { init, number } from 'echarts'
 import type { Ref } from 'vue'
 import type { ECBasicOption } from 'echarts/types/dist/shared'
 import type { pieDataI, pieOption, pieSeriesOption } from './echart-interface'
@@ -34,7 +34,7 @@
     type: Object,
     default: () => {
       return {
-        show: false,
+        show: true,
         orient: 'vertical',
         right: '20%',
         top: 'center',
@@ -78,6 +78,13 @@
     },
   },
   /**
+   * 距离容器右侧距离，默认0，为legend在右侧时做准备
+   */
+  right: {
+    type: [Number, String],
+    default: 0,
+  },
+  /**
    * 是否要展示成玫瑰图，或玫瑰图类型:radius|area
    */
   roseType: {
@@ -114,7 +121,7 @@
       return {
         top: '10%',
         left: '5%',
-        right: '5%',
+        right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
       }
@@ -201,12 +208,13 @@
       radius: props.radius as string[], // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
+      right: props.right,
       label: {
         show: props.labelShow,
         position: 'center',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 22,
-        fontWeight: 'bolder',
+        fontSize: 20,
+        fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
@@ -243,6 +251,7 @@
   if (chart) {
     const option = buildOption()
     chart.setOption(option as unknown as ECBasicOption, true)
+    chart.resize()
   }
 }
 
diff --git a/src/components/Echart/echart-interface.ts b/src/components/Echart/echart-interface.ts
index 2308961..fd7cb73 100644
--- a/src/components/Echart/echart-interface.ts
+++ b/src/components/Echart/echart-interface.ts
@@ -191,6 +191,7 @@
   roseType?: string | boolean // 玫瑰图类型
   radius?: string[] // 饼图的半径[内半径，外半径]
   center?: [string, string] // 圆心坐标[横坐标，纵坐标]
+  right?: number | string // 距离容器右侧距离
   startAngle?: number // 开始的角度 //起始角度，支持范围[0, 360]。
   label?: { // 饼图图形上的文本标签
     show?: boolean // 是否显示

diff --git a/src/assets/icons/icon-book.svg b/src/assets/icons/icon-book.svg
new file mode 100644
index 0000000..18760fe
--- /dev/null
+++ b/src/assets/icons/icon-book.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785865584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7995" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="7996"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-certi.svg b/src/assets/icons/icon-certi.svg
new file mode 100644
index 0000000..8615630
--- /dev/null
+++ b/src/assets/icons/icon-certi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785830314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6943" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M335.786667 938.666667s-47.786667-53.76-93.013334-98.133334c-48.213333-13.226667-96.853333-25.6-145.92-37.12L196.266667 631.466667c52.48 68.266667 144.64 127.146667 231.68 148.48L335.786667 938.666667zM789.333333 832c-45.226667 44.373333-101.546667 106.666667-101.546666 106.666667l-91.306667-158.72c87.04-21.333333 170.666667-79.786667 223.146667-148.48l107.52 171.946666c-0.426667 0.426667-73.386667 10.666667-137.813334 28.586667zM511.573333 85.333333c-173.226667 0-322.133333 157.44-322.133333 331.093334s148.906667 314.026667 322.133333 314.026666 322.133333-148.906667 322.133334-322.56S684.8 85.333333 511.573333 85.333333z m186.026667 308.48L641.28 452.266667c-7.68 7.68-11.52 18.773333-8.96 29.866666v1.28l12.8 79.36c1.28 7.68 0 15.786667-3.84 22.186667-9.813333 17.493333-31.573333 24.32-49.066667 14.506667l-64.853333-34.56c-10.24-5.546667-23.04-5.546667-33.28 1.28l-63.146667 33.706666c-7.253333 3.84-14.933333 4.693333-23.04 3.84-19.2-2.986667-32.853333-21.76-29.866666-40.96l13.226666-82.346666c1.28-9.813333-1.706667-19.2-8.533333-26.453334L325.973333 393.813333c-4.693333-5.546667-8.533333-12.8-9.813333-20.053333-2.986667-19.2 11.093333-37.546667 30.293333-40.533333l72.533334-11.52c11.52-0.426667 21.76-7.68 26.453333-18.346667l33.28-70.826667c5.973333-11.946667 18.773333-20.48 32.853333-20.48s26.453333 7.68 32.853334 20.48l32.853333 70.4c4.693333 11.093333 14.933333 18.346667 27.306667 19.2l72.533333 11.093334c7.253333 1.28 14.506667 4.693333 20.053333 9.813333 13.653333 14.08 14.08 37.12 0.426667 50.773333z" p-id="6944"></path></svg>
diff --git a/src/assets/icons/icon-line.svg b/src/assets/icons/icon-line.svg
new file mode 100644
index 0000000..f471055
--- /dev/null
+++ b/src/assets/icons/icon-line.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785758919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3233" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64z" p-id="3234"></path><path d="M247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z" p-id="3235"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-pie.svg b/src/assets/icons/icon-pie.svg
new file mode 100644
index 0000000..5ba1903
--- /dev/null
+++ b/src/assets/icons/icon-pie.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785797815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5066" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512a426.666667 426.666667 0 0 1 245.418667-386.346667l11.264-5.12a42.368 42.368 0 0 1 36.053333 76.672l-34.261333 17.749334A341.504 341.504 0 0 0 512 853.333333a341.504 341.504 0 0 0 295.552-170.453333l5.888-10.581333a42.666667 42.666667 0 0 1 75.648 39.381333l-3.754667 7.04A426.538667 426.538667 0 0 1 512 938.666667z m384-384h-341.333333a85.333333 85.333333 0 0 1-85.333334-85.333334V128a42.666667 42.666667 0 0 1 42.666667-42.666667c235.648 0 426.666667 191.018667 426.666667 426.666667a42.666667 42.666667 0 0 1-42.666667 42.666667z m-341.333333-358.272V426.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h235.605334a15.232 15.232 0 0 0 15.018666-17.92 341.546667 341.546667 0 0 0-269.824-274.346666 19.626667 19.626667 0 0 0-23.466666 19.328z" fill="#5D6E7F" p-id="5067"></path></svg>
\ No newline at end of file
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 6dc95ed..da02197 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -4,9 +4,14 @@
       "base": #4384ff
     )
   ),
+  $fill-color:(
+    "lighter":#f2f6ff
+  ),
   $table:(
     "header-bg-color":#f2f6ff,
-    "header-text-color":#444c59
+    "header-text-color":#444c59,
+    "row-hover-bg-color":#f2f6ff,
+
   ),
   $menu:(
     "base-level-padding": 15px,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index ce5d797..ca9df2c 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -32,7 +32,7 @@
         top: 50,
         left: 10,
         right: 20,
-        bottom: 5,
+        bottom: 10,
         containLabel: true, // 是否包含坐标轴的刻度标签
       }
     },
@@ -244,7 +244,7 @@
         splitLine: {
           show: true,
           lineStyle: {
-            color: ['#7a6b74'],
+            color: ['#bfbfbf'],
             type: 'dashed',
           },
         },
@@ -324,8 +324,11 @@
 // 刷新图表
 function refreshChart() {
   if (chart) {
+    console.log('渲染折线图')
+
     const option = buildOption()
     chart.setOption(option as unknown as ECBasicOption, true)
+    chart.resize()
   }
 }
 
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 4b1aa79..74d506a 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="PieChart">
 import type { ECharts } from 'echarts'
-import { init } from 'echarts'
+import { init, number } from 'echarts'
 import type { Ref } from 'vue'
 import type { ECBasicOption } from 'echarts/types/dist/shared'
 import type { pieDataI, pieOption, pieSeriesOption } from './echart-interface'
@@ -34,7 +34,7 @@
     type: Object,
     default: () => {
       return {
-        show: false,
+        show: true,
         orient: 'vertical',
         right: '20%',
         top: 'center',
@@ -78,6 +78,13 @@
     },
   },
   /**
+   * 距离容器右侧距离，默认0，为legend在右侧时做准备
+   */
+  right: {
+    type: [Number, String],
+    default: 0,
+  },
+  /**
    * 是否要展示成玫瑰图，或玫瑰图类型:radius|area
    */
   roseType: {
@@ -114,7 +121,7 @@
       return {
         top: '10%',
         left: '5%',
-        right: '5%',
+        right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
       }
@@ -201,12 +208,13 @@
       radius: props.radius as string[], // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
+      right: props.right,
       label: {
         show: props.labelShow,
         position: 'center',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 22,
-        fontWeight: 'bolder',
+        fontSize: 20,
+        fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
@@ -243,6 +251,7 @@
   if (chart) {
     const option = buildOption()
     chart.setOption(option as unknown as ECBasicOption, true)
+    chart.resize()
   }
 }
 
diff --git a/src/components/Echart/echart-interface.ts b/src/components/Echart/echart-interface.ts
index 2308961..fd7cb73 100644
--- a/src/components/Echart/echart-interface.ts
+++ b/src/components/Echart/echart-interface.ts
@@ -191,6 +191,7 @@
   roseType?: string | boolean // 玫瑰图类型
   radius?: string[] // 饼图的半径[内半径，外半径]
   center?: [string, string] // 圆心坐标[横坐标，纵坐标]
+  right?: number | string // 距离容器右侧距离
   startAngle?: number // 开始的角度 //起始角度，支持范围[0, 360]。
   label?: { // 饼图图形上的文本标签
     show?: boolean // 是否显示
diff --git a/src/components/benchCol/index.vue b/src/components/benchCol/index.vue
index 8bc659d..6f816d8 100644
--- a/src/components/benchCol/index.vue
+++ b/src/components/benchCol/index.vue
@@ -5,46 +5,92 @@
     type: String,
     default: '',
   },
+  icon: {
+    type: String,
+    default: '',
+  },
   pathUrl: {
     type: String,
     default: '',
   },
   width: {
     type: String,
-    default: '',
+    default: '100%',
   },
   height: {
-    type: String,
+    type: [String, Number],
     default: '',
   },
 })
 </script>
 
 <template>
-  <div class="bench-left-top" :style="{ width, height }">
-    <div class="bench-title">
-      <h3 v-if="title !== ''">
+  <div class="bench-left-top" :style="{ height: typeof height == 'string' ? height : `${height}px` }">
+    <div v-if="title" class="bench-title">
+      <el-icon v-if="icon" :name="icon" class="title-icon">
+        <svg-icon :name="icon" />
+      </el-icon>
+      <div class="title">
         {{ title }}
-      </h3>
-      <span v-if="pathUrl !== ''" style="cursor: pointer;font-size: 14px; color: #ccc;" @click="$router.push(pathUrl)">更多 ></span>
+      </div>
+      <span v-if="pathUrl !== ''" class="more" @click="$router.push(pathUrl)">更多 ></span>
     </div>
-    <slot />
+    <div class="content" :style="{ height: typeof height == 'string' ? height : `${height - 50}px` }">
+      <slot />
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.bench-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  overflow: hidden;
-}
 // 样式
 .bench-left-top {
   border-radius: 10px;
-  margin-top: 1%;
   background-color: #fff;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+
+  .bench-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    height: 30px;
+    overflow: hidden;
+
+    .title-icon {
+      width: 14px;
+      height: 14px;
+      font-size: 14px;
+      line-height: 16px;
+      color: #3d7eff;
+      margin-right: 5px;
+    }
+
+    .title {
+      color: #000;
+      font-size: 16px;
+      flex: 1;
+    }
+
+    .more {
+      cursor: pointer;
+      font-size: 14px;
+      color: #ccc;
+    }
+  }
+
+  .content {
+    flex: 1;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .bench-title + .content {
+    padding-top: 10px;
+  }
 }
 </style>
 

diff --git a/src/assets/icons/icon-book.svg b/src/assets/icons/icon-book.svg
new file mode 100644
index 0000000..18760fe
--- /dev/null
+++ b/src/assets/icons/icon-book.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785865584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7995" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="7996"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-certi.svg b/src/assets/icons/icon-certi.svg
new file mode 100644
index 0000000..8615630
--- /dev/null
+++ b/src/assets/icons/icon-certi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785830314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6943" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M335.786667 938.666667s-47.786667-53.76-93.013334-98.133334c-48.213333-13.226667-96.853333-25.6-145.92-37.12L196.266667 631.466667c52.48 68.266667 144.64 127.146667 231.68 148.48L335.786667 938.666667zM789.333333 832c-45.226667 44.373333-101.546667 106.666667-101.546666 106.666667l-91.306667-158.72c87.04-21.333333 170.666667-79.786667 223.146667-148.48l107.52 171.946666c-0.426667 0.426667-73.386667 10.666667-137.813334 28.586667zM511.573333 85.333333c-173.226667 0-322.133333 157.44-322.133333 331.093334s148.906667 314.026667 322.133333 314.026666 322.133333-148.906667 322.133334-322.56S684.8 85.333333 511.573333 85.333333z m186.026667 308.48L641.28 452.266667c-7.68 7.68-11.52 18.773333-8.96 29.866666v1.28l12.8 79.36c1.28 7.68 0 15.786667-3.84 22.186667-9.813333 17.493333-31.573333 24.32-49.066667 14.506667l-64.853333-34.56c-10.24-5.546667-23.04-5.546667-33.28 1.28l-63.146667 33.706666c-7.253333 3.84-14.933333 4.693333-23.04 3.84-19.2-2.986667-32.853333-21.76-29.866666-40.96l13.226666-82.346666c1.28-9.813333-1.706667-19.2-8.533333-26.453334L325.973333 393.813333c-4.693333-5.546667-8.533333-12.8-9.813333-20.053333-2.986667-19.2 11.093333-37.546667 30.293333-40.533333l72.533334-11.52c11.52-0.426667 21.76-7.68 26.453333-18.346667l33.28-70.826667c5.973333-11.946667 18.773333-20.48 32.853333-20.48s26.453333 7.68 32.853334 20.48l32.853333 70.4c4.693333 11.093333 14.933333 18.346667 27.306667 19.2l72.533333 11.093334c7.253333 1.28 14.506667 4.693333 20.053333 9.813333 13.653333 14.08 14.08 37.12 0.426667 50.773333z" p-id="6944"></path></svg>
diff --git a/src/assets/icons/icon-line.svg b/src/assets/icons/icon-line.svg
new file mode 100644
index 0000000..f471055
--- /dev/null
+++ b/src/assets/icons/icon-line.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785758919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3233" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64z" p-id="3234"></path><path d="M247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z" p-id="3235"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-pie.svg b/src/assets/icons/icon-pie.svg
new file mode 100644
index 0000000..5ba1903
--- /dev/null
+++ b/src/assets/icons/icon-pie.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785797815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5066" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512a426.666667 426.666667 0 0 1 245.418667-386.346667l11.264-5.12a42.368 42.368 0 0 1 36.053333 76.672l-34.261333 17.749334A341.504 341.504 0 0 0 512 853.333333a341.504 341.504 0 0 0 295.552-170.453333l5.888-10.581333a42.666667 42.666667 0 0 1 75.648 39.381333l-3.754667 7.04A426.538667 426.538667 0 0 1 512 938.666667z m384-384h-341.333333a85.333333 85.333333 0 0 1-85.333334-85.333334V128a42.666667 42.666667 0 0 1 42.666667-42.666667c235.648 0 426.666667 191.018667 426.666667 426.666667a42.666667 42.666667 0 0 1-42.666667 42.666667z m-341.333333-358.272V426.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h235.605334a15.232 15.232 0 0 0 15.018666-17.92 341.546667 341.546667 0 0 0-269.824-274.346666 19.626667 19.626667 0 0 0-23.466666 19.328z" fill="#5D6E7F" p-id="5067"></path></svg>
\ No newline at end of file
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 6dc95ed..da02197 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -4,9 +4,14 @@
       "base": #4384ff
     )
   ),
+  $fill-color:(
+    "lighter":#f2f6ff
+  ),
   $table:(
     "header-bg-color":#f2f6ff,
-    "header-text-color":#444c59
+    "header-text-color":#444c59,
+    "row-hover-bg-color":#f2f6ff,
+
   ),
   $menu:(
     "base-level-padding": 15px,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index ce5d797..ca9df2c 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -32,7 +32,7 @@
         top: 50,
         left: 10,
         right: 20,
-        bottom: 5,
+        bottom: 10,
         containLabel: true, // 是否包含坐标轴的刻度标签
       }
     },
@@ -244,7 +244,7 @@
         splitLine: {
           show: true,
           lineStyle: {
-            color: ['#7a6b74'],
+            color: ['#bfbfbf'],
             type: 'dashed',
           },
         },
@@ -324,8 +324,11 @@
 // 刷新图表
 function refreshChart() {
   if (chart) {
+    console.log('渲染折线图')
+
     const option = buildOption()
     chart.setOption(option as unknown as ECBasicOption, true)
+    chart.resize()
   }
 }
 
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 4b1aa79..74d506a 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="PieChart">
 import type { ECharts } from 'echarts'
-import { init } from 'echarts'
+import { init, number } from 'echarts'
 import type { Ref } from 'vue'
 import type { ECBasicOption } from 'echarts/types/dist/shared'
 import type { pieDataI, pieOption, pieSeriesOption } from './echart-interface'
@@ -34,7 +34,7 @@
     type: Object,
     default: () => {
       return {
-        show: false,
+        show: true,
         orient: 'vertical',
         right: '20%',
         top: 'center',
@@ -78,6 +78,13 @@
     },
   },
   /**
+   * 距离容器右侧距离，默认0，为legend在右侧时做准备
+   */
+  right: {
+    type: [Number, String],
+    default: 0,
+  },
+  /**
    * 是否要展示成玫瑰图，或玫瑰图类型:radius|area
    */
   roseType: {
@@ -114,7 +121,7 @@
       return {
         top: '10%',
         left: '5%',
-        right: '5%',
+        right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
       }
@@ -201,12 +208,13 @@
       radius: props.radius as string[], // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
+      right: props.right,
       label: {
         show: props.labelShow,
         position: 'center',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 22,
-        fontWeight: 'bolder',
+        fontSize: 20,
+        fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
@@ -243,6 +251,7 @@
   if (chart) {
     const option = buildOption()
     chart.setOption(option as unknown as ECBasicOption, true)
+    chart.resize()
   }
 }
 
diff --git a/src/components/Echart/echart-interface.ts b/src/components/Echart/echart-interface.ts
index 2308961..fd7cb73 100644
--- a/src/components/Echart/echart-interface.ts
+++ b/src/components/Echart/echart-interface.ts
@@ -191,6 +191,7 @@
   roseType?: string | boolean // 玫瑰图类型
   radius?: string[] // 饼图的半径[内半径，外半径]
   center?: [string, string] // 圆心坐标[横坐标，纵坐标]
+  right?: number | string // 距离容器右侧距离
   startAngle?: number // 开始的角度 //起始角度，支持范围[0, 360]。
   label?: { // 饼图图形上的文本标签
     show?: boolean // 是否显示
diff --git a/src/components/benchCol/index.vue b/src/components/benchCol/index.vue
index 8bc659d..6f816d8 100644
--- a/src/components/benchCol/index.vue
+++ b/src/components/benchCol/index.vue
@@ -5,46 +5,92 @@
     type: String,
     default: '',
   },
+  icon: {
+    type: String,
+    default: '',
+  },
   pathUrl: {
     type: String,
     default: '',
   },
   width: {
     type: String,
-    default: '',
+    default: '100%',
   },
   height: {
-    type: String,
+    type: [String, Number],
     default: '',
   },
 })
 </script>
 
 <template>
-  <div class="bench-left-top" :style="{ width, height }">
-    <div class="bench-title">
-      <h3 v-if="title !== ''">
+  <div class="bench-left-top" :style="{ height: typeof height == 'string' ? height : `${height}px` }">
+    <div v-if="title" class="bench-title">
+      <el-icon v-if="icon" :name="icon" class="title-icon">
+        <svg-icon :name="icon" />
+      </el-icon>
+      <div class="title">
         {{ title }}
-      </h3>
-      <span v-if="pathUrl !== ''" style="cursor: pointer;font-size: 14px; color: #ccc;" @click="$router.push(pathUrl)">更多 ></span>
+      </div>
+      <span v-if="pathUrl !== ''" class="more" @click="$router.push(pathUrl)">更多 ></span>
     </div>
-    <slot />
+    <div class="content" :style="{ height: typeof height == 'string' ? height : `${height - 50}px` }">
+      <slot />
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.bench-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  overflow: hidden;
-}
 // 样式
 .bench-left-top {
   border-radius: 10px;
-  margin-top: 1%;
   background-color: #fff;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+
+  .bench-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    height: 30px;
+    overflow: hidden;
+
+    .title-icon {
+      width: 14px;
+      height: 14px;
+      font-size: 14px;
+      line-height: 16px;
+      color: #3d7eff;
+      margin-right: 5px;
+    }
+
+    .title {
+      color: #000;
+      font-size: 16px;
+      flex: 1;
+    }
+
+    .more {
+      cursor: pointer;
+      font-size: 14px;
+      color: #ccc;
+    }
+  }
+
+  .content {
+    flex: 1;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .bench-title + .content {
+    padding-top: 10px;
+  }
 }
 </style>
 
diff --git a/src/router/modules/measure.ts b/src/router/modules/measure.ts
index f8c750b..3676c67 100644
--- a/src/router/modules/measure.ts
+++ b/src/router/modules/measure.ts
@@ -23,6 +23,7 @@
           auth: '/measure/bench',
           sidebar: false,
           breadcrumb: true,
+          activeMenu: '/bench',
         },
       },
     ],

diff --git a/src/assets/icons/icon-book.svg b/src/assets/icons/icon-book.svg
new file mode 100644
index 0000000..18760fe
--- /dev/null
+++ b/src/assets/icons/icon-book.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785865584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7995" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="7996"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-certi.svg b/src/assets/icons/icon-certi.svg
new file mode 100644
index 0000000..8615630
--- /dev/null
+++ b/src/assets/icons/icon-certi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785830314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6943" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M335.786667 938.666667s-47.786667-53.76-93.013334-98.133334c-48.213333-13.226667-96.853333-25.6-145.92-37.12L196.266667 631.466667c52.48 68.266667 144.64 127.146667 231.68 148.48L335.786667 938.666667zM789.333333 832c-45.226667 44.373333-101.546667 106.666667-101.546666 106.666667l-91.306667-158.72c87.04-21.333333 170.666667-79.786667 223.146667-148.48l107.52 171.946666c-0.426667 0.426667-73.386667 10.666667-137.813334 28.586667zM511.573333 85.333333c-173.226667 0-322.133333 157.44-322.133333 331.093334s148.906667 314.026667 322.133333 314.026666 322.133333-148.906667 322.133334-322.56S684.8 85.333333 511.573333 85.333333z m186.026667 308.48L641.28 452.266667c-7.68 7.68-11.52 18.773333-8.96 29.866666v1.28l12.8 79.36c1.28 7.68 0 15.786667-3.84 22.186667-9.813333 17.493333-31.573333 24.32-49.066667 14.506667l-64.853333-34.56c-10.24-5.546667-23.04-5.546667-33.28 1.28l-63.146667 33.706666c-7.253333 3.84-14.933333 4.693333-23.04 3.84-19.2-2.986667-32.853333-21.76-29.866666-40.96l13.226666-82.346666c1.28-9.813333-1.706667-19.2-8.533333-26.453334L325.973333 393.813333c-4.693333-5.546667-8.533333-12.8-9.813333-20.053333-2.986667-19.2 11.093333-37.546667 30.293333-40.533333l72.533334-11.52c11.52-0.426667 21.76-7.68 26.453333-18.346667l33.28-70.826667c5.973333-11.946667 18.773333-20.48 32.853333-20.48s26.453333 7.68 32.853334 20.48l32.853333 70.4c4.693333 11.093333 14.933333 18.346667 27.306667 19.2l72.533333 11.093334c7.253333 1.28 14.506667 4.693333 20.053333 9.813333 13.653333 14.08 14.08 37.12 0.426667 50.773333z" p-id="6944"></path></svg>
diff --git a/src/assets/icons/icon-line.svg b/src/assets/icons/icon-line.svg
new file mode 100644
index 0000000..f471055
--- /dev/null
+++ b/src/assets/icons/icon-line.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785758919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3233" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64z" p-id="3234"></path><path d="M247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z" p-id="3235"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-pie.svg b/src/assets/icons/icon-pie.svg
new file mode 100644
index 0000000..5ba1903
--- /dev/null
+++ b/src/assets/icons/icon-pie.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671785797815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5066" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512a426.666667 426.666667 0 0 1 245.418667-386.346667l11.264-5.12a42.368 42.368 0 0 1 36.053333 76.672l-34.261333 17.749334A341.504 341.504 0 0 0 512 853.333333a341.504 341.504 0 0 0 295.552-170.453333l5.888-10.581333a42.666667 42.666667 0 0 1 75.648 39.381333l-3.754667 7.04A426.538667 426.538667 0 0 1 512 938.666667z m384-384h-341.333333a85.333333 85.333333 0 0 1-85.333334-85.333334V128a42.666667 42.666667 0 0 1 42.666667-42.666667c235.648 0 426.666667 191.018667 426.666667 426.666667a42.666667 42.666667 0 0 1-42.666667 42.666667z m-341.333333-358.272V426.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h235.605334a15.232 15.232 0 0 0 15.018666-17.92 341.546667 341.546667 0 0 0-269.824-274.346666 19.626667 19.626667 0 0 0-23.466666 19.328z" fill="#5D6E7F" p-id="5067"></path></svg>
\ No newline at end of file
diff --git a/src/assets/styles/element-plus/index.scss b/src/assets/styles/element-plus/index.scss
index 6dc95ed..da02197 100644
--- a/src/assets/styles/element-plus/index.scss
+++ b/src/assets/styles/element-plus/index.scss
@@ -4,9 +4,14 @@
       "base": #4384ff
     )
   ),
+  $fill-color:(
+    "lighter":#f2f6ff
+  ),
   $table:(
     "header-bg-color":#f2f6ff,
-    "header-text-color":#444c59
+    "header-text-color":#444c59,
+    "row-hover-bg-color":#f2f6ff,
+
   ),
   $menu:(
     "base-level-padding": 15px,
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index ce5d797..ca9df2c 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -32,7 +32,7 @@
         top: 50,
         left: 10,
         right: 20,
-        bottom: 5,
+        bottom: 10,
         containLabel: true, // 是否包含坐标轴的刻度标签
       }
     },
@@ -244,7 +244,7 @@
         splitLine: {
           show: true,
           lineStyle: {
-            color: ['#7a6b74'],
+            color: ['#bfbfbf'],
             type: 'dashed',
           },
         },
@@ -324,8 +324,11 @@
 // 刷新图表
 function refreshChart() {
   if (chart) {
+    console.log('渲染折线图')
+
     const option = buildOption()
     chart.setOption(option as unknown as ECBasicOption, true)
+    chart.resize()
   }
 }
 
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 4b1aa79..74d506a 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="PieChart">
 import type { ECharts } from 'echarts'
-import { init } from 'echarts'
+import { init, number } from 'echarts'
 import type { Ref } from 'vue'
 import type { ECBasicOption } from 'echarts/types/dist/shared'
 import type { pieDataI, pieOption, pieSeriesOption } from './echart-interface'
@@ -34,7 +34,7 @@
     type: Object,
     default: () => {
       return {
-        show: false,
+        show: true,
         orient: 'vertical',
         right: '20%',
         top: 'center',
@@ -78,6 +78,13 @@
     },
   },
   /**
+   * 距离容器右侧距离，默认0，为legend在右侧时做准备
+   */
+  right: {
+    type: [Number, String],
+    default: 0,
+  },
+  /**
    * 是否要展示成玫瑰图，或玫瑰图类型:radius|area
    */
   roseType: {
@@ -114,7 +121,7 @@
       return {
         top: '10%',
         left: '5%',
-        right: '5%',
+        right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
       }
@@ -201,12 +208,13 @@
       radius: props.radius as string[], // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
+      right: props.right,
       label: {
         show: props.labelShow,
         position: 'center',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 22,
-        fontWeight: 'bolder',
+        fontSize: 20,
+        fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
@@ -243,6 +251,7 @@
   if (chart) {
     const option = buildOption()
     chart.setOption(option as unknown as ECBasicOption, true)
+    chart.resize()
   }
 }
 
diff --git a/src/components/Echart/echart-interface.ts b/src/components/Echart/echart-interface.ts
index 2308961..fd7cb73 100644
--- a/src/components/Echart/echart-interface.ts
+++ b/src/components/Echart/echart-interface.ts
@@ -191,6 +191,7 @@
   roseType?: string | boolean // 玫瑰图类型
   radius?: string[] // 饼图的半径[内半径，外半径]
   center?: [string, string] // 圆心坐标[横坐标，纵坐标]
+  right?: number | string // 距离容器右侧距离
   startAngle?: number // 开始的角度 //起始角度，支持范围[0, 360]。
   label?: { // 饼图图形上的文本标签
     show?: boolean // 是否显示
diff --git a/src/components/benchCol/index.vue b/src/components/benchCol/index.vue
index 8bc659d..6f816d8 100644
--- a/src/components/benchCol/index.vue
+++ b/src/components/benchCol/index.vue
@@ -5,46 +5,92 @@
     type: String,
     default: '',
   },
+  icon: {
+    type: String,
+    default: '',
+  },
   pathUrl: {
     type: String,
     default: '',
   },
   width: {
     type: String,
-    default: '',
+    default: '100%',
   },
   height: {
-    type: String,
+    type: [String, Number],
     default: '',
   },
 })
 </script>
 
 <template>
-  <div class="bench-left-top" :style="{ width, height }">
-    <div class="bench-title">
-      <h3 v-if="title !== ''">
+  <div class="bench-left-top" :style="{ height: typeof height == 'string' ? height : `${height}px` }">
+    <div v-if="title" class="bench-title">
+      <el-icon v-if="icon" :name="icon" class="title-icon">
+        <svg-icon :name="icon" />
+      </el-icon>
+      <div class="title">
         {{ title }}
-      </h3>
-      <span v-if="pathUrl !== ''" style="cursor: pointer;font-size: 14px; color: #ccc;" @click="$router.push(pathUrl)">更多 ></span>
+      </div>
+      <span v-if="pathUrl !== ''" class="more" @click="$router.push(pathUrl)">更多 ></span>
     </div>
-    <slot />
+    <div class="content" :style="{ height: typeof height == 'string' ? height : `${height - 50}px` }">
+      <slot />
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.bench-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  overflow: hidden;
-}
 // 样式
 .bench-left-top {
   border-radius: 10px;
-  margin-top: 1%;
   background-color: #fff;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+
+  .bench-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    height: 30px;
+    overflow: hidden;
+
+    .title-icon {
+      width: 14px;
+      height: 14px;
+      font-size: 14px;
+      line-height: 16px;
+      color: #3d7eff;
+      margin-right: 5px;
+    }
+
+    .title {
+      color: #000;
+      font-size: 16px;
+      flex: 1;
+    }
+
+    .more {
+      cursor: pointer;
+      font-size: 14px;
+      color: #ccc;
+    }
+  }
+
+  .content {
+    flex: 1;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .bench-title + .content {
+    padding-top: 10px;
+  }
 }
 </style>
 
diff --git a/src/router/modules/measure.ts b/src/router/modules/measure.ts
index f8c750b..3676c67 100644
--- a/src/router/modules/measure.ts
+++ b/src/router/modules/measure.ts
@@ -23,6 +23,7 @@
           auth: '/measure/bench',
           sidebar: false,
           breadcrumb: true,
+          activeMenu: '/bench',
         },
       },
     ],
diff --git a/src/views/measure/bench/bench.vue b/src/views/measure/bench/bench.vue
index 380779a..0916a59 100644
--- a/src/views/measure/bench/bench.vue
+++ b/src/views/measure/bench/bench.vue
@@ -9,6 +9,9 @@
 import BenchCol from '@/components/benchCol/index.vue'
 import type { lineDataI, pieDataI } from '@/components/Echart/echart-interface'
 import useUserStore from '@/store/modules/user'
+// 每个展示块高度
+const blockHeight = ref(300)
+const blockWidth = ref(400)
 const { username } = useUserStore()
 const buttomTypes = ref([
   { id: '1', text: '培训记录', url: '/train/trainLog' },
@@ -21,23 +24,23 @@
 const tableData = ref([])
 const meterageTableData = ref([])
 const columns = ref([
-  { text: '培训名称', value: 'planName', width: '110' },
+  { text: '培训名称', value: 'planName' },
   { text: '负责人', value: 'director', width: '120' },
-  { text: '培训时间', value: 'trainTime' },
+  { text: '培训时间', value: 'trainTime', width: '180' },
 ])
 const meterageColumns = ref([
-  { text: '文件名称', value: 'fileName', width: '110' },
+  { text: '文件名称', value: 'fileName' },
   { text: '类别', value: 'fileTypeName', width: '110' },
-  { text: '发布时间', value: 'publishTime' },
+  { text: '发布时间', value: 'publishTime', width: '180' },
 ])
 const CertificateColumns = ref([
-  { text: '证书名称', value: 'certificateName', width: '110' },
-  { text: '到期时间', value: 'validDate' },
+  { text: '证书名称', value: 'certificateName' },
+  { text: '到期时间', value: 'validDate', width: '180' },
 ])
 const CertificatesColumns = ref([
-  { text: '证书名称', value: 'certificateName', width: '110' },
+  { text: '证书名称', value: 'certificateName' },
   { text: '人员名称', value: 'name', width: '110' },
-  { text: '到期时间', value: 'validDate' },
+  { text: '到期时间', value: 'validDate', width: '180' },
 ])
 const StatisticxAxis: Ref<string[]> = ref([])
 const StatisticData: Ref<lineDataI[]> = ref([])
@@ -106,20 +109,14 @@
     const yValue = res.data.map((item: planReturn) => Number(item.count))
     StaffSStatisticData.value = [{ name: '人数', data: yValue }]
   })
-  const param = {
-    account: username,
-  }
-  getTrainLogSStatistic(param).then((res) => {
-    TrainLogSList.value = [
-      { name: `合格     ${res.data.qualified}--${(res.data.qualifiedCount / res.data.trainCount) * 100}%`, value: res.data.qualified },
-      { name: `不合格   ${res.data.notQualified}-- ${((res.data.notQualified / res.data.trainCount) * 100)}%`, value: res.data.notQualified },
-    ]
-    TrainLogTitle.value = res.data.trainCount
-  })
+
   // 返回值
   interface CertificatReturn {
     lastValidDate: number
   }
+  const param = {
+    account: username,
+  }
   getCertificateStatistic(param).then((res) => {
     CertificateList.value = res.data
     CertificateObject.value = res.data.sort((nex: CertificatReturn, max: CertificatReturn) => {
@@ -127,6 +124,26 @@
     })[0]
   })
 }
+
+function fetchMyTrainLog() {
+  const param = {
+    account: username,
+  }
+  getTrainLogSStatistic(param).then((res) => {
+    TrainLogSList.value = [
+      { name: `合格     ${res.data.qualified}-${(res.data.qualifiedCount / res.data.trainCount) * 100}%`, value: res.data.qualified },
+      { name: `不合格   ${res.data.notQualified}- ${((res.data.notQualified / res.data.trainCount) * 100)}%`, value: res.data.notQualified },
+    ]
+    TrainLogTitle.value = res.data.trainCount
+  }).catch((_) => {
+    // 处理异常
+    TrainLogSList.value = [
+      { name: '合格     0 - 50%', value: 0 },
+      { name: '不合格   0 - 50%', value: 0 },
+    ]
+    TrainLogTitle.value = 0
+  })
+}
 const getmeterageList = () => {
   const params = {
     fileNo: '', // 编号
@@ -143,218 +160,251 @@
     meterageTableData.value = res.data.rows
   })
 }
-getmeterageList()
-getStatisticList()
+
+function calcBlockSize() {
+  // 计算工作台区域高度 - 顶部-面包屑-边距
+  const bodyHeight = document.body.clientHeight - 60 - 50 - 20
+  blockHeight.value = bodyHeight > 610 ? (bodyHeight - 10) / 2 : 300
+  blockWidth.value = (document.body.clientWidth - 180 - 20 - 20) / 3
+  console.log(blockHeight.value, blockWidth.value - 20)
+}
+window.addEventListener('resize', () => {
+  calcBlockSize()
+})
+
+onMounted(() => {
+  calcBlockSize()
+  fetchMyTrainLog() // 获取我的培训考核
+  getmeterageList()
+  getStatisticList()
+})
 </script>
 
 <template>
   <app-container>
     <div class="bench">
-      <bench-col
-        v-if="proxy.hasPerm('/workbench/meterTrainStatistic')"
-        title="培训计划"
-        path-url="/train/plan"
-        width="27.8vw"
-        height="40vh"
-      >
-        <el-table
-          :data="tableData"
-          style="width: 100%; height: 80%; border-radius: 10px;"
-        >
-          <el-table-column
-            v-for="item in columns"
-            :key="item.value"
-            :prop="item.value"
-            align="center"
-            :label="item.text"
-            :width="item.width"
-          />
-        </el-table>
-      </bench-col>
-      <bench-col
-        v-if="proxy.hasPerm('/workbench/meterTrain/line')"
-        title="培训计划"
-        width="27.8vw"
-        height="40.7vh"
-      >
-        <line-chart
-          :x-axis-data="StatisticxAxis"
-          width="100%"
-          height="75%"
-          :data="StatisticData"
-          unit="个"
-        />
-      </bench-col>
-      <div class="bench-right">
-        <bench-col
-          v-if="proxy.hasPerm('/workbench/meterTrain/buttom')"
-          width="27.8vw"
-          height="20vh"
-        >
-          <div class="bench-right-top">
-            <div
-              v-for="item in buttomTypes"
-              :key="item.id"
-              class="right-top-box"
-              @click="$router.push(item.url)"
-            >
-              {{ item.text }}
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <bench-col
+            v-if="proxy.hasPerm('/workbench/meterTrainStatistic')"
+            icon="icon-book"
+            title="培训计划"
+            path-url="/train/plan"
+            :style="{ height: blockHeight }"
+            :height="blockHeight"
+          >
+            <el-table :data="tableData" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
+              <el-table-column
+                v-for="item in columns"
+                :key="item.value"
+                :prop="item.value"
+                align="center"
+                :label="item.text"
+                :width="item.width"
+              />
+            </el-table>
+          </bench-col>
+        </el-col>
+        <el-col :span="8">
+          <bench-col
+            v-if="proxy.hasPerm('/workbench/meterTrain/line')"
+            icon="icon-line"
+            title="培训计划"
+            :height="blockHeight"
+          >
+            <line-chart
+              :x-axis-data="StatisticxAxis"
+              :data="StatisticData"
+              :width="`${blockWidth - 20}px`"
+              unit="个"
+            />
+          </bench-col>
+        </el-col>
+        <el-col :span="8">
+          <div class="bench-right block" :style="{ height: `${blockHeight}px` }">
+            <bench-col height="40%">
+              <div class="bench-right-top">
+                <div v-for="item of buttomTypes" :key="item.text" class="right-top-box" @click="$router.push(item.url)">
+                  {{ item.text }}
+                </div>
+              </div>
+            </bench-col>
+            <div style="flex: 1;margin-top: 10px;">
+              <bench-col
+                v-if="proxy.hasPerm('/workbench/meterTrain/train')"
+                title="我的培训考核"
+                icon="icon-book"
+                height="100%"
+              >
+                <div class="pie-chart">
+                  <div class="pie-chart-info">
+                    <pie-chart
+                      :data="TrainLogSList"
+                      :radius="['50%', '70%']"
+                      right="40%"
+                      :width="`${blockWidth - 20}px`"
+                      :label-formatter="`${TrainLogTitle}`"
+                    />
+                  </div>
+                </div>
+              </bench-col>
             </div>
           </div>
-        </bench-col>
-        <bench-col
-          v-if="proxy.hasPerm('/workbench/meterTrain/train')"
-          title="我的培训考核"
-          width="27.8vw"
-          height="20vh"
-        >
-          <div class="pie-chart">
-            <pie-chart
-              :data="TrainLogSList"
-              width="200%"
-              height="200%"
-              :label-formatter="`${TrainLogTitle}`"
-            />
-            <div class="pie-chart-info">
-              <div
-                v-for="(item, index) in TrainLogSList"
-                :key="index"
-                class="chart-info-title"
-              >
-                <div class="chart-info-bg" />
-                {{ item.name }}
+        </el-col>
+      </el-row>
+    </div>
+    <div class="bench">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <bench-col
+            v-if="proxy.hasPerm('/measure/file/quality')"
+            title="计量文件"
+            icon="icon-file"
+            path-url="/file/quality"
+            :height="blockHeight"
+            class="flex-full block"
+          >
+            <el-table :data="meterageTableData" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
+              <el-table-column
+                v-for="item in meterageColumns"
+                :key="item.value"
+                :prop="item.value"
+                align="center"
+                :label="item.text"
+                :width="item.width"
+              />
+            </el-table>
+          </bench-col>
+        </el-col>
+        <el-col :span="8">
+          <bench-col
+            v-if="proxy.hasPerm('/workbench/person/remind')"
+            title="我的证书"
+            icon="icon-certi"
+            :height="blockHeight"
+            path-url="/person/remind"
+            class="flex-full block"
+          >
+            <div style="display: flex;">
+              <el-table :data="CertificateList" style="width: 65%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
+                <el-table-column
+                  v-for="item in CertificateColumns"
+                  :key="item.value"
+                  :prop="item.value"
+                  align="center"
+                  :label="item.text"
+                  :width="item.width"
+                />
+              </el-table>
+              <div class="validDate">
+                <div class="validDate-top">
+                  <span class="validate-text">{{ CertificateObject.lastValidDate }}<span style="font-size: 12px;">天</span></span>
+                </div>
+                <div class="validDate-bottom">
+                  最近到期时间 <br>
+                  <span>{{ CertificateObject.validDate || '无' }}</span>
+                </div>
               </div>
             </div>
-          </div>
-        </bench-col>
-      </div>
-      <bench-col
-        v-if="proxy.hasPerm('/measure/file/quality')"
-        title="计量文件"
-        path-url="/file/quality"
-        width="27.8vw"
-        height="40vh"
-      >
-        <el-table
-          :data="meterageTableData"
-          style="width: 100%; height: 80%; border-radius: 10px;"
-        >
-          <el-table-column
-            v-for="item in meterageColumns"
-            :key="item.value"
-            :prop="item.value"
-            align="center"
-            :label="item.text"
-            :width="item.width"
-          />
-        </el-table>
-      </bench-col>
-      <bench-col
-        v-if="proxy.hasPerm('/workbench/person/remind')"
-        title="我的证书"
-        width="27.8vw"
-        height="40vh"
-        path-url="/person/remind"
-      >
-        <div style="display: flex;">
-          <el-table
-            :data="CertificateList"
-            style="width: 65%; height: 31.5vh; border-radius: 10px;"
+          </bench-col>
+          <bench-col
+            v-if="proxy.hasPerm('/workbench/person/certificate') && !proxy.hasPerm('/workbench/person/remind')"
+            title="证书预警"
+            icon="icon-certi"
+            path-url="/person/remind"
+            :height="blockHeight"
+            class="flex-full block"
           >
-            <el-table-column
-              v-for="item in CertificateColumns"
-              :key="item.value"
-              :prop="item.value"
-              align="center"
-              :label="item.text"
-              :width="item.width"
+            <el-table :data="CertificateList" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
+              <el-table-column
+                v-for="item in CertificatesColumns"
+                :key="item.value"
+                :prop="item.value"
+                align="center"
+                :label="item.text"
+                :width="item.width"
+              />
+            </el-table>
+          </bench-col>
+        </el-col>
+        <el-col :span="8">
+          <bench-col
+            v-if="proxy.hasPerm('/workbench/person/list')"
+            title="计量人员"
+            icon="icon-line"
+            :height="blockHeight"
+            class="flex-full block"
+          >
+            <line-chart
+              :x-axis-data="StaffSStatisticxAxis"
+              :width="`${blockWidth - 20}px`"
+              :data="StaffSStatisticData"
+              unit="人"
             />
-          </el-table>
-          <div class="validDate">
-            <div class="validDate-top">
-              <span>{{ CertificateObject.lastValidDate }}天</span>
-            </div>
-            <div class="validDate-bottom">
-              最近到期时间 <br>
-              <span>{{ CertificateObject.validDate }}</span>
-            </div>
-          </div>
-        </div>
-      </bench-col>
-      <bench-col
-        v-if="proxy.hasPerm('/workbench/person/list')"
-        title="计量人员"
-        width="27.8vw"
-        height="40vh"
-      >
-        <line-chart
-          :x-axis-data="StaffSStatisticxAxis"
-          width="100%"
-          height="75%"
-          :data="StaffSStatisticData"
-          unit="人"
-        />
-      </bench-col>
-      <bench-col
-        v-if="proxy.hasPerm('/workbench/person/certificate')"
-        title="证书预警"
-        path-url="/person/remind"
-        width="27.8vw"
-        height="40vh"
-      >
-        <el-table
-          :data="CertificateList"
-          style="width: 100%; height: 80%; border-radius: 10px;"
-        >
-          <el-table-column
-            v-for="item in CertificatesColumns"
-            :key="item.value"
-            :prop="item.value"
-            align="center"
-            :label="item.text"
-            :width="item.width"
-          />
-        </el-table>
-      </bench-col>
+          </bench-col>
+        </el-col>
+      </el-row>
     </div>
   </app-container>
 </template>
 
 <style lang="scss" scoped>
 .bench {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  // display: flex;
+  // justify-content: flex-start;
+  width: 100%;
+  box-sizing: border-box;
+
+  .flex-full {
+    flex: 1;
+  }
+
+  .block + .block {
+    margin-left: 10px;
+  }
 
   .bench-right {
+    flex: 1;
     display: flex;
     flex-direction: column;
     height: 40vh;
-    margin-top: 1%;
 
     .bench-right-top {
-      padding: 5%;
+      width: 100%;
+      height: 100%;
+      padding: 0 10px;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      justify-content: space-around;
+      box-sizing: border-box;
 
       .right-top-box {
-        width: 25%;
-        margin: 2%;
-        height: 40%;
+        width: calc(33% - 10px);
+        height: calc(50% - 10px);
+        padding: 10px;
+        margin: 5px;
         border-radius: 5px;
         text-align: center;
         font-size: 14px;
-        line-height: 4.5vh;
-        color: rgb(223 219 219);
+        color: #fff;
         cursor: pointer;
         background-color: #3d7eff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:hover {
+          background-color: #286ffd;
+        }
       }
     }
   }
 }
 
+.bench + .bench {
+  margin-top: 10px;
+}
+
 .validDate {
   width: 35%;
   height: 100%;
@@ -364,44 +414,45 @@
   text-align: center;
 
   .validDate-top {
+    position: relative;
     width: 100px;
     height: 100px;
-    margin-bottom: 30px;
+    margin-bottom: 20px;
     background:
       url("../../../assets/images/bench/clock.png") no-repeat center /
       cover;
-  }
 
-  .validDate-top span {
-    position: relative;
-    top: 40%;
-    right: 0;
-    font-size: 22px;
+    .validate-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 20px;
+    }
   }
 
   .validDate-bottom {
-    font-size: 18px;
-    font-weight: 600;
-  }
+    font-size: 16px;
+    font-weight: 500;
 
-  .validDate-bottom span {
-    font-size: 14px;
-    font-weight: 400;
-    color: #999;
+    span {
+      font-size: 14px;
+      line-height: 2;
+      font-weight: 400;
+    }
   }
 }
 
 .pie-chart {
   display: flex;
   align-items: center;
-  transform: translateY(-26%);
   width: 100%;
-  height: 80%;
+  height: 100%;
 
   .pie-chart-info {
-    width: 30vw;
-    transform: translate(-35%, -20%);
+    flex: 1;
     font-size: 12px;
+    height: 100%;
 
     .chart-info-title {
       display: flex;
@@ -419,3 +470,22 @@
   }
 }
 </style>
+
+<style lang="scss">
+.bench-table {
+  .el-table__header-wrapper {
+    border-radius: 8px;
+  }
+}
+
+.bench-table-header {
+  th {
+    font-weight: normal;
+    font-size: 14px;
+  }
+}
+
+.bench-table-row {
+  border-radius: 8px;
+}
+</style>