mobile-shop/src/views/Home.vue

<template>
    <div>
        <!-- 搜索  -->
        <van-search placeholder="请输入搜索关键词" />

        <!-- 轮播 -->
        <van-swipe class="my-swipe" indicator-color="white" style="height: 12rem">
            <van-swipe-item v-for="img in images" :key="img.imgUrl">
                <van-image :src="img.imgUrl" fit="fill" />
            </van-swipe-item>
        </van-swipe>
        <div style="width: 100%; height: .5rem;"></div>

        <!-- 导航 -->
        <van-grid :border="false">
            <van-grid-item icon="new-arrival-o" text="新品推荐" />
            <van-grid-item icon="underway-o" text="限时特惠" />
            <van-grid-item icon="hot-o" text="每日疯抢" />
            <van-grid-item icon="coupon-o" text="领优惠券" />
        </van-grid>

        <!-- 通知栏 -->
        <van-notice-bar left-icon="volume-o" :scrollable="false">
            <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
                <van-swipe-item v-for="item in noticeList.records">{{ item.title }}</van-swipe-item>
            </van-swipe>
        </van-notice-bar>

        <!-- 商品列表 -->
        <div class="produc-list">
            <div style="width: 100%; height: 2rem;"></div>
            <div class="list-title">
                <span class="title">每日上新</span><span class="more">查看更多</span>
            </div>
            <van-grid :border="false" :column-num="3">
                <van-grid-item>
                    <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
                    <div>我是商品介绍我是商品介绍</div>
                    <div>$188.88</div>
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>
<script>
import { indexImgs, noticeList } from '../api/home'
export default {
    data() {
        return {
            images: [],
            noticeList: []
        }
    },
    async created() {
        this.images = await indexImgs()
        this.noticeList = await noticeList()
    }
}
</script>
<style lang="less">
.produc-list {
    .list-title {
        .title {
            display: inline-block;
            text-align: left;
            width: 50%;
            padding-left: 1rem;
        }

        .more {
            display: inline-block;
            text-align: right;
            width: 40%;
            padding-right: 1rem;
        }
    }
}

.my-swipe .van-swipe-item {
    .van-image {
        height: 100%;
    }
}

.notice-swipe {
    height: 40px;
    line-height: 40px;
}
</style>