【无标题】
2021/11/17 6:12:33
本文主要是介绍【无标题】,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
小米详情 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>
这篇关于【无标题】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01后台管理开发学习:新手入门指南
- 2024-11-01后台管理系统开发学习:新手入门教程
- 2024-11-01后台开发学习:从入门到实践的简单教程
- 2024-11-01后台综合解决方案学习:从入门到初级实战教程
- 2024-11-01接口模块封装学习入门教程
- 2024-11-01请求动作封装学习:新手入门教程
- 2024-11-01登录鉴权入门:新手必读指南
- 2024-11-01动态面包屑入门:轻松掌握导航设计技巧
- 2024-11-01动态权限入门:新手必读指南
- 2024-11-01动态主题处理入门:新手必读指南