feat：不同版本功能对比增加移动端

src/components/cloud/FunctionalCompare/Correct.jsx

@@ -0,0 +1,24 @@
+
+
+const UpDown = (props) => {
+  return (
+    <svg
+      class="icon"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="2330"
+      width="24"
+      height="24"
+    >
+      <path
+        d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
+        fill="#444444"
+        p-id="2331"
+      >
+      </path>
+    </svg>
+  );
+};
+
+export default UpDown;

src/components/cloud/FunctionalCompare/MobileTable.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "preact/hooks";
+import Correct from "./Correct";
+
+const MobileTable = (props) =>{
+const {dataSource, title ,version} = props;
+
+
+	return (
+    <div class="overflow-x-auto rounded-2xl mb-6">
+    <table class="table bg-gray-01 rounded-2xl table-fixed">
+      {
+        dataSource.map((item, index) => {
+          return (
+            <>
+              {index === 0 && <tr>
+                <td class="text-xl align-top text-left border-dotted border-b-2  border-gray-03" colspan={2}>
+                  {title}
+                </td>
+              </tr>}
+              <tr>
+                <td class="text-base font-normal color-gray-14">
+                  {item.name.title && <p>{item.name.title}</p>}
+                  {item.name.des && <p class="text-xs">{item.name.des}</p>}
+                </td>
+                <td class="text-center">
+                  {item[version]?.checked && <Correct />}
+                  {item[version]?.des && (
+                    <p class="text-xs font-normal color-gray-08">
+                      {item[version]?.des}
+                    </p>
+                  )}
+                </td>
+              </tr>
+            </>
+          );
+        })
+      }
+    </table>
+  </div>  
+	);
+};
+
+export default MobileTable;

src/components/cloud/FunctionalCompare/Tableplugin.jsx

@@ -0,0 +1,105 @@
+
+import { useEffect, useState } from "preact/hooks";
+import Correct from "./Correct";
+import "./style.tableplugin.css";
+
+
+
+const Tableplugin = (props) => {
+  const { dataSource, title, isHead = false } = props;
+  const totalRows = dataSource.length;
+
+  return (
+    <div class="overflow-x-auto rounded-2xl mb-6">
+      {
+        isHead && (
+          <table class="table table-fixed sticky-table-top">
+            <tr>
+              <th class="col1 border-0" />
+              <th class="col2 border-0" />
+              <th class="col3 overflow-hidden">
+                <p class="mb-6 "> 免费版</p>
+                <div class='text-gray-08 text-xs h-16 leading-8'>免费试用</div>
+              </th>
+              <th class="col4">
+                <p class="mb-6"> 开发版</p>
+                <p class='text-gray-08 text-xs'>目录价：118元/月起</p>
+                <p class='text-gray-08 text-xs'>折扣价：47.2元/月起</p>
+                <p class='text-gray-08 text-xs'>折扣详情：月包7折，年包4折，新老同享</p>
+              </th>
+              <th class="col5">
+                <p class="mb-6"> 专业版</p>
+                <p class='text-gray-08 text-xs'>目录价：498元/月起</p>
+                <p class='text-gray-08 text-xs'>折扣价：209.16元/月起</p>
+                <p class='text-gray-08 text-xs'>折扣详情：首购4.2折</p>
+              </th>
+              <th class="col6">
+                <p class="mb-6"> Serverless 版</p>
+                <p class='text-gray-08 text-xs'>目录价：0.16元/10个连接起</p>
+                <p class='text-gray-08 text-xs'>折扣价：0.15元/10个连接起</p>
+                <p class='text-gray-08 text-xs'>折扣详情：节省计划9.5折，新老同享</p>
+              </th>
+            </tr>
+          </table>
+        )
+      }
+      <table class="table bg-gray-01 rounded-2xl table-fixed">
+        {
+          dataSource.map((item, index) => {
+            return (
+              <tr>
+                {index === 0 && (
+                  <td
+                    class="col1 text-xs align-top text-center "
+                    rowspan={totalRows}
+                  >
+                    {title}
+                  </td>
+                )}
+                <td class="col2 text-base font-normal color-gray-14">
+                  {item.name.title && <p>{item.name.title}</p>}
+                  {item.name.des && <p class="text-xs">{item.name.des}</p>}
+                </td>
+                <td class="col3 text-center">
+                  {item.free.checked && <Correct />}
+                  {item.free.des && (
+                    <p class="text-xs font-normal color-gray-08">
+                      {item.free.des}
+                    </p>
+                  )}
+                </td>
+                <td class="col4 text-center">
+                  {item.develop.checked && <Correct />}
+                  {item.develop.des && (
+                    <p class="text-xs font-normal color-gray-08">
+                      {item.develop.des}
+                    </p>
+                  )}
+
+                </td>
+                <td class="col5 text-center">
+                  {item.speciality.checked && <Correct />}
+                  {item.speciality.des && (
+                    <p class="text-xs font-normal color-gray-08">
+                      {item.speciality.des}
+                    </p>
+                  )}
+                </td>
+                <td class="col6 text-center">
+                  {item.serverless.checked && <Correct />}
+                  {item.serverless.des && (
+                    <p class="text-xs font-normal color-gray-08">
+                      {item.serverless.des}
+                    </p>
+                  )}
+                </td>
+              </tr>
+            );
+          })
+        }
+      </table>
+    </div>
+  );
+};
+
+export default Tableplugin;

src/components/cloud/FunctionalCompare/UpDown.jsx

@@ -0,0 +1,24 @@
+
+
+const UpDown = (props) => {
+  return (
+    <svg
+      width="10"
+      height="7"
+      viewBox="0 0 10 7"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M8.05264 2L5.05264 5.00649L2.05264 2"
+        stroke="#a3a6b3"
+        stroke-width="1.25"
+        stroke-linecap="square"
+      >
+      </path>
+    </svg>
+  );
+};
+
+export default UpDown;