More actions
No edit summary |
No edit summary |
||
| Line 124: | Line 124: | ||
cols="6" sm="6" md="4" lg="3" xl="3" | cols="6" sm="6" md="4" lg="3" xl="3" | ||
> | > | ||
<a :href="baseURL() + encodeURIComponent(item.title) | <a :href="baseURL() + encodeURIComponent(item.title)"> | ||
<v-card class="ma-1 ma-md-2 ma-lg-3 ma-xl-3" flat> | <v-card class="ma-1 ma-md-2 ma-lg-3 ma-xl-3" flat> | ||
<v-img | <v-img | ||
| Line 136: | Line 136: | ||
@touchend="resetHoveredItem()" | @touchend="resetHoveredItem()" | ||
></v-img> | ></v-img> | ||
<div>{{ item.title }}</div> | <div class="home-box-item-title">{{ item.title }}</div> | ||
<div | <div class="home-box-item-title"{{ item.subtitle }}</div> | ||
</v-card> | </v-card> | ||
</a> | </a> | ||
| Line 188: | Line 188: | ||
}, 100); | }, 100); | ||
</script> | </script> | ||
<style scoped> | |||
.home-box-item-title { | |||
text-align: center; | |||
font-weight: bold; | |||
font-size: 16px; /* 默认字体大小 */ | |||
} | |||
@media (min-width: 960px) { | |||
.home-box-item-title { | |||
font-size: 18px; /* 中屏幕及以上 */ | |||
} | |||
} | |||
@media (min-width: 1280px) { | |||
.home-box-item-title { | |||
font-size: 20px; /* 大屏幕及以上 */ | |||
} | |||
} | |||
</style> | |||
</html> | </html> | ||
</onlyinclude> | </onlyinclude> | ||
</includeonly> | </includeonly> | ||
Revision as of 23:32, 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" },
],
]
}}
效果展示