2024年7月19日 (五) 00:20的版本

参数说明

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",
    },
  ]
}}

@@ 第91行： / 第91行： @@
 </nowiki></pre>
 == 效果展示 ==
 {{StyledHeader
 | text = 显示一个简单的黑色标题，背景透明，没有边框和下划线
 }}
-{{StyledHeader
-| text = 有浅蓝色背景和深蓝色文字，仍使用默认的 h1 标签
-| bgcolor = lightblue
-| color = darkblue
-}}
-{{StyledHeader
-| text = 使用 h2 标签显示绿色标题，背景透明, 和2px粗的下划线。
-| header = h2
-| color = green
-| border-bottom = 2px
-}}
-{{StyledHeader
-| text = 有黄色背景、黑色文字、5px 宽的左侧边框和2px粗的下划线。
-| bgcolor = yellow
-| color = black
-| border-left = 5px
-| border-bottom = 2px
-}}
-{{StyledHeader
-| text = 用 h3 标签，具有灰色背景、深灰色文字、10px 宽的左边框。
-| header = h3
-| bgcolor = #f0f0f0
-| color = #333
-| border-left = 10px
-}}
 {{#widget:ProductCard
 | themeColor = "#36a5e8"
@@ 第195行： / 第172行： @@
        id="product-card"
        class="v-application v-application--is-ltr theme--light"
-       style="display: none; float: right; width: 320px"
+       style="display: none; float: right; max-width: 320px"
      >
        <v-container :style="containsStyle">