mirror of
https://github.com/sipeed/sipeed_wiki.git
synced 2026-09-11 00:22:49 -05:00
341 lines
9.5 KiB
HTML
341 lines
9.5 KiB
HTML
<!-- 翻译:
|
||
1. teedoc serve 预览
|
||
2. 使用 {{_("翻译内容")}} 标记需要翻译的文字
|
||
3. 由于 teedoc 对翻译文件还没有做实时监测更改,需要:
|
||
保存一下此页面，teedoc 会自动搜索需要翻译的文字
|
||
4. 在 layout/locales 目录下手动翻译 po 文件
|
||
5. 最后保存一下本页面预览会自动刷新
|
||
-->
|
||
{% extends "page_base.html" %} {% block content %}
|
||
|
||
<script src="/static/js/tailwind.js"></script>
|
||
{% include "style.html" %}
|
||
|
||
<script src="/static/js/vue.global.prod.js"></script>
|
||
<script src="/static/js/naive-ui.prod.js"></script>
|
||
|
||
<div id="root">
|
||
<div id="products" class="flex flex-col lg:flex-row justify-center">
|
||
<div id="products_menu">
|
||
<ul id="menuItems">
|
||
<li
|
||
v-for="(item, key) in data.products"
|
||
class="menuItem menuItem1"
|
||
@click="setContent(item)"
|
||
:id="'menu_'+item.content"
|
||
>
|
||
<span>{[ item.label ]}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div
|
||
id="content"
|
||
style="overflow-wrap: anywhere"
|
||
>
|
||
<!-- 修改完以下字页面到本文档来保存一下即可刷新页面 -->
|
||
<div id="page_maix" class="hidden h-full w-full">
|
||
{% include "maix.html" %}
|
||
</div>
|
||
<div id="page_tang" class="hidden h-full w-full">
|
||
{% include "tang.html" %}
|
||
</div>
|
||
<div id="page_licheepi" class="hidden h-full w-full">
|
||
{% include "licheepi.html" %}
|
||
</div>
|
||
<div id="page_sipeedsense" class="hidden h-full w-full">
|
||
{% include "sipeedsense.html" %}
|
||
</div>
|
||
<div id="page_nanokvm" class="hidden h-full w-full">
|
||
{% include "nanokvm.html" %}
|
||
</div>
|
||
<div id="page_slogic" class="hidden h-full w-full">
|
||
{% include "slogic.html" %}
|
||
</div>
|
||
|
||
<div id="page_news" class="hidden h-full w-full">
|
||
<n-carousel
|
||
show-arrow
|
||
dot-type="line"
|
||
dot-placement="bottom"
|
||
class="carousel"
|
||
:show-dots="true"
|
||
:draggable="true"
|
||
:autoplay="true"
|
||
:interval="6000"
|
||
>
|
||
<!-- for item, key is index -->
|
||
<n-carousel-item
|
||
class="carousel_item"
|
||
v-for="(item, key) in data.head"
|
||
>
|
||
<img class="carousel-img" :src="item.img" />
|
||
<div class="carousel_item_bottom">
|
||
<div class="btn_contrainer">
|
||
<a
|
||
v-for="(btn, key2) in item.btns"
|
||
:href="btn.link"
|
||
target="_blank"
|
||
:class="key2 === item.btns.length - 1? 'btn_home_head btn_home_head_last' : 'btn_home_head'"
|
||
>
|
||
{[ btn.lable ]}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</n-carousel-item>
|
||
</n-carousel>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script lang="ts">
|
||
const data = {
|
||
head: [
|
||
// 图片分辨率为： 1800x600， 左右两边各留 200px 不包含实际内容只有背景，中间 1400px 是内容
|
||
{
|
||
img: "{{_('/static/home/banner_maixcam_pro.jpg')}}",
|
||
btns: [
|
||
{
|
||
lable: "{{_('硬件文档')}}",
|
||
link: "{{_('/maixcam-pro')}}",
|
||
},
|
||
{
|
||
lable: "软件 MaixPy",
|
||
link: "{{_('/maixpy/')}}",
|
||
},
|
||
{
|
||
lable: "{{_('购买')}}",
|
||
link: "{{_('https://item.taobao.com/item.htm?id=846226367137')}}",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
img: "{{_('/static/home/banner_tang_console.jpg')}}",
|
||
btns: [
|
||
{
|
||
lable: "{{_('文档和购买')}}",
|
||
link: "/tangconsole",
|
||
}
|
||
],
|
||
},
|
||
{
|
||
img: "{{_('/static/home/banner_nanokvm_zh.jpg')}}",
|
||
btns: [
|
||
{
|
||
lable: "{{_('文档')}}",
|
||
link: "{{_('/nanokvm')}}",
|
||
},
|
||
{
|
||
lable: "{{_('购买')}}",
|
||
link: "{{_('https://item.taobao.com/item.htm?id=811206560480')}}",
|
||
}
|
||
],
|
||
},
|
||
{
|
||
img: "{{_('/static/home/banner_nanokvm_pcie.jpg')}}",
|
||
btns: [
|
||
{
|
||
lable: "{{_('文档和购买')}}",
|
||
link: "/nanokvmpcie",
|
||
}
|
||
],
|
||
},
|
||
{
|
||
img: "{{_('/static/home/banner_nanokvm_usb.jpg')}}",
|
||
btns: [
|
||
{
|
||
lable: "{{_('文档和购买')}}",
|
||
link: "/nanokvmusb",
|
||
}
|
||
],
|
||
},
|
||
{
|
||
img: "/static/home/25K.jpg",
|
||
btns: [
|
||
{
|
||
lable: "{{_('文档')}}",
|
||
link: "/tang25k",
|
||
},
|
||
{
|
||
lable: "{{_('购买')}}",
|
||
link: "/store",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
img: "/static/home/138K.jpg",
|
||
btns: [
|
||
{
|
||
lable: "{{_('文档')}}",
|
||
link: "/tang138k",
|
||
},
|
||
{
|
||
lable: "{{_('购买')}}",
|
||
link: "/store",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
img: "/static/home/banner_slogic.jpg",
|
||
btns: [
|
||
{
|
||
lable: "{{_('文档')}}",
|
||
link: "/slogic",
|
||
},
|
||
{
|
||
lable: "{{_('购买')}}",
|
||
link: "{{_('https://item.taobao.com/item.htm?id=737788586308')}}",
|
||
},
|
||
],
|
||
}
|
||
],
|
||
products: [
|
||
// 只写公司重点运营的，不是重点推的产品不要写在这里，文档里面可以有，但是这里不写
|
||
// 改了需要同步改前面的 include 部分
|
||
{
|
||
label: "{{_('产品动态')}}",
|
||
content: "news",
|
||
},
|
||
{
|
||
label: "{{_('Maix AI 视觉')}}",
|
||
content: "maix", // maix.html
|
||
},
|
||
{
|
||
label: "Lichee / Longan",
|
||
content: "licheepi",
|
||
},
|
||
{
|
||
label: "Tang FPGA",
|
||
content: "tang",
|
||
},
|
||
{
|
||
label: "{{_('Sipeed 传感器')}}",
|
||
content: "sipeedsense",
|
||
},
|
||
{
|
||
label: "{{_('NanoKVM')}}",
|
||
content: "nanokvm",
|
||
},
|
||
{
|
||
label: "{{_('SLogic')}}",
|
||
content: "slogic",
|
||
},
|
||
],
|
||
};
|
||
|
||
function isLimitedNetwork() {
|
||
var connection = navigator.connection ||
|
||
navigator.mozConnection ||
|
||
navigator.webkitConnection || { type: "unknown" };
|
||
const notLimitTypes = ["ethernet", "wifi", "wimax"];
|
||
const limitTypes = ["bluetooth", "cellular"];
|
||
var system = {
|
||
win: false,
|
||
mac: false,
|
||
x11: false,
|
||
ipad: false,
|
||
};
|
||
var p = navigator.platform;
|
||
system.win = p.indexOf("Win") == 0;
|
||
system.mac = p.indexOf("Mac") == 0;
|
||
system.x11 = p == "X11" || p.indexOf("Linux") == 0;
|
||
system.ipad = navigator.userAgent.match(/iPad/i) != null ? true : false;
|
||
if (notLimitTypes.indexOf(connection.type) >= 0) {
|
||
return false;
|
||
}
|
||
if (
|
||
(system.win || system.mac || system.x11 || system.ipad) &&
|
||
limitTypes.indexOf(connection.type) < 0
|
||
) {
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
|
||
const allHandling = {
|
||
compilerOptions: {
|
||
delimiters: ["{[", "]}"],
|
||
},
|
||
data() {
|
||
return {
|
||
data: data,
|
||
deviceWidth: window.innerWidth,
|
||
data_maix: data_maix,
|
||
data_maixcam: data_maixcam,
|
||
data_lichee: data_lichee,
|
||
data_arm: data_arm,
|
||
data_tang: data_tang,
|
||
data_sipeedsense: data_sipeedsense,
|
||
data_nanokvm: data_nanokvm,
|
||
data_slogic: data_slogic,
|
||
};
|
||
},
|
||
mounted() {
|
||
var isWechat = window.WeixinJSBridge;
|
||
if (!isWechat) {
|
||
document.addEventListener(
|
||
"WeixinJSBridgeReady",
|
||
function () {
|
||
var players_mask = document.getElementsByClassName("play_mask");
|
||
for (var i = 0; i < players_mask.length; ++i) {
|
||
players_mask[i].style.display = "block";
|
||
}
|
||
},
|
||
false
|
||
);
|
||
}
|
||
if (isLimitedNetwork() || isWechat) {
|
||
var players_mask = document.getElementsByClassName("play_mask");
|
||
for (var i = 0; i < players_mask.length; ++i) {
|
||
players_mask[i].style.display = "block";
|
||
}
|
||
} else {
|
||
var players = document.getElementsByClassName("video_player");
|
||
for (var i = 0; i < players.length; ++i) {
|
||
players[i].play();
|
||
}
|
||
}
|
||
// set content default page
|
||
this.setContent(this.data.products[0]);
|
||
},
|
||
methods: {
|
||
playVideo(event) {
|
||
// remove play button and paly video
|
||
el = event.target;
|
||
el.style.display = "none";
|
||
player = el.parentElement.getElementsByTagName("video")[0];
|
||
player.play();
|
||
},
|
||
setContent(item) {
|
||
// set page_{item.content} in content visible, others hidden
|
||
let contentEl = document.getElementById("content");
|
||
// data.products
|
||
for (var i = 0; i < this.data.products.length; ++i) {
|
||
let el = document.getElementById(
|
||
"page_" + this.data.products[i].content
|
||
);
|
||
if (this.data.products[i].content == item.content) {
|
||
el.style.display = "block";
|
||
} else {
|
||
el.style.display = "none";
|
||
}
|
||
}
|
||
// set menu active
|
||
var ul = document.getElementById("menuItems");
|
||
var items = ul.getElementsByTagName("li");
|
||
for (var i = 0; i < items.length; ++i) {
|
||
items[i].classList.remove("active");
|
||
if (items[i].id == "menu_" + item.content) {
|
||
items[i].classList.add("active");
|
||
}
|
||
}
|
||
},
|
||
},
|
||
};
|
||
var app = Vue.createApp(allHandling);
|
||
app.use(naive);
|
||
var vm = app.mount("#root");
|
||
</script>
|
||
|
||
{{ body|safe }} {% endblock%}
|