lookcommon_course/pages_tool/pages/index/index.vue

<template>
    <view class="index-body">
        <swiper
            :autoplay="swiper.autoplay"
            :circular="true"
            class="swipr-box"
            :duration="swiper.duration"
            :easingFunction="swiper.easing"
            :indicatorActiveColor="swiper.activeColor"
            :indicatorColor="swiper.color"
            :indicatorDots="swiper.indicatorDots"
            :interval="swiper.interval"
            :nextMargin="swiper.lrmargin"
            :previousMargin="swiper.lrmargin"
        >
            <swiper-item class="seiper-smbox" v-for="(item, index) in imgUrls" :key="index">
                <navigator hoverClass="none" openType="navigate" :url="item.openpath">
                    <image class="slide-image" :src="item.img"></image>
                </navigator>
            </swiper-item>
        </swiper>
        <view class="recommend-box">
            <view class="recommend-smbox">
                <view class="col-1" v-for="(item, index) in recommend" :key="index">
                    <navigator hoverClass="none" openType="navigate" :url="item.openpath">
                        <view class="ta-c">
                            <image class="listimg" :src="item.img"></image>
                        </view>
                        <view class="fs26 fc52 ta-c">
                            {{ item.text }}
                        </view>
                    </navigator>
                </view>
            </view>
        </view>
        <view class="ad-index">
            <view class="ad-df">
                <ad class="ad-df" unitId="adunit-df4f5438f700d506"></ad>
            </view>
        </view>
        <view class="server-box">
            <view class="server-smbox">
                <view class="server-name">
                    <view class="server-text fc3d fs30">工具列表</view>
                </view>
                <view class="list-server">
                    <view class="listbox" v-for="(item, index) in server" :key="index">
                        <navigator hoverClass="none" openType="navigate" :url="item.openpath">
                            <view>
                                <image class="listimg" :src="item.img"></image>
                            </view>
                            <view class="fs26 fc52 ta-c">
                                {{ item.text }}
                            </view>
                        </navigator>
                    </view>
                </view>
                <view class="clear"></view>
            </view>
        </view>
        <view class="bottomLine">我是有底线的</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            swiper: {
                indicatorDots: true,
                autoplay: true,
                interval: 5000,
                duration: 1000,
                lrmargin: '40rpx',
                easing: 'easeInOutCubic',
                activeColor: '#fff',
                color: 'rgba(255, 255, 255, .3)'
            },
            imgUrls: [
                {
                    img: '/static/images/ad/ad1.jpg',
                    openpath: ''
                }
            ],
            recommend: [
                {
                    img: '/static/images/toolIcon/weather.png',
                    openpath: '../../pages/weather/weather',
                    text: '天气'
                },
                {
                    img: '/static/images/toolIcon/qrcode.png',
                    openpath: '../../pages/qrcode/index',
                    text: '生成二维码'
                },
                {
                    img: '/static/images/toolIcon/IP.png',
                    openpath: '../../pages/IP/IP',
                    text: 'IP地址查询'
                },
                {
                    img: '/static/images/toolIcon/hl.png',
                    openpath: '../../pages/cand/index',
                    text: '程序员黄历'
                }
            ],
            server: [
                {
                    img: '/static/images/toolIcon/sdm.png',
                    openpath: '../../pages/christmasHat/index/index',
                    text: '圣诞帽'
                },
                {
                    img: '/static/images/toolIcon/qrcode.png',
                    openpath: '../../pages/qrcode/index',
                    text: '生成二维码'
                },
                {
                    img: '/static/images/toolIcon/wsyt.png',
                    openpath: '../../pages/gojuuonn/gojuuonn',
                    text: '五十音图'
                },
                {
                    img: '/static/images/toolIcon/cha.png',
                    openpath: '../../pages/pinyin/index',
                    text: '查拼音'
                },
                {
                    img: '/static/images/toolIcon/clac.png',
                    openpath: '../../pages/calc/index',
                    text: '计算器'
                },
                {
                    img: '/static/images/toolIcon/hl.png',
                    openpath: '../../pages/cand/index',
                    text: '程序员黄历'
                },
                {
                    img: '/static/images/toolIcon/gz.png',
                    openpath: '../../pages/game/game',
                    text: '摇骰子'
                },
                {
                    img: '/static/images/toolIcon/sc.png',
                    openpath: '../../pages/figure/figure',
                    text: '身材计算'
                },
                {
                    img: '/static/images/toolIcon/weather.png',
                    openpath: '../../pages/weather/weather',
                    text: '天气'
                },
                {
                    img: '/static/images/toolIcon/IP.png',
                    openpath: '../../pages/IP/IP',
                    text: 'IP地址查询'
                },
                {
                    img: '/static/images/toolIcon/MobileHome.png',
                    openpath: '../../pages/MobileHome/MobileHome',
                    text: '手机归属地'
                },
                {
                    img: '/static/images/toolIcon/codePars.png',
                    openpath: '../../pages/codePars/codePars',
                    text: '电码查询'
                },
                {
                    img: '/static/images/toolIcon/historyToday.png',
                    openpath: '../../pages/historyToday/historyToday',
                    text: '历史今天'
                }
            ]
        };
    },
    onLoad: function (e) {
        uni.showShareMenu({
            menus: ['shareAppMessagewx', 'shareTimeline'],
            withShareTicket: true
        });
    },
    onShow: function () {
        this.getADList();
    },
    onShareAppMessage: function () {
        return {
            title: '康康工具箱-一个多功能工具箱',
            path: 'pages/index/index'
        };
    },
    onShareTimeline: function () {
        return {
            title: '康康工具箱-一个多功能工具箱',
            imageUrl: '../../images/share.jpg'
        };
    },
    methods: {
        
    }
};
</script>
<style>
@import './index.css';
</style>