打开/关闭搜索
搜索
打开/关闭菜单
43
1,113
4
9,243
LCD wiki
导航
首页
最近更改
帮助
特殊页面
上传文件
站点
English Site
中文站点
notifications
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。
user-interface-preferences
个人工具
登录
查看“Widget:Home”的源代码
来自LCD wiki
更多操作
←
Widget:Home
因为以下原因,您没有权限编辑该页面:
您请求的操作仅限属于该用户组的用户执行:
用户
您没有权限编辑
Widget
命名空间内的页面。
您可以查看和复制此页面的源代码。
<noinclude> == 参数说明 == * boxid 对象id, 默认值: home-tab, 当需要在同一个页面上显示多个组件时,需要保证boxid唯一 * themeColor 主题颜色, 默认值: #36a5e8 * tabs 分栏名称列表 * tabContents 分栏内容列表 ** title 要跳转的文档名称 ** subtitle: 子标题, ** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示 ** backimg 背面图片, 获取到鼠标焦点时显示 == 用法 == <pre><nowiki> {{#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" }, ], ] }} </nowiki></pre> == 效果展示 == {{#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" }, { 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" }, ], [ { 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" }, ], ] }} {{#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" }, ], [ { 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" }, ], ] }} </noinclude> <includeonly> <onlyinclude> <html> <div id="<!--{$boxid|default:"home-tab"}-->" 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-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)"> <v-card class="ma-1 ma-md-2 ma-lg-3 ma-xl-3" elevation=1> <v-img contain style="background-color: white;" :src="getImageUrl(item)" :aspect-ratio="1/1" @mouseover="setHoveredItem(item)" @mouseout="resetHoveredItem()" ></v-img> <div class="home-box-item-title">{{ item.title }}</div> <div class="home-box-item-subtitle">{{ item.subtitle }}</div> </v-card> </a> <v-col/> </v-row> </v-container> </v-tab-item> </v-tabs-items> </v-container> </div> <script src="/res/Common/js/vue.min.js"></script> <script src="/res/Common/js/vuetify.min.js"></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(){ console.log("Preload backimgs") this.tabContents.forEach(contents => { contents.forEach(item => { if (this.$vuetify.breakpoint.mdAndUp && 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> <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> </onlyinclude> </includeonly>
返回
Widget:Home
。