More actions
No edit summary |
No edit summary |
||
| Line 202: | Line 202: | ||
dark | dark | ||
:src="getImageUrl(item)" | :src="getImageUrl(item)" | ||
:aspect-ratio=" | :aspect-ratio="1/1" | ||
class="grey darken-4" | class="grey darken-4" | ||
@mouseover="setHoveredItem(item)" | @mouseover="setHoveredItem(item)" | ||
| Line 267: | Line 267: | ||
.home-box-item-title, .home-box-item-subtitle { | .home-box-item-title, .home-box-item-subtitle { | ||
text-align: center; | text-align: center; | ||
font-size: | font-size: 14px; /* 默认字体大小 */ | ||
white-space: nowrap; /* 防止文本换行 */ | white-space: nowrap; /* 防止文本换行 */ | ||
overflow: hidden; /* 隐藏超出范围的文本 */ | overflow: hidden; /* 隐藏超出范围的文本 */ | ||
| Line 276: | Line 276: | ||
.home-box-item-title { | .home-box-item-title { | ||
font-weight: bold; | font-weight: bold; | ||
color: #313131 | |||
} | } | ||
| Line 285: | Line 286: | ||
@media (min-width: 960px) { | @media (min-width: 960px) { | ||
.home-box-item-title, .home-box-item-subtitle { | .home-box-item-title, .home-box-item-subtitle { | ||
font-size: | font-size: 16px; /* 中屏幕及以上 */ | ||
} | } | ||
} | } | ||
| Line 291: | Line 292: | ||
@media (min-width: 1280px) { | @media (min-width: 1280px) { | ||
.home-box-item-title, .home-box-item-subtitle{ | .home-box-item-title, .home-box-item-subtitle{ | ||
font-size: | font-size: 18px; /* 大屏幕及以上 */ | ||
} | } | ||
} | } | ||
Revision as of 18:30, 27 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" },
],
]
}}
效果展示