sdk: 添加功能切换及修改bug

assets/images/tools/annotation.svg

@@ -1,5 +1,5 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1.65283" y="1.55566" width="24.8889" height="24.8889" rx="1.55556" fill="#B1BFD1"/>
-<path d="M19.4446 20.6111L18.3604 21.308C17.9268 21.5868 17.3616 21.5479 16.9702 21.2124L16.5742 20.873C16.1373 20.4985 15.4926 20.4985 15.0557 20.873L14.7594 21.1269C14.3225 21.5014 13.6778 21.5014 13.2409 21.1269L12.9446 20.873C12.5076 20.4985 11.8629 20.4985 11.426 20.873L11.03 21.2124C10.6386 21.5479 10.0734 21.5868 9.63983 21.308L8.55566 20.6111" stroke="white" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M19.8332 7V9.47897H15.5241V17.8889H12.4951V9.47897H8.1665V7H19.8332Z" fill="white"/>
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.125" y="2" width="32" height="32" rx="2" fill="#B1BFD1"/>
+<path d="M25 26.5L23.6061 27.3961C23.0486 27.7545 22.322 27.7045 21.8187 27.2732L21.3095 26.8367C20.7478 26.3552 19.9189 26.3552 19.3571 26.8367L18.9762 27.1633C18.4145 27.6448 17.5855 27.6448 17.0238 27.1633L16.6429 26.8367C16.0811 26.3552 15.2522 26.3552 14.6905 26.8367L14.1813 27.2732C13.678 27.7045 12.9514 27.7545 12.3939 27.3961L11 26.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.5 9V12.1872H19.9598V23H16.0653V12.1872H10.5V9H25.5Z" fill="white"/>
 </svg>

assets/images/tools/annotation@2x.svg

@@ -1,5 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2.125" y="2" width="32" height="32" rx="2" fill="#B1BFD1"/>
-<path d="M25 26.5L23.6061 27.3961C23.0486 27.7545 22.322 27.7045 21.8187 27.2732L21.3095 26.8367C20.7478 26.3552 19.9189 26.3552 19.3571 26.8367L18.9762 27.1633C18.4145 27.6448 17.5855 27.6448 17.0238 27.1633L16.6429 26.8367C16.0811 26.3552 15.2522 26.3552 14.6905 26.8367L14.1813 27.2732C13.678 27.7045 12.9514 27.7545 12.3939 27.3961L11 26.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M25.5 9V12.1872H19.9598V23H16.0653V12.1872H10.5V9H25.5Z" fill="white"/>
-</svg>

assets/images/tools/arrow.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="18" fill="#F3F6FA"/>
+<path d="M25.1698 28.7395L20.4001 23.9697L25.1698 19.2" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/images/tools/docEdit.svg

@@ -1,6 +1,6 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.9902 2.75043C12.9902 2.32088 12.642 1.97266 12.2124 1.97266L2.64448 1.97266C2.21492 1.97266 1.8667 2.32088 1.8667 2.75043L1.8667 12.3184C1.8667 12.7479 2.21492 13.0961 2.64448 13.0961H12.2124C12.642 13.0961 12.9902 12.7479 12.9902 12.3184V2.75043Z" fill="#B1BFD1"/>
-<path d="M21.6778 0.89679C21.374 0.593049 20.8816 0.593049 20.5778 0.89679L14.861 6.6136C14.5573 6.91734 14.5573 7.40981 14.861 7.71355L20.5778 13.4304C20.8816 13.7341 21.374 13.7341 21.6778 13.4304L27.3946 7.71355C27.6983 7.4098 27.6983 6.91734 27.3946 6.6136L21.6778 0.89679Z" fill="#CED6E1"/>
-<path d="M12.9902 16.0986C12.9902 15.669 12.642 15.3208 12.2124 15.3208H2.64448C2.21492 15.3208 1.8667 15.669 1.8667 16.0986L1.8667 25.6665C1.8667 26.0961 2.21492 26.4443 2.64448 26.4443H12.2124C12.642 26.4443 12.9902 26.0961 12.9902 25.6665V16.0986Z" fill="#B1BFD1"/>
-<path d="M26.3378 16.0986C26.3378 15.669 25.9896 15.3208 25.5601 15.3208H15.9921C15.5626 15.3208 15.2144 15.669 15.2144 16.0986L15.2144 25.6665C15.2144 26.0961 15.5626 26.4443 15.9921 26.4443H25.5601C25.9896 26.4443 26.3378 26.0961 26.3378 25.6665V16.0986Z" fill="#B1BFD1"/>
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7015 3.53644C16.7015 2.98415 16.2538 2.53644 15.7015 2.53644L3.3999 2.53644C2.84762 2.53644 2.3999 2.98415 2.3999 3.53644L2.3999 15.8381C2.3999 16.3903 2.84762 16.8381 3.3999 16.8381H15.7015C16.2538 16.8381 16.7015 16.3903 16.7015 15.8381V3.53644Z" fill="#B1BFD1"/>
+<path d="M27.8714 1.15316C27.4809 0.762631 26.8477 0.762631 26.4572 1.15316L19.107 8.50334C18.7165 8.89387 18.7165 9.52703 19.107 9.91756L26.4572 17.2677C26.8477 17.6583 27.4809 17.6583 27.8714 17.2677L35.2216 9.91756C35.6121 9.52703 35.6121 8.89387 35.2216 8.50334L27.8714 1.15316Z" fill="#CED6E1"/>
+<path d="M16.7015 20.6984C16.7015 20.1461 16.2538 19.6984 15.7015 19.6984H3.3999C2.84762 19.6984 2.3999 20.1461 2.3999 20.6984L2.3999 33C2.3999 33.5523 2.84762 34 3.3999 34H15.7015C16.2538 34 16.7015 33.5523 16.7015 33V20.6984Z" fill="#B1BFD1"/>
+<path d="M33.8631 20.6984C33.8631 20.1461 33.4154 19.6984 32.8631 19.6984H20.5615C20.0092 19.6984 19.5615 20.1461 19.5615 20.6984L19.5615 33C19.5615 33.5523 20.0092 34 20.5615 34H32.8631C33.4154 34 33.8631 33.5523 33.8631 33V20.6984Z" fill="#B1BFD1"/>
 </svg>

assets/images/tools/docEdit@2x.svg

@@ -1,6 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.7015 3.53644C16.7015 2.98415 16.2538 2.53644 15.7015 2.53644L3.3999 2.53644C2.84762 2.53644 2.3999 2.98415 2.3999 3.53644L2.3999 15.8381C2.3999 16.3903 2.84762 16.8381 3.3999 16.8381H15.7015C16.2538 16.8381 16.7015 16.3903 16.7015 15.8381V3.53644Z" fill="#B1BFD1"/>
-<path d="M27.8714 1.15316C27.4809 0.762631 26.8477 0.762631 26.4572 1.15316L19.107 8.50334C18.7165 8.89387 18.7165 9.52703 19.107 9.91756L26.4572 17.2677C26.8477 17.6583 27.4809 17.6583 27.8714 17.2677L35.2216 9.91756C35.6121 9.52703 35.6121 8.89387 35.2216 8.50334L27.8714 1.15316Z" fill="#CED6E1"/>
-<path d="M16.7015 20.6984C16.7015 20.1461 16.2538 19.6984 15.7015 19.6984H3.3999C2.84762 19.6984 2.3999 20.1461 2.3999 20.6984L2.3999 33C2.3999 33.5523 2.84762 34 3.3999 34H15.7015C16.2538 34 16.7015 33.5523 16.7015 33V20.6984Z" fill="#B1BFD1"/>
-<path d="M33.8631 20.6984C33.8631 20.1461 33.4154 19.6984 32.8631 19.6984H20.5615C20.0092 19.6984 19.5615 20.1461 19.5615 20.6984L19.5615 33C19.5615 33.5523 20.0092 34 20.5615 34H32.8631C33.4154 34 33.8631 33.5523 33.8631 33V20.6984Z" fill="#B1BFD1"/>
-</svg>

assets/images/tools/docEditActive.svg

@@ -1,6 +1,6 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.9902 2.75092C12.9902 2.32137 12.642 1.97314 12.2124 1.97314L2.64448 1.97314C2.21492 1.97314 1.8667 2.32137 1.8667 2.75092L1.8667 12.3188C1.8667 12.7484 2.21492 13.0966 2.64448 13.0966H12.2124C12.642 13.0966 12.9902 12.7484 12.9902 12.3188V2.75092Z" fill="#396FFA"/>
-<path d="M21.6778 0.897279C21.374 0.593538 20.8816 0.593538 20.5778 0.897279L14.861 6.61409C14.5573 6.91783 14.5573 7.41029 14.861 7.71403L20.5778 13.4308C20.8816 13.7346 21.374 13.7346 21.6778 13.4308L27.3946 7.71403C27.6983 7.41029 27.6983 6.91783 27.3946 6.61409L21.6778 0.897279Z" fill="#88A9FC"/>
-<path d="M12.9902 16.0991C12.9902 15.6695 12.642 15.3213 12.2124 15.3213H2.64448C2.21492 15.3213 1.8667 15.6695 1.8667 16.0991L1.8667 25.667C1.8667 26.0965 2.21492 26.4448 2.64448 26.4448H12.2124C12.642 26.4448 12.9902 26.0965 12.9902 25.667V16.0991Z" fill="#396FFA"/>
-<path d="M26.3378 16.0991C26.3378 15.6695 25.9896 15.3213 25.5601 15.3213H15.9921C15.5626 15.3213 15.2144 15.6695 15.2144 16.0991L15.2144 25.667C15.2144 26.0965 15.5626 26.4448 15.9921 26.4448H25.5601C25.9896 26.4448 26.3378 26.0965 26.3378 25.667V16.0991Z" fill="#396FFA"/>
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7015 3.53644C16.7015 2.98415 16.2538 2.53644 15.7015 2.53644L3.3999 2.53644C2.84762 2.53644 2.3999 2.98415 2.3999 3.53644L2.3999 15.8381C2.3999 16.3903 2.84762 16.8381 3.3999 16.8381H15.7015C16.2538 16.8381 16.7015 16.3903 16.7015 15.8381V3.53644Z" fill="#396FFA"/>
+<path d="M27.8714 1.15316C27.4809 0.762631 26.8477 0.762631 26.4572 1.15316L19.107 8.50334C18.7165 8.89387 18.7165 9.52703 19.107 9.91756L26.4572 17.2677C26.8477 17.6583 27.4809 17.6583 27.8714 17.2677L35.2216 9.91756C35.6121 9.52703 35.6121 8.89387 35.2216 8.50334L27.8714 1.15316Z" fill="#88A9FC"/>
+<path d="M16.7015 20.6984C16.7015 20.1461 16.2538 19.6984 15.7015 19.6984H3.3999C2.84762 19.6984 2.3999 20.1461 2.3999 20.6984L2.3999 33C2.3999 33.5523 2.84762 34 3.3999 34H15.7015C16.2538 34 16.7015 33.5523 16.7015 33V20.6984Z" fill="#396FFA"/>
+<path d="M33.8631 20.6984C33.8631 20.1461 33.4154 19.6984 32.8631 19.6984H20.5615C20.0092 19.6984 19.5615 20.1461 19.5615 20.6984L19.5615 33C19.5615 33.5523 20.0092 34 20.5615 34H32.8631C33.4154 34 33.8631 33.5523 33.8631 33V20.6984Z" fill="#396FFA"/>
 </svg>

assets/images/tools/docEditActive@2x.svg

@@ -1,6 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.7015 3.53644C16.7015 2.98415 16.2538 2.53644 15.7015 2.53644L3.3999 2.53644C2.84762 2.53644 2.3999 2.98415 2.3999 3.53644L2.3999 15.8381C2.3999 16.3903 2.84762 16.8381 3.3999 16.8381H15.7015C16.2538 16.8381 16.7015 16.3903 16.7015 15.8381V3.53644Z" fill="#396FFA"/>
-<path d="M27.8714 1.15316C27.4809 0.762631 26.8477 0.762631 26.4572 1.15316L19.107 8.50334C18.7165 8.89387 18.7165 9.52703 19.107 9.91756L26.4572 17.2677C26.8477 17.6583 27.4809 17.6583 27.8714 17.2677L35.2216 9.91756C35.6121 9.52703 35.6121 8.89387 35.2216 8.50334L27.8714 1.15316Z" fill="#88A9FC"/>
-<path d="M16.7015 20.6984C16.7015 20.1461 16.2538 19.6984 15.7015 19.6984H3.3999C2.84762 19.6984 2.3999 20.1461 2.3999 20.6984L2.3999 33C2.3999 33.5523 2.84762 34 3.3999 34H15.7015C16.2538 34 16.7015 33.5523 16.7015 33V20.6984Z" fill="#396FFA"/>
-<path d="M33.8631 20.6984C33.8631 20.1461 33.4154 19.6984 32.8631 19.6984H20.5615C20.0092 19.6984 19.5615 20.1461 19.5615 20.6984L19.5615 33C19.5615 33.5523 20.0092 34 20.5615 34H32.8631C33.4154 34 33.8631 33.5523 33.8631 33V20.6984Z" fill="#396FFA"/>
-</svg>

assets/images/tools/encrypt.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33 7.41362C33 6.97863 32.7188 6.59353 32.3045 6.46109L18.3045 1.98637C18.1064 1.92308 17.8936 1.92308 17.6956 1.98637L3.69555 6.46109C3.2812 6.59353 3 6.97863 3 7.41362L3 17.0482C3 25.5055 9.7734 31.6699 16.8549 33.7408C16.9904 33.7804 17.4829 33.8954 17.776 33.9631C17.9234 33.9971 18.0763 33.9969 18.2236 33.9624C18.4865 33.9008 18.9005 33.8029 19.0066 33.7721C26.0493 31.7312 33 25.5467 33 17.0482V7.41362Z" fill="#B1BFD1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9998 12C19.9998 11.7239 19.7759 11.5 19.4998 11.5H17.4998C17.2236 11.5 16.9998 11.7239 16.9998 12V16H12.9998C12.7236 16 12.4998 16.2239 12.4998 16.5V18.5C12.4998 18.7761 12.7236 19 12.9998 19H16.9998V23C16.9998 23.2761 17.2236 23.5 17.4998 23.5H19.4998C19.7759 23.5 19.9998 23.2761 19.9998 23V19H23.9998C24.2759 19 24.4998 18.7761 24.4998 18.5V16.5C24.4998 16.2239 24.2759 16 23.9998 16H19.9998V12Z" fill="white"/>
+</svg>

assets/images/tools/encryptActive.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33 7.41362C33 6.97863 32.7188 6.59353 32.3045 6.46109L18.3045 1.98637C18.1064 1.92308 17.8936 1.92308 17.6956 1.98637L3.69555 6.46109C3.2812 6.59353 3 6.97863 3 7.41362L3 17.0482C3 25.5055 9.7734 31.6699 16.8549 33.7408C16.9904 33.7804 17.4829 33.8954 17.776 33.9631C17.9234 33.9971 18.0763 33.9969 18.2236 33.9624C18.4865 33.9008 18.9005 33.8029 19.0066 33.7721C26.0493 31.7312 33 25.5467 33 17.0482V7.41362Z" fill="#396FFA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9998 12C19.9998 11.7239 19.7759 11.5 19.4998 11.5H17.4998C17.2236 11.5 16.9998 11.7239 16.9998 12V16H12.9998C12.7236 16 12.4998 16.2239 12.4998 16.5V18.5C12.4998 18.7761 12.7236 19 12.9998 19H16.9998V23C16.9998 23.2761 17.2236 23.5 17.4998 23.5H19.4998C19.7759 23.5 19.9998 23.2761 19.9998 23V19H23.9998C24.2759 19 24.4998 18.7761 24.4998 18.5V16.5C24.4998 16.2239 24.2759 16 23.9998 16H19.9998V12Z" fill="white"/>
+</svg>

assets/images/tools/formFill.svg

@@ -1,8 +1,8 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3.11133" y="14" width="7.77778" height="11.6667" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8887 25.2867V2.13428H13.222V25.2867H10.8887Z" fill="#B1BFD1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4446 14.2896L1.55566 14.2896L1.55566 11.9562L26.4446 11.9562V14.2896Z" fill="#B1BFD1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.889 3.2921V24.1112H24.1112V3.2921H3.889ZM2.71329 1.55566C2.07395 1.55566 1.55566 2.07395 1.55566 2.71329V25.2869C1.55566 25.9263 2.07395 26.4446 2.71329 26.4446H25.2869C25.9263 26.4446 26.4446 25.9263 26.4446 25.2869V2.71329C26.4446 2.07395 25.9263 1.55566 25.2869 1.55566H2.71329Z" fill="#B1BFD1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7006 16.8856C22.8324 17.0175 22.8324 17.2313 22.7006 17.3632L18.4984 21.5653C18.0737 21.99 17.3852 21.99 16.9605 21.5653L14.6226 19.2275C14.4907 19.0956 14.4907 18.8817 14.6226 18.7499L15.2435 18.1289C15.3754 17.997 15.5892 17.997 15.7211 18.1289L17.7294 20.1373L21.602 16.2647C21.7339 16.1328 21.9477 16.1328 22.0796 16.2647L22.7006 16.8856Z" fill="#CED6E1"/>
-<path d="M25.2869 6.90967H2.71329C2.55345 6.90967 2.42388 6.7801 2.42388 6.62027V2.71329C2.42388 2.55345 2.55345 2.42388 2.71329 2.42388H25.2869C25.4468 2.42388 25.5763 2.55345 25.5763 2.71329V6.62026C25.5763 6.7801 25.4468 6.90967 25.2869 6.90967Z" fill="#B1BFD1" stroke="#B1BFD1" stroke-width="1.73643"/>
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="18" width="10" height="15" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 32.5116V2.74414H17V32.5116H14Z" fill="#B1BFD1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34 18.3721L2 18.3721V15.3721L34 15.3721V18.3721Z" fill="#B1BFD1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4.23256V31H31V4.23256H5ZM3.48837 2C2.66637 2 2 2.66637 2 3.48837V32.5116C2 33.3336 2.66637 34 3.48837 34H32.5116C33.3336 34 34 33.3336 34 32.5116V3.48837C34 2.66637 33.3336 2 32.5116 2H3.48837Z" fill="#B1BFD1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1866 21.71C29.3562 21.8795 29.3562 22.1545 29.1866 22.324L23.7839 27.7268C23.2378 28.2728 22.3526 28.2728 21.8065 27.7268L18.8007 24.7209C18.6311 24.5514 18.6311 24.2764 18.8007 24.1069L19.599 23.3085C19.7686 23.139 20.0435 23.139 20.2131 23.3085L22.7952 25.8907L27.7742 20.9116C27.9438 20.7421 28.2187 20.7421 28.3883 20.9116L29.1866 21.71Z" fill="#CED6E1"/>
+<path d="M32.5116 8.88372H3.48837C3.28287 8.88372 3.11628 8.71713 3.11628 8.51163V3.48837C3.11628 3.28287 3.28287 3.11628 3.48837 3.11628H32.5116C32.7171 3.11628 32.8837 3.28287 32.8837 3.48837V8.51163C32.8837 8.71713 32.7171 8.88372 32.5116 8.88372Z" fill="#B1BFD1" stroke="#B1BFD1" stroke-width="2.23256"/>
 </svg>

assets/images/tools/formFill@2x.svg

@@ -1,8 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="4" y="18" width="10" height="15" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 32.5116V2.74414H17V32.5116H14Z" fill="#B1BFD1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34 18.3721L2 18.3721V15.3721L34 15.3721V18.3721Z" fill="#B1BFD1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4.23256V31H31V4.23256H5ZM3.48837 2C2.66637 2 2 2.66637 2 3.48837V32.5116C2 33.3336 2.66637 34 3.48837 34H32.5116C33.3336 34 34 33.3336 34 32.5116V3.48837C34 2.66637 33.3336 2 32.5116 2H3.48837Z" fill="#B1BFD1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1866 21.71C29.3562 21.8795 29.3562 22.1545 29.1866 22.324L23.7839 27.7268C23.2378 28.2728 22.3526 28.2728 21.8065 27.7268L18.8007 24.7209C18.6311 24.5514 18.6311 24.2764 18.8007 24.1069L19.599 23.3085C19.7686 23.139 20.0435 23.139 20.2131 23.3085L22.7952 25.8907L27.7742 20.9116C27.9438 20.7421 28.2187 20.7421 28.3883 20.9116L29.1866 21.71Z" fill="#CED6E1"/>
-<path d="M32.5116 8.88372H3.48837C3.28287 8.88372 3.11628 8.71713 3.11628 8.51163V3.48837C3.11628 3.28287 3.28287 3.11628 3.48837 3.11628H32.5116C32.7171 3.11628 32.8837 3.28287 32.8837 3.48837V8.51163C32.8837 8.71713 32.7171 8.88372 32.5116 8.88372Z" fill="#B1BFD1" stroke="#B1BFD1" stroke-width="2.23256"/>
-</svg>

assets/images/tools/formFillActive.svg

@@ -1,7 +1,7 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8887 25.2867V2.13428H13.222V25.2867H10.8887Z" fill="#396FFA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4446 14.2896L1.55566 14.2896L1.55566 11.9562L26.4446 11.9562V14.2896Z" fill="#396FFA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.889 3.2921V24.1112H24.1112V3.2921H3.889ZM2.71329 1.55566C2.07395 1.55566 1.55566 2.07395 1.55566 2.71329V25.2869C1.55566 25.9263 2.07395 26.4446 2.71329 26.4446H25.2869C25.9263 26.4446 26.4446 25.9263 26.4446 25.2869V2.71329C26.4446 2.07395 25.9263 1.55566 25.2869 1.55566H2.71329Z" fill="#396FFA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7006 16.8856C22.8324 17.0175 22.8324 17.2313 22.7006 17.3632L18.4984 21.5653C18.0737 21.99 17.3852 21.99 16.9605 21.5653L14.6226 19.2275C14.4907 19.0956 14.4907 18.8817 14.6226 18.7499L15.2435 18.1289C15.3754 17.997 15.5892 17.997 15.7211 18.1289L17.7294 20.1373L21.602 16.2647C21.7339 16.1328 21.9477 16.1328 22.0796 16.2647L22.7006 16.8856Z" fill="#396FFA"/>
-<path d="M25.2869 6.90967H2.71329C2.55345 6.90967 2.42388 6.7801 2.42388 6.62027V2.71329C2.42388 2.55345 2.55345 2.42388 2.71329 2.42388H25.2869C25.4468 2.42388 25.5763 2.55345 25.5763 2.71329V6.62026C25.5763 6.7801 25.4468 6.90967 25.2869 6.90967Z" fill="#396FFA" stroke="#396FFA" stroke-width="1.73643"/>
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 32.5116V2.74414H17V32.5116H14Z" fill="#396FFA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34 18.3721L2 18.3721V15.3721L34 15.3721V18.3721Z" fill="#396FFA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4.23256V31H31V4.23256H5ZM3.48837 2C2.66637 2 2 2.66637 2 3.48837V32.5116C2 33.3336 2.66637 34 3.48837 34H32.5116C33.3336 34 34 33.3336 34 32.5116V3.48837C34 2.66637 33.3336 2 32.5116 2H3.48837Z" fill="#396FFA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1866 21.7099C29.3562 21.8794 29.3562 22.1543 29.1866 22.3239L23.7839 27.7267C23.2378 28.2727 22.3526 28.2727 21.8065 27.7267L18.8007 24.7208C18.6311 24.5512 18.6311 24.2763 18.8007 24.1068L19.599 23.3084C19.7686 23.1389 20.0435 23.1389 20.2131 23.3084L22.7952 25.8906L27.7742 20.9115C27.9438 20.7419 28.2187 20.7419 28.3883 20.9115L29.1866 21.7099Z" fill="#396FFA"/>
+<path d="M32.5116 8.88372H3.48837C3.28287 8.88372 3.11628 8.71713 3.11628 8.51163V3.48837C3.11628 3.28287 3.28287 3.11628 3.48837 3.11628H32.5116C32.7171 3.11628 32.8837 3.28287 32.8837 3.48837V8.51163C32.8837 8.71713 32.7171 8.88372 32.5116 8.88372Z" fill="#396FFA" stroke="#396FFA" stroke-width="2.23256"/>
 </svg>

assets/images/tools/formFillActive@2x.svg

@@ -1,7 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 32.5116V2.74414H17V32.5116H14Z" fill="#396FFA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34 18.3721L2 18.3721V15.3721L34 15.3721V18.3721Z" fill="#396FFA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4.23256V31H31V4.23256H5ZM3.48837 2C2.66637 2 2 2.66637 2 3.48837V32.5116C2 33.3336 2.66637 34 3.48837 34H32.5116C33.3336 34 34 33.3336 34 32.5116V3.48837C34 2.66637 33.3336 2 32.5116 2H3.48837Z" fill="#396FFA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1866 21.7099C29.3562 21.8794 29.3562 22.1543 29.1866 22.3239L23.7839 27.7267C23.2378 28.2727 22.3526 28.2727 21.8065 27.7267L18.8007 24.7208C18.6311 24.5512 18.6311 24.2763 18.8007 24.1068L19.599 23.3084C19.7686 23.1389 20.0435 23.1389 20.2131 23.3084L22.7952 25.8906L27.7742 20.9115C27.9438 20.7419 28.2187 20.7419 28.3883 20.9115L29.1866 21.7099Z" fill="#396FFA"/>
-<path d="M32.5116 8.88372H3.48837C3.28287 8.88372 3.11628 8.71713 3.11628 8.51163V3.48837C3.11628 3.28287 3.28287 3.11628 3.48837 3.11628H32.5116C32.7171 3.11628 32.8837 3.28287 32.8837 3.48837V8.51163C32.8837 8.71713 32.7171 8.88372 32.5116 8.88372Z" fill="#396FFA" stroke="#396FFA" stroke-width="2.23256"/>
-</svg>

assets/images/tools/right.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.30176 8.65674L9.95861 14.3136L15.6155 8.65674" stroke="#232748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5074 0.696721L17.2803 5.46969C17.5732 5.76259 17.5732 6.23746 17.2803 6.53035L12.5074 11.3033C12.2145 11.5962 11.7396 11.5962 11.4467 11.3033C11.1538 11.0104 11.1538 10.5356 11.4467 10.2427L14.9393 6.75002H0.75V5.25002H14.9393L11.4467 1.75738C11.1538 1.46449 11.1538 0.989614 11.4467 0.696721C11.7396 0.403827 12.2145 0.403827 12.5074 0.696721Z" fill="#396FFA"/>
 </svg>

assets/images/tools/right@2x.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="16" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.83012 10.7395L6.59988 5.96973L1.83012 1.19997" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

assets/images/tools/viewer.svg

@@ -1,6 +1,6 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.88867 2.33344C3.88867 1.90389 4.23689 1.55566 4.66645 1.55566H16.3331L24.1109 8.55566V25.6668C24.1109 26.0963 23.7627 26.4446 23.3331 26.4446H4.66645C4.2369 26.4446 3.88867 26.0963 3.88867 25.6668V2.33344Z" fill="#B1BFD1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3403 1.55566L24.1113 8.55566L17.1353 8.70951C16.6991 8.71913 16.3403 8.36819 16.3403 7.93192V1.55566Z" fill="#CED6E1"/>
-<path d="M14.0001 19.2498C16.7429 19.2498 19.0775 16.9082 19.9516 15.9053C20.1778 15.6458 20.1778 15.2705 19.9516 15.011C19.0775 14.0081 16.7429 11.6665 14.0001 11.6665C11.2574 11.6665 8.92273 14.0081 8.04861 15.011C7.8224 15.2705 7.8224 15.6458 8.04861 15.9053C8.92273 16.9082 11.2574 19.2498 14.0001 19.2498Z" fill="white"/>
-<path d="M13.9998 17.0381C14.8723 17.0381 15.5796 16.3308 15.5796 15.4583C15.5796 14.5858 14.8723 13.8784 13.9998 13.8784C13.1273 13.8784 12.4199 14.5858 12.4199 15.4583C12.4199 16.3308 13.1273 17.0381 13.9998 17.0381Z" stroke="#B1BFD1" stroke-width="1.26389" stroke-linejoin="round"/>
+<svg width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 3.5C5 2.94772 5.44772 2.5 6 2.5H21L31 11.5V33.5C31 34.0523 30.5523 34.5 30 34.5H6C5.44772 34.5 5 34.0523 5 33.5V3.5Z" fill="#B1BFD1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0088 2.5L31 11.5L22.0308 11.6978C21.4701 11.7102 21.0088 11.259 21.0088 10.698V2.5Z" fill="#CED6E1"/>
+<path d="M18 25.25C21.5264 25.25 24.5281 22.2393 25.6519 20.9499C25.9428 20.6162 25.9428 20.1338 25.6519 19.8001C24.5281 18.5107 21.5264 15.5 18 15.5C14.4736 15.5 11.4719 18.5107 10.3481 19.8001C10.0572 20.1338 10.0572 20.6162 10.3481 20.9499C11.4719 22.2393 14.4736 25.25 18 25.25Z" fill="white"/>
+<path d="M18 22.4062C19.1218 22.4062 20.0312 21.4968 20.0312 20.375C20.0312 19.2532 19.1218 18.3438 18 18.3438C16.8782 18.3438 15.9688 19.2532 15.9688 20.375C15.9688 21.4968 16.8782 22.4062 18 22.4062Z" stroke="#B1BFD1" stroke-width="1.625" stroke-linejoin="round"/>
 </svg>

assets/images/tools/viewer@2x.svg

@@ -1,6 +0,0 @@
-<svg width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 3.5C5 2.94772 5.44772 2.5 6 2.5H21L31 11.5V33.5C31 34.0523 30.5523 34.5 30 34.5H6C5.44772 34.5 5 34.0523 5 33.5V3.5Z" fill="#B1BFD1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0088 2.5L31 11.5L22.0308 11.6978C21.4701 11.7102 21.0088 11.259 21.0088 10.698V2.5Z" fill="#CED6E1"/>
-<path d="M18 25.25C21.5264 25.25 24.5281 22.2393 25.6519 20.9499C25.9428 20.6162 25.9428 20.1338 25.6519 19.8001C24.5281 18.5107 21.5264 15.5 18 15.5C14.4736 15.5 11.4719 18.5107 10.3481 19.8001C10.0572 20.1338 10.0572 20.6162 10.3481 20.9499C11.4719 22.2393 14.4736 25.25 18 25.25Z" fill="white"/>
-<path d="M18 22.4062C19.1218 22.4062 20.0312 21.4968 20.0312 20.375C20.0312 19.2532 19.1218 18.3438 18 18.3438C16.8782 18.3438 15.9688 19.2532 15.9688 20.375C15.9688 21.4968 16.8782 22.4062 18 22.4062Z" stroke="#B1BFD1" stroke-width="1.625" stroke-linejoin="round"/>
-</svg>

assets/images/tools/viewerActive.svg

@@ -1,6 +1,6 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.88867 2.33344C3.88867 1.90389 4.23689 1.55566 4.66645 1.55566H16.3331L24.1109 8.55566V25.6668C24.1109 26.0963 23.7627 26.4446 23.3331 26.4446H4.66645C4.2369 26.4446 3.88867 26.0963 3.88867 25.6668V2.33344Z" fill="#396FFA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3403 1.55566L24.1113 8.55566L17.1353 8.70951C16.6991 8.71913 16.3403 8.36819 16.3403 7.93192V1.55566Z" fill="#88A9FC"/>
-<path d="M14.0001 19.2503C16.7429 19.2503 19.0775 16.9087 19.9516 15.9058C20.1778 15.6463 20.1778 15.271 19.9516 15.0115C19.0775 14.0086 16.7429 11.667 14.0001 11.667C11.2574 11.667 8.92273 14.0086 8.04861 15.0115C7.8224 15.271 7.8224 15.6463 8.04861 15.9058C8.92273 16.9087 11.2574 19.2503 14.0001 19.2503Z" fill="white"/>
-<path d="M13.9998 17.0386C14.8723 17.0386 15.5796 16.3313 15.5796 15.4588C15.5796 14.5862 14.8723 13.8789 13.9998 13.8789C13.1273 13.8789 12.4199 14.5862 12.4199 15.4588C12.4199 16.3313 13.1273 17.0386 13.9998 17.0386Z" stroke="#396FFA" stroke-width="1.26389" stroke-linejoin="round"/>
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 3C5 2.44772 5.44772 2 6 2H21L31 11V33C31 33.5523 30.5523 34 30 34H6C5.44772 34 5 33.5523 5 33V3Z" fill="#396FFA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0088 2L31 11L22.0308 11.1978C21.4701 11.2102 21.0088 10.759 21.0088 10.198V2Z" fill="#88A9FC"/>
+<path d="M18 24.75C21.5264 24.75 24.5281 21.7393 25.6519 20.4499C25.9428 20.1162 25.9428 19.6338 25.6519 19.3001C24.5281 18.0107 21.5264 15 18 15C14.4736 15 11.4719 18.0107 10.3481 19.3001C10.0572 19.6338 10.0572 20.1162 10.3481 20.4499C11.4719 21.7393 14.4736 24.75 18 24.75Z" fill="white"/>
+<path d="M18 21.9062C19.1218 21.9062 20.0312 20.9968 20.0312 19.875C20.0312 18.7532 19.1218 17.8438 18 17.8438C16.8782 17.8438 15.9688 18.7532 15.9688 19.875C15.9688 20.9968 16.8782 21.9062 18 21.9062Z" stroke="#396FFA" stroke-width="1.625" stroke-linejoin="round"/>
 </svg>

assets/images/tools/viewerActive@2x.svg

@@ -1,6 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 3C5 2.44772 5.44772 2 6 2H21L31 11V33C31 33.5523 30.5523 34 30 34H6C5.44772 34 5 33.5523 5 33V3Z" fill="#396FFA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0088 2L31 11L22.0308 11.1978C21.4701 11.2102 21.0088 10.759 21.0088 10.198V2Z" fill="#88A9FC"/>
-<path d="M18 24.75C21.5264 24.75 24.5281 21.7393 25.6519 20.4499C25.9428 20.1162 25.9428 19.6338 25.6519 19.3001C24.5281 18.0107 21.5264 15 18 15C14.4736 15 11.4719 18.0107 10.3481 19.3001C10.0572 19.6338 10.0572 20.1162 10.3481 20.4499C11.4719 21.7393 14.4736 24.75 18 24.75Z" fill="white"/>
-<path d="M18 21.9062C19.1218 21.9062 20.0312 20.9968 20.0312 19.875C20.0312 18.7532 19.1218 17.8438 18 17.8438C16.8782 17.8438 15.9688 18.7532 15.9688 19.875C15.9688 20.9968 16.8782 21.9062 18 21.9062Z" stroke="#396FFA" stroke-width="1.625" stroke-linejoin="round"/>
-</svg>

components/sdk/Featqure.vue

@@ -1,193 +0,0 @@
-<template>
-  <div class="wrapper">
-    <div class="main-features lg:mt-52px pb-30px main-container">
-      <div ref="text" class="text-container flex justify-around border-b-1px border-[#E1E3E8]  overflow-x-auto ">
-        <div v-for="(item, i) in featureData" :key="i" class="cursor-pointer text-item pb-12px  flex flex-col items-center" :class="[i === activeIndex ? 'border-[#396FFA] border-b-3px' : '']" @click="changeIndex(i)">
-          <div>
-            <img v-show="i === activeIndex" :src="item.iconActiveUrl" :alt="item.alt" class="w-36px h-36px mb-8px" >
-            <img v-show="i !== activeIndex" :src="item.iconUrl" :alt="item.alt" class="w-36px h-36px mb-8px" >
-          </div>
-          <div class="mx-8px whitespace-nowrap text-sm">{{ item.title }}</div>
-        </div>
-      </div>
-      <div v-show="i === activeIndex" v-for="(data, i) in featureData" :key="i" class="feature-item-container">
-        <div class="flex  justify-between flex-row-reverse ">
-          <div class="flex-1 flex flex-col justify-center max-w-480px pl-24px">
-            <div class="relative mb-12px text-24px leading-36px text-[#232748] font-600 <lg:(mb-8px text-16px leading-24px)">{{ data.title }}</div>
-            <p class="text-16px leading-28px text-[#52555F] <lg:(text-14px leading-20px)">{{ data.decs }}</p>
-            <a :href="data.url" class="move-arrow inline-flex items-center mt-24px text-sm text-[#396FFA] font-500 <lg:mt-12px">Learn More<ArrowRightActive class="ml-8px move" /></a>
-          </div>
-          <div class="img-container relative flex items-center h-500px w-598px">
-            <img :src="data.bannerUrl" :alt="data.alt" width="598">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import ArrowRightActive from '~/components/sdk/ArrowRightActive.svg?inline'
-export default {
-  components: {
-    ArrowRightActive
-  },
-  data () {
-    return {
-      index: 0,
-      activeIndex: 0,
-      featureData: [
-        {
-          title: 'PDF查看',
-          decs: 'Render complex PDFs smoothly and accurately with fast and battle-tested rendering technologies. Provide rich capabilities like reading mode, themes, navigation, search, zoom, bookmark, and watermark.',
-          url: '/pdf-sdk/viewer',
-          alt: 'Viewer',
-          iconUrl: require('~/assets/images/tools/viewer@2x.svg'),
-          iconActiveUrl: require('~/assets/images/tools/viewerActive@2x.svg'),
-          iconMobileUrl: require('~/assets/images/tools/viewer.svg'),
-          iconMobileActiveUrl: require('~/assets/images/tools/viewerActive.svg'),
-          bannerUrl: '/images/tools/viewer@2x.png',
-        },
-        {
-          title: 'Document Editor',
-          alt: 'Document Editor',
-          decs: 'Embed rich PDF page manipulation and editing capabilities in your app to edit PDF directly: merge, split, add, delete, rotate, move, replace, and extract PDF pages, etc.',
-          url: '/pdf-sdk/document-editor',
-          iconUrl: require('~/assets/images/tools/docEdit@2x.svg'),
-          iconActiveUrl: require('~/assets/images/tools/docEditActive@2x.svg'),
-          iconMobileUrl: require('~/assets/images/tools/docEdit.svg'),
-          iconMobileActiveUrl: require('~/assets/images/tools/docEditActive.svg'),
-          bannerUrl: '/images/tools/docEditor@2x.png',
-        },
-        {
-          title: 'Content Editor',
-          alt: 'Content Editor',
-          decs: 'Automatically detect font and size of the original text content, and programmatically manipulate content within pages as needed like adding, deleting, and replacing text and images in PDFs. ',
-          url: '/pdf-sdk/edit-pdf',
-          iconUrl: require('~/assets/images/tools/contEdit@2x.svg'),
-          iconActiveUrl: require('~/assets/images/tools/contEditActive@2x.svg'),
-          iconMobileUrl: require('~/assets/images/tools/contEdit.svg'),
-          iconMobileActiveUrl: require('~/assets/images/tools/contEditActive.svg'),
-          bannerUrl: '/images/tools/contEditor@2x.png',
-        },
-        {
-          title: 'Annotations',
-          alt: 'Annotations',
-          decs: 'Enable your users to draw free, highlight text, and collaborate on PDFs using notes, links, text boxes, shapes, markups, and stamp annotations. ',
-          url: '/pdf-sdk/annotations',
-          iconUrl: require('~/assets/images/tools/annotation@2x.svg'),
-          iconActiveUrl: require('~/assets/images/tools/annotationActive@2x.svg'),
-          iconMobileUrl: require('~/assets/images/tools/annotation.svg'),
-          iconMobileActiveUrl: require('~/assets/images/tools/annotationActive.svg'),
-          bannerUrl: '/images/tools/annotation@2x.png',
-        },
-        {
-          title: 'Form Filling',
-          alt: 'Form Filling',
-          decs: 'Obtain the ability to create, view, fill out, edit, save, and flatten fillable AcroForms, XFA, and non-interactive forms with ease.',
-          url: '/pdf-sdk/forms',
-          iconUrl: require('~/assets/images/tools/formFill@2x.svg'),
-          iconActiveUrl: require('~/assets/images/tools/formFillActive@2x.svg'),
-          iconMobileUrl: require('~/assets/images/tools/formFill.svg'),
-          iconMobileActiveUrl: require('~/assets/images/tools/formFillActive.svg'),
-          bannerUrl: '/images/tools/formFill@2x.png',
-        },
-        {
-          title: 'Signatures',
-          alt: 'Signatures',
-          decs: 'Certify and validate certificate-based documents. Sign your apps using drawn, typed, images, and digital signatures.',
-          url: '/pdf-sdk/signatures',
-          iconUrl: require('~/assets/images/tools/signatures@2x.svg'),
-          iconActiveUrl: require('~/assets/images/tools/signaturesActive@2x.svg'),
-          iconMobileUrl: require('~/assets/images/tools/signatures.svg'),
-          iconMobileActiveUrl: require('~/assets/images/tools/signaturesActive.svg'),
-          bannerUrl: '/images/tools/signatures@2x.png',
-        }
-      ]
-    }
-  },
-  methods: {
-    changeIndex (i) {
-      this.activeIndex = i
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .main-content {
-    font-family: 'Poppins';
-    .main-features {
-      position: sticky;
-      top: 0rem;
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-      padding-top: 70px;
-      overflow: hidden;
-      .video-container {
-        position: relative;
-        display: flex;
-        flex-grow: 1;
-      }
-      .text-container {
-        scrollbar-width: none; /* firefox */
-        -ms-overflow-style: none; /* IE 10+ */
-        & :nth-child(1) {
-            .mx-8px {
-              padding-left: 12px;
-              padding-right: 12px;
-            }
-          }
-        .text-item {
-          .line-container {
-            height: 2px;
-            overflow: hidden;
-            opacity: 1;
-          }
-        }
-      }
-      .text-container::-webkit-scrollbar {
-          display: none; /* Chrome Safari */
-      }
-    }
-  }
-  ::-webkit-scrollbar {
-    scrollbar-width: none; /* firefox */
-    -ms-overflow-style: none;
-    display: none; /* Chrome Safari */
-  }
-  .line-container {
-    position: relative;
-    height: 2px;
-    overflow: hidden;
-    opacity: 1;
-    &::before {
-      content: '';
-      position: absolute;
-      top: 1px;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background-color: #E1E3E8;
-    }
-  }
-  .line {
-    position: relative;
-    width: 100%;
-    height: 2px;
-    background-color: #396FFA;
-    transform-origin: left center;
-  }
-  .main-content .main-features .text-container .text-item .title {
-    font-size: 18px;
-  }
-  .main-content .main-features .video-container {
-    margin-bottom: 3.125rem;
-  }
-  @media screen and (min-width: 1280px) {
-    .main-content .main-features .text-container .text-item .title {
-      font-size: 22px;
-    }
-  }
-</style>

components/sdk/Feature.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="wrapper">
+    <div class="main-features lg:mt-52px main-container">
+      <div ref="text" class="relative text-container flex justify-around border-b-1px border-[#E1E3E8] overflow-x-auto px-60px">
+        <Arrow class="btn prev absolute left-0 top-12px cursor-pointer" @click="activeGroup = (activeGroup === 1 ? 0 : 1)" /><Arrow class="btn next absolute right-0 top-12px cursor-pointer" @click="activeGroup = (activeGroup === 1 ? 0 : 1)" />
+        <template v-for="(iconList, i) in iconData">
+          <template v-if="i === activeGroup" v-for="icon in iconList">
+            <div class="cursor-pointer text-item pb-12px flex flex-col items-center w-150px" :class="[icon.index === activeIndex ? 'border-[#396FFA] border-b-3px' : '']" @click="changeIndex(icon.index)">
+              <div>
+                <img v-show="icon.index === activeIndex" :src="icon.iconActiveUrl" :alt="icon.alt" class="w-36px h-36px mb-8px" >
+                <img v-show="icon.index !== activeIndex" :src="icon.iconUrl" :alt="icon.alt" class="w-36px h-36px mb-8px" >
+              </div>
+              <div class="whitespace-nowrap text-sm">{{ icon.title }}</div>
+            </div>
+          </template>
+        </template>
+      </div>
+      <div v-show="i === activeIndex" v-for="(data, i) in featureData" :key="i" class="feature-item-container">
+        <div class="flex justify-between flex-row-reverse py-80px">
+          <div class="flex-1 flex flex-col justify-center max-w-480px">
+            <div class="relative text-32px leading-48px text-[#232748] font-600">{{ data.title }}</div>
+            <p class="my-12px text-16px leading-24px text-[#52555F]">{{ data.decs }}</p>
+            <span :href="data.url" class="move-arrow inline-flex items-center text-16px leading-24px text-[#396FFA] font-500 cursor-pointer" @click="openModal">申请试用<ArrowRightActive class="ml-8px move" /></span>
+          </div>
+          <div class="img-container relative flex items-center">
+            <img :src="data.bannerUrl" :alt="data.alt" width="580">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ArrowRightActive from '~/assets/images/tools/arrowRightActive.svg?inline'
+import Arrow from '~/assets/images/tools/arrow.svg?inline'
+export default {
+  components: {
+    ArrowRightActive,
+    Arrow
+  },
+  data () {
+    return {
+      activeGroup: 0,
+      index: 0,
+      activeIndex: 0,
+      iconData: [
+        [
+          {
+            title: 'PDF阅读SDK',
+            iconUrl: require('~/assets/images/tools/viewer.svg'),
+            iconActiveUrl: require('~/assets/images/tools/viewerActive.svg'),
+            index: 0
+          },
+          {
+            title: 'PDF注释SDK',
+            iconUrl: require('~/assets/images/tools/annotation.svg'),
+            iconActiveUrl: require('~/assets/images/tools/annotationActive.svg'),
+            index: 1
+          },
+          {
+            title: 'PDF签名SDK',
+            iconUrl: require('~/assets/images/tools/signatures.svg'),
+            iconActiveUrl: require('~/assets/images/tools/signaturesActive.svg'),
+            index: 2
+          },
+          {
+            title: 'PDF内容编辑SDK',
+            iconUrl: require('~/assets/images/tools/contEdit.svg'),
+            iconActiveUrl: require('~/assets/images/tools/contEditActive.svg'),
+            index: 3
+          },
+          {
+            title: 'PDF表单SDK',
+            iconUrl: require('~/assets/images/tools/formFill.svg'),
+            iconActiveUrl: require('~/assets/images/tools/formFillActive.svg'),
+            index: 4
+          },
+          {
+            title: 'PDF编辑SDK：页面管理',
+            iconUrl: require('~/assets/images/tools/docEdit.svg'),
+            iconActiveUrl: require('~/assets/images/tools/docEditActive.svg'),
+            index: 5
+          }
+        ],
+        [
+          {
+            title: 'PDF加密SDK',
+            iconUrl: require('~/assets/images/tools/encrypt.svg'),
+            iconActiveUrl: require('~/assets/images/tools/encryptActive.svg'),
+            index: 6
+          },
+          {
+            title: 'PDF文件对比SDK',
+            iconUrl: require('~/assets/images/tools/compare.svg'),
+            iconActiveUrl: require('~/assets/images/tools/compareActive.svg'),
+            index: 7
+          },
+          {
+            title: 'PDF转换SDK',
+            iconUrl: require('~/assets/images/tools/conversion.svg'),
+            iconActiveUrl: require('~/assets/images/tools/conversionActive.svg'),
+            index: 8
+          },
+          {
+            title: 'OCR文字识别SDK',
+            iconUrl: require('~/assets/images/tools/ocr.svg'),
+            iconActiveUrl: require('~/assets/images/tools/ocrActive.svg'),
+            index: 9
+          },
+          {
+            title: '标记密文SDK',
+            iconUrl: require('~/assets/images/tools/notes.svg'),
+            iconActiveUrl: require('~/assets/images/tools/notesActive.svg'),
+            index: 10
+          },
+          {
+            title: '多文件压缩SDK',
+            iconUrl: require('~/assets/images/tools/compress.svg'),
+            iconActiveUrl: require('~/assets/images/tools/compressActive.svg'),
+            index: 11
+          },
+        ]
+      ],
+      featureData: [
+        {
+          title: 'PDF阅读SDK',
+          alt: 'Viewer',
+          decs: '专业的PDF SDK提供了强大的PDF查看功能，为您的应用程序带来流畅，舒适的阅读体验。提供放大镜，多种翻页模式，旋转等适配不同开发平台的阅读习惯。通过文本搜索，书签，大纲等方式，快速定位PDF内容。提供夜间模式，自定义主题等来适应不同阅读环境。',
+          bannerUrl: '/images/tools/viewer.png',
+          index: 0
+        },
+        {
+          title: 'PDF注释SDK',
+          alt: 'Annotations',
+          decs: '丰富的PDF注释类型，使您的应用程序支持添加，设置，导入，导出，扁平化，注解，回复，管理，显示/隐藏几十种注释，包括文字、图章、亮高、下划线、删除线、波浪线、形状（矩形、圆形等），箭头、线条、自由画笔，链接，语音等。',
+          bannerUrl: '/images/tools/annotation.png',
+          index: 1
+        },
+        {
+          title: 'PDF签名SDK',
+          alt: 'Signatures',
+          decs: '提供电子签名和数字签名，支持多种签名类型签署文档如图片签名，基于字体的签名，触控笔或手写笔签名，以及包含签名人身份信息的数字签名，满足您应用程序所有的签名需求，轻松签署和验证PDF文档，保证文档的完整性和真实性。',
+          bannerUrl: '/images/tools/signatures.png',
+          index: 2
+        },
+        {
+          title: 'PDF内容编辑SDK',
+          alt: 'Content Editor',
+          decs: '像编辑Word文档一样，灵活地编辑PDF文字和图片。集成PDF SDK，使在您的app中添加，删除，替换或者移动PDF文档中的文字和图片成为可能，并支持查看和设置属性，如字体，颜色，大小等。',
+          bannerUrl: '/images/tools/contEditor.png',
+          index: 3
+        },
+        {
+          title: 'PDF表单SDK',
+          alt: 'Form Filling',
+          decs: '我们的PDF SDK提供了完善的PDF表格功能，让你的应用程序支持轻松创建和填写PDF表格。提供多种表单域工具，如文字框，下拉框，列表框，单选框、复选框、按钮等，使您app的用户轻松设计和布局你的表单。',
+          bannerUrl: '/images/tools/formFill.png',
+          index: 4
+        },
+        {
+          title: 'PDF编辑SDK：页面管理',
+          alt: 'Document Editor',
+          decs: '提供便捷的PDF页面管理功能，支持轻松操作和编辑PDF页面，如移动、添加、删除、PDF合并、PDF拆分、替换、旋转PDF页面。',
+          bannerUrl: '/images/tools/docEditor.png',
+          index: 5
+        },
+        {
+          title: 'PDF加密SDK',
+          alt: 'PDF Encrypt',
+          decs: '为您的app/系统，提供密码保护功能，轻松为文档设置不同加密级别的加密方式，如RC4和高级加密算法AES-128 & AES-256。设置为不同的角色设置不同的文档权限，如阅读，打印，复制，分享。',
+          bannerUrl: '/images/tools/encrypt.png',
+          index: 6
+        },
+        {
+          title: 'PDF文件对比SDK',
+          alt: 'PDF Compare',
+          decs: '集成PDF文档对比功能，逐字、段落、页进行精准对比并分类列出不同版本的文档中新增、替换、删除的文本。提供覆盖对比方式有效对比图纸类文档。',
+          bannerUrl: '/images/tools/compare.png',
+          index: 7
+        },
+        {
+          title: 'PDF转换SDK',
+          alt: 'PDF Conversion',
+          decs: '基于AI的PDF转换库，拥有更高的转换精准度，快速高效地将PDF文件转换成其他格式，或者将其他格式的文件转换成PDF文档，支持的格式包括Word, Excel, PPT, PNG, JPG, RTF, CSV, HTML等。',
+          bannerUrl: '/images/tools/conversion.png',
+          index: 8
+        },
+        {
+          title: 'OCR文字识别SDK',
+          alt: 'PDF OCR',
+          decs: '提供强大的OCR图片文字识别SDK开发包，让你可以在你的应用程序中轻松识别图片或者扫描文件中的文字。支持文件版面分析和图片预处理功能，提高低质量图片的识别效果。支持识别常用的中文，英文，西班牙语，法语等几十种语言。',
+          bannerUrl: '/images/tools/ocr.png',
+          index: 9
+        },
+        {
+          title: '标记密文SDK',
+          alt: 'PDF Notes',
+          decs: '集成标记密文功能，在应用程序中轻松覆盖并移除PDF文档中的敏感信息或者不可外泄的文字或图片信息。支持设置标记的样式、颜色、文字说明等，并且保证擦除后的文档无法恢复。',
+          bannerUrl: '/images/tools/notes.png',
+          index: 10
+        },
+        {
+          title: '多文件压缩SDK',
+          alt: 'PDF Compress',
+          decs: '优秀的文档压缩SDK/API，让你可以在你的应用程序中轻松压缩或优化一个或批量的PDF文件，删除冗余数据，降低文件存储和传输压力。支持不同级别的文档压缩。',
+          bannerUrl: '/images/tools/compress.png',
+          index: 11
+        }
+      ]
+    }
+  },
+  methods: {
+    changeIndex (i) {
+      this.activeIndex = i
+    },
+    openModal () {
+      this.$emit('open')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .main-content {
+    font-family: 'Poppins';
+    .main-features {
+      position: sticky;
+      top: 0rem;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      padding-top: 70px;
+      overflow: hidden;
+      .video-container {
+        position: relative;
+        display: flex;
+        flex-grow: 1;
+      }
+      .text-container {
+        scrollbar-width: none; /* firefox */
+        -ms-overflow-style: none; /* IE 10+ */
+        & :nth-child(1) {
+            .mx-8px {
+              padding-left: 12px;
+              padding-right: 12px;
+            }
+          }
+        .text-item {
+          .line-container {
+            height: 2px;
+            overflow: hidden;
+            opacity: 1;
+          }
+        }
+      }
+      .text-container::-webkit-scrollbar {
+          display: none; /* Chrome Safari */
+      }
+    }
+  }
+  ::-webkit-scrollbar {
+    scrollbar-width: none; /* firefox */
+    -ms-overflow-style: none;
+    display: none; /* Chrome Safari */
+  }
+  .line-container {
+    position: relative;
+    height: 2px;
+    overflow: hidden;
+    opacity: 1;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 1px;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background-color: #E1E3E8;
+    }
+  }
+  .next {
+    transform: rotate(180deg);
+  }
+  .line {
+    position: relative;
+    width: 100%;
+    height: 2px;
+    background-color: #396FFA;
+    transform-origin: left center;
+  }
+  .main-content .main-features .text-container .text-item .title {
+    font-size: 18px;
+  }
+  .main-content .main-features .video-container {
+    margin-bottom: 3.125rem;
+  }
+  @media screen and (min-width: 1280px) {
+    .main-content .main-features .text-container .text-item .title {
+      font-size: 22px;
+    }
+  }
+</style>

components/sdk/Right.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5074 0.696721L17.2803 5.46969C17.5732 5.76259 17.5732 6.23746 17.2803 6.53035L12.5074 11.3033C12.2145 11.5962 11.7396 11.5962 11.4467 11.3033C11.1538 11.0104 11.1538 10.5356 11.4467 10.2427L14.9393 6.75002H0.75V5.25002H14.9393L11.4467 1.75738C11.1538 1.46449 11.1538 0.989614 11.4467 0.696721C11.7396 0.403827 12.2145 0.403827 12.5074 0.696721Z" fill="#396FFA"/>
-</svg>

pages/sdk.vue

@@ -2,7 +2,7 @@
   <div class="sdk_nav">
     <!-- 头部 -->
     <div class="text-center bg-[#232748]">
-      <div class="font-600 text-50px leading-44px pt-114px text-white">为开发者设计的综合SDK & API</div>
+      <div class="font-600 text-50px leading-44px pt-114px text-white">为开发者设计的SDK & API解决方案</div>
       <div class="text-30px leading-38px max-w-911px text-[#DBDBDB] mx-auto pt-40px">
         提供给企业的专业PDF解决方案, 支持本地、在线、私有化部署PDF编辑、注释、评论、格式转换、签名、文档对比、标记密文、OCR、测量等功能到所有开发平台中，并且支持跨平台开发。
       </div>
@@ -20,7 +20,7 @@
     </div>
     <Platform />
     <h3 class="text-[#232748] font-600 text-center my-0 mx-auto lg:(mt-80px text-44px leading-56px max-w-916px) <lg:(mt-52px mb-24px text-20px leading-28px)">ComPDFKit Capabilities Build Document Experience in Your Applications</h3>
-    <Feature class="container-sdk"></Feature>
+    <Feature class="container-sdk" @open="handlerApplyUse('trial')"></Feature>
     <!-- 平台 -->
     <div class="bg-[#F7F9FD] pb-80px pt-50px">
       <div  class="container-sdk flex justify-between flex-wrap">
@@ -32,7 +32,7 @@
           <div class="sdk_platform mt-16px text-14px leading-20px text-[#232748]">
             {{ item.des }}
           </div>
-          <div class="platform_apply flex flex-row-reverse items-center mt-16px text-16px leading-20px text-[#396FFA]">
+          <div class="platform_apply flex flex-row-reverse items-center mt-16px text-16px leading-20px text-[#396FFA]" @click="handlerApplyUse('trial')">
             <Right class="ml-8px" />
             申请试用
           </div>
@@ -48,7 +48,7 @@
           <TextParagraph class="max-w-500px text-16px leading-28px text-[#52555F] mt-24px mb-32px">
             缩短项目开发时间、快速投入市场，简单代码即可集成我们的PDF库，为您的Windows、Web、Android、iOS、Mac Catalyst、Server、Flutter、Electron等app实现想要的PDF功能。
           </TextParagraph>
-          <div class="platform_apply move-arrow flex items-center text-16px leading-24px text-[#396FFA] font-500 ">申请试用<Right class="ml-8px" /></div>
+          <div class="platform_apply move-arrow flex items-center text-16px leading-24px text-[#396FFA] font-500" @click="handlerApplyUse('trial')">申请试用<Right class="ml-8px" /></div>
         </div>
       </div>
     </div>
@@ -70,9 +70,9 @@
 
 <script>
 import sdkForm from '~/components/SdkForm.vue'
-import Feature from '~/components/sdk/Featqure.vue'
+import Feature from '~/components/sdk/Feature.vue'
 import Platform from '~/components/sdk/Platform.vue'
-import Right from '~/components/sdk/Right.svg?inline'
+import Right from '~/assets/images/tools/right.svg?inline'
 export default {
   components: { 
     sdkForm,
@@ -344,4 +344,4 @@ export default {
     }
   }
 }
-</style>
+</style>