Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Widget:Home: Difference between revisions

From LCD wiki
No edit summary
No edit summary
Line 4: Line 4:
* tabContents 分栏内容列表
* tabContents 分栏内容列表
** title 要跳转的文档名称
** title 要跳转的文档名称
** subtitle: 子标题,
** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
** backimg 背面图片, 获取到鼠标焦点时显示
** backimg 背面图片, 获取到鼠标焦点时显示
Line 14: Line 15:
       {  
       {  
         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 22:
       {  
       {  
         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 29:
       {  
       {  
         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 39: Line 43:
       {  
       {  
         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"
      },  
      {
        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 46: Line 92:
         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 52: Line 99:
         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 71: Line 119:
           <v-tabs-items v-model="tab">
           <v-tabs-items v-model="tab">
             <v-tab-item v-for="(content, index) in tabContents" :key="index">
             <v-tab-item v-for="(content, index) in tabContents" :key="index">
               <div class="d-flex flex-wrap justify-space-around">
            <v-container>
                 <v-card v-for="(item, idx) in content" :key="idx" flat>
               <v-row no-gutters>
                  <v-img
                 <v-col v-for="(item, idx) in content" :key="idx"
                    dark
                cols="6" sm="6" md="4" lg="3" xl="3"
                    :src="getImageUrl(item)"
                >
                    :aspect-ratio="16/9"
                  <a :href="baseURL() + encodeURIComponent(item.title)" style="text-align:center;font-weight: bold;font-size: 20px;">
                    width="265"
                    <v-card class="ma-1 ma-md-2 ma-lg-3 ma-xl-3" flat>
                    class="grey darken-4"
                      <v-img
                    @mouseover="setHoveredItem(item)"
                        dark
                    @mouseout="resetHoveredItem()"
                        :src="getImageUrl(item)"
                  ></v-img>
                        :aspect-ratio="16/9"
                  <v-card-subtitle style="text-align: center">
                        class="grey darken-4"
                    <a
                        @mouseover="setHoveredItem(item)"
                      :href="baseURL() + encodeURIComponent(item.title)"
                        @mouseout="resetHoveredItem()"
                       >{{ item.title }}</a
                        @touchstart="setHoveredItem(item)"
                     >
                        @touchend="resetHoveredItem()"
                   </v-card-subtitle>
                      ></v-img>
                </v-card>
                      <div>{{ item.title }}</div>
              </div>
                       <div>{{ item.subtitle }}</div>
                     </v-card>
                   </a>
                <v-col/>
              </v-row>
            </v-container>
             </v-tab-item>
             </v-tab-item>
           </v-tabs-items>
           </v-tabs-items>
Line 100: Line 153:
       if (typeof Vuetify !== "undefined" && typeof Vue !== "undefined") {
       if (typeof Vuetify !== "undefined" && typeof Vue !== "undefined") {
         clearInterval(homeboxT);
         clearInterval(homeboxT);
         let appDom = document.getElementById('homeBox');
         window.homebox = new Vue({
        appDom.style.display = 'block';
        new Vue({
           el: "#homeBox",
           el: "#homeBox",
           vuetify: new Vuetify(),
           vuetify: new Vuetify(),
Line 131: Line 182:
           },
           },
         });
         });
        let appDom = document.getElementById('homeBox');
        appDom.style.display = 'block';
       }
       }
     }, 100);
     }, 100);

Revision as of 23:25, 26 July 2024

参数说明

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

效果展示