JINGDONG

npm i vue-router

npm install swiper@5 vue-awesome-swiper@3 --save

APP.VUE

<template>

  <div id="app">

   <router-view></router-view>

  </div>

</template>

<script>

export default {

  name: 'App',

  components: {

  }

}

</script>

<style>

*{

  margin: 0;

  padding: 0;

  list-style: none;

  text-decoration: none;

  outline: none;

}

.flex{

  display: flex;

}

.j-c{

  justify-content: center;

}

.j-s{

  justify-content: space-between;

}

.a-c{

  align-items: center;

}

</style>

Router--index.js

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

let router = new VueRouter({

    routes: [

        {

            path:'/',

            component:()=>import('../page/Home.vue')

        },

        {

            path:'/classify',

            component:()=>import('../page/Classify.vue')

        }

    ]

})

export default router

Main.js

import Vue from 'vue'

import App from './App.vue'

Vue.config.productionTip = false

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

import router from './router'

import 'swiper/css/swiper.css'

new Vue({

  render: h => h(App),

  router

}).$mount('#app')

Home.vue

<template>

    <div class="home">

        <Header></Header>

        <Swiper></Swiper>

        <Navi></Navi>

        <Hot></Hot>

        <Foot></Foot>

    </div>

</template>

<script>

import Header from '../components/Header.vue'

import Swiper from '../components/Swiper.vue'

import Navi from '../components/Navi.vue'

import Hot from '../components/Hot.vue'

import Foot from '../components/Foot.vue'

    export default {

        name: "Home",

        components:{

            Header,

            Swiper,

            Navi,

            Hot,

            Foot

        }

    };

</script>

<style scoped>

.home{

    border: 1px solid #ccc;

}

</style>

Header.vue

<template>

    <div class="header flex j-s a-c">

        <div class="logo "></div>

        <div class="search flex  a-c">

            <div class="icon"></div>

            <input type="text" placeholder="请输入你要查找的内容" />

        </div>

        <div class="login">登录</div>

    </div>

</template>

<script>

    export default {

        name: "Header"

    };

</script>

<style scoped >

    .header {

        height: 50px;

        background: #e1251b;

        padding: 0 10px;

    }

    .logo {

        width: 60px;

        height: 25px;

        background: url("/images/sprites.png") no-repeat 0px -107px / 200px 200px;

    }

    .search {

        width: 200px;

        height: 30px;

        background: white;

        border-radius: 5px;

    }

    .search .icon {

        height: 25px;

        width: 30px;

        background: url("/images/sprites.png") no-repeat -55px -107px / 200px 200px;

    }

    .search input {

        border: none;

    }

    .login{

        color: white;

    }

</style>

Swiper.vue

<template>

    <div class="swiper">

        <swiper ref="mySwiper" :options="swiperOptions">

            <swiper-slide>

                <img src="/images/banner1.jpg" />

            </swiper-slide>

            <swiper-slide>

                <img src="/images/banner2.jpg" />

            </swiper-slide>

            <swiper-slide>

                <img src="/images/banner3.jpg" />

            </swiper-slide>

            <div class="swiper-pagination" slot="pagination"></div>

        </swiper>

    </div>

</template>

<script>

    export default {

        name: "MySwiper",

        data() {

            return {

                swiperOptions: {

                    pagination: {

                        el: ".swiper-pagination"

                    },

                    loop:true,

                    autoplay:{

                        delay:3000,

                        disableOnInteraction: false,

                    }

                }

            };

        }

    };

</script>

<style scoped >

    .swiper img {

        width: 100%;

    }

</style>

Navi.vue

<template>

    <div class="navi">

        <div class="item" v-for="(item,index) in list" :key="index">

            <img :src="`/images/nav${index}.png`">

            <span>{{item}}</span>

        </div>

    </div>

</template>

<script>

    export default {

        name: "Navi",

        data() {

            return {

                list:['分类查询','物流查询','购物车','我的京东','充值','领券中心','京东超市','我的关注']

            }

        },

    };

</script>

<style scoped>

.navi{

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}

.item{

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    font-size: 14px;

    margin-bottom: 10px;

}

.item img{

    width: 70%;

    margin-bottom: 5px;

}

</style>

Hot.vue

<template>

    <div class="hot">

        <div class="title">超值购</div>

        <div class="img">

            <div class="left">

                <img class="img1" src="/images/cp1.jpg" />

            </div>

            <div class="right">

                <img src="/images/cp2.jpg" />

                <img src="/images/cp3.jpg" />

            </div>

        </div>

    </div>

</template>

<script>

    export default {

        name: "Hot"

    };

</script>

<style scoped>

    .hot {

        padding: 0 5px;

    }

    .hot .title {

        font-size: 14px;

        height: 14px;

        border-left: 2px solid rgb(243, 89, 89);

        padding: 10px;

        margin: 10px 0;

    }

    .img {

        display: flex;

        border-top: 1px solid #ccc;

        border-bottom: 1px solid #ccc;

    }

    .left{

        width: 50%;

        border-right: 1px solid #ccc;

    }

    .left img{

        width: 100%;

       

    }

    .right{

        width: 50%;

    }

    .right img{

        width: 100%;

       

    }

    .right img:last-child{

        border-top: 1px solid #ccc;

    }

</style>

Foot.vue

<template>

    <div class="foot">

        <img src="/images/icon-home.png" />

        <img @click="$router.push('/classify')" src="/images/icon-catergry.png" />

        <img src="/images/icon-cart.png" />

        <img src="/images/icon-me.png" />

    </div>

</template>

<script>

    export default {

        name: "Foot"

    };

</script>

<style scoped>

    .foot {

        display: flex;

        justify-content: space-between;

    }

    .foot img{

        width: 20%;

    }

</style>

Classify.vue

<template>

    <div class="classify">

        <div class="top">这是分类页面</div>

        <div class="goHome" @click="$router.push('/')">返回首页</div>

    </div>

</template>

<script>

    export default {

        name: "Classify"

    };

</script>

<style scoped>

    .top{

        width: 100%;

        height: 50px;

        font-size: 30px;

        text-align: center;

        color: white;

        line-height: 50px;

        background: #e1251b;

    }

    .goHome{

        width: 100px;

        height: 40px;

        background: #e1251b;

        text-align: center;

        color: white;

        line-height: 40px;

        margin-top: 10px;

    }

</style>