change product home page html

docs/assets/css/main.css

@@ -16,7 +16,6 @@
 }
 
 
-
 body[data-page="zh_CN/uiflow/uiflow_home_page.md"] article.markdown-section {
     max-width: 100%;
     padding: 0;
@@ -31,17 +30,14 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
     width:30%; 
 }
 
+.video_size {
+    width: 30%;
+}
+
 .uiflow_banner{
     position: relative;
 }
 
-.uiflow_title{
-    position: absolute;
-    top: 10px;
-    left: 10px;
-}
-
-
 .row a{
     color:white;
     text-decoration:none;
@@ -52,23 +48,10 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
     text-decoration:none;
 }
 
-
 .uiflow_p{
     height: 100px;
 }
 
-/* body[data-page="index.md"] article.markdown-section .item {
-    width: 150px;
-    margin-right: 10px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-    transition: box-shadow 0.3s;
-    text-decoration: none;
-} */
-
 .item {
     width: 150px;
     margin-right: 10px;
@@ -81,9 +64,7 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
     text-decoration: none;
 }
 
-.video_size {
-    width: 30%;
-}
+
 
 
 .related_links {
@@ -125,8 +106,6 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
     
 }
 
-
-
 @media screen and (max-width: 768px) {
     .related_links {
         display: none;
@@ -134,12 +113,6 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
 }
 
 
-/* body[data-page="index.md"] article.markdown-section p.item-title {
-    text-align: center;
-    margin-top: 10px;
-    margin-bottom: 10px;
-} */
-
 .item-title {
     text-align: center;
     margin-top: 10px;
@@ -147,7 +120,6 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
 }
 
 
-
 .item a {
     color: black;
     text-decoration: none;
@@ -187,7 +159,7 @@ body[data-page="en/uiflow/uiflow_home_page.md"] article.markdown-section {
 }
 
 
-figure.thumbnails img {
+/* figure.thumbnails img {
     margin: 0.75em 0;
     border-radius: 3px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -219,7 +191,7 @@ figure.thumbnails img {
             margin: 0 0 0 1.5em;
         }
     }
-}
+} */
 
 
 .mask {
@@ -238,7 +210,7 @@ figure.thumbnails img {
 
 .item a:hover .mask {
     opacity: 1;   
-      
+    
 }
 
 .mask-btn1 {
@@ -253,6 +225,16 @@ figure.thumbnails img {
     left:30px;
 }
 
+.cases a:hover .mask {
+    opacity: 1; 
+    width: 150px;
+    height: 150px;
+    background:white;
+    color: gray;
+}
+
+
+
 
 .product_list div.btn-group-vertical {
     display: none;
@@ -274,19 +256,6 @@ main>.content {
     margin: 0px;
 }
 
-/* .banner {
-    width: 300px;
-    margin-right: 10px;
-    margin-left: 20px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    display: inline-block;
-    position: relative;
-    box-shadow: 5px 5px 5px #888888;
-    cursor: pointer;
-    transition: all 0.1s;
-} */
-
 div.card-img-overlay {
     background-color: rgba(0, 0, 0, 0.6);
 }
@@ -296,19 +265,6 @@ div.card-img-overlay:hover {
     color: blue !important;
 }
 
-/* .banner div.card-img-overlay h4 {
-    font-size: 3em;
-    color: #fff;
-}
-
-.banner div.card-img-overlay:hover h4 {
-    display: none;
-}
-
-.banner:hover {
-    transform: scale(1.1);
-    z-index: 1;
-} */
 
 
 .banner {
@@ -662,7 +618,6 @@ body[data-page="zh_CN/README.md"] .search {
 /* Table Styles */
 
 .table-wrapper{
-    /* margin: 10px 70px 70px; */
     box-shadow: -7px 0px 20px 0px #888888;
 
 }
@@ -712,14 +667,6 @@ body[data-page="zh_CN/README.md"] .search {
         width: 100%;
         overflow-x: auto;
     }
-    /* .table-wrapper:before{
-        content: "Scroll horizontally >";
-        display: block;
-        text-align: right;
-        font-size: 11px;
-        color: white;
-        padding: 0 0 10px;
-    } */
     .fl-table thead, .fl-table tbody, .fl-table thead th {
         display: block;
     }

docs/en/faq.md

@@ -8,14 +8,7 @@
 - **Q1: What's the difference between those Cores?**
 
 <div class="container">
-  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#Q1">answer</button>
-  <div id="Q1" class="collapse">
-    The main difference between these Cores is the internal hardware configuration and kit matching. From the basic version to the upgraded version, the attitude sensor MPU9250 is added and the RAM and FLASH are increased. For details, please visit <a href="https://github.com/m5stack/M5-Schematic/blob/master/Core/hardware_difference_between_cores_en.md">here</a>
-
-<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_table/core_comparison/core_main_comparison_04_en.png">
-
-<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_table/core_comparison/core_main_comparison_05_en.png">
-  </div>
+  <a class="btn btn-primary" href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_table/Product_compared.pdf" style="color:white;text-decoration:none" target="view_window">answer</a>
 </div>
 
 
@@ -343,6 +336,22 @@ The following operations can restore the device to normal: 1. Short the BAT to G
 </div>
 
 
+- **Q31: What is the difference between LoRa and LoRaWAN modules?**
+
+<div class="container">
+  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#Q31">answer</button>
+  <div id="Q31" class="collapse">
+
+```
+LoRa module: Ra-02 module, serial communication protocol: SPI, support frequency range 410-525Hz.
+
+LoRaWAN module: RHF76-052 module, built-in LoRaWAN protocol stack, serial communication, sending AT command control module, support communication with full-duplex LoRaWAN gateway, support dual-band 433-470MHz and 868-915MHz.
+
+```
+  </div>
+</div>
+
+
 
 ## UNIT Question
 

docs/zh_CN/faq.md

@@ -10,14 +10,7 @@
 - **Q1: 不同的M5主机之间有什么区别？**
 
 <div class="container">
-  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#Q1">查看解答</button>
-  <div id="Q1" class="collapse">
-    这些主控主要区别在内部硬件配置和套件搭配上，从基础版到升级版，分别是增加了姿态传感器 MPU9250和加大了 RAM 和 FLASH，具体区别请访问<a href="https://github.com/m5stack/M5-Schematic/blob/master/Core/hardware_difference_between_cores_zh_CN.md">这里</a>
-
-<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_table/core_comparison/core_main_comparison_04_zh_CN.png">
-
-<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_table/core_comparison/core_main_comparison_05_zh_CN.png">
-  </div>
+  <a class="btn btn-primary" href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_table/Product_compared.pdf" style="color:white;text-decoration:none" target="view_window">查看解答</a>
 </div>
 
 
@@ -40,7 +33,6 @@
   <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#Q3">查看解答</button>
   <div id="Q3" class="collapse">
     可能是堆叠之后，M5-Bus 总线上的引脚 GPIO0 与 M5Core 接触不太好。这种情况下，在下载程序的时候，GPIO0 理应会一直保持低电平的，可是因为接触不好，GPIO0 不能一直保持低电平，所以下载失败。
-
     解决方案：在下载过程中，手动让 GPIO0 连接 GND，保证足够长时间拉低。
   </div>
 </div>
@@ -317,6 +309,21 @@
   </div>
 </div>
 
+- **Q31: LoRa与LoRaWAN模块有什么区别？**
+
+<div class="container">
+  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#Q31">查看解答</button>
+  <div id="Q31" class="collapse">
+
+```
+LoRa模块：采用Ra-02模组，采用串行通信协议: SPI，支持频段范围410-525Hz.
+
+LoRaWAN模块：采用RHF76-052模组，内置LoRaWAN协议栈，使用串口通信，通过发送AT指令控制模组，支持与全双工LoRaWAN网关通信，支持双频段433-470MHz 和868-915MHz.
+
+```
+  </div>
+</div>
+
 
 
 ## UNIT 相关问题