wang_zhuang_daping/src.mobile/views/index.vue

<template>
    <div>
        <van-nav-bar title="首页" />
        <van-row>
            <van-col span="24">
                <van-swipe :autoplay="3000" :width="'100%'">
                    <van-swipe-item v-for="(image, index) in images" :key="index">
                        <img width="100%" height="100%" :src="image" />
                    </van-swipe-item>
                </van-swipe>
            </van-col>
        </van-row>
        <div style="height: 500px">
            <van-grid :column-num="3" clickable :gutter="10" style="margin-top: 20px">
                <van-grid-item
                    style="color: #b2568c"
                    v-for="value in items"
                    :key="value.name"
                    :text="value.name"
                    :to="value.to"
                    :icon="value.icon"
                >
                </van-grid-item>
            </van-grid>
        </div>
        <van-tabbar route active-color="#B2568C" inactive-color="#999">
            <van-tabbar-item replace to="/" icon="wap-home"> 首页 </van-tabbar-item>
            <van-tabbar-item replace to="/sign" icon="user-o"> 签到 </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import img from '../static/img.jpg'
export default {
    name: 'Main',
    data() {
        return {
            images: [img],
            items: [
                {
                    name: '统计报表',
                    img: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg',
                    to: '/report',
                    icon: 'chart-trending-o'
                },
                {
                    name: '签到打卡',
                    img: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg',
                    to: '/sign',
                    icon: 'todo-list'
                },
                {
                    name: '退出登录',
                    img: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg',
                    to: '/logout',
                    icon: 'replay'
                }
            ]
        }
    },
    watch: {},
    mounted() {},
    methods: {}
}
</script>