【原创纯手打】VUE项目写小米商城官网(附源码)
【原创纯手打】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>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
5
0- 0
已为社区贡献2条内容
所有评论(0)