<template>
    <!-- 今日推荐 -->
    <view>
        <!-- 今日推荐 -->
        <view class="flex yqhy" v-if="tuijian != null && tuijian.length > 0"
            style="margin-top: 30rpx; flex-direction: column">
            <text style="color: black; font-weight: 600; margin-bottom: 20rpx">今日推荐</text>
            <view class="flex row align-center" style="width: 100%; height: 230rpx; justify-content: space-between;">
                <swiper autoplay style="width: 100%;height: 100%;" :display-multiple-items="3">
                    <swiper-item v-for="(item, index) in tuijian" :key="index">
                        <view style="background-color: gray;width: 220rpx; height: 220rpx; border-radius: 10rpx">
                            <image class="" style="width: 220rpx; height: 220rpx; border-radius: 10rpx"
                                :src="item.imgurl" @click="$c.navTo(item, index)"></image>
                        </view>
                    </swiper-item>
                </swiper>

            </view>
        </view>
    </view>
</template>

<script>
import {
    getDanYe, getAdvert
} from "../../common/server/config";
export default {
    name: 'home-page-tuijian',
    data() {
        return {
            tuijian: null
        }
    },
    methods: {
        async getTuiJian() {
            const tuijian = await getAdvert(5);
            this.tuijian = tuijian;
        }
    },
    mounted() {
        this.getTuiJian();
    }
}
</script>

<style lang="scss" scoped>
.yqhy {
    width: calc(100% - 32rpx - 16rpx);
    height: 300rpx;
    margin-top: 30rpx;
    margin-left: 32rpx;

    .nav2 {
        width: 710rpx;
        height: 170rpx;
        margin: 0 auto;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .recommend_item {
        width: 200rpx;
        height: 200rpx;
        flex: 0 0 auto;
        background-color: gray;
        margin-right: 40rpx;
        border-radius: 10rpx;
    }
}
</style>