1.本案例灵感来源于小米官网?https://www.mi.com/
2.本文在上一篇文章的基础上增加了下级菜单和商品详情页
源码
上一篇：
vue+element简单实现商城网站首页，模仿小米电商商城（一）
官方截图：
?
产品demo效果图：
首页：
二级菜单：
?
?商品详情页：
3.首先创建vue项目，采用开发工具Hbuilder。vue创建项目教程可参考：（一）Vue——如何创建一个Vue项目(完整步骤) - ?（mou）七 - 博客园
4.创建项目后安装elementui，按照官方教程即可，elementui官方地址：Element - The world's most popular Vue UI framework
???创建好的项目目录结构大概这样子：
?
5.整个框架布局分为头部 src/page/top、内容src/page/index和底部src/page/foot。
内容src/page/index为一个共用容器，就像iframe标签一样，所有的路径访问将会显示在容器中，页面跳转的路径定义在src/router/index.js中
6.头部源码
<template>
<div style="font-size: 14px;">
<div style="background-color: #3e3e3e;">
<div style="width: 60%;height: 40px;margin: 0 auto;display: flex;">
<div style="display: flex;flex: 1;">
<div class="active" @click="homePage">小米商城</div>
<div class="active">MUI</div>
<div class="active">LOT</div>
<div class="active">云服务</div>
<div class="active">金融</div>
<div class="active">有品</div>
<div class="active">小爱开发平台</div>
<div class="active">政企服务</div>
<div class="active">下载app</div>
<div class="active">Select Region</div>
</div>
<div style="width: 258px;text-align: right;display: flex;">
<div class="active" @click="loginModal">登录</div>
<div class="active">注册</div>
<div class="active">消息通知</div>
<div class="shop-car">购物车（0）</div>
</div>
</div>
</div>
<div style="width: 60%;margin: 20px auto 0 auto;">
<div style="display: flex;border-radius: 5px;">
<div style="display: flex;flex: 1;">
<img @click="homePage" src="../../../public/img/pic1.jpg" style="width: 50px;height: 50px;"/>
<img @click="homePage" src="../../../public/img/gif1.gif" style="height: 50px;"/>
<div class="title1">小米手机</div>
<div class="title1">红米</div>
<div class="title1">电视</div>
<div class="title1">笔记本</div>
<div class="title1">空调</div>
<div class="title1">新品</div>
<div class="title1">路由器</div>
</div>
<div style="line-height: 50px;">
<el-input placeholder="请输入内容" class="input-with-select">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
</div>
</div>
<!-- 登录弹窗 -->
<el-dialog
title="User Login"
:visible.sync="box"
width="400px"
center>
<div>
<el-form class="login-form"
status-icon
:rules="loginRules"
ref="loginForm"
:model="loginForm"
label-width="0">
<el-form-item prop="username">
<el-input size="small"
@blur="handleLogin"
v-model="loginForm.username"
auto-complete="off"
placeholder="用户名">
<i slot="prefix" class="el-icon-user el-icon--right"/>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input size="small"
@blur="handleLogin"
:type="passwordType"
v-model="loginForm.password"
auto-complete="off"
placeholder="密码">
<i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
<i slot="prefix" class="el-icon-lock el-icon--right"/>
</el-input>
</el-form-item>
<el-form-item>
<el-row :span="24">
<el-col :span="12">
<el-checkbox v-model="loginForm.autoLogin">下次自动登录</el-checkbox>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-button type="primary"
style="width: 100px;"
@click.native.prevent="handleLogin"
class="login-submit">
登录
</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1',
box: false,
loginForm: {
username: "",
//密码
password: "",
autoLogin: false
},
loginRules: {
username: [
{required: true, message: "请输入用户名", trigger: "blur"}
],
password: [
{required: true, message: "请输入密码", trigger: "blur"},
{min: 1, message: "密码长度最少为6位", trigger: "blur"}
]
},
passwordType: "password"
};
},
mounted() {
},
methods: {
homePage(){
this.$router.push({path: '/home/index'});
},
handleSelect(key, keyPath) {
console.log(key);
if(key == '1'){
this.$router.push({path: '/home/index'});
}else{
this.$router.push({path: '/test/index'});
}
},
loginModal(){
this.box = true;
},
showPassword() {
this.passwordType === ""
? (this.passwordType = "password")
: (this.passwordType = "");
},
handleLogin() {//登录
this.$refs.loginForm.validate(valid => {
if (valid) {
const loading = this.$loading({
lock: true,
text: '登录中,请稍后。。。',
spinner: "el-icon-loading"
});
setTimeout(function(){
loading.close();
},1000)
}
});
},
}
};
</script>
<style>
.active{
line-height: 40px;
color: #cfcfcf;
margin-right: 20px;
font-size: 12px;
}
.active:hover{
cursor: pointer;
color: #FFFFFF;
}
.shop-car{
text-align: center;
cursor: pointer;
width: 100px;
line-height: 40px;
height: 40px;
display: inline-block;
background-color: #8f8f8f;
}
.shop-car:hover{
background-color: #e39733;;
}
</style>
