小米详情页

路由配置

import Vue from 'vue'

import VueRouter from 'vue-router'

 

Vue.use(VueRouter)

const routes = [{

  path: '/',

  name: 'Detail',

  component: () => import('../views/Detail.vue')

}, ]

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-s {

  justify-content: space-between;

}

.j-c {

  justify-content: center;

}

.a-c {

  align-items: center;

}

#app {

  width: 1200px;

  margin: 0 auto;

}

</style>

Navfoot.vue

 

<template>

  <div class="navFooter">

    <div class="one">

      <img src="imgs/logo-footer.png" alt="" />

      <div>小米商场</div>

    </div>

    <div class="menu flex j-c">

      <li>小米商城</li>

      <li>|</li>

      <li>MINI</li>

      <li>|</li>

      <li>米家</li>

      <li>|</li>

      <li>米聊</li>

      <li>|</li>

      <li>多看</li>

      <li>|</li>

      <li>游戏</li>

      <li>|</li>

      <li>政企服务</li>

      <li>|</li>

      <li>小米天猫店</li>

    </div>

    <div>

      © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号

      京网文[2020]0276-042号

    </div>

  </div>

</template>

<script>

export default {

  name: "NavFooter",

};

</script>

<style scoped lang='scss'>

.navFooter {

  margin: 0 auto;

  width: 1100px;

  border-top: 3px solid #fe6402;

  height: 200px;

  padding: 20px 0;

  margin-top: 40px;

  background-color: #333;

  color: #eee;

  .one {

    img {

      margin: 0 auto;

      display: block;

      margin-bottom: 20px;