携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情
通过 vue-cli 脚手架工具，初始化项目，命名为 xiaomi
(1) 在 components 目录下创建 Header.vue 组件、Menu.vue 组件、Banner.vue 组件、Bootentry.vue 组件、
Hotgoods.vue 组件、Hardware.vue 组件、Footer.vue 组件
(2) 在 src 目录新建 page 文件夹，在 page 文件夹下新建 Home.vue 组件
(3) 在 src 目录新建 store 文件夹，在 store 文件夹下创建 index.js 文件
(4) img 文件夹（提供）放在 static 目录下
3.编写头部组件 Header.vue
<template>
<ul class="header">
<li>
<span> 大米网 </span>
<span> | MIUI </span>
<span> | 米聊 </span>
<span> | 游戏 </span>
<span> | 多看阅读 </span>
<span> | 云服务 </span>
<span> | 大米移动版 </span>
<span> | 问题反馈 </span>
<span> | Select Region </span>
</li>
<li>
<span>登陆 </span>
<span>| </span>
<span> 注册 </span>
<span>购物车(0)</span>
</li>
</ul>
</template>
<script>
export default {
name: "Header",
};
</script>
<style scoped lang="scss">
.header {
height: 40px;
line-height: 40px;
background: #333;
width: 100vw;
display: flex;
justify-content: space-between;
padding: 0 30px;
color: #b0b0b0;
li {
span:hover {
cursor: pointer;
color: white;
}
}
li:nth-of-type(1) span {
font-size: 12px;
}
li:nth-of-type(2) span {
font-size: 15px;
}
}
</style>
4.编写菜单组件 Menu.vue
<template>
<ul class="menu">
<li>
<img src="../../public/image/xiaomi_logo.png" alt="" />
</li>
<li>
<a href="">大米手机</a>
<a href="">红米</a>
<a href="">平板</a>
<a href="">电视</a>
<a href="">盒子</a>
<a href="">路由器</a>
<a href="">智能硬件</a>
<a href="">服务</a>
<a href="">社区</a>
</li>
<li>
<input type="text" />
<button>GO</button>
</li>
</ul>
</template>
<script>
export default {};
</script>
<style scoped lang="scss">
.menu {
// width: 100vw;
height: 80px;
// border: 1px solid #ccc;
display: flex;
align-items: center;
margin: 0 30px;
justify-content: space-between;
li:nth-of-type(2) a {
line-height: 80px;
text-decoration: none;
cursor: pointer;
color: #b0b0b0;
margin-right: 20px;
}
li:nth-of-type(3) {
border: 1px solid #f0f0f0;
cursor: pointer;
input {
border: none;
height: 50px;
outline: none;
width: 200px;
}
button {
text-align: center;
background: palevioletred;
cursor: pointer;
border: none;
border-left: 1px solid #f0f0f0;
line-height: 50px;
background: white;
font-weight: bolder;
font-size: 20px;
margin-left: 10px;
padding: 0 10px;
}
}
}
</style>
5.编写 Banner 组件 Banner.vue
<template>
<ul class="banner">
<li class="left">
<div>
<p>手机 平板</p>
<p>></p>
</div>
<div>
<p>电视 盒子</p>
<p>></p>
</div>
<div>
<p>路由器 智能配件</p>
<p>></p>
</div>
<div>
<p>移动电源 插线板</p>
<p>></p>
</div>
<div>
<p>耳机 音箱</p>
<p>></p>
</div>
<div>
<p>电池 存储卡</p>
<p>></p>
</div>
<div>
<p>保护套 后盖</p>
<p>></p>
</div>
<div>
<p>贴膜 其它配件</p>
<p>></p>
</div>
<div>
<p>米兔 服装</p>
<p>></p>
</div>
<div>
<p>背包 其它周边 ––</p>
<p>></p>
</div>
</li>
<li class="right">
<img src="../../public/image/T1vWdTBKDv1RXrhCrK.jpg" alt="">
</li>
</ul>
</template>
<script>
export default {};
</script>
<style scoped lang="scss">
.banner {
margin: 0 30px;
// border: 1px solid;
display: flex;
.left {
background: black;
opacity: 0.8;
width: 20%;
color: white;
border-right: 1px solid;
// margin: 20px 20px;
div {
display: flex;
height: 50px;
line-height: 50px;
justify-content: space-between;
font-size: 13px;
padding: 0 10px;
p:nth-of-type(2) {
font-size: 20px;
}
}
div:hover{
background: #ff6700;
}
}
.right{
flex: 1;
img{
width: 100%;
height: 100%;
}
}
}
</style>
6.编写快速入口组件 Bootentry.vue
<template>
<ul class="bootentry">
<li class="lefta">
<div class="leftaa">
<div v-for="(item, index) in list" :key="index">
<p>{{ item.name1 }}</p>
<p>{{ item.name2 }}</p>
</div>
</div>
</li>
<li class="leftb">
<img src="../../public/image/T184E_BQWT1RXrhCrK.jpg" alt="" />
</li>
<li class="leftc">
<img src="../../public/image/T1yvd_BQDT1RXrhCrK.jpg" alt="" />
</li>
<li class="leftd">
<img src="../../public/image/T1mahQBmKT1RXrhCrK.jpg" alt="" />
</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: [
{
name1: "START",
name2: "开放购买",
},
{
name1: "GROUND",
name2: "企业团购",
},
{
name1: "RETROFIT",
name2: "RETROFIT",
},
{
name1: "CHANNEL",
name2: "F码通道",
},
{
name1: "RECHARGE",
name2: "话费充值",
},
{
name1: "SECURITY ",
name2: "防伪检查",
},
],
};
},
};
</script>
<style scoped lang="scss">
.bootentry {
margin: 15px 30px;
// border: 1px solid;
display: flex;
.lefta,
.leftb,
.leftc {
width: 25%;
box-sizing: border-box;
margin-right: 10px;
}
.leftd {
width: 25%;
}
.lefta {
background: #5f5750;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.leftaa {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
div {
width: 31%;
height: 50px;
line-height: 25px;
color: #fff;
border-bottom: 1px solid;
margin: 0 5px 10px 0;
border-right: 1px solid;
p {
text-align: center;
width: 100%;
font-size: 14px;
}
}
}
}
img {
width: 100%;
height: 100%;
}
}
</style>
7.编写明星单品组件 Hotgoods.vue
<template>
<ul class="hotgods">
<li class="top">
<div>大米明星单品</div>
<div>
<p><</p>
<p>></p>
</div>
</li>
<li class="bottom">
<div v-for="(item, index) in list" :key="index">
<p>
<img :src="item.imgsrc" alt="" />
</p>
<p>{{ item.title }}</p>
<p>{{ item.desc }}</p>
</div>
</li>
<script>
export default {
props:["list"]
// data() {
// return {
// list: [
// {
// img: "image/mitv48!160x110.jpg",
// title: "大米电视2/2S 全系列 ",
// content: "40/48/49/55英寸 现货购买",
// },
// {
// img: "image/T19AbjBCDT1RXrhCrK.jpg",
// title: "大米电视2/2S 全系列 ",
// content: "40/48/49/55英寸 现货购买",
// },
// {
// img: "image/T1meZjBCAT1RXrhCrK.jpg",
// title: "大米电视2/2S 全系列 ",
// content: "40/48/49/55英寸 现货购买",
// },
// {
// img: "image/T1tsEgB7DT1RXrhCrK.jpg",
// title: "大米电视2/2S 全系列 ",
// content: "40/48/49/55英寸 现货购买",
// },
// {
// img: "image/T10TJjB5hT1RXrhCrK.jpg",
// title: "大米电视2/2S 全系列 ",
// content: "40/48/49/55英寸 现货购买",
// },
// ],
// };
// },
};
</script>
<style scoped lang="scss">
.hotgods {
margin: 0 30px;
// 顶部
.top {
display: flex;
justify-content: space-between;
div:nth-of-type(2) {
display: flex;
p {
border: 1px solid #f0f0f0;
padding: 0px 15px;
color: #bebebe;
cursor: pointer;
}
}
}
// 底部
.bottom {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
div {
border-top: 1px solid #ff7600;
background: #fafafa;
width: 20%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300px;
p{
img{
height: 110px;
}
}
p:nth-of-type(2) {
color: #333;
font-size: 14px;
}
p:nth-of-type(3) {
color: #b0b0b0;
font-size: 12px;
}
}
div:not(:last-child) {
margin-right: 10px;
}
}
}
</style>
8.编写智能硬件组件 Hardware.vue
<template>
<ul class="hardware">
<li>智能硬件</li>
<li>
<div class="left">
<img src="image/T1IhLjBC_T1RXrhCrK.jpg" alt="" />
</div>
<div class="right">
<div v-for="(item, index) in list1" :key="index">
<p>
<img :src="item.imgsrc" alt="" />
</p>
<p>{{ item.title }}</p>
<p>{{ item.desc }}</p>
<p>{{ item.price }}</p>
</div>
</div>
</li>
</ul>
</template>
<script>
export default {
props:["list1"]
// data() {
// return {
// list: [
// {
// imgsrc: "image/T1odEjB5bT1RXrhCrK.jpg",
// title: "大米智能家庭套装",
// desc: "3分钟快速安装，30多种智能玩法",
// price: "199元",
// },
// {
// imgsrc: "image/T1JKxvBXhv1RXrhCrK.jpg",
// title: "大米随身WIFI 8GB U盘版",
// desc: "随身上网神器，内置8GB U盘",
// price: "49.9元",
// },
// {
// imgsrc: "image/T18yZQBCET1RXrhCrK.jpg",
// title: "小蚁智能摄像机",
// desc: "能看能听能说，手机远程观看",
// price: "149元",
// },
// {
// imgsrc: "image/T1YoZQByYT1RXrhCrK.jpg",
// title: "大米体重称",
// desc: "高精度压力传感器 ｜ 手机管理全家健康",
// price: "99元",
// },
// {
// imgsrc: "image/T16nVjBCKT1RXrhCrK.jpg",
// title: "小蚁运动机",
// desc: "边玩边录边拍，手机随时分享",
// price: "399元",
// },
// {
// imgsrc: "image/T18zWQB4WT1RXrhCrK.jpg",
// title: "大米路由器 mini",
// desc: "主流双频AC智能路由器，性价比之王",
// price: "129元",
// },
// {
// imgsrc: "image/T1oixjB5bT1RXrhCrK.jpg",
// title: "大米智能插座",
// desc: "手机远程遥控开关，带USB接口",
// price: "59元",
// },
// {
// imgsrc: "image/T1KzbQBvbT1RXrhCrK.jpg",
// title: "大米水质TDS检测笔",
// desc: "准确检测家中水质纯度",
// price: "39元",
// },
// ],
// };
};
</script>
<style scoped lang="scss">
.hardware {
// width: 100%;
background: #f5f5f5;
margin-top: 30px;
li:nth-of-type(1) {
padding: 30px 0 15px 30px;
}
li:nth-of-type(2) {
width: 100%;
padding: 0 30px 50px 30px;
display: flex;
.left {
width: 265px;
img {
width: 100%;
}
}
.right {
display: flex;
flex: 1;
margin-left: 10px;
flex-wrap: wrap;
div {
background: #fff;
margin-right: 10px;
margin-bottom: 10px;
width: 262px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
p:nth-of-type(3) {
font-size: 14px;
color: #ccc;
}
p:nth-of-type(4) {
color: tomato;
}
}
}
}
}
</style>
9.编写底部组件 Footer.vue
<template>
<ul class="footer">
<li class="top">
<a href=""> 1小时快修服务 </a>
<span>|</span>
<a href="">7天无理由退货</a>
<span>|</span>
<a href="">15天免费换货</a>
<span>|</span>
<a href="">满150元包邮</a>
<span>|</span>
<a href="">520余家售后网点</a>
</li>
<li class="content">
<div>
<div>
<span>帮助中心</span>
<span>服务支持</span>
<span>大米之家</span>
<span>关注我们</span>
</div>
<div>
<span>购物指南 </span>
<span>售后政策</span>
<span>大米之家</span>
<span>新浪微博</span>
</div>
<div>
<span>支付方式</span>
<span>自助服务</span>
<span>服务网点</span>
<span>大米部落</span>
</div>
<div>
<span>配送方式</span>
<span>相关下载</span>
<span>预约亲临到店服务</span>
<span>官方微信</span>
</div>
</div>
<div>
<div>
<p>400-100-5678</p>
<p>周一至周日 8:00-18:00</p>
<p>（仅收市话费）</p>
<p>24小时在线客服</p>
</div>
</div>
</li>
<li class="tfoot">
<img src="image/xiaomi_logo.png" alt="">
<a href="">大米网</a>|
<a href="">MIUI</a>|
<a href="">多看书城</a>|
<a href="">大米路由器</a>|
<a href="">大米后院</a>|
<a href="">大米天猫店</a>|
<a href="">大米淘宝直营店</a>|
<a href="">大米网盟</a>|
<a href="">问题反馈</a>|
<span>Select Region 5555555号</span>
</li>
</ul>
</template>
<script>
export default {};
</script>
<style scoped lang="scss">
.footer {
width: 100%;
// 顶部
.top {
border-bottom: 1px solid #bebebe;
// margin: 0 30px;
display: flex;
justify-content: space-around;
margin: 0 100px;
span,
a {
padding: 0 20px;
height: 50px;
line-height: 50px;
text-decoration: none;
}
a {
color: #bebebe;
}
}
// ？中间
.content {
margin: 0 100px;
display: flex;
div:nth-of-type(1) {
margin-top: 20px;
div {
margin-bottom: 20px;
margin-left: 20px;
display: flex;
span {
display: block;
width: 230px;
text-align: left;
}
}
div:not(:first-child) {
color: #bebebe;
font-size: 14px;
}
}
div:nth-of-type(2) {
display: flex;
justify-content: center;
align-items: center;
div {
// height: 160px;
border-left: 1px solid #bfbfbf;
padding: 0 0 0 30px;
text-align: center;
p{
margin-bottom: 10px;
}
p:nth-of-type(1) {
color: #ff6700;
font-size: 20px;
}
p:nth-of-type(4) {
color: #ff6700;
border: 1px solid #ff6700;
}
}
}
}
// 底部
.tfoot{
padding-left: 60px;
background: #f5f5f5;
display: flex;
align-items: center;
height: 60px;
img{
margin-right: 10px;
}
a,span{
text-decoration: none;
color: #757575;
}
}
}
</style>
