add ar100 mainboard img and operation instruction page

xiuosiot-frontend/src/views/product/RV400-AR100/index.vue

@@ -13,6 +13,68 @@
             </p>
           </el-col>
         </el-row>
+        <h1>开发板详情介绍图</h1>
+        <img src="@/assets/images/ar100_mainboard.png" style="margin-bottom:50px" width="60%">
+        <h1>产品使用说明</h1>
+        <el-row>
+          <el-col :span="18" :offset="3">
+            <div class="instruction">
+              <div class="left">
+                <img src="@/assets/images/instruction_logo.png" width="45%">
+                <p>矽璓&nbsp;智能终端</p>
+                <P>M168-NPU4T-4G-SM100</P>
+                <img src="@/assets/images/instruction_title.png" width="35%" style="vertical-align:middle">
+                <img class="button" src="@/assets/images/instruction_button.png" width="30%" @click="instructionDetail">
+              </div>
+              <div class="right">
+                <swiper ref="mySwiper" :options="swiperOption">
+                  <swiper-slide>
+                    <div>
+                      <p class="title">1. 系统交叉编译</p>
+                      <p>
+                        <span>1.1、测试环境</span>
+                        <span>1.2、交叉编译工具链</span>
+                        <span>1.3、其他安装包</span>
+                      </p>
+                      <p>
+                        <span>1.4、打patch</span>
+                        <span>1.5、编译Uboot</span>
+                        <span>1.6、编译Kernel</span>
+                      </p>
+                      <p>
+                        <span>1.7、编译Recovery</span>
+                        <span>1.8、编译Debian</span>
+                        <span>1.9、生成镜像</span>
+                      </p>
+                      <p class="title">2. 烧录镜像及调试</p>
+                      <p>
+                        <span>2.1、安装驱动DriverAssitant_v5.11.zip</span>
+                        <span>2.2、打开 RKDevTool.exe</span>
+                      </p>
+                      <p class="title">3. 5G网卡调试</p>
+                    </div>
+                  </swiper-slide>
+                  <swiper-slide>
+                    <div>
+                      <p class="title">4. wifi模块调试</p>
+                      <p>
+                        <span>4.1、驱动编译</span>
+                        <span>4.2、驱动运行</span>
+                        <span>4.3、WIFI网络连接</span>
+                      </p>
+                      <p class="title">5. USB调试</p>
+                      <p class="title">6. SD卡调试</p>
+                      <p class="title">7. 显示图片</p>
+                      <p class="title">8. emmc扩容</p>
+                      <p class="title">9. AIM16T从模式烧录</p>
+                      <p class="title">10. RISCV-K210烧录、调试</p>
+                    </div>
+                  </swiper-slide>
+                </swiper>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
       </div>
       <div class="arch">
         <h1>技术架构</h1>
@@ -133,14 +195,27 @@
 <script>
 import Cover from '@/views/components/Cover'
 import Footer from '@/views/components/Footer'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
 export default {
-  components: { Cover, Footer },
+  components: { Cover, Footer, swiper, swiperSlide },
   data() {
-    return {}
+    return {
+      swiperOption: {
+        loop: true,
+        autoplay: {
+          delay: 3000,
+          disableOnInteraction: false
+        }
+      }
+    }
   },
   mounted() {},
-  methods: {}
+  methods: {
+    instructionDetail() {
+
+    }
+  }
 }
 </script>
 
@@ -158,6 +233,55 @@ export default {
       line-height: 2.5;
       letter-spacing: 2px;
     }
+    .instruction{
+        margin-top: 30px;
+        width: 100%;
+        background: linear-gradient(181deg, #424D83, #7DADF3);
+        padding: 50px 80px;
+        border-radius: 96px;
+        // height: 300px;
+        text-align: left;
+        display: flex;
+        .left{
+          width: 50%;
+          p{
+            font-family: Poppins;
+            font-weight: bold;
+            font-size: 2.5vw;
+            // line-height: 1.2;
+            color: #fff;
+            margin: 0.5em 0;
+          }
+          .button{
+            float: right;
+            cursor: pointer;
+          }
+        }
+        .right{
+          width: 50%;
+          color: #fff;
+          font-family: Minion Pro;
+          padding-left: 5%;
+          line-height: 1.5;
+          .title{
+            font-size: 1.3vw;
+            font-weight: bold;
+            // line-height: 52px;
+            margin: 0;
+          }
+          p{
+            span{
+              display: inline-block;
+              font-size: 0.95vw;
+              white-space: nowrap;
+              margin-right: 20px;
+              &:last-child{
+                margin-right: 0;
+              }
+            }
+          }
+        }
+      }
   }
   .arch {
     min-height: 100vh;