路由配置
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;
}
:nth-child(2) {
text-align: center;
}
}
.menu {
padding: 20px 0;
li {
padding: 0 10px;
}
}
:last-child {
text-align: center;
}
}
</style>
NavHeader.vue
<template>
<div class="navHeader">
<div class="nav flex j-s a-c">
<div class="left">
<ul class="flex a-c j-s">
<li>小米商城</li>
<li>MIUI</li>
<li>IoT</li>
<li>云服务</li>
<li>金融</li>
<li>有品</li>
<li>小爱开放平台</li>
</ul>
</div>
<div class="right flex a-c">
<p class="submit">登录</p>
<p class="shop">
<img src="/imgs/icon-cart-checked.png" alt="" />购物车
</p>
</div>
</div>
<div class="list flex j-s">
<div class="logo"><img src="/imgs/mi-logo.png" alt="" /></div>
<div class="center flex j-s a-c">
<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="search flex j-s a-c">
<input type="text" />
<img src="/imgs/icon-search.png" alt="" />
</div>
</div>
<div v-show="show" class="show flex j-s">
<div class="item" v-for="(item, index) in news" :key="index">
<img :src="item.mainImage" alt="" />
<div>{{ item.name }}</div>
<div>{{ item.price }}</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "NavHeader",
data() {
return {
news: [],
show: false,
};
},
created() {},
methods: {
isShow(val) {
this.show = true;
if (val === 1) {
// 显示电视信息
this.news = [
{
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 {
// 显示手机信息
axios.get("json/nav.json").then(
({
data: {
data: { list },
},
}) => {
this.news = list;
}
);
}
},
},
};
</script>
<style scoped lang='scss'>
.navHeader {
width: 1100px;
padding: 0 10px;
margin: 0 auto;
font-size: 14px;
.nav {
color: white;
background-color: #333333;
height: 50px;
line-height: 50px;
.left {
width: 400px;
margin-left: 20px;
}
.right {
width: 200px;
justify-content: space-between;
box-sizing: border-box;
margin-right: -5px;
padding-right: 10px;
.submit {
text-align: center;
width: 80px;
}
.shop {
background-color: #fe6402;
width: 110px;
height: 42px;
padding-top: 5px;
text-align: center;
margin-top: 3px;
line-height: 35px;
img {
width: 20px;
}
}
}
}
.list {
margin-top: 20px;
height: 60px;
padding: 0 10px 0 20px;
position: relative;
.logo {
width: 50px;
height: 50px;
background-color: #fe6402;
}
.center {
height: 50px;
line-height: 50px;
width: 40%;
font-weight: bold;
li {
cursor: pointer;
&:hover {
color: #fe6402;
}
}
}
.search {
width: 20%;
height: 40px;
border: 1px solid #ccc;
margin-top: 5px;
input {
border: none;
}
img {
width: 20px;
height: 20px;
border-left: 1px solid #ccc;
padding: 10px;
}
}
}
.show {
margin-top: 10px;
position: absolute;
z-index: 999;
background-color: #fff;
.item {
width: 180px;
height: 220px;
img {
width: 180px;
margin-bottom: 10px;
}
div {
text-align: center;
}
:last-child {
color: #fe6402;
}
}
}
}
</style>
ProductParam.vue
<template>
<div class="productParam">
<div ref="top" class="top flex j-s">
<div class="left">红米Note7</div>
<div class="right flex j-s">
<li>描述</li>
<li>|</li>
<li>参数</li>
<li>|</li>
<li>用户评价</li>
</div>
</div>
<div class="content flex">
<div class="left">
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>
<img src="/imgs/detail/phone-1.jpg" />
</swiper-slide>
<swiper-slide>
<img src="/imgs/detail/phone-2.jpg" />
</swiper-slide>
<swiper-slide>
<img src="/imgs/detail/phone-3.jpg" />
</swiper-slide>
<swiper-slide>
<img src="/imgs/detail/phone-4.jpg" />
</swiper-slide>
<!-- 小点div -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<div class="right">
<div class="title">
<h2>{{ detail.name }}</h2>
</div>
<div>{{ detail.subitle }}</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>
<div class="btn">加入购物车</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "ProductParam",
data() {
return {
detail: {},
// 定义swiper的配置选项
swiperOptions: {
// 指定的分页器
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// 配置衔接滑动
loop: true,
// 配置自动播放
// autoplay:true
//
autoplay: {
// 设置间隔时间
delay: 3000,
// 自动播放
autoplay: true,
// 用户操作后，自动播放是否停止
disableOnInteraction: false,
},
// 切换效果
effect: "fade",
},
};
},
created() {
axios.get("json/product.json").then(({ data: { data } }) => {
this.detail = data;
});
},
};
</script>
<style scoped lang='scss'>
.productParam {
width: 1100px;
margin: 0 auto;
height: 600px;
.top {
margin: 10px 0;
.left {
font-weight: bold;
}
.right {
li {
padding: 0 5px;
}
}
}
.content {
.left {
width: 500px;
height: 600px;
img {
width: 500px;
height: 600px;
}
}
.right {
flex: 1;
padding-left: 20px;
height: 600px;
.title {
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
.orange {
color: #fe6402;
}
.type {
border: 1px solid #fe6402;
padding: 20px 50px;
margin: 0 20px;
}
.btn {
width: 160px;
padding: 10px 0;
text-align: center;
background-color: #fe6402;
color: #fff;
margin: 20px;
}
}
}
}
</style>
Detail.vue
<template>
<div class="detail">
<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>
store index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
