feat: 首页流程图

app/assets/svg/home/arrow.svg

@@ -0,0 +1,16 @@
+<svg width="514" height="347" viewBox="0 0 514 347" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M252.5 0V19.5C252.5 47.1142 230.114 69.5 202.5 69.5H124.5C69.2715 69.5 24.5 114.272 24.5 169.5V338.5" stroke="url(#paint0_linear_378_1168)" stroke-width="10"/>
+<path d="M24.5 346.5L45.7176 326.25H3.28238L24.5 346.5Z" fill="#B6B4FF"/>
+<path d="M261 0.5V20C261 47.6142 283.386 70 311 70H389C444.228 70 489 114.772 489 170V339" stroke="url(#paint1_linear_378_1168)" stroke-width="10"/>
+<path d="M489 347L467.782 326.75H510.218L489 347Z" fill="#B6B4FF"/>
+<defs>
+<linearGradient id="paint0_linear_378_1168" x1="153" y1="-152.5" x2="140.5" y2="449" gradientUnits="userSpaceOnUse">
+<stop stop-color="#564EFF"/>
+<stop offset="1" stop-color="#D2D0FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_378_1168" x1="360.5" y1="-152" x2="373" y2="449.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#564EFF"/>
+<stop offset="1" stop-color="#D2D0FF"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/home/arrow1.svg

@@ -0,0 +1,10 @@
+<svg width="49" height="70" viewBox="0 0 49 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 0V63.5" stroke="url(#paint0_linear_378_1219)" stroke-width="10"/>
+<path d="M24.5 69.5L45.7176 49.25H3.28238L24.5 69.5Z" fill="#B6B4FF"/>
+<defs>
+<linearGradient id="paint0_linear_378_1219" x1="25.5636" y1="-103.31" x2="-66.074" y2="-46.3816" gradientUnits="userSpaceOnUse">
+<stop stop-color="#564EFF"/>
+<stop offset="1" stop-color="#D2D0FF"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/home/arrow2.svg

@@ -0,0 +1,10 @@
+<svg width="49" height="109" viewBox="0 0 49 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 0V102.5" stroke="url(#paint0_linear_378_1216)" stroke-width="10"/>
+<path d="M24.5 108.5L45.7176 88.25H3.28238L24.5 108.5Z" fill="#B6B4FF"/>
+<defs>
+<linearGradient id="paint0_linear_378_1216" x1="25.5636" y1="-64.3095" x2="-66.074" y2="-7.3816" gradientUnits="userSpaceOnUse">
+<stop stop-color="#564EFF"/>
+<stop offset="1" stop-color="#D2D0FF"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/home/arrow3.svg

@@ -0,0 +1,10 @@
+<svg width="49" height="220" viewBox="0 0 49 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 0V203.5" stroke="url(#paint0_linear_378_1222)" stroke-width="10"/>
+<path d="M24.5 219.5L45.7176 199.25H3.28238L24.5 219.5Z" fill="#B6B4FF"/>
+<defs>
+<linearGradient id="paint0_linear_378_1222" x1="25.5636" y1="-75.3098" x2="-66.0743" y2="-18.382" gradientUnits="userSpaceOnUse">
+<stop stop-color="#564EFF"/>
+<stop offset="1" stop-color="#D2D0FF"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/home/arrow4.svg

@@ -0,0 +1,10 @@
+<svg width="90" height="49" viewBox="0 0 90 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M90 24L16 24" stroke="url(#paint0_linear_378_1225)" stroke-width="10"/>
+<path d="M0 24.5L20.25 3.28238L20.25 45.7176L0 24.5Z" fill="#B6B4FF"/>
+<defs>
+<linearGradient id="paint0_linear_378_1225" x1="106.89" y1="24.5636" x2="54.6337" y2="-2.85795" gradientUnits="userSpaceOnUse">
+<stop stop-color="#564EFF"/>
+<stop offset="1" stop-color="#D2D0FF"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/home/user1.svg

@@ -0,0 +1,30 @@
+<svg width="73" height="66" viewBox="0 0 73 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1033_2047)">
+<path d="M72.2695 62.8047C72.2695 49.5625 62.9102 38.3125 49.9883 34.3516C55.0117 31.0469 58.3398 25.3906 58.3398 18.9688C58.3398 8.78125 50.0117 0.5 39.7695 0.5C29.5273 0.5 21.1992 8.78125 21.1992 18.9609C21.1992 25.3828 24.5273 31.0391 29.5508 34.3438C16.6289 38.3125 7.26953 49.5547 7.26953 62.8047C7.26953 64.2933 8.47626 65.5 9.96484 65.5H69.6133C71.0803 65.5 72.2695 64.3108 72.2695 62.8438V62.8047Z" fill="url(#paint0_linear_1033_2047)"/>
+<path d="M67.9609 62.8047C67.9609 49.5625 58.6016 38.3125 45.6797 34.3516C50.7031 31.0469 54.0312 25.3906 54.0312 18.9688C54.0312 8.78125 45.7031 0.5 35.4609 0.5C25.2187 0.5 16.8906 8.78125 16.8906 18.9609C16.8906 25.3828 20.2188 31.0391 25.2422 34.3438C12.3203 38.3125 2.96094 49.5547 2.96094 62.8047C2.96094 64.2933 4.16767 65.5 5.65624 65.5H65.3047C66.7717 65.5 67.9609 64.3108 67.9609 62.8438V62.8047Z" fill="url(#paint1_linear_1033_2047)"/>
+<foreignObject x="-6.51538" y="-6.51538" width="79.0308" height="79.0308"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(3.51px);clip-path:url(#bgblur_1_1033_2047_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="7.01538" d="M65.5 62.8047C65.5 49.5625 56.1406 38.3125 43.2188 34.3516C48.2422 31.0469 51.5703 25.3906 51.5703 18.9688C51.5703 8.78125 43.2422 0.5 33 0.5C22.7578 0.5 14.4297 8.78125 14.4297 18.9609C14.4297 25.3828 17.7578 31.0391 22.7813 34.3438C9.85938 38.3125 0.5 49.5547 0.5 62.8047C0.5 64.2933 1.70673 65.5 3.19531 65.5H62.8438C64.3108 65.5 65.5 64.3108 65.5 62.8438V62.8047Z" fill="url(#paint2_linear_1033_2047)" fill-opacity="0.9"/>
+<path d="M32.8105 35.2744C32.9336 35.2334 33.0664 35.2334 33.1895 35.2744L35.4229 36.0186C35.6553 36.096 35.8173 36.3072 35.832 36.5518L36.7744 52.3828C36.7863 52.5838 36.6972 52.7776 36.5361 52.8984L33.3604 55.2803C33.147 55.4403 32.853 55.4403 32.6396 55.2803L29.4639 52.8984C29.3028 52.7776 29.2137 52.5838 29.2256 52.3828L30.168 36.5518C30.1827 36.3072 30.3447 36.096 30.5771 36.0186L32.8105 35.2744Z" fill="#D7D5FF" stroke="url(#paint3_linear_1033_2047)" stroke-width="0.4"/>
+</g>
+<defs>
+<clipPath id="bgblur_1_1033_2047_clip_path" transform="translate(6.51538 6.51538)"><path d="M65.5 62.8047C65.5 49.5625 56.1406 38.3125 43.2188 34.3516C48.2422 31.0469 51.5703 25.3906 51.5703 18.9688C51.5703 8.78125 43.2422 0.5 33 0.5C22.7578 0.5 14.4297 8.78125 14.4297 18.9609C14.4297 25.3828 17.7578 31.0391 22.7813 34.3438C9.85938 38.3125 0.5 49.5547 0.5 62.8047C0.5 64.2933 1.70673 65.5 3.19531 65.5H62.8438C64.3108 65.5 65.5 64.3108 65.5 62.8438V62.8047Z"/>
+</clipPath><linearGradient id="paint0_linear_1033_2047" x1="38.7695" y1="-7.6" x2="40.9695" y2="72.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4944DD"/>
+<stop offset="1" stop-color="#6C68F0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1033_2047" x1="34.4609" y1="-7.6" x2="36.6609" y2="72.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E5FF"/>
+<stop offset="1" stop-color="#D8D7FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1033_2047" x1="32" y1="-7.6" x2="34.2" y2="72.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6B65FF"/>
+<stop offset="1" stop-color="#CAC8FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1033_2047" x1="29.6" y1="36.4" x2="39.2" y2="64.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F5FF"/>
+<stop offset="1" stop-color="#D8D7FF"/>
+</linearGradient>
+<clipPath id="clip0_1033_2047">
+<rect width="73" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>

app/assets/svg/home/user2.svg

@@ -0,0 +1,30 @@
+<svg width="73" height="66" viewBox="0 0 73 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1033_2042)">
+<path d="M72.2695 62.8047C72.2695 49.5625 62.9102 38.3125 49.9883 34.3516C55.0117 31.0469 58.3398 25.3906 58.3398 18.9688C58.3398 8.78125 50.0117 0.5 39.7695 0.5C29.5273 0.5 21.1992 8.78125 21.1992 18.9609C21.1992 25.3828 24.5273 31.0391 29.5508 34.3438C16.6289 38.3125 7.26953 49.5547 7.26953 62.8047C7.26953 64.2933 8.47626 65.5 9.96484 65.5H69.6133C71.0803 65.5 72.2695 64.3108 72.2695 62.8438V62.8047Z" fill="url(#paint0_linear_1033_2042)"/>
+<path d="M67.9609 62.8047C67.9609 49.5625 58.6016 38.3125 45.6797 34.3516C50.7031 31.0469 54.0312 25.3906 54.0312 18.9688C54.0312 8.78125 45.7031 0.5 35.4609 0.5C25.2187 0.5 16.8906 8.78125 16.8906 18.9609C16.8906 25.3828 20.2188 31.0391 25.2422 34.3438C12.3203 38.3125 2.96094 49.5547 2.96094 62.8047C2.96094 64.2933 4.16767 65.5 5.65624 65.5H65.3047C66.7717 65.5 67.9609 64.3108 67.9609 62.8438V62.8047Z" fill="url(#paint1_linear_1033_2042)"/>
+<foreignObject x="-6.51538" y="-6.51538" width="79.0308" height="79.0308"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(3.51px);clip-path:url(#bgblur_1_1033_2042_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="7.01538" d="M65.5 62.8047C65.5 49.5625 56.1406 38.3125 43.2188 34.3516C48.2422 31.0469 51.5703 25.3906 51.5703 18.9688C51.5703 8.78125 43.2422 0.5 33 0.5C22.7578 0.5 14.4297 8.78125 14.4297 18.9609C14.4297 25.3828 17.7578 31.0391 22.7813 34.3438C9.85938 38.3125 0.5 49.5547 0.5 62.8047C0.5 64.2933 1.70673 65.5 3.19531 65.5H62.8438C64.3108 65.5 65.5 64.3108 65.5 62.8438V62.8047Z" fill="url(#paint2_linear_1033_2042)" fill-opacity="0.9"/>
+<path d="M32.8105 35.2744C32.9336 35.2334 33.0664 35.2334 33.1895 35.2744L35.4229 36.0186C35.6553 36.096 35.8173 36.3072 35.832 36.5518L36.7744 52.3828C36.7863 52.5838 36.6972 52.7776 36.5361 52.8984L33.3604 55.2803C33.147 55.4403 32.853 55.4403 32.6396 55.2803L29.4639 52.8984C29.3028 52.7776 29.2137 52.5838 29.2256 52.3828L30.168 36.5518C30.1827 36.3072 30.3447 36.096 30.5771 36.0186L32.8105 35.2744Z" fill="#CECECE" stroke="url(#paint3_linear_1033_2042)" stroke-width="0.4"/>
+</g>
+<defs>
+<clipPath id="bgblur_1_1033_2042_clip_path" transform="translate(6.51538 6.51538)"><path d="M65.5 62.8047C65.5 49.5625 56.1406 38.3125 43.2188 34.3516C48.2422 31.0469 51.5703 25.3906 51.5703 18.9688C51.5703 8.78125 43.2422 0.5 33 0.5C22.7578 0.5 14.4297 8.78125 14.4297 18.9609C14.4297 25.3828 17.7578 31.0391 22.7813 34.3438C9.85938 38.3125 0.5 49.5547 0.5 62.8047C0.5 64.2933 1.70673 65.5 3.19531 65.5H62.8438C64.3108 65.5 65.5 64.3108 65.5 62.8438V62.8047Z"/>
+</clipPath><linearGradient id="paint0_linear_1033_2042" x1="38.7695" y1="-7.6" x2="40.9695" y2="72.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#727272"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1033_2042" x1="34.4609" y1="-7.6" x2="36.6609" y2="72.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D3D3D3"/>
+<stop offset="1" stop-color="#D8D8D8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1033_2042" x1="32" y1="-7.6" x2="34.2" y2="72.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#525252"/>
+<stop offset="1" stop-color="#A7A7A7"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1033_2042" x1="29.6" y1="36.4" x2="39.2" y2="64.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6E6E6"/>
+<stop offset="1" stop-color="#D2D2D2"/>
+</linearGradient>
+<clipPath id="clip0_1033_2042">
+<rect width="73" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>

app/assets/svg/home/user3.svg

@@ -0,0 +1,34 @@
+<svg width="73" height="66" viewBox="0 0 73 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1033_2037)">
+<path d="M72.2695 62.8047C72.2695 49.5625 62.9102 38.3125 49.9883 34.3516C55.0117 31.0469 58.3398 25.3906 58.3398 18.9688C58.3398 8.78125 50.0117 0.5 39.7695 0.5C29.5273 0.5 21.1992 8.78125 21.1992 18.9609C21.1992 25.3828 24.5273 31.0391 29.5508 34.3438C16.6289 38.3125 7.26953 49.5547 7.26953 62.8047C7.26953 64.2933 8.47626 65.5 9.96484 65.5H69.6133C71.0803 65.5 72.2695 64.3108 72.2695 62.8438V62.8047Z" fill="url(#paint0_linear_1033_2037)"/>
+<path d="M67.9609 62.8047C67.9609 49.5625 58.6016 38.3125 45.6797 34.3516C50.7031 31.0469 54.0312 25.3906 54.0312 18.9688C54.0312 8.78125 45.7031 0.5 35.4609 0.5C25.2188 0.5 16.8906 8.78125 16.8906 18.9609C16.8906 25.3828 20.2188 31.0391 25.2422 34.3438C12.3203 38.3125 2.96094 49.5547 2.96094 62.8047C2.96094 64.2933 4.16767 65.5 5.65625 65.5H65.3047C66.7717 65.5 67.9609 64.3108 67.9609 62.8438V62.8047Z" fill="url(#paint1_linear_1033_2037)"/>
+<foreignObject x="-6.51538" y="-6.51538" width="79.0308" height="79.0308"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(3.51px);clip-path:url(#bgblur_1_1033_2037_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="7.01538" d="M65.5 62.8047C65.5 49.5625 56.1406 38.3125 43.2188 34.3516C48.2422 31.0469 51.5703 25.3906 51.5703 18.9688C51.5703 8.78125 43.2422 0.5 33 0.5C22.7578 0.5 14.4297 8.78125 14.4297 18.9609C14.4297 25.3828 17.7578 31.0391 22.7813 34.3438C9.85938 38.3125 0.5 49.5547 0.5 62.8047C0.5 64.2933 1.70673 65.5 3.19531 65.5H62.8438C64.3108 65.5 65.5 64.3108 65.5 62.8438V62.8047Z" fill="url(#paint2_linear_1033_2037)" fill-opacity="0.9"/>
+<path d="M32.8105 35.2744C32.9336 35.2334 33.0664 35.2334 33.1895 35.2744L35.4229 36.0186C35.6553 36.096 35.8173 36.3072 35.832 36.5518L36.7744 52.3828C36.7863 52.5838 36.6972 52.7776 36.5361 52.8984L33.3604 55.2803C33.147 55.4403 32.853 55.4403 32.6396 55.2803L29.4639 52.8984C29.3028 52.7776 29.2137 52.5838 29.2256 52.3828L30.168 36.5518C30.1827 36.3072 30.3447 36.096 30.5771 36.0186L32.8105 35.2744Z" fill="url(#paint3_linear_1033_2037)" stroke="url(#paint4_linear_1033_2037)" stroke-width="0.4"/>
+</g>
+<defs>
+<clipPath id="bgblur_1_1033_2037_clip_path" transform="translate(6.51538 6.51538)"><path d="M65.5 62.8047C65.5 49.5625 56.1406 38.3125 43.2188 34.3516C48.2422 31.0469 51.5703 25.3906 51.5703 18.9688C51.5703 8.78125 43.2422 0.5 33 0.5C22.7578 0.5 14.4297 8.78125 14.4297 18.9609C14.4297 25.3828 17.7578 31.0391 22.7813 34.3438C9.85938 38.3125 0.5 49.5547 0.5 62.8047C0.5 64.2933 1.70673 65.5 3.19531 65.5H62.8438C64.3108 65.5 65.5 64.3108 65.5 62.8438V62.8047Z"/>
+</clipPath><linearGradient id="paint0_linear_1033_2037" x1="38.7695" y1="-7.6" x2="40.9695" y2="72.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E04545"/>
+<stop offset="1" stop-color="#E36363"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1033_2037" x1="34.4609" y1="-7.6" x2="36.6609" y2="72.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC4C5"/>
+<stop offset="1" stop-color="#FFBFC0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1033_2037" x1="32" y1="-7.6" x2="34.2" y2="72.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5852"/>
+<stop offset="1" stop-color="#FF9E9E"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1033_2037" x1="33" y1="35" x2="33" y2="55.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCECE"/>
+<stop offset="1" stop-color="#FF8B8B"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1033_2037" x1="29.6" y1="36.4" x2="39.2" y2="64.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEEEE"/>
+<stop offset="1" stop-color="#FFE9E9"/>
+</linearGradient>
+<clipPath id="clip0_1033_2037">
+<rect width="73" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>

app/assets/svg/home/user4.svg

@@ -0,0 +1,26 @@
+<svg width="73" height="66" viewBox="0 0 73 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1033_2032)">
+<path d="M72.2695 62.8047C72.2695 49.5625 62.9102 38.3125 49.9883 34.3516C55.0117 31.0469 58.3398 25.3906 58.3398 18.9688C58.3398 8.78125 50.0117 0.5 39.7695 0.5C29.5273 0.5 21.1992 8.78125 21.1992 18.9609C21.1992 25.3828 24.5273 31.0391 29.5508 34.3438C16.6289 38.3125 7.26953 49.5547 7.26953 62.8047C7.26953 64.2933 8.47626 65.5 9.96484 65.5H69.6133C71.0803 65.5 72.2695 64.3108 72.2695 62.8438V62.8047Z" fill="#ADADAD"/>
+<path d="M67.9609 62.8047C67.9609 49.5625 58.6016 38.3125 45.6797 34.3516C50.7031 31.0469 54.0312 25.3906 54.0312 18.9688C54.0312 8.78125 45.7031 0.5 35.4609 0.5C25.2187 0.5 16.8906 8.78125 16.8906 18.9609C16.8906 25.3828 20.2188 31.0391 25.2422 34.3438C12.3203 38.3125 2.96094 49.5547 2.96094 62.8047C2.96094 64.2933 4.16767 65.5 5.65624 65.5H65.3047C66.7717 65.5 67.9609 64.3108 67.9609 62.8438V62.8047Z" fill="url(#paint0_linear_1033_2032)"/>
+<foreignObject x="-6.51538" y="-6.51538" width="79.0308" height="79.0308"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(3.51px);clip-path:url(#bgblur_1_1033_2032_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="7.01538" d="M65.5 62.8047C65.5 49.5625 56.1406 38.3125 43.2188 34.3516C48.2422 31.0469 51.5703 25.3906 51.5703 18.9688C51.5703 8.78125 43.2422 0.5 33 0.5C22.7578 0.5 14.4297 8.78125 14.4297 18.9609C14.4297 25.3828 17.7578 31.0391 22.7813 34.3438C9.85938 38.3125 0.5 49.5547 0.5 62.8047C0.5 64.2933 1.70673 65.5 3.19531 65.5H62.8438C64.3108 65.5 65.5 64.3108 65.5 62.8438V62.8047Z" fill="url(#paint1_linear_1033_2032)" fill-opacity="0.9"/>
+<path d="M32.8105 35.2744C32.9336 35.2334 33.0664 35.2334 33.1895 35.2744L35.4229 36.0186C35.6553 36.096 35.8173 36.3072 35.832 36.5518L36.7744 52.3828C36.7863 52.5838 36.6972 52.7776 36.5361 52.8984L33.3604 55.2803C33.147 55.4403 32.853 55.4403 32.6396 55.2803L29.4639 52.8984C29.3028 52.7776 29.2137 52.5838 29.2256 52.3828L30.168 36.5518C30.1827 36.3072 30.3447 36.096 30.5771 36.0186L32.8105 35.2744Z" fill="#F2F2F2" stroke="url(#paint2_linear_1033_2032)" stroke-width="0.4"/>
+</g>
+<defs>
+<clipPath id="bgblur_1_1033_2032_clip_path" transform="translate(6.51538 6.51538)"><path d="M65.5 62.8047C65.5 49.5625 56.1406 38.3125 43.2188 34.3516C48.2422 31.0469 51.5703 25.3906 51.5703 18.9688C51.5703 8.78125 43.2422 0.5 33 0.5C22.7578 0.5 14.4297 8.78125 14.4297 18.9609C14.4297 25.3828 17.7578 31.0391 22.7813 34.3438C9.85938 38.3125 0.5 49.5547 0.5 62.8047C0.5 64.2933 1.70673 65.5 3.19531 65.5H62.8438C64.3108 65.5 65.5 64.3108 65.5 62.8438V62.8047Z"/>
+</clipPath><linearGradient id="paint0_linear_1033_2032" x1="34.4609" y1="-7.6" x2="36.6609" y2="72.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DDDDDD"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1033_2032" x1="32" y1="-7.6" x2="34.2" y2="72.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C4C4C4"/>
+<stop offset="1" stop-color="#E5E5E5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1033_2032" x1="29.6" y1="36.4" x2="39.2" y2="64.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<clipPath id="clip0_1033_2032">
+<rect width="73" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>

app/components/home/Flowchart.vue

@@ -0,0 +1,498 @@
+<template>
+  <section class="flowchart-container">
+    <div class="flowchart-users">
+      <User text="正常访客" :src="user1Icon" class="user1" />
+      <User text="DDos" :src="user2Icon" class="user2" />
+      <User text="异常访客" :src="user3Icon" class="user3" />
+      <User text="... ..." :src="user4Icon" class="user4" />
+    </div>
+    <div class="flowchart-arrow">
+      <img class="arrow1" src="~/assets/svg/home/arrow.svg" alt="arrow" />
+      <div class="text1 text-box">浏览器域名</div>
+      <div class="text2 text-box">DNS引流</div>
+      <div class="text3 text-box">SDK引流</div>
+      <div class="text4 text-box">移动端/PC/客户端APP（Android、ios、Windows）</div>
+    </div>
+    <div class="flowchart-block">
+      <div class="block-ads">
+        <div class="block-title">
+          清洗系统（ADS）集群
+        </div>
+        <div class="ads-contnet">
+          <div class="ads-text">近源清洗</div>
+          <div class="ads-text">BGP调度</div>
+          <div class="ads-text">SYN\ UDP\ACK......</div>
+        </div>
+      </div>
+      <div class="block-arrow1">
+        <img src="~/assets/svg/home/arrow1.svg" alt="arrow1">
+      </div>
+      <div class="block-yun">
+        <div class="block-title">
+          云端纵深防御平台
+        </div>
+        <div class="yun-contnet">
+          <div class="yun-item">
+            <div class="yun-item-title">WAF</div>
+            <div class="yun-item-desc">防漏洞、防入侵、防爬虫、<br>防盗链Web蜜网、敏感词替换......</div>
+          </div>
+          <div class="yun-item">
+            <div class="yun-item-title">CC防护</div>
+            <div class="yun-item-desc">经典防御策略模式，精准访问控制（DIY）</div>
+          </div>
+          <div class="yun-item">
+            <div class="yun-item-title">DDoS防护</div>
+            <div class="yun-item-desc">节点调度网络（Web、TCP、SDK）</div>
+          </div>
+          <div class="yun-item">
+            <div class="yun-item-title">性能优化</div>
+            <div class="yun-item-desc">页面压缩、异步加载、移动端跳转全<br>链路优化、Web自适应、高级缓存</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flowchart-footer">
+      <div class="footer-left">
+        <div class="left-top">
+          <div class="footer-text left-text">安全联动</div>
+          <img class="top-img" src="~/assets/svg/home/arrow2.svg" alt="arrow2" />
+        </div>
+        <div class="left-content">
+          <div class="block-title">
+            大数据安全运营分析中心
+          </div>
+          <div class="center-content">
+            <div class="center-row">
+              <div class="center-item half">
+                <div class="item-title">AI实时决策引擎</div>
+                <div class="item-desc">日志管理、漏洞扫描</div>
+              </div>
+              <div class="center-item half">
+                <div class="item-title">语义语法分析引擎</div>
+                <div class="item-desc">运营分析、安全值守</div>
+              </div>
+            </div>
+            <div class="center-row">
+              <div class="center-item half">
+                <div class="item-title">规则监测引擎</div>
+                <div class="item-desc">威胁情报、安全重保</div>
+              </div>
+              <div class="center-item half">
+                <div class="item-title">威胁情报</div>
+                <div class="item-desc">渗透测试、大屏展示</div>
+              </div>
+            </div>
+            <div class="center-item full">
+              <div class="item-title">安全分析统计</div>
+              <div class="item-desc">cc攻击分析、漏洞入侵分析、BOT面板、实时态势......</div>
+            </div>
+            <div class="center-item full">
+              <div class="item-title">业务访问分析统计</div>
+              <div class="item-desc">访问分析、热点URL、热点子域名、请求分布、状态码、流量宽带......</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="footer-right">
+        <div class="right-top">
+          <div class="footer-text right-text">洁净流量</div>
+          <img class="right-img" src="~/assets/svg/home/arrow3.svg" alt="arrow3 " />
+        </div>
+        <div class="right-server">
+          <img class="server-img" src="~/assets/svg/home/server.svg" alt="server" />
+          <img class="arrow4" src="~/assets/svg/home/arrow4.svg" alt="arrow4">
+        </div>
+        <div class="server-text">
+          源服务器
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script setup>
+import User from './User.vue'
+import user1Icon from '~/assets/svg/home/user1.svg'
+import user2Icon from '~/assets/svg/home/user2.svg'
+import user3Icon from '~/assets/svg/home/user3.svg'
+import user4Icon from '~/assets/svg/home/user4.svg'
+</script>
+<style lang="scss" scoped>
+.flowchart-container {
+  width: 1200px;
+  position: relative;
+  margin: 0 auto;
+
+  .flowchart-users {
+    position: relative;
+
+    .user1 {
+      position: absolute;
+      top: 0;
+      left: 286px;
+
+
+    }
+
+    .user2 {
+      position: absolute;
+      top: 0;
+      right: 394px;
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: 14px;
+        height: 151px;
+        top: 100%;
+        right: 40%;
+        background: linear-gradient(#979797, #E6E6E6);
+        transform: translateX(-50%);
+      }
+    }
+
+    .user3 {
+      position: absolute;
+      top: 0;
+      right: 197px;
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: 14px;
+        height: 151px;
+        top: 100%;
+        right: 40%;
+        background: linear-gradient(#FF5852, #fff);
+        transform: translateX(-50%);
+      }
+    }
+
+    .user4 {
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: 14px;
+        height: 151px;
+        top: 100%;
+        right: 40%;
+        background: linear-gradient(#ccc, #fff);
+        transform: translateX(-50%);
+      }
+    }
+
+  }
+
+  .flowchart-arrow {
+    position: relative;
+    color: #FFF;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 20px;
+
+    .arrow1 {
+      position: absolute;
+      top: 122px;
+      left: 106px;
+    }
+
+    .text-box {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 10px;
+      border: 2px solid #8457FF;
+      background: #3F327D;
+    }
+
+    .text1 {
+      left: 0;
+      top: 270px;
+
+      width: 308px;
+      height: 74px;
+    }
+
+    .text2 {
+      left: 70px;
+      top: 370px;
+      width: 122px;
+      height: 54px;
+    }
+
+    .text3 {
+      left: 540px;
+      top: 370px;
+      width: 122px;
+      height: 54px;
+    }
+
+    .text4 {
+      left: 644px;
+      top: 270px;
+      width: 556px;
+      height: 74px;
+    }
+  }
+
+  .block-title {
+    width: 100%;
+    height: 70px;
+    background: rgba(128, 119, 255, 0.50);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    color: #FFF;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  .flowchart-block {
+    width: 100%;
+    padding-top: 475px;
+
+    .block-ads {
+      width: 100%;
+      border-radius: 10px;
+      border: 2px solid #8B74FF;
+      background: rgba(63, 51, 125, 0.30);
+      color: #FFF;
+      font-weight: 400;
+      line-height: 20px;
+
+      .ads-contnet {
+        font-size: 20px;
+        height: 134px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        // gap: 76px;
+
+        .ads-text {
+          display: flex;
+          width: 261px;
+          height: 51px;
+          justify-content: center;
+          align-items: center;
+          border-radius: 10px;
+          background: rgba(139, 116, 255, 0.50);
+        }
+      }
+    }
+
+
+
+    .block-yun {
+      width: 1200px;
+      border-radius: 10px;
+      border: 2px solid #8077FF;
+      background: rgba(63, 51, 125, 0.30);
+    }
+
+    .yun-contnet {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 30px;
+      padding: 35px 0;
+      position: relative;
+
+
+      .yun-item {
+        border-radius: 10px;
+        background: rgba(139, 116, 255, 0.50);
+        display: flex;
+        width: 440px;
+        height: 82px;
+        align-items: center;
+        padding: 15px 24px;
+        box-sizing: border-box;
+        position: relative;
+        gap: 36px;
+        z-index: 1;
+
+        .yun-item-title {
+          color: #FFF;
+          font-size: 20px;
+          font-weight: 700;
+          line-height: 20px;
+        }
+
+        .yun-item-desc {
+          color: #FFF;
+          font-size: 16px;
+          font-weight: 400;
+          line-height: 24px;
+          text-align: left;
+          flex: 1;
+        }
+      }
+    }
+
+
+
+    .block-arrow1 {
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  .flowchart-footer {
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+
+    .footer-text {
+      position: absolute;
+
+      display: flex;
+      width: 122px;
+      height: 54px;
+      justify-content: center;
+      align-items: center;
+      border-radius: 10px;
+      border: 2px solid #CBC9FF;
+      background: #3F337D;
+      box-shadow: 0 5.5px 10px 0 rgba(181, 179, 227, 0.30);
+      color: #FFF;
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 20px;
+      z-index: 1;
+    }
+
+    .left-text {
+      top: 20px;
+      left: 542px;
+    }
+
+    .right-text {
+      top: 81px;
+      left: 131px;
+    }
+  }
+
+  .footer-left {
+    width: 900px;
+
+    .left-top {
+      position: relative;
+
+      .top-img {
+        position: relative;
+        left: 575px;
+      }
+    }
+
+    .left-content {
+      width: 100%;
+      border-radius: 10px;
+      border: 2px solid #8077FF;
+      background: rgba(63, 51, 125, 0.30);
+      display: flex;
+      flex-direction: column;
+
+      .center-content {
+        flex: 1;
+        padding: 55px 40px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 20px;
+
+        .center-row {
+          display: flex;
+          justify-content: space-between;
+          gap: 20px;
+          width: 100%;
+        }
+
+        .center-item {
+          display: flex;
+          width: 380px;
+          height: 56px;
+          background: rgba(139, 116, 255, 0.50);
+          border-radius: 10px;
+          align-items: center;
+          box-sizing: border-box;
+          gap: 26px;
+          padding-left: 24px;
+
+          &.half {
+            width: calc(50% - 10px);
+          }
+
+          &.full {
+            width: 100%;
+          }
+
+          .item-title {
+            color: #FFF;
+            font-size: 20px;
+            font-weight: 700;
+            line-height: 20px;
+          }
+
+          .item-desc {
+            color: #FFF;
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  .footer-right {
+    width: 300px;
+
+    .right-top {
+      position: relative;
+    }
+
+    .right-img {
+      position: relative;
+      left: 174px;
+    }
+
+    .right-server {
+      position: relative;
+    }
+
+    .arrow4 {
+      position: absolute;
+      left: 8px;
+      top: 80px;
+    }
+
+    .server-img {
+      position: relative;
+      left: 48px;
+      z-index: 1;
+    }
+
+    .server-text {
+      display: flex;
+      width: 182px;
+      height: 75px;
+      justify-content: center;
+      align-items: center;
+      border-radius: 10px;
+      border: 2px solid #CBC9FF;
+      background: #3F337D;
+      box-shadow: 0 5.5px 10px 0 rgba(181, 179, 227, 0.30);
+      color: #FFF;
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 20px;
+      margin: 30px 0 0 84px;
+    }
+  }
+}
+</style>

app/components/home/User.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="user-item">
+    <img width="72" :src="src" class="user1-img" />
+    <div class="user1-text">{{ text }}</div>
+  </div>
+</template>
+<script setup>
+import defaultUserSrc from '~/assets/svg/home/user1.svg'
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: "正常访客",
+    required: true,
+  },
+  src: {
+    type: String,
+    default: defaultUserSrc,
+    required: true,
+  }
+});
+</script>
+<style lang="scss" scoped>
+.user-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .user1-text {
+    display: flex;
+    width: 162px;
+    height: 54px;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    border-radius: 8px;
+    border: 1px solid #A39DFF;
+    background: #3F337D;
+    color: #FFF;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+}
+</style>

app/pages/pc/index.vue

@@ -48,7 +48,7 @@
       </div>
     </section>
     <section class="security-flowchart">
-      <NuxtImg width="1918" loading="eager" src="/images/home/flowchart.png" alt="流程" />
+      <Flowchart />
     </section>
 
     <!-- 助力各行业客户成功 -->
@@ -172,6 +172,7 @@ import PlansSection from '~/components/PlansSection.vue'
 import ParticlesCanvas from '~/components/ParticlesCanvas.vue'
 import SecurityParticles from '~/components/SecurityParticles.vue'
 import homeVideo from '~/assets/video/home.webm'
+import Flowchart from '~/components/home/Flowchart.vue'