Skip to content

Commit

Permalink
feat:新增不同版本功能对比
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tinie13
Tinie13 committed Jun 24, 2024
1 parent ea73fb7 commit 57dc53c
Show file tree
Hide file tree
Showing 6 changed files with 606 additions and 15 deletions.
151 changes: 151 additions & 0 deletions src/components/cloud/FunctionalCompare.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
---
import { useTranslations, isChinese } from "@i18n/util";
import Tableplugin from "./Tableplugin.astro";
import Button from "@components/common/Button.astro";
import {
Usability,
Enable,
Security,
Performance,
Observability,
} from "../../consts";
const t = useTranslations(Astro);
const ifzh = isChinese(Astro);
---

<functional-compare
class="functional-compare-wrapper top-[100px] flex flex-col justify-center items-center mt-10"
>
<div class="collapse bg-base-200 collapse-arrow bg-gray-02 w-[85.125rem]">
<input type="checkbox" checked />
<div class="collapse-title text-2xl font-normal">不同版本功能对比</div>
<div class="collapse-content">
<Tableplugin dataSource={Usability} title="易用性" isHead={true} />
<Tableplugin dataSource={Enable} title="可用性" />
<Tableplugin dataSource={Security} title="安全性" />
<Tableplugin dataSource={Performance} title="性能" />
<Tableplugin dataSource={Observability} title="可观测性" />
</div>
</div>
<!-- 吸底 -->
<table
class="table table-fixed sticky-table-bottom bg-gray-02 w-[85.125rem] mt-6 hidden"
>
<tr>
<th class="col1 border-0"></th>
<th class="col2 border-0"></th>
<th class="col3 overflow-hidden">
<p class="mb-6">免费版</p>
<Button
visibility={false}
href=" "
size="large"
target="_blank"
class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
>
免费试用
</Button>
</th>
<th class="col4">
<p class="mb-6">开发版</p>
<Button
visibility={false}
href=""
size="large"
target="_blank"
class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
>
咨询定价
</Button>
</th>
<th class="col5">
<p class="mb-6">专业版</p>
<Button
visibility={false}
href=""
size="large"
target="_blank"
class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
>
咨询定价
</Button>
</th>
<th class="col6">
<p class="mb-6">Serverless 版</p>
<Button
visibility={false}
href=""
size="large"
target="_blank"
class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
>
咨询定价
</Button>
</th>
</tr>
</table>
</functional-compare>

<style is:global>
th {
border-left: 1px dotted theme("colors.gray.03");
border-bottom: hidden;
text-align: center;
font-size: 24px;
font-weight: normal;
line-height: 32px;
color: theme("colors.gray.14");
}
.col1 {
width: 70px;
border-right: 0px;
}
.col2 {
width: 200px;
border-left: 0px;
}
.col3,
.col4,
.col5,
.col6 {
width: 200px;
font-size: 12px;
font-weight: 500;
line-height: 18px;
}
.sticky-table-bottom {
position: sticky;
bottom: 0;
}
@media (max-width: 50rem) {
}

@media (min-width: 50rem) and (max-width: 86rem) {
}
</style>

<script>
class FunctionalCompare extends HTMLElement {
constructor() {
super();
this.init();
}

init() {
const collapse = this.querySelector('.collapse');
const stickyTable = this.querySelector('.sticky-table-bottom');
const checkPosition = () => {
const rect = collapse.getBoundingClientRect();
if (rect.top <= 0) {
stickyTable.classList.remove('hidden');
} else {
stickyTable.classList.add('hidden');
}
};

window.addEventListener('scroll', checkPosition);
checkPosition();
}
}
customElements.define('functional-compare', FunctionalCompare);
</script>
150 changes: 150 additions & 0 deletions src/components/cloud/Tableplugin.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
---
import Correct from "../icon/Correct.astro";
import Button from "@components/common/Button.astro";
const { dataSource, title, isHead = false } = Astro.props;
const totalRows = dataSource.length;
---

<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>
<Button
visibility={false}
href=" "
size="large"
target="_blank"
class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
>
免费试用
</Button>
</th>
<th class="col4">
<p class="mb-6"> 开发版</p>
<Button
visibility={false}
href=""
size="large"
target="_blank"
class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
>
咨询定价
</Button>
</th>
<th class="col5">
<p class="mb-6"> 专业版</p>
<Button
visibility={false}
href=""
size="large"
target="_blank"
class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
>
咨询定价
</Button>
</th>
<th class="col6">
<p class="mb-6"> Serverless 版</p>
<Button
visibility={false}
href=""
size="large"
target="_blank"
class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
>
咨询定价
</Button>
</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">
{typeof item.free === "boolean" ? <Correct /> : item.free}
</td>
<td class="col4 text-center">
{typeof item.develop === "boolean" ? <Correct /> : item.develop}
</td>
<td class="col5 text-center">
{typeof item.speciality === "boolean" ? (
<Correct />
) : (
item.speciality
)}
</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>

<style>
table,
td {
border-collapse: collapse;
}
td {
height: 60px;
border-left: 1px dotted theme("colors.gray.03");
border-right: 1px dotted theme("colors.gray.03");
border-bottom: 1px dotted theme("colors.gray.03");
}
th {
border-left: 1px dotted theme("colors.gray.03");
border-bottom: hidden;
text-align: center;
font-size: 24px;
font-weight: normal;
line-height: 32px;
color: theme("colors.gray.14");
}
.col1 {
width: 70px;
border-right: 0px;
}
.col2 {
width: 200px;
border-left: 0px;
}
.col3,
.col4,
.col5,
.col6 {
width: 200px;
font-size: 12px;
font-weight: 500;
line-height: 18px;
}
</style>
20 changes: 20 additions & 0 deletions src/components/icon/Correct.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
---

<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>
Loading

0 comments on commit 57dc53c

Please sign in to comment.