本文主要是介绍【无标题】,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
小米详情
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>
这篇关于【无标题】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!