小米首页vue

路由配置

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [{

    path: '/',

    name: 'Home',

    component: Home

  },

]

const router = new VueRouter({

  routes

})

export default router

main.js

 

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

 

Vue.config.productionTip = false

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

APP.vue

<template>

  <div id="app">

    <router-view />

  </div>

</template>

<style lang="scss">

* {

  margin: 0;

  padding: 0;

  list-style: none;

  outline: none;

  text-decoration: none;

}

.flex {

  display: flex;

}

.j-c {

  justify-content: center;

}

.j-s {

  justify-content: space-between;

}

.a-c {

  align-items: center;

}

#app {

  width: 1200px;

  margin: 0 auto;

}

</style>

Banner.vue

 

<template>

  <div class="banner">

    <div class="box">

      <ul>

        <li v-for="(item, index) in list" :key="index" class="flex j-s a-c">

          { { item }}<span>&gt;</span>

        </li>

      </ul>

      <img src="image/T1vWdTBKDv1RXrhCrK.jpg" alt="" />

    </div>

  </div>

</template>

<script>

export default {

  name: "Banner",

  data() {

    return {

      list: [

        "手机  平板",

        "电视  盒子",

        "路由器  智能配件",

        "移动电源  插线板",

        "耳机  音箱",

        "电池  存储卡",

        "保护套  后盖",

        "贴膜  其它配件",

        "米兔  服装",

        "背包  其它周边",

      ],

    };

  },

};

</script>

<style scoped lang='scss'>

.banner {

  width: 1100px;

  height: 500px;

  padding: 0 30px;

  box-sizing: border-box;

  margin: 0 auto;

  .box {

    position: relative;

    img {

      width: 1040px;

      height: 500px;

    }

    ul {

      position: absolute;

      display: flex;

      flex-direction: column;

      justify-content: space-between;

      width: 220px;

      height: 500px;

      box-sizing: border-box;

      background-color: rgba(61, 60, 60, 0.8);

      color: #fff;

      cursor: pointer;

      font-size: 13px;

      padding: 15px 0;

      li {

        padding: 10px;

        padding-left: 20px;

        span {

          display: block;

          font-size: 20px;

        }

      }

      li:hover {

        background-color: rgba(168, 51, 2, 0.2);

      }

    }

  }

}

</style>

Bootentry.vue

 

 

 

<template>

  <div class="bootentry flex j-s">

    <ul class="list flex a-c">

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

        { { item.title }}

        <span>{ { item.content }}</span>

      </li>

    </ul>

    <div><img src="/image/T184E_BQWT1RXrhCrK.jpg" alt="" /></div>

    <div><img src="/image/T1yvd_BQDT1RXrhCrK.jpg" alt="" /></div>

    <div><img src="/image/T1mahQBmKT1RXrhCrK.jpg" alt="" /></div>

  </div>

</template>

<script>

export default {

  name: "Bootentry",

  data() {

    return {

      list: [

        {

          title: "START",

          content: "开放购买",

        },

        {

          ti