【原创纯手打】VUE项目写小米商城官网(附源码)

其实还有组件封装，还有搜索，登录注册之类的，但我只做了个轮播，搜索本地存储之类的我之前博客里有，其实真正项目中好多重复性的可视化模块都是数组或对象后台遍历渲染上去的，并不是我这样直接写在HTML中，我这并没有那样的接口，有的也不适合

功能不是我不会而是我懒，1200多行代码，但是静态页面是全部写完了，除了功能

其实css那些是最累人的，都是一行一行堆上去，排版也简单，但就是麻烦

废话不多BB，直接上代码，1200行直接复制就行，如果堆到一个页面去加载看起来太麻烦，看的不爽就创个css挂到main.js上

图我就不放了，太大了

<template><div><div class="box"><div class="po1"><img src="../assets/img/米粉卡.png" />购物车（0）</div><header><div class="box1"><p>小米商城</p><p>|</p><p>MIUI</p><p>|</p><p>loT</p><p>|</p><p>云服务</p><p>|</p><p>金融</p><p>|</p><p>有品</p><p>|</p><p>小爱开放平台</p><p>|</p><p>企业团购</p><p>|</p><p>资质证照</p><p>|</p><p>协议规则</p><p>|</p><p>下载app</p><p>|</p><p>Select Location</p></div><div class="box2"><p>登录</p><p>|</p><p>注册</p><p>|</p><p>消息通知</p></div></header></div><div class="box3"><img src="../assets/logo.png" /><div class="box31"><p>小米手机</p><p>Redmi红米</p><p>电视</p><p>笔记本</p><p>家电</p><p>路由器</p><p>智能硬件</p><p>服务</p><p>社区</p></div><div class="box32"><div class="box321"><div class="box3211"><img src="../assets/icon/jiance.png" alt="" /></div></div></div></div><div class="box4"><div class="box41"><div class="box411"><div class="box4111">手机 电话卡</div><div class="box4112">></div></div><div class="box411"><div class="box4111">电视 盒子</div><div class="box4112">></div></div><div class="box411"><div class="box4111">笔记本 平板</div><div class="box4112">></div></div><div class="box411"><div class="box4111">家电 插线板</div><div class="box4112">></div></div><div class="box411"><div class="box4111">出行 穿戴</div><div class="box4112">></div></div><div class="box411"><div class="box4111">智能 路由器</div><div class="box4112">></div></div><div class="box411"><div class="box4111">电源 配件</div><div class="box4112">></div></div><div class="box411"><div class="box4111">健康 儿童</div><div class="box4112">></div></div><div class="box411"><div class="box4111">耳机 音箱</div><div class="box4112">></div></div><div class="box411"><div class="box4111">生活 箱包</div><div class="box4112">></div></div></div><div class="box42"><el-carousel trigger="click" height="450px"><el-carousel-item v-for="(item, index) in banner" :key="index"><img :src="item"></el-carousel-item></el-carousel></div></div><div class="box5"><div class="box51"><div class="box511"><img src="../assets/img/小米秒杀.png"><p>小米秒杀</p></div><div class="box511"><img src="../assets/img/企业团购.png"><p>企业团购</p></div><div class="box511"><img src="../assets/img/F码通道.png"><p>F码通道</p></div><div class="box511"><img src="../assets/img/米粉卡.png"><p>米粉卡</p></div><div class="box511"><img src="../assets/img/以旧换新.png"><p>以旧换新</p></div><div class="box511"><img src="../assets/img/话费充值.png"><p>话费充值</p></div></div><div class="box52"><div class="box521"><img src="../assets/shop1/1.jpg"></div><div class="box521"><img src="../assets/shop1/2.jpg"></div><div class="box521"><img src="../assets/shop1/3.jpg"></div></div></div><div class="bo6"><div class="box6"><div class="box61"><p>小米闪购</p><div class="box611"><img src="../assets/icon/zuo.png"><img src="../assets/icon/you.png"></div></div><div class="box62"><div class="box621"><img src="../assets/shop/standing-12.png"><h4></h4><p></p><div class="box6211"><span></span><s></s></div></div><div class="box621"><img src="../assets/shop/standing-13.png"><h4>米家 wiha 8合1棘轮螺丝刀...</h4><p>轻巧集成 无忧家装</p><div class="box6211"><span>89元</span><s>99元</s></div></div><div class="box621"><img src="../assets/shop/standing-14.png"><h4>小米全面屏电视E55A 灰色...</h4><p>全面屏设计，人工智能语音</p><div class="box6211"><span>1999元</span><s>2099元</s></div></div><div class="box621"><img src="../assets/shop/standing-15.png"><h4>Redmi全自动波轮洗衣机 1...</h4><p>一键操作，父母都爱用</p><div class="box6211"><span>699元</span><s>799元</s></div></div><div class="box621"><img src="../assets/shop/standing-16.png"><h4>米家互联网洗烘一体机 10K...</h4><p>智能烘干，即洗即穿</p><div class="box6211"><span>1899元</span><s>2299元</s></div></div></div></div></div><div class="bo11"><div class="bo111"><div class="box61"><p>手机</p><div class="box611"><p>查看全部</p><img src="../assets/icon/zuo.png"><img src="../assets/icon/you.png"></div></div><div class="bo112"><div class="bo1121"><p>小米MIX 2S</p><h1>立省200元</h1><p>四曲面陶瓷机身 | 骁龙845</p><span>1799<b>元起</b></span><img src="../assets/shop/standing-22.png"></div><div class="bo1122"><div class="bo11221"><img src="../assets/shop/standing-12.png"><p>Redmi K20 Pro 6GB+128GB</p><b>骁龙855，弹出全面屏</b><span>2299元<s>2599元</s></span></div><div class="bo11221"><img src="../assets/shop/standing-13.png"><p>Redmi K20 Pro 6GB+128GB</p><b>骁龙855，弹出全面屏</b><span>2299元<s>2599元</s></span></div><div class="bo11221"><img src="../assets/shop/standing-14.png"><p>Redmi K20 Pro 6GB+128GB</p><b>骁龙855，弹出全面屏</b><span>2299元<s>2599元</s></span></div><div class="bo11221"><img src="../assets/shop/standing-15.png"><p>Redmi K20 Pro 6GB+128GB</p><b>骁龙855，弹出全面屏</b><span>2299元<s>2599元</s></span></div><div class="bo11221"><img src="../assets/shop/standing-16.png"><p>Redmi K20 Pro 6GB+128GB</p><b>骁龙855，弹出全面屏</b><span>2299元<s>2599元</s></span></div><div class="bo11221"><img src="../assets/shop/standing-17.png"><p>Redmi K20 Pro 6GB+128GB</p><b>骁龙855，弹出全面屏</b><span>2299元<s>2599元</s></span></div><div class="bo11221"><img src="../assets/shop/standing-19.png"><p>Redmi K20 Pro 6GB+128GB</p><b>骁龙855，弹出全面屏</b><span>2299元<s>2599元</s></span></div><div class="bo11221"><img src="../assets/shop/standing-20.png"><p>Redmi K20 Pro 6GB+128GB</p><b>骁龙855，弹出全面屏</b><span>2299元<s>2599元</s></span></div></div></div></div></div><div class="bo7"><div class="box7"><div class="box71"><div class="box711"><h1>小米电视816感恩钜惠</h1><p>限量抢816神券</p></div><img src="../assets/shop/standing-16.png"></div></div></div><div class="bo8"><div class="box8"><div class="box81"><p>视频</p><div class="box811"><p>查看全部</p><img src="../assets/icon/you.png"></div></div><div class="box82"><div class="box821"><img src="../assets/shop1/2.jpg"><div class="box8211"><p>小米CC9</p><span>深蓝星球</span></div><div class="box822"><img src="../assets/icon/bofang.png"></div></div><div class="box821"><img src="../assets/shop1/2.jpg"><div class="box8211"><p>Redmi Note 7系列</p><span>镜花水月</span></div><div class="box822"><img src="../assets/icon/bofang.png"></div></div><div class="box821"><img src="../assets/shop1/2.jpg"><div class="box8211"><p>黑鲨游戏手机2 Pro</p><span>指尖主宰 发布会</span></div><div class="box822"><img src="../assets/icon/bofang.png"></div></div><div class="box821"><img src="../assets/shop1/2.jpg"><div class="box8211"><p>小米手环4</p><span>改变从今开始</span></div><div class="box822"><img src="../assets/icon/bofang.png"></div></div></div></div></div><div class="box9"><div class="box91"><img src="../assets/icon/jiance.png" alt=""><p>预约维修服务</p></div><p>|</p><div class="box91"><img src="../assets/icon/taishiganzhi.png" alt=""><p>预约维修服务</p></div><p>|</p><div class="box91"><img src="../assets/icon/weixie.png" alt=""><p>预约维修服务</p></div><p>|</p><div class="box91"><img src="../assets/icon/yunweiguanli.png" alt=""><p>预约维修服务</p></div><p>|</p><div class="box91"><img src="../assets/icon/bofang.png" alt=""><p>预约维修服务</p></div></div><div class="box10"><div class="box101"><div class="box1011"><p>帮助中心</p><span>账户管理</span><span>购物指南</span><span>订单操作</span></div><div class="box1011"><p>服务支持</p><span>售后政策</span><span>自助服务</span><span>相关下载</span></div><div class="box1011"><p>线下门店</p><span>小米之家</span><span>服务网点</span><span>授权体验店</span></div><div class="box1011"><p>关于小米</p><span>了解小米</span><span>加入小米</span><span>投资者关系</span></div><div class="box1011"><p>关注我们</p><span>新浪微博</span><span>官方微信</span><span>联系我们</span></div><div class="box1011"><p>特色服务</p><span>F码通道</span><span>礼物码</span><span>防伪查询</span></div></div><div class="box102"><h2>400-100-5678</h2><p>周一至周日 8:00-18:00</p><span>仅收市话费</span><div class="box103"><img src="../assets/icon/yunweiguanli.png">人工客服</div></div></div><div class="boxx1"><img src="../assets/logo.png"><div class="boxx11"><p>小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 路由器 | 米粉卡 | 政企服务 | 小米天猫店 | 隐私政策 | 商城用户协议 | 账号协议 | 问题反馈 | 廉正举报 | 诚信合规 | Select Location</p><span>@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号</span><span>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证(京) -非经营性-2014-0090 营业执照 医疗器械公告</span><span>增值电信业务许可证 网络食品经营备案（京） 【2018】WLSPJYBAHF-12 食品经营许可证</span><span>违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span><div class="boxx111"><div class="boxx1111"><img src="../assets/icon/bofang.png"><h2>Truste</h2></div><div class="boxx1111"><img src="../assets/icon/jiance.png"><p>诚信网站<br>示范企业</p></div><div class="boxx1111"><img src="../assets/icon/taishiganzhi.png"><p>可信网站<br>信用评价</p></div><div class="boxx1111"><img src="../assets/icon/wangluogongji.png"><p>网上交易<br>保障中心</p></div><div class="boxx1111"><img src="../assets/icon/weixie.png"><p>诚信经营<br>放心消费</p></div></div></div></div><div class="bb1"><p>探索黑科技，小米为发烧而生！</p></div></div>
</template>
<script>
export default {name: "Vue",data() {return {banner: [require("@/assets/banner/1.jpg"),require("@/assets/banner/2.jpg"),require("@/assets/banner/3.jpg"),require("@/assets/banner/4.jpg"),require("@/assets/banner/5.jpg"),require("@/assets/banner/6.jpg"),require("@/assets/banner/7.jpg")]};},mounted() {},methods: {},beforeRouteEnter(to, from, next) {document.querySelector("body").setAttribute("style", "margin:0;padding:0");next();},computed: {}
};
</script>
<style lang='scss'>
.box {width: 100%;margin: 0 auto;background-color: rgba(0, 0, 0, 0.716);
}
header {height: 40px;width: 1200px;margin: 0 auto;position: relative;display: flex;justify-content: space-between;color: silver;.box1 {display: flex;align-items: center;}.box2 {display: flex;align-items: center;margin-right: 100px;p {margin-left: 7px;}}
}
.po1 {position: absolute;top: 0;right: 100px;display: flex;justify-content: center;align-items: center;width: 130px;height: 45px;background-color: rgb(103, 103, 103);color: silver;img {width: 40px;height: 40px;}
}
.box1>p {margin-right: 7px;display: flex;
}
.box3 {width: 1200px;height: 120px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;>img {width: 60px;height: 60px;}.box31 {display: flex;p {margin: 0 10px;}}.box32 {display: flex;.box321 {display: flex;width: 220px;height: 40px;border: 1px solid silver;justify-content: flex-end;.box3211 {width: 50px;height: 100%;display: flex;align-items: center;justify-content: center;border-left: 1px solid silver;img {width: 25px;height: 25px;}}}}
}
.box4 {width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;.box41 {display: flex;flex-direction: column;width: 200px;background: rgba(0, 0, 0, 0.3);color: white;padding: 20px 0;font-weight: 500;height: 410px;justify-content: space-between;.box411 {display: flex;padding: 10px 25px;justify-content: space-between;}}.box42 {flex: 1;img {width: 100%;height: 100%;}}
}
.box411:hover {background: rgba(0, 0, 0, 0.658);transition: all, 0.9s;
}
.box5 {width: 1200px;height: 200px;margin: 15px auto 0;display: flex;justify-content: space-between;.box51 {background: rgb(87, 93, 20);width: 200px;height: 160px;display: flex;font-size: 12px;flex-wrap: wrap;align-items: center;box-sizing: border-box;.box511 {width: 33%;display: flex;flex-direction: column;justify-content: center;align-items: center;img {width: 40px;height: 40px;}p {margin: 0;color: white;}}}.box52 {flex: 1;display: flex;height: 160px;.box521 {margin-left: 15px;flex: 1;img {width: 100%;height: 100%;}}}
}
.bo6 {width: 100%;background: rgb(244, 244, 244);
}
.box6 {width: 1200px;margin: 0 auto;display: flex;flex-direction: column;.box61 {display: flex;justify-content: space-between;align-items: center;p {font-size: 20px;}.box611 {display: flex;img {border: 1px solid black;width: 50px;height: 30px;}}}.box62 {display: flex;justify-content: space-between;align-items: center;.box621 {margin: 10px;flex: 1;display: flex;flex-direction: column;background: white;align-items: center;padding: 30px 10px;font-size: 14px;height: 337px;img {width: 100%;}p {margin: 10px 0;color: rgb(139, 139, 139);}h4 {margin: 0;}span {color: yellowgreen;font-size: 20px;}s {color: silver;}}}
}
.bo7 {width: 100%;background: rgb(244, 244, 244);padding-top: 20px;.box7 {width: 1200px;margin: 0 auto;background: red;display: flex;.box71 {display: flex;justify-content: space-between;img {width: 100px;}.box711 {display: flex;flex-direction: column;justify-content: center;margin: 10px 200px 0 200px;color: white;h1 {margin: 0;}}}}
}
.bo8 {width: 100%;background: rgb(244, 244, 244);padding-top: 20px;padding-bottom: 20px;.box8 {width: 1200px;margin: 0 auto;display: flex;flex-direction: column;.box81 {display: flex;justify-content: space-between;font-size: 20px;.box811 {display: flex;align-items: center;img {width: 30px;height: 30px;border: 1px solid black;border-radius: 50%;}}}.box82 {display: flex;justify-content: space-between;align-items: center;.box821 {flex: 1;padding: 0 10px;position: relative;img {width: 100%;height: 100%;}.box8211 {height: 100px;display: flex;flex-direction: column;align-items: center;background: white;p {margin: 20px 0 0 0;}}}.box822 {display: flex;position: absolute;bottom: 110px;left: 20px;img {width: 30px;height: 30px;}}}}
}
.box9 {width: 1200px;margin: 0 auto;display: flex;justify-content: space-around;align-items: center;padding: 20px 0;.box91 {display: flex;align-items: center;img {width: 35px;height: 35px;}}
}
.box10 {width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;border-top: 1px solid black;.box101 {width: 800px;display: flex;justify-content: space-around;margin-top: 40px;.box1011 {display: flex;flex-direction: column;span {margin: 5px 0;color: rgb(106, 106, 106);}}}.box102 {display: flex;flex-direction: column;border-left: 1px solid black;margin-top: 40px;padding: 0 50px;justify-content: center;align-items: center;h2 {margin: 0;color: yellowgreen;}p {margin: 0;}span {margin-bottom: 10px;}.box103 {border: 3px solid yellowgreen;color: yellowgreen;display: flex;img {width: 20px;height: 20px;}}}
}
.bo11 {width: 100%;background: rgb(244, 244, 244);.bo111 {width: 1200px;margin: 0 auto;display: flex;flex-direction: column;.box61 {display: flex;justify-content: space-between;align-items: center;p {font-size: 20px;}.box611 {display: flex;align-items: center;img {border: 1px solid black;width: 50px;height: 30px;}}}}.bo112 {display: flex;justify-content: space-between;align-items: center;.bo1121 {padding-top: 50px;width: 230px;height: 735px;background-color: rgb(203, 151, 53);display: flex;flex-direction: column;align-items: center;img {width: 250px;}h1 {margin: 0;font-weight: normal;color: white;}p {margin: 0;color: rgb(226, 226, 226);}span {margin-top: 30px;color: rgb(178, 0, 0);font-size: 30px;margin-bottom: 100px;b {font-weight: normal;font-size: 15px;}}}.bo1122 {flex: 1;display: flex;flex-wrap: wrap;.bo11221 {width: 22%;display: flex;flex-direction: column;box-sizing: border-box;align-items: center;background-color: white;justify-content: space-between;padding-bottom: 20px;margin: 10px;img {width: 100%;}p {margin: 20px 0 0 0;}b {font-weight: normal;color: silver;}span {color: yellowgreen;margin-top: 10px;s {color: silver;font-size: 12px;}}}}}
}
.bo11221:hover {box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.701);transform: scale(1.05);transition: all 0.4s;
}
.box821:hover {box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.701);transform: scale(1.05);transition: all 0.4s;
}
.box621:hover {box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.701);transform: scale(1.05);transition: all 0.4s;
}
.boxx1{width: 1200px;margin: 60px auto;display: flex;align-items: flex-start;img{width: 60px;height: 60px;}.boxx11{display: flex;flex-direction: column;margin-left: 10px;p{margin: 0;font-size: 14px;color: rgb(94, 94, 94);}span{font-size: 14px;color: rgb(170, 170, 170);}.boxx111{display: flex;img{width: 50px;height: 50px;}.boxx1111{display: flex;align-items: center;h2{margin: 0;}p{margin: 0;}}}}
}
.bb1{width: 1200px;margin: 0 auto;color: silver;font-size: 25px;text-align: center;font-family: "楷体","楷体_GB2312";
}
</style>

【原创纯手打】VUE项目写小米商城官网(附源码)相关推荐

利用SpringBoot和Vue实现前后端分离（附源码）
利用SpringBoot和Vue实现前后端分离(附源码) 引言: 本文主要分享了SpringBoot和Vue整合实现前后端分离,实现了简单的增删查改:包括:项目的搭建.后端的实现.前台的实现:(附源码 ...
Java毕设项目在线答题系统计算机（附源码+系统+数据库+LW）
Java毕设项目在线答题系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecli ...
Java毕设项目便利店库存管理计算机（附源码+系统+数据库+LW）
Java毕设项目便利店库存管理计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecl ...
一品资源网自用官网模板源码下载站（带手机模板）
★模板介绍★ 一品资源网自用官网模板源码下载站(带手机模板)本套源码为dedecms二次开发而来,也是本站一品资源网自用的原版本打包,提供本套作品的初衷是为了能上更多想做下载站的站长朋友拥有一套更容易 ...
Java毕设项目信贷管理系统计算机（附源码+系统+数据库+LW）
Java毕设项目信贷管理系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecli ...
Java毕设项目电费管理系统计算机（附源码+系统+数据库+LW）
Java毕设项目电费管理系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecli ...
java计算机毕业设计vue校园菜鸟驿站管理系统（附源码、数据库）
java计算机毕业设计vue校园菜鸟驿站管理系统(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecl ...
css3 烟蚊香_如何使用纯CSS实现蚊香燃烧的效果（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现传统蚊香燃烧的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载每日前端实战系列的全部源代码请从 ...
最新多用途的APP软件业务介绍官网模板源码
正文: 最新多用途的APP软件业务介绍官网模板源码,一款蓝色渐变风格的app应用软件介绍,IT软件科技公司官网HTML模板. 它适用于所有创意的科技公司网站. 如Saas登陆.软件登陆.创意代理.企业 ...
网络工作室官网HTML源码
一个简单的企业网络工作室主页官网html网站源码开源无加密 ps文件,设计图纸均已开源,上传即用源码下载:网络工作室官网HTML源码-小程序文档类资源-CSDN下载

【原创纯手打】VUE项目写小米商城官网(附源码)

【原创纯手打】VUE项目写小米商城官网(附源码)相关推荐

最新文章

热门文章