更多操作
创建页面，内容为“<noinclude> == 参数说明 == * themeColor 主题颜色, 默认值: #36a5e8 * images 图片数据, 必填 ** title 名称, 必填 ** src 图片链接, 必填 * chipsTitle 标签数据标题, 选填 * chips 标签数据, 选填 ** name 名称, chips有值时必填 ** url 跳转链接, 选填 * kvDatasTitle K-V数据标题, 选填 * kvDatas K-V数据, 选填 ** key 名称, 必填 ** value 值, 必填 ** url 跳转链接, 选填 * liDataTitle 列表数据标题,…” |
无编辑摘要 |
||
| 第169行： | 第169行： | ||
style="display: none; float: right; width: 320px" | style="display: none; float: right; width: 320px" | ||
> | > | ||
<v-container :style="containsStyle"> | |||
<div id="product-card-imgs"> | |||
<v-tabs | |||
v-model="tab" | |||
grow | |||
center-active | |||
dark | |||
:background-color="themeColor" | |||
> | |||
<v-tab v-for="(tabName, index) in imageTabs" :key="index" | |||
>{{ tabName }}</v-tab | |||
> | > | ||
<v-tab v-for="( | </v-tabs> | ||
>{{ | <v-tabs-items v-model="tab"> | ||
<v-tab-item v-for="(img, index) in images" :key="index"> | |||
<v-img :src="img.src" :aspect-ratio="16/9" width="300"></v-img> | |||
</v-tab-item> | |||
</v-tabs-items> | |||
</div> | |||
<div id="product-card-chips" v-if="chips && chips.length > 0"> | |||
<span v-if="chipsTitle" :style="titleStyle">{{chipsTitle}}</span> | |||
<div class="d-flex flex-wrap justify-start"> | |||
<v-chip | |||
v-for="(chip, index) in chips" | |||
:key="index" | |||
class="ma-1" | |||
:color="themeColor" | |||
outlined | |||
small | |||
> | |||
<a v-if="chip.url" :href="chip.url" target="_blank" | |||
>{{chip.name}}</a | |||
> | > | ||
<span v-else>{{chip.name}}</span> | |||
</v-chip> | |||
<v- | |||
</v- | |||
</div> | </div> | ||
</div> | |||
<div id="product-card-kvData" v-if="kvDatas && kvDatas.length > 0"> | |||
<span v-if="kvDatasTitle" :style="titleStyle" | |||
>{{kvDatasTitle}}</span | |||
> | |||
<div | |||
v-for="(kvItem, index) in kvDatas" | |||
:key="index" | |||
class="d-flex justify-start" | |||
> | |||
<div :style="kvKeyStyle">{{kvItem.key}}</div> | |||
<div :style="kvValueStyle"> | |||
<a v-if="kvItem.url" :href="kvItem.url" target="_blank" | |||
>{{kvItem.value}}</a | |||
> | > | ||
<span v-else>{{kvItem.value}}</span> | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | |||
<div id="product-card-liData" v-if="liDatas && liDatas.length > 0"> | |||
<span v-if="liDataTitle" :style="titleStyle">{{liDataTitle}}</span> | |||
<a | |||
style="display: block; padding: 2px; margin-left: 5px" | |||
v-for="(liItem, index) in liDatas" | |||
:key="index" | |||
:href="liItem.url" | |||
target="_blank" | |||
>{{liItem.name}}</a | |||
> | |||
</div> | |||
</v-container> | |||
</div> | </div> | ||
2024年7月19日 (五) 00:12的版本
参数说明
- themeColor 主题颜色, 默认值: #36a5e8
- images 图片数据, 必填
- title 名称, 必填
- src 图片链接, 必填
- chipsTitle 标签数据标题, 选填
- chips 标签数据, 选填
- name 名称, chips有值时必填
- url 跳转链接, 选填
- kvDatasTitle K-V数据标题, 选填
- kvDatas K-V数据, 选填
- key 名称, 必填
- value 值, 必填
- url 跳转链接, 选填
- liDataTitle 列表数据标题, 选填
- liDatas 列表数据, 选填
- name 名称, 必填
- url 跳转链接, 必填
用法
{{#widget:ProductCard
| themeColor = "#36a5e8"
| images = [
{
title: "CM4核心板",
src: "https://www.waveshare.net/w/thumb.php?f=Compute-Module-4-1.jpg&width=360",
},
{
title: "官方底板",
src: "https://www.waveshare.net/w/thumb.php?f=Compute-Module-4-IO-Board-2.jpg&width=360",
},
{
title: "官方底板外",
src: "https://www.waveshare.net/w/thumb.php?f=CM4-IO-BOARD-CASE-A-2.jpg&width=360",
},
]
| chipsTitle = "板载接口"
| chips = [
{
name: "DIS",
url: "https://www.waveshare.net/wiki/%E5%88%86%E7%B1%BB:DSI%E6%8E%A5%E5%8F%A3",
},
{ name: "CSI", url: "" },
{ name: "HDMI", url: "" },
{ name: "USB2.0", url: "" },
{ name: "I2C", url: "" },
{
name: "PECI",
url: "https://www.waveshare.net/w/index.php?title=%E5%88%86%E7%B1%BB:PCIE%E6%8E%A5%E5%8F%A3&action=edit&redlink=1",
},
{
name: "SPI",
url: "https://www.waveshare.net/wiki/%E5%88%86%E7%B1%BB:SPI%E6%8E%A5%E5%8F%A3",
},
{ name: "UART", url: "" },
]
| kvDatasTitle = "功能简介"
| kvDatas = [
{
key: "特性",
value: "1200万像素",
},
{
key: "模组",
value: "IMX708",
},
{
key: "视场角",
value: "75°/120°",
url: "",
},
{
key: "接口",
value: "CSI",
url: "https://www.waveshare.net/wiki/%E5%88%86%E7%B1%BB:CSI%E6%8E%A5%E5%8F%A3",
},
]
| liDataTitle = "相关产品"
| liDatas = [
{
name: "Raspberry Pi开发板",
url: "https://www.waveshare.net/wiki/%E5%88%86%E7%B1%BB:Raspberry_Pi%E5%BC%80%E5%8F%91%E6%9D%BF",
},
{
name: "Pioneer600",
url: "https://www.waveshare.net/wiki/Pioneer600",
},
]
}}
效果展示