小米详情
App.vue
<template>
  <div id="app">  
   <Detail></Detail>
  </div>
</template>

<script>
import Detail from './views/Detail'
export default {
  components:{
    Detail
  }
}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.flex{
  display: flex;
}
.j-s{
  justify-content: space-between;
}
.j-c{
  justify-content: center;
}
.a-c{
  align-items: center;
}
</style>

main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

detail.vue
<template>
  <div>
    <NavHeader></NavHeader>
    <ProductParam></ProductParam>
    <NavFooter></NavFooter>
  </div>
</template>
<script>
import NavHeader from "../components/NavHeader.vue";
import NavFooter from "../components/NavFooter.vue";
import ProductParam from "../components/ProductParam.vue";
export default {
  name: "Detail",
  components: {
    NavHeader,
    NavFooter,
    ProductParam,
  },
};
</script>
<style scoped lang='scss'>
</style>

index.js(store)
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

index.js(路由)
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  
]

const router = new VueRouter({
  routes
})

export default router

navfooter.vue
<template>
  <div class="navfooter">
    <div class="footer_one">
      <img src="/imgs/logo-footer.png" alt="" />
      <div>小米商城</div>
    </div>
    <div class="footer_two ">
      <ul class="flex list j-c">
        <li>小米商城</li>
        <li>|</li>
        <li>小米商城</li>
        <li>|</li>
        <li>MIUI</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>
      </ul>
    </div>
    <div class="footer_three"> © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</div>
  </div>
</template>
<script>
export default {
  name: "NavFooter",
};
</script>
<style scoped lang='scss'>
.navfooter {
  background-color: rgb(58, 57, 57);
  color: #ccc;
  border-top: 3px solid orangered;
  width: 95%;
  height: 230px;
  margin: 0 auto;
  margin-top: 20px;
  .footer_one {
    margin: 20px auto;
    width: 100%;
    text-align: center;
    div {
      margin-top: 10px;
    }
  }
  .footer_two {
    width: 100%;
    li{
        margin-left: 5px;
    }
  }
  .footer_three{
      width: 100%;
      text-align: center;
      margin-top: 20px;
      font-size: 14px;
  }
}
</style>

navheader.vue
<template>
  <div class="navheader">
    <div class="top flex j-s">
      <div class="left flex">
        <li>小米商城</li>
        <li>MIUI</li>
        <li>IoT</li>
        <li>云服务</li>
        <li>金融</li>
        <li>有品</li>
        <li>小爱开放平台</li>
      </div>
      <div class="right flex">
        <li>登录</li>
        <li>购物车</li>
      </div>
    </div>
    <div class="content flex j-s">
      <div class="left">
        <img src="/imgs/mi-logo.png" alt="" />
      </div>
      <div class="conten flex">
        <li @mouseenter="isShow(1)" @mouseleave="show=false">电视</li>
        <li @mouseenter="isShow(2)" @mouseleave="show=false">小米手机</li>
        <li>RedMi红米</li>
        <li>笔记本</li>
        <li>路由器</li>
        <li>家电</li>
      </div>
      <div class="right flex a-c">
        <input type="text" />
        <div class="img">
          <img src="/imgs/icon-search.png" alt="" />
        </div>
      </div>
    </div>
    <div v-show="show" class="right1 flex j-s">
        <div class="list" v-for="(item,index) in navs" :key="index">
            <div>
                <img :src="item.mainImage" alt="">
            </div>
            <div>{{item.name}}</div>
            <div class="price">{{item.price}}</div>
        </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            navs:[],
            show:false
        }
    },
   async created() {
       
    },
    methods: {
     async isShow(val){
         this.show =true
        if(val===1){
          // 显示电视
            this.navs=[
              {
                mainImage:'/imgs/nav-img/nav-3-1.jpg',
                name:'小米壁画电视 65英寸',
                price:'6999'
              },
               {
                mainImage:'/imgs/nav-img/nav-3-2.jpg',
                name:'小米全面屏电视 55英寸',
                price:'1899'
              },
               {
                mainImage:'/imgs/nav-img/nav-3-3.png',
                name:'小米电视4A 32英寸',
                price:'799'
              },
               {
                mainImage:'/imgs/nav-img/nav-3-4.jpg',
                name:'小米电视4A 55英寸',
                price:'1299'
              },
               {
                mainImage:'/imgs/nav-img/nav-3-5.jpg',
                name:'小米电视4A 65英寸',
                price:'2799'
              },
               {
                mainImage:'/imgs/nav-img/nav-3-6.png',
                name:'Redmi 红米电视 70英寸 R70A',
                price:'3499'
              }
            ]
          
        }else{
          // 显示手机
           let {data:{data:{list}}}= await axios.get('json/nav.json')
           this.navs =list
        }
     }
    },
};
</script>
<style scoped lang='scss'>
.navheader {
  width: 95%;
  // border: 1px solid black;
  margin: 0 auto;
  .top {
    height: 50px;
    line-height: 50px;
    background-color: rgb(58, 57, 57);
    color: #ccc;
    .left {
      padding: 0 20px;
      li {
        margin-left: 10px;
      }
    }
    .right {
      margin-right: 10px;
      li {
        margin-left: 10px;
        &:last-child {
          background: orangered url("/imgs/icon-cart-checked.png") no-repeat
            left center;
          width: 100px;
          padding: 0px 20px;
          margin-left: 20px;
          text-align: center;
          line-height: 50px;
        }
      }
    }
  }
  .content {
    height: 50px;
    margin-top: 10px;
    position: relative;
    .left {
      background-color: orangered;
      width: 50px;
      height: 50px;
    }
    .conten {
      line-height: 50px;
      li {
        cursor: pointer;
        padding: 0 20px;
        &:hover{
            color: orangered;
        }
      }
    }
    .right {
      input {
        height: 30px;
        width: 200px;
        outline: none;    
      }
      .img {
        width: 30px;
        height: 30px;
        border: 1px solid rgb(97, 94, 94);
        img {
          width: 15px;
          height: 15px;
          padding: 5px;
        }
      }
    }
  }
  .right1{
    //   border: 1px solid greenyellow;
      margin-top: 20px;
      position: absolute;
      z-index: 999;
      background-color: white;
      .list{
        // position: absolute;
          width: 16%;
        //   border: 1px solid black;
          text-align: center;
          img{
              width: 100%;
          }
          .price{
              color: orangered;
              font-weight: bold;
          }
      }
  }
}
</style>

productparam.vue
<template>
  <div class="productparam">
    <div ref="top"  class="produ_one flex j-s">
      <p>红米Note7</p>
      <ul class="list flex a-c">
        <li>概述</li>
        <li>|</li>
        <li>参数</li>
        <li>|</li>
        <li>用户评价</li>
      </ul>
    </div>
    <div class="produ_two flex">
      <div class="left">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide>
            <img src="/imgs/detail/phone-1.jpg" alt="" />
          </swiper-slide>
          <swiper-slide>
            <img src="/imgs/detail/phone-2.jpg" alt="" />
          </swiper-slide>
          <swiper-slide>
            <img src="/imgs/detail/phone-3.jpg" alt="" />
          </swiper-slide>
          <swiper-slide>
            <img src="/imgs/detail/phone-4.jpg" alt="" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="right">
        <div class="title">{{detail.name}}</div>
        <div>{{detail.subtitle}}</div>
        <div class="orange">小米自营</div>
        <div><span class="orange">{{detail.price}}元</span>  <span style="text-decoration: line-through;">1000</span> </div>
        <div class="address">
            <div>北京 北京市 朝阳区 安定门街道</div>
            <div class="orange">有现货</div>
        </div>
        <div class="title">选择版本</div>
        <div class="flex">
            <div class="type">6GB+64GB 全网通</div>
            <div class="type">4GB+64GB 移动4G</div>
        </div>
        <div class="title">选择颜色</div>
        <div class="orange">
            深空灰
        </div>
        <div>
            <div>
                <span>红米Note7 6GB+64GB 全网通 深灰色</span>
                <span>{{detail.price}}元</span>
            </div>
            <div class="orange">总计：{{detail.price}}元</div>
            <div class="btn">加入购物车</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  async created() {
    let {data: { data }} = await axios.get("json/product.json");
    this.detail = data;
  },
  data() {
    return {
      detail: {},
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    this.swiper.slideTo(3, 1000, false);
    let that =this
        window.onscroll=function(e){
        if(window.pageYOffset>=100){
            that.$refs.top.style ="position:fixed;top:0"
        }else{
            that.$refs.top.style=""
        }
    }
  },
};
</script>
<style scoped lang='scss'>
.productparam {
  width: 95%;
//   height: 800px;
//   border: 1px solid black;
  margin: 20px auto;
  
  .produ_one {
    width: 100%;
    height: 30px;
    z-index: 1000;
    //   border: 1px solid red;
    p {
      font-size: 20px;
      font-weight: bold;
      padding-left: 10px;
    }
    .list {
      margin-right: 10px;
      li {
        color: rgb(119, 118, 118);
        margin-left: 10px;
      }
    }
  }
  .produ_two {
    width: 100%;
    // border: 1px solid red;
    .left {
      width: 500px;
      height: 600px;
      //   border: 1px solid red;
      img {
        width: 500px;
        height: 600px;
      }
    }
    .right {
      flex: 1;
      padding-left:20px;
      .title{
          font-weight: bold;
          font-size: 14px;
          padding: 10px 0;
      }
      .orange{
          color: orangered;
      }
      .type{
          border: 1px solid orangered;
          padding: 20px 50px;
          margin: 0 20px;
      }
      .btn{
          width: 200px;
          padding: 20px 0;
          text-align: center;
          background-color: orangered;
          color: white;
          margin: 20px;
      }
    }
  }
}
</style>