master

分支 (1)

管理

管理

master

ShopTemplate
/
Demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.css">
    <!-- 依赖库 axios/vue/vue-router -->
    <script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>
    <!-- vonic 核心文件 -->
    <script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>
</head>
<body>
<div id="app">
    <div class="page has-navbar has-tabbar" v-tabbar="{'menus': menus, menuColor: '#B5B5B5', activeMenuColor: '#44CC00', onMenuClick: menuClicked}">
        <von-header theme="light">
            <button class="button button-icon ion-ios-arrow-back" slot="left"></button>
            <span slot="title">首页</span>
        </von-header>
        <div class="page-content padding-top">
            <p class="text-center">Home2</p>
            <!--幻灯片-->
            <swiper ref="swiper" direction="horizontal" width="100%" height="150" pager-color="#ea5a49" pager-bg-color="#e5e4e3" hide-pager="false">
                <swiper-item v-for="(img,idx) in banner" :key="img.id">
                    <img :src="img.src" :alt="img.alt" :data-for="img.id"/>
                </swiper-item>
            </swiper>
            <!--快捷导航-->
            <div>
                <cells :items="entrances" :on-cell-click="onCellClick" row="2" col="5" outerBorder="0"></cells>
            </div>
            <div class="card">
                <div class="item item-text-wrap padding-bottom">
                    This is a basic Card which contains an item that has wrapping text.
                </div><div class="item item-text-wrap padding-bottom">
                    This is a basic Card which contains an item that has wrapping text.
                </div>
            </div>
            <div class="card">
                <div class="item item-text-wrap">
                    This is a basic Card which contains an item that has wrapping text.
                </div><div class="item item-text-wrap">
                    This is a basic Card which contains an item that has wrapping text.
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:function () {
            return {
                menus: [
                    {
                        iconOn: 'ion-ios-home',
                        iconOff: 'ion-ios-home-outline',
                        text: '首页',
                        // path: '/home'
                    },
                    {
                        iconOn: 'ion-ios-pricetags',
                        iconOff: 'ion-ios-pricetags-outline',
                        text: '折扣',
                        // path: '/discount'
                    },
                    {
                        iconOn: 'ion-ios-cart',
                        iconOff: 'ion-ios-cart-outline',
                        text: '购物车',
                        // path: '/cart',
                        badge: '5'
                    },
                    {
                        iconOn: 'ion-ios-person',
                        iconOff: 'ion-ios-person-outline',
                        text: '我的',
                        // path: '/user'
                    }
                ],
                banner:[
                    {src:'images/avatar.jpg',alt:'头像',id:11},
                    {src:'images/photo.jpg',alt:'背景',id:21},
                    {src:'images/photo2.jpg',alt:'画报',id:31}
                ],entrances: [
                    '<div class="entrance assertive"><i class="icon ion-ios-flame"></i><br><span>热门</span></div>',
                    '<div class="entrance energized"><i class="icon ion-ios-star"></i><br><span>好评</span></div>',
                    '<div class="entrance balanced"><i class="icon ion-ios-location"></i><br><span>附近</span></div>',
                    '<div class="entrance positive"><i class="icon ion-ios-search"></i><br><span>搜索</span></div>'
                ]
            };
            },
        methods: {
            menuClicked(menuIndex,e) {
                console.log(menuIndex);
                console.log(e)
            },
            onCellClick(e){
                console.log(e);
            }
        },
    });
</script>
</body>
</html>