More actions
No edit summary |
No edit summary |
||
Line 4: | Line 4: | ||
* tabContents 分栏内容列表 | * tabContents 分栏内容列表 | ||
** title 要跳转的文档名称 | ** title 要跳转的文档名称 | ||
** subtitle: 子标题, | |||
** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示 | ** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示 | ||
** backimg 背面图片, 获取到鼠标焦点时显示 | ** backimg 背面图片, 获取到鼠标焦点时显示 | ||
Line 14: | Line 15: | ||
{ | { | ||
title: "3.5寸HDMI显示屏", | title: "3.5寸HDMI显示屏", | ||
subtitle: "子标题", | |||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | ||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" }, | backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" }, | ||
Line 20: | Line 22: | ||
{ | { | ||
title: "3.5寸HDMI显示屏", | title: "3.5寸HDMI显示屏", | ||
subtitle: "子标题", | |||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | ||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" }, | backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" }, | ||
Line 26: | Line 29: | ||
{ | { | ||
title: "3.5寸HDMI显示屏", | title: "3.5寸HDMI显示屏", | ||
subtitle: "子标题", | |||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | ||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" }, | backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" }, | ||
Line 39: | Line 43: | ||
{ | { | ||
title: "3.5寸HDMI显示屏", | title: "3.5寸HDMI显示屏", | ||
subtitle: "子标题", | |||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | ||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" }, | backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" | ||
}, | |||
{ | |||
title: "3.5寸HDMI显示屏", | |||
subtitle: "子标题", | |||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | |||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" | |||
}, | |||
{ | |||
title: "3.5寸HDMI显示屏", | |||
subtitle: "子标题", | |||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | |||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" | |||
}, | |||
{ | |||
title: "3.5寸HDMI显示屏", | |||
subtitle: "子标题", | |||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | |||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" | |||
}, | |||
{ | |||
title: "3.5寸HDMI显示屏", | |||
subtitle: "子标题", | |||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | |||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" | |||
}, | |||
{ | |||
title: "3.5寸HDMI显示屏", | |||
subtitle: "子标题", | |||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | |||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" | |||
}, | |||
{ | |||
title: "3.5寸HDMI显示屏", | |||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | |||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" | |||
}, | |||
{ | |||
title: "3.5寸HDMI显示屏", | |||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | |||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" | |||
}, | |||
], | ], | ||
[ | [ | ||
Line 46: | Line 92: | ||
title: "3.5寸HDMI显示屏", | title: "3.5寸HDMI显示屏", | ||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | ||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" }, | backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" | ||
}, | |||
], | ], | ||
[ | [ | ||
Line 52: | Line 99: | ||
title: "3.5寸HDMI显示屏", | title: "3.5寸HDMI显示屏", | ||
coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | ||
backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" }, | backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" | ||
}, | |||
], | ], | ||
] | ] | ||
Line 71: | Line 119: | ||
<v-tabs-items v-model="tab"> | <v-tabs-items v-model="tab"> | ||
<v-tab-item v-for="(content, index) in tabContents" :key="index"> | <v-tab-item v-for="(content, index) in tabContents" :key="index"> | ||
< | <v-container> | ||
<v- | <v-row no-gutters> | ||
<v-col v-for="(item, idx) in content" :key="idx" | |||
cols="6" sm="6" md="4" lg="3" xl="3" | |||
> | |||
<a :href="baseURL() + encodeURIComponent(item.title)" style="text-align:center;font-weight: bold;font-size: 20px;"> | |||
<v-card class="ma-1 ma-md-2 ma-lg-3 ma-xl-3" flat> | |||
<v-img | |||
dark | |||
:src="getImageUrl(item)" | |||
:aspect-ratio="16/9" | |||
class="grey darken-4" | |||
@mouseover="setHoveredItem(item)" | |||
@mouseout="resetHoveredItem()" | |||
>{{ item. | @touchstart="setHoveredItem(item)" | ||
> | @touchend="resetHoveredItem()" | ||
</v- | ></v-img> | ||
<div>{{ item.title }}</div> | |||
<div>{{ item.subtitle }}</div> | |||
</v-card> | |||
</a> | |||
<v-col/> | |||
</v-row> | |||
</v-container> | |||
</v-tab-item> | </v-tab-item> | ||
</v-tabs-items> | </v-tabs-items> | ||
Line 100: | Line 153: | ||
if (typeof Vuetify !== "undefined" && typeof Vue !== "undefined") { | if (typeof Vuetify !== "undefined" && typeof Vue !== "undefined") { | ||
clearInterval(homeboxT); | clearInterval(homeboxT); | ||
window.homebox = new Vue({ | |||
el: "#homeBox", | el: "#homeBox", | ||
vuetify: new Vuetify(), | vuetify: new Vuetify(), | ||
Line 131: | Line 182: | ||
}, | }, | ||
}); | }); | ||
let appDom = document.getElementById('homeBox'); | |||
appDom.style.display = 'block'; | |||
} | } | ||
}, 100); | }, 100); |
Revision as of 23:25, 26 July 2024
参数说明
- tabs 分栏名称列表
- tabContents 分栏内容列表
- title 要跳转的文档名称
- subtitle: 子标题,
- coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
- backimg 背面图片, 获取到鼠标焦点时显示
用法
{{#widget:Home | tabs = ["HDMI显示屏", "MHS-series显示屏", "GPIO显示屏"] | tabContents = [ [ { title: "3.5寸HDMI显示屏", subtitle: "子标题", coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" }, ], [ { title: "3.5寸HDMI显示屏", subtitle: "子标题", coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" }, ], [ { title: "3.5寸HDMI显示屏", subtitle: "子标题", coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" }, ], ] }}
效果展示