optimize home table display

This commit is contained in:
Neucrack
2023-08-15 17:58:09 +08:00
parent e1f8cda709
commit de0ace441c
5 changed files with 30 additions and 13 deletions

View File

@@ -1,8 +1,8 @@
<!-- 修改后保存一下 include 这个文件的 html 模板就会渲染 -->
<div class="flex flex-col justify-center items-center">
<div class="w-full flex flex-col justify-center items-center">
<h2 class="text-2xl font-bold my-8 block_simple">{{_('Linux SBC 系列')}}</h2>
<div class="flex flex-col justify-center items-center">
<div class="w-full flex flex-col justify-center items-center">
<div class="cards">
<!-- cards -->
<div class="card" v-for="item in data_lichee.cards">
@@ -20,7 +20,7 @@
</div>
<!-- cards end -->
</div>
<div class="flex flex-col justify-center items-center mt-10 mb-5">
<div class="w-full flex flex-col justify-center items-center mt-10 mb-5">
<!-- a table to compare upper products' parameters -->
<h3 class="text-2xl font-bold my-8">{{_('Lichee SBC 系列产品参数对比')}}</h3>
<table>

View File

@@ -1,8 +1,8 @@
<!-- 修改后保存一下 include 这个文件的 html 模板就会渲染 -->
<div class="flex flex-col justify-center items-center">
<div class="w-full flex flex-col justify-center items-center">
<h2 class="text-2xl font-bold my-8 block_simple">{{_('Maix AI 视觉系列')}}</h2>
<div class="flex flex-col justify-center">
<div class="w-full flex flex-col justify-center">
<div class="cards">
<!-- cards -->
<div class="card" v-for="item in data_maix.cards">
@@ -20,7 +20,7 @@
</div>
<!-- cards end -->
</div>
<div class="flex flex-col justify-center items-center mt-10 mb-5">
<div class="w-full flex flex-col justify-center items-center mt-10 mb-5">
<!-- a table to compare upper products' parameters -->
<h3 class="text-2xl font-bold my-8">{{_('Maix 系列产品参数对比')}}</h3>
<table>

View File

@@ -1,8 +1,8 @@
<!-- 修改后保存一下 include 这个文件的 html 模板比如home.html就会渲染 -->
<div class="flex flex-col justify-center items-center">
<div class="w-full flex flex-col justify-center items-center">
<h2 class="text-2xl font-bold my-8 block_simple">{{_('MaixSense 传感器模组系列')}}</h2>
<div class="flex flex-col justify-center">
<div class="w-full flex flex-col justify-center">
<div class="cards">
<!-- cards -->
<div class="card" v-for="item in data_maixsense.cards">
@@ -22,7 +22,7 @@
</div>
<!-- cards end -->
</div>
<div class="flex flex-col justify-center items-center mt-10 mb-5">
<div class="w-full flex flex-col justify-center items-center mt-10 mb-5">
<!-- a table to compare upper products' parameters -->
</div>
</div>

View File

@@ -10,6 +10,10 @@
overflow: hidden;
padding: 1em;
}
.dark .block_simple {
background: #2d2d2d;
border: 1px solid #3f3f3f;
}
#page_content {
display: flex;
flex-direction: column;
@@ -100,7 +104,6 @@
border-radius: 0.6em;
text-wrap: nowrap;
width: fit-content;
margin-left: 5em;
margin-top: 12em;
padding: 0;
}
@@ -109,6 +112,7 @@
}
#content table {
width: 90%;
word-wrap: normal;
}
#menuItems {
position: sticky;
@@ -120,6 +124,10 @@
overflow: hidden;
justify-content: center;
}
.dark #menuItems {
background: #2d2d2d;
border: 1px solid #3f3f3f;
}
#navbar h2 {
font-size: 1.8em;
}
@@ -130,6 +138,9 @@
font-size: 1.2em;
word-wrap: nowrap;
}
.dark .menuItem {
color: #bdbdbd;
}
.menuItem:hover,
.menuItem1:hover,
.menuItem1.active {
@@ -137,6 +148,12 @@
color: #162127;
font-weight: 600;
}
.dark .menuItem:hover,
.dark .menuItem1:hover,
.dark .menuItem1.active {
background-color: #202020;
color: #fafafa;
}
.cards {
display: flex;
flex-wrap: wrap;

View File

@@ -1,8 +1,8 @@
<!-- 修改后保存一下 include 这个文件的 html 模板比如home.html就会渲染 -->
<div class="flex flex-col justify-center items-center">
<div class="w-full flex flex-col justify-center items-center">
<h2 class="text-2xl font-bold my-8 block_simple">{{_('Tang FPGA 系列')}}</h2>
<div class="flex flex-col justify-center">
<div class="w-full flex flex-col justify-center">
<div class="cards">
<!-- cards -->
<div class="card" v-for="item in data_tang.cards">
@@ -22,7 +22,7 @@
</div>
<!-- cards end -->
</div>
<div class="flex flex-col justify-center items-center mt-10 mb-5">
<div class="w-full flex flex-col justify-center items-center mt-10 mb-5">
<!-- a table to compare upper products' parameters -->
</div>
</div>