209 lines
7.1 KiB
Vue
209 lines
7.1 KiB
Vue
<template>
|
||
<div>
|
||
<Cover :current="1" :show-website="false" />
|
||
<div class="body-container">
|
||
<div class="info mt100">
|
||
<h1>产品介绍</h1>
|
||
<el-row>
|
||
<el-col :span="18" :offset="3">
|
||
<img src="@/assets/images/edu-arm.png" width="60%"></img>
|
||
<p class="intro">ARM教育开发板是面向教育行业设计的一款ARM开发板。
|
||
其搭载的主控制芯片为基于ARM Cortex-M4架构的HC32F4A0SITB国产芯片。
|
||
配备了内置512KB RAM、2MB Flash和外置16MB Flash。板内集成有LED、Key、Lora等外部设备。
|
||
同时具有丰富的可拓展性，支持GPIO、SPI、I2C、UART、CAN、RS485、ADC、DAC、SDIO、USB等多种片上外设和通信接口，
|
||
具有良好的可开发性。同时ARM教育开发板尺寸小巧，便于携带和保存，板上集成有ISP下载电路和Type-C接口，
|
||
可通过Type-C数据线对开发板进行电源供电、程序烧录和调试开发。
|
||
</p>
|
||
</el-col>
|
||
</el-row>
|
||
<h1>开发板详情介绍图</h1>
|
||
<img src="@/assets/images/edu-arm_mainboard.png" width="60%">
|
||
</div>
|
||
<div class="arch">
|
||
<h1>技术架构</h1>
|
||
<el-row>
|
||
<el-col :span="5" :offset="2">
|
||
<el-card>
|
||
<img src="@/assets/images/size.png"></img>
|
||
<h3>尺寸规格</h3>
|
||
<p class="intro">100 * 55 * 34 MM</p>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="5"><el-card>
|
||
<img src="@/assets/images/power.png"></img>
|
||
<h3>电源输入</h3>
|
||
<p class="intro">5V / 2A</p>
|
||
</el-card></el-col>
|
||
<el-col :span="5"><el-card>
|
||
<img src="@/assets/images/server.png"></img>
|
||
<h3>CPU</h3>
|
||
<p class="intro">HC32F4A0SITB @240MHz</p>
|
||
</el-card></el-col>
|
||
<el-col :span="5"><el-card>
|
||
<img src="@/assets/images/save.png"></img>
|
||
<h3>存储能力</h3>
|
||
<p class="intro">512KB RAM 2+16MB FLASH</p>
|
||
</el-card></el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="5" :offset="2"><el-card>
|
||
<img src="@/assets/images/screen.png"></img>
|
||
<h3>显示屏</h3>
|
||
<p class="intro">320×320 LCD触摸屏</p>
|
||
</el-card></el-col>
|
||
<el-col :span="5"><el-card>
|
||
<img src="@/assets/images/exchange.png"></img>
|
||
<h3>传感器模块</h3>
|
||
<p class="intro">根据需要配置</p>
|
||
</el-card></el-col>
|
||
<el-col :span="5"><el-card>
|
||
<img src="@/assets/images/recycle.png"></img>
|
||
<h3>调试接口</h3>
|
||
<p class="intro">UART</p>
|
||
</el-card></el-col>
|
||
<el-col :span="5"><el-card>
|
||
<img src="@/assets/images/connection.png"></img>
|
||
<h3>外部接口</h3>
|
||
<p class="intro">UART 、CAN 、RS485 、SDIO 、USB 、IIC 、JTAG 、RJ45 、GPIO</p>
|
||
</el-card></el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="5" :offset="2"><el-card>
|
||
<img src="@/assets/images/world.png"></img>
|
||
<h3>网络组件</h3>
|
||
<p class="intro">Ethernet、LoRa</p>
|
||
</el-card></el-col>
|
||
<el-col :span="5"><el-card>
|
||
<img src="@/assets/images/robot.png"></img>
|
||
<h3>操作系统支持</h3>
|
||
<p class="intro">XiUOS 、 RT-Thread 、 NuttX 、 FreeRTOS 、 AliOS Things</p>
|
||
</el-card></el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="advantage">
|
||
<h1>产品优势</h1>
|
||
<el-row class="advantage_row">
|
||
<el-col :span="4" :offset="3">
|
||
<div>
|
||
<img class="img" src="@/assets/images/interface.png"></img>
|
||
<h3>轻薄小巧</h3>
|
||
<p class="intro">体积小，重量轻，便于携带和保存。</p>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4" :offset="3">
|
||
<div>
|
||
<img class="img" src="@/assets/images/cubic.png"></img>
|
||
<h3>灵活开发</h3>
|
||
<p class="intro">板内集成ISP自动下载电路，只需单根USB Type-C数据线即可进行开发。</p>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4" :offset="3">
|
||
<div>
|
||
<img class="img" src="@/assets/images/hexagon.png"></img>
|
||
<h3>良好的可拓展性</h3>
|
||
<p class="intro">支持UART、I2C、SPI、CAN等多种通信协议。</p>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="scene">
|
||
<h1>应用场景</h1>
|
||
<el-row style="margin-top:70px">
|
||
<el-col :span="6" :offset="4">
|
||
<div class="content">
|
||
<img class="img" width="100%" src="@/assets/images/education.png"></img>
|
||
<span>教育行业</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6" :offset="4">
|
||
<div class="content">
|
||
<img class="img" width="100%" src="@/assets/images/industry_research.png"></img>
|
||
<span>工业预研发</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<Footer />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Cover from '@/views/components/Cover'
|
||
import Footer from '@/views/components/Footer'
|
||
|
||
export default {
|
||
components: { Cover, Footer },
|
||
data() {
|
||
return {}
|
||
},
|
||
mounted() {},
|
||
methods: {}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.body-container {
|
||
color: #2e2e2e;
|
||
text-align: center;
|
||
font-family: Nunito;
|
||
min-width: 1340px;
|
||
.info {
|
||
.intro {
|
||
text-align: justify;
|
||
text-indent: 2em;
|
||
font-size: 20px;
|
||
line-height: 2.5;
|
||
letter-spacing: 2px;
|
||
}
|
||
}
|
||
.arch {
|
||
min-height: 100vh;
|
||
background: url('~@/assets/images/advantage_bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-top: 50px;
|
||
padding-top: 20px;
|
||
padding-bottom: 30px;
|
||
.intro {
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
.advantage{
|
||
.advantage_row{
|
||
height: 20vh;
|
||
&:first-of-type{
|
||
margin-top: 50px;
|
||
}
|
||
.img{
|
||
float: left;
|
||
margin-right: 20px;
|
||
}
|
||
.intro{
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
.scene{
|
||
padding-top: 70px;
|
||
padding-bottom: 120px;
|
||
background: url('~@/assets/images/scene_bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
.content{
|
||
background-color: #fff;
|
||
span{
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.el-card {
|
||
margin: 20px;
|
||
height: 23vh;
|
||
min-height: 250px;
|
||
}
|
||
</style>
|
||
|