More actions
No edit summary |
No edit summary |
||
(14 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
== 参数说明 == | == 参数说明 == | ||
* boxid 对象id, 默认值: home-tab, 当需要在同一个页面上显示多个组件时,需要保证boxid唯一 | |||
* themeColor 主题颜色, 默认值: #36a5e8 | |||
* tabs 分栏名称列表 | * tabs 分栏名称列表 | ||
* tabContents 分栏内容列表 | * tabContents 分栏内容列表 | ||
** title 要跳转的文档名称 | ** title 要跳转的文档名称 | ||
** subtitle: 子标题, | |||
** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示 | ** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示 | ||
** backimg 背面图片, 获取到鼠标焦点时显示 | ** backimg 背面图片, 获取到鼠标焦点时显示 | ||
Line 14: | Line 17: | ||
{ | { | ||
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 24: | ||
{ | { | ||
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 31: | ||
{ | { | ||
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 37: | Line 43: | ||
| tabContents = [ | | 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" | |||
}, | |||
{ | |||
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显示屏", | 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" | ||
}, | |||
], | |||
[ | |||
{ | |||
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 101: | ||
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" | ||
}, | |||
], | |||
] | |||
}} | |||
{{#widget:Home | |||
| boxid = demo1 | |||
| tabs = ["HDMI显示屏", "MHS-series显示屏"] | |||
| themeColor = #bc1d46 | |||
| 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" | |||
}, | |||
{ | |||
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 52: | Line 163: | ||
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 60: | Line 172: | ||
<onlyinclude> | <onlyinclude> | ||
<html> | <html> | ||
<div id=" | <div | ||
<v- | id="<!--{$boxid|default:"home-tab"}-->" | ||
<v- | class="v-application v-application--is-ltr theme--light" | ||
style="display: none;" | |||
> | |||
<v-container> | |||
<v-tabs | |||
dark | |||
v-model="tab" | |||
show-arrows | |||
grow | |||
center-active | |||
hide-slider | |||
active-class="active-tab" | |||
:background-color="themeColor" | |||
> | |||
<v-tab v-for="(tabName, index) in tabs" :key="index" style="text-transform: none;"> | |||
{{tabName}} | |||
</v-tab> | |||
</v-tabs> | |||
<v-tabs-items v-model="tab"> | |||
<v-tab-item v-for="(content, index) in tabContents" :key="index"> | |||
<v-container> | <v-container> | ||
<v- | <v-row no-gutters> | ||
<v- | <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)"> | |||
<v-card class="ma-1 ma-md-2 ma-lg-3 ma-xl-3" elevation=1> | |||
< | |||
<v-card | |||
<v-img | <v-img | ||
contain | |||
style="background-color: white;" | |||
:src="getImageUrl(item)" | :src="getImageUrl(item)" | ||
:aspect-ratio=" | :aspect-ratio="1/1" | ||
@mouseover="setHoveredItem(item)" | @mouseover="setHoveredItem(item)" | ||
@mouseout="resetHoveredItem()" | @mouseout="resetHoveredItem()" | ||
></v-img> | ></v-img> | ||
< | <div class="home-box-item-title">{{ item.title }}</div> | ||
<div class="home-box-item-subtitle">{{ item.subtitle }}</div> | |||
< | |||
</v-card> | </v-card> | ||
</ | </a> | ||
</v- | <v-col/> | ||
</v- | </v-row> | ||
</v- | </v-container> | ||
</v- | </v-tab-item> | ||
</v- | </v-tabs-items> | ||
</v-container> | |||
</div> | </div> | ||
<script src="/res/Common/js/vue.min.js"></script> | |||
<script src="/res/Common/js/vuetify.min.js"></script> | |||
<script> | <script> | ||
if (typeof HomeBoxPool == "undefined") { | |||
HomeBoxPool = new Map(); | |||
} | |||
HomeBoxPool["<!--{$boxid|default:"home-tab"}-->"] = setInterval(() => { | |||
if (typeof Vuetify !== "undefined" && typeof Vue !== "undefined") { | |||
clearInterval(HomeBoxPool["<!--{$boxid|default:"home-tab"}-->"]); | |||
let appDom = document.getElementById("<!--{$boxid|default:"home-tab"}-->"); | |||
appDom.style.display = 'block'; | |||
new Vue({ | |||
el: "#<!--{$boxid|default:"home-tab"}-->", | |||
vuetify: new Vuetify(), | |||
mounted() { | |||
setTimeout(()=>{this.preloadBackimg()}, 5000); | |||
}, | |||
methods: { | |||
setHoveredItem(item) { | |||
this.hoveredItem = item; | |||
}, | |||
resetHoveredItem() { | |||
this.hoveredItem = null; | |||
}, | |||
getImageUrl(item) { | |||
if (this.$vuetify.breakpoint.mdAndUp && this.hoveredItem === item && item.backimg) { | |||
return item.backimg; | |||
} | |||
return item.coverimg; | |||
}, | }, | ||
baseURL(){ | |||
return /https?:\/\/[^\/]+\/(zh)(\/|$)/.test(window.location.href) ? '/zh/' : '/' | |||
}, | }, | ||
} | preloadBackimg(){ | ||
this.tabContents.forEach(contents => { | |||
contents.forEach(item => { | |||
if (this.$vuetify.breakpoint.mdAndUp && item.backimg) { | |||
console.log("Preload backimgs", item.backimg) | |||
const img = new Image(); | |||
img.src = item.backimg; | |||
} | |||
}) | |||
}) | |||
} | |||
}, | |||
data: { | |||
themeColor: "<!--{$themeColor|default:"#36a5e8"}-->", | |||
tab: null, | |||
tabs: <!--{$tabs}-->, | |||
tabContents: <!--{$tabContents}-->, | |||
hoveredItem: null, | |||
}, | |||
}); | }); | ||
} | |||
}, 50); | |||
</script> | </script> | ||
<style scoped> | |||
.home-box-item-title, .home-box-item-subtitle { | |||
text-align: center; | |||
font-size: 14px; /* 默认字体大小 */ | |||
white-space: nowrap; /* 防止文本换行 */ | |||
overflow: hidden; /* 隐藏超出范围的文本 */ | |||
text-overflow: ellipsis; /* 使用省略号表示超出文本 */ | |||
max-width: 100%; /* 设置最大宽度 */ | |||
} | |||
.home-box-item-title { | |||
font-weight: bold; | |||
color: #313131 | |||
} | |||
.home-box-item-subtitle { | |||
color: #666666 | |||
} | |||
@media (min-width: 960px) { | |||
.home-box-item-title, .home-box-item-subtitle { | |||
font-size: 16px; /* 中屏幕及以上 */ | |||
} | |||
} | |||
@media (min-width: 1280px) { | |||
.home-box-item-title, .home-box-item-subtitle{ | |||
font-size: 18px; /* 大屏幕及以上 */ | |||
} | |||
} | |||
.active-tab { | |||
font-weight: bold; | |||
font-size: 18px; | |||
} | |||
.active-tab::after { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
background-color: rgba(255, 255, 255, 0.3); /* 透明白色 */ | |||
pointer-events: none; /* 让蒙版不影响鼠标事件 */ | |||
} | |||
</style> | |||
</html> | </html> | ||
</onlyinclude> | </onlyinclude> | ||
</includeonly> | </includeonly> |
Revision as of 15:07, 30 July 2024
参数说明
- boxid 对象id, 默认值: home-tab, 当需要在同一个页面上显示多个组件时,需要保证boxid唯一
- themeColor 主题颜色, 默认值: #36a5e8
- 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" }, ], ] }}
效果展示